User:Pelagic/invert-me/vector.css

/* Pelagic's contrasty vector *1 / /* Invert and rotate to get a dark theme */

/* Core refers to the parts of the UI that are built in to MediaWiki or major extensions. * Dealing with templates on specific wikis to be split out into separeate files (if the import mechanism works.) */ /* Copied from User:Pelagic/dark vector/core.css, see there for early revision history. */ /* Original inline comments https://en.wikipedia.org/w/index.php?title=User:Pelagic/vector.css&oldid=1062247659 */ /* To-do: split out colour variable definitions into separate file. */
 * root {

/* colour names */ --base0: #000; --base10: #202122; --base20: #54595d; --base30: #72777d; --base50: #a2a9b1; --base70: #c8ccd1; --base80: #eaecf0; --base90: #f8f9fa; --base100: #fff; --blue: #3366cc; --inv0: #fff; --inv10: #dddedf; --inv20: #a2a6ab; --inv30: #82878d; --inv50: #4e565d; --inv70: #2e3237; --inv80: #0f1215; --inv90: #050607; --inv100: #000; --inv-blue: #3359cc; /* map colours to page parts */ --content-bg: var(--inv0); --surround-bg: var(--inv10); --second-bg: var(--inv10); --content-fg: var(--inv80); --std-border: 1px solid var(--inv20); --tabs-active: var(--inv0); /* other colours */ --link-int: #084c91; --link-int-vis: #3380cc; --link-ext: #2966a3; --link-ext-vis: #884488; --portal-link: #4b6b8b; --page-border-line: #7494b4; --tab-gradient: #d0e6fc; --pbl-transparent: rgba( 116, 148, 180, 0 ); --inv30-transparent: rgba( 141, 136, 130, 0 ); }

/* --- main --- */

/* sidebar and bottom */ body { background-color: var(--surround-bg); } /* main content panel */ .mw-body,.parsoid-body{ background-color: var(--content-bg); color: var(--content-fg); }	 h1, h2, h3, h4, h5, h6 { color: var(--content-fg); } /* headings are already bigger and bolder, they don't need to also be brighter */ /* links */ a { color: var(--link-int); } a:visited { color: var(--link-int-vis); } .mw-parser-output a.extiw,.mw-parser-output a.external { color: var(--link-ext); } .mw-parser-output a.extiw:visited,.mw-parser-output a.external:visited { color: var(--link-ext-vis); } /* --- left sidebar --- */ .vector-menu-portal h3 { color: var(--inv50);} .vector-menu-portal h3 { background-image:linear-gradient(to right, var(--inv30-transparent) 0, var(--inv30) 33%, var(--inv30) 66%, var(--inv30-transparent) 100%); } .vector-menu-portal .vector-menu-content li a { color: var(--portal-link); } /* a less saturated blue than normal links */ .vector-menu-portal .vector-menu-content li a:visited { color: var(--inv-blue); } /* left dividing line */ /* Is normally light blue #a7d7f9 (HSL 205,87,82) not grey. The 20% and 25% equivalents are #073a5f, #094977. */ 	.mw-body { border: 1px solid var(--page-border-line); }

/* --- top bar --- */ #mw-page-base { background-color: var(--second-bg); background-image: linear-gradient(to bottom,var(--tabs-active) 50%,var(--second-bg) 100%); /* not specified here, but the bg is a 5em strip */ } 	/* vertical dividers fade out towards top */ .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 { background-image: linear-gradient(to bottom, var(--pbl-transparent) 0, var(--page-border-line) 100%); background-repeat: no-repeat; background-size: 1px 100%; }	/* inactive tabs fade upwards from colour to dark, and have lighter link text */ .vector-menu-tabs li { background-image: linear-gradient(to top, var(--page-border-line) 0, var(--tab-gradient) 1px, var(--tabs-active) 100%); background-position: left bottom; background-repeat: repeat-x; }	/* .vector-menu-tabs li a { color: var(--link-int); } */ /* active tabs are flat dark, with light text */ .vector-menu-tabs .selected { background: var(--tabs-active); } .vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { color: var(--content-fg); } .vector-menu-dropdown .vector-menu-content { background-color: --tabs-active;  /* originally #ffffff */ border: 1px solid var(--inv50);  /* originally Base50 #a2a9b1 */ box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.3);   /* originally rgba(0,0,0,0.1) */ }	.vector-search-box-input { background-color: rgba(255,255,255,0.1); color: #fff; border: 1px solid #a2a9b1; box-shadow: inset 0 0 0 1px transparent; }	.vector-search-box-input:focus, .vector-search-box-inner:hover .vector-search-box-input:focus { outline: 0; border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc; }

/* --- other parts --- */ /* Thumbnail images */ /* Normal Vector is #f8f9fa (Base90) with border #c8ccd1 (Base70). */ 	/* Image has a #fff background in case it's transparent, what to do about this is problematic. */ 	/* Base 30/10 pops too much, Base 20/10 is ok. */ 	div.thumbinner { border: var(--std-border); background-color: var(--second-bg); } .thumbimage { background-color: #ffffff; border: var(--std-border); } /* TOC */ .toc, .toccolours { border: var(--std-border); background-color: var(--second-bg); } /* Categories */ .catlinks { border: var(--std-border); background-color: var(--second-bg); }