User:JimmyRustles/global.css
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/**** Vector skin ****/ body.skin-vector .mw-body { /* Disable full-width border between content and tabs */ margin-top: 0; border-top: 0; } .vectorTabs, .vectorTabs a, #mw-head .vectorMenu h3 { /* Horizontal border between content and tabs only */ border-bottom: 0.1px solid #a7d7f9; } /* Vertical border between tabs .vectorTabs, .vectorTabs a, #mw-head .vectorMenu h3 { background-image: linear-gradient(to bottom, var(--bg-shade-3) 0, var(--bg-shade-4) 100%); } */ /* body.skin-vector #p-search,*/ .vectorTabs li { background-color: var(--bg-shade-3); background-image: linear-gradient(to top, var(--bg-shade-3) 0, var(--bg-shade-3) 50%, var(--bg-shade-2) 100%); } .vectorTabs li a { color: var(--text-shade-2); } .vectorTabs .selected { background-color: var(--bg-shade-4); background-image: linear-gradient(to top, var(--bg-shade-3) 0, var(--bg-shade-4) 10%, var(--bg-shade-4) 50%, var(--bg-shade-3) 70%, var(--bg-shade-2) 100%); } .vectorTabs .selected a, .vectorTabs .selected a:visited { color: var(--text-shade-1); } body.skin-vector #searchInput { background-color: var(--bg-shade-3); color: var(--text-shade-1); padding: 0.5em 2.5em 0.5em 1em; } body.skin-vector #searchInput:focus, body.skin-vector #simpleSearch:hover #searchInput:focus { box-shadow: unset; } /* Use flex to position head and content */ body.skin-vector { display: flex; flex-direction: column; } body.skin-vector #mw-navigation { order: 1; } body.skin-vector #content { order: 2; } body.skin-vector #footer { order: 3; } /* These background hacks are unnecessary and incompatible with flex positioning */ #mw-page-base, /* background-image: linear-gradient(to bottom,#ffffff 50%,#f6f6f6 100%); -- unnoticably subtle gradient in the .vectorTabs area */ #mw-head-base { /* overlay above #mw-page-base that does nothing? spoils the flex width margin-top: -5em; */ display: none; margin-top: 0; } /* Use var to set panel width */ body.skin-vector { --sidebar-width: 11em; } @media screen and (max-width: 981px) { body.skin-vector { --sidebar-width: 10em; } } body.skin-vector #mw-panel { width: var(--sidebar-width); transition: padding-left 0.5s ease; box-sizing: border-box; } body.skin-vector #mw-head, /* Refactored from #left-navigation */ body.skin-vector .mw-body, body.skin-vector #mw-data-after-content, body.skin-vector #footer { margin-left: var(--sidebar-width); transition: margin-left 0.5s ease; } /* Move all tabs and search to the left and up */ body.skin-vector #mw-head { position: static; width: unset; display: flex; flex-wrap: wrap-reverse; /* If not wide enough then wrap vectorTabs below personal menu */ background-image: linear-gradient(to bottom, var(--bg-shade-0) 0%, var(--bg-shade-3) 100%); /* Gradient in the row of vectorTabs, refactored from #mw-head-base */ background-image: linear-gradient(to bottom, var(--bg-shade-0) 0%, var(--bg-shade-1) 20%, var(--bg-shade-3) 100%); /* Gradient in the row of vectorTabs, refactored from #mw-head-base */ } body.skin-vector #left-navigation, body.skin-vector #right-navigation { margin-top: 0; margin-bottom: 0; } body.skin-vector #left-navigation { flex: 0 0 auto; /* No grow, no shrink */ margin-left: 0; /* Margin refactored to #mw-head */ margin-right: 0.1px; /* To avoid calculateTabDistance() returning 0 and triggering tab collapsing */ } body.skin-vector #right-navigation { flex: 1 1 auto; /* Grow and shrink for the search field */ display: flex; } body.skin-vector #p-views { /* #right-navigation .vectorTabs */ flex: 0 0 auto; /* No grow, no shrink */ } body.skin-vector #p-search { flex: 1 1 auto; /* Only the search field grows and shrinks */ padding: 0 0.5em; margin: auto 0 auto 0.5em; --search-width: 25em; max-width: var(--search-width); } body.skin-vector #p-search form { margin: 0; } /* #p-search form #simpleSearch */ body.skin-vector #simpleSearch { width: 100%; max-width: unset; } body.skin-vector #p-personal { order: 3; /* float: right; */ float: unset; position: static; margin: 0.5em 1em 0 auto; z-index: initial; } body.skin-vector #p-personal ul { padding-left: 0; } #ca-view { /* Hide "Read" tab: redundant with "Article"/"Page" tab */ display: none; } #mw-panel .portal h3 { /* Navbar headings: use default color --text-shade-2 */ color: inherit; } /* Fix Vector's flawed heading typography */ body.skin-vector .mw-body-content h5, body.skin-vector .mw-body-content h6 { font-weight: bold; } body.skin-vector .mw-body-content h1 { font-size: 1.8em; } body.skin-vector .mw-body-content h2 { font-size: 1.7em; } body.skin-vector .mw-body-content h3 { font-size: 1.4em; } body.skin-vector .mw-body-content h4 { font-size: 1.2em; } body.skin-vector .mw-body-content h5 { font-size: 1.1em; } body.skin-vector .mw-body-content h6 { font-size: 1.0em; }