Jump to content

Template:Infobox government agency/styles.css: Difference between revisions

From the Vrienden Universe, a fictional wiki
Created page with "Dark mode fix for Infobox government agency: @media (prefers-color-scheme: dark) { Section headers like "Agency overview": .infobox caption, .infobox .infobox-header, .infobox th.infobox-header, .infobox .infobox-section-header { background-color: #1B223D !important; same dark blue: color: #e0f0ff !important; border-color: #3a506b !important; } Specifically target the white overview row: .inf..."
 
Remove infobox label wrapping overrides
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Dark mode fix for Infobox government agency */
/* Infobox government agency — Dark mode override */
/* Uses MediaWiki client preference dark theme */


@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-dark .infobox {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #444 !important;
}


    /* Section headers like "Agency overview" */
/* Main title (e.g., "Bau-Einsatz") */
    .infobox caption,
html.skin-theme-clientpref-dark .infobox caption {
    .infobox .infobox-header,
    background-color: #1B223D !important;
    .infobox th.infobox-header,
    color: #e0f0ff !important;
    .infobox .infobox-section-header {
    border-color: #3a506b !important;
        background-color: #1B223D !important; /* same dark blue */
}
        color: #e0f0ff !important;
        border-color: #3a506b !important;
    }


    /* Specifically target the white overview row */
/* Section headers like "Agency overview" */
    .infobox th[colspan="2"] {
html.skin-theme-clientpref-dark .infobox th.infobox-header,
        background-color: #1B223D !important;
html.skin-theme-clientpref-dark .infobox .infobox-header,
        color: #e0f0ff !important;
html.skin-theme-clientpref-dark .infobox .infobox-section-header,
        border-color: #3a506b !important;
html.skin-theme-clientpref-dark .infobox th[colspan="2"] {
     }
    background-color: #1B223D !important;
    color: #e0f0ff !important;
    border-color: #3a506b !important;
}
 
/* Label cells (left column) */
html.skin-theme-clientpref-dark .infobox th {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
 
/* Data cells (right column) */
html.skin-theme-clientpref-dark .infobox td {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #444 !important;
}
 
/* Links inside infobox */
html.skin-theme-clientpref-dark .infobox a {
     color: #8ec5ff !important;
}
 
/* Keep infobox section headers centered. */
.infobox .infobox-header,
.infobox th.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;
}
}
}

Latest revision as of 13:24, 4 July 2026

/* Infobox government agency — Dark mode override */
/* Uses MediaWiki client preference dark theme */

html.skin-theme-clientpref-dark .infobox {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

/* Main title (e.g., "Bau-Einsatz") */
html.skin-theme-clientpref-dark .infobox caption {
    background-color: #1B223D !important;
    color: #e0f0ff !important;
    border-color: #3a506b !important;
}

/* Section headers like "Agency overview" */
html.skin-theme-clientpref-dark .infobox th.infobox-header,
html.skin-theme-clientpref-dark .infobox .infobox-header,
html.skin-theme-clientpref-dark .infobox .infobox-section-header,
html.skin-theme-clientpref-dark .infobox th[colspan="2"] {
    background-color: #1B223D !important;
    color: #e0f0ff !important;
    border-color: #3a506b !important;
}

/* Label cells (left column) */
html.skin-theme-clientpref-dark .infobox th {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* Data cells (right column) */
html.skin-theme-clientpref-dark .infobox td {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

/* Links inside infobox */
html.skin-theme-clientpref-dark .infobox a {
    color: #8ec5ff !important;
}

/* Keep infobox section headers centered. */
.infobox .infobox-header,
.infobox th.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;
	}
}