MediaWiki:Common.css

Latest revision as of 14:09, 12 August 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;
}

/* =============================================================
   Default text styles (2026-08-04)
   Replaces the earlier "Global font size override" block.
   Base size 16px -> 18px, +1% (0.01em) tracking, and default text
   softened to 80% opacity to reduce contrast. Headings keep their
   explicit #ffffff / gold, and dark-mode table cells keep #e8eef3,
   so the contrast hierarchy is preserved. Article and homepage body
   copy inherit this from body (neither sets its own colour), so both
   are covered by the same rule. Theme-aware: white in dark mode,
   black in light mode - the previous rule hardcoded #ffffff, which
   at 80% opacity would be unreadable on the light background.
   ============================================================= */
html, body {
    font-size: 18px !important;
    letter-spacing: 0.01em;
}
html.wows-theme-dark,
html.wows-theme-dark body,
html.wows-theme-dark .b-main {
    color: rgba(255, 255, 255, 0.8) !important;
}
html.wows-theme-light,
html.wows-theme-light body,
html.wows-theme-light .b-main {
    color: rgba(0, 0, 0, 0.8) !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;
}

/* =============================================================
   Breadcrumb page-path readability in dark mode (2026-07-14)
   Skin renders path links/dividers in dark slate, unreadable on the
   navy bg. Path -> white; current page -> gold. Light mode untouched.
   ============================================================= */
html.wows-theme-dark .b-breadcrumbs_item,
html.wows-theme-dark .b-breadcrumbs_divider {
  color: #ffffff !important;
}
html.wows-theme-dark .b-breadcrumbs_item:hover {
  color: #d4af37 !important;
}
html.wows-theme-dark .b-breadcrumbs_item__active {
  color: #d4af37 !important;
}

/* Dark mode: class/nation ship-list frames (.wot-frame-1) used light skin defaults (added 2026-07-14) */
html.wows-theme-dark .wot-frame-1 {
	background: #1a3244 !important;
	border: 1px solid rgba(212, 175, 55, 0.4) !important;
	box-shadow: none !important;
}

/* =============================================================
   Dark mode: header/footer chrome links to readable light grey
   (Wiki Rework, 2026-07-14)
   Page-action tabs (Read/Edit/...), the personal user links
   (Jack/Talk/...), and footer links render in the skin's dark
   slate (rgb 56,56,56 / 67,99,115) - unreadable on the navy bg.
   Recolour to #cfe0ec, matching the Download Game button link
   (--wows-link); hover to gold like the article links. Light
   mode keeps the skin defaults.
   ============================================================= */
html.wows-theme-dark #p-views .b-options_link,
html.wows-theme-dark .b-activity .b-options_link,
html.wows-theme-dark #footer a:not(.cdx-button) {
  color: #cfe0ec !important;
}
html.wows-theme-dark #p-views .b-options_link:hover,
html.wows-theme-dark .b-activity .b-options_link:hover,
html.wows-theme-dark #footer a:not(.cdx-button):hover {
  color: #d4af37 !important;
}

/* =============================================================
   Dark mode: hardcoded light cell shading (#f2f2f2) on consumable/
   stat tables left light text on a near-white background (invisible,
   e.g. Ship:Consumables Cooldown/Charges columns). Neutralise the
   inline gray so these cells follow the table's dark-mode zebra
   striping instead of a flat fill. Light mode keeps the original gray.
   (2026-07-15, zebra fix same day)
   ============================================================= */
html.wows-theme-dark table.wikitable > * > tr > td[style*="f2f2f2"],
html.wows-theme-dark table.wikitable > * > tr > th[style*="f2f2f2"] {
  background-color: transparent !important;
  color: #e8eef3 !important;
}
html.wows-theme-dark table.wikitable > * > tr:nth-child(even) > td[style*="f2f2f2"],
html.wows-theme-dark table.wikitable > * > tr:nth-child(even) > th[style*="f2f2f2"] {
  background-color: rgba(255,255,255,0.04) !important;
}
/* Inside ship-page dropdowns (.b-popup) the zebra uses opaque navy shades;
   mirror them for the shaded cells so they alternate in step. */
html.wows-theme-dark .b-popup table.wikitable > * > tr > td[style*="f2f2f2"],
html.wows-theme-dark .b-popup table.wikitable > * > tr > th[style*="f2f2f2"] {
  background-color: #223a52 !important;
}
html.wows-theme-dark .b-popup table.wikitable > * > tr:nth-child(2n) > td[style*="f2f2f2"],
html.wows-theme-dark .b-popup table.wikitable > * > tr:nth-child(2n) > th[style*="f2f2f2"] {
  background-color: #2b4863 !important;
}


/* =============================================================
Dark mode: default/base status box text legibility (2026-07-21)
The 2026-07-02 fix covered .b-status_item__error/__info/__important/
__question, but the plain base .b-status_item (no modifier, used by
e.g. the Battle Pass Starts/Ends status box) was still rgb(99,99,99) -
unreadable on the dark navy background. Light mode untouched.
============================================================= */
html.wows-theme-dark .b-status_item,
html.wows-theme-dark .b-status_item * { color:#dcebf7 !important; }

/* =============================================================
   Page layout width fix (2026-08-03)
   The skin sets .b-main-wrp-inner to display:inline-flex, which makes
   the whole content area shrink-to-fit the article's intrinsic
   max-content width. On text-light pages (e.g. clone/premium ship
   pages, where the stat panels are display:none on load and the
   description/changelog are short) the wrapper collapsed to ~770px
   instead of the full 1400px and the page rendered flush left.
   Forcing width:100% makes it fill its parent regardless of how much
   text the article contains, while leaving the flex layout intact.
   ============================================================= */
.b-main-wrp-inner {
	width: 100% !important;
}

/* ============================================================
   Event progress bar (Template:Event progress) — added 2026-08-06
   The template renders a server-side static bar; Common.js
   replaces it with a live, per-visitor version when JS runs.
   ============================================================ */
.wows-event-progress {
	max-width: 1100px;
	margin: 16px auto 4px;
	padding: 14px 18px 11px;
	box-sizing: border-box;
	border: 1px solid rgba(212,175,55,.45);
	border-radius: 4px;
	background: rgba(127,127,127,.10);
	font-size: 16px;
	line-height: 1.35;
	text-align: left;
}
.wows-ep-head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 12px; margin-bottom: 9px;
}
.wows-ep-name { font-weight: bold; font-size: 19px; color: #c8952a; }
.wows-ep-remain { font-weight: bold; white-space: nowrap; color: inherit; }

/* track, fill, spend tail, earning-deadline marker */
.wows-ep-track {
	position: relative; height: 14px; border-radius: 7px; overflow: hidden;
	background: rgba(127,127,127,.30);
	box-shadow: inset 0 0 0 1px rgba(212,175,55,.25);
}
.wows-ep-fill {
	position: absolute; top: 0; bottom: 0; left: 0; width: 0;
	background: linear-gradient(90deg,#e8622a,#f2a13c);
	transition: width .6s ease;
}
.wows-ep-tail {
	position: absolute; top: 0; bottom: 0; left: 0; width: 0;
	background: rgba(127,127,127,.85);
	transition: width .6s ease;
}
.wows-ep-mark {
	position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
	background: currentColor; opacity: .75; display: none;
}
.wows-ep-foot {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 12px; margin-top: 8px; font-size: 14px; opacity: .88;
}
.wows-ep-pct { font-weight: bold; }

/* meta row: day counter + token table + server switcher */
.wows-ep-meta {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 16px; margin-top: 8px; padding-top: 7px;
	border-top: 1px solid rgba(127,127,127,.35);
	font-size: 12.5px; opacity: .72;
}
.wows-ep-days { white-space: nowrap; }
.wows-ep-days .wows-ep-dayno { display: block; }
.wows-ep-days .wows-ep-spend { display: block; opacity: .85; }
.wows-ep-tokens { flex: 0 1 auto; }
.wows-ep-tgrid {
	display: inline-grid; grid-template-columns: auto auto auto;
	gap: 1px 14px; align-items: baseline;
}
.wows-ep-tgrid > span { white-space: nowrap; }
.wows-ep-tgrid .wows-ep-th { opacity: .75; text-align: right; }
.wows-ep-tgrid .wows-ep-tr { text-align: left; }
.wows-ep-tgrid b { text-align: right; color: inherit; font-weight: 600; }

/* server switcher */
.wows-ep-servers { white-space: nowrap; }
.wows-ep-servers .wows-ep-srv-label { margin-right: 4px; }
.wows-ep-srv {
	font: inherit; cursor: pointer; background: none; border: 0;
	padding: 1px 5px; margin: 0 1px; border-radius: 3px;
	color: inherit; text-decoration: underline dotted;
}
.wows-ep-srv:hover { color: #d4af37; }
.wows-ep-srv[aria-pressed="true"] {
	color: #d4af37; font-weight: bold; text-decoration: none;
	box-shadow: inset 0 0 0 1px rgba(212,175,55,.5);
}
html.wows-theme-light .wows-ep-srv:hover,
html.wows-theme-light .wows-ep-srv[aria-pressed="true"] { color: #8a6d1f; }

/* state variants */
.wows-event-progress.wows-ep--upcoming .wows-ep-fill {
	background: linear-gradient(90deg,#4f7d99,#6f9fbc);
}
.wows-event-progress.wows-ep--spend .wows-ep-remain { color: #f2a13c; }
.wows-event-progress.wows-ep--ended { opacity: .75; }
.wows-event-progress.wows-ep--ended .wows-ep-fill {
	background: linear-gradient(90deg,#5a6b78,#7d8e9b);
}
@media (max-width: 860px) {
	.wows-ep-head, .wows-ep-foot, .wows-ep-meta { flex-wrap: wrap; }
	.wows-ep-foot .wows-ep-pct { order: 3; }
}
/* event title may link to the event's article; keep the gold, drop the link colour */
.wows-event-progress .wows-ep-name a,
.wows-event-progress .wows-ep-name a:visited,
.wows-event-progress .wows-ep-name a.external,
.wows-event-progress .wows-ep-name a.new { color: inherit !important; text-decoration: none; }
.wows-event-progress .wows-ep-name a:hover { color: inherit !important; text-decoration: underline; }