/* PictureMeClubbing Slideshow Maker — Batch 2 editor shell Mobile-first. No horizontal overflow. Large touch targets. Dark Editor Theme + Visual Polish batch: this file now ships a real Light/Dark theme system built on CSS custom properties ("design tokens"), selected by a single `data-theme="dark"|"light"` attribute on (set by app/js/theme.js, plus an early inline script in index.html/ videos.html that applies the persisted/system preference before first paint — see those files' own comments for why that duplication exists). Every surface/text/border/status color below reads from the token block immediately following this comment; there is deliberately no second, scattered set of ".dark-mode-something" overrides anywhere else in this file — a component's rule references a token ONCE and looks correct in both themes automatically, because the token's own VALUE changes between the :root block (light, default) and the :root[data-theme="dark"] block right after it. Dark Mode is an EDITOR-CHROME-ONLY concept: nothing in this file touches canvas rendering (that lives in app/js/*.js, drawing to with brand colors it reads from brand-state.js, completely independent of this stylesheet), and a small number of intentionally theme-INVARIANT tokens (--pmc-ink/--pmc-ink-soft, used only for canvas-adjacent placeholder chrome like the preview frame backdrop and the Adjust Grid Photos reposition frame, which were already dark in the original light-only design) are deliberately left constant across both themes rather than folded into the light/dark split. */ :root { /* ---- Brand accent — identical in both themes (existing PictureMeClubbing pink/magenta; the task for this batch explicitly asked to reuse the current brand color rather than invent a new one). ---- */ --pmc-pink: #e91e8c; /* ---- Theme-invariant "ink" tones — used only for canvas-adjacent placeholder/backdrop chrome (preview frame background, Adjust Grid Photos reposition frame, video-card placeholder background, small chip badges drawn on top of photo thumbnails) that was already dark in the pre-Dark-Mode design and sits immediately next to real photos/video, not next to the rest of the editor UI — so it intentionally does not shift with the Light/Dark toggle. ---- */ --pmc-ink: #14141b; --pmc-ink-soft: #1f1f29; --radius-md: 10px; --radius-lg: 16px; --touch-min: 44px; /* ---- Design tokens: LIGHT theme (default) ---- Conceptual roles (kept close to this project's pre-existing --pmc-* names where one already existed, so the several hundred existing `var(--pmc-border)`-style call sites throughout this file automatically become theme-aware for free, with zero per-call-site edits — only genuinely NEW surface/status concepts this batch introduces get a new token name): --app-bg page background --panel-bg top-level card/section background --panel-elevated-bg modal surfaces + the currently-OPEN accordion card's own background (one step "up" from the page, distinct from a collapsed sibling) --input-bg text input / select / textarea surface --pmc-text primary text --pmc-text-muted secondary/muted text --pmc-border "strong" border (card outlines, dropzone, control outlines that need to stay legible) --border-subtle "quiet" divider — replaces most of the dashed-gray-line separators this batch's own task explicitly asked to reduce --pmc-pink / hover accent / accent hover-or-pressed variant --pmc-danger/-success/-warning status text/icon colors --*-soft-bg low-contrast tinted chip backgrounds paired with the status colors above (preset cards, inline warnings, guidance chips, active-filter pills) — restrained accent use, not solid fills --shadow-color subtle elevation shadow tint --scrollbar-thumb custom scrollbar thumb color (where supported) */ --app-bg: #f4f2f7; --panel-bg: #ffffff; --panel-elevated-bg: #fbfaff; --input-bg: #f6f4f9; --pmc-text: #1a1a22; --pmc-text-muted: #6b6b78; --pmc-border: #ddd7e0; --border-subtle: #ece8f0; --pmc-pink-dark: #b0136a; /* LIGHT theme: hover/pressed goes DARKER */ --pmc-danger: #c0334a; --danger-soft-bg: #fdecef; --pmc-success: #2a6b2f; --success-soft-bg: #eef8ee; --pmc-warning: #8a6414; --warning-soft-bg: #fff8e6; --accent-soft-bg: #fdf1f7; --accent-soft-border: #f3c9de; --pmc-focus: #6d4fe0; --shadow-color: rgba(20, 20, 27, 0.14); --scrollbar-thumb: #c9c3d3; --toggle-track-off: #c9c3d3; color-scheme: light; } /* ---- Design tokens: DARK theme ---- Same token NAMES as the light block above — every rule elsewhere in this file that reads one of them is automatically correct here too, with no separate override rule required. Values follow the batch's own explicit visual direction: deep charcoal app background, a slightly lighter charcoal for panels, another distinct step for elevated surfaces/modals/the open accordion card, and a step DARKER again for recessed input fields (a field should read as "sunken into" its panel, not as another panel floating on top of it) — background, panel, and input are all deliberately different tones, never the same flat black (this file's own task explicitly warned against that). Text uses a soft off-white rather than pure #fff (glare), and status colors are lightened versions of their light-theme counterparts so they stay clearly readable against a dark surface instead of reading as muddy dark-on-dark. */ :root[data-theme="dark"] { --app-bg: #14131a; --panel-bg: #1c1b23; --panel-elevated-bg: #242330; --input-bg: #121118; --pmc-text: #ece9f2; --pmc-text-muted: #9c99a8; --pmc-border: #3c3a46; --border-subtle: #2a2933; --pmc-pink-dark: #ff5fb8; /* DARK theme: hover/pressed goes LIGHTER, not darker, to stay visible */ --pmc-danger: #ff6b81; --danger-soft-bg: rgba(255, 107, 129, 0.16); --pmc-success: #7ad986; --success-soft-bg: rgba(122, 217, 134, 0.14); --pmc-warning: #f0b846; --warning-soft-bg: rgba(240, 184, 70, 0.14); --accent-soft-bg: rgba(233, 30, 140, 0.16); --accent-soft-border: rgba(233, 30, 140, 0.45); --pmc-focus: #b79dff; --shadow-color: rgba(0, 0, 0, 0.55); --scrollbar-thumb: #46434f; --toggle-track-off: #3c3a46; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; max-width: 100%; } /* Mobile/Touch UI QA batch root-cause fix: `overflow-x: hidden` was previously declared on BOTH html and body. Per the CSS overflow spec, declaring overflow-x as anything other than visible forces the computed overflow-y to `auto` too (even though it was never written) — so BOTH elements silently became scroll containers, even though the browser's real `document.scrollingElement` is (and always was) `html` alone; body's own "scroll box" never actually scrolls (its content is always exactly as tall as itself), it just sits there satisfying the CSS Positioned Layout spec's "nearest ancestor with a scroll box" rule for `position: sticky` — which made `.app-header` (a direct child of body) and, at the desktop breakpoint, `.workspace-preview` stick relative to body's own inert, never-scrolling box instead of the real page scroller, making `position: sticky` a complete no-op everywhere in the app, at every viewport width, not just mobile. Fixing it needs only ONE of the two ancestors to own overflow-x: hidden — html alone is both sufficient (any horizontal overflow from body's content is still clipped by html's own overflow-x:hidden, since body sits inside html) and correct (it matches the browser's actual scrollingElement), so body's copy is removed rather than html's. */ html { overflow-x: hidden; } body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--pmc-text); background: var(--app-bg); line-height: 1.4; } /* Dark Editor Theme + Visual Polish batch: a short, deliberately narrow crossfade on the handful of highest-visual-area surfaces when the theme itself changes — NOT a general "animate everything" rule, and gated behind prefers-reduced-motion exactly like this file's existing .tray-item drag-transition guard, so a user who has asked for less motion gets an instant, un-animated theme switch instead. */ @media (prefers-reduced-motion: no-preference) { body, .app-header, .settings-section, .settings-subsection, .export-dialog, .field input, .field select, .btn { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } } h1, h2, h3 { margin: 0 0 0.5rem 0; line-height: 1.2; } button { font-family: inherit; } .visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Buttons ---------- */ /* Three roles, unchanged from before this batch (Export/Save = primary, ordinary actions = secondary, destructive = danger) — real-browser review of every current button assignment found the existing 3-tier system already matches this batch's own requested hierarchy exactly (Export/Save Preset primary, Previous/Next/Restart/Cancel/Manage secondary, Delete danger), so no button's class was reassigned; only their token-driven colors changed. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); padding: 0.5rem 1.1rem; border-radius: var(--radius-md); border: 2px solid transparent; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: center; } .btn:focus-visible { outline: 3px solid var(--pmc-focus); outline-offset: 2px; } .btn-primary { background: var(--pmc-pink); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--pmc-pink-dark); } .btn-secondary { background: var(--panel-elevated-bg); /* Found via real-browser review while converting this file to tokens: this previously read var(--pmc-ink) — always near-black — which was harmless on the light theme's white button surface but would have been completely unreadable on a dark theme's dark button surface. Every other button already used a theme-aware text color; this was the one latent exception. */ color: var(--pmc-text); border-color: var(--pmc-border); } .btn-secondary:hover { border-color: var(--pmc-pink); } .btn-danger { background: var(--panel-elevated-bg); color: var(--pmc-danger); border-color: var(--pmc-danger); } .btn-danger:hover:not(:disabled) { background: var(--pmc-danger); color: #fff; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Dark Editor Theme + Visual Polish batch: 0.5 opacity over a dark button surface sits closer to the panel behind it than the same 0.5 does over a light surface — bumped slightly darker-theme-only so a disabled button stays clearly distinguishable from an enabled one without changing the light theme's already-fine appearance. */ :root[data-theme="dark"] .btn:disabled { opacity: 0.62; } /* Mobile Editor IA Redesign: found via real-browser testing — .btn's own `display: inline-flex` above is an AUTHOR rule, so per the CSS cascade it always wins over the browser's UA-stylesheet `[hidden] { display: none }` rule, regardless of selector specificity (the exact ".export-result[hidden]" precedent already documented further down this file) — without this, setting `.hidden = true` on any `