(remake) |
(make .flow content background closer to white) |
||
(3 intermediate revisions by the same user not shown) | |||
Line 9: | Line 9: | ||
--color-surface-1: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.95)); | --color-surface-1: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.95)); | ||
--color-surface-2: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.92)); | --color-surface-2: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.92)); | ||
--color-surface-3: hsl(from var(--content-background, hsl(0,0%,100%)) h | --color-surface-3: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.88)); | ||
--color-surface-4: hsl(from var(--content-background, hsl(0,0%,100%)) h | --color-surface-4: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.80)); | ||
--color-primary: hsl(from var(--link-text, hsl(220 60% 50%)) h s l); | --color-primary: hsl(from var(--link-text, hsl(220 60% 50%)) h s l); | ||
--color-primary--hover: hsl(from var(--link-text, hsl(220 60% 50%)) h s calc(l * 1.2)); | --color-primary--hover: hsl(from var(--link-text, hsl(220 60% 50%)) h s calc(l * 1.2)); | ||
Line 25: | Line 25: | ||
--color-surface-1: hsl(from var(--content-background, hsl(220,25%,0%)) h s 12%); | --color-surface-1: hsl(from var(--content-background, hsl(220,25%,0%)) h s 12%); | ||
--color-surface-2: hsl(from var(--content-background, hsl(220,25%,0%)) h s 8%); | --color-surface-2: hsl(from var(--content-background, hsl(220,25%,0%)) h s 8%); | ||
--color-surface-3: hsl(from var(--content-background, hsl(220,15%,0%)) h s | --color-surface-3: hsl(from var(--content-background, hsl(220,15%,0%)) h s 13%); | ||
--color-surface-4: hsl(from var(--content-background, hsl(220,15%,0%)) h s | --color-surface-4: hsl(from var(--content-background, hsl(220,15%,0%)) h s 18%); | ||
--color-base--emphasized: hsl(from var(--link-text, hsl(220 0 0)) h 80% 95%); | --color-base--emphasized: hsl(from var(--link-text, hsl(220 0 0)) h 80% 95%); | ||
--color-base: hsl(from var(--link-text, hsl(220 0 0)) h 25% 80%); | --color-base: hsl(from var(--link-text, hsl(220 0 0)) h 25% 80%); | ||
Line 39: | Line 39: | ||
} | } | ||
/*Make sidebar a different color*/ | |||
.mw-header { | .mw-header { | ||
background-color: var(--color-surface-1); | background-color: var(--color-surface-1); | ||
Line 75: | Line 76: | ||
/*wikitable*/ | /*wikitable*/ | ||
.wikitable { | |||
border-color:var(--color-surface-4); | |||
background-color:var(--color-surface-1); | |||
} | |||
/*Empty table cells*/ | |||
.empty { | |||
background-color: var(--color-surface-2)!important | |||
} | } | ||
/*Dark mode main page welcome banner*/ | |||
.skin-citizen-dark #welcome-banner { | |||
background:#682e70; | |||
} | } | ||
Line 165: | Line 172: | ||
--link-text: #83251b; | --link-text: #83251b; | ||
--button-color: #a1a1a1; | --button-color: #a1a1a1; | ||
--content-background: # | --content-background: #ececec; | ||
} | } | ||
/* [END] NS3004-3005: .flow */ | /* [END] NS3004-3005: .flow */ |
Latest revision as of 02:42, 19 December 2024
/* All CSS here will be loaded for users of the Citizen skin */
/* Colors are based on the Cosmos skin */
:root .mediawiki {
--color-primary__h: var(--primary__h, 220);
--color-primary__s: var(--primary__s, 60%);
--color-primary__l: var(--primary__l, 50%);
--color-surface-0: var(--content-background, hsl(0,0%,100%));
--color-surface-1: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.95));
--color-surface-2: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.92));
--color-surface-3: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.88));
--color-surface-4: hsl(from var(--content-background, hsl(0,0%,100%)) h s calc(l * 0.80));
--color-primary: hsl(from var(--link-text, hsl(220 60% 50%)) h s l);
--color-primary--hover: hsl(from var(--link-text, hsl(220 60% 50%)) h s calc(l * 1.2));
--color-primary--active: hsl(from var(--link-text, hsl(220 60% 50%)) h s calc(l * 0.8));
--background-color-overlay: var(--color-surface-1);
--background-color-primary--hover: hsl(from var(--link-text, hsl(220 60% 0)) h s 95%);
--background-color-primary--active: hsl(from var(--link-text, hsl(220 60% 0)) h s 90%);
--surface-shadow: hsl(from var(--link-text, hsl(220 0 0)) h 10% 20%);
}
:root.skin-citizen-dark .mediawiki {
--color-primary: hsl(from var(--link-text, hsl(220 60% 0)) h s 60%);
--color-surface-0: hsl(from var(--content-background, hsl(220,20%,0%)) h s 10%);
--color-surface-1: hsl(from var(--content-background, hsl(220,25%,0%)) h s 12%);
--color-surface-2: hsl(from var(--content-background, hsl(220,25%,0%)) h s 8%);
--color-surface-3: hsl(from var(--content-background, hsl(220,15%,0%)) h s 13%);
--color-surface-4: hsl(from var(--content-background, hsl(220,15%,0%)) h s 18%);
--color-base--emphasized: hsl(from var(--link-text, hsl(220 0 0)) h 80% 95%);
--color-base: hsl(from var(--link-text, hsl(220 0 0)) h 25% 80%);
--color-base--subtle: hsl(from var(--link-text, hsl(220 0 0)) h 25% 65%);
--background-color-primary--hover: hsl(from var(--link-text, hsl(220 60% 0)) h s 15%);
--background-color-primary--active: hsl(from var(--link-text, hsl(220 60% 0)) h s 20%);
--background-color-overlay: var(--color-surface-1);
--background-color-overlay--lighter: hsl(from var(--link-text, hsl(220 0 0)) h 20% 10% / 60%);
--color-surface-2--hover: hsl(from var(--link-text, hsl(220 0 0)) h 30% 19%);
--color-surface-2--active: hsl(from var(--link-text, hsl(220 0 0)) h 30% 11%);
--surface-shadow: hsl(from var(--link-text, hsl(220 0 0)) h 50% 3%);
}
/*Make sidebar a different color*/
.mw-header {
background-color: var(--color-surface-1);
}
/*Stupid table override*/
table {
display: table
}
/*Underline red links for better visibility in all ns*/
a.new {
text-decoration: underline
}
/*Red discussion button if new*/
#ca-talk.new a {
color:var(--color-link-new);
text-decoration: underline
}
/*General content*/
element.style {
width: 141px;
}
li.gallerybox div.thumb {
background: none !important;
}
/*Locationbox*/
.infobox {
background-color: var(--color-surface-1);
border: 1px solid var(--color-surface-4)
}
/*wikitable*/
.wikitable {
border-color:var(--color-surface-4);
background-color:var(--color-surface-1);
}
/*Empty table cells*/
.empty {
background-color: var(--color-surface-2)!important
}
/*Dark mode main page welcome banner*/
.skin-citizen-dark #welcome-banner {
background:#682e70;
}
/* [START] NS3000-3001: Yume Nikki */
.ns-3000, .ns-3001 {
--link-text: #a5273c;
--button-color: #b06d7e;
--content-background: #e5cdd3;
}
/* [END] NS3000-3001: Yume Nikki */
/* [START] NS3002-3003: Yume 2kki */
.ns-3002, .ns-3003 {
--link-text: #7f2d3d;
--button-color: #a492af;
--content-background: #dfdbc3;
}
/*Computer Table*/
.ns-3002 .computer-table {
width: 100%;
color: #EFEBEF;
font-weight: bold;
text-shadow: 2px 2px #2B332B;
border: solid #949294 4px;
border-collapse: collapse;
border-top-color: #BDBAB5;
border-left-color: #BDBAB5;
}
.ns-3002 .computer-table tbody {
background: url(https://yume.wiki/images/6/69/Computer-background.png) repeat top left;
background-size: auto;
}
.ns-3002 .computer-table th {
height: 20px;
padding: 0 2px;
text-align: center;
background: #523052 url(https://yume.wiki/images/f/f8/Computer-cross.png) no-repeat right center;
background-size: auto;
border: solid #BDBAB5 4px;
border-bottom-color: #949294;
border-right-color: #949294;
}
.ns-3002 .pchl {
color: #FFFF6B;
}
/*Effectbox*/
.ns-3002 .portable-infobox.pi-background {
background-color: #D7D3BC;
border: solid #A9A692 1px;
}
.ns-3002 .portable-infobox .pi-title {
background-color: #43353a;
color: #a28da5;
text-align: center;
font-weight: bold !important;
font-size: 22px !important;
}
.ns-3002 .portable-infobox .pi-header {
font-weight: bold !important;
font-size: 16px !important;
background-color: #43353a;
color: #a28da5;
}
.ns-3002 .pi-data-value {
min-width: 50%;
}
.ns-3002 .portable-infobox .pi-data {
border-bottom: 1px #A9A692 solid;
}
/* [END] NS3002-3003: Yume 2kki */
/* [START] NS3004-3005: .flow */
.ns-3004, .ns-3005 {
--link-text: #83251b;
--button-color: #a1a1a1;
--content-background: #ececec;
}
/* [END] NS3004-3005: .flow */
/* [START] NS3006-3007: Someday */
.ns-3006, .ns-3007 {
--link-text: #1b8941;
--button-color: #77caa2;
--content-background: #c6e3d7;
}
/* [END] NS3006-3007: Someday */
/* [START] NS3008-3009: Deep Dreams */
.ns-3008, .ns-3009 {
--link-text: #950F70;
--button-color: #bca0b4;
--content-background: #D9D5DD;
}
/* [END] NS3008-3009: Deep Dreams */
/* [START] NS3010-3011: Answered Prayers */
.ns-3010, .ns-3011 {
--link-text: #098223;
--button-color: #228524;
--content-background: #b7e2a3;
}
/* [END] NS3010-3011: Answered Prayers */
/* [START] NS3012-3013: Amillusion */
.ns-3012, .ns-3013 {
--link-text: #585105;
--button-color: #cbc051;
--content-background: #f2c49f;
}
/* [END] NS3012-3013: Amillusion */
/* [START] NS3014-3015: Uneven Dream */
.ns-3014, .ns-3015 {
--link-text: #6f027c;
--button-color: #6f027c;
--button-text: #ffffff;
--content-background: #ffffff;
}
/*[END] NS3014-3015: Uneven Dream */
/*[START] NS3016-3017: Braingirl */
.ns-3016, .ns-3017 {
--link-text: #068959;
--button-color: #00dc9a;
--content-background: #fff7e9;
}
/*[END] NS3014-3015: Braingirl */
/*[START] NS3018-3019: Collective Unconscious */
.ns-3018, .ns-3019 {
--link-text: #25378D;
--button-color: #66a0c3;
--content-background: #CDE7F5;
}
/*[END] NS3018-3019: Collective Unconscious */
/*[START] NS3018-3019: Cerasus */
.ns-3020, .ns-3021 {
--link-text: #fa6e79;
--button-color: #FF7580;
--content-background: #ffd1d5;
}
/* changes h1 & h2 bottom border colors */
.ns-3020 h1, .ns-3021 h1, .ns-3020 h2, .ns-3021 h2 {
border-bottom: solid 1px #00000080;
}
/* changes the color of the dividers on the footer */
.ns-3020 #footer-places > li:not(:first-child)::before, .ns-3020 #footer-places > li:not(:first-child)::before {
color: #000000;
}
/* changes the color of the border around an image with a caption */
.ns-3020 li.gallerybox div.thumb {
border: 1px solid #00000080;
}
/*[END] NS3021-3021: Cerasus Wiki */
/* [START] NS3022-3023: Muma|Rope */
.ns-3022, .ns-3023 {
--link-text: #ff14c0;
--button-color: #ffffff;
--content-background: #fff;
}
/* [END] NS3022-3023: Muma|Rope Wiki */
/* [START] NS3024-3025: YNOproject Wiki */
/* [END] NS3024-3025: YNOproject Wiki */
/* [START] NS3026-3027: Dream Genie Wiki */
.ns-3026, .ns-3027 {
--link-text: #915732;
--button-color: #cdb48c;
--content-background: #ececd1;
}
/* [END] NS3026-3027: Dream Genie Wiki */
/* [START] NS3028-3029: Mikan Muzou Wiki */
.ns-3028, .ns-3029 {
--link-text: #863931;
--button-color: #8c949b;
--content-background: #DADCDE;
}
/* [END] NS3028-3029: Mikan Muzou Wiki */
/* [START] NS3030-3031: Ultra Violet Wiki */
.ns-3030, .ns-3031 {
--link-text: #7248cb;
--button-color: #c396d1;
--content-background: #eadbed;
}
/* [END] NS3030-3031: Ultra Violet Wiki */
/* [START] NS3032-3033: She Awaits Wiki */
.ns-3032, .ns-3033 {
--link-text: #060da1;
--button-color: #d0d1f9;
--content-background: #b3b6f6;
}
/* [END] NS3032-3033: She Awaits Wiki */
/* [START] NS3034-3035: Oversomnia Wiki */
.ns-3034, .ns-3035 {
--link-text: #713f18;
--button-color: #bb8376;
--content-background: #ffe7ad;
}
/* [END] NS3034-3035: Oversomnia Wiki */
/* [START] NS3036-3037: Yume Tagai Wiki */
.ns-3036, ns-3037 {
--link-text: #d00c96;
--button-color: #ea6198;
--content-background: #FFDDE1;
}
/* [END] NS3036-3037: Yume Tagai Wiki */
/* [START] NS3038-3039: Yume Tsushin Wiki */
.ns-3038, ns-3039 {
--link-text: #514592;
--button-color: #515B79;
--content-background: #EEE;
}
/* [END] NS3038-3039: Yume Tsushin Wiki */
/* [START] NS3040-3041: nostAlgic Wiki */
.ns-3040, .ns-3041 {
--link-text: #4646b6;
--button-color: #FCFF75;
--content-background: #b2f1ce;
}
/* [END] NS3040-3041: nostAlgic Wiki */
/* [START] NS3042-3043: If Wiki */
.ns-3042, .ns-3043 {
--link-text: #ff00ff;
--button-color: #ff82ff;
--content-background: #ffe5ff;
}
/* [END] NS3042-3043: If Wiki */