MediaWiki:Gadget-darkmode-mobile.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* RemiliaWiki Dark Mode Styles - MinervaNeue (Mobile)
* Add to: MediaWiki:Gadget-darkmode-mobile.css
* Skin: MinervaNeue (MobileFrontend)
*/
/* ==========================================================================
CSS VARIABLES (identical to desktop)
========================================================================== */
:root {
/* Light mode (default) */
--bg-body: #f6f6f6;
--bg-content: #ffffff;
--bg-secondary: #f8f9fa;
--bg-tertiary: #eaecf0;
--text-primary: #202122;
--text-secondary: #54595d;
--text-muted: #72777d;
--border-color: #a2a9b1;
--border-subtle: #c8ccd1;
--border-faint: #eaecf0;
--link-color: #0645ad;
--link-visited: #0b0080;
--link-new: #d33;
--link-external: #36b;
--accent-primary: #36c;
--accent-progressive: #36c;
--accent-destructive: #d33;
/* Tables */
--table-header-bg: #eaecf0;
--table-row-alt: #f8f9fa;
/* Infobox */
--infobox-bg: #f8f9fa;
--infobox-header: #c8ccd1;
/* TOC */
--toc-bg: #f8f9fa;
/* Code */
--code-bg: #f8f9fa;
--code-border: #eaecf0;
/* Diffs */
--diff-added-bg: #d8ecde;
--diff-added-border: #a3d3b3;
--diff-deleted-bg: #feeaea;
--diff-deleted-border: #f8b4b4;
--diff-context-bg: #f8f9fa;
/* Notices */
--notice-bg: #eaf3ff;
--notice-border: #36c;
--warning-bg: #fef6e7;
--warning-border: #fc3;
/* Headings */
--heading-color: #202122;
}
[data-theme="dark"] {
/* Dark mode overrides - edith.reisen inspired high-contrast */
--bg-body: #000000;
--bg-content: #0a0a0a;
--bg-secondary: #111111;
--bg-tertiary: #1a1a1a;
--text-primary: #ffffff;
--text-secondary: #b0b0b0;
--text-muted: #808080;
--border-color: #333333;
--border-subtle: #252525;
--border-faint: #1a1a1a;
/* Orange accent links (edith.reisen style) */
--link-color: #ff6600;
--link-visited: #cc5500;
--link-new: #ff4444;
--link-external: #ff8833;
--accent-primary: #ff6600;
--accent-progressive: #ff6600;
--accent-destructive: #ff6b6b;
/* Tables */
--table-header-bg: #1a1a1a;
--table-row-alt: #111111;
/* Infobox */
--infobox-bg: #111111;
--infobox-header: #1a1a1a;
/* TOC */
--toc-bg: #111111;
/* Code - blue background like edith.reisen */
--code-bg: #000066;
--code-border: #0000aa;
/* Diffs */
--diff-added-bg: #0a1f0a;
--diff-added-border: #1a4020;
--diff-deleted-bg: #1f0a0a;
--diff-deleted-border: #401a1a;
--diff-context-bg: #111111;
/* Notices */
--notice-bg: #0a1a2a;
--notice-border: #ff6600;
--warning-bg: #2a1a0a;
--warning-border: #ff6600;
/* Orange headings (edith.reisen style) */
--heading-color: #ff6600;
}
/* ==========================================================================
DARK MODE TOGGLE
========================================================================== */
#pt-darkmode a {
font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Apple Symbols", sans-serif;
font-size: 1.1em;
}
/* ==========================================================================
CORE LAYOUT - MINERVANEUE
========================================================================== */
[data-theme="dark"].skin-minerva {
background: var(--bg-body);
color: var(--text-primary);
}
[data-theme="dark"] .skin-minerva body {
background: var(--bg-body);
}
[data-theme="dark"] #mw-mf-page-center {
background: var(--bg-content);
}
[data-theme="dark"] .mw-body {
background: var(--bg-content);
color: var(--text-primary);
}
[data-theme="dark"] #mw-mf-viewport {
background: var(--bg-body);
}
/* ==========================================================================
HEADER
========================================================================== */
[data-theme="dark"] .header-container,
[data-theme="dark"] .minerva-header {
background: var(--bg-secondary);
border-bottom-color: var(--border-color);
}
[data-theme="dark"] .header-container.header-chrome {
background: var(--bg-secondary);
}
/* Branding */
[data-theme="dark"] .branding-box {
color: var(--text-primary);
}
/* Menu icon (hamburger) */
[data-theme="dark"] .main-menu-icon,
[data-theme="dark"] .mw-ui-icon-minerva-menu {
filter: invert(0.9);
}
/* Search icon */
[data-theme="dark"] .search-box .mw-ui-icon {
filter: invert(0.9);
}
/* User icon */
[data-theme="dark"] .user-menu .mw-ui-icon {
filter: invert(0.9);
}
/* ==========================================================================
SEARCH
========================================================================== */
[data-theme="dark"] .search-box {
background: var(--bg-tertiary);
border-color: var(--border-color);
}
[data-theme="dark"] .search-box input[type="search"] {
background: var(--bg-tertiary);
color: var(--text-primary);
border-color: var(--border-color);
}
[data-theme="dark"] .search-box input::placeholder {
color: var(--text-muted);
}
/* Search overlay */
[data-theme="dark"] .search-overlay {
background: var(--bg-content);
}
[data-theme="dark"] .search-overlay-header {
background: var(--bg-secondary);
}
[data-theme="dark"] .search-content {
background: var(--bg-content);
}
/* Search results */
[data-theme="dark"] .search-results-view,
[data-theme="dark"] .mw-search-results {
background: var(--bg-content);
}
[data-theme="dark"] .search-results-view li,
[data-theme="dark"] .page-list li {
border-color: var(--border-faint);
}
[data-theme="dark"] .search-results-view a,
[data-theme="dark"] .page-list a {
color: var(--link-color);
}
/* ==========================================================================
NAVIGATION DRAWER (LEFT MENU)
========================================================================== */
[data-theme="dark"] .navigation-drawer,
[data-theme="dark"] .mw-mf-page-left {
background: var(--bg-secondary);
}
[data-theme="dark"] .navigation-drawer .mw-ui-icon {
filter: invert(0.9);
}
[data-theme="dark"] .menu a {
color: var(--text-primary);
}
[data-theme="dark"] .menu li {
border-color: var(--border-faint);
}
[data-theme="dark"] .menu li:hover,
[data-theme="dark"] .menu li:active {
background: var(--bg-tertiary);
}
/* Secondary menu items */
[data-theme="dark"] .secondary-action {
color: var(--text-secondary);
}
/* User info in drawer */
[data-theme="dark"] .logged-in .navigation-drawer {
border-color: var(--border-color);
}
/* ==========================================================================
CONTENT AREA
========================================================================== */
[data-theme="dark"] .mw-body-content {
color: var(--text-primary);
}
[data-theme="dark"] .content {
color: var(--text-primary);
}
[data-theme="dark"] #bodyContent {
color: var(--text-primary);
}
/* ==========================================================================
HEADINGS
========================================================================== */
[data-theme="dark"] .mw-body h1,
[data-theme="dark"] .mw-body h2,
[data-theme="dark"] .mw-body h3,
[data-theme="dark"] .mw-body h4 {
color: var(--heading-color);
}
[data-theme="dark"] .mw-body h5,
[data-theme="dark"] .mw-body h6 {
color: var(--text-primary);
}
[data-theme="dark"] .section-heading {
color: var(--heading-color);
border-color: var(--border-subtle);
}
[data-theme="dark"] .mw-headline {
color: var(--heading-color);
}
[data-theme="dark"] #section_0,
[data-theme="dark"] .mw-first-heading {
color: var(--heading-color);
}
/* Collapsible section arrows */
[data-theme="dark"] .mw-ui-icon-mf-expand,
[data-theme="dark"] .mw-ui-icon-mf-arrow {
filter: invert(0.9);
}
/* ==========================================================================
LINKS
========================================================================== */
[data-theme="dark"] .skin-minerva a {
color: var(--link-color);
}
[data-theme="dark"] .skin-minerva a:visited {
color: var(--link-visited);
}
[data-theme="dark"] .skin-minerva a.new {
color: var(--link-new);
}
[data-theme="dark"] .skin-minerva a.external {
color: var(--link-external);
}
/* ==========================================================================
TABLE OF CONTENTS (MOBILE)
========================================================================== */
[data-theme="dark"] .toc-mobile,
[data-theme="dark"] .toc {
background: var(--toc-bg);
border-color: var(--border-color);
}
[data-theme="dark"] .toc a {
color: var(--link-color);
}
[data-theme="dark"] .toc-list {
background: var(--toc-bg);
}
/* ==========================================================================
TABLES
========================================================================== */
[data-theme="dark"] table {
color: var(--text-primary);
}
[data-theme="dark"] table.wikitable {
background: var(--bg-content);
border-color: var(--border-color);
}
[data-theme="dark"] table.wikitable th {
background: var(--table-header-bg);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] table.wikitable td {
border-color: var(--border-color);
}
[data-theme="dark"] table.wikitable tr:nth-child(even) td {
background: var(--table-row-alt);
}
/* ==========================================================================
INFOBOXES
========================================================================== */
[data-theme="dark"] .infobox {
background: var(--infobox-bg);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] .infobox th {
background: var(--infobox-header);
color: var(--text-primary);
}
[data-theme="dark"] .infobox td {
border-color: var(--border-subtle);
}
[data-theme="dark"] .infobox-header,
[data-theme="dark"] .infobox-above {
background: #ff6600;
color: #000;
}
/* ==========================================================================
NAVBOXES
========================================================================== */
[data-theme="dark"] .navbox {
background: var(--bg-secondary);
border-color: var(--border-color);
}
[data-theme="dark"] .navbox-title {
background: #ff6600;
color: #000;
}
[data-theme="dark"] .navbox-group {
background: var(--bg-tertiary);
color: var(--text-primary);
}
[data-theme="dark"] .navbox-list {
border-color: var(--border-subtle);
}
[data-theme="dark"] .navbox-even {
background: var(--bg-secondary);
}
[data-theme="dark"] .navbox-odd {
background: var(--bg-content);
}
/* ==========================================================================
CODE & PREFORMATTED TEXT
========================================================================== */
[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-theme="dark"] .mw-code {
background: var(--code-bg);
border-color: var(--code-border);
color: var(--text-primary);
}
/* ==========================================================================
SYNTAXHIGHLIGHT
========================================================================== */
[data-theme="dark"] .mw-highlight {
background: var(--code-bg);
border-color: var(--code-border);
}
[data-theme="dark"] .mw-highlight pre {
background: var(--code-bg);
color: var(--text-primary);
}
/* Pygments dark theme (same as desktop) */
[data-theme="dark"] .mw-highlight .c,
[data-theme="dark"] .mw-highlight .ch,
[data-theme="dark"] .mw-highlight .cm,
[data-theme="dark"] .mw-highlight .c1,
[data-theme="dark"] .mw-highlight .cs { color: #6a9955; }
[data-theme="dark"] .mw-highlight .k,
[data-theme="dark"] .mw-highlight .kc,
[data-theme="dark"] .mw-highlight .kd,
[data-theme="dark"] .mw-highlight .kn,
[data-theme="dark"] .mw-highlight .kr,
[data-theme="dark"] .mw-highlight .kt { color: #569cd6; }
[data-theme="dark"] .mw-highlight .s,
[data-theme="dark"] .mw-highlight .s2,
[data-theme="dark"] .mw-highlight .s1,
[data-theme="dark"] .mw-highlight .sr { color: #ce9178; }
[data-theme="dark"] .mw-highlight .m,
[data-theme="dark"] .mw-highlight .mi,
[data-theme="dark"] .mw-highlight .mf { color: #b5cea8; }
[data-theme="dark"] .mw-highlight .nf { color: #dcdcaa; }
[data-theme="dark"] .mw-highlight .nc { color: #4ec9b0; }
/* ==========================================================================
DIFF VIEWS
========================================================================== */
[data-theme="dark"] table.diff {
background: var(--bg-content);
color: var(--text-primary);
}
[data-theme="dark"] td.diff-context {
background: var(--diff-context-bg);
}
[data-theme="dark"] td.diff-addedline {
background: var(--diff-added-bg);
border-color: var(--diff-added-border);
}
[data-theme="dark"] td.diff-addedline .diffchange {
background: #1a5028;
}
[data-theme="dark"] td.diff-deletedline {
background: var(--diff-deleted-bg);
border-color: var(--diff-deleted-border);
}
[data-theme="dark"] td.diff-deletedline .diffchange {
background: #5c1f24;
}
/* ==========================================================================
FORMS & INPUTS
========================================================================== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
background: var(--bg-secondary);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
border-color: var(--accent-primary);
}
/* Mobile buttons */
[data-theme="dark"] .mw-ui-button {
background: var(--bg-tertiary);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme="dark"] .mw-ui-button:hover {
background: var(--border-color);
}
[data-theme="dark"] .mw-ui-progressive {
background: var(--accent-progressive);
border-color: var(--accent-progressive);
color: #000;
}
/* ==========================================================================
EDIT PAGE (MOBILE)
========================================================================== */
[data-theme="dark"] .editor-overlay {
background: var(--bg-content);
}
[data-theme="dark"] .editor-overlay-header {
background: var(--bg-secondary);
border-color: var(--border-color);
}
[data-theme="dark"] .wikitext-editor {
background: var(--bg-content);
color: var(--text-primary);
}
[data-theme="dark"] .overlay-content {
background: var(--bg-content);
}
/* ==========================================================================
NOTICES & MESSAGE BOXES
========================================================================== */
[data-theme="dark"] .mw-message-box {
background: var(--notice-bg);
border-color: var(--notice-border);
color: var(--text-primary);
}
[data-theme="dark"] .mw-message-box-warning {
background: var(--warning-bg);
border-color: var(--warning-border);
}
[data-theme="dark"] .warningbox {
background: var(--warning-bg);
border-color: var(--warning-border);
}
[data-theme="dark"] .errorbox {
background: var(--diff-deleted-bg);
border-color: var(--diff-deleted-border);
}
[data-theme="dark"] .successbox {
background: var(--diff-added-bg);
border-color: var(--diff-added-border);
}
/* ==========================================================================
IMAGES
========================================================================== */
[data-theme="dark"] .mw-body-content img {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
/* Thumbnails */
[data-theme="dark"] .thumb {
border-color: var(--border-subtle);
background: var(--bg-secondary);
}
[data-theme="dark"] .thumbinner {
background: var(--bg-secondary);
border-color: var(--border-subtle);
}
[data-theme="dark"] .thumbcaption {
color: var(--text-secondary);
}
/* Math - invert */
[data-theme="dark"] img.mwe-math-fallback-image-inline,
[data-theme="dark"] img.mwe-math-fallback-image-display {
filter: invert(0.88) hue-rotate(180deg);
}
/* Optional invert class */
[data-theme="dark"] .dark-invert {
filter: invert(1) hue-rotate(180deg);
}
/* ==========================================================================
FOOTER
========================================================================== */
[data-theme="dark"] .minerva-footer,
[data-theme="dark"] #mw-mf-page-center footer,
[data-theme="dark"] .last-modified-bar {
background: var(--bg-secondary);
border-top-color: var(--border-color);
color: var(--text-secondary);
}
[data-theme="dark"] .post-content {
background: var(--bg-body);
}
[data-theme="dark"] footer a {
color: var(--link-color);
}
/* ==========================================================================
CATEGORY LINKS
========================================================================== */
[data-theme="dark"] #catlinks,
[data-theme="dark"] .catlinks {
background: var(--bg-secondary);
border-color: var(--border-color);
}
/* ==========================================================================
SPECIAL PAGES (MOBILE)
========================================================================== */
/* Recent changes */
[data-theme="dark"] .mw-changeslist-line {
color: var(--text-primary);
}
[data-theme="dark"] .mw-plusminus-pos {
color: #4ade80;
}
[data-theme="dark"] .mw-plusminus-neg {
color: #f87171;
}
/* Page lists */
[data-theme="dark"] .page-summary {
border-color: var(--border-faint);
}
[data-theme="dark"] .page-summary h3 {
color: var(--link-color);
}
/* ==========================================================================
OVERLAYS (MOBILE-SPECIFIC)
========================================================================== */
[data-theme="dark"] .overlay {
background: var(--bg-content);
}
[data-theme="dark"] .overlay-header {
background: var(--bg-secondary);
border-color: var(--border-color);
}
[data-theme="dark"] .overlay-header h2 {
color: var(--text-primary);
}
[data-theme="dark"] .overlay-content {
background: var(--bg-content);
color: var(--text-primary);
}
/* Close button */
[data-theme="dark"] .cancel {
filter: invert(0.9);
}
/* ==========================================================================
WATCHLIST / USER PAGES
========================================================================== */
[data-theme="dark"] .mw-mobile-pagesummary-watchlist-container {
background: var(--bg-secondary);
}
[data-theme="dark"] .mw-mf-user-info {
background: var(--bg-secondary);
border-color: var(--border-color);
}
/* ==========================================================================
LOADING STATES
========================================================================== */
[data-theme="dark"] .mw-spinner,
[data-theme="dark"] .spinner {
filter: invert(1);
}
[data-theme="dark"] .loading-overlay {
background: rgba(26, 29, 33, 0.9);
}
/* ==========================================================================
TABBERNEUE EXTENSION
========================================================================== */
[data-theme="dark"] .tabber {
background: var(--bg-content);
}
[data-theme="dark"] .tabber__header {
background: var(--bg-secondary);
border-bottom-color: var(--border-color);
}
[data-theme="dark"] .tabber__tabs {
background: var(--bg-secondary);
}
[data-theme="dark"] .tabber__tab {
color: var(--text-primary);
background: transparent;
}
[data-theme="dark"] .tabber__tab:hover {
background: var(--bg-tertiary);
}
[data-theme="dark"] .tabber__tab[aria-selected="true"],
[data-theme="dark"] .tabber__tab--active {
color: var(--heading-color);
background: var(--bg-content);
}
[data-theme="dark"] .tabber__indicator {
background: var(--heading-color);
}
[data-theme="dark"] .tabber__panel {
background: var(--bg-content);
color: var(--text-primary);
}
[data-theme="dark"] .tabber__header__prev,
[data-theme="dark"] .tabber__header__next {
background: var(--bg-secondary);
color: var(--text-primary);
}
/* ==========================================================================
CARGO EXTENSION
========================================================================== */
[data-theme="dark"] .cargoDynamicTable {
background: var(--bg-content);
color: var(--text-primary);
}
[data-theme="dark"] .cargoDynamicTable th {
background: var(--table-header-bg);
color: var(--text-primary);
border-color: var(--border-color);
}
[data-theme="dark"] .cargoDynamicTable td {
border-color: var(--border-color);
}
[data-theme="dark"] .cargoDynamicTable tr:nth-child(even) td {
background: var(--table-row-alt);
}
[data-theme="dark"] .drilldown-filters {
background: var(--bg-secondary);
border-color: var(--border-color);
}
[data-theme="dark"] .drilldown-filter {
background: var(--bg-tertiary);
border-color: var(--border-color);
color: var(--text-primary);
}
/* ==========================================================================
PRINT SAFETY
========================================================================== */
@media print {
:root {
--bg-body: #fff !important;
--bg-content: #fff !important;
--text-primary: #000 !important;
--text-secondary: #333 !important;
--link-color: #000 !important;
--heading-color: #000 !important;
}
#pt-darkmode {
display: none;
}
img {
filter: none !important;
box-shadow: none !important;
}
}
/* Transitions only after page load (class added by JS) */
.darkmode-transitions,
.darkmode-transitions #content,
.darkmode-transitions #mw-panel,
.darkmode-transitions a {
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}