Template:Infobox settlement/styles.css: Difference between revisions
Add dark mode infobox styles |
Correct dark mode infobox colors |
||
| Line 102: | Line 102: | ||
body.skin-theme-clientpref-night .infobox { | body.skin-theme-clientpref-night .infobox { | ||
background-color: #1e1e1e; | background-color: #1e1e1e; | ||
color: # | color: #ffffff; | ||
border-color: #444; | border-color: #444; | ||
} | } | ||
| Line 117: | Line 117: | ||
body.skin-theme-clientpref-night .infobox .infobox-full-data { | body.skin-theme-clientpref-night .infobox .infobox-full-data { | ||
background-color: #1e1e1e; | background-color: #1e1e1e; | ||
color: # | color: #ffffff; | ||
border-color: #444; | border-color: #444; | ||
} | } | ||
| Line 152: | Line 152: | ||
body.skin-theme-clientpref-os .infobox { | body.skin-theme-clientpref-os .infobox { | ||
background-color: #1e1e1e; | background-color: #1e1e1e; | ||
color: # | color: #ffffff; | ||
border-color: #444; | border-color: #444; | ||
} | } | ||
| Line 167: | Line 167: | ||
body.skin-theme-clientpref-os .infobox .infobox-full-data { | body.skin-theme-clientpref-os .infobox .infobox-full-data { | ||
background-color: #1e1e1e; | background-color: #1e1e1e; | ||
color: # | color: #ffffff; | ||
border-color: #444; | border-color: #444; | ||
} | } | ||
| Line 195: | Line 195: | ||
body.skin-theme-clientpref-os .infobox a:visited { | body.skin-theme-clientpref-os .infobox a:visited { | ||
color: #88ccff; | color: #88ccff; | ||
} | |||
} | |||
/* Dark-mode color correction for VU infoboxes. */ | |||
@media screen { | |||
html.skin-theme-clientpref-night .infobox, | |||
body.skin-theme-clientpref-night .infobox, | |||
html.skin-theme-clientpref-night .infobox th, | |||
html.skin-theme-clientpref-night .infobox td, | |||
html.skin-theme-clientpref-night .infobox .infobox-label, | |||
html.skin-theme-clientpref-night .infobox .infobox-data, | |||
html.skin-theme-clientpref-night .infobox .infobox-full-data, | |||
body.skin-theme-clientpref-night .infobox th, | |||
body.skin-theme-clientpref-night .infobox td, | |||
body.skin-theme-clientpref-night .infobox .infobox-label, | |||
body.skin-theme-clientpref-night .infobox .infobox-data, | |||
body.skin-theme-clientpref-night .infobox .infobox-full-data { | |||
color: #ffffff; | |||
} | |||
html.skin-theme-clientpref-night .infobox .infobox-above, | |||
html.skin-theme-clientpref-night .infobox .infobox-title, | |||
html.skin-theme-clientpref-night .infobox .infobox-header, | |||
html.skin-theme-clientpref-night .infobox .infobox-subheader, | |||
html.skin-theme-clientpref-night .infobox .infobox-below, | |||
body.skin-theme-clientpref-night .infobox .infobox-above, | |||
body.skin-theme-clientpref-night .infobox .infobox-title, | |||
body.skin-theme-clientpref-night .infobox .infobox-header, | |||
body.skin-theme-clientpref-night .infobox .infobox-subheader, | |||
body.skin-theme-clientpref-night .infobox .infobox-below { | |||
color: #e0f0ff !important; | |||
} | |||
html.skin-theme-clientpref-night .infobox a:link, | |||
html.skin-theme-clientpref-night .infobox a:visited, | |||
body.skin-theme-clientpref-night .infobox a:link, | |||
body.skin-theme-clientpref-night .infobox a:visited { | |||
color: #88ccff; | |||
} | |||
html.skin-theme-clientpref-night .infobox a.new:link, | |||
html.skin-theme-clientpref-night .infobox a.new:visited, | |||
body.skin-theme-clientpref-night .infobox a.new:link, | |||
body.skin-theme-clientpref-night .infobox a.new:visited { | |||
color: #ff6b6b; | |||
} | |||
} | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .infobox, | |||
body.skin-theme-clientpref-os .infobox, | |||
html.skin-theme-clientpref-os .infobox th, | |||
html.skin-theme-clientpref-os .infobox td, | |||
html.skin-theme-clientpref-os .infobox .infobox-label, | |||
html.skin-theme-clientpref-os .infobox .infobox-data, | |||
html.skin-theme-clientpref-os .infobox .infobox-full-data, | |||
body.skin-theme-clientpref-os .infobox th, | |||
body.skin-theme-clientpref-os .infobox td, | |||
body.skin-theme-clientpref-os .infobox .infobox-label, | |||
body.skin-theme-clientpref-os .infobox .infobox-data, | |||
body.skin-theme-clientpref-os .infobox .infobox-full-data { | |||
color: #ffffff; | |||
} | |||
html.skin-theme-clientpref-os .infobox .infobox-above, | |||
html.skin-theme-clientpref-os .infobox .infobox-title, | |||
html.skin-theme-clientpref-os .infobox .infobox-header, | |||
html.skin-theme-clientpref-os .infobox .infobox-subheader, | |||
html.skin-theme-clientpref-os .infobox .infobox-below, | |||
body.skin-theme-clientpref-os .infobox .infobox-above, | |||
body.skin-theme-clientpref-os .infobox .infobox-title, | |||
body.skin-theme-clientpref-os .infobox .infobox-header, | |||
body.skin-theme-clientpref-os .infobox .infobox-subheader, | |||
body.skin-theme-clientpref-os .infobox .infobox-below { | |||
color: #e0f0ff !important; | |||
} | |||
html.skin-theme-clientpref-os .infobox a:link, | |||
html.skin-theme-clientpref-os .infobox a:visited, | |||
body.skin-theme-clientpref-os .infobox a:link, | |||
body.skin-theme-clientpref-os .infobox a:visited { | |||
color: #88ccff; | |||
} | |||
html.skin-theme-clientpref-os .infobox a.new:link, | |||
html.skin-theme-clientpref-os .infobox a.new:visited, | |||
body.skin-theme-clientpref-os .infobox a.new:link, | |||
body.skin-theme-clientpref-os .infobox a.new:visited { | |||
color: #ff6b6b; | |||
} | } | ||
} | } | ||