Toggle search
Toggle menu
7
505
3
1.1K
New York ARTCC
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
Dark theme + SOP table styling to match new wiki
 
Fix Main Page header: add order:-1 to move heading above content (Citizen 2.40.2 pushes it to bottom with order:9999)
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* ============================================
/* CSS placed here will be applied to all skins */
  ZNY Wiki Dark Theme + SOP Table Styling
  Matches wiki.nyartcc.org dark theme
  ============================================ */


/* --- Global Dark Theme --- */
[data-event-name="tabs.talk"] { display:none!important; }
:root {
.mw-usertoollinks-talk { display:none!important; }
    --zny-bg: #0f172a;
.button.talk { display:none!important; }
    --zny-bg-surface: #1e293b;
li#language-selector { display: none; }
    --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 {
| NYARTCC Customizations
    background-color: var(--zny-bg) !important;
|
    color: var(--zny-text) !important;
| */
}


.mw-body, .vector-body {
.phraseology-wrapper {
     background-color: var(--zny-bg) !important;
     margin: 5px 0;
    color: var(--zny-text) !important;
}
}


/* Content area */
.phraseology,
.mw-body-content {
.phraseology_syntax,
     color: var(--zny-text);
.phraseology_example {
     color: #468847;
}
}


/* Links */
.ny-pull-left { float: left; }
.mw-body-content a:not(.new) {
.ny-pull-right { float: right; }
    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 */
.ny-flex { display: flex; flex-wrap: wrap; }
.mw-body-content h1, .mw-body-content h2, .mw-body-content h3,
.ny-flex div { flex-grow: 1; margin: 1em; }
.mw-body-content h4, .mw-body-content h5 {
    color: #fff;
    border-bottom-color: var(--zny-border);
}


.mw-first-heading {
.ny-badge {
     color: #fff !important;
    padding: 0.2em 0.6em 0.3em;
    font-size: 85%;
    font-weight: bold;
     border-radius: 0.25em;
}
}


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


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


.vector-toc .vector-toc-text,
/* - - - - - - - - -
.sidebar-toc .sidebar-toc-text,
| List Numbering Styles
.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 */
@counter-style para-lower-alpha {
.vector-search-box-input, .cdx-text-input__input {
     system: extends lower-alpha;
     background-color: var(--zny-bg-surface) !important;
     prefix: '(';
     color: var(--zny-text) !important;
     suffix: ') ';
     border-color: var(--zny-border) !important;
}
}


/* Tabs (Page / Discussion / Read / Edit) */
@counter-style para-lower-roman {
.mw-portlet-views a,
    system: extends lower-roman;
.mw-portlet-namespaces a,
     prefix: '(';
.vector-tabs a {
     suffix: ') ';
     color: var(--zny-text-muted) !important;
}
.vector-tabs .selected a,
.mw-portlet-views .selected a {
     color: var(--zny-accent) !important;
}
}


/* Footer */
ol { list-style-type: lower-alpha; }
.mw-footer {
ol li > ol { list-style-type: decimal; }
    background-color: var(--zny-bg) !important;
ol li > ol li > ol { list-style-type: para-lower-alpha; }
    color: var(--zny-text-muted) !important;
ol li > ol li > ol li > ol { list-style-type: para-lower-roman; }
    border-top-color: var(--zny-border) !important;
}


/* --- SOP Table Styling --- */
/* Legacy Citizen CSS variables (needed for SOPHeader template) */
.table.table-sop {
:root {
     width: 100%;
     --font-size-h1: 2rem;
    border-collapse: collapse;
     --font-size-h2: 1.5rem;
    background: var(--zny-bg-surface);
     --font-size-h3: 1.25rem;
     border: 1px solid var(--zny-border);
    border-radius: 4px;
    margin: 0.75em 0;
     color: var(--zny-text);
}
}


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


.table.table-sop td {
/* ShowHide inline fix — match source wiki rendering */
     padding: 0.5em 0.75em;
.showhide-container {
    border-bottom: 1px solid var(--zny-border);
     display: inline;
    vertical-align: top;
}
}
 
.showhide-toggle {
.table.table-sop tr:last-child td {
    display: inline;
     border-bottom: none;
     padding: 0;
}
}
 
.showhide-toggle pre {
.table.table-sop tr:hover td {
     display: inline;
     background: rgba(79, 195, 247, 0.05);
     background: none;
}
     border: none;
 
/* 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;
     padding: 0;
}
.tabber .tabbernav li {
     margin: 0;
     margin: 0;
    font-family: inherit;
    font-size: inherit;
    white-space: normal;
}
}
 
.showhide-content {
.tabber .tabbernav li a {
     display: none;
    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 --- */
/* Hide section edit links — match source wiki (Citizen 2.8.5 hides these) */
.catlinks {
.mw-editsection { display: none !important; }
    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 */
/* NYARTCC Logo - auto-invert for dark/light mode */
.vector-menu-content, .vector-dropdown-content {
.skin-theme-clientpref-night .mw-logo-icon,
    background: var(--zny-bg-surface) !important;
.skin-theme-clientpref-night .mw-logo-wordmark {
     border-color: var(--zny-border) !important;
     filter: invert(1);
}
}
.vector-menu-content a,
.skin-theme-clientpref-os .mw-logo-icon,
.vector-dropdown-content a {
.skin-theme-clientpref-os .mw-logo-wordmark {
     color: var(--zny-text) !important;
     filter: none;
}
}
.vector-menu-content a:hover,
@media (prefers-color-scheme: dark) {
.vector-dropdown-content a:hover {
    .skin-theme-clientpref-os .mw-logo-icon,
     background: var(--zny-bg-elevated) !important;
     .skin-theme-clientpref-os .mw-logo-wordmark {
    color: var(--zny-accent) !important;
        filter: invert(1);
    }
}
}


/* Logo / site name */
/* Show Main Page heading — Citizen 2.40.2 hides it and pushes header to bottom, source wiki (2.8.5) shows it at top */
.mw-logo-wordmark, .vector-menu-heading {
.page-Main_Page .citizen-page-heading {
     color: var(--zny-text) !important;
     display: block !important;
}
}
 
.page-Main_Page .citizen-page-header {
/* Progress bar (top accent line from new wiki) */
     order: -1 !important;
.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;
}
}

Latest revision as of 07:10, 27 March 2026

/* CSS placed here will be applied to all skins */

[data-event-name="tabs.talk"] { display:none!important; }
.mw-usertoollinks-talk { display:none!important; }
.button.talk { display:none!important; }
li#language-selector { display: none; }

/* - - - - - - - - -
| NYARTCC Customizations
|
| */

.phraseology-wrapper {
    margin: 5px 0;
}

.phraseology,
.phraseology_syntax,
.phraseology_example {
    color: #468847;
}

.ny-pull-left { float: left; }
.ny-pull-right { float: right; }

.ny-flex { display: flex; flex-wrap: wrap; }
.ny-flex div { flex-grow: 1; margin: 1em; }

.ny-badge {
    padding: 0.2em 0.6em 0.3em;
    font-size: 85%;
    font-weight: bold;
    border-radius: 0.25em;
}

.ny-warning {
    background-color: #e99002;
    color: #ffffff;
}

small {
    font-style: oblique;
}

/* - - - - - - - - -
| List Numbering Styles
|
| */

@counter-style para-lower-alpha {
    system: extends lower-alpha;
    prefix: '(';
    suffix: ') ';
}

@counter-style para-lower-roman {
    system: extends lower-roman;
    prefix: '(';
    suffix: ') ';
}

ol { list-style-type: lower-alpha; }
ol li > ol { list-style-type: decimal; }
ol li > ol li > ol { list-style-type: para-lower-alpha; }
ol li > ol li > ol li > ol { list-style-type: para-lower-roman; }

/* Legacy Citizen CSS variables (needed for SOPHeader template) */
:root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
}

/* SOPHeader heading text class */
.h-text {
    font-weight: 600;
}

/* ShowHide inline fix — match source wiki rendering */
.showhide-container {
    display: inline;
}
.showhide-toggle {
    display: inline;
    padding: 0;
}
.showhide-toggle pre {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    white-space: normal;
}
.showhide-content {
    display: none;
}

/* Hide section edit links — match source wiki (Citizen 2.8.5 hides these) */
.mw-editsection { display: none !important; }


/* NYARTCC Logo - auto-invert for dark/light mode */
.skin-theme-clientpref-night .mw-logo-icon,
.skin-theme-clientpref-night .mw-logo-wordmark {
    filter: invert(1);
}
.skin-theme-clientpref-os .mw-logo-icon,
.skin-theme-clientpref-os .mw-logo-wordmark {
    filter: none;
}
@media (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os .mw-logo-icon,
    .skin-theme-clientpref-os .mw-logo-wordmark {
        filter: invert(1);
    }
}

/* Show Main Page heading — Citizen 2.40.2 hides it and pushes header to bottom, source wiki (2.8.5) shows it at top */
.page-Main_Page .citizen-page-heading {
    display: block !important;
}
.page-Main_Page .citizen-page-header {
    order: -1 !important;
}
Retrieved from "https://wiki.vzny.org/index.php?title=MediaWiki:Common.css&oldid=1514"
Last modified
This page was last edited on 27 March 2026, at 07:10.