Toggle menu
7
505
3
1.1K
ZNY Wiki
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
v2: Work with Vector night mode, ZNY accent colors + SOP table styling
Light mode styling
Line 1: Line 1:
/* ============================================
/* ============================================
   ZNY Wiki — SOP Styling + Night Mode Tweaks
   ZNY Wiki — SOP Table Styling (Light Mode)
  Vector 2022 built-in night mode handles base dark theme
   ============================================ */
   ============================================ */


/* --- Accent color overrides (ZNY blue instead of Vector purple) --- */
/* --- SOP Tables --- */
html.skin-theme-clientpref-night {
    --color-progressive: #4fc3f7;
    --color-progressive--hover: #81d4fa;
    --color-progressive--active: #29b6f6;
}
 
/* --- SOP Table Styling --- */
.table.table-sop {
.table.table-sop {
     width: 100%;
     width: 100%;
     border-collapse: collapse;
     border-collapse: collapse;
     background: var(--background-color-neutral-subtle, #1e293b);
     background: #fff;
     border: 1px solid var(--border-color-base, #334155);
     border: 1px solid #d1d5db;
     border-radius: 4px;
     border-radius: 4px;
     margin: 0.75em 0;
     margin: 0.75em 0;
    color: #1f2937;
}
}


.table.table-sop th {
.table.table-sop th {
     background: var(--background-color-interactive, #334155);
     background: #f3f4f6;
     color: var(--color-inverted, #fff);
     color: #111827;
     padding: 0.6em 0.75em;
     padding: 0.6em 0.75em;
     text-align: left;
     text-align: left;
     font-weight: 600;
     font-weight: 600;
     border-bottom: 2px solid #4fc3f7;
     border-bottom: 2px solid #3b82f6;
     font-size: 0.9em;
     font-size: 0.9em;
}
}
Line 33: Line 26:
.table.table-sop td {
.table.table-sop td {
     padding: 0.5em 0.75em;
     padding: 0.5em 0.75em;
     border-bottom: 1px solid var(--border-color-base, #334155);
     border-bottom: 1px solid #e5e7eb;
     vertical-align: top;
     vertical-align: top;
}
}
Line 42: Line 35:


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


Line 54: Line 47:
}
}


/* Operational positions — auto width */
.table.table-sop-operational-positions {
.table.table-sop-operational-positions {
     table-layout: auto;
     table-layout: auto;
}
}


/* --- Tabber Overrides (dark-aware) --- */
/* --- Tabber --- */
html.skin-theme-clientpref-night .tabber .tabbernav {
.tabber .tabbernav {
     border-bottom: 2px solid #334155;
     border-bottom: 2px solid #e5e7eb;
}
}
html.skin-theme-clientpref-night .tabber .tabbernav li a {
.tabber .tabbernav li a {
     background: transparent;
     background: transparent;
     color: #94a3b8;
     color: #6b7280;
     border: none;
     border: none;
     border-bottom: 2px solid transparent;
     border-bottom: 2px solid transparent;
     padding: 0.5em 1em;
     padding: 0.5em 1em;
     margin-bottom: -2px;
     margin-bottom: -2px;
    font-size: 0.9em;
}
}
html.skin-theme-clientpref-night .tabber .tabbernav li a:hover {
.tabber .tabbernav li a:hover {
     color: #4fc3f7;
     color: #3b82f6;
}
}
html.skin-theme-clientpref-night .tabber .tabbernav li.tabberactive a {
.tabber .tabbernav li.tabberactive a {
     color: #4fc3f7;
     color: #3b82f6;
     border-bottom-color: #4fc3f7;
     border-bottom-color: #3b82f6;
}
}
html.skin-theme-clientpref-night .tabber .tabbertab {
.tabber .tabbertab {
     background: #1e293b;
     background: #fff;
     border: 1px solid #334155;
     border: 1px solid #e5e7eb;
     border-top: none;
     border-top: none;
     padding: 1em;
     padding: 1em;
Line 86: Line 79:
}
}


/* --- Accent bar at top of content area --- */
/* --- Accent bar at top of content --- */
.mw-body::before {
.mw-body::before {
     content: '';
     content: '';
     display: block;
     display: block;
     height: 3px;
     height: 3px;
     background: linear-gradient(90deg, #4fc3f7, #4dd0e1, #4fc3f7);
     background: linear-gradient(90deg, #3b82f6, #06b6d4, #3b82f6);
     margin-bottom: 1em;
     margin-bottom: 1em;
     border-radius: 2px;
     border-radius: 2px;
}
}


/* --- Collapsible toggle styling --- */
/* --- Collapsible toggle --- */
html.skin-theme-clientpref-night .mw-collapsible-toggle {
.mw-collapsible-toggle {
     color: #4fc3f7 !important;
     color: #3b82f6 !important;
}
}


/* --- Stub placeholder styling --- */
/* --- Stub placeholders --- */
.sop-stub {
.sop-stub {
     background: #1e293b;
     background: #f9fafb;
     border: 1px solid #334155;
     border: 1px solid #e5e7eb;
     padding: 1em;
     padding: 1em;
     border-radius: 4px;
     border-radius: 4px;
     margin: 0.5em 0;
     margin: 0.5em 0;
     color: #94a3b8;
     color: #6b7280;
     font-style: italic;
     font-style: italic;
}
}

Revision as of 23:32, 26 March 2026

/* ============================================
   ZNY Wiki — SOP Table Styling (Light Mode)
   ============================================ */

/* --- SOP Tables --- */
.table.table-sop {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    margin: 0.75em 0;
    color: #1f2937;
}

.table.table-sop th {
    background: #f3f4f6;
    color: #111827;
    padding: 0.6em 0.75em;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #3b82f6;
    font-size: 0.9em;
}

.table.table-sop td {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

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

.table.table-sop tr:hover td {
    background: #f0f9ff;
}

/* 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;
}

.table.table-sop-operational-positions {
    table-layout: auto;
}

/* --- Tabber --- */
.tabber .tabbernav {
    border-bottom: 2px solid #e5e7eb;
}
.tabber .tabbernav li a {
    background: transparent;
    color: #6b7280;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5em 1em;
    margin-bottom: -2px;
    font-size: 0.9em;
}
.tabber .tabbernav li a:hover {
    color: #3b82f6;
}
.tabber .tabbernav li.tabberactive a {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}
.tabber .tabbertab {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    padding: 1em;
    border-radius: 0 0 4px 4px;
}

/* --- Accent bar at top of content --- */
.mw-body::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #06b6d4, #3b82f6);
    margin-bottom: 1em;
    border-radius: 2px;
}

/* --- Collapsible toggle --- */
.mw-collapsible-toggle {
    color: #3b82f6 !important;
}

/* --- Stub placeholders --- */
.sop-stub {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 1em;
    border-radius: 4px;
    margin: 0.5em 0;
    color: #6b7280;
    font-style: italic;
}