Welcome to Wargaming.net Wiki!
Variants

MediaWiki:Common.css

Jump to: navigation, search
← Older editNewer edit →
Jack (talk | contribs)
Bureaucrats, Game data editors, Interface administrators, Administrators
1,482 edits
Wiki Rework: Special:Search - collapse duplicate search-box widget; fix selected-tab sprite seam (dark mode)
Wiki Rework: widen Special:Search bar + centre icon + button at end; restore tab sprite, remove tab text-shadow for uniform text
Line 532: Line 532:
/* =============================================================
/* =============================================================
   Special:Search polishing (Wiki Rework, 2026-07-02)
   Special:Search polishing (Wiki Rework, 2026-07-02)
   [2] The OOUI search widget (#searchText) drew its own grey box behind
   - The OOUI search widget drew its own grey box behind the offset
  the actual <input>, which sat offset inside it — reading as two
    <input> (read as two overlapping bars). Collapse that box and let
  overlapping search bars. Collapse the widget box so only the input
    the input fill the field, so the Search button sits at the bar's end.
   renders as a single search bar. (Both themes.)
   - Vertically centre the magnifier icon within the input.
   [1] The selected namespace tab ("Special page") used a background
   - The selected "Special page" tab keeps its ORIGINAL sprite styling;
  sprite whose seam showed through the thin "l" glyph as a lighter
    only its near-white text-shadow is removed so the text (esp. the
  streak. In dark mode, drop the sprite for a flat navy pill + white
    thin "l") reads as one uniform colour.
  text (matches the dark theme and removes the seam).
   ============================================================= */
   ============================================================= */
.mw-special-Search #searchText.oo-ui-inputWidget {
.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;
   background: transparent !important;
   border: none !important;
   border: none !important;
   box-shadow: none !important;
   box-shadow: none !important;
}
}
html.wows-theme-dark .mw-special-Search #p-namespaces li.selected a,
.mw-special-Search #searchText .oo-ui-inputWidget-input {
html.wows-theme-dark .mw-special-Search #ca-nstab-special a {
  width: 100% !important;
   background-image: none !important;
  max-width: none !important;
   background-color: #1a3244 !important;
  box-sizing: border-box !important;
   color: #ffffff !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;
}
}

Revision as of 18:34, 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;
}
Retrieved from "https://wiki.worldofwarships.com/index.php?title=MediaWiki:Common.css&oldid=35656"