More actions
v2: Work with Vector night mode, ZNY accent colors + SOP table styling |
Light mode styling |
||
| Line 1: | Line 1: | ||
/* ============================================ | /* ============================================ | ||
ZNY Wiki — SOP Styling | ZNY Wiki — SOP Table Styling (Light Mode) | ||
============================================ */ | ============================================ */ | ||
/* --- SOP Tables --- */ | |||
/* --- SOP | |||
.table.table-sop { | .table.table-sop { | ||
width: 100%; | width: 100%; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
background: | background: #fff; | ||
border: 1px solid | 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: | background: #f3f4f6; | ||
color: | 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 # | 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 | 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: | background: #f0f9ff; | ||
} | } | ||
| Line 54: | Line 47: | ||
} | } | ||
.table.table-sop-operational-positions { | .table.table-sop-operational-positions { | ||
table-layout: auto; | table-layout: auto; | ||
} | } | ||
/* --- Tabber | /* --- Tabber --- */ | ||
.tabber .tabbernav { | |||
border-bottom: 2px solid # | border-bottom: 2px solid #e5e7eb; | ||
} | } | ||
.tabber .tabbernav li a { | |||
background: transparent; | background: transparent; | ||
color: # | 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; | |||
} | } | ||
.tabber .tabbernav li a:hover { | |||
color: # | color: #3b82f6; | ||
} | } | ||
.tabber .tabbernav li.tabberactive a { | |||
color: # | color: #3b82f6; | ||
border-bottom-color: # | border-bottom-color: #3b82f6; | ||
} | } | ||
.tabber .tabbertab { | |||
background: # | background: #fff; | ||
border: 1px solid # | border: 1px solid #e5e7eb; | ||
border-top: none; | border-top: none; | ||
padding: 1em; | padding: 1em; | ||
| Line 86: | Line 79: | ||
} | } | ||
/* --- Accent bar at top of content | /* --- 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, # | background: linear-gradient(90deg, #3b82f6, #06b6d4, #3b82f6); | ||
margin-bottom: 1em; | margin-bottom: 1em; | ||
border-radius: 2px; | border-radius: 2px; | ||
} | } | ||
/* --- Collapsible toggle | /* --- Collapsible toggle --- */ | ||
.mw-collapsible-toggle { | |||
color: # | color: #3b82f6 !important; | ||
} | } | ||
/* --- Stub | /* --- Stub placeholders --- */ | ||
.sop-stub { | .sop-stub { | ||
background: # | background: #f9fafb; | ||
border: 1px solid # | border: 1px solid #e5e7eb; | ||
padding: 1em; | padding: 1em; | ||
border-radius: 4px; | border-radius: 4px; | ||
margin: 0.5em 0; | margin: 0.5em 0; | ||
color: # | 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;
}