|
|
| Line 1: |
Line 1: |
| /* ============================================================
| |
| 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;
| |
| }
| |
| }
| |
