MediaWiki:Common.css: Difference between revisions
From Xenharmonic Reference
m Make sure .thl highlights th cells |
rolled out new color schemes for both bright and dark |
||
| (20 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
/* | /* class="adv" selector, TODO finish formatting */ | ||
.adv { | .adv { | ||
opacity: 0. | opacity: 0.60; | ||
} | } | ||
/* | /* Style in Visual Editor */ | ||
. | .oo-ui-labelElement .oo-ui-labelElement-label { | ||
color: #888 !important; | |||
} | |||
.oo-ui-tool-title { | |||
color: #000 !important; | |||
} | |||
.oo-ui-toolbar-bar { | |||
color: #fff !important; | |||
} | |||
.ve-ui-symbolListPage h3 { | |||
color: #fff !important; | |||
} | |||
.ve-ui-mwLatexDialog-symbol { | |||
color: #fff !important; | |||
} | |||
.ve-ui-symbolListPage-symbol { | |||
color: #fff !important; | |||
} | } | ||
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre { | |||
box-shadow: inset 2.75em 0 0 #000; | |||
} | |||
.mw-highlight { | |||
background: #000; | |||
} | |||
@media (prefers-color-scheme: light) { | @media (prefers-color-scheme: light) { | ||
.thl, .wikitable .thl { | |||
color: #000 !important; | |||
background-color: #cba !important; | |||
} | |||
.prime2 { | .prime2 { | ||
background-color: #BFBFBF !important; | background-color: #BFBFBF !important; | ||
| Line 16: | Line 44: | ||
} | } | ||
.prime3 { | .prime3 { | ||
background-color: # | background-color: #EE5F64 !important; | ||
color: black !important; | color: black !important; | ||
} | } | ||
.prime5 { | .prime5 { | ||
background-color: # | background-color: #C5FE95 !important; | ||
color: black !important; | color: black !important; | ||
} | } | ||
.prime7 { | .prime7 { | ||
background-color: # | background-color: #7F5FC5 !important; | ||
color: black !important; | color: black !important; | ||
} | } | ||
.prime11 { | .prime11 { | ||
background-color: # | background-color: #FFDD71 !important; | ||
color: black !important; | color: black !important; | ||
} | } | ||
.prime13 { | .prime13 { | ||
background-color: # | background-color: #D35FD5 !important; | ||
color: black !important; | color: black !important; | ||
} | } | ||
.prime17 { | .prime17 { | ||
background-color: # | background-color: #83CFEF !important; | ||
color: black !important; | color: black !important; | ||
} | } | ||
.prime19 { | .prime19 { | ||
background-color: # | background-color: #9BEFB5 !important; | ||
color: black !important; | color: black !important; | ||
} | } | ||
.prime23 { | .prime23 { | ||
background-color: # | background-color: #EEAE6E !important; | ||
color: black !important; | color: black !important; | ||
} | } | ||
.prime29 { | .prime29 { | ||
background-color: # | background-color: #6D75C1 !important; | ||
color: black !important; | color: black !important; | ||
} | } | ||
.prime31 { | .prime31 { | ||
background-color: # | background-color: #6D9DCC !important; | ||
color: black !important; | |||
} | |||
.prime37 { | |||
background-color: #A0E0D1 !important; | |||
color: black !important; | |||
} | |||
.prime41 { | |||
background-color: #CFE099 !important; | |||
color: black !important; | |||
} | |||
.prime43 { | |||
background-color: #E0D491 !important; | |||
color: black !important; | |||
} | |||
.prime47 { | |||
background-color: #E0987C !important; | |||
color: black !important; | |||
} | |||
.prime53 { | |||
background-color: #B17CC5 !important; | |||
color: black !important; | color: black !important; | ||
} | } | ||
| Line 90: | Line 138: | ||
@media (prefers-color-scheme: dark) { | @media (prefers-color-scheme: dark) { | ||
.thl, .wikitable .thl { | |||
color: #fff !important; | |||
background-color: #531 !important; | |||
} | |||
.prime2 { | .prime2 { | ||
background-color: #3F3F3F !important; | background-color: #3F3F3F !important; | ||
| Line 95: | Line 147: | ||
} | } | ||
.prime3 { | .prime3 { | ||
background-color: # | background-color: #8F0005 !important; | ||
color: white !important; | color: white !important; | ||
} | } | ||
.prime5 { | .prime5 { | ||
background-color: # | background-color: #669F36 !important; | ||
color: white !important; | color: white !important; | ||
} | } | ||
.prime7 { | .prime7 { | ||
background-color: # | background-color: #200066 !important; | ||
color: white !important; | color: white !important; | ||
} | } | ||
.prime11 { | .prime11 { | ||
background-color: # | background-color: #A07E12 !important; | ||
color: white !important; | color: white !important; | ||
} | } | ||
.prime13 { | .prime13 { | ||
background-color: # | background-color: #740076 !important; | ||
color: white !important; | color: white !important; | ||
} | } | ||
.prime17 { | .prime17 { | ||
background-color: # | background-color: #247090 !important; | ||
color: white !important; | color: white !important; | ||
} | } | ||
.prime19 { | .prime19 { | ||
background-color: # | background-color: #3C9056 !important; | ||
color: white !important; | color: white !important; | ||
} | } | ||
.prime23 { | .prime23 { | ||
background-color: # | background-color: #8F4F0F !important; | ||
color: white !important; | color: white !important; | ||
} | } | ||
.prime29 { | .prime29 { | ||
background-color: # | background-color: #0E1662 !important; | ||
color: white !important; | color: white !important; | ||
} | } | ||
.prime31 { | .prime31 { | ||
background-color: # | background-color: #0E3E6D !important; | ||
color: white !important; | |||
} | |||
.prime37 { | |||
background-color: #418172 !important; | |||
color: white !important; | |||
} | |||
.prime41 { | |||
background-color: #70813A !important; | |||
color: white !important; | |||
} | |||
.prime43 { | |||
background-color: #817532 !important; | |||
color: white !important; | |||
} | |||
.prime47 { | |||
background-color: #81391D !important; | |||
color: white !important; | |||
} | |||
.prime53 { | |||
background-color: #521D66 !important; | |||
color: white !important; | color: white !important; | ||
} | } | ||
Latest revision as of 15:28, 24 May 2026
/* class="adv" selector, TODO finish formatting */
.adv {
opacity: 0.60;
}
/* Style in Visual Editor */
.oo-ui-labelElement .oo-ui-labelElement-label {
color: #888 !important;
}
.oo-ui-tool-title {
color: #000 !important;
}
.oo-ui-toolbar-bar {
color: #fff !important;
}
.ve-ui-symbolListPage h3 {
color: #fff !important;
}
.ve-ui-mwLatexDialog-symbol {
color: #fff !important;
}
.ve-ui-symbolListPage-symbol {
color: #fff !important;
}
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
box-shadow: inset 2.75em 0 0 #000;
}
.mw-highlight {
background: #000;
}
@media (prefers-color-scheme: light) {
.thl, .wikitable .thl {
color: #000 !important;
background-color: #cba !important;
}
.prime2 {
background-color: #BFBFBF !important;
color: black !important;
}
.prime3 {
background-color: #EE5F64 !important;
color: black !important;
}
.prime5 {
background-color: #C5FE95 !important;
color: black !important;
}
.prime7 {
background-color: #7F5FC5 !important;
color: black !important;
}
.prime11 {
background-color: #FFDD71 !important;
color: black !important;
}
.prime13 {
background-color: #D35FD5 !important;
color: black !important;
}
.prime17 {
background-color: #83CFEF !important;
color: black !important;
}
.prime19 {
background-color: #9BEFB5 !important;
color: black !important;
}
.prime23 {
background-color: #EEAE6E !important;
color: black !important;
}
.prime29 {
background-color: #6D75C1 !important;
color: black !important;
}
.prime31 {
background-color: #6D9DCC !important;
color: black !important;
}
.prime37 {
background-color: #A0E0D1 !important;
color: black !important;
}
.prime41 {
background-color: #CFE099 !important;
color: black !important;
}
.prime43 {
background-color: #E0D491 !important;
color: black !important;
}
.prime47 {
background-color: #E0987C !important;
color: black !important;
}
.prime53 {
background-color: #B17CC5 !important;
color: black !important;
}
.acc0 {
background-color: #EBF !important;
color: black !important;
}
.acc1 {
background-color: #BBEEEE !important;
color: black !important;
}
.acc2 {
background-color: #BBFFD3 !important;
color: black !important;
}
.acc3 {
background-color: #CCFFBB !important;
color: black !important;
}
.acc4 {
background-color: #E8FFBB !important;
color: black !important;
}
.acc5 {
background-color: #FFF8BB !important;
color: black !important;
}
.acc6 {
background-color: #FFD8BB !important;
color: black !important;
}
.acc7 {
background-color: #FFBBBB !important;
color: black !important;
}
}
@media (prefers-color-scheme: dark) {
.thl, .wikitable .thl {
color: #fff !important;
background-color: #531 !important;
}
.prime2 {
background-color: #3F3F3F !important;
color: white !important;
}
.prime3 {
background-color: #8F0005 !important;
color: white !important;
}
.prime5 {
background-color: #669F36 !important;
color: white !important;
}
.prime7 {
background-color: #200066 !important;
color: white !important;
}
.prime11 {
background-color: #A07E12 !important;
color: white !important;
}
.prime13 {
background-color: #740076 !important;
color: white !important;
}
.prime17 {
background-color: #247090 !important;
color: white !important;
}
.prime19 {
background-color: #3C9056 !important;
color: white !important;
}
.prime23 {
background-color: #8F4F0F !important;
color: white !important;
}
.prime29 {
background-color: #0E1662 !important;
color: white !important;
}
.prime31 {
background-color: #0E3E6D !important;
color: white !important;
}
.prime37 {
background-color: #418172 !important;
color: white !important;
}
.prime41 {
background-color: #70813A !important;
color: white !important;
}
.prime43 {
background-color: #817532 !important;
color: white !important;
}
.prime47 {
background-color: #81391D !important;
color: white !important;
}
.prime53 {
background-color: #521D66 !important;
color: white !important;
}
.acc0 {
background-color: #304 !important;
color: white !important;
}
.acc1 {
background-color: #033 !important;
color: white !important;
}
.acc2 {
background-color: #004418 !important;
color: white !important;
}
.acc3 {
background-color: #140 !important;
color: white !important;
}
.acc4 {
background-color: #2D4400 !important;
color: white !important;
}
.acc5 {
background-color: #443D00 !important;
color: white !important;
}
.acc6 {
background-color: #441D00 !important;
color: white !important;
}
.acc7 {
background-color: #440000 !important;
color: white !important;
}
}