MediaWiki:Common.css: Difference between revisions
m Lighten list bullet/number markers for visibility on the dark theme |
m Toolbar highlight: add --d-hover (#33333a dark grey) token; use it for dropdown/index/glyph hover instead of near-black --d-panel |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 232: | Line 232: | ||
--d-text:#E9E6E0; --d-muted:#9A9792; | --d-text:#E9E6E0; --d-muted:#9A9792; | ||
--d-gold:#F5BD3F; --d-gold2:#F4A345; --d-red:#BE2F24; | --d-gold:#F5BD3F; --d-gold2:#F4A345; --d-red:#BE2F24; | ||
--d-border:#2A2A2C; --d-link:#E7B84B; --d-ext:#7FB2D6; | --d-border:#2A2A2C; --d-link:#E7B84B; --d-ext:#7FB2D6; --d-hover:#33333a; | ||
} | } | ||
html, body { background: var(--d-bg); color: var(--d-text); } | html, body { background: var(--d-bg); color: var(--d-text); } | ||
| Line 278: | Line 278: | ||
#mw-content-text ol > li::marker, | #mw-content-text ol > li::marker, | ||
#mw-content-text dl dd::marker { color: var(--d-muted); } | #mw-content-text dl dd::marker { color: var(--d-muted); } | ||
/* Reference lists, footnotes, and "Record notes" (pii group): the skin default | |||
leaves these on a light background, which is invisible against the dark theme. | |||
Force a transparent panel and readable text/links. */ | |||
#mw-content-text .mw-references-wrap, | |||
#mw-content-text ol.references, | |||
#mw-content-text .references, | |||
#mw-content-text .reference-text, | |||
#mw-content-text ol.references li { | |||
background: transparent; | |||
color: var(--d-text); | |||
} | |||
#mw-content-text .reference-text a, | |||
#mw-content-text .mw-cite-backlink a { color: var(--d-link); } | |||
#mw-content-text .references { border-color: var(--d-border); } | |||
/* TOC, thumbs, code, catlinks, messageboxes */ | /* TOC, thumbs, code, catlinks, messageboxes */ | ||
| Line 359: | Line 374: | ||
.wikiEditor-ui-toolbar .sections { background: var(--d-panel2); border-color: var(--d-border); } | .wikiEditor-ui-toolbar .sections { background: var(--d-panel2); border-color: var(--d-border); } | ||
.mw-editform .cancelLink a { color: var(--d-link); } | .mw-editform .cancelLink a { color: var(--d-link); } | ||
/* Toolbar icon buttons are monochrome dark glyphs (inline background-image) that vanish on the dark toolbar; invert to white. */ | |||
.wikiEditor-ui-toolbar [style*="url("], | |||
.wikiEditor-ui-toolbar .tool-button, | |||
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon { filter: invert(1); } | |||
/* Toolbar text controls (dropdowns, group labels, section booklets) hardcode light-theme colors with higher specificity; override with matched specificity + !important. */ | |||
/* Heading dropdown: handle, label, menu, options */ | |||
.wikiEditor-ui-toolbar .group .tool-select, | |||
.wikiEditor-ui-toolbar .group .tool-select .menu .options, | |||
.wikiEditor-ui-toolbar .group .tool-select .options { background-color: var(--d-panel2) !important; border-color: var(--d-border) !important; } | |||
.wikiEditor-ui-toolbar .group .tool-select .label, | |||
.wikiEditor-ui-toolbar .group .tool-select .options .option { color: var(--d-text) !important; } | |||
.wikiEditor-ui-toolbar .group .tool-select .options .option:hover { background-color: var(--d-hover) !important; color: var(--d-text) !important; } | |||
.wikiEditor-ui-toolbar .group .tool-select .label.skin-invert { filter: none !important; } | |||
.wikiEditor-ui-toolbar .group .tool-select .label::after { filter: invert(1); } | |||
/* Group labels (Format, Insert, ...) */ | |||
.wikiEditor-ui-toolbar .group .label { color: var(--d-text) !important; } | |||
/* Section tabs (Advanced / Special characters / Help) */ | |||
.wikiEditor-ui-toolbar .tabs .tab a { color: var(--d-link) !important; } | |||
/* Special-characters & Help booklets: index list + hover/current highlight */ | |||
.wikiEditor-ui-toolbar .booklet > .index > div { color: var(--d-text); } | |||
.wikiEditor-ui-toolbar .booklet > .index > div:hover, | |||
.wikiEditor-ui-toolbar .booklet > .index > .current, | |||
.wikiEditor-ui-toolbar .booklet > .index .wikiEditor-character-highlighted { background-color: var(--d-hover) !important; color: var(--d-text) !important; } | |||
/* Help tables + special-character glyph tiles */ | |||
.wikiEditor-ui-toolbar .booklet table th, | |||
.wikiEditor-ui-toolbar .booklet table td, | |||
.wikiEditor-ui-toolbar .booklet .cell span { color: var(--d-text); border-color: var(--d-border); } | |||
.wikiEditor-ui-toolbar .page-characters div span { color: var(--d-text) !important; border-color: var(--d-border); } | |||
.wikiEditor-ui-toolbar .page-characters div span:hover { background-color: var(--d-hover) !important; border-color: var(--d-gold); } | |||
/* --- OOUI widgets (used across modern special pages / dialogs) --- */ | /* --- OOUI widgets (used across modern special pages / dialogs) --- */ | ||
| Line 632: | Line 676: | ||
.tf-steps { counter-reset: tfstep; } | .tf-steps { counter-reset: tfstep; } | ||
.tf-steps > li { margin:8px 0; } | .tf-steps > li { margin:8px 0; } | ||
/* ===== Mobile readability for article content (added 2026-07-18) ===== | |||
Scoped to narrow viewports; desktop layout unchanged. Complements the | |||
existing tf-mainpage @media rules above. */ | |||
@media (max-width: 700px) { | |||
/* Infoboxes span full width instead of squeezing body text into a sliver */ | |||
.mw-parser-output .infobox, | |||
.mw-parser-output .sidebar, | |||
.mw-parser-output .tf-cbox, | |||
.mw-parser-output .tf-abox, | |||
.mw-parser-output .tf-pbox, | |||
.mw-parser-output .tf-ebox { | |||
float: none !important; | |||
width: auto !important; | |||
max-width: 100% !important; | |||
margin: 0.6em auto !important; | |||
box-sizing: border-box; | |||
} | |||
/* Wide data tables scroll within their own box, not the whole page */ | |||
.mw-parser-output .wikitable, | |||
.mw-parser-output .tf-navbox { | |||
display: block; | |||
overflow-x: auto; | |||
-webkit-overflow-scrolling: touch; | |||
max-width: 100%; | |||
} | |||
/* Images never force horizontal overflow */ | |||
.mw-parser-output img { | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
} | |||