User:Tempest Dawn/vector.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* New fonts for headers & navigation to replace EasonPro */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&family=Oswald:[email protected]&display=swap');
/* #region TEMPORARY HACKS THAT MUST NOT BE ALLOWED TO SURVIVE THE WINTER */
/* no root background in print */
@media print {
body {
background: none transparent !important;
}
}
/* hide pre-content stuff on the fake main page mockup we're working on */
.page-User_Erin_Umbreon_Sandbox_Main_page_rewrite #firstHeading,
.page-User_Erin_Umbreon_Sandbox_Main_page_rewrite #mw-content-subtitle {
display: none;
}
/* replace watchlist star with normal text tab */
div#mw-head .vector-menu-tabs .mw-watchlink.icon a {
width: auto;
height: 100%;
padding: 0 8px;
}
div#mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
display: none;
}
/* hack color/shadow for "More" dropdown chevron */
.vector-menu-dropdown .vector-menu-heading::after {
filter: brightness(10) drop-shadow(0 1px #0008);
}
/* various hacks to make the tools shoved into the userbar look better */
* + #pt-userpage::before,
* + #pt-anonuserpage::before,
* + #pt-createaccount::before {
content: "•";
margin-right: 0.75em;
}
#pt-fw-disable a, #pt-fw-enable a {
filter: brightness(100);
position: relative;
top: 0.2em;
}
.skin-vector-legacy #pt-uls .uls-trigger::before {
filter: invert(1);
opacity: 1;
padding-top: 0.1em;
}
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-userpage a {
background-image: none;
padding: 0;
}
/* #endregion TEMPORARY HACKS THAT MUST NOT BE ALLOWED TO SURVIVE THE WINTER */
:root {
/* Main content colors */
--color-base: #36414f;
--color-emphasized: #000000;
--background-color-base: white;
--background-color-neutral-subtle: #f8f9fa;
--background-color-interactable-subtle: #f8f9fa;
/* Link colors */
/* --link-color: red; */
/* --link-visited-color: green; */
/* --link-external-color: pink; */
/* --link-external-visited-color: purple; */
/* Text color for text and buttons directly on body background */
--user-menu-color: white;
/* Font families */
--font-family-body: sans-serif;
--font-family-heading: "IBM Plex Sans", sans-serif;
--border-radius: 0.5rem;
--border-radius-minor: 0.25rem;
--border-radius-subtle: 3px;
}
/* Root background */
@media screen {
body {
background-color: rgb(218,232,247);
background-position-x: 0%, 0%;
background-position-y: 0%, 0%;
background-attachment: scroll, scroll;
background-image: linear-gradient(
to bottom,
rgb(55, 91, 153) 0px,
rgb(54, 103, 175) 100px,
rgb(59, 124, 190) 400px,
rgb(218,232,247) 900px
);
background-size: auto, auto;
background-origin: padding-box, padding-box;
background-clip: border-box, border-box;
}
}
/* Font resets */
body {
font-family: var(--font-family-body);
}
.mw-body h1,
.mw-body h2 {
font-family: var(--font-family-heading);
font-weight: 500;
}
/* #region Side navigation panel */
/* Adjust sidebar width */
:root {
--mw-panel-width: 10rem;
}
div#mw-panel {
width: var(--mw-panel-width);
}
div#footer, #mw-head-base, div#content, #left-navigation {
margin-left: var(--mw-panel-width);
}
/* hide sidebar on print */
@media print {
div#mw-panel {
display: none;
}
div#footer, #mw-head-base, div#content {
margin-left: 0;
}
}
/* Make panel larger when there's screen space */
@media screen and (min-width: 982px) {
:root {--mw-panel-width: 12rem}
/* overriding the old way of doing it that doesn't make sense now */
#mw-panel {padding-left: 0}
}
/* Center logo regardless of sidebar width */
#p-logo {
margin-inline: auto;
}
/* Boxes for sidebar content */
.vector-legacy-sidebar .vector-menu-portal {
font-family: var(--font-family-body);
margin: 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--background-color-base, #FFF);
border-radius: var(--border-radius);
box-shadow: 0 2px 4px #0002;
font-weight: normal;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content {margin: 0}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content ul {padding-top: 0}
/* Remove bold from sidebar links */
div#mw-panel ul.vector-menu-content-list > li > a {
font-weight: normal;
}
/* Sidebar box headings, including TOC heading which otherwise looks different */
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading,
#mw-panel nav.sidebar-toc-heading h3 {
margin: 0;
margin-bottom: 0.25rem;
padding: 0;
font-family: var(--font-family-heading);
font-weight: bold;
font-size: 0.85em; /* a bit larger than the default of 0.75em */
/* replace gradient divider line with a simple border */
background: none;
border: 0; /* reset other borders for sticky TOC specifically */
border-bottom: 1px solid var(--border-color-base, #a2a9b1);
}
/* Tighten up sticky TOC collapse arrow */
#mw-panel nav.sidebar-toc-heading h3::before {margin-left: 0}
/* Use link text color and bold text for sticky TOC links */
#mw-panel nav.sidebar-toc-heading .toctext {
color: var(--link-color);
}
#mw-panel nav.sidebar-toc-heading .tocsection-current > a .toctext {
font-weight: bold;
}
/* #endregion */
/* #region User header */
/* Change personal navigation menu text and icons to white */
#p-personal {
color: var(--user-menu-color);
}
#p-personal a {
color: inherit;
}
/* #endregion */
/* #region Article header (read/edit/search/etc) */
/* Change background and borders of head */
:root {
--mw-head-height: 40px;
}
#mw-head-base {
bottom: 0;
height: var(--mw-head-height);
margin-top: calc(-1 * var(--mw-head-height));
background:
linear-gradient(to bottom,
#6A6A6900,
color-mix(#6A6A6900, #3F3D3EAA),
#3F3D3E
),
var(--noise-texture),
linear-gradient(to bottom,
#6A6A69,
#3F3D3E
)
#3F3D3E;
box-shadow:
inset 0 1px 0.5px #fff2,
0 0 0 1px #0004;
border: 0;
border-bottom: 1px solid #3F3D3E;
border-top-left-radius: var(--border-radius);
/* Round right corner only if viewport is wider than content pane */
/*
* inner expression is:
* -inf if viewport < --fixed-width
* 0 if viewport = --fixed-width
* +inf if viewport > --fixed-width
* and clamp() is used to map result to either 0 or --border-radius
*/
border-top-right-radius: clamp(
0px,
(100vw - var(--fixed-width)) / 0,
var(--border-radius)
);
}
/* Individual tabs */
#mw-head .vector-menu-tabs-legacy .vector-menu-content-list > li,
.vector-menu-dropdown .vector-menu-heading {
height: calc(var(--mw-head-height) - 0.25rem);
margin-top: 0.25rem;
/* center tab text vertically */
display: flex;
align-items: center;
border: 1px solid transparent;
border-bottom: 0;
border-top-left-radius: var(--border-radius-minor);
border-top-right-radius: var(--border-radius-minor);
color: #f7f7f7;
font-family: "Oswald", sans-serif;
font-size: 1rem;
font-weight: normal;
text-shadow: 0 1px #0008;
}
/* Links within tabs */
div#mw-head .vector-menu-tabs li a,
div#mw-head .vector-menu-tabs li a:visited {
font: inherit;
color: inherit;
height: 100%;
/* recenter text while maintaining larger clickable area */
padding-block: 0;
align-self: stretch;
display: flex;
align-items: center;
}
/* Additional un-fucking of the "more" dropdown because it's special */
#mw-head .vector-menu-dropdown .vector-menu-heading {
padding-block: 0;
}
/* Change font color and weight of selected tab */
div#mw-head ul.vector-menu-content-list > li.selected {
background: var(--background-color-base, #fff);
border-color: #3F3D3E;
color: color-mix(var(--color-emphasized), var(--color-base));
text-shadow: 0 1px #0001;
}
/* fix watchlink icon overlapping with hidden label text */
div#mw-head .vector-menu-tabs .mw-watchlink.icon a {
/* text-indent: 9999px; */ /* reintroduce this later when we bring the icon back */
}
/* Tweak leading padding of first tab group */
nav#p-namespaces {
margin-left: 1rem !important; /* overriding !important in MW default CSS */
}
.vector-menu-tabs-legacy {
padding-left: 0;
}
/* Search bar styling */
.vector-search-box {
margin: 0 0.5rem;
height: 40px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.vector-search-box form {margin: 0}
div#simpleSearch {background: none}
.vector-search-box-input {
background-color: var(--background-color-interactable-subtle);
border: 0;
border-radius: var(--border-radius-minor);
box-shadow: 0 1px 1px #0008;
}
/* Use native browser outline styles for search box */
.vector-search-box-input:focus,
.vector-search-box-inner:hover .vector-search-box-input:focus {
outline: auto;
box-shadow: 0 1px 1px #0008;
}
/* Style search suggestions and use browser highlight colors */
.suggestions {
border-radius: var(--border-radius-minor);
box-shadow: 0 1px 2px #0008;
margin-top: 3px;
}
.suggestions-results {
border-width: 0;
border-color: currentcolor;
}
.suggestions-result-current {
background: Highlight;
color: HighlightText;
}
.suggestions-special {
border-width: 0;
border-top-width: 1px;
}
.suggestions-result-current .special-label,
.suggestions-result-current .special-query {
color: inherit;
}
/* #endregion */
/* #region Main content */
/* Remove border from main content pane and add dropshadow */
@media screen {
.mw-body {
margin-top: 0px;
border: 0px;
border-right-width: 0px;
box-shadow:
0 0 0 1px #0004,
0 4px 16px #0003;
}
}
/* Remove border under page title */
#firstHeading,
.mw-heading1,
h1, /* interface headings... other than #firstHeading...? */
.mw-heading2,
h2 /* interface headings e.g. "Preview" note */ {
border-bottom: 0;
}
/* Spacing between page title/subtitle/etc and page content */
#firstHeading {
margin-bottom: 0;
}
#mw-content-subtitle,
#contentSub2 {
margin-left: 1rem !important; /* !important to override base MW CSS being @media screen-specific */
}
#mw-content-text {
margin-top: 1.5rem;
}
/* remove margin above h1 in print since the body gets padding */
@media print {
#firstHeading {
margin-top: 0;
}
}
/* Move article section lines next to headings instead of underneath - kind of experimental */
.mw-heading1, .mw-heading2 {position: relative}
.mw-heading1 h1, .mw-heading2 h2 {
background: var(--background-color-base, #fff);
padding-right: 1.5rem;
}
.mw-heading1::after, .mw-heading2::after {
content: "";
display: block;
border-bottom: 1px solid var(--border-color-base,#a2a9b1);
position: absolute;
inset: 50% 0 auto;
z-index: -1;
}
/* use normal font for table of contents label */
#toc h2, .toc h2 {
font-family: var(--font-family-body);
font-weight: bold;
}
/* make external links obey color variables */
.mw-parser-output a.extiw, .mw-parser-output a.external {
color: var(--link-external-color, #36b);
}
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
color: var(--link-external-visited-color, #636);
}
/* #endregion */
/* #region Social profile/userpage stuff */
#profile-title {
/* match normal #firstHeading styles */
font-family: var(--font-family-heading);
font-weight: 500;
font-size: 1.8rem;
color: var(--color-emphasized, #101418);
}
/* #endregion */
/* #region Things that can go in templatestyles once this theme is the default */
/* Move hatnotes at top of article closer to the first heading */
#mw-content-text > .mw-parser-output > .hatnote:first-child {
margin-top: -1.5rem;
margin-bottom: 1.5rem;
}
/* #endregion */
/* #region Image textures */
:root {
--noise-texture: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500px' height='40px'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/> <feColorMatrix type='saturate' values='0' /></filter><rect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/></svg>")
}