MediaWiki:Common.css/dark: Difference between revisions
Created page with "→CSS placed here will be applied to all skins: →===== Infobox dark-mode overrides =====: .mediawiki-ui-color-scheme-dark table.infobox, .mediawiki-ui-color-scheme-dark table.infobox-subbox { background-color: var(--surface-secondary) !important; } .mediawiki-ui-color-scheme-dark .infobox-header, .mediawiki-ui-color-scheme-dark .infobox-label, .mediawiki-ui-color-scheme-dark .infobox-data, .mediawiki-ui-color-scheme-dark .infobox-full-data, .mediawiki-ui-color..." |
No edit summary |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* ===== Dark‐mode overrides for all infoboxes ===== */ | |||
/* ===== | |||
. | /* In “night” mode (Vector > Appearance > Dark), flip the infobox background */ | ||
. | html.skin-theme-clientpref-night table.infobox, | ||
html.skin-theme-clientpref-night table.infobox-subbox { | |||
background-color: var(--surface-secondary) !important; | background-color: var(--surface-secondary) !important; | ||
} | } | ||
. | /* In dark mode, invert all text and borders inside infoboxes */ | ||
. | html.skin-theme-clientpref-night table.infobox, | ||
html.skin-theme-clientpref-night table.infobox th, | |||
. | html.skin-theme-clientpref-night table.infobox td { | ||
. | color: var(--text-primary) !important; | ||
border-color: var(--border-color-base) !important; | |||
} | |||
/* Ensure the infobox title and header keep your brand color */ | |||
html.skin-theme-clientpref-night table.infobox caption.infobox-title, | |||
html.skin-theme-clientpref-night table.infobox .infobox-header { | |||
background-color: #003B6F !important; | |||
color: #ffffff !important; | |||
} | |||
/* If you have a specialized “serverbuild” variant: */ | |||
html.skin-theme-clientpref-night table.infobox.serverbuild { | |||
background-color: var(--surface-secondary) !important; | background-color: var(--surface-secondary) !important; | ||
} | } | ||
html.skin-theme-clientpref-night table.infobox.serverbuild .infobox-header, | |||
html.skin-theme-clientpref-night table.infobox.serverbuild .infobox-label { | |||
background-color: #003B6F !important; | |||
color: #ffffff !important; | |||
} | |||
@media screen { | |||
/* catch Vector’s “night” theme */ | |||
html.skin-theme-clientpref-night table.infobox, | |||
html.skin-theme-clientpref-os table.infobox { | |||
background-color: var(--surface-secondary) !important; | |||
} | |||
/* carry your deep-blue header through dark mode */ | |||
html.skin-theme-clientpref-night table.infobox .infobox-header, | |||
html.skin-theme-clientpref-os table.infobox .infobox-header { | |||
background-color: #003B6F !important; | |||
color: #ffffff !important; | |||
} | |||
/* brighten the title at the top */ | |||
html.skin-theme-clientpref-night table.infobox caption.infobox-title, | |||
html.skin-theme-clientpref-os table.infobox caption.infobox-title { | |||
color: #f8f9fa !important; | |||
} | |||
} | |||
/* End of dark overrides */ | |||
Latest revision as of 01:15, 6 May 2025
/* ===== Dark‐mode overrides for all infoboxes ===== */
/* In “night” mode (Vector > Appearance > Dark), flip the infobox background */
html.skin-theme-clientpref-night table.infobox,
html.skin-theme-clientpref-night table.infobox-subbox {
background-color: var(--surface-secondary) !important;
}
/* In dark mode, invert all text and borders inside infoboxes */
html.skin-theme-clientpref-night table.infobox,
html.skin-theme-clientpref-night table.infobox th,
html.skin-theme-clientpref-night table.infobox td {
color: var(--text-primary) !important;
border-color: var(--border-color-base) !important;
}
/* Ensure the infobox title and header keep your brand color */
html.skin-theme-clientpref-night table.infobox caption.infobox-title,
html.skin-theme-clientpref-night table.infobox .infobox-header {
background-color: #003B6F !important;
color: #ffffff !important;
}
/* If you have a specialized “serverbuild” variant: */
html.skin-theme-clientpref-night table.infobox.serverbuild {
background-color: var(--surface-secondary) !important;
}
html.skin-theme-clientpref-night table.infobox.serverbuild .infobox-header,
html.skin-theme-clientpref-night table.infobox.serverbuild .infobox-label {
background-color: #003B6F !important;
color: #ffffff !important;
}
@media screen {
/* catch Vector’s “night” theme */
html.skin-theme-clientpref-night table.infobox,
html.skin-theme-clientpref-os table.infobox {
background-color: var(--surface-secondary) !important;
}
/* carry your deep-blue header through dark mode */
html.skin-theme-clientpref-night table.infobox .infobox-header,
html.skin-theme-clientpref-os table.infobox .infobox-header {
background-color: #003B6F !important;
color: #ffffff !important;
}
/* brighten the title at the top */
html.skin-theme-clientpref-night table.infobox caption.infobox-title,
html.skin-theme-clientpref-os table.infobox caption.infobox-title {
color: #f8f9fa !important;
}
}
/* End of dark overrides */