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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* ============================================
   ZNY Wiki Dark Theme + SOP Table Styling
   Matches wiki.nyartcc.org dark theme
   ============================================ */

/* --- Global Dark Theme --- */
:root {
    --zny-bg: #0f172a;
    --zny-bg-surface: #1e293b;
    --zny-bg-elevated: #334155;
    --zny-text: #e2e8f0;
    --zny-text-muted: #94a3b8;
    --zny-accent: #4fc3f7;
    --zny-accent-hover: #81d4fa;
    --zny-border: #334155;
    --zny-link: #4fc3f7;
    --zny-link-visited: #80cbc4;
    --zny-link-hover: #81d4fa;
    --zny-header-bg: #1a1a2e;
    --zny-tab-active-bg: #1e293b;
}

/* Page background */
body, .mw-page-container {
    background-color: var(--zny-bg) !important;
    color: var(--zny-text) !important;
}

.mw-body, .vector-body {
    background-color: var(--zny-bg) !important;
    color: var(--zny-text) !important;
}

/* Content area */
.mw-body-content {
    color: var(--zny-text);
}

/* Links */
.mw-body-content a:not(.new) {
    color: var(--zny-link);
}
.mw-body-content a:visited {
    color: var(--zny-link-visited);
}
.mw-body-content a:hover {
    color: var(--zny-link-hover);
}
.mw-body-content a.new {
    color: #ef5350;
}

/* Headings */
.mw-body-content h1, .mw-body-content h2, .mw-body-content h3,
.mw-body-content h4, .mw-body-content h5 {
    color: #fff;
    border-bottom-color: var(--zny-border);
}

.mw-first-heading {
    color: #fff !important;
}

/* --- Vector 2022 specific overrides --- */
.vector-header-container,
.vector-header,
.mw-header {
    background-color: var(--zny-bg) !important;
    border-bottom-color: var(--zny-border) !important;
}

/* Sidebar / TOC */
.vector-toc, .vector-toc-landmark,
.sidebar-toc,
.vector-column-start {
    background-color: var(--zny-bg) !important;
}

.vector-toc .vector-toc-text,
.sidebar-toc .sidebar-toc-text,
.vector-toc a {
    color: var(--zny-text-muted) !important;
}
.vector-toc a:hover,
.sidebar-toc a:hover {
    color: var(--zny-accent) !important;
}
.vector-toc .vector-toc-list-item-active > .vector-toc-link .vector-toc-text {
    color: var(--zny-accent) !important;
}

/* Search */
.vector-search-box-input, .cdx-text-input__input {
    background-color: var(--zny-bg-surface) !important;
    color: var(--zny-text) !important;
    border-color: var(--zny-border) !important;
}

/* Tabs (Page / Discussion / Read / Edit) */
.mw-portlet-views a,
.mw-portlet-namespaces a,
.vector-tabs a {
    color: var(--zny-text-muted) !important;
}
.vector-tabs .selected a,
.mw-portlet-views .selected a {
    color: var(--zny-accent) !important;
}

/* Footer */
.mw-footer {
    background-color: var(--zny-bg) !important;
    color: var(--zny-text-muted) !important;
    border-top-color: var(--zny-border) !important;
}

/* --- SOP Table Styling --- */
.table.table-sop {
    width: 100%;
    border-collapse: collapse;
    background: var(--zny-bg-surface);
    border: 1px solid var(--zny-border);
    border-radius: 4px;
    margin: 0.75em 0;
    color: var(--zny-text);
}

.table.table-sop th {
    background: var(--zny-bg-elevated);
    color: #fff;
    padding: 0.6em 0.75em;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--zny-accent);
    font-size: 0.9em;
}

.table.table-sop td {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid var(--zny-border);
    vertical-align: top;
}

.table.table-sop tr:last-child td {
    border-bottom: none;
}

.table.table-sop tr:hover td {
    background: rgba(79, 195, 247, 0.05);
}

/* Compact variant */
.table.table-sop-compact {
    font-size: 0.9em;
}

.table.table-sop-compact td,
.table.table-sop-compact th {
    padding: 0.35em 0.6em;
}

/* Operational positions table (wider) */
.table.table-sop-operational-positions {
    table-layout: auto;
}

/* --- Tabber Dark Styling --- */
.tabber .tabbernav {
    border-bottom: 2px solid var(--zny-border);
    margin-bottom: 0;
    padding: 0;
}

.tabber .tabbernav li {
    margin: 0;
}

.tabber .tabbernav li a {
    background: transparent;
    color: var(--zny-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5em 1em;
    margin-bottom: -2px;
    font-size: 0.9em;
}

.tabber .tabbernav li a:hover {
    color: var(--zny-accent);
    background: rgba(79, 195, 247, 0.05);
}

.tabber .tabbernav li.tabberactive a {
    color: var(--zny-accent);
    border-bottom-color: var(--zny-accent);
    background: transparent;
}

.tabber .tabbertab {
    background: var(--zny-bg-surface);
    border: 1px solid var(--zny-border);
    border-top: none;
    padding: 1em;
    border-radius: 0 0 4px 4px;
}

/* --- Collapsible (mw-collapsible) Dark Styling --- */
.mw-collapsible-toggle {
    color: var(--zny-accent) !important;
}

/* --- Section edit links --- */
.mw-editsection a {
    color: var(--zny-text-muted) !important;
}

/* --- Infoboxes / notice boxes --- */
.mw-message-box, .warningbox, .errorbox, .successbox {
    background: var(--zny-bg-surface) !important;
    color: var(--zny-text) !important;
    border-color: var(--zny-border) !important;
}

/* --- Category links --- */
.catlinks {
    background: var(--zny-bg-surface) !important;
    border-color: var(--zny-border) !important;
    color: var(--zny-text-muted) !important;
}

/* Standard wiki tables (wikitable) */
.wikitable {
    background: var(--zny-bg-surface) !important;
    color: var(--zny-text) !important;
    border-color: var(--zny-border) !important;
}
.wikitable th {
    background: var(--zny-bg-elevated) !important;
    color: #fff !important;
    border-color: var(--zny-border) !important;
}
.wikitable td {
    border-color: var(--zny-border) !important;
}

/* User menu + tools */
.vector-menu-content, .vector-dropdown-content {
    background: var(--zny-bg-surface) !important;
    border-color: var(--zny-border) !important;
}
.vector-menu-content a,
.vector-dropdown-content a {
    color: var(--zny-text) !important;
}
.vector-menu-content a:hover,
.vector-dropdown-content a:hover {
    background: var(--zny-bg-elevated) !important;
    color: var(--zny-accent) !important;
}

/* Logo / site name */
.mw-logo-wordmark, .vector-menu-heading {
    color: var(--zny-text) !important;
}

/* Progress bar (top accent line from new wiki) */
.mw-body::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--zny-accent), #4dd0e1, var(--zny-accent));
    margin-bottom: 1em;
}

/* Scrollbar for dark theme */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--zny-bg); }
::-webkit-scrollbar-thumb { background: var(--zny-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--zny-text-muted); }

/* --- Sticky header dark --- */
.vector-sticky-header {
    background: var(--zny-bg) !important;
    border-bottom-color: var(--zny-border) !important;
}
.vector-sticky-header a {
    color: var(--zny-text) !important;
}

/* Stub template placeholders */
.sop-stub {
    background: var(--zny-bg-surface);
    border: 1px solid var(--zny-border);
    padding: 1em;
    border-radius: 4px;
    margin: 0.5em 0;
    color: var(--zny-text-muted);
    font-style: italic;
}