MediaWiki:Common.css

From Counter-Strike 2 Wiki
Revision as of 16:03, 21 February 2026 by Admin (talk | contribs) (Fix contrast: brighten --cs2-text-muted from #6a7a8a to #8a9aaa for WCAG AA compliance)

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ============================================================
   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: #8a9aaa;
    --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;
    }
}
Retrieved from "https://counterstrikewiki.com/index.php?title=MediaWiki:Common.css&oldid=74"