MediaWiki:Common.css
Dark mode: navy wikitable headers, zebra striping, gold frame to match ship-page tables |
Dark mode: fix ship-page stat dropdown (.b-popup) panels — dark panel + gold border, darker headers, alternating rows (light mode unaffected) |
||
| Line 712: | Line 712: | ||
/* Light-mode homepage action buttons: white text on orange (added 2026-07-07) */ | /* Light-mode homepage action buttons: white text on orange (added 2026-07-07) */ | ||
html.wows-theme-light .b-game-info .plainlinks a { color:#ffffff !important; } | html.wows-theme-light .b-game-info .plainlinks a { color:#ffffff !important; } | ||
/* Dark mode: ship-page dropdown stat panels (.b-popup) used light skin defaults (added 2026-07-14) */ | |||
html.wows-theme-dark .b-popup { | |||
background: #1a3244; | |||
border: 1px solid rgba(212, 175, 55, 0.4); | |||
box-shadow: none; | |||
} | |||
html.wows-theme-dark .b-popup .b-popup_content { | |||
background: #1a3244; | |||
} | |||
/* Header cells keep #1a3244; alternating data rows for readability */ | |||
html.wows-theme-dark .b-popup table.wikitable > * > tr > td { | |||
background-color: #223a52; | |||
} | |||
html.wows-theme-dark .b-popup table.wikitable > * > tr:nth-child(2n) > td { | |||
background-color: #2b4863; | |||
} | |||
Revision as of 16:35, 14 July 2026
/* CSS placed here will be applied to all skins */
html, body, .b-main {
background-color: #0a1628 !important;
background-image: none !important;
color: #ffffff !important;
}
/* Remove white highlight on Read tab */
.selected .b-options_arr {
display: none !important;
}
.b-tabs-wrp {
border-color: transparent !important;
}
/* Remove white hover highlight on sidebar nav links */
.b-left-menu_item:hover {
background: transparent !important;
background-image: none !important;
}
/* Gold page heading */
#firstHeading {
color: #d4af37 !important;
}
/* Gold article intro bold */
.b-game-info > b {
color: #ffffff !important;
}
/* Gold article section heading */
.b-game-info .b-heading2 {
color: #d4af37 !important;
}
/* ── WoWS Ship Page Template Styles ──────────────────────────── */
/* === GLOBAL === */
.ship-page { background: #0a1628; color: #e8eef4; font-family: 'Segoe UI', Arial, sans-serif; }
/* === HERO BANNER === */
.ship-hero {
position: relative; background: linear-gradient(to right, #0a1628 40%, transparent 100%);
padding: 3em 2em 2em; min-height: 220px; overflow: hidden; margin-bottom: 0;
}
.ship-hero-bg {
position: absolute; top: 0; right: 0; width: 65%; height: 100%;
background: url('https://wowswiki.wgtest.net/images/thumb/Oklahoma_wows_main.jpg/800px-Oklahoma_wows_main.jpg') center/cover no-repeat;
opacity: 0.35;
}
.ship-hero-content { position: relative; z-index: 1; max-width: 520px; }
.ship-hero-badges { display: flex; gap: 0.5em; flex-wrap: wrap; margin-bottom: 0.8em; align-items: center; }
.ship-badge {
font-size: 0.7em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
padding: 0.25em 0.7em; border: 1px solid rgba(255,255,255,0.25); color: #a0b8cc;
display: inline-flex; align-items: center; gap: 0.3em;
}
.ship-badge-nation { color: #a0b8cc; }
.ship-badge-tier { color: #00A5F5; border-color: #00A5F5; }
.ship-badge-type { color: #a0b8cc; }
.ship-badge-premium { color: #f5c842; border-color: #f5c842; }
.ship-badge-sep { color: rgba(255,255,255,0.2); }
.ship-hero-name { font-size: 2.8em; font-weight: 700; color: #fff; margin: 0 0 0.2em; line-height: 1.1; }
.ship-hero-tagline { color: rgba(255,255,255,0.65); font-size: 0.95em; margin-bottom: 1.2em; line-height: 1.5; }
.ship-hero-buttons { display: flex; gap: 0.7em; flex-wrap: wrap; }
.ship-btn-primary {
background: #e8710a; color: #fff; font-weight: 700; font-size: 0.85em;
padding: 0.6em 1.4em; border: none; cursor: pointer; text-transform: uppercase;
letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.4em;
text-decoration: none;
}
.ship-btn-primary:hover { background: #ff8c1a; color: #fff; text-decoration: none; }
.ship-btn-secondary {
background: transparent; color: #fff; font-weight: 600; font-size: 0.85em;
padding: 0.6em 1.4em; border: 1px solid rgba(255,255,255,0.4); cursor: pointer;
text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none;
display: inline-flex; align-items: center; gap: 0.3em;
}
.ship-btn-secondary:hover { border-color: #fff; color: #fff; text-decoration: none; }
/* === BREADCRUMBS === */
.ship-breadcrumbs {
padding: 0.6em 2em; font-size: 0.8em; color: rgba(255,255,255,0.45);
border-bottom: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.2);
}
.ship-breadcrumbs a { color: rgba(255,255,255,0.45); text-decoration: none; }
.ship-breadcrumbs a:hover { color: #00A5F5; }
.ship-breadcrumbs .sep { margin: 0 0.4em; }
.ship-breadcrumbs .current { color: rgba(255,255,255,0.75); }
/* === MAIN BODY LAYOUT === */
.ship-body { display: flex; gap: 1.5em; align-items: flex-start; padding: 1.5em 2em; }
.ship-main { flex: 1; min-width: 0; }
.ship-sidebar { width: 240px; flex-shrink: 0; }
/* === SECTION HEADERS === */
.ship-section-header {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 0.5em; border-bottom: 1px solid rgba(0,165,245,0.25);
margin-bottom: 1em;
}
.ship-section-title {
font-size: 0.8em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: #e8eef4; display: flex; align-items: center; gap: 0.5em;
}
.ship-section-title::before {
content: ''; display: inline-block; width: 4px; height: 1em;
background: #00A5F5; flex-shrink: 0;
}
.ship-section-badge {
font-size: 0.75em; color: #00A5F5; border: 1px solid rgba(0,165,245,0.5);
padding: 0.15em 0.5em; font-weight: 700;
}
.ship-section { margin-bottom: 2em; }
/* === RESOURCE CARDS === */
.ship-resources { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.ship-resource-card {
background: #0d1e2e; border: 1px solid rgba(0,165,245,0.15);
padding: 0.9em 1em; display: flex; align-items: center; gap: 0.8em;
text-decoration: none; color: inherit;
transition: border-color 0.2s, background 0.2s;
}
.ship-resource-card:hover { border-color: rgba(0,165,245,0.5); background: #112233; text-decoration: none; color: inherit; }
.ship-resource-icon { font-size: 1.4em; flex-shrink: 0; }
.ship-resource-info { flex: 1; min-width: 0; }
.ship-resource-title { font-weight: 700; font-size: 0.9em; color: #00A5F5; }
.ship-resource-desc { font-size: 0.75em; color: rgba(255,255,255,0.5); margin-top: 0.1em; line-height: 1.3; }
.ship-resource-arrow { color: rgba(255,255,255,0.25); font-size: 0.9em; flex-shrink: 0; }
/* === TABS === */
.ship-tabs { margin-bottom: 1em; }
.ship-tab-nav {
display: flex; gap: 0; border-bottom: 1px solid rgba(0,165,245,0.25);
flex-wrap: wrap; margin-bottom: 0;
}
.ship-tab-btn {
background: transparent; border: none; border-bottom: 2px solid transparent;
color: rgba(255,255,255,0.55); font-size: 0.82em; font-weight: 600;
padding: 0.6em 1.1em; cursor: pointer; letter-spacing: 0.04em; margin-bottom: -1px;
transition: color 0.2s, border-color 0.2s;
}
.ship-tab-btn:hover { color: #fff; }
.ship-tab-btn.active { color: #00A5F5; border-bottom-color: #00A5F5; }
.ship-tab-panel { display: none; }
.ship-tab-panel.active { display: block; }
/* === STATS TABLE === */
.ship-stats-table { width: 100%; border-collapse: collapse; }
.ship-stats-table thead tr { background: rgba(0,165,245,0.15); }
.ship-stats-table thead th {
font-size: 0.72em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: #00A5F5; padding: 0.7em 1em; text-align: left;
}
.ship-stats-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); }
.ship-stats-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.ship-stats-table td { padding: 0.6em 1em; font-size: 0.87em; vertical-align: middle; }
.ship-stats-table .stat-name { color: #e8eef4; font-weight: 600; }
.ship-stats-table .stat-value { color: #00A5F5; }
.ship-stats-table .stat-rating { min-width: 120px; }
.ship-stat-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.ship-stat-fill { height: 100%; border-radius: 2px; }
.bar-yellow { background: #f5c842; }
.bar-teal { background: #00e5cc; }
.bar-red { background: #e84242; }
.bar-green { background: #42e87a; }
.bar-blue { background: #00A5F5; }
.ship-stats-note { font-size: 0.78em; color: rgba(255,255,255,0.45); font-style: italic; margin-top: 0.8em; line-height: 1.5; }
/* === SHIP HISTORY TABS === */
.ship-history-tabs .ship-tab-btn {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
border-bottom: none; color: rgba(255,255,255,0.6); margin-right: 0.3em;
border-radius: 3px 3px 0 0; padding: 0.4em 1em; font-size: 0.8em;
}
.ship-history-tabs .ship-tab-btn.active { background: #0d1e2e; color: #00A5F5; border-color: rgba(0,165,245,0.4); }
.ship-history-content {
background: #0d1e2e; border: 1px solid rgba(0,165,245,0.2);
padding: 1.2em; font-size: 0.87em; line-height: 1.65; color: rgba(255,255,255,0.8);
}
.ship-history-content strong { color: #e8eef4; }
/* === MINI SPECS TABLE === */
.ship-mini-specs {
margin-top: 1em; background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.08);
border-collapse: collapse; width: 100%; font-size: 0.82em;
}
.ship-mini-specs th {
color: rgba(255,255,255,0.4); font-size: 0.85em; text-transform: uppercase;
letter-spacing: 0.06em; padding: 0.4em 0.8em; border-bottom: 1px solid rgba(255,255,255,0.08);
font-weight: 600; text-align: left;
}
.ship-mini-specs td {
padding: 0.4em 0.8em; color: #00A5F5; font-weight: 700;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ship-mini-specs .decom-td { color: #f5c842; }
/* === SKINS SECTION === */
.ship-skins-header { display: flex; align-items: center; justify-content: space-between; }
.ship-premium-badge {
font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: #f5c842; border: 1px solid rgba(245,200,66,0.5); padding: 0.15em 0.5em;
}
.ship-skins-grid { display: flex; gap: 0.8em; flex-wrap: wrap; }
.ship-skin-card {
background: #0d1e2e; border: 1px solid rgba(0,165,245,0.15);
width: 220px; overflow: hidden;
}
.ship-skin-img { width: 100%; height: 120px; object-fit: cover; background: #0a1628; display: block; }
.ship-skin-label {
padding: 0.5em 0.8em; font-size: 0.8em; color: rgba(255,255,255,0.7); font-weight: 600;
}
/* === SIDEBAR INFOBOX === */
.ship-infobox {
background: #0a1c2e; border: 1px solid rgba(0,165,245,0.2); color: #e8eef4; font-size: 0.85em;
}
.ship-infobox-image { width: 100%; display: block; background: #060f1a; }
.ship-infobox-image img { width: 100%; display: block; }
.ship-infobox-title {
background: #0d2035; padding: 0.6em 0.9em;
display: flex; align-items: center; justify-content: space-between;
}
.ship-infobox-name { font-size: 1.1em; font-weight: 700; color: #fff; }
.ship-infobox-premium { color: #f5c842; font-size: 0.8em; }
.ship-infobox-stats { padding: 0; }
.ship-infobox-row {
display: flex; justify-content: space-between; align-items: center;
padding: 0.4em 0.9em; border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 0.9em;
}
.ship-infobox-row:hover { background: rgba(255,255,255,0.03); }
.ship-infobox-label { color: rgba(255,255,255,0.5); }
.ship-infobox-value { color: #e8eef4; font-weight: 600; text-align: right; }
.ship-infobox-value.cyan { color: #00A5F5; }
.ship-infobox-value.gold { color: #f5c842; }
.ship-infobox-value.red { color: #e84242; }
.ship-infobox-value.green { color: #42e87a; }
.ship-infobox-buttons { padding: 0.7em; display: flex; flex-direction: column; gap: 0.4em; }
.ship-infobox-btn-primary {
display: flex; align-items: center; justify-content: center; gap: 0.4em;
background: #e8710a; color: #fff; font-weight: 700; font-size: 0.85em;
padding: 0.6em; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;
}
.ship-infobox-btn-primary:hover { background: #ff8c1a; color: #fff; text-decoration: none; }
.ship-infobox-btn-secondary {
display: flex; align-items: center; gap: 0.5em; justify-content: center;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.75); font-size: 0.82em; padding: 0.5em;
text-decoration: none;
}
.ship-infobox-btn-secondary:hover { border-color: rgba(255,255,255,0.3); color: #fff; text-decoration: none; }
.ship-infobox-btn-link {
display: flex; align-items: center; justify-content: center; gap: 0.3em;
color: rgba(255,255,255,0.5); font-size: 0.8em; text-decoration: none;
padding: 0.4em; text-align: center;
}
.ship-infobox-btn-link:hover { color: #00A5F5; text-decoration: none; }
/* === HOW TO ACQUIRE === */
.ship-acquire {
background: #141a0a; border: 1px solid rgba(180,160,60,0.25);
margin-top: 0.8em; padding: 0.8em 0.9em; font-size: 0.8em;
}
.ship-acquire-title {
font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
color: rgba(255,255,255,0.4); margin-bottom: 0.5em;
}
.ship-acquire-body { color: rgba(255,255,255,0.7); line-height: 1.5; }
.ship-acquire-body a { color: #f5c842; }
/* Legacy classes kept for compatibility */
.ship-page-body { display: flex; gap: 1.5em; align-items: flex-start; }
.ship-main-col { flex: 1; min-width: 0; }
.ship-infobox-col { flex-shrink: 0; }
/* WoWS logo replacement */
#p-logo.b-logo {
background-image: url("https://wows-media-wowswiki-dev.wgtest.net/a/a9/WoWS-logo-nobg.png") !important;
background-size: 144px 144px !important;
background-position: 40px -30px !important;
background-repeat: no-repeat !important;
}
/* ── Floating/Sticky Left Navigation Sidebar ──────────────────── */
/* Makes the left navigation panel follow the user's scroll */
#mw-panel.b-sidebar {
position: sticky;
top: 10px;
float: left;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
z-index: 100;
/* Subtle scrollbar styling */
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
#mw-panel.b-sidebar::-webkit-scrollbar {
width: 4px;
}
#mw-panel.b-sidebar::-webkit-scrollbar-track {
background: transparent;
}
#mw-panel.b-sidebar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
/* Ensure the parent container works with sticky positioning */
.b-main-wrp {
align-items: flex-start;
}
/* ── Styled separator: gold gradient line, applied site-wide ─── */
/* .l-separator__header/.footer are full-width (1400px) containers */
/* .mw-parser-output > .b-separator are content-column separators */
/* Full-width separators via their container element */
.l-separator__header,
.l-separator__footer {
background-image: linear-gradient(
to right,
transparent 0%,
rgba(180, 140, 40, 0.1) 5%,
rgba(212, 175, 55, 0.5) 20%,
rgba(212, 175, 55, 0.7) 50%,
rgba(212, 175, 55, 0.5) 80%,
rgba(180, 140, 40, 0.1) 95%,
transparent 100%
) !important;
background-repeat: no-repeat !important;
background-size: 100% 2px !important;
background-position: 0 center !important;
}
/* Clear all child piece backgrounds (prevents double-render) */
.l-separator .b-separator,
.l-separator .b-separator-right,
.b-separator-right {
background: none !important;
}
/* Content-column separators (standalone, not inside .l-separator) */
/* Remove the left/right margin offset so the line spans the full */
/* content column width and appears centered. */
.mw-parser-output > .b-separator,
.mw-parser-output .b-game-info > .b-separator {
margin-left: 0 !important;
margin-right: 0 !important;
background-image: linear-gradient(
to right,
transparent 0%,
rgba(180, 140, 40, 0.1) 5%,
rgba(212, 175, 55, 0.5) 20%,
rgba(212, 175, 55, 0.7) 50%,
rgba(212, 175, 55, 0.5) 80%,
rgba(180, 140, 40, 0.1) 95%,
transparent 100%
) !important;
background-repeat: no-repeat !important;
background-size: 100% 2px !important;
background-position: 0 center !important;
}
/* Gold navigation sidebar separator lines (matching page separators) */
.b-left-menu_link {
background-image: linear-gradient(to right, transparent 0%, rgba(180, 140, 40, 0.1) 5%, rgba(212, 175, 55, 0.5) 20%, rgba(212, 175, 55, 0.7) 50%, rgba(212, 175, 55, 0.5) 80%, rgba(180, 140, 40, 0.1) 95%, transparent 100%) !important;
background-repeat: no-repeat !important;
background-position: 0px 0px !important;
background-size: 100% 2px !important;
}
.b-left-menu_item:first-child .b-left-menu_link:hover,
.b-left-menu_item.selected .b-left-menu_link {
background-image: linear-gradient(to right, transparent 0%, rgba(180, 140, 40, 0.1) 5%, rgba(212, 175, 55, 0.5) 20%, rgba(212, 175, 55, 0.7) 50%, rgba(212, 175, 55, 0.5) 80%, rgba(180, 140, 40, 0.1) 95%, transparent 100%) !important;
background-repeat: no-repeat !important;
background-position: 0px 0px !important;
background-size: 100% 2px !important;
}
.b-left-menu_point:hover {
background-image: linear-gradient(to right, transparent 0%, rgba(180, 140, 40, 0.1) 5%, rgba(212, 175, 55, 0.5) 20%, rgba(212, 175, 55, 0.7) 50%, rgba(212, 175, 55, 0.5) 80%, rgba(180, 140, 40, 0.1) 95%, transparent 100%) !important;
background-repeat: no-repeat !important;
background-position: 0px 100% !important;
background-size: 100% 2px !important;
}
/* Hide hardcoded 'Welcome to Wargaming.net Wiki!' header text */
.b-welcome {
display: none !important;
}
/* Restyle .gw-frame-1 box to match dark navy theme */
.mw-parser-output .gw-frame-1 {
background-color: rgba(10, 22, 40, 0.85) !important;
border: 1px solid rgba(212, 175, 55, 0.4) !important;
border-radius: 3px !important;
box-shadow: rgba(212, 175, 55, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 2px 6px !important;
}
.mw-parser-output .gw-frame-1 a {
color: #00A5F5 !important;
}
.mw-parser-output .gw-frame-1 a:hover {
color: #d4af37 !important;
text-decoration: underline !important;
}
/* White headers in dark mode */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
color: #ffffff !important;
}
/* Color-coded bullet points for Pros (green) and Cons (orange-red) */
.mw-parser-output .mw-heading3:has(#Pros) + ul > li,
.mw-parser-output .mw-heading3:has(#Cons) + ul > li {
list-style-type: disc;
background-image: none !important;
padding-left: 0;
}
.mw-parser-output .mw-heading3:has(#Pros) + ul li::marker {
color: #4CAF50;
}
.mw-parser-output .mw-heading3:has(#Cons) + ul li::marker {
color: #e84242;
}
/* Global font size override */
html, body {
font-size: 16px !important;
}
/* === Theme-aware text colors (dark is the default theme) === */
:root {
--wows-link: #cfe0ec; /* light steel — readable on the navy dark bg */
--wows-link-visited: #cfe0ec; /* match unvisited: don't recolor clicked links (2026-07-07) */
}
html.wows-theme-light {
--wows-link: #436373; /* original slate — correct on light bg */
--wows-link-visited: #436373;
}
#mw-content-text a:not(.image),
.toc a, .toctext, .tocnumber { color: var(--wows-link); }
#mw-content-text a:not(.image):visited,
.toc a:visited { color: var(--wows-link-visited); }
html.wows-theme-dark .toc {
background-color: rgba(255,255,255,0.06);
border-color: rgba(212,175,55,0.3);
}
/* =============================================================
Special:Search — polishing fixes (Wiki Rework)
============================================================= */
/* [2] Hide the redundant global header search box on Special:Search */
.mw-special-Search #p-search { display: none; }
/* [4] Dark theme: Advanced-search namespace panel + profile tabs kept a
near-white background under white text; drop it so labels are readable */
html.wows-theme-dark #mw-searchoptions,
html.wows-theme-dark .mw-search-profile-tabs { background: transparent; border-color: rgba(255,255,255,.18); }
html.wows-theme-dark #mw-searchoptions,
html.wows-theme-dark #mw-searchoptions label { color: #e8eef3; }
/* NOTE: [1] "Special page" tab gray-"l" and [3] search button spacing are
intentionally NOT handled here — both need careful work (the tab is a
two-part sprite; the button is an OOUI ActionFieldLayout) and CSS-only
attempts caused visual regressions. To be revisited/tested properly. */
/* --- Main page: nation flag grid alignment (Wiki Rework polishing, 2026-07-01) --- */
/* Both nation-flag tables carry class="wows-nation-grid". Force uniform fixed-width
cells and center both rows on the same axis so the 6-flag and 7-flag rows line up
as a tidy pyramid. Layout-only, so identical in dark & light themes. */
.wows-nation-grid {
width: auto !important;
table-layout: fixed;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
.wows-nation-grid td {
width: 120px;
text-align: center;
vertical-align: top;
padding: 6px 4px;
box-sizing: border-box;
}
/* =============================================================
Tech-tree ship price: show credits, not doubloons (Wiki Rework)
Ship pages hardcode .b-description-img_price__gold (doubloon icon)
even on tech-tree ships, which are bought with credits. The skin's
base .b-description-img_price icon is the silver credits coin, so we
re-apply it for tech-tree ships only, identified by a type class
containing "-Tech" (e.g. ...__Destroyer-Tech). Premium ships use
"-Premium" and are left unchanged (they correctly show doubloons).
============================================================= */
.b-description-img:has(.b-description-img_type[class*="-Tech"]) .b-description-img_price__gold {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAB3RJTUUH2wMdDQwsx0sDYgAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAG0SURBVHjaTZI9a8JQFIbfRLFWJSbqUNChFqQW6lZFh7q1SycHN+du/oPu/QH+hQ5u1sWlIHRoNRQ/BjFoUavgBx0UrGI1MemJNeCFJwk359zznvdcBv+LIdj9W0fZ75sIjdjiIJCxWq1CJBJ5cLlcJzp2u51fLBbLdrstdbvd+ng8fqK4HyPBlMlk3tfrdWS5XMLr9YLjOMznc1ACOp3Oy2g0GpdKpTTFLsz0UJ1Op5BMJkE/YDabIcsyJpMJ/H4/6KCbQqHwKYrilaqqr7pGeDyee57nN6FQiCsWi6DTQDLAsiwqlQoo2L3ZbFok822XUK1WpyTjdrVacZIkod/v61JQq9UwHA6RSqUwGAy+iWddEhsOh68dDocSCAQQjUaRzWZ1KRAEAW63G7lcDo1GQ9Qd2yXE4/HLdDp9Wi6Xkc/n0ev1wDDMrvFWqwWLxQKqPjJ8ZoLB4B1pPkokEi5FUUDNwefzgSwGGYJms/k4m80+NE0bGgO7iMVidzab7Wy73R6TvSaahYNsrU+nU4mqzamCRHEDZj9AY8o24nxfWSVk4pf4ItZ6D8ZVOFzGnnawpxoffykzyQ8apFPxAAAAAElFTkSuQmCC") !important;
}
/* =============================================================
Sidebar nav readability in dark mode (Wiki Rework)
Skin renders nav link text in a dark slate (rgb 67,99,115) that is
unreadable on the dark navy background. In dark mode, match the
ship-description text colour (white). Light mode is untouched — its
slate is correct on the light background (set by the light theme CSS).
============================================================= */
html.wows-theme-dark #mw-panel .b-left-menu_link,
html.wows-theme-dark #mw-panel .b-left-menu_point {
color: #ffffff !important;
}
/* Nav section heading ("Navigation") readable in dark mode too (Wiki Rework) */
html.wows-theme-dark #mw-panel .b-sidebar_title {
color: #ffffff !important;
}
/* =============================================================
Special:Search polishing (Wiki Rework, 2026-07-02)
- The OOUI search widget drew its own grey box behind the offset
<input> (read as two overlapping bars). Collapse that box and let
the input fill the field, so the Search button sits at the bar's end.
- Vertically centre the magnifier icon within the input.
- The selected "Special page" tab keeps its ORIGINAL sprite styling;
only its near-white text-shadow is removed so the text (esp. the
thin "l") reads as one uniform colour.
============================================================= */
.mw-special-Search #searchText.oo-ui-inputWidget {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
height: 40px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.mw-special-Search #searchText .oo-ui-inputWidget-input {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
height: 40px !important;
margin: 0 !important;
padding: 0 10px 0 36px !important;
line-height: 38px !important;
}
.mw-special-Search #searchText .oo-ui-iconElement-icon {
top: 0 !important;
bottom: 0 !important;
height: auto !important;
margin: auto 0 !important;
transform: none !important;
left: 10px !important;
width: 20px !important;
}
.mw-special-Search .b-tabs-item_link {
text-shadow: none !important;
}
/* Match the Search button height to the widened search input (Wiki Rework) */
.mw-special-Search .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-button {
height: 40px !important;
}
/* =============================================================
Special:Search results readability in dark mode (Wiki Rework)
Result section headings ("Page title/text matches") were rgb(56,56,56)
and the size/date metadata rgb(85,85,85) — near-invisible on the navy
background. Brighten in dark mode; light mode keeps the skin defaults.
============================================================= */
html.wows-theme-dark .mw-special-Search #mw-content-text h2 {
color: #ffffff !important;
}
html.wows-theme-dark .mw-special-Search .mw-search-result-data {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Larger, more readable sidebar navigation text (Wiki Rework) */
#mw-panel .b-sidebar_title {
font-size: 16px !important;
}
#mw-panel .b-left-menu_link,
#mw-panel .b-left-menu_point {
font-size: 14px !important;
line-height: 20px !important;
}
/* =============================================================
Table of contents relocated into the sidebar (Wiki Rework)
Styles the moved #toc to fit the narrow sticky sidebar, and
RESTORES a working collapse toggle (mediawiki.toc.styles, which
normally provides it, is not loaded on this wiki).
============================================================= */
#mw-panel #toc { display:block !important; width:auto !important; max-width:none !important; background:transparent !important; border:none !important; padding:0 9px 8px !important; margin:0 !important; font-size:12px !important; text-align:left !important; }
#mw-panel #toc .toctitle { text-align:left !important; padding:0 !important; display:flex !important; align-items:baseline !important; gap:6px !important; }
#mw-panel #toc .toctitle h2 { display:inline !important; font-size:16px !important; font-weight:400 !important; color:#fff !important; font-family:inherit !important; border:none !important; }
#mw-panel #toc ul { margin:6px 0 0 6px !important; padding:0 !important; line-height:1.5 !important; text-align:left !important; }
#mw-panel #toc li { margin:0 !important; }
#mw-panel #toc .toctogglecheckbox { position:absolute !important; opacity:0 !important; width:0; height:0; }
#mw-panel #toc .toctogglelabel { cursor:pointer !important; color:var(--wows-link) !important; font-size:11px !important; }
#mw-panel #toc .toctogglelabel::after { content:'[hide]'; }
#mw-panel #toc .toctogglecheckbox:checked ~ .toctitle .toctogglelabel::after { content:'[show]'; }
#mw-panel #toc .toctogglecheckbox:checked ~ ul { display:none !important; }
/* Remove the decorative arrow on the sidebar "Navigation" heading (Wiki Rework) - it is not a working dropdown toggle */
#mw-panel .b-sidebar_title {
background-image: none !important;
padding-left: 0 !important;
}
/* Align the sidebar TOC under the Navigation section (Wiki Rework):
indent so top-level entries line up with the nav items instead of
poking out at the panel's left edge. */
#mw-panel #toc { padding-left: 20px !important; }
#mw-panel #toc ul { margin-left: 9px !important; }
/* =============================================================
Sidebar TOC formatted like the nav pane (Wiki Rework)
"Contents" becomes a peer nav item of "Wiki Homepage" (same size/
weight/indent, no gap above it); top-level entries get the gold
separator line, sub-entries stay plain. Overrides earlier TOC rules.
============================================================= */
#mw-panel #p-toc { margin-top: -22px !important; }
#mw-panel #toc { padding: 0 !important; }
#mw-panel #toc .toctitle { display:block !important; margin:0 !important; padding:8px 9px 7px 22px !important; background-image:linear-gradient(to right, transparent 0%, rgba(180,140,40,0.1) 5%, rgba(212,175,55,0.5) 20%, rgba(212,175,55,0.7) 50%, rgba(212,175,55,0.5) 80%, rgba(180,140,40,0.1) 95%, transparent 100%) !important; background-repeat:no-repeat !important; background-position:0 0 !important; background-size:100% 2px !important; text-align:left !important; }
#mw-panel #toc .toctitle h2 { display:inline !important; font-size:14px !important; font-weight:400 !important; color:#fff !important; border:none !important; font-family:inherit !important; }
#mw-panel #toc ul { margin:0 !important; padding:0 !important; list-style:none !important; }
#mw-panel #toc li { margin:0 !important; display:block !important; }
#mw-panel #toc li a { display:block !important; text-decoration:none !important; color:var(--wows-link) !important; padding:6px 9px 6px 29px !important; background-image:none !important; }
#mw-panel #toc li a:hover { color:#d4af37 !important; }
#mw-panel #toc > ul > li > a { background-image:linear-gradient(to right, transparent 0%, rgba(180,140,40,0.1) 5%, rgba(212,175,55,0.5) 20%, rgba(212,175,55,0.7) 50%, rgba(212,175,55,0.5) 80%, rgba(180,140,40,0.1) 95%, transparent 100%) !important; background-repeat:no-repeat !important; background-position:0 0 !important; background-size:100% 2px !important; }
#mw-panel #toc ul ul li a { padding-left:41px !important; }
#mw-panel #toc ul ul ul li a { padding-left:53px !important; }
/* Fix: TOC "Contents" heading was hardcoded white (invisible in light mode) - make it theme-aware */
html.wows-theme-dark #mw-panel #toc .toctitle h2 { color:#ffffff !important; }
html.wows-theme-light #mw-panel #toc .toctitle h2 { color:rgb(67,99,115) !important; }
/* =============================================================
Theme-aware header logo (Wiki Rework, 2026-07-02)
Full WoWS lockup: white in dark mode, dark navy in light mode.
Overrides the earlier single (white, dev-host) logo rule.
============================================================= */
#p-logo.b-logo {
background-image: url("https://wows-media-wowswiki-prod.wgcdn.co/e/ef/Logo_WoWS-Main_WG.svg") !important;
background-size: 156px auto !important;
background-position: 40px 7px !important;
background-repeat: no-repeat !important;
}
html.wows-theme-light #p-logo.b-logo {
background-image: url("https://wows-media-wowswiki-prod.wgcdn.co/9/9b/Logo_WoWS-Main_Dark_WG.svg") !important;
}
/* Dark theme: wikitable body + header cells (added 2026-07-02) */
html.wows-theme-dark table.wikitable > caption {
color: #e8eef3;
}
html.wows-theme-dark table.wikitable,
html.wows-theme-dark table.wikitable > * > tr > td {
color: #e8eef3;
border-color: rgba(255,255,255,0.18);
}
html.wows-theme-dark table.wikitable > * > tr > th,
html.wows-theme-dark table.standard th,
html.wows-theme-dark table.wide th,
html.wows-theme-dark table.wikitable th {
background-color: #1a3244;
color: #ffffff;
text-shadow: none;
border-color: rgba(255,255,255,0.25);
}
/* Dark theme: zebra striping + clearer borders for wikitable bodies (added 2026-07-08) */
html.wows-theme-dark table.wikitable > * > tr:nth-child(even) > td {
background-color: rgba(255,255,255,0.04);
}
html.wows-theme-dark table.wikitable,
html.wows-theme-dark table.wikitable > * > tr > td {
border-color: rgba(255,255,255,0.22);
}
/* Dark theme: gold frame around wikitables, matching ship-page style (added 2026-07-08) */
html.wows-theme-dark table.wikitable {
border: 2px solid rgba(212,175,55,0.5) !important;
}
/* Dark theme: notice/status boxes text legibility (added 2026-07-02) */
html.wows-theme-dark .b-status__important,
html.wows-theme-dark .b-status_item__important,
html.wows-theme-dark .b-status__important *,
html.wows-theme-dark .b-status_item__important * { color:#f7e9db !important; }
html.wows-theme-dark .b-status__error,
html.wows-theme-dark .b-status_item__error,
html.wows-theme-dark .b-status__error *,
html.wows-theme-dark .b-status_item__error * { color:#f5dede !important; }
html.wows-theme-dark .b-status__info,
html.wows-theme-dark .b-status_item__info,
html.wows-theme-dark .b-status__info *,
html.wows-theme-dark .b-status_item__info * { color:#dcebf7 !important; }
html.wows-theme-dark .b-status__question,
html.wows-theme-dark .b-status_item__question,
html.wows-theme-dark .b-status__question *,
html.wows-theme-dark .b-status_item__question * { color:#e8e0f2 !important; }
/* Light-mode homepage action buttons: white text on orange (added 2026-07-07) */
html.wows-theme-light .b-game-info .plainlinks a { color:#ffffff !important; }
/* Dark mode: ship-page dropdown stat panels (.b-popup) used light skin defaults (added 2026-07-14) */
html.wows-theme-dark .b-popup {
background: #1a3244;
border: 1px solid rgba(212, 175, 55, 0.4);
box-shadow: none;
}
html.wows-theme-dark .b-popup .b-popup_content {
background: #1a3244;
}
/* Header cells keep #1a3244; alternating data rows for readability */
html.wows-theme-dark .b-popup table.wikitable > * > tr > td {
background-color: #223a52;
}
html.wows-theme-dark .b-popup table.wikitable > * > tr:nth-child(2n) > td {
background-color: #2b4863;
}
