|
|
| (10 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| /* ============================================
| |
| ZNY Wiki Dark Theme + SOP Table Styling
| |
| Matches wiki.nyartcc.org dark theme
| |
| ============================================ */
| |
|
| |
|
| /* --- Global Dark Theme --- */ | | /* NYARTCC Logo - auto-invert for dark/light mode */ |
| :root {
| | .skin-theme-clientpref-night .mw-logo-icon, |
| --zny-bg: #0f172a;
| | .skin-theme-clientpref-night .mw-logo-wordmark { |
| --zny-bg-surface: #1e293b;
| | filter: invert(1); |
| --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;
| |
| } | | } |
| | | .skin-theme-clientpref-os .mw-logo-icon, |
| /* Page background */
| | .skin-theme-clientpref-os .mw-logo-wordmark { |
| body, .mw-page-container {
| | filter: none; |
| 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;
| |
| } | | } |
| | | @media (prefers-color-scheme: dark) { |
| /* --- Tabber Dark Styling --- */
| | .skin-theme-clientpref-os .mw-logo-icon, |
| .tabber .tabbernav {
| | .skin-theme-clientpref-os .mw-logo-wordmark { |
| border-bottom: 2px solid var(--zny-border);
| | filter: invert(1); |
| 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;
| |
| } | | } |
