Vrienden Universe

Template:Infobox settlement/styles.css: Difference between revisions

VU-MaintenanceBot (talk | contribs)

5 user groups
1,799 edits
undo
wiki>Jonesey95
fix text color in dark mode; this generally works but may cause problems, in which case revert or try specifying a different CSS value
Tag: Recreated
 
Remove infobox label wrapping overrides
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* {{pp|small=y}} */
/* Settlement infobox styling */
 
.ib-settlement {
.ib-settlement {
border-collapse: collapse;
border-collapse: collapse;
line-height: 1.2em;
line-height: 1.2em;
box-sizing: border-box;
}
}


@media (min-width: 640px) {
/* Do not force mobile full-width. The main table width is set by bodystyle in Template:Infobox settlement. */
.ib-settlement {
width: 23em;
}
}


/* TODO split definitions to appropriate class names when live from HTML element */
.ib-settlement td,
.ib-settlement td,
.ib-settlement th {
.ib-settlement th {
border-top: 1px solid #a2a9b1;
border-top: 1px solid var(--border-color-base, #a2a9b1);
padding: 0.4em 0.6em 0.4em 0.6em;
padding: 0.4em 0.6em;
box-sizing: border-box;
}
}


Line 23: Line 21:
.ib-settlement .mergedtoprow .infobox-label,
.ib-settlement .mergedtoprow .infobox-label,
.ib-settlement .mergedtoprow .infobox-below {
.ib-settlement .mergedtoprow .infobox-below {
border-top: 1px solid #a2a9b1;
border-top: 1px solid var(--border-color-base, #a2a9b1);
padding: 0.4em 0.6em 0.2em 0.6em;
padding: 0.4em 0.6em 0.2em;
}
}


Line 31: Line 29:
.ib-settlement .mergedrow .infobox-label {
.ib-settlement .mergedrow .infobox-label {
border: 0;
border: 0;
padding: 0 0.6em 0.2em 0.6em;
padding: 0 0.6em 0.2em;
}
}


Line 38: Line 36:
.ib-settlement .mergedbottomrow .infobox-label {
.ib-settlement .mergedbottomrow .infobox-label {
border-top: 0;
border-top: 0;
border-bottom: 1px solid #a2a9b1;
border-bottom: 1px solid var(--border-color-base, #a2a9b1);
padding: 0 0.6em 0.4em 0.6em;
padding: 0 0.6em 0.4em;
}
}


Line 45: Line 43:
border: 0;
border: 0;
padding: 0;
padding: 0;
}
.ib-settlement .infobox-header,
.ib-settlement .infobox-below {
text-align: left;
}
}


Line 55: Line 48:
font-size: 125%;
font-size: 125%;
line-height: 1.3em;
line-height: 1.3em;
text-align: center;
}
}


.ib-settlement .infobox-subheader {
.ib-settlement .infobox-subheader {
background-color: #cddeff;color:inherit;
font-weight: bold;
font-weight: bold;
text-align: center;
}
.ib-settlement .infobox-header,
.ib-settlement .infobox-below {
text-align: left;
}
}


Line 76: Line 75:


.ib-settlement-caption {
.ib-settlement-caption {
padding: 0.3em 0 0 0;
padding: 0.3em 0 0;
}
}


Line 90: Line 89:
font-weight: normal;
font-weight: normal;
display: inline;
display: inline;
}
/* Keep infobox section headers centered. */
.infobox.ib-settlement .infobox-header,
.ib-settlement .infobox-header {
text-align: center;
}
@media screen {
html.skin-theme-clientpref-night .infobox,
body.skin-theme-clientpref-night .infobox {
background-color: #1e1e1e;
color: #ffffff;
border-color: #444;
}
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 {
background-color: #1e1e1e;
color: #ffffff;
border-color: #444;
}
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,
html.skin-theme-clientpref-night .infobox caption,
html.skin-theme-clientpref-night .infobox th[colspan],
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,
body.skin-theme-clientpref-night .infobox caption,
body.skin-theme-clientpref-night .infobox th[colspan] {
background-color: #1B223D !important;
color: #e0f0ff !important;
border-color: #3a506b;
}
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;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .infobox,
body.skin-theme-clientpref-os .infobox {
background-color: #1e1e1e;
color: #ffffff;
border-color: #444;
}
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 {
background-color: #1e1e1e;
color: #ffffff;
border-color: #444;
}
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,
html.skin-theme-clientpref-os .infobox caption,
html.skin-theme-clientpref-os .infobox th[colspan],
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,
body.skin-theme-clientpref-os .infobox caption,
body.skin-theme-clientpref-os .infobox th[colspan] {
background-color: #1B223D !important;
color: #e0f0ff !important;
border-color: #3a506b;
}
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;
}
}
/* 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;
}
}
}
Retrieved from "https://vriendenuniverse.org/wiki/Template:Infobox_settlement/styles.css"