MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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;
}
