MediaWiki:Common.css

Revision as of 19:33, 2 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 {
    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: #b9a9d6;
}
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; }