MediaWiki:Common.css: Difference between revisions

(23 intermediate revisions by the same user not shown)

Line 104:

margin-bottom: 10px;

text-transform: uppercase;

margin-top: 0;

font-weight: normal;

}

.tf-mainpage .tf-rowhead {

padding: 18px 40px 4px;

font-size: 12px;

letter-spacing: 0.09em;

text-transform: uppercase;

font-weight: 600;

color: var(--tf-gold);

}

@media (max-width: 700px) {

.tf-mainpage .tf-rowhead { padding-left: 20px; padding-right: 20px; }

}

.tf-hatnote {

font-style: italic;

padding-left: 1.6em;

margin: 0.15em 0 0.6em 0;

}

.tf-mainpage .tf-featured {

Line 214:

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 233:

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 255:

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 336:

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 402:

Line 469:

#pagehistory li.selected { background-color: var(--d-panel2) !important; color: var(--d-text) !important; outline-color: var(--d-gold) !important; }

#pagehistory li.selected a, #pagehistory li.selected a:visited { color: var(--d-link) !important; }

/* --- Recent Changes: RCFilters header + legend (light-on-light by default) --- */

.mw-changeslist-legend {

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

}

.mw-changeslist-legend dt, .mw-changeslist-legend dd, .mw-changeslist-legend p,

.mw-changeslist-legend .mw-legend-item { color: var(--d-text) !important; }

.mw-changeslist-legend a, .mw-changeslist-legend-heading { color: var(--d-gold) !important; }

.mw-rcfilters-head, .mw-rcfilters-ui-filterWrapperWidget { color: var(--d-text); }

.mw-rcfilters-ui-filterTagMultiselectWidget-header,

.mw-rcfilters-ui-filterWrapperWidget-showNewChanges a { color: var(--d-gold) !important; }

.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-tagMultiselectWidget-handle,

.mw-rcfilters-ui-filterTagMultiselectWidget-multiselectWrapper,

.mw-rcfilters-ui-filterWrapperWidget-filters,

.mw-rcfilters-ui-menuSelectWidget,

.mw-rcfilters-ui-filterMenuOptionWidget,

.mw-rcfilters-ui-savedLinksListWidget {

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

}

.mw-rcfilters-ui-filterMenuOptionWidget-label, .mw-rcfilters-ui-itemMenuOptionWidget,

.mw-rcfilters-ui-tableWidget, .oo-ui-tagItemWidget-label { color: var(--d-text) !important; }

.mw-rcfilters-ui-highlights, .mw-rcfilters-ui-changesLimitAndDateButtonWidget { color: var(--d-text) !important; }

/* News feed: date label above headline */

.tf-mainpage .tf-newsitem { flex-direction: column-reverse; }

/* Order index tables (DPL-built): tint superseded/rescinded/amended rows */

/* {{Order info}} status span: metadata for the DPL index only — hide it on the article page, show it inside the index table */

.ostat { display: none; }

.orderindex .ostat { display: inline; }

.orderindex tr:has(.ostat-superseded), .orderindex tr:has(.ostat-rescinded) { background: rgba(190,47,36,0.30) !important; }

.orderindex tr:has(.ostat-amended) { background: rgba(0,80,80,0.35) !important; }

.orderindex .ostat-superseded, .orderindex .ostat-rescinded { color:#ff6b6b; font-weight:bold; }

.orderindex .ostat-amended { color:#5fc9c9; font-weight:bold; }

.orderindex .ostat-active { color: var(--d-muted); }

/* Policy Documents index (Portal:Policy Documents) */

.tf-pd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; margin:16px 0; }

.tf-pd-panel { background:var(--d-panel2); border:1px solid var(--d-border); border-top:3px solid var(--d-gold); border-radius:7px; padding:14px 16px 16px; }

.tf-pd-panel h3 { margin:0 0 2px; padding:0; border:0; color:var(--d-gold); font-size:1.08em; }

.tf-pd-sub { color:var(--d-muted); font-size:.78em; margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em; }

.tf-pd-item { display:block; padding:5px 0; border-top:1px solid rgba(255,255,255,.06); line-height:1.3; }

.tf-pd-item:first-of-type { border-top:0; }

.tf-pd-item .n { display:inline-block; margin-right:0.9em; color:var(--d-gold2); font-weight:bold; font-size:.8em; }

.tf-pd-hist { border-top-color:var(--d-red); }

.tf-pd-hist h3 { color:#e08a8a; }

.tf-pd-hist .tf-pd-item a { color:var(--d-muted); }

.tf-pd-note { background:var(--d-panel); border-left:4px solid var(--d-gold); border-radius:0 5px 5px 0; padding:11px 15px; margin:16px 0; }

.tf-pd-note b { color:var(--d-gold); }

/* advanced-search + OOUI menu contrast (namespace dropdown/checkbox menu) */

#mw-searchoptions, #powersearch, .mw-search-availablenamespaces, .mw-search-profile-form {

background: var(--d-panel); color: var(--d-text); border-color: var(--d-border);

}

#mw-searchoptions label, #mw-searchoptions legend, .mw-search-availablenamespaces label, .mw-search-profile-form label { color: var(--d-text); }

.oo-ui-menuSelectWidget, .oo-ui-popupWidget-body, .oo-ui-menuOptionWidget,

.oo-ui-checkboxMultiselectWidget, .oo-ui-checkboxMultioptionWidget, .oo-ui-dropdownWidget-handle {

background-color: var(--d-panel2); color: var(--d-text); border-color: var(--d-border);

}

.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 104: / Line 104: @@
 	margin-bottom: 10px;
 	text-transform: uppercase;
+	margin-top: 0;
+	font-weight: normal;
+}
+.tf-mainpage .tf-rowhead {
+	padding: 18px 40px 4px;
+	font-size: 12px;
+	letter-spacing: 0.09em;
+	text-transform: uppercase;
+	font-weight: 600;
+	color: var(--tf-gold);
+}
+@media (max-width: 700px) {
+	.tf-mainpage .tf-rowhead { padding-left: 20px; padding-right: 20px; }
+}
+.tf-hatnote {
+	font-style: italic;
+	padding-left: 1.6em;
+	margin: 0.15em 0 0.6em 0;
 }
 .tf-mainpage .tf-featured {
@@ Line 214: / 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 233: / 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 255: / 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 336: / 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 402: / Line 469: @@
 #pagehistory li.selected { background-color: var(--d-panel2) !important; color: var(--d-text) !important; outline-color: var(--d-gold) !important; }
 #pagehistory li.selected a, #pagehistory li.selected a:visited { color: var(--d-link) !important; }
+/* --- Recent Changes: RCFilters header + legend (light-on-light by default) --- */
+.mw-changeslist-legend {
+	background: var(--d-panel2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important;
+}
+.mw-changeslist-legend dt, .mw-changeslist-legend dd, .mw-changeslist-legend p,
+.mw-changeslist-legend .mw-legend-item { color: var(--d-text) !important; }
+.mw-changeslist-legend a, .mw-changeslist-legend-heading { color: var(--d-gold) !important; }
+.mw-rcfilters-head, .mw-rcfilters-ui-filterWrapperWidget { color: var(--d-text); }
+.mw-rcfilters-ui-filterTagMultiselectWidget-header,
+.mw-rcfilters-ui-filterWrapperWidget-showNewChanges a { color: var(--d-gold) !important; }
+.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-tagMultiselectWidget-handle,
+.mw-rcfilters-ui-filterTagMultiselectWidget-multiselectWrapper,
+.mw-rcfilters-ui-filterWrapperWidget-filters,
+.mw-rcfilters-ui-menuSelectWidget,
+.mw-rcfilters-ui-filterMenuOptionWidget,
+.mw-rcfilters-ui-savedLinksListWidget {
+	background: var(--d-panel2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important;
+}
+.mw-rcfilters-ui-filterMenuOptionWidget-label, .mw-rcfilters-ui-itemMenuOptionWidget,
+.mw-rcfilters-ui-tableWidget, .oo-ui-tagItemWidget-label { color: var(--d-text) !important; }
+.mw-rcfilters-ui-highlights, .mw-rcfilters-ui-changesLimitAndDateButtonWidget { color: var(--d-text) !important; }
+/* News feed: date label above headline */
+.tf-mainpage .tf-newsitem { flex-direction: column-reverse; }
+/* Order index tables (DPL-built): tint superseded/rescinded/amended rows */
+/* {{Order info}} status span: metadata for the DPL index only — hide it on the article page, show it inside the index table */
+.ostat { display: none; }
+.orderindex .ostat { display: inline; }
+.orderindex tr:has(.ostat-superseded), .orderindex tr:has(.ostat-rescinded) { background: rgba(190,47,36,0.30) !important; }
+.orderindex tr:has(.ostat-amended) { background: rgba(0,80,80,0.35) !important; }
+.orderindex .ostat-superseded, .orderindex .ostat-rescinded { color:#ff6b6b; font-weight:bold; }
+.orderindex .ostat-amended { color:#5fc9c9; font-weight:bold; }
+.orderindex .ostat-active { color: var(--d-muted); }
+/* Policy Documents index (Portal:Policy Documents) */
+.tf-pd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; margin:16px 0; }
+.tf-pd-panel { background:var(--d-panel2); border:1px solid var(--d-border); border-top:3px solid var(--d-gold); border-radius:7px; padding:14px 16px 16px; }
+.tf-pd-panel h3 { margin:0 0 2px; padding:0; border:0; color:var(--d-gold); font-size:1.08em; }
+.tf-pd-sub { color:var(--d-muted); font-size:.78em; margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em; }
+.tf-pd-item { display:block; padding:5px 0; border-top:1px solid rgba(255,255,255,.06); line-height:1.3; }
+.tf-pd-item:first-of-type { border-top:0; }
+.tf-pd-item .n { display:inline-block; margin-right:0.9em; color:var(--d-gold2); font-weight:bold; font-size:.8em; }
+.tf-pd-hist { border-top-color:var(--d-red); }
+.tf-pd-hist h3 { color:#e08a8a; }
+.tf-pd-hist .tf-pd-item a { color:var(--d-muted); }
+.tf-pd-note { background:var(--d-panel); border-left:4px solid var(--d-gold); border-radius:0 5px 5px 0; padding:11px 15px; margin:16px 0; }
+.tf-pd-note b { color:var(--d-gold); }
+/* advanced-search + OOUI menu contrast (namespace dropdown/checkbox menu) */
+#mw-searchoptions, #powersearch, .mw-search-availablenamespaces, .mw-search-profile-form {
+	background: var(--d-panel); color: var(--d-text); border-color: var(--d-border);
+}
+#mw-searchoptions label, #mw-searchoptions legend, .mw-search-availablenamespaces label, .mw-search-profile-form label { color: var(--d-text); }
+.oo-ui-menuSelectWidget, .oo-ui-popupWidget-body, .oo-ui-menuOptionWidget,
+.oo-ui-checkboxMultiselectWidget, .oo-ui-checkboxMultioptionWidget, .oo-ui-dropdownWidget-handle {
+	background-color: var(--d-panel2); color: var(--d-text); border-color: var(--d-border);
+}
+.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)