MediaWiki:Common.css: Difference between revisions

From TenthFleet
Jump to navigation Jump to search
← Older edit

MDGarcia (talk | contribs)

3 user groups
14,813 edits
Quick fix for editing options legibility
m Toolbar highlight: add --d-hover (#33333a dark grey) token; use it for dropdown/index/glyph hover instead of near-black --d-panel
 
(31 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
.tf-mainpage {
/* Silver Jubilee scheme
--tf-black: #0B0B0D;
:root {
--tf-panel: #141416;
  --main-bg-color: #c8c9ca; /*was d0d1d2*/
--tf-gold-hi: #F4D736;
  --lighter-bg-color: #e1e2e3;
--tf-gold: #F5BD3F;
  --main-color: #111;
--tf-gold-shadow: #F4A345;
  --non-red-link-color: #2667a1;
--tf-red: #BE2F24;
  --trim-color: #2667a1;
--tf-text: #E9E6E0;
  --minor-link: #88898a;
--tf-muted: #9A9792;
  --banner-fix: brightness(100%) sepia(1) hue-rotate(178deg) brightness(55%) saturate(155%)
--tf-border: #2A2A2C;
background: var(--tf-black);
color: var(--tf-text);
border-radius: 12px;
position: relative;
overflow: hidden;
}
/* Corner flash — the single deliberate red accent */
.tf-mainpage .tf-flash {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 44px;
background: var(--tf-red);
}
/* Hero: crest, wordmark, motto */
.tf-mainpage .tf-hero {
display: flex;
align-items: center;
gap: 28px;
padding: 36px 40px 30px;
}
.tf-mainpage .tf-hero img {
border: 0;
flex-shrink: 0;
}
.tf-mainpage .tf-word {
font-size: 32px;
font-weight: 600;
color: var(--tf-gold);
letter-spacing: 0.01em;
}
.tf-mainpage .tf-motto {
font-size: 16px;
color: var(--tf-muted);
margin-top: 6px;
}
.tf-mainpage .tf-trim {
height: 3px;
background: var(--tf-gold);
}
/* Four-section navigation grid */
.tf-mainpage .tf-navgrid {
display: flex;
gap: 14px;
padding: 26px 40px;
flex-wrap: wrap;
}
.tf-mainpage .tf-navcard {
flex: 1 1 180px;
border: 1px solid var(--tf-gold-shadow);
border-radius: 8px;
padding: 16px 14px;
background: var(--tf-panel);
}
.tf-mainpage .tf-navcard-title {
font-size: 11px;
letter-spacing: 0.06em;
color: var(--tf-gold);
margin-bottom: 8px;
text-transform: uppercase;
}
.tf-mainpage .tf-navcard-title a,
.tf-mainpage .tf-navcard-title a:visited {
color: var(--tf-gold) !important;
}
.tf-mainpage .tf-navcard-desc {
font-size: 12px;
color: var(--tf-muted);
line-height: 1.5;
}
/* Featured article / news / roster columns */
.tf-mainpage .tf-content {
display: flex;
gap: 24px;
padding: 8px 40px 30px;
border-top: 1px solid var(--tf-border);
margin-top: 10px;
flex-wrap: wrap;
}
.tf-mainpage .tf-col {
flex: 1 1 320px;
padding-top: 24px;
}
.tf-mainpage .tf-section-label {
font-size: 11px;
letter-spacing: 0.05em;
color: var(--tf-gold-shadow);
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 {
font-size: 13px;
line-height: 1.65;
color: var(--tf-text);
}
/* Neutralize the FeaturedArticle template's own table styling
  (text-align: right; font-variant: small-caps) so it matches
  the rest of the page instead of the legacy layout. */
.tf-mainpage .tf-featured table {
width: 100%;
background: transparent;
border: none;
}
.tf-mainpage .tf-featured td {
text-align: left !important;
font-variant: normal !important;
padding: 0;
}
.tf-mainpage .tf-featured img {
border-radius: 4px;
margin: 0 14px 8px 0;
}
/* Override the sitewide h1-h6 olive accent for just this box,
  since the template renders its title as a real <h1>. */
.tf-mainpage .tf-featured h1 {
font-size: 18px !important;
text-align: left !important;
color: var(--tf-gold) !important;
border-bottom: none !important;
margin: 0 0 8px 0 !important;
}
.tf-mainpage .tf-newsitem {
display: flex;
flex-direction: column;
gap: 2px;
border-left: 3px solid var(--tf-red);
padding: 6px 0 10px 12px;
font-size: 12px;
color: #cccccc;
margin-bottom: 6px;
}
.tf-mainpage .tf-cat {
color: var(--tf-red);
font-size: 10px;
letter-spacing: 0.04em;
display: block;
}
.tf-mainpage .tf-roster {
display: flex;
flex-direction: column;
gap: 8px;
}
.tf-mainpage .tf-ship {
display: flex;
justify-content: space-between;
border: 1px solid var(--tf-border);
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
color: var(--tf-text);
}
.tf-mainpage .tf-ship a,
.tf-mainpage .tf-ship a:visited {
color: var(--tf-text) !important;
}
.tf-mainpage .tf-hull {
color: var(--tf-gold);
}
/* Footer motto repeat */
.tf-mainpage .tf-footer {
text-align: center;
padding: 20px;
border-top: 1px solid var(--tf-border);
}
.tf-mainpage .tf-motto2 {
font-size: 12px;
color: var(--tf-muted);
}
}
*/
 
/* Mobile: stack everything to one column below 700px */
/* Standard colors */
@media (max-width: 700px) {
:root {
.tf-mainpage .tf-hero {
  --main-bg-color: #222;
flex-direction: column;
  --darker-bg-color: #333;
text-align: center;
  --main-color: #fff;
padding: 28px 20px 24px;
  --non-red-link-color: #990;
}
  --trim-color: #990;
.tf-mainpage .tf-navgrid,
.tf-mainpage .tf-content {
padding-left: 20px;
padding-right: 20px;
}
.tf-mainpage .tf-navcard {
flex: 1 1 100%;
}
.tf-mainpage .tf-col {
flex: 1 1 100%;
}
}
}


body {
background-color: #222;
color: #fff;;
}


p {
/* ============================================================
color: #fff;
  SITEWIDE DARK THEME (Vector legacy)  — v1
  Palette matches the Main Page card (black / gold / red).
  ============================================================ */
:root {
--d-bg:#0B0B0D; --d-panel:#141416; --d-panel2:#1c1c20;
--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-hover:#33333a;
}
}
html, body { background: var(--d-bg); color: var(--d-text); }
/* Vector legacy light-gradient layers */
#mw-page-base { background: var(--d-bg) !important; background-image: none !important; }
#mw-head-base { background: var(--d-bg) !important; }


div#mw-head {
/* Content area */
background-color: #222;
.mw-body, #content, #bodyContent, #mw-content-text { background: var(--d-panel); color: var(--d-text); }
}
.mw-body { border: 1px solid var(--d-border); }
.mw-body-content { color: var(--d-text); }


div#mainContent, div#side, div#footer {
/* Links */
background-color: #222;
.mw-body a, #mw-panel a, #p-personal a, .mw-body a:visited, #footer a { color: var(--d-link); }
}
.mw-body a.new, a.new { color: var(--d-red) !important; }
.mw-body a.external, a.external { color: var(--d-ext); }


div.vectorTabs span > a {
/* Headings */
background-color: #222;
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
color: #990;
#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); }


div.vectorTabs {
/* Header / tabs / personal tools (Vector legacy) */
background-image: none;
#mw-head, #mw-head-base { color: var(--d-text); }
background-color: #990;
.vectorTabs li, .vectorMenu .menu { background: var(--d-panel2); }
}
.vectorTabs li a, .vectorTabs li a span, .vectorMenu h3 span { color: var(--d-muted) !important; }
.vectorTabs li.selected { background: var(--d-panel); }
.vectorTabs li.selected a, .vectorTabs li.selected a span { color: var(--d-gold) !important; }
#p-personal ul li a { color: var(--d-link); }


div.vectorMenu h3 a {
/* Sidebar */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACMCAIAAAAyWVTYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkSEjAndg7eHAAAABRJREFUKM9j+P+fgYmBYRSPYqIwAIsuAxUaCAlMAAAAAElFTkSuQmCC);
#mw-panel .portal h3 { color: var(--d-muted); }
}
#mw-panel .portal .body ul li a { color: var(--d-link); }


div#content {
/* Search */
color: #fff;;
#simpleSearch, #searchInput { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); }
background-color: #222;
border-color: #990;
}


#mw-panel.collapsible-nav .portal {
/* Tables */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAABCAIAAACDjNFvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkSEjYnIFR5mgAAABBJREFUGNNj/P+fYRQMcgAARzACALHHhMYAAAAASUVORK5CYII=);
.wikitable { background: var(--d-panel); color: var(--d-text); border-color: var(--d-border); }
}
.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); }


h1, h2, h3, h4, h5, h6 {
/* List bullets/numbers: default marker color is too dark on the dark theme, so lighten it */
border-color: #990;
#mw-content-text ul > li::marker,
}
#mw-content-text ol > li::marker,
#mw-content-text dl dd::marker { color: var(--d-muted); }


h1, h2, h3, h4, h5, h6 {
/* Reference lists, footnotes, and "Record notes" (pii group): the skin default
color: #990;
  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); }


div#mw-panel div.portal div.body ul li a, a {
/* TOC, thumbs, code, catlinks, messageboxes */
color: #990;
.toc, #toc, .thumbinner, .catlinks, pre, code, .mw-code,
.mw-message-box, .warningbox, .errorbox, .successbox {
background: var(--d-panel2); color: var(--d-text); border-color: var(--d-border);
}
}
.toc a, #toc a, .catlinks a { color: var(--d-link); }
.thumbcaption, .catlinks { color: var(--d-muted); }


div#mw-panel div.portal div.body ul li a:visited, a:visited {
/* Edit form */
color: #990;
textarea, .mw-editfont-monospace { background:#101012 !important; color:var(--d-text) !important; border-color:var(--d-border) !important; }
}
input[type=text], input[type=search], input[type=password], select { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); }
.mw-ui-button, input[type=submit], button { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); }


div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited {
/* Footer */
color: var(--minor-link);
#footer { background: var(--d-bg); color: var(--d-muted); }
}
hr { border: 0; border-top: 1px solid var(--d-border); }


div.editOptions {
/* ===== Fleet News article pages ===== */
color: #333;
body:has(.tf-newspage) h1#firstHeading, body:has(.tf-newspage) h1.firstHeading { display: none; }
    background-color: #999;
.tf-newspage {
background:#0B0B0D; color:#E9E6E0; border:1px solid var(--d-border);
border-radius:12px; overflow:hidden; position:relative; max-width:860px; margin:8px auto;
}
}
.tf-newspage a, .tf-newspage a:visited { color:var(--d-gold); }
.tf-newspage .tf-np-flash { position:absolute; top:0; right:0; width:70px; height:40px; background:var(--d-red); }
.tf-newspage .tf-np-head { padding:34px 42px 22px; border-bottom:3px solid var(--d-gold); }
.tf-newspage .tf-np-kicker { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--d-red); margin-bottom:12px; }
.tf-newspage .tf-np-title { font-size:28px; font-weight:600; color:var(--d-gold); line-height:1.22; }
.tf-newspage .tf-np-meta { font-size:13px; color:var(--d-muted); margin-top:12px; }
.tf-newspage .tf-np-body { padding:24px 42px 12px; font-size:15px; line-height:1.7; color:var(--d-text); }
.tf-newspage .tf-np-body p { margin:0 0 14px; }
.tf-newspage .tf-np-body b, .tf-newspage .tf-np-body strong { color:var(--d-gold2); }
.tf-newspage .tf-np-foot { padding:16px 42px 22px; border-top:1px solid var(--d-border); }
.tf-newspage .tf-np-foot a, .tf-newspage .tf-np-foot a:visited { color:var(--d-muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; }
@media (max-width:700px){ .tf-newspage .tf-np-head,.tf-newspage .tf-np-body,.tf-newspage .tf-np-foot{padding-left:22px;padding-right:22px;} .tf-newspage .tf-np-title{font-size:22px;} }


div.editOptions a:visited {
color: #222;
}


div#editpage-copywarn a {
/* ============================================================
    color: #36c;
  DARK THEME part 2 — editing, diffs, changes lists, special pages
}
  ============================================================ */


span.editHelp a {
/* --- Diffs (the light green/red cells are unreadable on dark) --- */
    color: #36c;
td.diff-otitle, td.diff-ntitle, td.diff-marker { color: var(--d-text); }
}
td.diff-context { background: var(--d-panel2); color: var(--d-muted); border-color: var(--d-border); }
td.diff-addedline { background: #13261b; border-color: #2c5a3a; }
td.diff-deletedline { background: #2b1618; border-color: #5a2c30; }
td.diff-addedline .diffchange { background: #1f5133; color: #c7f0d5; }
td.diff-deletedline .diffchange { background: #5a2330; color: #f2c9d0; }
.diff-lineno { color: var(--d-gold); }
table.diff, table.diff td, div.mw-diff-inline-changes { border-color: var(--d-border); color: var(--d-text); }


div.thumbcaption {
/* --- Changes lists: Recent Changes, Watchlist, History --- */
    color: #000 !important;
.mw-changeslist, .mw-changeslist a, .mw-history-histlinks a,
}
.special li, .special li a, .mw-contributions-list a { color: var(--d-text); }
.mw-changeslist a, .mw-changeslist-links a, .mw-history-histlinks a { color: var(--d-link); }
.mw-plusminus-pos { color: #6fbf7f; }
.mw-plusminus-neg { color: #d98a8a; }
.mw-plusminus-null { color: var(--d-muted); }
abbr.newpage, abbr.minoredit, abbr.botedit, abbr.unpatrolled { color: var(--d-gold); }
.mw-changeslist-date { color: var(--d-muted); }


table.wikitable {
/* --- Data tables / pagers (most special pages use these) --- */
background-color: #222;
.mw-datatable, table.mw-datatable, .TablePager, .wikitable.sortable {
color: #fff;
background: var(--d-panel); color: var(--d-text); border-color: var(--d-border);
}
}
.mw-datatable th, .TablePager th { background: var(--d-panel2); color: var(--d-gold); border-color: var(--d-border); }
.mw-datatable td, .TablePager td { border-color: var(--d-border); }
.mw-datatable tr:hover td, .TablePager tr:hover td { background: var(--d-panel2); }
.oo-ui-tag-item, .cloud a { color: var(--d-link); }


table.wikitable thead tr th, table.wikitable tbody tr th {
/* --- Edit view extras: summary, options, toolbar, checkboxes --- */
background-color: var(--darker-bg-color);
fieldset { border-color: var(--d-border); }
color: #fff;;
legend { color: var(--d-gold); }
font-weight: bold;
label, .mw-label { color: var(--d-text); }
}
#wpSummary, input#wpSummary { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); }
.editOptions { background: var(--d-panel2); border-color: var(--d-border); color: var(--d-text); }
.templatesUsed, .hiddencats, .mw-editTools, .editCheckboxes, .editHelp { color: var(--d-muted); }
.wikiEditor-ui, .wikiEditor-ui-toolbar, .wikiEditor-ui-toolbar .tabs,
.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); }


/* TABLE: WIKI-SIDEBAR */
/* --- OOUI widgets (used across modern special pages / dialogs) --- */
table.sidebar {
.oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea,
        background-color: #f7f7f7;
.oo-ui-dropdownWidget-handle, .oo-ui-comboBoxInputWidget input,
border: 1px solid #000000;
.oo-ui-selectFileInputWidget-dropTarget {
        border-collapse:collapse;
background: var(--d-panel2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important;
        font-size: 95%;
color: #000000;
clear: right;
float: right;
width: 200px;
margin-left: 1.5em;
margin-right: 0em;
}
}
table.sidebar tr th {
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
background-color: #c7c7c7;
background: var(--d-panel2); color: var(--d-text); border-color: var(--d-border);
border: 1px outset #000000;
text-align: center;
font-weight: bold;
}
}
table.sidebar tr.header th.header {
.oo-ui-panelLayout-framed, .oo-ui-window-body, .oo-ui-messageDialog-message {
background-color: #c7c7c7;
background: var(--d-panel); color: var(--d-text);
border: 1px outset #000000;
text-align: center;
font-weight: bold;
}
}
table.sidebar td.class {
.oo-ui-labelElement-label, .oo-ui-fieldLayout-header label, .oo-ui-inline-help { color: var(--d-text); }
        background-color: #222;
 
        border-collapse: collapse;
/* --- Search results --- */
        font-variant: small-caps;
.searchresults, .mw-search-result-heading a, .mw-search-results li { color: var(--d-text); }
        font-size: large;
.mw-search-result-data { color: var(--d-muted); }
        color: #990;
.searchmatch { color: var(--d-gold); font-weight: bold; }
        margin: 1em 0 0 1em;
.mw-search-profile-tabs, .search-types .current a { background: var(--d-panel2); border-color: var(--d-border); }
line-height: 130%;
 
font-weight: bold;
/* --- Misc content elements --- */
        text-align: center;
blockquote { border-left: 3px solid var(--d-border); color: var(--d-text); }
border: 1px outset #000000;
dl dt { color: var(--d-gold); }
.mw-editsection a, .mw-indicators a, .redirectText a { color: var(--d-link); }
#siteNotice, #localNotice, .mw-headline { color: var(--d-text); }
.navbox, .mw-parser-output .navbox { background: var(--d-panel2); border-color: var(--d-border); color: var(--d-text); }
.mw-message-box-warning, .mw-message-box-error, .mw-message-box-success { color: var(--d-text); }
 
 
/* ============================================================
  DARK THEME part 3 — correct modern Vector-legacy class names
  (this wiki uses .vector-menu-* / .vector-legacy-sidebar / .mw-footer)
  ============================================================ */
 
/* Sidebar */
#mw-panel, .vector-legacy-sidebar { color: var(--d-muted); }
.vector-menu-portal .vector-menu-heading, .vector-menu-portal .vector-menu-heading-label { color: var(--d-muted); }
.vector-menu-portal .mw-list-item a, #mw-panel .mw-list-item a { color: var(--d-link); }
 
/* Tabs + dropdown menus at top of content */
.vector-menu-tabs .mw-list-item { background: var(--d-panel2); }
.vector-menu-tabs .mw-list-item a { color: var(--d-muted); }
.vector-menu-tabs .mw-list-item.selected { background: var(--d-panel); }
.vector-menu-tabs .mw-list-item.selected a { color: var(--d-gold); }
.vector-menu-heading, .vector-menu-heading-label { color: var(--d-muted); }
.vector-menu-dropdown .vector-menu-content, .vector-menu-dropdown-noicon .vector-menu-content {
background: var(--d-panel2); border-color: var(--d-border);
}
}
table.sidebar td.class a:link {
.vector-menu-dropdown .mw-list-item a { color: var(--d-link); }
        color: #222 !important;
 
        text-decoration: none;
/* Personal tools (top-right user links) */
.mw-portlet-personal .mw-list-item a, #p-personal .mw-list-item a { color: var(--d-link); }
 
/* Body wrappers inherit the dark panel */
.vector-body, .mw-body-content { background: transparent; color: var(--d-text); }
 
/* Footer (modern class) */
.mw-footer { background: var(--d-bg); color: var(--d-muted); }
.mw-footer a, .mw-footer a:visited { color: var(--d-link); }
.mw-footer li, .mw-footer #footer-info li { color: var(--d-muted); }
 
 
/* History: core highlights compared revisions with a LIGHT bg (#f8f9fa) — darken it */
#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;
}
}
table.sidebar td.class a:hover {
.mw-changeslist-legend dt, .mw-changeslist-legend dd, .mw-changeslist-legend p,
        color: #ffffff !important;
.mw-changeslist-legend .mw-legend-item { color: var(--d-text) !important; }
        text-decoration: none;
.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;
}
}
table.sidebar td.classname {
.mw-rcfilters-ui-filterMenuOptionWidget-label, .mw-rcfilters-ui-itemMenuOptionWidget,
        background-color: #222;
.mw-rcfilters-ui-tableWidget, .oo-ui-tagItemWidget-label { color: var(--d-text) !important; }
        border-collapse: collapse;
.mw-rcfilters-ui-highlights, .mw-rcfilters-ui-changesLimitAndDateButtonWidget { color: var(--d-text) !important; }
        font-variant: small-caps;
 
        font-size: 125%;
/* News feed: date label above headline */
        color: #edad00;
.tf-mainpage .tf-newsitem { flex-direction: column-reverse; }
        margin: 1em 0 0 1em;
 
line-height: 140%;
 
font-weight: bold;
/* Order index tables (DPL-built): tint superseded/rescinded/amended rows */
        text-align: center;
/* {{Order info}} status span: metadata for the DPL index only — hide it on the article page, show it inside the index table */
border: 1px outset #000000;
.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);
}
}
table.sidebar td.film {
#mw-searchoptions label, #mw-searchoptions legend, .mw-search-availablenamespaces label, .mw-search-profile-form label { color: var(--d-text); }
        background-color: #c7c7c7;
.oo-ui-menuSelectWidget, .oo-ui-popupWidget-body, .oo-ui-menuOptionWidget,
        border-collapse: collapse;
.oo-ui-checkboxMultiselectWidget, .oo-ui-checkboxMultioptionWidget, .oo-ui-dropdownWidget-handle {
        font-variant: small-caps;
background-color: var(--d-panel2); color: var(--d-text); border-color: var(--d-border);
        color: #000000;
        margin: 1em 0 0 1em;
line-height: 130%;
font-weight: bold;
        text-align: center;
border: 1px outset #000000;
}
}
table.sidebar td.image {
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
        background-color: #222;
background-color: var(--d-panel); color: var(--d-gold);
        color: #aecdee;
        text-align: center;
border: 1px outset #222;
}
}
table.sidebar td.name {
 
        background-color: #f7f7f7;
/* Fit the full-resolution Tenth Fleet crest into the legacy-Vector logo box
        border-collapse: collapse;
  (the source image is 1400x1400; without this it renders zoomed/cropped). */
        font-variant: small-caps;
.mw-wiki-logo,
        font-size: 140%;
#p-logo a {
        color: #000000;
background-size: contain !important;
        margin: 1em 0 0 1em;
background-position: center center !important;
line-height: 130%;
background-repeat: no-repeat !important;
font-weight: bold;
        text-align: center;
border: 1px outset #000000;
}
}
table.sidebar td.arc {
 
        border-collapse: collapse;
/* ============================================================
        font-variant: small-caps;
  DARK THEME part 4 — special-page catch-all (2026-07)
        font-size: 100%;
  Some special pages (lists, pagers, forms) render core components
        color: #000000;
  that ship their own light background, leaving light theme-text on
        margin: 1em 0 0 1em;
  white → unreadable. Force the whole special-page content dark.
line-height: 130%;
  Scoped to body.ns-special so normal article pages are untouched.
font-weight: bold;
  ============================================================ */
        text-align: center;
body.ns-special #content,
border: 1px outset #000000;
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;
}
}
table.sidebar td.left {
body.ns-special #mw-content-text table,
        background-color: #222;
body.ns-special #mw-content-text td,
        color: #fff;
body.ns-special #mw-content-text tr,
line-height: 130%;
body.ns-special #mw-content-text fieldset,
        text-align: right;
body.ns-special #mw-content-text .oo-ui-panelLayout,
border: 1px outset #222;
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;
}
}
table.sidebar td.left a:link {
body.ns-special #mw-content-text th {
        color: #ffffff;
background-color: var(--d-panel2) !important;
        text-decoration: none;
color: var(--d-gold) !important;
border-color: var(--d-border) !important;
}
}
table.sidebar td.left a:hover {
body.ns-special #mw-content-text li,
        color: #aecdee;
body.ns-special #mw-content-text dd,
        text-decoration: none;
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;
}
}
table.sidebar td.right {
 
        background-color: #f7f7f7;
/* ============================================================
        color: #000000;
  Awards namespace (ns 6002) — page beautification
line-height: 130%;
  ============================================================ */
        text-align: left;
body.ns-6002 #mw-content-text > p:first-of-type {
border: 1px outset #000000;
font-size: 108%; line-height: 1.6; color: #EFEAE6;
border-left: 3px solid #8A6D1E; padding: 2px 0 2px 14px; margin-bottom: 1.1em;
}
}
table.sidebar td.righta {
body.ns-6002 #mw-content-text h2 {
        background-color: #f7f7f7;
color: var(--d-gold); font-variant: small-caps; letter-spacing: 0.04em;
        color: #000000;
border-bottom: 2px solid #8A6D1E; padding-bottom: 4px; margin-top: 1.4em;
line-height: 130%;
        text-align: left;
border: 1px outset #000000;
}
}
table.sidebar td.rightb {
body.ns-6002 #mw-content-text h3 {
        background-color: #c7c7c7;
color: #F4A345; border-bottom: 1px solid #2A2A2C; padding-bottom: 2px;
        color: #000000;
line-height: 130%;
        text-align: left;
border: 1px outset #000000;
}
}
body.ns-6002 #mw-content-text .wikitable {
/* DEPRECATED: Use td.left instead! */
border: 1px solid #2A2A2C; background: #141416; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
table.wiki-sidebar td.odd {
width: 35%;
font-weight: bold;
text-align: right;
}
}
table.wiki-sidebar td.sb-both {
body.ns-6002 #mw-content-text .wikitable > * > tr > th {
text-align: center;
background: #232326; color: var(--d-gold); border: 1px solid #2A2A2C;
padding-left: 0;
font-variant: small-caps; letter-spacing: 0.03em;
padding-right: 0;
}
}
table.wiki-sidebar td.sb-both img {
body.ns-6002 #mw-content-text .wikitable > * > tr > td { border: 1px solid #262628; }
display:block;
/* zebra striping — skip rows carrying an inline style so {{new award}} orange survives */
/*force new line after img in sidebar */
body.ns-6002 #mw-content-text .wikitable > tbody > tr:nth-child(even):not([style]) > td { background: #18181b; }
border: 0px outset #aaaaaa;
body.ns-6002 #mw-content-text .wikitable > tbody > tr:hover:not([style]) > td { background: #26210f; }
margin: 0;
 
padding-left: 0;
/* ============================================================
padding-right: 0;
  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;
}
}
table.wiki-sidebar td.sb-left {
body.ns-special #mw-content-text .cdx-text-input__input:enabled:read-only {
width: 35%;
background-color: #141416 !important;
font-weight: bold;
color: var(--d-muted) !important;
text-align: right;
background-color: #f7f7f7;
border: 0px outset #aaaaaa;
}
}
table.wiki-sidebar td.sb-right {
body.ns-special #mw-content-text .cdx-label__label,
background-color: #f7f7f7;
body.ns-special #mw-content-text .cdx-label__label__text,
 
body.ns-special #mw-content-text .cdx-label__description,
#nav li a {
body.ns-special #mw-content-text .cdx-checkbox__label,
background-color: #000000;
body.ns-special #mw-content-text .cdx-field__help-text,
border-top: none;
body.ns-special #mw-content-text .oo-ui-labelElement-label,
border-left: 1px solid #ddd;
body.ns-special #mw-content-text .oo-ui-fieldLayout-header label {
color: var(--d-text) !important;
}
}
 
/* CAPTCHA box on CreateAccount */
a.external.text {
body.ns-special #mw-content-text .fancycaptcha-captcha-container,
  color: #0b4f6c;
body.ns-special #mw-content-text .fancycaptcha-captcha-and-reload {
}
background-color: #1c1c20 !important;
 
border-color: var(--d-border) !important;
a.external.text:visited {
  color: #36b;
}
}


a {
/* ============================================================
  color: #990 !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; }


.wikiEditor-ui-toolbar .tabs, .wikiEditor-ui-toolbar .section-main {
/* ===== Mobile readability for article content (added 2026-07-18) =====
  height: auto;
  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;
    }
}
}

Latest revision as of 00:25, 29 July 2026

.tf-mainpage {
	--tf-black: #0B0B0D;
	--tf-panel: #141416;
	--tf-gold-hi: #F4D736;
	--tf-gold: #F5BD3F;
	--tf-gold-shadow: #F4A345;
	--tf-red: #BE2F24;
	--tf-text: #E9E6E0;
	--tf-muted: #9A9792;
	--tf-border: #2A2A2C;
 
	background: var(--tf-black);
	color: var(--tf-text);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
}
 
/* Corner flash — the single deliberate red accent */
.tf-mainpage .tf-flash {
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 44px;
	background: var(--tf-red);
}
 
/* Hero: crest, wordmark, motto */
.tf-mainpage .tf-hero {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 36px 40px 30px;
}
.tf-mainpage .tf-hero img {
	border: 0;
	flex-shrink: 0;
}
.tf-mainpage .tf-word {
	font-size: 32px;
	font-weight: 600;
	color: var(--tf-gold);
	letter-spacing: 0.01em;
}
.tf-mainpage .tf-motto {
	font-size: 16px;
	color: var(--tf-muted);
	margin-top: 6px;
}
.tf-mainpage .tf-trim {
	height: 3px;
	background: var(--tf-gold);
}
 
/* Four-section navigation grid */
.tf-mainpage .tf-navgrid {
	display: flex;
	gap: 14px;
	padding: 26px 40px;
	flex-wrap: wrap;
}
.tf-mainpage .tf-navcard {
	flex: 1 1 180px;
	border: 1px solid var(--tf-gold-shadow);
	border-radius: 8px;
	padding: 16px 14px;
	background: var(--tf-panel);
}
.tf-mainpage .tf-navcard-title {
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--tf-gold);
	margin-bottom: 8px;
	text-transform: uppercase;
}
.tf-mainpage .tf-navcard-title a,
.tf-mainpage .tf-navcard-title a:visited {
	color: var(--tf-gold) !important;
}
.tf-mainpage .tf-navcard-desc {
	font-size: 12px;
	color: var(--tf-muted);
	line-height: 1.5;
}
 
/* Featured article / news / roster columns */
.tf-mainpage .tf-content {
	display: flex;
	gap: 24px;
	padding: 8px 40px 30px;
	border-top: 1px solid var(--tf-border);
	margin-top: 10px;
	flex-wrap: wrap;
}
.tf-mainpage .tf-col {
	flex: 1 1 320px;
	padding-top: 24px;
}
.tf-mainpage .tf-section-label {
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--tf-gold-shadow);
	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 {
	font-size: 13px;
	line-height: 1.65;
	color: var(--tf-text);
}
/* Neutralize the FeaturedArticle template's own table styling
   (text-align: right; font-variant: small-caps) so it matches
   the rest of the page instead of the legacy layout. */
.tf-mainpage .tf-featured table {
	width: 100%;
	background: transparent;
	border: none;
}
.tf-mainpage .tf-featured td {
	text-align: left !important;
	font-variant: normal !important;
	padding: 0;
}
.tf-mainpage .tf-featured img {
	border-radius: 4px;
	margin: 0 14px 8px 0;
}
/* Override the sitewide h1-h6 olive accent for just this box,
   since the template renders its title as a real <h1>. */
.tf-mainpage .tf-featured h1 {
	font-size: 18px !important;
	text-align: left !important;
	color: var(--tf-gold) !important;
	border-bottom: none !important;
	margin: 0 0 8px 0 !important;
}
.tf-mainpage .tf-newsitem {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 3px solid var(--tf-red);
	padding: 6px 0 10px 12px;
	font-size: 12px;
	color: #cccccc;
	margin-bottom: 6px;
}
.tf-mainpage .tf-cat {
	color: var(--tf-red);
	font-size: 10px;
	letter-spacing: 0.04em;
	display: block;
}
.tf-mainpage .tf-roster {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tf-mainpage .tf-ship {
	display: flex;
	justify-content: space-between;
	border: 1px solid var(--tf-border);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 12px;
	color: var(--tf-text);
}
.tf-mainpage .tf-ship a,
.tf-mainpage .tf-ship a:visited {
	color: var(--tf-text) !important;
}
.tf-mainpage .tf-hull {
	color: var(--tf-gold);
}
 
/* Footer motto repeat */
.tf-mainpage .tf-footer {
	text-align: center;
	padding: 20px;
	border-top: 1px solid var(--tf-border);
}
.tf-mainpage .tf-motto2 {
	font-size: 12px;
	color: var(--tf-muted);
}
 
/* Mobile: stack everything to one column below 700px */
@media (max-width: 700px) {
	.tf-mainpage .tf-hero {
		flex-direction: column;
		text-align: center;
		padding: 28px 20px 24px;
	}
	.tf-mainpage .tf-navgrid,
	.tf-mainpage .tf-content {
		padding-left: 20px;
		padding-right: 20px;
	}
	.tf-mainpage .tf-navcard {
		flex: 1 1 100%;
	}
	.tf-mainpage .tf-col {
		flex: 1 1 100%;
	}
}


/* ============================================================
   SITEWIDE DARK THEME (Vector legacy)  — v1
   Palette matches the Main Page card (black / gold / red).
   ============================================================ */
:root {
	--d-bg:#0B0B0D; --d-panel:#141416; --d-panel2:#1c1c20;
	--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-hover:#33333a;
}
html, body { background: var(--d-bg); color: var(--d-text); }
/* Vector legacy light-gradient layers */
#mw-page-base { background: var(--d-bg) !important; background-image: none !important; }
#mw-head-base { background: var(--d-bg) !important; }

/* Content area */
.mw-body, #content, #bodyContent, #mw-content-text { background: var(--d-panel); color: var(--d-text); }
.mw-body { border: 1px solid var(--d-border); }
.mw-body-content { color: var(--d-text); }

/* Links */
.mw-body a, #mw-panel a, #p-personal a, .mw-body a:visited, #footer a { color: var(--d-link); }
.mw-body a.new, a.new { color: var(--d-red) !important; }
.mw-body a.external, a.external { color: var(--d-ext); }

/* 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); font-variant: small-caps; letter-spacing: 0.03em; }
.mw-body h1, .mw-body h2, #firstHeading, .firstHeading { border-bottom: 1px solid var(--d-border); }

/* Header / tabs / personal tools (Vector legacy) */
#mw-head, #mw-head-base { color: var(--d-text); }
.vectorTabs li, .vectorMenu .menu { background: var(--d-panel2); }
.vectorTabs li a, .vectorTabs li a span, .vectorMenu h3 span { color: var(--d-muted) !important; }
.vectorTabs li.selected { background: var(--d-panel); }
.vectorTabs li.selected a, .vectorTabs li.selected a span { color: var(--d-gold) !important; }
#p-personal ul li a { color: var(--d-link); }

/* Sidebar */
#mw-panel .portal h3 { color: var(--d-muted); }
#mw-panel .portal .body ul li a { color: var(--d-link); }

/* Search */
#simpleSearch, #searchInput { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); }

/* Tables */
.wikitable { background: var(--d-panel); color: var(--d-text); border-color: var(--d-border); }
.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 */
.toc, #toc, .thumbinner, .catlinks, pre, code, .mw-code,
.mw-message-box, .warningbox, .errorbox, .successbox {
	background: var(--d-panel2); color: var(--d-text); border-color: var(--d-border);
}
.toc a, #toc a, .catlinks a { color: var(--d-link); }
.thumbcaption, .catlinks { color: var(--d-muted); }

/* Edit form */
textarea, .mw-editfont-monospace { background:#101012 !important; color:var(--d-text) !important; border-color:var(--d-border) !important; }
input[type=text], input[type=search], input[type=password], select { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); }
.mw-ui-button, input[type=submit], button { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); }

/* Footer */
#footer { background: var(--d-bg); color: var(--d-muted); }
hr { border: 0; border-top: 1px solid var(--d-border); }

/* ===== Fleet News article pages ===== */
body:has(.tf-newspage) h1#firstHeading, body:has(.tf-newspage) h1.firstHeading { display: none; }
.tf-newspage {
	background:#0B0B0D; color:#E9E6E0; border:1px solid var(--d-border);
	border-radius:12px; overflow:hidden; position:relative; max-width:860px; margin:8px auto;
}
.tf-newspage a, .tf-newspage a:visited { color:var(--d-gold); }
.tf-newspage .tf-np-flash { position:absolute; top:0; right:0; width:70px; height:40px; background:var(--d-red); }
.tf-newspage .tf-np-head { padding:34px 42px 22px; border-bottom:3px solid var(--d-gold); }
.tf-newspage .tf-np-kicker { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--d-red); margin-bottom:12px; }
.tf-newspage .tf-np-title { font-size:28px; font-weight:600; color:var(--d-gold); line-height:1.22; }
.tf-newspage .tf-np-meta { font-size:13px; color:var(--d-muted); margin-top:12px; }
.tf-newspage .tf-np-body { padding:24px 42px 12px; font-size:15px; line-height:1.7; color:var(--d-text); }
.tf-newspage .tf-np-body p { margin:0 0 14px; }
.tf-newspage .tf-np-body b, .tf-newspage .tf-np-body strong { color:var(--d-gold2); }
.tf-newspage .tf-np-foot { padding:16px 42px 22px; border-top:1px solid var(--d-border); }
.tf-newspage .tf-np-foot a, .tf-newspage .tf-np-foot a:visited { color:var(--d-muted); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; }
@media (max-width:700px){ .tf-newspage .tf-np-head,.tf-newspage .tf-np-body,.tf-newspage .tf-np-foot{padding-left:22px;padding-right:22px;} .tf-newspage .tf-np-title{font-size:22px;} }


/* ============================================================
   DARK THEME part 2 — editing, diffs, changes lists, special pages
   ============================================================ */

/* --- Diffs (the light green/red cells are unreadable on dark) --- */
td.diff-otitle, td.diff-ntitle, td.diff-marker { color: var(--d-text); }
td.diff-context { background: var(--d-panel2); color: var(--d-muted); border-color: var(--d-border); }
td.diff-addedline { background: #13261b; border-color: #2c5a3a; }
td.diff-deletedline { background: #2b1618; border-color: #5a2c30; }
td.diff-addedline .diffchange { background: #1f5133; color: #c7f0d5; }
td.diff-deletedline .diffchange { background: #5a2330; color: #f2c9d0; }
.diff-lineno { color: var(--d-gold); }
table.diff, table.diff td, div.mw-diff-inline-changes { border-color: var(--d-border); color: var(--d-text); }

/* --- Changes lists: Recent Changes, Watchlist, History --- */
.mw-changeslist, .mw-changeslist a, .mw-history-histlinks a,
.special li, .special li a, .mw-contributions-list a { color: var(--d-text); }
.mw-changeslist a, .mw-changeslist-links a, .mw-history-histlinks a { color: var(--d-link); }
.mw-plusminus-pos { color: #6fbf7f; }
.mw-plusminus-neg { color: #d98a8a; }
.mw-plusminus-null { color: var(--d-muted); }
abbr.newpage, abbr.minoredit, abbr.botedit, abbr.unpatrolled { color: var(--d-gold); }
.mw-changeslist-date { color: var(--d-muted); }

/* --- Data tables / pagers (most special pages use these) --- */
.mw-datatable, table.mw-datatable, .TablePager, .wikitable.sortable {
	background: var(--d-panel); color: var(--d-text); border-color: var(--d-border);
}
.mw-datatable th, .TablePager th { background: var(--d-panel2); color: var(--d-gold); border-color: var(--d-border); }
.mw-datatable td, .TablePager td { border-color: var(--d-border); }
.mw-datatable tr:hover td, .TablePager tr:hover td { background: var(--d-panel2); }
.oo-ui-tag-item, .cloud a { color: var(--d-link); }

/* --- Edit view extras: summary, options, toolbar, checkboxes --- */
fieldset { border-color: var(--d-border); }
legend { color: var(--d-gold); }
label, .mw-label { color: var(--d-text); }
#wpSummary, input#wpSummary { background: var(--d-panel2); color: var(--d-text); border: 1px solid var(--d-border); }
.editOptions { background: var(--d-panel2); border-color: var(--d-border); color: var(--d-text); }
.templatesUsed, .hiddencats, .mw-editTools, .editCheckboxes, .editHelp { color: var(--d-muted); }
.wikiEditor-ui, .wikiEditor-ui-toolbar, .wikiEditor-ui-toolbar .tabs,
.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) --- */
.oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea,
.oo-ui-dropdownWidget-handle, .oo-ui-comboBoxInputWidget input,
.oo-ui-selectFileInputWidget-dropTarget {
	background: var(--d-panel2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important;
}
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
	background: var(--d-panel2); color: var(--d-text); border-color: var(--d-border);
}
.oo-ui-panelLayout-framed, .oo-ui-window-body, .oo-ui-messageDialog-message {
	background: var(--d-panel); color: var(--d-text);
}
.oo-ui-labelElement-label, .oo-ui-fieldLayout-header label, .oo-ui-inline-help { color: var(--d-text); }

/* --- Search results --- */
.searchresults, .mw-search-result-heading a, .mw-search-results li { color: var(--d-text); }
.mw-search-result-data { color: var(--d-muted); }
.searchmatch { color: var(--d-gold); font-weight: bold; }
.mw-search-profile-tabs, .search-types .current a { background: var(--d-panel2); border-color: var(--d-border); }

/* --- Misc content elements --- */
blockquote { border-left: 3px solid var(--d-border); color: var(--d-text); }
dl dt { color: var(--d-gold); }
.mw-editsection a, .mw-indicators a, .redirectText a { color: var(--d-link); }
#siteNotice, #localNotice, .mw-headline { color: var(--d-text); }
.navbox, .mw-parser-output .navbox { background: var(--d-panel2); border-color: var(--d-border); color: var(--d-text); }
.mw-message-box-warning, .mw-message-box-error, .mw-message-box-success { color: var(--d-text); }


/* ============================================================
   DARK THEME part 3 — correct modern Vector-legacy class names
   (this wiki uses .vector-menu-* / .vector-legacy-sidebar / .mw-footer)
   ============================================================ */

/* Sidebar */
#mw-panel, .vector-legacy-sidebar { color: var(--d-muted); }
.vector-menu-portal .vector-menu-heading, .vector-menu-portal .vector-menu-heading-label { color: var(--d-muted); }
.vector-menu-portal .mw-list-item a, #mw-panel .mw-list-item a { color: var(--d-link); }

/* Tabs + dropdown menus at top of content */
.vector-menu-tabs .mw-list-item { background: var(--d-panel2); }
.vector-menu-tabs .mw-list-item a { color: var(--d-muted); }
.vector-menu-tabs .mw-list-item.selected { background: var(--d-panel); }
.vector-menu-tabs .mw-list-item.selected a { color: var(--d-gold); }
.vector-menu-heading, .vector-menu-heading-label { color: var(--d-muted); }
.vector-menu-dropdown .vector-menu-content, .vector-menu-dropdown-noicon .vector-menu-content {
	background: var(--d-panel2); border-color: var(--d-border);
}
.vector-menu-dropdown .mw-list-item a { color: var(--d-link); }

/* Personal tools (top-right user links) */
.mw-portlet-personal .mw-list-item a, #p-personal .mw-list-item a { color: var(--d-link); }

/* Body wrappers inherit the dark panel */
.vector-body, .mw-body-content { background: transparent; color: var(--d-text); }

/* Footer (modern class) */
.mw-footer { background: var(--d-bg); color: var(--d-muted); }
.mw-footer a, .mw-footer a:visited { color: var(--d-link); }
.mw-footer li, .mw-footer #footer-info li { color: var(--d-muted); }


/* History: core highlights compared revisions with a LIGHT bg (#f8f9fa) — darken it */
#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;
    }
}
Retrieved from "http://wiki.tenthfleet.org/wiki/index.php?title=MediaWiki:Common.css&oldid=40879"