|
|
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the Vector skin */ | | /* All CSS here will be loaded for users of the Vector skin */ |
|
| |
| /* ============================
| |
| 🌙 DARK MODE THEME — Untenables Wiki Style
| |
| Colors:
| |
| - Dark Grey: #282a36
| |
| - Cream (text): #f8f8f2
| |
| - Pink (accent): #ff79c6
| |
| - Blue Grey (secondary): #6272a4
| |
| - Red (alert): #ff5555
| |
| ============================ */
| |
|
| |
| /* ---- Base Page ---- */
| |
| body {
| |
| background-color: #282a36 !important;
| |
| color: #f8f8f2 !important;
| |
| }
| |
|
| |
| /* Page content */
| |
| .mw-body, .mw-body-content, #content, .mw-parser-output {
| |
| background-color: transparent !important;
| |
| color: #f8f8f2 !important;
| |
| }
| |
|
| |
| /* Headings */
| |
| h1, h2, h3, h4, h5, h6 {
| |
| color: #ff79c6 !important;
| |
| border-color: #6272a4 !important;
| |
| }
| |
|
| |
| /* Links */
| |
| a,
| |
| a:link,
| |
| .mw-body a {
| |
| color: #8be9fd !important; /* optional lighter link */
| |
| text-decoration: none;
| |
| }
| |
|
| |
| a:visited {
| |
| color: #6272a4 !important;
| |
| }
| |
|
| |
| a:hover,
| |
| a:focus {
| |
| color: #ff79c6 !important;
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* ---- Navigation & Sidebar ---- */
| |
| #mw-panel, .vector-menu-content, .sidebar, .mw-sidebar, .minerva-header {
| |
| background-color: #20222b !important;
| |
| color: #f8f8f2 !important;
| |
| }
| |
|
| |
| #mw-panel a,
| |
| .vector-menu-content a {
| |
| color: #f8f8f2 !important;
| |
| }
| |
|
| |
| #mw-panel a:hover,
| |
| .vector-menu-content a:hover {
| |
| color: #ff79c6 !important;
| |
| }
| |
|
| |
| /* ---- Header / Toolbar ---- */
| |
| #mw-head, #mw-head-base, .vector-header, .header {
| |
| background-color: #20222b !important;
| |
| border-bottom: 1px solid #6272a4 !important;
| |
| }
| |
|
| |
| #p-personal li a,
| |
| .vector-user-menu a {
| |
| color: #f8f8f2 !important;
| |
| }
| |
|
| |
| #p-personal li a:hover {
| |
| color: #ff79c6 !important;
| |
| }
| |
|
| |
| /* ---- Search box ---- */
| |
| #p-search input,
| |
| .mw-ui-input,
| |
| input[type="search"] {
| |
| background-color: #282a36 !important;
| |
| color: #f8f8f2 !important;
| |
| border: 1px solid #6272a4 !important;
| |
| }
| |
|
| |
| #p-search input:focus {
| |
| border-color: #ff79c6 !important;
| |
| }
| |
|
| |
| /* ---- Tables ---- */
| |
| table, th, td {
| |
| border-color: #6272a4 !important;
| |
| }
| |
|
| |
| tr:nth-child(even) {
| |
| background-color: #30323e !important;
| |
| }
| |
|
| |
| tr:nth-child(odd) {
| |
| background-color: #2c2e3a !important;
| |
| }
| |
|
| |
| th {
| |
| background-color: #20222b !important;
| |
| color: #ff79c6 !important;
| |
| }
| |
|
| |
| /* ---- Code blocks & preformatted text ---- */
| |
| pre, code, .mw-code {
| |
| background-color: #1e1f29 !important;
| |
| color: #f8f8f2 !important;
| |
| border: 1px solid #6272a4 !important;
| |
| }
| |
|
| |
| /* ---- Notifications, warnings, errors ---- */
| |
| .mw-warning, .warning, .errorbox {
| |
| background-color: #3b1d1d !important;
| |
| border: 1px solid #ff5555 !important;
| |
| color: #ff5555 !important;
| |
| }
| |
|
| |
| .successbox, .mw-message-box-success {
| |
| background-color: #1f3b1f !important;
| |
| border: 1px solid #50fa7b !important;
| |
| color: #50fa7b !important;
| |
| }
| |
|
| |
| /* ---- Edit / buttons ---- */
| |
| button, .mw-ui-button, input[type="submit"], input[type="button"], .oo-ui-buttonElement-button {
| |
| background-color: #6272a4 !important;
| |
| color: #f8f8f2 !important;
| |
| border: none !important;
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| button:hover, .mw-ui-button:hover, .oo-ui-buttonElement-button:hover {
| |
| background-color: #ff79c6 !important;
| |
| color: #282a36 !important;
| |
| }
| |
|
| |
| /* ---- Footer ---- */
| |
| #footer, .mw-footer {
| |
| background-color: #20222b !important;
| |
| color: #f8f8f2 !important;
| |
| border-top: 1px solid #6272a4 !important;
| |
| }
| |
|
| |
| #footer a {
| |
| color: #ff79c6 !important;
| |
| }
| |
|
| |
| /* ---- Misc readability ---- */
| |
| hr {
| |
| border-color: #6272a4 !important;
| |
| }
| |
|
| |
| blockquote {
| |
| border-left: 3px solid #6272a4 !important;
| |
| color: #f8f8f2 !important;
| |
| background-color: #2c2e3a !important;
| |
| }
| |
|
| |
| /* ---- Optional: highlight selected text ---- */
| |
| ::selection {
| |
| background: #ff79c6;
| |
| color: #282a36;
| |
| }
| |
