MediaWiki:Common.css: Difference between revisions
From Lenn's Fun Stuff
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ============================================================ | /* ============================================================ | ||
ANISA SKIN - | ANISA SKIN - DARK MODE NUCLEAR OPTION | ||
============================================================ */ | ============================================================ */ | ||
/* 1. | /* 1. UNIVERSAL TEXT & BG OVERRIDE */ | ||
/* This | /* This forces EVERY element inside dark-mode to use light text */ | ||
body.dark-mode, | |||
body.dark-mode * { | |||
color: #e0e0e0; /* Default light grey text */ | |||
} | |||
/* 2. THE BACKGROUNDS & BOXES */ | |||
body.dark-mode, | |||
body.dark-mode #mw-wrapper, | |||
body.dark-mode #mw-content-block, | body.dark-mode #mw-content-block, | ||
body.dark-mode .anisa-main-container, | |||
body.dark-mode .card, | |||
body.dark-mode .anisa-post { | |||
background-color: #121212 !important; | |||
background-image: none !important; | |||
} | |||
/* 3. THE "BLUE GLOW" BORDERS */ | |||
/* This forces the blue lines around ALL page content containers */ | |||
body.dark-mode #content, | body.dark-mode #content, | ||
body.dark-mode .mw-body, | body.dark-mode .mw-body, | ||
body.dark-mode .anisa-post, | body.dark-mode .anisa-post, | ||
body.dark-mode .anisa-page-content, | body.dark-mode .anisa-page-content, | ||
body.dark-mode | body.dark-mode #mw-panel, | ||
body.dark-mode #mw- | body.dark-mode #mw-head { | ||
border: 1px solid #3399ff !important; | |||
box-shadow: 0 0 5px rgba(51, 153, 255, 0.2) !important; | |||
border: 1px solid #3399ff !important; | |||
box-shadow: | |||
} | } | ||
/* | /* 4. SEARCH BAR & EDIT BOX (The "White Text" Fix) */ | ||
body.dark-mode input, | |||
body.dark-mode input | body.dark-mode textarea, | ||
body.dark-mode | body.dark-mode #wpTextbox1, | ||
body.dark-mode | body.dark-mode .mw-editfont-monospace { | ||
body.dark-mode | background-color: #222222 !important; | ||
background-color: # | |||
color: #ffffff !important; | color: #ffffff !important; | ||
border: 1px solid #3399ff !important; | border: 1px solid #3399ff !important; | ||
-webkit-text-fill-color: #ffffff !important; | -webkit-text-fill-color: #ffffff !important; | ||
} | } | ||
/* | /* 5. ALERTS, NOTICES & ICONS */ | ||
body.dark-mode .mw-echo-notifications-badge, | |||
body.dark-mode | body.dark-mode .mw-ui-icon, | ||
body.dark-mode | body.dark-mode .vector-icon { | ||
body.dark-mode . | |||
filter: invert(1) brightness(2) !important; | filter: invert(1) brightness(2) !important; | ||
} | } | ||
/* | /* 6. LINKS & HEADERS */ | ||
body.dark-mode a { color: #3399ff !important; } | body.dark-mode a { color: #3399ff !important; } | ||
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { | body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { | ||
| Line 59: | Line 64: | ||
body.mediawiki .portable-infobox { | body.mediawiki .portable-infobox { | ||
background-color: #ffffff !important; | background-color: #ffffff !important; | ||
border: 2px solid #003366 !important; | border: 2px solid #003366 !important; | ||
width: 320px !important; | width: 320px !important; | ||
float: right | float: right; | ||
margin: 0 0 1em 1em | margin: 0 0 1em 1em; | ||
} | } | ||
body.dark-mode .portable-infobox { | body.dark-mode .portable-infobox { | ||
background-color: # | background-color: #1a1a1a !important; | ||
border-color: #3399ff !important; | border-color: #3399ff !important; | ||
} | } | ||
| Line 80: | Line 78: | ||
background-color: #3399ff !important; | background-color: #3399ff !important; | ||
color: #000000 !important; | color: #000000 !important; | ||
} | } | ||
| Line 95: | Line 86: | ||
body.dark-mode .pi-data-label { | body.dark-mode .pi-data-label { | ||
background-color: #333333 !important; | background-color: #333333 !important; | ||
} | } | ||
body.dark-mode .pi-data-value { | body.dark-mode .pi-data-value { | ||
background-color: #1a1a1a !important; | background-color: #1a1a1a !important; | ||
} | } | ||
Revision as of 00:48, 12 March 2026
/* ============================================================
ANISA SKIN - DARK MODE NUCLEAR OPTION
============================================================ */
/* 1. UNIVERSAL TEXT & BG OVERRIDE */
/* This forces EVERY element inside dark-mode to use light text */
body.dark-mode,
body.dark-mode * {
color: #e0e0e0; /* Default light grey text */
}
/* 2. THE BACKGROUNDS & BOXES */
body.dark-mode,
body.dark-mode #mw-wrapper,
body.dark-mode #mw-content-block,
body.dark-mode .anisa-main-container,
body.dark-mode .card,
body.dark-mode .anisa-post {
background-color: #121212 !important;
background-image: none !important;
}
/* 3. THE "BLUE GLOW" BORDERS */
/* This forces the blue lines around ALL page content containers */
body.dark-mode #content,
body.dark-mode .mw-body,
body.dark-mode .anisa-post,
body.dark-mode .anisa-page-content,
body.dark-mode #mw-panel,
body.dark-mode #mw-head {
border: 1px solid #3399ff !important;
box-shadow: 0 0 5px rgba(51, 153, 255, 0.2) !important;
}
/* 4. SEARCH BAR & EDIT BOX (The "White Text" Fix) */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode #wpTextbox1,
body.dark-mode .mw-editfont-monospace {
background-color: #222222 !important;
color: #ffffff !important;
border: 1px solid #3399ff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* 5. ALERTS, NOTICES & ICONS */
body.dark-mode .mw-echo-notifications-badge,
body.dark-mode .mw-ui-icon,
body.dark-mode .vector-icon {
filter: invert(1) brightness(2) !important;
}
/* 6. LINKS & HEADERS */
body.dark-mode a { color: #3399ff !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
color: #3399ff !important;
border-bottom: 2px solid #3399ff !important;
}
/* ============================================================
PORTABLE INFOBOX - KH STYLE
============================================================ */
body.mediawiki .portable-infobox {
background-color: #ffffff !important;
border: 2px solid #003366 !important;
width: 320px !important;
float: right;
margin: 0 0 1em 1em;
}
body.dark-mode .portable-infobox {
background-color: #1a1a1a !important;
border-color: #3399ff !important;
}
body.dark-mode .pi-title {
background-color: #3399ff !important;
color: #000000 !important;
}
body.dark-mode .pi-header {
background-color: #000000 !important;
}
body.dark-mode .pi-data-label {
background-color: #333333 !important;
}
body.dark-mode .pi-data-value {
background-color: #1a1a1a !important;
}