MediaWiki:Common.css: Difference between revisions

(13 intermediate revisions by the same user not shown)

Line 232:

--d-text:#E9E6E0; --d-muted:#9A9792;

--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); }

Line 251:

/* Headings */

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,

#firstHeading, .firstHeading { color: var(--d-gold); }

#firstHeading, .firstHeading { color: var(--d-gold); font-variant: small-caps; letter-spacing: 0.03em; }

.mw-body h1, .mw-body h2, #firstHeading, .firstHeading { border-bottom: 1px solid var(--d-border); }

Line 273:

.wikitable > * > tr > th, .wikitable > tr > th { background: var(--d-panel2); color: var(--d-gold); border-color: var(--d-border); }

.wikitable > * > tr > td, .wikitable > tr > td { border-color: var(--d-border); }

/* List bullets/numbers: default marker color is too dark on the dark theme, so lighten it */

#mw-content-text ul > li::marker,

#mw-content-text ol > li::marker,

#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 */

Line 354:

Line 374:

.wikiEditor-ui-toolbar .sections { background: var(--d-panel2); border-color: var(--d-border); }

.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) --- */

Line 484:

Line 533:

.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {

background-color: var(--d-panel); color: var(--d-gold);

}

/* Fit the full-resolution Tenth Fleet crest into the legacy-Vector logo box

(the source image is 1400x1400; without this it renders zoomed/cropped). */

.mw-wiki-logo,

#p-logo a {

background-size: contain !important;

background-position: center center !important;

background-repeat: no-repeat !important;

}

/* ============================================================

DARK THEME part 4 — special-page catch-all (2026-07)

Some special pages (lists, pagers, forms) render core components

that ship their own light background, leaving light theme-text on

white → unreadable. Force the whole special-page content dark.

Scoped to body.ns-special so normal article pages are untouched.

============================================================ */

body.ns-special #content,

body.ns-special .mw-body,

body.ns-special #bodyContent,

body.ns-special #mw-content-text,

body.ns-special .mw-body-content,

body.ns-special .mw-spcontent {

background-color: var(--d-panel) !important;

color: var(--d-text) !important;

}

body.ns-special #mw-content-text table,

body.ns-special #mw-content-text td,

body.ns-special #mw-content-text tr,

body.ns-special #mw-content-text fieldset,

body.ns-special #mw-content-text .oo-ui-panelLayout,

body.ns-special #mw-content-text .mw-htmlform,

body.ns-special #mw-content-text .cdx-table__table {

background-color: var(--d-panel) !important;

border-color: var(--d-border) !important;

}

body.ns-special #mw-content-text th {

background-color: var(--d-panel2) !important;

color: var(--d-gold) !important;

border-color: var(--d-border) !important;

}

body.ns-special #mw-content-text li,

body.ns-special #mw-content-text dd,

body.ns-special #mw-content-text dt,

body.ns-special #mw-content-text p { color: var(--d-text) !important; }

body.ns-special #mw-content-text a,

body.ns-special #mw-content-text a:visited { color: var(--d-link) !important; }

body.ns-special #mw-content-text a.new,

body.ns-special #mw-content-text a.new:visited { color: var(--d-red) !important; }

/* Special-page hover highlight — the part-4 catch-all fixes cell bg with

!important, which flattened the row hover. Restore a clearly visible,

gold-tinted highlight (higher specificity via :hover so it wins). */

body.ns-special #mw-content-text tr:hover td,

body.ns-special #mw-content-text tr:hover th,

body.ns-special #mw-content-text table.mw-datatable tr:hover td,

body.ns-special #mw-content-text .TablePager tr:hover td,

body.ns-special #mw-content-text li:hover,

body.ns-special #mw-content-text .mw-specialpages-list li:hover,

body.ns-special #mw-content-text .mw-changeslist li:hover {

background-color: #3a3421 !important; /* warm gold-tinted, ~3x brighter than #141416 */

color: var(--d-text) !important;

}

/* ============================================================

Awards namespace (ns 6002) — page beautification

============================================================ */

body.ns-6002 #mw-content-text > p:first-of-type {

font-size: 108%; line-height: 1.6; color: #EFEAE6;

border-left: 3px solid #8A6D1E; padding: 2px 0 2px 14px; margin-bottom: 1.1em;

}

body.ns-6002 #mw-content-text h2 {

color: var(--d-gold); font-variant: small-caps; letter-spacing: 0.04em;

border-bottom: 2px solid #8A6D1E; padding-bottom: 4px; margin-top: 1.4em;

}

body.ns-6002 #mw-content-text h3 {

color: #F4A345; border-bottom: 1px solid #2A2A2C; padding-bottom: 2px;

}

body.ns-6002 #mw-content-text .wikitable {

border: 1px solid #2A2A2C; background: #141416; box-shadow: 0 1px 3px rgba(0,0,0,0.4);

}

body.ns-6002 #mw-content-text .wikitable > * > tr > th {

background: #232326; color: var(--d-gold); border: 1px solid #2A2A2C;

font-variant: small-caps; letter-spacing: 0.03em;

}

body.ns-6002 #mw-content-text .wikitable > * > tr > td { border: 1px solid #262628; }

/* zebra striping — skip rows carrying an inline style so {{new award}} orange survives */

body.ns-6002 #mw-content-text .wikitable > tbody > tr:nth-child(even):not([style]) > td { background: #18181b; }

body.ns-6002 #mw-content-text .wikitable > tbody > tr:hover:not([style]) > td { background: #26210f; }

/* ============================================================

Special-namespace Codex/OOUI form widgets -> dark theme

(UserLogin, CreateAccount, PasswordReset, Preferences, Upload, Block, ...)

These are painted by ResourceLoader modules the content rule can't reach.

============================================================ */

body.ns-special #mw-content-text .cdx-text-input__input,

body.ns-special #mw-content-text .cdx-text-input__input:enabled,

body.ns-special #mw-content-text .cdx-text-area__textarea,

body.ns-special #mw-content-text .cdx-select__handle,

body.ns-special #mw-content-text .oo-ui-inputWidget-input {

background-color: #1c1c20 !important;

color: var(--d-text) !important;

border-color: var(--d-border) !important;

}

body.ns-special #mw-content-text .cdx-text-input__input:enabled:read-only {

background-color: #141416 !important;

color: var(--d-muted) !important;

}

body.ns-special #mw-content-text .cdx-label__label,

body.ns-special #mw-content-text .cdx-label__label__text,

body.ns-special #mw-content-text .cdx-label__description,

body.ns-special #mw-content-text .cdx-checkbox__label,

body.ns-special #mw-content-text .cdx-field__help-text,

body.ns-special #mw-content-text .oo-ui-labelElement-label,

body.ns-special #mw-content-text .oo-ui-fieldLayout-header label {

color: var(--d-text) !important;

}

/* CAPTCHA box on CreateAccount */

body.ns-special #mw-content-text .fancycaptcha-captcha-container,

body.ns-special #mw-content-text .fancycaptcha-captcha-and-reload {

background-color: #1c1c20 !important;

border-color: var(--d-border) !important;

}

/* ============================================================

Documentation callout boxes (tip / note / warning / example / steps)

============================================================ */

.tf-tip, .tf-note, .tf-warn, .tf-example {

margin: 12px 0; padding: 10px 14px; border-radius: 6px;

border-left: 4px solid #2A2A2C; background: #17171a; color: var(--d-text);

}

.tf-tip { border-left-color: #1E7A3E; }

.tf-note { border-left-color: #2E4A6A; }

.tf-warn { border-left-color: #BE2F24; }

.tf-example { border-left-color: #8A6D1E; background:#141416; }

.tf-tip .tf-lbl { color:#63c187; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }

.tf-note .tf-lbl { color:#7fa8d8; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }

.tf-warn .tf-lbl { color:#e79b9b; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }

.tf-example .tf-lbl { color:#F5BD3F; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }

.tf-lead { font-size:106%; line-height:1.6; border-left:3px solid #8A6D1E; padding:2px 0 2px 14px; margin-bottom:1em; color:#EFEAE6; }

.tf-steps { counter-reset: tfstep; }

.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;

}

@@ Line 232: / Line 232: @@
 	--d-text:#E9E6E0; --d-muted:#9A9792;
 	--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); }
@@ Line 251: / Line 251: @@
 /* Headings */
 .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
-#firstHeading, .firstHeading { color: var(--d-gold); }
+#firstHeading, .firstHeading { color: var(--d-gold); font-variant: small-caps; letter-spacing: 0.03em; }
 .mw-body h1, .mw-body h2, #firstHeading, .firstHeading { border-bottom: 1px solid var(--d-border); }
@@ Line 273: / Line 273: @@
 .wikitable > * > tr > th, .wikitable > tr > th { background: var(--d-panel2); color: var(--d-gold); border-color: var(--d-border); }
 .wikitable > * > tr > td, .wikitable > tr > td { border-color: var(--d-border); }
+/* List bullets/numbers: default marker color is too dark on the dark theme, so lighten it */
+#mw-content-text ul > li::marker,
+#mw-content-text ol > li::marker,
+#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 */
@@ Line 354: / Line 374: @@
 .wikiEditor-ui-toolbar .sections { background: var(--d-panel2); border-color: var(--d-border); }
 .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) --- */
@@ Line 484: / Line 533: @@
 .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
 	background-color: var(--d-panel); color: var(--d-gold);
+}
+/* Fit the full-resolution Tenth Fleet crest into the legacy-Vector logo box
+   (the source image is 1400x1400; without this it renders zoomed/cropped). */
+.mw-wiki-logo,
+#p-logo a {
+	background-size: contain !important;
+	background-position: center center !important;
+	background-repeat: no-repeat !important;
+}
+/* ============================================================
+   DARK THEME part 4 — special-page catch-all (2026-07)
+   Some special pages (lists, pagers, forms) render core components
+   that ship their own light background, leaving light theme-text on
+   white → unreadable. Force the whole special-page content dark.
+   Scoped to body.ns-special so normal article pages are untouched.
+   ============================================================ */
+body.ns-special #content,
+body.ns-special .mw-body,
+body.ns-special #bodyContent,
+body.ns-special #mw-content-text,
+body.ns-special .mw-body-content,
+body.ns-special .mw-spcontent {
+	background-color: var(--d-panel) !important;
+	color: var(--d-text) !important;
+}
+body.ns-special #mw-content-text table,
+body.ns-special #mw-content-text td,
+body.ns-special #mw-content-text tr,
+body.ns-special #mw-content-text fieldset,
+body.ns-special #mw-content-text .oo-ui-panelLayout,
+body.ns-special #mw-content-text .mw-htmlform,
+body.ns-special #mw-content-text .cdx-table__table {
+	background-color: var(--d-panel) !important;
+	border-color: var(--d-border) !important;
+}
+body.ns-special #mw-content-text th {
+	background-color: var(--d-panel2) !important;
+	color: var(--d-gold) !important;
+	border-color: var(--d-border) !important;
+}
+body.ns-special #mw-content-text li,
+body.ns-special #mw-content-text dd,
+body.ns-special #mw-content-text dt,
+body.ns-special #mw-content-text p { color: var(--d-text) !important; }
+body.ns-special #mw-content-text a,
+body.ns-special #mw-content-text a:visited { color: var(--d-link) !important; }
+body.ns-special #mw-content-text a.new,
+body.ns-special #mw-content-text a.new:visited { color: var(--d-red) !important; }
+/* Special-page hover highlight — the part-4 catch-all fixes cell bg with
+   !important, which flattened the row hover. Restore a clearly visible,
+   gold-tinted highlight (higher specificity via :hover so it wins). */
+body.ns-special #mw-content-text tr:hover td,
+body.ns-special #mw-content-text tr:hover th,
+body.ns-special #mw-content-text table.mw-datatable tr:hover td,
+body.ns-special #mw-content-text .TablePager tr:hover td,
+body.ns-special #mw-content-text li:hover,
+body.ns-special #mw-content-text .mw-specialpages-list li:hover,
+body.ns-special #mw-content-text .mw-changeslist li:hover {
+	background-color: #3a3421 !important;   /* warm gold-tinted, ~3x brighter than #141416 */
+	color: var(--d-text) !important;
+}
+/* ============================================================
+   Awards namespace (ns 6002) — page beautification
+   ============================================================ */
+body.ns-6002 #mw-content-text > p:first-of-type {
+	font-size: 108%; line-height: 1.6; color: #EFEAE6;
+	border-left: 3px solid #8A6D1E; padding: 2px 0 2px 14px; margin-bottom: 1.1em;
+}
+body.ns-6002 #mw-content-text h2 {
+	color: var(--d-gold); font-variant: small-caps; letter-spacing: 0.04em;
+	border-bottom: 2px solid #8A6D1E; padding-bottom: 4px; margin-top: 1.4em;
+}
+body.ns-6002 #mw-content-text h3 {
+	color: #F4A345; border-bottom: 1px solid #2A2A2C; padding-bottom: 2px;
+}
+body.ns-6002 #mw-content-text .wikitable {
+	border: 1px solid #2A2A2C; background: #141416; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+}
+body.ns-6002 #mw-content-text .wikitable > * > tr > th {
+	background: #232326; color: var(--d-gold); border: 1px solid #2A2A2C;
+	font-variant: small-caps; letter-spacing: 0.03em;
+}
+body.ns-6002 #mw-content-text .wikitable > * > tr > td { border: 1px solid #262628; }
+/* zebra striping — skip rows carrying an inline style so {{new award}} orange survives */
+body.ns-6002 #mw-content-text .wikitable > tbody > tr:nth-child(even):not([style]) > td { background: #18181b; }
+body.ns-6002 #mw-content-text .wikitable > tbody > tr:hover:not([style]) > td { background: #26210f; }
+/* ============================================================
+   Special-namespace Codex/OOUI form widgets -> dark theme
+   (UserLogin, CreateAccount, PasswordReset, Preferences, Upload, Block, ...)
+   These are painted by ResourceLoader modules the content rule can't reach.
+   ============================================================ */
+body.ns-special #mw-content-text .cdx-text-input__input,
+body.ns-special #mw-content-text .cdx-text-input__input:enabled,
+body.ns-special #mw-content-text .cdx-text-area__textarea,
+body.ns-special #mw-content-text .cdx-select__handle,
+body.ns-special #mw-content-text .oo-ui-inputWidget-input {
+	background-color: #1c1c20 !important;
+	color: var(--d-text) !important;
+	border-color: var(--d-border) !important;
+}
+body.ns-special #mw-content-text .cdx-text-input__input:enabled:read-only {
+	background-color: #141416 !important;
+	color: var(--d-muted) !important;
+}
+body.ns-special #mw-content-text .cdx-label__label,
+body.ns-special #mw-content-text .cdx-label__label__text,
+body.ns-special #mw-content-text .cdx-label__description,
+body.ns-special #mw-content-text .cdx-checkbox__label,
+body.ns-special #mw-content-text .cdx-field__help-text,
+body.ns-special #mw-content-text .oo-ui-labelElement-label,
+body.ns-special #mw-content-text .oo-ui-fieldLayout-header label {
+	color: var(--d-text) !important;
+}
+/* CAPTCHA box on CreateAccount */
+body.ns-special #mw-content-text .fancycaptcha-captcha-container,
+body.ns-special #mw-content-text .fancycaptcha-captcha-and-reload {
+	background-color: #1c1c20 !important;
+	border-color: var(--d-border) !important;
+}
+/* ============================================================
+   Documentation callout boxes (tip / note / warning / example / steps)
+   ============================================================ */
+.tf-tip, .tf-note, .tf-warn, .tf-example {
+	margin: 12px 0; padding: 10px 14px; border-radius: 6px;
+	border-left: 4px solid #2A2A2C; background: #17171a; color: var(--d-text);
+}
+.tf-tip  { border-left-color: #1E7A3E; }
+.tf-note { border-left-color: #2E4A6A; }
+.tf-warn { border-left-color: #BE2F24; }
+.tf-example { border-left-color: #8A6D1E; background:#141416; }
+.tf-tip .tf-lbl  { color:#63c187; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }
+.tf-note .tf-lbl { color:#7fa8d8; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }
+.tf-warn .tf-lbl { color:#e79b9b; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }
+.tf-example .tf-lbl { color:#F5BD3F; font-weight:bold; font-variant:small-caps; letter-spacing:.04em; }
+.tf-lead { font-size:106%; line-height:1.6; border-left:3px solid #8A6D1E; padding:2px 0 2px 14px; margin-bottom:1em; color:#EFEAE6; }
+.tf-steps { counter-reset: tfstep; }
+.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;
+    }
 }

MediaWiki:Common.css: Difference between revisions

MDGarcia (talk | contribs)