User:Pelagic/dark vector/core.css

/* Pelagic's dark vector 1 */

/* 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/vector.css, see there for early revision history. */ /* Original inline comments https://en.wikipedia.org/w/index.php?title=User:Pelagic/vector.css&oldid=1062247659 */
 * root {

/* colour names */ --base0: #000; --base10: #202122; --base20: #54595d; --base30: #72777d; --base50: #a2a9b1; --base70: #c8ccd1; --base80: #eaecf0; --base90: #f8f9fa; --base100: #fff; /* map colours to page parts */ --content-bg: var(--base0); --second-bg: var(--base10); --content-fg: var(--base80); --std-border: 1px solid var(--base20); --tabs-active: var(--base0) }

/* --- main --- */

/* sidebar and bottom */ body{background-color: var(--second-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: #6e9cf7;} a:visited{color: #36c } .mw-parser-output a.extiw,.mw-parser-output a.external{color: #5c85d6 } .mw-parser-output a.extiw:visited,.mw-parser-output a.external:visited{color: #bb77bb } /* instead of recolouring the logo, which has a black-on transparent wordmark, add a shadow */ .mw-wiki-logo { filter: drop-shadow(2px 2px 2px var(--base30)); } /* --- left sidebar --- */ .vector-menu-portal h3 { color: var(--base50);} .vector-menu-portal h3 { background-image:linear-gradient(to right, rgba(200,204,209,0) 0, var(--base30) 33%, var(--base30) 66%, rgba(200,204,209,0) 100%); } .vector-menu-portal .vector-menu-content li a {color: #748AB4; } /* a less saturated blue than normal links */ .vector-menu-portal .vector-menu-content li a:visited { color: #36c; } /* 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 #094977; }

/* --- 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,rgba(9, 73, 119, 0) 0,#094977 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,#0e75be 0,#073a5f 1px, var(--tabs-active) 100%); background-position: left bottom; background-repeat: repeat-x; }	.vector-menu-tabs li a { color: #6699ff; } /* 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 #a2a9b1;  /* originally Base50 #a2a9b1 */ border-top-width: 0; padding: 0; box-shadow: 1px 1px 1px 0 rgba(256,256,256,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); }