MediaWiki:Common.css - Revision history

CSWikiAdmin: Add CSS for map screenshots, weapon images, skin galleries, collection tables

2026-02-24T14:36:13Z

Add CSS for map screenshots, weapon images, skin galleries, collection tables

@@ Line 1,037: / Line 1,037: @@
      .cs-grid { grid-template-columns: 1fr; gap: 12px; }
      .cs-stats { flex-direction: column; gap: 8px; }
+}

CSWikiAdmin: Design: switch to light editorial theme with Outfit + DM Sans

2026-02-24T12:20:09Z

Design: switch to light editorial theme with Outfit + DM Sans

@@ Line 853: / Line 853: @@
 .mw-spinner, .cdx-progress-bar { border-color: var(--cs-accent) !important; }
 /* ============================================================
@@ Line 860: / Line 876: @@
      text-align: center;
      padding: 2.5em 1em 1.5em;
-     margin: -2em -2.5em 2em;
+     margin: 0 -2.5em 2em;
      background: linear-gradient(135deg, var(--cs-bg-header) 0%, #2a2f36 100%);
      border-radius: var(--cs-radius-lg) var(--cs-radius-lg) 0 0;
@@ Line 1,005: / Line 1,021: @@
      h1, .mw-first-heading { font-size: 1.7em !important; }
      h2 { font-size: 1.25em !important; }
-     .cs-hero { margin: -1.5em -1.5em 1.5em; padding: 2em 1em 1.2em; }
+     .cs-hero { margin: 0 -1.5em 1.5em; padding: 2em 1em 1.2em; }
      .cs-hero h1 { font-size: 1.8em !important; }
+}
@@ Line 1,017: / Line 1,033: @@
      h1, .mw-first-heading { font-size: 1.4em !important; }
      h2 { font-size: 1.1em !important; }
-     .cs-hero { margin: -1em -1em 1em; padding: 1.5em 0.75em 1em; border-radius: 0; }
+     .cs-hero { margin: 0 -1em 1em; padding: 1.5em 0.75em 1em; border-radius: 0; }
      .cs-hero h1 { font-size: 1.5em !important; }
      .cs-grid { grid-template-columns: 1fr; gap: 12px; }
      .cs-stats { flex-direction: column; gap: 8px; }
+}

CSWikiAdmin: Add CSS for skin page images

2026-02-23T21:23:15Z

Add CSS for skin page images

@@ Line 1,021: / Line 1,021: @@
      .cs-grid { grid-template-columns: 1fr; gap: 12px; }
      .cs-stats { flex-direction: column; gap: 8px; }
+}

CSWikiAdmin: Design: switch to light editorial theme with Outfit + DM Sans

2026-02-23T21:05:27Z

Design: switch to light editorial theme with Outfit + DM Sans

Show changes

Admin: Fix contrast: brighten --cs2-text-muted from #6a7a8a to #8a9aaa for WCAG AA compliance

2026-02-21T16:03:43Z

Fix contrast: brighten --cs2-text-muted from #6a7a8a to #8a9aaa for WCAG AA compliance

Show changes

Maintenance script at 16:00, 21 February 2026

2026-02-21T16:00:43Z

Show changes

Maintenance script: Add CS2 dark theme

2026-02-21T15:01:05Z

Add CS2 dark theme

New page

/* ============================================================
COUNTER-STRIKE WIKI — CS2 DARK THEME
Custom CSS for MediaWiki Vector 2022 Skin
============================================================ */

/* ---- Google Fonts Import ---- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

/* ============================================================
CSS CUSTOM PROPERTIES (Variables)
============================================================ */
:root {
/* Core palette */
--cs2-bg-dark: #0f1923;
--cs2-bg-content: #14202e;
--cs2-bg-card: #1a2a3a;
--cs2-bg-elevated: #1e3045;
--cs2-accent-gold: #de9b35;
--cs2-accent-gold-hover: #f0b04a;
--cs2-accent-ct-blue: #4b93d1;
--cs2-accent-t-gold: #dea83b;
--cs2-text-primary: #e0e0e0;
--cs2-text-secondary: #a0a8b0;
--cs2-text-muted: #6a7a8a;
--cs2-link: #5b9fd4;
--cs2-link-visited: #7baed4;
--cs2-link-hover: #de9b35;
--cs2-border: #2a3a4a;
--cs2-border-light: #354555;
--cs2-border-accent: #3a5060;
--cs2-shadow: rgba(0, 0, 0, 0.4);
--cs2-scrollbar-track: #0f1923;
--cs2-scrollbar-thumb: #2a3a4a;
--cs2-scrollbar-thumb-hover: #3a5060;

/* Font stacks */
--cs2-font-heading: 'Rajdhani', 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--cs2-font-body: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
GLOBAL / HTML / BODY
============================================================ */
html,
body {
background-color: var(--cs2-bg-dark) !important;
color: var(--cs2-text-primary) !important;
}

body {
background-image:
radial-gradient(ellipse at 20% 50%, rgba(75, 147, 209, 0.03) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(222, 155, 53, 0.03) 0%, transparent 50%),
linear-gradient(180deg, #0f1923 0%, #0d1520 100%) !important;
background-attachment: fixed !important;
}

/* ============================================================
VECTOR 2022 — PAGE CONTAINER & LAYOUT
============================================================ */
.mw-page-container,
.mw-page-container-inner {
background-color: transparent !important;
}

/* Main content column */
.mw-body,
.vector-body,
#bodyContent,
#content,
.mw-body-content {
background-color: var(--cs2-bg-content) !important;
color: var(--cs2-text-primary) !important;
border-color: var(--cs2-border) !important;
}

/* Content wrapper with subtle border */
.mw-body {
border: 1px solid var(--cs2-border) !important;
border-radius: 4px;
padding: 1.5em 2em !important;
box-shadow: 0 2px 12px var(--cs2-shadow);
}

/* ============================================================
HEADER BAR
============================================================ */
.vector-header-container,
.vector-header,
.mw-header,
header.vector-header {
background-color: var(--cs2-bg-dark) !important;
border-bottom: 1px solid var(--cs2-border) !important;
}

.vector-header-container .mw-header {
background-color: transparent !important;
}

/* Site name / wordmark */
.mw-logo-wordmark,
.vector-menu-heading,
.mw-wiki-title {
color: var(--cs2-accent-gold) !important;
font-family: var(--cs2-font-heading) !important;
font-weight: 700 !important;
}

/* Hide "change your logo" placeholder */
.mw-logo-icon[src*="change-your-logo"],
img[src*="change-your-logo"],
.mw-logo a[href] img[src*="change-your-logo"] {
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}

/* ============================================================
SIDEBAR / NAVIGATION PANEL
============================================================ */
#mw-panel,
.vector-main-menu,
.vector-main-menu-container,
nav.vector-main-menu-landmark,
.vector-column-start,
.vector-sidebar {
background-color: var(--cs2-bg-dark) !important;
}

.vector-main-menu .vector-menu-heading,
.vector-sidebar .vector-menu-heading,
.vector-main-menu-group .vector-menu-heading,
.sidebar-toc .sidebar-toc-header {
color: var(--cs2-accent-gold) !important;
font-family: var(--cs2-font-heading) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
font-size: 0.85em !important;
}

.vector-main-menu .vector-menu-content-list a,
.vector-sidebar a,
nav.vector-main-menu-landmark a,
.mw-panel a {
color: var(--cs2-text-secondary) !important;
transition: color 0.15s ease !important;
}

.vector-main-menu .vector-menu-content-list a:hover,
.vector-sidebar a:hover,
nav.vector-main-menu-landmark a:hover,
.mw-panel a:hover {
color: var(--cs2-accent-gold) !important;
text-decoration: none !important;
}

/* ============================================================
TABLE OF CONTENTS (Sidebar TOC in Vector 2022)
============================================================ */
.vector-toc,
.sidebar-toc,
.vector-toc-landmark,
#vector-toc-pinned-container,
.vector-column-start .sidebar-toc {
background-color: var(--cs2-bg-dark) !important;
border-color: var(--cs2-border) !important;
}

.sidebar-toc .sidebar-toc-header,
.vector-toc .vector-toc-heading {
color: var(--cs2-accent-gold) !important;
font-family: var(--cs2-font-heading) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}

.sidebar-toc .sidebar-toc-list-item a,
.vector-toc .vector-toc-list-item a {
color: var(--cs2-text-secondary) !important;
border-left-color: var(--cs2-border) !important;
transition: color 0.15s ease, border-left-color 0.15s ease !important;
}

.sidebar-toc .sidebar-toc-list-item a:hover,
.vector-toc .vector-toc-list-item a:hover {
color: var(--cs2-link-hover) !important;
border-left-color: var(--cs2-accent-gold) !important;
}

.sidebar-toc .sidebar-toc-list-item-active > a,
.vector-toc .sidebar-toc-list-item-active > a {
color: var(--cs2-accent-gold) !important;
border-left-color: var(--cs2-accent-gold) !important;
font-weight: 600 !important;
}

/* In-content TOC (legacy or fallback) */
#toc,
.toc,
.toctogglecheckbox + .toctitle,
.mw-parser-output .toc {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
border-radius: 4px !important;
padding: 1em 1.5em !important;
color: var(--cs2-text-primary) !important;
}

#toc .toctitle,
.toc .toctitle {
font-family: var(--cs2-font-heading) !important;
color: var(--cs2-accent-gold) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}

#toc a,
.toc a {
color: var(--cs2-link) !important;
}

#toc a:hover,
.toc a:hover {
color: var(--cs2-link-hover) !important;
}

/* ============================================================
TYPOGRAPHY
============================================================ */
.mw-body,
.mw-body-content,
.vector-body {
font-family: var(--cs2-font-body) !important;
font-size: 15px !important;
line-height: 1.65 !important;
}

/* Headings — override Vector serif to CS2 tactical sans-serif */
h1, h2, h3, h4, h5, h6,
.mw-body h1, .mw-body h2, .mw-body h3,
.mw-body h4, .mw-body h5, .mw-body h6,
.mw-heading h1, .mw-heading h2, .mw-heading h3,
.mw-heading h4, .mw-heading h5, .mw-heading h6,
.mw-body-content h1, .mw-body-content h2, .mw-body-content h3 {
font-family: var(--cs2-font-heading) !important;
color: var(--cs2-text-primary) !important;
border-bottom-color: var(--cs2-border) !important;
}

/* H1 — Page title: large, bold, with accent underline */
h1,
.mw-body h1,
.mw-first-heading,
.mw-body .mw-first-heading {
font-size: 2.2em !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
border-bottom: 2px solid var(--cs2-accent-gold) !important;
padding-bottom: 0.3em !important;
margin-bottom: 0.6em !important;
color: #ffffff !important;
}

/* H2 — Section headings: uppercase tactical style */
h2,
.mw-body h2,
.mw-heading2,
.mw-body .mw-heading2 h2 {
font-size: 1.5em !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
border-bottom: 1px solid var(--cs2-border) !important;
padding-bottom: 0.25em !important;
margin-top: 1.5em !important;
color: var(--cs2-text-primary) !important;
}

/* H3-H6 */
h3, .mw-body h3 {
font-size: 1.2em !important;
font-weight: 600 !important;
color: var(--cs2-accent-ct-blue) !important;
}

h4, .mw-body h4 {
font-size: 1.05em !important;
font-weight: 600 !important;
color: var(--cs2-text-secondary) !important;
}

/* ============================================================
LINKS
============================================================ */
a,
.mw-body a,
.mw-body-content a,
.vector-body a {
color: var(--cs2-link) !important;
transition: color 0.15s ease !important;
}

a:visited,
.mw-body a:visited,
.vector-body a:visited {
color: var(--cs2-link-visited) !important;
}

a:hover,
a:focus,
.mw-body a:hover,
.mw-body-content a:hover,
.vector-body a:hover {
color: var(--cs2-link-hover) !important;
text-decoration: underline !important;
}

/* Red links (non-existent pages) */
a.new,
.mw-body a.new {
color: #c44a4a !important;
}

a.new:hover {
color: #e05555 !important;
}

/* External links */
.mw-body-content a.external {
color: var(--cs2-link) !important;
}

.mw-body-content a.external:hover {
color: var(--cs2-link-hover) !important;
}

/* ============================================================
INFOBOXES & CARDS
============================================================ */
.infobox,
.wikitable.infobox,
table.infobox,
.sidebar,
.mw-parser-output .infobox {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
border-radius: 4px !important;
color: var(--cs2-text-primary) !important;
box-shadow: 0 2px 8px var(--cs2-shadow) !important;
}

.infobox th,
table.infobox th {
background-color: var(--cs2-bg-elevated) !important;
color: var(--cs2-accent-gold) !important;
border-color: var(--cs2-border) !important;
font-family: var(--cs2-font-heading) !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}

.infobox td,
table.infobox td {
border-color: var(--cs2-border) !important;
color: var(--cs2-text-primary) !important;
}

/* ============================================================
TABLES (wikitables)
============================================================ */
.wikitable,
table.wikitable,
.mw-parser-output table.wikitable {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
border-collapse: collapse !important;
color: var(--cs2-text-primary) !important;
}

.wikitable th,
table.wikitable th {
background-color: var(--cs2-bg-elevated) !important;
color: var(--cs2-accent-gold) !important;
border-color: var(--cs2-border) !important;
font-family: var(--cs2-font-heading) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
padding: 8px 12px !important;
}

.wikitable td,
table.wikitable td {
background-color: var(--cs2-bg-content) !important;
border-color: var(--cs2-border) !important;
color: var(--cs2-text-primary) !important;
padding: 6px 12px !important;
}

.wikitable tr:nth-child(even) td {
background-color: var(--cs2-bg-card) !important;
}

.wikitable tr:hover td {
background-color: var(--cs2-bg-elevated) !important;
}

/* ============================================================
CATEGORY LINKS
============================================================ */
.catlinks,
#catlinks,
.mw-normal-catlinks {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
border-radius: 4px !important;
color: var(--cs2-text-secondary) !important;
padding: 0.75em 1em !important;
margin-top: 1.5em !important;
}

.catlinks a {
color: var(--cs2-link) !important;
}

.catlinks a:hover {
color: var(--cs2-link-hover) !important;
}

/* ============================================================
SEARCH BAR
============================================================ */
.mw-search-input,
#searchInput,
.cdx-text-input__input,
.vector-search-box-input,
.cdx-text-input input,
input.cdx-text-input__input,
.vector-search-box .cdx-text-input__input {
background-color: var(--cs2-bg-card) !important;
color: var(--cs2-text-primary) !important;
border: 1px solid var(--cs2-border) !important;
border-radius: 4px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mw-search-input:focus,
#searchInput:focus,
.cdx-text-input__input:focus,
.vector-search-box-input:focus,
input.cdx-text-input__input:focus {
border-color: var(--cs2-accent-ct-blue) !important;
box-shadow: 0 0 0 2px rgba(75, 147, 209, 0.25) !important;
outline: none !important;
}

.cdx-text-input__input::placeholder,
.vector-search-box-input::placeholder {
color: var(--cs2-text-muted) !important;
}

/* Search suggestions dropdown */
.cdx-menu,
.cdx-typeahead-search__menu,
.suggestions,
.suggestions-results,
.cdx-menu__listbox {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
color: var(--cs2-text-primary) !important;
box-shadow: 0 4px 16px var(--cs2-shadow) !important;
}

.cdx-menu-item,
.cdx-menu-item--enabled,
.suggestions-result {
color: var(--cs2-text-primary) !important;
}

.cdx-menu-item:hover,
.cdx-menu-item--highlighted,
.suggestions-result-current {
background-color: var(--cs2-bg-elevated) !important;
color: var(--cs2-accent-gold) !important;
}

.cdx-search-result-title__match,
.cdx-menu-item__text__description {
color: var(--cs2-text-secondary) !important;
}

/* Search button */
.cdx-button,
.searchButton,
button.cdx-button {
background-color: var(--cs2-bg-elevated) !important;
color: var(--cs2-text-primary) !important;
border: 1px solid var(--cs2-border) !important;
transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.cdx-button:hover,
.searchButton:hover,
button.cdx-button:hover {
background-color: var(--cs2-border-accent) !important;
border-color: var(--cs2-accent-ct-blue) !important;
}

/* ============================================================
TABS / PAGE ACTIONS (Read, Edit, History, etc.)
============================================================ */
.vector-menu-tabs,
.vector-menu-tabs .mw-list-item,
#p-views,
.vector-page-tools {
background-color: transparent !important;
}

.vector-menu-tabs a,
.vector-menu-tabs .mw-list-item a,
#p-views a,
.vector-page-tools a {
color: var(--cs2-text-secondary) !important;
transition: color 0.15s ease !important;
}

.vector-menu-tabs a:hover,
.vector-menu-tabs .mw-list-item a:hover,
#p-views a:hover {
color: var(--cs2-accent-gold) !important;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .mw-list-item.selected a,
#p-views li.selected a {
color: var(--cs2-accent-gold) !important;
border-bottom-color: var(--cs2-accent-gold) !important;
font-weight: 600 !important;
}

/* ============================================================
USER MENU / PERSONAL TOOLS
============================================================ */
.vector-user-menu,
#p-personal,
.vector-menu-content {
background-color: var(--cs2-bg-card) !important;
border-color: var(--cs2-border) !important;
color: var(--cs2-text-primary) !important;
}

.vector-user-menu a,
#p-personal a {
color: var(--cs2-text-secondary) !important;
}

.vector-user-menu a:hover,
#p-personal a:hover {
color: var(--cs2-accent-gold) !important;
}

/* Dropdown menus */
.vector-menu-content,
.vector-dropdown-content {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
box-shadow: 0 4px 16px var(--cs2-shadow) !important;
}

.vector-menu-content li a,
.vector-dropdown-content li a {
color: var(--cs2-text-secondary) !important;
}

.vector-menu-content li a:hover,
.vector-dropdown-content li a:hover {
color: var(--cs2-accent-gold) !important;
background-color: var(--cs2-bg-elevated) !important;
}

/* ============================================================
FOOTER
============================================================ */
#footer,
footer,
.mw-footer,
.vector-footer-container {
background-color: var(--cs2-bg-dark) !important;
border-top: 1px solid var(--cs2-border) !important;
color: var(--cs2-text-muted) !important;
}

#footer a,
.mw-footer a {
color: var(--cs2-text-secondary) !important;
}

#footer a:hover,
.mw-footer a:hover {
color: var(--cs2-accent-gold) !important;
}

/* ============================================================
CONTENT ELEMENTS
============================================================ */

/* Blockquotes */
blockquote {
border-left: 3px solid var(--cs2-accent-gold) !important;
background-color: var(--cs2-bg-card) !important;
padding: 0.75em 1.25em !important;
color: var(--cs2-text-secondary) !important;
border-radius: 0 4px 4px 0 !important;
}

/* Code / Pre */
code,
pre,
.mw-code,
.mw-highlight {
background-color: var(--cs2-bg-card) !important;
color: var(--cs2-accent-ct-blue) !important;
border: 1px solid var(--cs2-border) !important;
border-radius: 3px !important;
}

pre,
.mw-code {
padding: 1em !important;
}

code {
padding: 0.15em 0.4em !important;
}

/* Horizontal rules */
hr {
border-color: var(--cs2-border) !important;
}

/* Definition lists */
dd {
color: var(--cs2-text-secondary) !important;
}

dt {
color: var(--cs2-text-primary) !important;
font-weight: 600 !important;
}

/* ============================================================
EDIT PAGE / SOURCE EDITOR
============================================================ */
.editOptions,
#editform,
.mw-editform {
background-color: var(--cs2-bg-content) !important;
}

textarea,
.mw-editfont-monospace,
#wpTextbox1 {
background-color: var(--cs2-bg-card) !important;
color: var(--cs2-text-primary) !important;
border: 1px solid var(--cs2-border) !important;
border-radius: 4px !important;
font-family: 'Consolas', 'Monaco', monospace !important;
}

textarea:focus,
#wpTextbox1:focus {
border-color: var(--cs2-accent-ct-blue) !important;
box-shadow: 0 0 0 2px rgba(75, 147, 209, 0.2) !important;
outline: none !important;
}

/* Edit toolbar buttons */
.oo-ui-widget,
.oo-ui-buttonElement-button {
background-color: var(--cs2-bg-card) !important;
color: var(--cs2-text-primary) !important;
border-color: var(--cs2-border) !important;
}

/* ============================================================
SPECIAL PAGES / FORMS
============================================================ */
.mw-special-Recentchanges,
.mw-special-Allpages,
.mw-special-Search {
color: var(--cs2-text-primary) !important;
}

fieldset {
border-color: var(--cs2-border) !important;
}

legend {
color: var(--cs2-accent-gold) !important;
font-family: var(--cs2-font-heading) !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
select {
background-color: var(--cs2-bg-card) !important;
color: var(--cs2-text-primary) !important;
border: 1px solid var(--cs2-border) !important;
border-radius: 3px !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus {
border-color: var(--cs2-accent-ct-blue) !important;
outline: none !important;
}

/* Submit buttons */
input[type="submit"],
button[type="submit"],
.mw-ui-button,
.cdx-button--action-progressive {
background-color: var(--cs2-accent-gold) !important;
color: #0f1923 !important;
border: none !important;
border-radius: 3px !important;
font-family: var(--cs2-font-heading) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
padding: 0.5em 1.2em !important;
cursor: pointer !important;
transition: background-color 0.15s ease !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.mw-ui-button:hover,
.cdx-button--action-progressive:hover {
background-color: var(--cs2-accent-gold-hover) !important;
}

/* ============================================================
NOTICES / MESSAGE BOXES
============================================================ */
.mw-message-box,
.warningbox,
.errorbox,
.successbox,
.mbox-small,
table.ambox {
background-color: var(--cs2-bg-card) !important;
border-color: var(--cs2-border) !important;
color: var(--cs2-text-primary) !important;
}

.warningbox,
table.ambox-content {
border-left-color: var(--cs2-accent-gold) !important;
}

.errorbox {
border-left-color: #c44a4a !important;
}

.successbox {
border-left-color: #4a9a5a !important;
}

/* Site notice */
#siteNotice,
.mw-dismissable-notice {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
color: var(--cs2-text-primary) !important;
border-radius: 4px !important;
}

/* ============================================================
DIFF VIEW
============================================================ */
.diff,
table.diff {
background-color: var(--cs2-bg-content) !important;
color: var(--cs2-text-primary) !important;
}

.diff-context {
background-color: var(--cs2-bg-content) !important;
color: var(--cs2-text-secondary) !important;
}

.diff-addedline {
background-color: rgba(74, 154, 90, 0.15) !important;
color: var(--cs2-text-primary) !important;
}

.diff-deletedline {
background-color: rgba(196, 74, 74, 0.15) !important;
color: var(--cs2-text-primary) !important;
}

.diffchange {
font-weight: bold !important;
}

td.diff-marker {
color: var(--cs2-text-muted) !important;
}

/* ============================================================
THUMBNAILS / IMAGES
============================================================ */
.thumb,
.thumbinner {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
border-radius: 4px !important;
}

.thumbcaption {
color: var(--cs2-text-secondary) !important;
font-size: 0.9em !important;
padding: 4px 8px !important;
}

.gallerybox {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
}

.gallerytext {
color: var(--cs2-text-secondary) !important;
}

/* ============================================================
SCROLLBAR STYLING (WebKit + Firefox)
============================================================ */

/* WebKit browsers */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background: var(--cs2-scrollbar-track);
}

::-webkit-scrollbar-thumb {
background: var(--cs2-scrollbar-thumb);
border-radius: 5px;
border: 2px solid var(--cs2-scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
background: var(--cs2-scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
background: var(--cs2-scrollbar-track);
}

/* Firefox */
html {
scrollbar-color: var(--cs2-scrollbar-thumb) var(--cs2-scrollbar-track);
scrollbar-width: thin;
}

/* ============================================================
SELECTION HIGHLIGHT
============================================================ */
::selection {
background-color: rgba(222, 155, 53, 0.3) !important;
color: #ffffff !important;
}

::-moz-selection {
background-color: rgba(222, 155, 53, 0.3) !important;
color: #ffffff !important;
}

/* ============================================================
STICKY HEADER (Vector 2022)
============================================================ */
.vector-sticky-header {
background-color: var(--cs2-bg-dark) !important;
border-bottom: 1px solid var(--cs2-border) !important;
box-shadow: 0 2px 8px var(--cs2-shadow) !important;
}

.vector-sticky-header a {
color: var(--cs2-text-secondary) !important;
}

.vector-sticky-header a:hover {
color: var(--cs2-accent-gold) !important;
}

.vector-sticky-header-context-bar__title {
color: var(--cs2-text-primary) !important;
}

/* ============================================================
MISC OVERRIDES & POLISH
============================================================ */

/* Hatnotes */
.hatnote,
.dablink {
color: var(--cs2-text-muted) !important;
font-style: italic !important;
}

/* Recent changes / watchlist */
.mw-changeslist-line,
.mw-changeslist {
color: var(--cs2-text-primary) !important;
}

/* Preferences */
.oo-ui-layout,
.oo-ui-panelLayout {
background-color: var(--cs2-bg-content) !important;
color: var(--cs2-text-primary) !important;
}

/* Popups (if using Popups extension) */
.mwe-popups,
.mwe-popups-container {
background-color: var(--cs2-bg-card) !important;
border: 1px solid var(--cs2-border) !important;
color: var(--cs2-text-primary) !important;
box-shadow: 0 4px 16px var(--cs2-shadow) !important;
}

/* Navigation icons — make them visible on dark bg */
.vector-icon,
.cdx-button-icon,
.mw-ui-icon {
filter: invert(0.8) !important;
}

/* Ensure SVG icons in header are visible */
.vector-header .vector-icon,
.vector-header .cdx-button-icon {
opacity: 0.8 !important;
}

.vector-header .vector-icon:hover,
.vector-header .cdx-button-icon:hover {
opacity: 1 !important;
}

/* Vector 2022 pinnable elements */
.vector-pinnable-header {
border-bottom-color: var(--cs2-border) !important;
}

.vector-pinnable-header-label {
color: var(--cs2-accent-gold) !important;
font-family: var(--cs2-font-heading) !important;
}

.vector-pinnable-header-toggle-button,
.vector-pinnable-header-unpin-button,
.vector-pinnable-header-pin-button {
color: var(--cs2-text-muted) !important;
}

/* Page info / metadata at bottom */
#contentSub,
#contentSub2 {
color: var(--cs2-text-muted) !important;
}

/* Interwiki / language links */
.mw-interlanguage-selector,
#p-lang .vector-menu-heading {
color: var(--cs2-text-secondary) !important;
}

/* Loading indicator */
.mw-spinner,
.cdx-progress-bar {
border-color: var(--cs2-accent-ct-blue) !important;
}

/* ============================================================
RESPONSIVE ADJUSTMENTS
============================================================ */
@media screen and (max-width: 1000px) {
.mw-body {
padding: 1em !important;
}

h1, .mw-first-heading {
font-size: 1.8em !important;
}

h2 {
font-size: 1.3em !important;
}
}

@media screen and (max-width: 720px) {
h1, .mw-first-heading {
font-size: 1.5em !important;
}

h2 {
font-size: 1.15em !important;
letter-spacing: 0.05em !important;
}

.mw-body {
border: none !important;
border-radius: 0 !important;
}
}