/* ========================================================================== YOYAKU Label Light Theme Activated by adding .label-light on . Drives off CSS variables defined in dashboard.css and overrides hard-coded values where needed. ========================================================================== */ /* ANTI-FOUC (no black flash between page navigations) ----------------------- theme-toggle.js sets html[data-yy-theme-pending="light|dark"] synchronously in BEFORE body parses. These rules paint the right page bg before the body class is attached on DOMContentLoaded. The data-attr is removed in onReady() once body.label-light takes over. ------------------------------------------------------------------------ */ /* Ben directive 2026-05-08: light mode "beaucoup plus clair" — bumped main bg from #f7f7f5 (cream off-white) to #fafafa (true near-white) for max clarity. Cards stay #ffffff so the cream/white contrast still distinguishes surfaces. */ html[data-yy-theme-pending="light"] { background: #fafafa; } html[data-yy-theme-pending="light"] body { background: #fafafa !important; color: #1e1e1e; } body.label-light { /* Core palette overrides */ --bg-dark: #fafafa; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f1f2f0; --bg-input: #ffffff; --text-primary: #1e1e1e; --text-secondary: #55595f; --text-muted: #7c8288; --text-label: #4d5358; /* Ben directive 2026-05-08 (supersedes Phase H sky-blue): 'je veux pas écrire YOYAKU en bleu' + 'Light bouton en blanc, Dark en gris'. Reset accent ramp to neutral black/grey for max clarity in light mode. --accent + --accent-hover drive primary text/borders. --accent-subtle / --accent-glow are translucent black tints for hover/focus. --accent-light / --accent-light-hover are pale greys for backgrounds. */ --accent: #111111; --accent-hover: #2d2d2d; --accent-subtle: rgba(17, 17, 17, 0.07); --accent-glow: rgba(17, 17, 17, 0.14); --accent-light: #e5e7eb; --accent-light-hover: #d1d5db; --border: #d8d8d4; --border-hover: #b8bab6; --success: #16a34a; --error: #dc2626; background: var(--bg-dark); color: var(--text-primary); } /* Backgrounds & containers ------------------------------------------------- */ body.label-light, body.label-light .app-container, body.label-light .main-content, body.label-light main.main-content, body.label-light .submit-container, body.label-light .page-container, body.label-light .preview-layout { background: #fafafa !important; color: var(--text-primary); } /* Sidebar ------------------------------------------------------------------ */ body.label-light .sidebar { background: #ffffff !important; border-right: 1px solid #dededa; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.02); } body.label-light .sidebar-header h1, body.label-light .nav-section-title, body.label-light .nav-group-title, body.label-light h1, body.label-light h2, body.label-light h3, body.label-light h4 { color: #151515; } body.label-light .sidebar .version, body.label-light .nav-group-title { color: #8a8e92 !important; } body.label-light .nav-item { color: #5f6368; } body.label-light .nav-item:hover { background: #f2f2ef; color: #181818; } body.label-light .nav-item.active { /* Phase I 2026-05-08 — use --accent (sky blue pastel) not --accent-hover (darker). Ben wants the bleu pastel visible on active state, not a darker derivative. */ background: var(--accent-subtle) !important; color: var(--accent) !important; font-weight: 600; } body.label-light .nav-icon svg { stroke: currentColor; } body.label-light .sidebar-footer { border-top: 1px solid #ececea; } body.label-light .user-section, body.label-light .user-name-sidebar { color: #1e1e1e; } body.label-light .role-badge { background: #f0f0ed; color: #44484d; border: 1px solid #dededa; } body.label-light .logout-btn-sidebar { color: #5f6368; border: 1px solid #d8d8d4; background: #ffffff; } body.label-light .logout-btn-sidebar:hover { color: #181818; background: #f2f2ef; } /* Cards / sections / inputs ----------------------------------------------- */ body.label-light .user-bar, body.label-light .draft-area, body.label-light .form-section, body.label-light .ai-parser-zone .parser-dropzone, body.label-light .instructions-box, body.label-light .tracklist-card, body.label-light .info-item, body.label-light .admin-actions-block, body.label-light .pipeline-step, body.label-light .progress-steps, body.label-light .card, body.label-light .stat-card, body.label-light .panel, body.label-light .data-card, body.label-light .table-wrapper, body.label-light .modal, body.label-light .modal-content { background: #ffffff !important; border-color: #d8d8d4 !important; box-shadow: none !important; color: var(--text-primary); } body.label-light input, body.label-light textarea, body.label-light select, body.label-light .input-compact, body.label-light .date-input, body.label-light .price-input, body.label-light .edit-input, body.label-light .edit-textarea, body.label-light .edit-select { background: #ffffff !important; color: #181818 !important; border-color: #cfcfca !important; } body.label-light input:focus, body.label-light textarea:focus, body.label-light select:focus, body.label-light .input-compact:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-glow) !important; outline: none; } body.label-light input::placeholder, body.label-light textarea::placeholder { color: #8b9094; } /* Tables ------------------------------------------------------------------- */ body.label-light table { background: #ffffff; color: var(--text-primary); } body.label-light th, body.label-light thead th { background: #f1f2f0 !important; color: #1f2328 !important; border-bottom-color: #d8d8d4 !important; } body.label-light td { border-bottom-color: #ececea !important; color: var(--text-primary); } body.label-light tr:hover td { background: #fafafa !important; } /* Image upload slots ------------------------------------------------------- */ body.label-light .image-slot, body.label-light .image-slot-placeholder, body.label-light .drop-zone, body.label-light .mp3-dropzone, body.label-light .image-dropzone { background: #fbfbfa; border-color: #c9c9c3; color: #5f6368; } body.label-light .image-slot:hover, body.label-light .drop-zone:hover, body.label-light .mp3-dropzone:hover, body.label-light .image-dropzone:hover { background: var(--accent-subtle); border-color: var(--accent); } body.label-light .image-slot-label { background: rgba(255, 255, 255, 0.92); color: #2d2d2d; border-top: 1px solid #e0e0dc; } body.label-light .image-slot.is-vinyl-group { border-color: #b9b9b3; } body.label-light .vinyl-divider { color: #6c7278; border-top-color: #dededa; } body.label-light .vinyl-divider span { background: #f7f7f5; } /* Tags & badges ------------------------------------------------------------ */ body.label-light .badge-optional, body.label-light .badge-opt, body.label-light .badge-rec { background: #f0f0ed; border-color: #d6d6d1; color: #6a6f75; } body.label-light .tag, body.label-light .artist-tag, body.label-light .meta-pill.sku, body.label-light .ledger-badge.warn { background: var(--accent-subtle); color: var(--accent-hover); border: 1px solid var(--accent-light); } /* Tracklist + product info ------------------------------------------------ */ body.label-light .tracklist-with-audio .track-row, body.label-light .track-row, body.label-light .audio-track-card { border-color: #e2e2de !important; background: #ffffff; } body.label-light .track-name, body.label-light .product-artist, body.label-light .product-title, body.label-light .description, body.label-light .field-value, body.label-light .stat-value, body.label-light p, body.label-light label, body.label-light .label, body.label-light span { color: var(--text-primary); } body.label-light .text-muted, body.label-light .meta, body.label-light small { color: var(--text-muted) !important; } body.label-light .main-image, body.label-light .thumbnail { background: #eeeeea; } /* Buttons ------------------------------------------------------------------ */ body.label-light .convert-black-btn, body.label-light .btn-hold, body.label-light .btn-outline, body.label-light .btn-secondary, body.label-light .edit-cancel { background: #ffffff; border-color: #cfcfca; color: #44484d; } body.label-light .btn-primary, body.label-light .btn-create, body.label-light .btn.primary { background: var(--accent); color: #ffffff; border: 1px solid var(--accent); } body.label-light .btn-primary:hover, body.label-light .btn-create:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* Pipeline & status -------------------------------------------------------- */ body.label-light .pipeline-step.active { background: #f4f1ff !important; border-color: #cbbcff !important; } body.label-light .pipeline-step.disabled { background: #f0f0ed !important; border-color: #dededa !important; } body.label-light .publish-block-reason { color: #b91c1c; } body.label-light .autocomplete-dropdown, body.label-light .modal-content { background: #ffffff; border-color: #d8d8d4; color: #1f2328; } body.label-light .autocomplete-item:hover, body.label-light .copy-history-item:hover { background: #f4f1ff; } body.label-light .loading-state, body.label-light .error-message { color: #5f6368; } /* Floating feedback widget — make it readable in light mode --------------- */ body.label-light .yy-feedback-modal { background: #ffffff !important; border: 1px solid #d8d8d4 !important; color: #181818 !important; } body.label-light .yy-feedback-modal h3 { color: #151515; } body.label-light .yy-feedback-modal p.hint, body.label-light .yy-feedback-file, body.label-light .yy-feedback-file input { color: #5f6368 !important; } body.label-light .yy-feedback-modal textarea { background: #ffffff !important; border: 1px solid #cfcfca !important; color: #181818 !important; } body.label-light .yy-feedback-cancel { color: #5f6368 !important; border: 1px solid #d8d8d4 !important; } body.label-light .yy-feedback-cancel:hover { color: #181818 !important; border-color: #b8bab6 !important; } /* ========================================================================== THEME TOGGLE COMPONENT Visible Light/Dark pill — placed in sidebar header by theme-toggle.js. Works in both themes (selectors are NOT scoped to .label-light). ========================================================================== */ .yy-theme-toggle-wrap { margin-top: 12px; display: flex; justify-content: stretch; } .yy-theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border, #2a2a2a); border-radius: 999px; width: 100%; font-family: var(--font-mono, 'IBM Plex Mono', monospace); } .yy-theme-btn { flex: 1 1 50%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; background: transparent; border: none; border-radius: 999px; color: var(--text-muted, #8a8a8a); font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; line-height: 1; } .yy-theme-btn svg { flex-shrink: 0; } .yy-theme-btn:hover { color: var(--text-primary, #f0f0f0); } /* Ben directive 2026-05-08: pill 'Dark' active state in dark mode → grey, not blue. Pill 'Light' active state in light mode is overridden below in the body.label-light block to white. */ .yy-theme-btn[aria-pressed="true"] { background: #3a3a3a; color: #f0f0f0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); } .yy-theme-btn[aria-pressed="true"]:hover { background: #4a4a4a; color: #ffffff; } /* Light theme: visible pill on white sidebar */ body.label-light .yy-theme-toggle { background: #f1f2f0; border-color: #d8d8d4; } body.label-light .yy-theme-btn { color: #5f6368; } body.label-light .yy-theme-btn:hover { color: #181818; } body.label-light .yy-theme-btn[aria-pressed="true"] { /* Ben directive 2026-05-08: Light pill active → WHITE (was #0ea5e9 sky blue — 'trop bleu'). Plain white background + black text + subtle border so the active pill reads as a distinct surface against the grey track. */ background: #ffffff; color: #111111; border: 1px solid #d8d8d4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } body.label-light .yy-theme-btn[aria-pressed="true"]:hover { background: #fafafa; color: #000000; } /* Floating fallback (pages without sidebar — e.g. login) */ .yy-theme-toggle-floating { position: fixed; top: 16px; right: 16px; z-index: 9990; width: auto; margin: 0; } .yy-theme-toggle-floating .yy-theme-toggle { width: auto; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.label-light .yy-theme-toggle-floating .yy-theme-toggle { background: rgba(255, 255, 255, 0.92); border-color: #d8d8d4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } @media (max-width: 640px) { .yy-theme-btn span { display: none; } .yy-theme-btn { padding: 7px 9px; } } /* ========================================================================== THEME TOGGLE PLACEMENT — sit cleanly in sidebar header (2026-05-06) - Force the toggle wrap onto its own row inside the .sidebar-header flex so it lands right under the YOYAKU logo, never colliding with page titles in the main content column. ========================================================================== */ .sidebar-header { flex-wrap: wrap; } .yy-theme-toggle-wrap { flex: 0 0 100%; margin-top: 14px; margin-bottom: 4px; } /* ========================================================================== HERO BRAND — index.html dashboard header logo Replaces the legacy inline `color: white` so light mode renders dark text. ========================================================================== */ .hero-brand { text-align: center; } .hero-brand-line { font-family: 'DIN', 'Familjen Grotesk', sans-serif; font-weight: 700; font-size: 2.5rem; letter-spacing: 0.3em; line-height: 1; color: var(--text-primary, #ffffff); } .hero-brand-line--secondary { font-size: 2.2rem; margin-top: -0.1rem; } body.label-light .hero-brand-line { color: var(--text-primary); } /* ========================================================================== PAGE-LEVEL INLINE-STYLE OVERRIDES — light mode (2026-05-06) Several admin pages embed dark `