/* === MediaForce theme variables === * Default values match the existing light palette so legacy hardcoded * colors remain unchanged. Dark theme below redefines them. * * data-theme is set on by the layout based on the user's pref. * data-theme="auto" -> respect prefers-color-scheme * data-theme="light" -> always light * data-theme="dark" -> always dark */ :root { /* Declare we handle both colour schemes — prevents OS forced-dark and Dark Reader from overriding our deliberate palette. */ color-scheme: light dark; --mf-bg: #f5f5f7; --mf-surface: #ffffff; --mf-surface-alt: #fafbfd; --mf-surface-2: #ffffff; --mf-text: #1a1a1a; --mf-text-muted: #666; --mf-text-faint: #888; --mf-border: #e0e0e0; --mf-border-light: #f0f0f0; --mf-primary: #0066cc; --mf-primary-hover: #1a73e8; --mf-link: #0066cc; --mf-link-hover: #1a73e8; --mf-success: #2a7a2a; --mf-danger: #c0392b; --mf-warning: #b35900; --mf-input-bg: #ffffff; --mf-shadow: 0 2px 8px rgba(0,0,0,0.06); --mf-shadow-strong: 0 4px 16px rgba(0,0,0,0.1); /* Typography + button shape tokens (#679). A theme controls more than colour now: the UI font, base text size, and the button vocabulary (corner radius, weight, padding) all resolve through these so a skin — or a Themes & Fonts customisation — can restyle buttons and text, not just the palette. The defaults reproduce the previous hardcoded look. */ --mf-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mf-font-mono: "SF Mono", Menlo, Consolas, monospace; --mf-font-size: 14px; --mf-btn-radius: 6px; --mf-btn-weight: 600; --mf-btn-pad-y: 4px; --mf-btn-pad-x: 12px; /* AI (Claddy) accent + code/chat surfaces. The purple is the canonical AI signature; these tokens let the AI panels sit correctly on ANY skin instead of hardcoding the colour. Code + user-bubble surfaces likewise. */ --mf-ai-accent: #6b3fa0; --mf-ai-accent-strong: #4a2a78; --mf-ai-accent-soft: #f3eaff; --mf-ai-accent-text: #ffffff; --mf-code-bg: #f3efe7; --mf-code-text: #2d2820; --mf-user-bubble: #2a3f6b; --mf-user-bubble-text: #e8eefb; /* Derived semantic tokens — defined ONCE in terms of the base tokens above, so they track every skin (light AND dark) automatically with no per-theme block. Used by status pills, soft badge fills, progress tracks, scrims, and the generic "accent" alias (orders #637–#640). */ --mf-accent: var(--mf-primary); --mf-accent-soft: color-mix(in srgb, var(--mf-primary) 14%, var(--mf-surface)); --mf-info: var(--mf-primary); --mf-info-soft: color-mix(in srgb, var(--mf-primary) 14%, var(--mf-surface)); --mf-info-text: var(--mf-primary); --mf-success-soft: color-mix(in srgb, var(--mf-success) 16%, var(--mf-surface)); --mf-success-text: var(--mf-success); --mf-danger-soft: color-mix(in srgb, var(--mf-danger) 16%, var(--mf-surface)); --mf-warning-soft: color-mix(in srgb, var(--mf-warning) 18%, var(--mf-surface)); --mf-border-strong: color-mix(in srgb, var(--mf-border) 60%, var(--mf-text)); --mf-track: var(--mf-surface-alt); --mf-text-2: var(--mf-text-muted); --mf-text-3: var(--mf-text-faint); --mf-card-bg: var(--mf-surface); --mf-row-hover: var(--mf-surface-alt); --mf-primary-soft: color-mix(in srgb, var(--mf-primary) 14%, var(--mf-surface)); --mf-danger-text: var(--mf-danger); --mf-warning-text: var(--mf-warning); --mf-on-accent: #ffffff; /* theme-audit-allow: text/icon on a coloured fill, constant */ --mf-on-primary: var(--mf-on-accent); /* text on a --mf-primary fill; auto-contrasted in the @supports block below */ --mf-overlay: rgba(0, 0, 0, 0.5); /* theme-audit-allow: modal scrim, theme-neutral */ --mf-primary-dark: var(--mf-primary-hover); --mf-code-block-bg: var(--mf-code-bg); --mf-code-block-text: var(--mf-code-text); /* Admin chrome — top menu bar + side-nav. Defined ONCE over the base tokens so the chrome follows EVERY skin (light and dark) instead of staying frozen WordPress-admin black. The bar and sidebar read as a recessed surface; the active item uses the accent. This is the fix for the "sidebar never changes colour" bug and what finally makes a full-dark skin paint the WHOLE screen dark (orders #667 / #670). */ --mf-chrome-bg: var(--mf-surface-alt); --mf-chrome-fg: var(--mf-text); --mf-chrome-fg-muted: var(--mf-text-muted); --mf-chrome-fg-faint: var(--mf-text-faint); --mf-chrome-border: var(--mf-border); --mf-chrome-hover-bg: var(--mf-surface-2); --mf-chrome-hover-fg: var(--mf-text); --mf-chrome-elev: var(--mf-surface-2); --mf-chrome-active-bg: var(--mf-primary); --mf-chrome-active-fg: var(--mf-on-primary); --mf-chrome-accent: var(--mf-primary); } /* Auto-contrasting text colour for any fill painted with --mf-primary: pick black or white by the accent's OKLCH lightness, so a button label stays legible AT REST on every skin — including the light accents (lime, amber, mint, gold) where the old constant white text was invisible until you hovered (#705). Threshold 0.56 keeps all 42 shipped themes — and any accent the Webmaster customises — at WCAG AA. Gated on @supports so engines without relative-colour syntax keep the plain white fallback defined above. */ @supports (color: oklch(from white l c h)) { /* theme-audit-allow: feature query, not a rendered colour */ :root { --mf-on-primary: oklch(from var(--mf-primary) clamp(0, (0.56 - l) * 1000, 1) 0 0); } } /* Soft dark — backgrounds in the #15-1f range, comfortable for long sessions. * --mf-surface-2 sits one notch lighter than --mf-surface for elevated * components (modals, dropdowns, popovers). * --mf-text-faint bumped from #7a828c to #8a929e for legibility against * --mf-bg (#15171a). */ :root[data-theme="dark"] { --mf-bg: #15171a; --mf-surface: #1f2227; --mf-surface-alt: #1a1c20; --mf-surface-2: #262a31; --mf-text: #e8eaed; --mf-text-muted: #a8b0bb; --mf-text-faint: #8a929e; --mf-border: #2a2e34; --mf-border-light: #23262c; --mf-primary: #4da3ff; --mf-primary-hover: #7ab8ff; --mf-link: #6cb1ff; --mf-link-hover: #93c6ff; --mf-success: #4ec27c; --mf-danger: #ef6b6b; --mf-warning: #e6a45a; --mf-input-bg: #1a1c20; --mf-shadow: 0 2px 8px rgba(0,0,0,0.4); --mf-shadow-strong: 0 4px 16px rgba(0,0,0,0.5); /* AI accent + code/chat surfaces — dark variants (accent-text and the user bubble stay constant; they are accent-on-fill by design). */ --mf-ai-accent: #b08fe0; --mf-ai-accent-strong: #d8c4f5; --mf-ai-accent-soft: #2a2342; --mf-code-bg: #15120e; --mf-code-text: #e8e2d6; } /* Auto: follow OS-level prefers-color-scheme. * The inline script in control/_layout.php normally rewrites * data-theme="auto" to "light" or "dark" before this CSS paints, so the * per-component overrides below (which key on data-theme="dark") fire * correctly under auto mode. The @media block here is a fallback for * users with JS disabled — they at least get the right body/text vars. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --mf-bg: #15171a; --mf-surface: #1f2227; --mf-surface-alt: #1a1c20; --mf-surface-2: #262a31; --mf-text: #e8eaed; --mf-text-muted: #a8b0bb; --mf-text-faint: #8a929e; --mf-border: #2a2e34; --mf-border-light: #23262c; --mf-primary: #4da3ff; --mf-primary-hover: #7ab8ff; --mf-link: #6cb1ff; --mf-link-hover: #93c6ff; --mf-success: #4ec27c; --mf-danger: #ef6b6b; --mf-warning: #e6a45a; --mf-input-bg: #1a1c20; --mf-shadow: 0 2px 8px rgba(0,0,0,0.4); --mf-shadow-strong: 0 4px 16px rgba(0,0,0,0.5); --mf-ai-accent: #b08fe0; --mf-ai-accent-strong: #d8c4f5; --mf-ai-accent-soft: #2a2342; --mf-code-bg: #15120e; --mf-code-text: #e8e2d6; } } /* Apply variables to the layout chrome. * Specific overrides for the dark theme — using descendant selectors so * they win against the legacy hardcoded values. */ :root[data-theme="dark"] body.admin-body, :root[data-theme="auto"] body.admin-body { background: var(--mf-bg); color: var(--mf-text); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] body.admin-body { background: var(--mf-bg); color: var(--mf-text); } } /* Dark theme overrides for major surfaces. * The existing :root selectors below (:root[data-theme="dark"] ...) target * components that hardcode #fff or specific greys. */ :root[data-theme="dark"] code, :root[data-theme="dark"] pre { background: var(--mf-surface); border-color: var(--mf-border); color: var(--mf-text); } :root[data-theme="dark"] .card, :root[data-theme="dark"] .mf-card, :root[data-theme="dark"] .mf-tile, :root[data-theme="dark"] .mf-cal-month, :root[data-theme="dark"] .mf-cal-week, :root[data-theme="dark"] .mf-cal-day-list, :root[data-theme="dark"] .mf-worker-table, :root[data-theme="dark"] .mf-mem-table, :root[data-theme="dark"] .mf-pref-table, :root[data-theme="dark"] .mf-bell-panel, :root[data-theme="dark"] .mf-sysmenu-panel, :root[data-theme="dark"] .mf-event-form, :root[data-theme="dark"] .mf-cal-create-form, :root[data-theme="dark"] .mf-add-form, :root[data-theme="dark"] .mf-cal-toolbar, :root[data-theme="dark"] .mf-cal-list, :root[data-theme="dark"] .mf-notif-toolbar, :root[data-theme="dark"] .mf-notif-list, :root[data-theme="dark"] .mf-worker-toolbar, :root[data-theme="dark"] .mf-access-card, :root[data-theme="dark"] .mf-access-picker, :root[data-theme="dark"] .mf-access-detail .mf-access-card, :root[data-theme="dark"] .ap-stat, :root[data-theme="dark"] .mf-cal-day-cell, :root[data-theme="dark"] .mf-event-attendees-grid, :root[data-theme="dark"] table { background: var(--mf-surface); color: var(--mf-text); border-color: var(--mf-border); } :root[data-theme="dark"] th { background: var(--mf-surface-alt) !important; color: var(--mf-text-muted) !important; border-color: var(--mf-border) !important; } :root[data-theme="dark"] td, :root[data-theme="dark"] tr { border-color: var(--mf-border-light) !important; } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--mf-input-bg); color: var(--mf-text); border-color: var(--mf-border); } :root[data-theme="dark"] .btn, :root[data-theme="dark"] button { border-color: var(--mf-border); } :root[data-theme="dark"] .btn-secondary { background: var(--mf-surface); color: var(--mf-text); } /* Content links pick up the accent in dark mode, but NOT anchors styled as buttons (.btn): those carry their own variant colours, and letting the accent bleed into an a.btn.btn-primary painted accent-on-accent text — invisible until hover (#705). */ :root[data-theme="dark"] a:not(.btn) { color: var(--mf-primary); } :root[data-theme="dark"] .mf-cal-day-cell.other-month { background: var(--mf-surface-alt); } :root[data-theme="dark"] .mf-cal-day-cell.weekend { background: var(--mf-bg); } :root[data-theme="dark"] .mf-cal-day-cell.today { background: color-mix(in srgb, var(--mf-warning) 16%, var(--mf-surface)); } /* Soft text/muted overrides for any element using hardcoded greys */ :root[data-theme="dark"] .mf-card-foot, :root[data-theme="dark"] .mf-bell-empty, :root[data-theme="dark"] .mf-notif-empty { color: var(--mf-text-faint); } /* --- User dropdown (top-right) -------------------------------------------- */ :root[data-theme="dark"] .admin-user-dropdown { background: var(--mf-surface-2); border-color: var(--mf-border); color: var(--mf-text); } :root[data-theme="dark"] .admin-user-dropdown-head { border-bottom-color: var(--mf-border); } :root[data-theme="dark"] .admin-user-dropdown-head strong { color: var(--mf-text); } :root[data-theme="dark"] .admin-user-dropdown-head small { color: var(--mf-text-faint); } :root[data-theme="dark"] .admin-user-dropdown-avatar--initials { background: var(--mf-surface-alt); color: var(--mf-text-muted); } :root[data-theme="dark"] .admin-user-dropdown-item { color: var(--mf-text); } :root[data-theme="dark"] .admin-user-dropdown-item:hover { background: var(--mf-surface-alt); color: var(--mf-link-hover); } :root[data-theme="dark"] .admin-user-dropdown-sep { background: var(--mf-border); } :root[data-theme="dark"] .admin-user-dropdown-weather { color: var(--mf-text); } :root[data-theme="dark"] .admin-user-dropdown-weather:hover { background: var(--mf-surface-alt); color: var(--mf-link-hover); } :root[data-theme="dark"] .admin-user-dropdown-weather-city { color: var(--mf-text-faint); } :root[data-theme="dark"] .admin-user-dropdown-logout { color: var(--mf-danger); } :root[data-theme="dark"] .admin-user-dropdown-logout:hover { background: var(--mf-danger-soft); color: var(--mf-danger); } :root[data-theme="dark"] .admin-user-dropdown-item.is-current .admin-user-dropdown-badge { color: var(--mf-link); } /* --- Footer & breadcrumbs ------------------------------------------------- */ :root[data-theme="dark"] .admin-footer { background: var(--mf-surface); border-top-color: var(--mf-border); color: var(--mf-text-faint); } :root[data-theme="dark"] .breadcrumbs { color: var(--mf-text-faint); } :root[data-theme="dark"] .breadcrumbs .sep { color: var(--mf-border); } :root[data-theme="dark"] .breadcrumbs a { color: var(--mf-text-muted); } :root[data-theme="dark"] .breadcrumbs .current { color: var(--mf-text); } /* --- Card border ---------------------------------------------------------- */ :root[data-theme="dark"] .card { border-color: var(--mf-border); } /* --- Forms ---------------------------------------------------------------- */ :root[data-theme="dark"] .form-row label { color: var(--mf-text); } :root[data-theme="dark"] .form-row .help { color: var(--mf-text-faint); } :root[data-theme="dark"] .form-row input[type=text], :root[data-theme="dark"] .form-row input[type=email], :root[data-theme="dark"] .form-row input[type=password], :root[data-theme="dark"] .form-row input[type=number], :root[data-theme="dark"] .form-row textarea, :root[data-theme="dark"] .form-row select, :root[data-theme="dark"] .form-row input[type=file] { background: var(--mf-input-bg); color: var(--mf-text); border-color: var(--mf-border); } /* Visibility pills, buttons, flash, pills, login/error/installer shells, check items, plugin cards, logo preview, kv-list and danger zone no longer need a separate [data-theme="dark"] block: their base rules now resolve through semantic --mf-* tokens (success/danger/warning/-soft/-text, surface, text, border), so they track every skin — light AND dark — automatically. The old hardcoded-rgba dark overrides were removed because they masked the skin on non-default dark themes (orders #667 / #670). */ /* --- Notification bell internals ----------------------------------------- */ :root[data-theme="dark"] .mf-bell-head { background: var(--mf-surface-alt); border-bottom-color: var(--mf-border); } :root[data-theme="dark"] .mf-bell-mark-all { color: var(--mf-link); } :root[data-theme="dark"] .mf-bell-item { border-bottom-color: var(--mf-border-light); } :root[data-theme="dark"] .mf-bell-item:hover { background: var(--mf-surface-alt); } :root[data-theme="dark"] .mf-bell-item-icon { background: var(--mf-surface-alt); color: var(--mf-text); } :root[data-theme="dark"] .mf-bell-item-body { color: var(--mf-text-muted); } :root[data-theme="dark"] .mf-bell-item-time { color: var(--mf-text-faint); } :root[data-theme="dark"] .mf-bell-foot { background: var(--mf-surface-alt); border-top-color: var(--mf-border); } :root[data-theme="dark"] .mf-bell-view-all { color: var(--mf-link); } :root[data-theme="dark"] .mf-bell-prefs { color: var(--mf-text-faint); } :root[data-theme="dark"] .mf-bell-prefs:hover { color: var(--mf-text); } /* --- Sysmenu internals (panel itself is in the .card group above) -------- */ :root[data-theme="dark"] .mf-sysmenu-panel { color: var(--mf-text); } :root[data-theme="dark"] .mf-sysmenu-overview { border-bottom-color: var(--mf-border); } :root[data-theme="dark"] .mf-sysmenu-overview:hover { background: var(--mf-surface-alt); } :root[data-theme="dark"] .mf-sysmenu-section + .mf-sysmenu-section { border-top-color: var(--mf-border-light); } :root[data-theme="dark"] .mf-sysmenu-section-title { color: var(--mf-text-faint); } :root[data-theme="dark"] .mf-sysmenu-item:hover { background: var(--mf-surface-alt); } /* === Blanket dark overrides for plugin-level inline-style patterns ======== * * Plugin admin pages (and some core pages) embed