Remilia Wiki

MediaWiki:Gadget-darkmode-mobile.css

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;
}
Retrieved from "https://wiki.remilia.org/index.php?title=MediaWiki:Gadget-darkmode-mobile.css&oldid=1592"