Template:Infobox valley/styles.css: Difference between revisions
Created page with "→Dark-mode-safe styling for Template:Infobox valley.: .infobox.ib-valley, .ib-valley { border-collapse: collapse; line-height: 1.2em; } @media (min-width: 640px) { .infobox.ib-valley, .ib-valley { width: 23em; } } .infobox.ib-valley td, .infobox.ib-valley th, .ib-valley td, .ib-valley th { border-top: 1px solid #a2a9b1; padding: 0.4em 0.6em; } .infobox.ib-valley .infobox-above, .ib-valley .infobox-above { font-size: 125%; line-height: 1.3em; } .infobo..." |
Remove infobox label wrapping overrides Tag: Manual revert |
||
| (7 intermediate revisions by 3 users not shown) | |||
| Line 5: | Line 5: | ||
border-collapse: collapse; | border-collapse: collapse; | ||
line-height: 1.2em; | line-height: 1.2em; | ||
color: var(--color-base, #202122); | |||
} | } | ||
| Line 18: | Line 19: | ||
.ib-valley td, | .ib-valley td, | ||
.ib-valley th { | .ib-valley th { | ||
border-top: 1px solid #a2a9b1; | border-top: 1px solid var(--border-color-base, #a2a9b1); | ||
padding: 0.4em 0.6em; | padding: 0.4em 0.6em; | ||
vertical-align: top; | |||
} | |||
.infobox.ib-valley .infobox-label, | |||
.infobox.ib-valley .infobox-data, | |||
.infobox.ib-valley .infobox-full-data, | |||
.ib-valley .infobox-label, | |||
.ib-valley .infobox-data, | |||
.ib-valley .infobox-full-data { | |||
background-color: transparent; | |||
color: var(--color-base, #202122); | |||
} | } | ||
| Line 26: | Line 38: | ||
font-size: 125%; | font-size: 125%; | ||
line-height: 1.3em; | line-height: 1.3em; | ||
text-align: center; | |||
} | } | ||
.infobox.ib-valley .infobox-above, | |||
.infobox.ib-valley .infobox-subheader, | .infobox.ib-valley .infobox-subheader, | ||
.ib-valley .infobox-subheader { | .infobox.ib-valley .infobox-header, | ||
background-color: # | .infobox.ib-valley .infobox-below, | ||
color: #202122; | .ib-valley .infobox-above, | ||
.ib-valley .infobox-subheader, | |||
.ib-valley .infobox-header, | |||
.ib-valley .infobox-below { | |||
background-color: var(--background-color-progressive-subtle, #eaf3ff); | |||
color: var(--color-base, #202122); | |||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
| Line 46: | Line 59: | ||
.ib-valley .infobox-below { | .ib-valley .infobox-below { | ||
text-align: left; | text-align: left; | ||
} | |||
.infobox.ib-valley .infobox-subheader, | |||
.ib-valley .infobox-subheader { | |||
text-align: center; | |||
} | |||
.ib-valley-other-name { | |||
display: inline; | |||
font-size: 78%; | |||
font-weight: normal; | |||
} | } | ||
| Line 52: | Line 76: | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
} | |||
.infobox.ib-valley a:link, | |||
.infobox.ib-valley a:visited, | |||
.ib-valley a:link, | |||
.ib-valley a:visited { | |||
color: var(--color-progressive, #36c); | |||
} | |||
.infobox.ib-valley a.new:link, | |||
.infobox.ib-valley a.new:visited, | |||
.ib-valley a.new:link, | |||
.ib-valley a.new:visited { | |||
color: var(--color-destructive, #d33); | |||
} | } | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .infobox.ib-valley, | html.skin-theme-clientpref-night .infobox.ib-valley, | ||
html.skin-theme-clientpref-night .ib-valley { | html.skin-theme-clientpref-night .ib-valley, | ||
body.skin-theme-clientpref-night .infobox.ib-valley, | |||
body.skin-theme-clientpref-night .ib-valley { | |||
background-color: #1e1e1e; | background-color: #1e1e1e; | ||
color: # | color: #ffffff; | ||
border-color: #444; | border-color: #444; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox.ib-valley | html.skin-theme-clientpref-night .infobox.ib-valley td, | ||
html.skin-theme-clientpref-night .ib-valley | html.skin-theme-clientpref-night .infobox.ib-valley th, | ||
color: | html.skin-theme-clientpref-night .ib-valley td, | ||
html.skin-theme-clientpref-night .ib-valley th, | |||
body.skin-theme-clientpref-night .infobox.ib-valley td, | |||
body.skin-theme-clientpref-night .infobox.ib-valley th, | |||
body.skin-theme-clientpref-night .ib-valley td, | |||
body.skin-theme-clientpref-night .ib-valley th { | |||
border-color: #444; | |||
} | } | ||
| Line 71: | Line 117: | ||
html.skin-theme-clientpref-night .ib-valley .infobox-header, | html.skin-theme-clientpref-night .ib-valley .infobox-header, | ||
html.skin-theme-clientpref-night .ib-valley .infobox-subheader, | html.skin-theme-clientpref-night .ib-valley .infobox-subheader, | ||
html.skin-theme-clientpref-night .ib-valley caption { | html.skin-theme-clientpref-night .ib-valley caption, | ||
body.skin-theme-clientpref-night .ib-valley .infobox-above, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-title, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-header, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-subheader, | |||
body.skin-theme-clientpref-night .ib-valley caption { | |||
background-color: #1B223D !important; | background-color: #1B223D !important; | ||
color: # | color: #ffffff !important; | ||
border-color: #3a506b !important; | border-color: #3a506b !important; | ||
} | |||
html.skin-theme-clientpref-night .ib-valley .infobox-above *, | |||
html.skin-theme-clientpref-night .ib-valley .infobox-title *, | |||
html.skin-theme-clientpref-night .ib-valley .infobox-header *, | |||
html.skin-theme-clientpref-night .ib-valley .infobox-subheader *, | |||
html.skin-theme-clientpref-night .ib-valley caption *, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-above *, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-title *, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-header *, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-subheader *, | |||
body.skin-theme-clientpref-night .ib-valley caption * { | |||
color: #ffffff !important; | |||
} | } | ||
html.skin-theme-clientpref-night .infobox.ib-valley .infobox-label, | html.skin-theme-clientpref-night .infobox.ib-valley .infobox-label, | ||
html.skin-theme-clientpref-night .infobox.ib-valley .infobox-data, | html.skin-theme-clientpref-night .infobox.ib-valley .infobox-data, | ||
html.skin-theme-clientpref-night .infobox.ib-valley | html.skin-theme-clientpref-night .infobox.ib-valley .infobox-full-data, | ||
html.skin-theme-clientpref-night .ib-valley .infobox-label, | html.skin-theme-clientpref-night .ib-valley .infobox-label, | ||
html.skin-theme-clientpref-night .ib-valley .infobox-data, | html.skin-theme-clientpref-night .ib-valley .infobox-data, | ||
html.skin-theme-clientpref-night .ib-valley | html.skin-theme-clientpref-night .ib-valley .infobox-full-data, | ||
body.skin-theme-clientpref-night .infobox.ib-valley .infobox-label, | |||
body.skin-theme-clientpref-night .infobox.ib-valley .infobox-data, | |||
body.skin-theme-clientpref-night .infobox.ib-valley .infobox-full-data, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-label, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-data, | |||
body.skin-theme-clientpref-night .ib-valley .infobox-full-data { | |||
background-color: #1e1e1e; | background-color: #1e1e1e; | ||
color: # | color: #ffffff !important; | ||
} | } | ||
| Line 93: | Line 160: | ||
html.skin-theme-clientpref-night .infobox.ib-valley a:visited, | html.skin-theme-clientpref-night .infobox.ib-valley a:visited, | ||
html.skin-theme-clientpref-night .ib-valley a:link, | html.skin-theme-clientpref-night .ib-valley a:link, | ||
html.skin-theme-clientpref-night .ib-valley a:visited { | html.skin-theme-clientpref-night .ib-valley a:visited, | ||
body.skin-theme-clientpref-night .infobox.ib-valley a:link, | |||
body.skin-theme-clientpref-night .infobox.ib-valley a:visited, | |||
body.skin-theme-clientpref-night .ib-valley a:link, | |||
body.skin-theme-clientpref-night .ib-valley a:visited { | |||
color: #88ccff; | color: #88ccff; | ||
} | } | ||
| Line 100: | Line 171: | ||
html.skin-theme-clientpref-night .infobox.ib-valley a.new:visited, | html.skin-theme-clientpref-night .infobox.ib-valley a.new:visited, | ||
html.skin-theme-clientpref-night .ib-valley a.new:link, | html.skin-theme-clientpref-night .ib-valley a.new:link, | ||
html.skin-theme-clientpref-night .ib-valley a.new:visited { | html.skin-theme-clientpref-night .ib-valley a.new:visited, | ||
body.skin-theme-clientpref-night .infobox.ib-valley a.new:link, | |||
body.skin-theme-clientpref-night .infobox.ib-valley a.new:visited, | |||
body.skin-theme-clientpref-night .ib-valley a.new:link, | |||
body.skin-theme-clientpref-night .ib-valley a.new:visited { | |||
color: #ff7a7a; | color: #ff7a7a; | ||
} | |||
html.skin-theme-clientpref-night .mw-parser-output .infobox.ib-valley .infobox-above, | |||
html.skin-theme-clientpref-night .mw-parser-output .infobox.ib-valley .infobox-subheader, | |||
html.skin-theme-clientpref-night .mw-parser-output .infobox.ib-valley .infobox-header, | |||
html.skin-theme-clientpref-night .mw-parser-output .infobox.ib-valley .infobox-label, | |||
body.skin-theme-clientpref-night .mw-parser-output .infobox.ib-valley .infobox-above, | |||
body.skin-theme-clientpref-night .mw-parser-output .infobox.ib-valley .infobox-subheader, | |||
body.skin-theme-clientpref-night .mw-parser-output .infobox.ib-valley .infobox-header, | |||
body.skin-theme-clientpref-night .mw-parser-output .infobox.ib-valley .infobox-label { | |||
color: #ffffff !important; | |||
} | } | ||
| Line 108: | Line 194: | ||
html.skin-theme-clientpref-os .ib-valley { | html.skin-theme-clientpref-os .ib-valley { | ||
background-color: #1e1e1e; | background-color: #1e1e1e; | ||
color: # | color: #ffffff; | ||
border-color: #444; | border-color: #444; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox.ib-valley | html.skin-theme-clientpref-os .infobox.ib-valley td, | ||
html.skin-theme-clientpref-os .ib-valley | html.skin-theme-clientpref-os .infobox.ib-valley th, | ||
color: | html.skin-theme-clientpref-os .ib-valley td, | ||
html.skin-theme-clientpref-os .ib-valley th { | |||
border-color: #444; | |||
} | } | ||
| Line 123: | Line 211: | ||
html.skin-theme-clientpref-os .ib-valley caption { | html.skin-theme-clientpref-os .ib-valley caption { | ||
background-color: #1B223D !important; | background-color: #1B223D !important; | ||
color: # | color: #ffffff !important; | ||
border-color: #3a506b !important; | border-color: #3a506b !important; | ||
} | |||
html.skin-theme-clientpref-os .ib-valley .infobox-above *, | |||
html.skin-theme-clientpref-os .ib-valley .infobox-title *, | |||
html.skin-theme-clientpref-os .ib-valley .infobox-header *, | |||
html.skin-theme-clientpref-os .ib-valley .infobox-subheader *, | |||
html.skin-theme-clientpref-os .ib-valley caption * { | |||
color: #ffffff !important; | |||
} | } | ||
html.skin-theme-clientpref-os .infobox.ib-valley .infobox-label, | html.skin-theme-clientpref-os .infobox.ib-valley .infobox-label, | ||
html.skin-theme-clientpref-os .infobox.ib-valley .infobox-data, | html.skin-theme-clientpref-os .infobox.ib-valley .infobox-data, | ||
html.skin-theme-clientpref-os .infobox.ib-valley | html.skin-theme-clientpref-os .infobox.ib-valley .infobox-full-data, | ||
html.skin-theme-clientpref-os .ib-valley .infobox-label, | html.skin-theme-clientpref-os .ib-valley .infobox-label, | ||
html.skin-theme-clientpref-os .ib-valley .infobox-data, | html.skin-theme-clientpref-os .ib-valley .infobox-data, | ||
html.skin-theme-clientpref-os .ib-valley | html.skin-theme-clientpref-os .ib-valley .infobox-full-data { | ||
background-color: #1e1e1e; | background-color: #1e1e1e; | ||
color: # | color: #ffffff !important; | ||
} | } | ||
| Line 152: | Line 245: | ||
html.skin-theme-clientpref-os .ib-valley a.new:visited { | html.skin-theme-clientpref-os .ib-valley a.new:visited { | ||
color: #ff7a7a; | color: #ff7a7a; | ||
} | |||
html.skin-theme-clientpref-os .mw-parser-output .infobox.ib-valley .infobox-above, | |||
html.skin-theme-clientpref-os .mw-parser-output .infobox.ib-valley .infobox-subheader, | |||
html.skin-theme-clientpref-os .mw-parser-output .infobox.ib-valley .infobox-header, | |||
html.skin-theme-clientpref-os .mw-parser-output .infobox.ib-valley .infobox-label { | |||
color: #ffffff !important; | |||
} | } | ||
} | } | ||
| Line 164: | Line 264: | ||
margin-left: 0; | margin-left: 0; | ||
margin-right: 0; | margin-right: 0; | ||
} | |||
} | |||
html.skin-theme-clientpref-night .mw-parser-output .ib-valley th.infobox-label, | |||
body.skin-theme-clientpref-night .mw-parser-output .ib-valley th.infobox-label, | |||
html.skin-theme-clientpref-os .mw-parser-output .ib-valley th.infobox-label { | |||
color: #ffffff !important; | |||
} | |||
/* Keep infobox section headers centered. */ | |||
.infobox.ib-valley .infobox-header, | |||
.ib-valley .infobox-header { | |||
text-align: center; | |||
} | |||
/* 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; | |||
} | } | ||
} | } | ||