|
|
| Line 1: |
Line 1: |
| /**** 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; }
| |