User:JimmyRustles/global.css: Difference between revisions
Jump to navigation
Jump to search
JimmyRustles (talk | contribs) (Created page with "@import url(//meta.wikimedia.org/wiki/User:Aron_Manning/mild-theme.css?action=raw&ctype=text/css);") |
JimmyRustles (talk | contribs) No edit summary |
||
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; } |
Revision as of 20:43, 24 June 2020
/**** 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; }