/* === MediaForce site themes — the single, site-wide palette layer === * * One theme paints the whole app. : * data-theme = light|dark|auto → drives every component override in admin.css * data-skin = → overrides the --mf-* tokens below * * Plugins inherit --mf-* through their own "system" alias blocks, so this * one layer themes every page and every plugin (orders #581–585). * * Loaded AFTER admin.css, so a skin's --mf-* override wins the (equal- * specificity) tie against admin.css :root / [data-theme="dark"] defaults. * * 'system' has no block here — it falls through to the adaptive admin.css * light/dark defaults, following the OS. * * Only the palette-identity tokens are overridden per skin; semantic * colours (success/danger/warning) and shadows fall back to the admin.css * light or dark baseline carried by data-theme. */ /* ── Light — neutral ─────────────────────────────────────────────────── */ :root[data-skin="paper"] { --mf-bg:#f4f5f7; --mf-surface:#ffffff; --mf-surface-alt:#f8f9fb; --mf-surface-2:#ffffff; --mf-text:#1d2129; --mf-text-muted:#6b7280; --mf-text-faint:#a3a8b0; --mf-border:#e3e6ea; --mf-border-light:#eef1f5; --mf-primary:#1f6feb; --mf-primary-hover:#3b82f6; --mf-link:#1f6feb; --mf-link-hover:#3b82f6; --mf-input-bg:#ffffff; } :root[data-skin="nordic"] { --mf-bg:#eef2f4; --mf-surface:#f9fbfc; --mf-surface-alt:#f1f5f7; --mf-surface-2:#ffffff; --mf-text:#1c2b33; --mf-text-muted:#5a6b73; --mf-text-faint:#93a3ab; --mf-border:#d7e0e4; --mf-border-light:#e6edf0; --mf-primary:#0d8a8a; --mf-primary-hover:#0fa3a3; --mf-link:#0d8a8a; --mf-link-hover:#0fa3a3; --mf-input-bg:#f9fbfc; } :root[data-skin="graphite"] { --mf-bg:#ececec; --mf-surface:#f6f6f6; --mf-surface-alt:#f0f0f0; --mf-surface-2:#ffffff; --mf-text:#1f2225; --mf-text-muted:#5f6469; --mf-text-faint:#989da3; --mf-border:#dcdee0; --mf-border-light:#e8e9eb; --mf-primary:#0aa3c2; --mf-primary-hover:#10bcdf; --mf-link:#0aa3c2; --mf-link-hover:#10bcdf; --mf-input-bg:#ffffff; } :root[data-skin="linen"] { --mf-bg:#f8f6f1; --mf-surface:#fffdf8; --mf-surface-alt:#f3f0e8; --mf-surface-2:#fffefb; --mf-text:#2b2620; --mf-text-muted:#6a6256; --mf-text-faint:#a39a8a; --mf-border:#e6e0d4; --mf-border-light:#f0ebe1; --mf-primary:#c2562b; --mf-primary-hover:#d96834; --mf-link:#c2562b; --mf-link-hover:#d96834; --mf-input-bg:#fffdf8; } :root[data-skin="cobalt"] { --mf-bg:#f9f9f7; --mf-surface:#ffffff; --mf-surface-alt:#f3f4f6; --mf-surface-2:#ffffff; --mf-text:#1a1d21; --mf-text-muted:#5f6671; --mf-text-faint:#9aa1ab; --mf-border:#e2e5ea; --mf-border-light:#eef0f3; --mf-primary:#1a73e8; --mf-primary-hover:#3b8aff; --mf-link:#1a73e8; --mf-link-hover:#3b8aff; --mf-input-bg:#ffffff; } /* ── Light — warm ────────────────────────────────────────────────────── */ :root[data-skin="cream"] { --mf-bg:#f3ecde; --mf-surface:#fbf7ec; --mf-surface-alt:#f6efdf; --mf-surface-2:#fffaf0; --mf-text:#2d231a; --mf-text-muted:#6c5a40; --mf-text-faint:#a4906e; --mf-border:#e3d8be; --mf-border-light:#eee3cd; --mf-primary:#7a5c2e; --mf-primary-hover:#946f38; --mf-link:#7a5c2e; --mf-link-hover:#946f38; --mf-input-bg:#fffaf0; } :root[data-skin="sepia"] { --mf-bg:#ecdfc4; --mf-surface:#f6ecd4; --mf-surface-alt:#f0e5cb; --mf-surface-2:#fbf3df; --mf-text:#3a2a14; --mf-text-muted:#6b4a1f; --mf-text-faint:#9c8052; --mf-border:#ddccaa; --mf-border-light:#e8dabb; --mf-primary:#6b4a1f; --mf-primary-hover:#855c28; --mf-link:#6b4a1f; --mf-link-hover:#855c28; --mf-input-bg:#fbf3df; } :root[data-skin="tobacco"] { --mf-bg:#e8dfd0; --mf-surface:#f3ead9; --mf-surface-alt:#ece2d0; --mf-surface-2:#f8f0e1; --mf-text:#2f2618; --mf-text-muted:#6e5a3a; --mf-text-faint:#a08e6e; --mf-border:#d8cbb2; --mf-border-light:#e4d8c2; --mf-primary:#9b6f1e; --mf-primary-hover:#b78527; --mf-link:#9b6f1e; --mf-link-hover:#b78527; --mf-input-bg:#f8f0e1; } :root[data-skin="parchment"] { --mf-bg:#efede8; --mf-surface:#f9f9f7; --mf-surface-alt:#f2f0ea; --mf-surface-2:#fffffe; --mf-text:#2a2724; --mf-text-muted:#6a6258; --mf-text-faint:#9c948a; --mf-border:#e0ddd5; --mf-border-light:#ecebe4; --mf-primary:#7a5fa8; --mf-primary-hover:#8f73bd; --mf-link:#7a5fa8; --mf-link-hover:#8f73bd; --mf-input-bg:#fffffe; } :root[data-skin="bordeaux"] { --mf-bg:#f0e8e4; --mf-surface:#fbf6f3; --mf-surface-alt:#f3ebe6; --mf-surface-2:#fdf9f7; --mf-text:#2c1f1d; --mf-text-muted:#6b524d; --mf-text-faint:#a08a85; --mf-border:#e2d3cd; --mf-border-light:#ece0db; --mf-primary:#99313d; --mf-primary-hover:#b53c4a; --mf-link:#99313d; --mf-link-hover:#b53c4a; --mf-input-bg:#fdf9f7; } :root[data-skin="manuscript"] { --mf-bg:#efeadd; --mf-surface:#fbf7ea; --mf-surface-alt:#f3eede; --mf-surface-2:#fffdf3; --mf-text:#1c2533; --mf-text-muted:#4a566b; --mf-text-faint:#8a93a3; --mf-border:#ddd3bb; --mf-border-light:#e8e0cc; --mf-primary:#1c3766; --mf-primary-hover:#264a85; --mf-link:#1c3766; --mf-link-hover:#264a85; --mf-input-bg:#fffdf3; } /* ── Light — cool / calm ─────────────────────────────────────────────── */ :root[data-skin="sage"] { --mf-bg:#e6ece6; --mf-surface:#f2f6f1; --mf-surface-alt:#e9efe8; --mf-surface-2:#f8fbf7; --mf-text:#233028; --mf-text-muted:#4a5a4f; --mf-text-faint:#8a988e; --mf-border:#d2ddd2; --mf-border-light:#e0e9e0; --mf-primary:#4a7158; --mf-primary-hover:#598a6b; --mf-link:#4a7158; --mf-link-hover:#598a6b; --mf-input-bg:#f8fbf7; } :root[data-skin="forest"] { --mf-bg:#e7ebe4; --mf-surface:#f3f5ee; --mf-surface-alt:#eaeee6; --mf-surface-2:#f8faf3; --mf-text:#232a20; --mf-text-muted:#4f5a45; --mf-text-faint:#8a937e; --mf-border:#d4dcc9; --mf-border-light:#e2e8d8; --mf-primary:#3f6b3a; --mf-primary-hover:#4d8347; --mf-link:#3f6b3a; --mf-link-hover:#4d8347; --mf-input-bg:#f8faf3; } :root[data-skin="lavender"] { --mf-bg:#ebe6f3; --mf-surface:#f6f3fb; --mf-surface-alt:#efe9f6; --mf-surface-2:#fcfaff; --mf-text:#2a2333; --mf-text-muted:#574a6b; --mf-text-faint:#948aa3; --mf-border:#ddd3ef; --mf-border-light:#e9e2f5; --mf-primary:#6a4a8f; --mf-primary-hover:#8059ab; --mf-link:#6a4a8f; --mf-link-hover:#8059ab; --mf-input-bg:#fcfaff; } :root[data-skin="slate"] { --mf-bg:#e8ecf0; --mf-surface:#f4f6f9; --mf-surface-alt:#eaeff3; --mf-surface-2:#fbfcfe; --mf-text:#1f2a33; --mf-text-muted:#51606b; --mf-text-faint:#8a98a3; --mf-border:#d3dde4; --mf-border-light:#e3eaef; --mf-primary:#2f6f8f; --mf-primary-hover:#3a86ab; --mf-link:#2f6f8f; --mf-link-hover:#3a86ab; --mf-input-bg:#fbfcfe; } :root[data-skin="solarized-light"] { --mf-bg:#eee8d5; --mf-surface:#fdf6e3; --mf-surface-alt:#f0ead8; --mf-surface-2:#fffbef; --mf-text:#073642; --mf-text-muted:#586e75; --mf-text-faint:#93a1a1; --mf-border:#ddd6c1; --mf-border-light:#e8e1cd; --mf-primary:#268bd2; --mf-primary-hover:#3a9ee5; --mf-link:#268bd2; --mf-link-hover:#3a9ee5; --mf-input-bg:#fffbef; } :root[data-skin="nextcloud"] { --mf-bg:#f5f5f5; --mf-surface:#ffffff; --mf-surface-alt:#f0f0f0; --mf-surface-2:#ffffff; --mf-text:#1a1a1a; --mf-text-muted:#5b5b5b; --mf-text-faint:#969696; --mf-border:#e0e0e0; --mf-border-light:#ededed; --mf-primary:#0082c9; --mf-primary-hover:#1a96db; --mf-link:#0082c9; --mf-link-hover:#1a96db; --mf-input-bg:#ffffff; } /* ── Dark ────────────────────────────────────────────────────────────── */ :root[data-skin="graphite-night"] { --mf-bg:#1a1d22; --mf-surface:#23272e; --mf-surface-alt:#1f2329; --mf-surface-2:#2a2f37; --mf-text:#e6e9ee; --mf-text-muted:#a6aeb9; --mf-text-faint:#79818c; --mf-border:#313742; --mf-border-light:#272c34; --mf-primary:#7fb3ff; --mf-primary-hover:#9cc6ff; --mf-link:#7fb3ff; --mf-link-hover:#9cc6ff; --mf-input-bg:#1f2329; } :root[data-skin="inkwell"] { --mf-bg:#0c1320; --mf-surface:#15203a; --mf-surface-alt:#101a30; --mf-surface-2:#1b2944; --mf-text:#dde6f5; --mf-text-muted:#9fb0c8; --mf-text-faint:#6f8099; --mf-border:#243352; --mf-border-light:#1a2740; --mf-primary:#6ea8fe; --mf-primary-hover:#8cbcff; --mf-link:#6ea8fe; --mf-link-hover:#8cbcff; --mf-input-bg:#101a30; } :root[data-skin="midnight"] { --mf-bg:#0f1419; --mf-surface:#1a2029; --mf-surface-alt:#141a22; --mf-surface-2:#222a35; --mf-text:#e8e6e0; --mf-text-muted:#aaa495; --mf-text-faint:#7a766a; --mf-border:#2a323d; --mf-border-light:#1f262f; --mf-primary:#f4a261; --mf-primary-hover:#f7b67e; --mf-link:#f4a261; --mf-link-hover:#f7b67e; --mf-input-bg:#141a22; } :root[data-skin="carbon"] { --mf-bg:#0a0a0a; --mf-surface:#161616; --mf-surface-alt:#101010; --mf-surface-2:#1e1e1e; --mf-text:#e8e8e8; --mf-text-muted:#a0a0a0; --mf-text-faint:#6e6e6e; --mf-border:#262626; --mf-border-light:#1b1b1b; --mf-primary:#9bd62a; --mf-primary-hover:#aee63f; --mf-link:#9bd62a; --mf-link-hover:#aee63f; --mf-input-bg:#101010; } :root[data-skin="solarized-dark"] { --mf-bg:#002b36; --mf-surface:#073642; --mf-surface-alt:#02303b; --mf-surface-2:#0a3d49; --mf-text:#93a1a1; --mf-text-muted:#96a4a6; --mf-text-faint:#76888e; --mf-border:#0e4651; --mf-border-light:#073642; --mf-primary:#2aa198; --mf-primary-hover:#33bcb1; --mf-link:#2aa198; --mf-link-hover:#33bcb1; --mf-input-bg:#02303b; } :root[data-skin="steel-night"] { --mf-bg:#14181d; --mf-surface:#1e242b; --mf-surface-alt:#181d23; --mf-surface-2:#28303a; --mf-text:#dfe5ec; --mf-text-muted:#9aa6b3; --mf-text-faint:#717d8c; --mf-border:#2b343f; --mf-border-light:#20272f; --mf-primary:#5fa8d6; --mf-primary-hover:#79bce4; --mf-link:#5fa8d6; --mf-link-hover:#79bce4; --mf-input-bg:#181d23; } /* ── Dark — added #632 ───────────────────────────────────────────────── */ :root[data-skin="obsidian"] { --mf-bg:#0b0e14; --mf-surface:#141923; --mf-surface-alt:#0f131c; --mf-surface-2:#1b2230; --mf-text:#dbe2ee; --mf-text-muted:#9aa6b8; --mf-text-faint:#6b7689; --mf-border:#222a39; --mf-border-light:#181f2b; --mf-primary:#56b6ff; --mf-primary-hover:#76c5ff; --mf-link:#56b6ff; --mf-link-hover:#76c5ff; --mf-input-bg:#0f131c; } :root[data-skin="dracula"] { --mf-bg:#282a36; --mf-surface:#343746; --mf-surface-alt:#2d2f3d; --mf-surface-2:#3c3f51; --mf-text:#f8f8f2; --mf-text-muted:#bcc0d6; --mf-text-faint:#8a8fa8; --mf-border:#44475a; --mf-border-light:#383b4c; --mf-primary:#bd93f9; --mf-primary-hover:#cda9ff; --mf-link:#8be9fd; --mf-link-hover:#a4f0ff; --mf-input-bg:#2d2f3d; } :root[data-skin="tokyo-night"] { --mf-bg:#1a1b26; --mf-surface:#24283b; --mf-surface-alt:#1e2030; --mf-surface-2:#2c3047; --mf-text:#c0caf5; --mf-text-muted:#9aa5ce; --mf-text-faint:#767d9c; --mf-border:#2f344d; --mf-border-light:#252a3d; --mf-primary:#7aa2f7; --mf-primary-hover:#96b6ff; --mf-link:#7dcfff; --mf-link-hover:#9adcff; --mf-input-bg:#1e2030; } :root[data-skin="gruvbox-dark"] { --mf-bg:#1d2021; --mf-surface:#282828; --mf-surface-alt:#232425; --mf-surface-2:#32302f; --mf-text:#ebdbb2; --mf-text-muted:#bdae93; --mf-text-faint:#928374; --mf-border:#3c3836; --mf-border-light:#2e2c2a; --mf-primary:#fabd2f; --mf-primary-hover:#fcca4f; --mf-link:#83a598; --mf-link-hover:#9bbbaf; --mf-input-bg:#232425; } :root[data-skin="nord-dark"] { --mf-bg:#2e3440; --mf-surface:#3b4252; --mf-surface-alt:#343b48; --mf-surface-2:#434c5e; --mf-text:#eceff4; --mf-text-muted:#c0c7d4; --mf-text-faint:#949eae; --mf-border:#434c5e; --mf-border-light:#3a4252; --mf-primary:#88c0d0; --mf-primary-hover:#9fd0de; --mf-link:#81a1c1; --mf-link-hover:#97b4d1; --mf-input-bg:#343b48; } :root[data-skin="mocha"] { --mf-bg:#1e1e2e; --mf-surface:#2a2a3c; --mf-surface-alt:#242435; --mf-surface-2:#313145; --mf-text:#cdd6f4; --mf-text-muted:#a6adc8; --mf-text-faint:#7f849c; --mf-border:#363a52; --mf-border-light:#2b2e42; --mf-primary:#cba6f7; --mf-primary-hover:#d8bcff; --mf-link:#89b4fa; --mf-link-hover:#a3c6ff; --mf-input-bg:#242435; } :root[data-skin="crimson-dark"] { --mf-bg:#15100f; --mf-surface:#201817; --mf-surface-alt:#1a1413; --mf-surface-2:#2a2020; --mf-text:#f2e4e3; --mf-text-muted:#b89e9d; --mf-text-faint:#856e6d; --mf-border:#3a2a29; --mf-border-light:#2a1f1e; --mf-primary:#e5484d; --mf-primary-hover:#f06367; --mf-link:#e5484d; --mf-link-hover:#f06367; --mf-input-bg:#1a1413; } :root[data-skin="emerald-dark"] { --mf-bg:#0c1512; --mf-surface:#13201b; --mf-surface-alt:#0f1a16; --mf-surface-2:#1a2c24; --mf-text:#dcefe6; --mf-text-muted:#9bb8ac; --mf-text-faint:#6c857b; --mf-border:#22382f; --mf-border-light:#192b23; --mf-primary:#34d399; --mf-primary-hover:#52e0ac; --mf-link:#34d399; --mf-link-hover:#52e0ac; --mf-input-bg:#0f1a16; } /* ── Dark — ported from desktop apps (#645, #646) ────────────────────── */ :root[data-skin="nextcloud-dark"] { /* The real Nextcloud dark palette (#645), lifted from cloud.dkq.dk apps/theming DarkTheme.php and its Color util. Brand blue #0082c9 is brightened to #1a9ee6 for legibility on the near-black background. */ --mf-bg:#171717; --mf-surface:#292929; --mf-surface-alt:#212121; --mf-surface-2:#3b3b3b; --mf-text:#ebebeb; --mf-text-muted:#a6a6a6; --mf-text-faint:#898989; --mf-border:#2e2e2e; --mf-border-light:#242424; --mf-primary:#0082c9; --mf-primary-hover:#1a9ee6; --mf-link:#1a9ee6; --mf-link-hover:#36b1f0; --mf-input-bg:#212121; } :root[data-skin="sunset-color"] { /* digiKam "Sunset Color" .colors scheme (#646) — warm sand text on charcoal, brown selection, golden dusk hover glow. */ --mf-bg:#171715; --mf-surface:#262624; --mf-surface-alt:#1e1e1c; --mf-surface-2:#3d3c38; --mf-text:#cbb9a5; --mf-text-muted:#b1a699; --mf-text-faint:#918981; --mf-border:#34322e; --mf-border-light:#262624; --mf-primary:#e0a458; --mf-primary-hover:#ffe999; --mf-link:#808ca2; --mf-link-hover:#9aa6bd; --mf-input-bg:#1e1e1c; } :root[data-skin="davinci-resolve"] { /* DaVinci Resolve's signature cool blue-grey grading-suite UI (#649). Reproduced by eye — Resolve's UI isn't file-themable. */ --mf-bg:#1c2025; --mf-surface:#262b32; --mf-surface-alt:#21262c; --mf-surface-2:#2f353d; --mf-text:#c2c7d0; --mf-text-muted:#989ea8; --mf-text-faint:#7c828c; --mf-border:#343b44; --mf-border-light:#2a3038; --mf-primary:#4a90d9; --mf-primary-hover:#5fa3e8; --mf-link:#5fa3e8; --mf-link-hover:#79b4ee; --mf-input-bg:#21262c; } /* ── Dark — complete-black backgrounds (#667) ────────────────────────── */ /* Near-pure-black bg so the whole screen — content AND the themed chrome — reads as one solid dark. surface sits a hair above black for cards/panels; surface-2 is the elevated step for modals/dropdowns. */ :root[data-skin="void"] { --mf-bg:#000000; --mf-surface:#0b0b0b; --mf-surface-alt:#070707; --mf-surface-2:#161616; --mf-text:#e9edf2; --mf-text-muted:#9aa2ad; --mf-text-faint:#6b727c; --mf-border:#1c1f24; --mf-border-light:#121316; --mf-primary:#4da3ff; --mf-primary-hover:#6fb6ff; --mf-link:#4da3ff; --mf-link-hover:#6fb6ff; --mf-input-bg:#070707; } :root[data-skin="matrix"] { --mf-bg:#000000; --mf-surface:#0a0f0a; --mf-surface-alt:#060a06; --mf-surface-2:#111811; --mf-text:#c9f5d2; --mf-text-muted:#7fae89; --mf-text-faint:#577a5f; --mf-border:#16241a; --mf-border-light:#0e160f; --mf-primary:#00d96a; --mf-primary-hover:#2eea88; --mf-link:#43e08a; --mf-link-hover:#63e89f; --mf-input-bg:#060a06; } :root[data-skin="deep-ocean"] { --mf-bg:#00060e; --mf-surface:#04101e; --mf-surface-alt:#030c17; --mf-surface-2:#0a1c30; --mf-text:#d6e6f5; --mf-text-muted:#8fa6bd; --mf-text-faint:#5f7488; --mf-border:#13283c; --mf-border-light:#0c1d2d; --mf-primary:#2bb3ff; --mf-primary-hover:#52c4ff; --mf-link:#2bb3ff; --mf-link-hover:#52c4ff; --mf-input-bg:#030c17; } :root[data-skin="blackcurrant"] { --mf-bg:#08060c; --mf-surface:#150e1c; --mf-surface-alt:#100a16; --mf-surface-2:#211530; --mf-text:#ece4f5; --mf-text-muted:#a99bbd; --mf-text-faint:#776a88; --mf-border:#2a1e3a; --mf-border-light:#1c142a; --mf-primary:#b66dff; --mf-primary-hover:#c98aff; --mf-link:#b66dff; --mf-link-hover:#c98aff; --mf-input-bg:#100a16; } :root[data-skin="ember-black"] { --mf-bg:#0a0503; --mf-surface:#160b06; --mf-surface-alt:#100804; --mf-surface-2:#24130b; --mf-text:#f4e4d8; --mf-text-muted:#b89c89; --mf-text-faint:#856e5d; --mf-border:#332014; --mf-border-light:#1e120a; --mf-primary:#ff7a33; --mf-primary-hover:#ff9355; --mf-link:#ff7a33; --mf-link-hover:#ff9355; --mf-input-bg:#100804; } :root[data-skin="ruby-black"] { --mf-bg:#0c0406; --mf-surface:#1a0a0d; --mf-surface-alt:#13070a; --mf-surface-2:#2a1116; --mf-text:#f5e2e6; --mf-text-muted:#bd99a1; --mf-text-faint:#886a70; --mf-border:#3a1c22; --mf-border-light:#2a1318; --mf-primary:#ff4d6d; --mf-primary-hover:#ff6f88; --mf-link:#ff4d6d; --mf-link-hover:#ff6f88; --mf-input-bg:#13070a; } /* ── Light — added #632 ──────────────────────────────────────────────── */ :root[data-skin="gruvbox-light"] { --mf-bg:#f9f5d7; --mf-surface:#fbf1c7; --mf-surface-alt:#f3eac3; --mf-surface-2:#fdf8df; --mf-text:#3c3836; --mf-text-muted:#665c54; --mf-text-faint:#928374; --mf-border:#e6dcb3; --mf-border-light:#efe7c6; --mf-primary:#b57614; --mf-primary-hover:#cf8a1d; --mf-link:#076678; --mf-link-hover:#0a7d92; --mf-input-bg:#fdf8df; } :root[data-skin="rose"] { --mf-bg:#fbeef0; --mf-surface:#fdf6f7; --mf-surface-alt:#f8e7ea; --mf-surface-2:#fffafb; --mf-text:#3a262c; --mf-text-muted:#7a5560; --mf-text-faint:#ab8a92; --mf-border:#f0d6dc; --mf-border-light:#f6e4e8; --mf-primary:#c2185b; --mf-primary-hover:#d83571; --mf-link:#c2185b; --mf-link-hover:#d83571; --mf-input-bg:#fffafb; } :root[data-skin="mint"] { --mf-bg:#e8f5ef; --mf-surface:#f4fbf8; --mf-surface-alt:#e2f1ea; --mf-surface-2:#f9fefc; --mf-text:#13322a; --mf-text-muted:#47675c; --mf-text-faint:#82a097; --mf-border:#cfe7dd; --mf-border-light:#deefe8; --mf-primary:#0d9488; --mf-primary-hover:#11a99b; --mf-link:#0d9488; --mf-link-hover:#11a99b; --mf-input-bg:#f9fefc; } :root[data-skin="sky"] { --mf-bg:#eaf3fb; --mf-surface:#f6fafe; --mf-surface-alt:#e3eef9; --mf-surface-2:#fbfdff; --mf-text:#10293c; --mf-text-muted:#496379; --mf-text-faint:#8499ab; --mf-border:#d2e3f2; --mf-border-light:#e2eefa; --mf-primary:#0284c7; --mf-primary-hover:#0a9ae3; --mf-link:#0284c7; --mf-link-hover:#0a9ae3; --mf-input-bg:#fbfdff; } /* ── Social / brand — added #708 ─────────────────────────────────────── */ /* Palettes lifted by eye from each app's own UI: Facebook grey + #1877f2, Instagram white + magenta/IG-blue, WhatsApp chat paper + teal, Telegram sky blue, LinkedIn warm grey + navy, plus the dark modes (FB dark, IG black, Spotify, Discord blurple, X lights-out). Tokens follow the same shape as every other skin; data-theme (mode) carries light/dark. */ :root[data-skin="facebook"] { --mf-bg:#f0f2f5; --mf-surface:#ffffff; --mf-surface-alt:#e9ebee; --mf-surface-2:#ffffff; --mf-text:#050505; --mf-text-muted:#65676b; --mf-text-faint:#8a8d91; --mf-border:#ced0d4; --mf-border-light:#e4e6eb; --mf-primary:#1877f2; --mf-primary-hover:#166fe5; --mf-link:#1877f2; --mf-link-hover:#166fe5; --mf-input-bg:#ffffff; } :root[data-skin="instagram"] { --mf-bg:#fafafa; --mf-surface:#ffffff; --mf-surface-alt:#f5f5f5; --mf-surface-2:#ffffff; --mf-text:#262626; --mf-text-muted:#8e8e8e; --mf-text-faint:#c7c7c7; --mf-border:#dbdbdb; --mf-border-light:#efefef; --mf-primary:#e1306c; --mf-primary-hover:#f04f86; --mf-link:#0095f6; --mf-link-hover:#1aa3ff; --mf-input-bg:#fafafa; } :root[data-skin="whatsapp"] { --mf-bg:#efeae2; --mf-surface:#ffffff; --mf-surface-alt:#f0f2f5; --mf-surface-2:#ffffff; --mf-text:#111b21; --mf-text-muted:#667781; --mf-text-faint:#8696a0; --mf-border:#e1e5e7; --mf-border-light:#f0f2f5; --mf-primary:#00a884; --mf-primary-hover:#06cf9c; --mf-link:#027eb5; --mf-link-hover:#0297d6; --mf-input-bg:#ffffff; } :root[data-skin="telegram"] { --mf-bg:#eef3f8; --mf-surface:#ffffff; --mf-surface-alt:#f4f4f5; --mf-surface-2:#ffffff; --mf-text:#0f1419; --mf-text-muted:#707579; --mf-text-faint:#a8a8a8; --mf-border:#e4e7eb; --mf-border-light:#f0f2f5; --mf-primary:#3390ec; --mf-primary-hover:#4ea4f5; --mf-link:#3390ec; --mf-link-hover:#4ea4f5; --mf-input-bg:#ffffff; } :root[data-skin="linkedin"] { --mf-bg:#f4f2ee; --mf-surface:#ffffff; --mf-surface-alt:#f3f2ef; --mf-surface-2:#ffffff; --mf-text:#1d2226; --mf-text-muted:#56687a; --mf-text-faint:#8c8c8c; --mf-border:#e0dfdc; --mf-border-light:#ebebeb; --mf-primary:#0a66c2; --mf-primary-hover:#004182; --mf-link:#0a66c2; --mf-link-hover:#004182; --mf-input-bg:#ffffff; } :root[data-skin="facebook-dark"] { --mf-bg:#18191a; --mf-surface:#242526; --mf-surface-alt:#1c1c1d; --mf-surface-2:#3a3b3c; --mf-text:#e4e6eb; --mf-text-muted:#b0b3b8; --mf-text-faint:#8a8d91; --mf-border:#393a3b; --mf-border-light:#2d2e2f; --mf-primary:#2d88ff; --mf-primary-hover:#4a9bff; --mf-link:#2d88ff; --mf-link-hover:#4a9bff; --mf-input-bg:#3a3b3c; } :root[data-skin="instagram-dark"] { --mf-bg:#000000; --mf-surface:#121212; --mf-surface-alt:#0a0a0a; --mf-surface-2:#1c1c1c; --mf-text:#f5f5f5; --mf-text-muted:#a8a8a8; --mf-text-faint:#737373; --mf-border:#262626; --mf-border-light:#1a1a1a; --mf-primary:#e1306c; --mf-primary-hover:#f04f86; --mf-link:#0095f6; --mf-link-hover:#1aa3ff; --mf-input-bg:#0a0a0a; } :root[data-skin="spotify"] { --mf-bg:#121212; --mf-surface:#181818; --mf-surface-alt:#0d0d0d; --mf-surface-2:#282828; --mf-text:#ffffff; --mf-text-muted:#b3b3b3; --mf-text-faint:#757575; --mf-border:#2a2a2a; --mf-border-light:#1f1f1f; --mf-primary:#1db954; --mf-primary-hover:#1ed760; --mf-link:#1db954; --mf-link-hover:#1ed760; --mf-input-bg:#2a2a2a; } :root[data-skin="discord"] { --mf-bg:#1e1f22; --mf-surface:#2b2d31; --mf-surface-alt:#232428; --mf-surface-2:#383a40; --mf-text:#f2f3f5; --mf-text-muted:#b5bac1; --mf-text-faint:#848892; --mf-border:#3f4147; --mf-border-light:#2e3035; --mf-primary:#5865f2; --mf-primary-hover:#6873f5; --mf-link:#00a8fc; --mf-link-hover:#2ab7ff; --mf-input-bg:#383a40; } :root[data-skin="x-twitter"] { --mf-bg:#000000; --mf-surface:#16181c; --mf-surface-alt:#0a0a0a; --mf-surface-2:#202327; --mf-text:#e7e9ea; --mf-text-muted:#878b90; --mf-text-faint:#6d7174; --mf-border:#2f3336; --mf-border-light:#1c1f23; --mf-primary:#1d9bf0; --mf-primary-hover:#3aaaf5; --mf-link:#1d9bf0; --mf-link-hover:#3aaaf5; --mf-input-bg:#0a0a0a; } /* ── Dark — editor & aesthetic palettes (#780) ───────────────────────── */ /* Each lifted by eye from its namesake. Token shape matches every other skin; text/muted/faint chosen for AA legibility on the skin's own surfaces (the tools/theme-contrast hex-audit gate enforces it). */ :root[data-skin="one-dark"] { --mf-bg:#282c34; --mf-surface:#2c313a; --mf-surface-alt:#21252b; --mf-surface-2:#323844; --mf-text:#abb2bf; --mf-text-muted:#9ba2af; --mf-text-faint:#808692; --mf-border:#3b4048; --mf-border-light:#2f343d; --mf-primary:#61afef; --mf-primary-hover:#7cc0f5; --mf-link:#61afef; --mf-link-hover:#7cc0f5; --mf-input-bg:#21252b; } :root[data-skin="monokai"] { --mf-bg:#272822; --mf-surface:#2d2e27; --mf-surface-alt:#22231d; --mf-surface-2:#38392f; --mf-text:#f8f8f2; --mf-text-muted:#b6b8a8; --mf-text-faint:#908a72; --mf-border:#3e3f34; --mf-border-light:#2f3028; --mf-primary:#a6e22e; --mf-primary-hover:#b6ee4a; --mf-link:#66d9ef; --mf-link-hover:#82e3f5; --mf-input-bg:#22231d; } :root[data-skin="github-dark"] { --mf-bg:#0d1117; --mf-surface:#161b22; --mf-surface-alt:#0d1117; --mf-surface-2:#21262d; --mf-text:#c9d1d9; --mf-text-muted:#8b949e; --mf-text-faint:#717b85; --mf-border:#30363d; --mf-border-light:#21262d; --mf-primary:#58a6ff; --mf-primary-hover:#79b8ff; --mf-link:#58a6ff; --mf-link-hover:#79b8ff; --mf-input-bg:#0d1117; } :root[data-skin="ayu-mirage"] { --mf-bg:#1f2430; --mf-surface:#232834; --mf-surface-alt:#1a1f29; --mf-surface-2:#2a303c; --mf-text:#cccac2; --mf-text-muted:#9b9890; --mf-text-faint:#7e828c; --mf-border:#2e3540; --mf-border-light:#242a34; --mf-primary:#ffcc66; --mf-primary-hover:#ffd580; --mf-link:#73d0ff; --mf-link-hover:#8fd9ff; --mf-input-bg:#1a1f29; } :root[data-skin="rose-pine"] { --mf-bg:#191724; --mf-surface:#1f1d2e; --mf-surface-alt:#16141f; --mf-surface-2:#26233a; --mf-text:#e0def4; --mf-text-muted:#a39fc0; --mf-text-faint:#817c9c; --mf-border:#2a273f; --mf-border-light:#211e33; --mf-primary:#c4a7e7; --mf-primary-hover:#d2bbef; --mf-link:#ebbcba; --mf-link-hover:#f0cecd; --mf-input-bg:#16141f; } :root[data-skin="everforest"] { --mf-bg:#2d353b; --mf-surface:#343f44; --mf-surface-alt:#272e33; --mf-surface-2:#3d484d; --mf-text:#d3c6aa; --mf-text-muted:#afb8aa; --mf-text-faint:#919991; --mf-border:#404a50; --mf-border-light:#323b40; --mf-primary:#a7c080; --mf-primary-hover:#bdd49a; --mf-link:#7fbbb3; --mf-link-hover:#98ccc4; --mf-input-bg:#272e33; } :root[data-skin="palenight"] { --mf-bg:#292d3e; --mf-surface:#2f3447; --mf-surface-alt:#222536; --mf-surface-2:#353b50; --mf-text:#a6accd; --mf-text-muted:#a0a5c4; --mf-text-faint:#8388a8; --mf-border:#3a3f58; --mf-border-light:#2c3045; --mf-primary:#c792ea; --mf-primary-hover:#d6a9f0; --mf-link:#82aaff; --mf-link-hover:#9cbcff; --mf-input-bg:#222536; } :root[data-skin="synthwave"] { --mf-bg:#1a1426; --mf-surface:#241b35; --mf-surface-alt:#150f1f; --mf-surface-2:#2e2342; --mf-text:#f6e0ff; --mf-text-muted:#bda9d1; --mf-text-faint:#8f80a6; --mf-border:#382a4f; --mf-border-light:#281d3a; --mf-primary:#ff2e97; --mf-primary-hover:#ff5cae; --mf-link:#00e5ff; --mf-link-hover:#4ceeff; --mf-input-bg:#150f1f; } /* ════════════════════════════════════════════════════════════════════ * Footer + theme picker chrome — same fixed size on every page (order #582) * ════════════════════════════════════════════════════════════════════ */ /* Footer is ALWAYS visible and ALWAYS the same height. Content (left/right * spans) may differ per page; the box never changes size. */ .admin-footer { box-sizing: border-box; min-height: 34px; height: 34px; align-items: center; overflow: visible; /* let the picker popover escape upward */ } .admin-footer > span, .admin-footer > .mf-theme-footer { min-width: 0; white-space: nowrap; } /* Text yields first: real ellipsis (NOT display:flex, which kills * text-overflow) and free to shrink, so the line is always contained (#651). */ .admin-footer > span { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; } /* The theme picker is a control — it must never shrink or clip; the text * spans give up their width to it. */ .admin-footer > .mf-theme-footer { display: flex; align-items: center; flex: 0 0 auto; } /* The picker chip in the footer. */ .mf-theme-footer { position: relative; } .mf-theme-footer > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--mf-border, #e0e0e0); border-radius: 4px; background: var(--mf-surface, #fff); color: var(--mf-text-muted, #666); font-size: 12px; line-height: 1.4; } .mf-theme-footer > summary::-webkit-details-marker { display: none; } .mf-theme-footer > summary:hover { border-color: var(--mf-primary, #0066cc); color: var(--mf-text, #1a1a1a); } .mf-theme-footer > summary:focus-visible { outline: 2px solid var(--mf-primary, #0066cc); outline-offset: 1px; } .mf-theme-chip-sw, .mf-theme-tile-sw { display: inline-flex; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); } .mf-theme-chip-sw i { width: 9px; height: 14px; display: block; } .mf-theme-chip-name { font-weight: 500; } /* The popover opens UPWARD from the footer. */ .mf-theme-pop { position: absolute; bottom: calc(100% + 8px); right: 0; width: 320px; max-width: 86vw; background: var(--mf-surface-2, #fff); border: 1px solid var(--mf-border, #e0e0e0); border-radius: 8px; box-shadow: var(--mf-shadow-strong, 0 4px 16px rgba(0,0,0,0.1)); padding: 10px; z-index: 1200; } .mf-theme-pop-head { font-size: 11px; color: var(--mf-text-faint, #888); margin: 0 2px 8px; text-transform: uppercase; letter-spacing: 0.03em; } .mf-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 50vh; overflow: auto; } .mf-theme-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 4px 6px; border: 1px solid var(--mf-border, #e0e0e0); border-radius: 6px; background: var(--mf-surface, #fff); color: var(--mf-text, #1a1a1a); cursor: pointer; font-size: 11px; transition: border-color .1s, transform .1s; } .mf-theme-tile:hover { border-color: var(--mf-primary, #0066cc); } .mf-theme-tile:focus-visible { outline: 2px solid var(--mf-primary, #0066cc); outline-offset: 1px; } .mf-theme-tile.is-current { border-color: var(--mf-primary, #0066cc); box-shadow: 0 0 0 1px var(--mf-primary, #0066cc) inset; } .mf-theme-tile-sw i { width: 14px; height: 22px; display: block; } .mf-theme-tile-name { line-height: 1.2; text-align: center; } .mf-theme-tile input { position: absolute; opacity: 0; pointer-events: none; } /* "Reset this page to default theme" link under the grid. */ .mf-theme-reset { display: block; width: 100%; margin-top: 8px; padding: 5px 8px; border: 1px solid var(--mf-border, #e0e0e0); border-radius: 6px; background: transparent; color: var(--mf-text, #1a1a1a); font-size: 11px; cursor: pointer; } .mf-theme-reset:hover { color: var(--mf-text, #1a1a1a); border-color: var(--mf-primary, #0066cc); } .mf-theme-reset.is-hidden { display: none; } /* Webmaster-only "set system-wide" toggle in the theme popover (#704). */ .mf-theme-syswide { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 2px; font-size: 11px; color: var(--mf-text-muted, #666); cursor: pointer; user-select: none; } .mf-theme-syswide input { margin: 0; cursor: pointer; accent-color: var(--mf-primary, #0066cc); } /* Per-page overrides list on the profile preferences page. */ .mf-pagetheme-list { list-style: none; margin: 8px 0 0; padding: 0; } .mf-pagetheme-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--mf-border-light, #eee); } .mf-pagetheme-page { font-weight: 600; min-width: 120px; } .mf-pagetheme-theme { color: var(--mf-text-muted, #666); flex: 1; } .mf-pagetheme-reset { margin: 0; } /* Profile-page grid: roomier, more columns when there's space. */ .mf-theme-grid-profile { grid-template-columns: repeat(4, 1fr); max-height: none; margin-top: 8px; } @media (max-width: 640px) { .mf-theme-grid-profile { grid-template-columns: repeat(2, 1fr); } } /* TV layout — 10-foot UI: bigger tiles, bolder focus ring (LAW: four layouts). */ :root.is-tv .mf-theme-footer > summary { font-size: 16px; padding: 6px 12px; } :root.is-tv .mf-theme-pop { width: 520px; padding: 16px; } :root.is-tv .mf-theme-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } :root.is-tv .mf-theme-tile { font-size: 15px; padding: 12px 8px; } :root.is-tv .mf-theme-tile:focus-visible, :root.is-tv .mf-theme-tile.is-current { outline: 3px solid var(--mf-primary, #0066cc); outline-offset: 2px; }