MediaWiki:Theme-light.css
From NBITTRPG Wiki
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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
:root {
--main-font: 'Rubik';
--header-font: 'Rubik';
--title-font: 'Lora';
/* COLORS */
--background-color: rgb(227, 227, 227);
--content-color: rgba(255, 250, 242);
--text-color: rgb(61, 44, 35, 1);
--link-color: #8346a0;
--link-hover-color: #5e188a;
--link-new-color: #ff3874;
--text-stroke-color: #fff;
--search-bg-color: rgba(255, 250, 242);;
--border-color: #be7e32;
--header-color: rgb(104 71 53);
--header-text-color: rgb(255, 255, 255);
--sidebar-header-color: #6f4229;
--sidebar-header-text: #fff;
--gradient-start: rgb(225, 225, 225);
--gradient-end: rgb(111, 111, 111);
--banner-color: #743f95;
--footer-color: #201a16;
--footer-text-color:#977b50;
--footer-link-color:#a88e67;
--footer-link-hover-color:#d9b299;
--cdx-button-color: #bea48b;
--cdx-button-hover: #f5dfca;
--button-color: rgba(104, 83, 68, 1);
--button-text-color: rgb(255, 255, 255);
}
:root.skin-theme-clientpref-day:has(> body.ns-3000),
:root.skin-theme-clientpref-day:has(> body.ns-3001) {
--header-font: 'Instrument Serif';
/* COLORS */
--background-color: rgb(55, 55, 55);
--content-color: rgba(246, 246, 246);
--text-color: rgb(0, 0, 0);
--link-color: #7d7d7d;
--link-hover-color: #bfbfbf;
--link-new-color: #ff3838;
--text-stroke-color: #000;
--search-bg-color: rgba(255, 250, 242);;
--border-color: #b0b0b0;
--header-color: rgb(0 0 0);
--header-text-color: rgb(255, 255, 255);
--sidebar-header-color: #4c4c4c;
--sidebar-header-text: #fff;
--gradient-start: rgb(34, 33, 33);
--gradient-end: rgb(36, 36, 36);
--banner-color: #4c4c4c;
--footer-color: #000;
--footer-text-color:#d6d6d6;
--footer-link-color:#969696;
--footer-link-hover-color:#969696;
--cdx-button-color: #c9c9c9;
--cdx-button-hover: #fff;
--button-color: rgba(76, 76, 76);
--button-text-color: rgb(255, 255, 255);
.mw-wiki-title {
font-family: 'Instrument Serif' !important;
letter-spacing: 0.1rem;
font-style:italic;
}
.mw-first-heading {
font-family: 'Instrument Serif' !important;
font-style:italic;
text-transform: uppercase;
color: #fff;
paint-order: stroke fill;
-webkit-text-stroke: 8px #000;
letter-spacing: 0.2rem;
text-align: center;
background: linear-gradient(180deg, var(--text-color) 0%, rgba(0, 0, 0, .45) 75%);
mask-image:linear-gradient(to right,transparent,black 15% 85%, transparent);
padding: 0.3em;
}
#mw-site-navigation {
& .sidebar-chunk {
clip-path:none;
h3 {
clip-path:none;
padding:0.5em;
text-align:center;
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .45) 75%);
mask-image:linear-gradient(to right,transparent,black 15% 85%, transparent);
paint-order: stroke fill;
-webkit-text-stroke: 3px var(--text-stroke-color);
}
}
}
