TenthFleet

MediaWiki:Common.css

Revision as of 16:01, 14 July 2026 by MDGarcia (talk | contribs) (Add .tf-hatnote (indented italic hatnote for {{Main}}))

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
.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;
}
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); }
.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); }

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

/* --- 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); }
Retrieved from "http://wiki.tenthfleet.org/wiki/index.php?title=MediaWiki:Common.css&oldid=32336"