/* * Lyric Companion Design System * Aesthetic: Notion/Linear Style - Light Mode Default with Dark Mode Toggle * Typography: DM Sans (Single font family with weight hierarchy) */ /* Fonts loaded via in HTML for faster rendering */ /* ===== CSS VARIABLES - LIGHT THEME (Default) ===== */ :root { /* Typography */ --font-interface: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Backgrounds */ --bg-primary: #faf9f5; --bg-secondary: #ffffff; --bg-tertiary: #f0ede6; --bg-sidebar: #ffffff; /* Text */ --text-primary: #191918; --text-secondary: #4a4946; --text-tertiary: #8a8780; --text-muted: #d6d3cc; /* Accent (Warm terracotta) */ --accent-primary: #c4704a; --accent-hover: #a85d3d; --accent-subtle: #faf0ea; /* Status colors */ --color-success: #6a8a5d; --color-warning: #c4944a; --color-error: #c87c6f; /* Borders & Shadows */ --border-subtle: #e5e0d8; --border-default: #d6d3cc; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* Layout */ --sidebar-width: 20%; --canvas-width: 80%; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* Border radius (shared design tokens) */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Reader-compatible aliases Note: spacing tokens intentionally differ between archiv and reader: archiv --space-lg: 24px vs reader --spacing-lg: 32px (different page contexts). Border approach also differs: archiv uses solid hex, reader uses rgba overlays. Both are by design — do NOT alias spacing or border values across files. */ --color-bg: var(--bg-primary); --color-surface: var(--bg-secondary); --color-carbon: var(--text-primary); --color-graphite: var(--text-secondary); --color-silver: var(--text-tertiary); --color-accent: var(--accent-primary); --color-border: var(--border-subtle); --color-muted: var(--text-muted); --font-ui: var(--font-interface); } /* ===== CSS VARIABLES - DARK THEME ===== */ [data-theme="dark"] { /* Backgrounds */ --bg-primary: #141413; --bg-secondary: #1e1d1b; --bg-tertiary: #2a2926; --bg-sidebar: #1e1d1b; /* Text */ --text-primary: #f5f4f0; --text-secondary: #a8a59e; --text-tertiary: #787570; --text-muted: #4a4845; /* Accent (adjusted for dark) */ --accent-primary: #d4896a; --accent-hover: #c4704a; --accent-subtle: #3a2a22; /* Borders & Shadows */ --border-subtle: #2a2926; --border-default: #3f3d3a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); } /* ===== SKIP LINK (Accessibility) ===== */ .skip-link { position: absolute; top: -100px; left: 16px; padding: 8px 16px; background: var(--accent-primary); color: var(--bg-primary); font-family: var(--font-interface); font-size: 14px; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; z-index: 10000; transition: top 0.2s ease; } .skip-link:focus { top: 8px; } /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { font-family: var(--font-interface); font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== LAYOUT: SPLIT SCREEN ===== */ .app-container { display: flex; height: 100vh; width: 100vw; } /* Zone A: Taxonomy Sidebar */ .sidebar { width: var(--sidebar-width); min-width: 240px; max-width: 320px; height: 100%; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; overflow: hidden; } /* Zone B: Archive Canvas */ .canvas { flex: 1; height: 100%; background-color: var(--bg-primary); overflow-y: auto; overflow-x: hidden; } /* ===== SIDEBAR COMPONENTS ===== */ /* Header / Ingest Button */ .sidebar-header { padding: var(--space-lg); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } /* Theme Toggle Button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bg-tertiary); border: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .theme-toggle:hover { background: var(--border-subtle); color: var(--text-primary); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .sun-icon { display: none; } .theme-toggle .moon-icon { display: block; } [data-theme="dark"] .theme-toggle .sun-icon { display: block; } [data-theme="dark"] .theme-toggle .moon-icon { display: none; } .ghost-button { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); flex: 1; padding: var(--space-sm) var(--space-md); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-secondary); font-family: var(--font-interface); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .ghost-button:hover { border-color: var(--border-default); color: var(--text-primary); background: var(--bg-secondary); } .ghost-button:active { background: var(--bg-tertiary); } /* Inline Filter Search (Composer) */ .filter-search-inline { padding: 0 0 8px 0; } .filter-search-input { width: 100%; padding: 4px 8px; background: var(--bg-tertiary); border: 1px solid transparent; border-radius: 6px; color: var(--text-primary); font-family: var(--font-interface); font-size: 12px; } .filter-search-input::placeholder { color: var(--text-tertiary); } .filter-search-input:focus { outline: none; border-color: var(--accent-primary); background: var(--bg-secondary); } .composer-checkbox-list { max-height: 240px; overflow-y: auto; } /* ===== CANVAS COMPONENTS ===== */ /* Global Search - main styles at end of file */ .global-search .search-dropdown { left: var(--space-xl); right: var(--space-xl); width: auto; max-width: 600px; } .search-input { width: 100%; padding: var(--space-md); padding-right: 50px; background: var(--bg-tertiary); border: 1px solid transparent; border-radius: 8px; color: var(--text-primary); font-family: var(--font-interface); font-size: 15px; font-weight: 400; } .search-input::placeholder { color: var(--text-tertiary); } .search-input:focus { outline: none; border-color: var(--accent-primary); background: var(--bg-secondary); box-shadow: var(--shadow-sm); } /* Composer Section */ .composer-section { padding: var(--space-xl) var(--space-xl) var(--space-lg); position: relative; } .composer-section-header { font-family: var(--font-interface); font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; user-select: none; position: sticky; top: 0; left: 0; padding: var(--space-md) var(--space-xl); background: linear-gradient(180deg, var(--bg-primary) 80%, transparent); z-index: 10; margin-bottom: var(--space-sm); } .composer-operas { position: relative; z-index: 1; padding-top: var(--space-lg); } /* Opera Strip */ .opera-strip { display: flex; align-items: center; padding: var(--space-lg); margin-bottom: var(--space-md); background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border-subtle); gap: var(--space-xl); transition: border-color var(--transition-fast); } .opera-strip:hover { border-color: var(--border-default); } .opera-strip.opera-pending { opacity: 0.45; } .opera-strip.opera-pending:hover { opacity: 0.7; } .opera-identity { flex-shrink: 0; width: 240px; } .opera-title { font-family: var(--font-interface); font-size: 18px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: color var(--transition-fast); text-decoration: none; display: block; } .opera-title:hover { color: var(--accent-primary); } .opera-meta { font-size: 13px; color: var(--text-secondary); margin-top: var(--space-xs); } /* Opera Type Summary */ .opera-type-summary { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; } /* Collapsed vertical timeline: hide entirely */ .vertical-timeline.collapsed { display: none; } /* Timeline Legend */ .timeline-legend { display: none; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--border-subtle); } /* Show legend when timeline is expanded */ .opera-strip:has(.opera-timeline:not(.collapsed)) .timeline-legend { display: flex; } .legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-tertiary); } .legend-dot { display: inline-block; width: 8px; height: 8px; border: 1.5px solid var(--accent-primary); background: var(--bg-secondary); } .legend-dot.node-aria { border-radius: 50%; } .legend-dot.node-duet { border-radius: 0; transform: rotate(45deg); width: 6px; height: 6px; } .legend-dot.node-ensemble { border-radius: 1px; } .legend-dot.node-chorus { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: var(--accent-primary); border: none; width: 9px; height: 8px; } .legend-dot.node-recit { width: 5px; height: 5px; border-width: 1px; background: var(--text-tertiary); border-color: var(--text-tertiary); } /* Chronological Track */ .opera-timeline { flex: 1; display: flex; align-items: center; position: relative; min-height: 48px; } .timeline-track { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border-subtle); } .timeline-nodes { display: flex; align-items: center; gap: 0; position: relative; z-index: 1; padding: 0 var(--space-md); } /* Act Grouping */ .act-group { display: flex; align-items: center; gap: var(--space-xs); } .act-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); margin-right: var(--space-sm); user-select: none; } .act-nodes { display: flex; align-items: center; } .act-separator { width: 1px; height: 24px; background: var(--border-default); margin: 0 var(--space-lg); opacity: 0.5; } .scene-node { position: relative; cursor: pointer; } .scene-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-primary); border: 2px solid var(--accent-primary); transition: all var(--transition-fast); text-decoration: none; } /* --- Shapes --- */ /* Aria (Circle - Default) */ .node-aria { border-radius: 50%; background: var(--bg-secondary); border-color: var(--accent-primary); } /* Duet (Diamond) */ .node-duet { border-radius: 0; transform: rotate(45deg); width: 12px; height: 12px; background: var(--bg-secondary); border-color: var(--accent-primary); } /* Ensemble (Square) */ .node-ensemble { border-radius: 2px; background: var(--bg-secondary); border-color: var(--accent-primary); } /* Chorus (Hexagon) */ .node-chorus { border-radius: 0; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: var(--accent-primary); border: none; width: 16px; height: 14px; } /* Recit (Small Dot) */ .node-recit { width: 8px; height: 8px; border-width: 1px; opacity: 0.6; background: var(--text-tertiary); border-color: var(--text-tertiary); } .scene-dot.hollow { background: transparent; border-color: var(--text-tertiary); } .scene-dot.error { background: var(--color-error); border-color: var(--color-error); } /* Update hover states - subtle scaling (Notion-style) */ .scene-node:hover .node-aria { transform: scale(1.05); background: var(--accent-primary); } .scene-node:hover .node-duet { transform: scale(1.05) rotate(45deg); background: var(--accent-primary); } .scene-node:hover .node-ensemble { transform: scale(1.05); background: var(--accent-primary); } .scene-node:hover .node-chorus { transform: scale(1.05); } .scene-node:hover .node-recit { transform: scale(1.1); opacity: 1; background: var(--accent-primary); border-color: var(--accent-primary); } .scene-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-tertiary); white-space: nowrap; margin-bottom: var(--space-xs); } /* Scene Tooltip */ .scene-tooltip { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; padding: var(--space-md); min-width: 200px; max-width: 280px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 1000; box-shadow: var(--shadow-lg); pointer-events: none; } .scene-node:hover .scene-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .tooltip-title { font-weight: 600; margin-bottom: var(--space-xs); font-size: 13px; color: var(--text-primary); } .tooltip-section { font-size: 11px; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-xs); } .tooltip-incipit { font-style: italic; color: var(--text-secondary); font-size: 12px; margin-bottom: var(--space-sm); } .tooltip-stat { font-size: 11px; color: var(--text-tertiary); } .tooltip-stat strong { color: var(--color-success); } /* ===== MODAL: SMART INGEST ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: all var(--transition-normal); } [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.75); } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 12px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .modal-header { padding: var(--space-lg); border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; } .modal-title { font-family: var(--font-interface); font-size: 16px; font-weight: 600; color: var(--text-primary); } .modal-close { background: none; border: none; color: var(--text-tertiary); font-size: 24px; cursor: pointer; line-height: 1; padding: var(--space-xs); border-radius: 6px; transition: all var(--transition-fast); } .modal-close:hover { color: var(--text-primary); background: var(--bg-tertiary); } .modal-body { padding: var(--space-xl); } /* Drop Zone */ .drop-zone { border: 2px dashed var(--border-default); border-radius: 12px; padding: var(--space-2xl); text-align: center; transition: all var(--transition-fast); } .drop-zone.dragover { border-color: var(--accent-primary); background: var(--accent-subtle); } .drop-zone-text { color: var(--text-secondary); font-size: 14px; } .drop-zone-text strong { color: var(--text-primary); display: block; font-size: 16px; margin-bottom: var(--space-sm); } /* Confirmation Grid */ .confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .confirm-field { display: flex; flex-direction: column; gap: var(--space-xs); } .confirm-field.full { grid-column: 1 / -1; } .confirm-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); } .confirm-input { padding: var(--space-sm) var(--space-md); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-primary); font-family: var(--font-interface); font-size: 14px; } .confirm-input:focus { outline: none; border-color: var(--accent-primary); background: var(--bg-secondary); } /* Collision Actions */ .collision-actions { display: flex; gap: var(--space-md); margin-top: var(--space-lg); } .action-btn { flex: 1; padding: var(--space-sm) var(--space-md); border: none; border-radius: 8px; font-family: var(--font-interface); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .action-btn.primary { background: var(--accent-primary); color: var(--bg-primary); } .action-btn.primary:hover { background: var(--accent-hover); } .action-btn.secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .action-btn.secondary:hover { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-default); } /* Module Toggles */ .module-toggles { display: flex; flex-direction: column; gap: var(--space-sm); } .module-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); background: var(--bg-tertiary); border-radius: 8px; } .module-name { font-size: 13px; color: var(--text-secondary); } .module-select { padding: var(--space-xs) var(--space-sm); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-primary); font-family: var(--font-interface); font-size: 12px; cursor: pointer; } .module-select:focus { outline: none; border-color: var(--accent-primary); } /* Libretto Textarea */ .libretto-textarea { width: 100%; min-height: 250px; padding: var(--space-md); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-primary); font-family: var(--font-interface); font-size: 14px; line-height: 1.6; resize: vertical; } .libretto-textarea::placeholder { color: var(--text-tertiary); } .libretto-textarea:focus { outline: none; border-color: var(--accent-primary); background: var(--bg-secondary); } /* ===== SCROLLBAR ===== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* ===== UTILITIES ===== */ .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } /* ===== SEARCH DROPDOWN ===== */ .search-dropdown { position: absolute; top: 100%; left: 40px; width: 600px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; max-height: 400px; overflow-y: auto; z-index: 101; box-shadow: var(--shadow-lg); } .search-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--transition-fast); } .search-item:last-child { border-bottom: none; } .search-item:hover, .search-item.active { background: var(--accent-subtle); } .search-badge { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-secondary); min-width: 50px; text-align: center; } .search-info { flex: 1; } .search-main { color: var(--text-primary); font-size: 14px; font-weight: 500; } .search-incipit { color: var(--text-secondary); font-size: 13px; font-weight: 400; line-height: 1.3; } .search-alt { color: var(--text-secondary); font-size: 12px; font-style: italic; } .search-sub { color: var(--text-tertiary); font-size: 12px; } /* ===== FILTER SECTION IN SIDEBAR ===== */ .filter-section { border-bottom: 1px solid var(--border-subtle); padding: var(--space-sm) 0; } .filter-group-header { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); padding: 12px 24px 4px; margin-top: 4px; } .filter-group { border-bottom: 1px solid var(--border-subtle); } .filter-group:last-child { border-bottom: none; } .filter-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-lg); cursor: pointer; color: var(--text-secondary); font-size: 12px; font-weight: 500; transition: color var(--transition-fast); } .filter-header:hover { color: var(--text-primary); } .toggle-icon { font-family: monospace; font-size: 14px; color: var(--text-tertiary); } .filter-options { padding: var(--space-xs) var(--space-lg) var(--space-md); } .filter-checkbox { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; color: var(--text-secondary); font-size: 13px; cursor: pointer; } .filter-checkbox input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent-primary); } .filter-checkbox:hover { color: var(--accent-primary); } .filter-facet-count { font-size: 11px; color: var(--text-tertiary); margin-left: 2px; } .type-dot { display: inline-block; width: 10px; height: 10px; background: var(--accent-primary); margin-left: var(--space-xs); } .type-dot.node-aria { border-radius: 50%; } .type-dot.node-duet { transform: rotate(45deg); border-radius: 0; width: 8px; height: 8px; } .type-dot.node-ensemble { border-radius: 2px; } .type-dot.node-chorus { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } /* Recently Accessed Section */ .recent-section { padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border-subtle); } .recent-section.hidden { display: none; } .section-header { margin-bottom: var(--space-md); } .section-title { font-family: var(--font-interface); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .recent-cards { display: flex; gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-sm); scrollbar-width: thin; } .recent-card { flex-shrink: 0; width: 200px; padding: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 10px; text-decoration: none; transition: border-color var(--transition-fast); } .recent-card:hover { border-color: var(--border-default); } .recent-card.skeleton { background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-subtle) 50%, var(--bg-tertiary) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; min-height: 80px; border: none; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .recent-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-xs); } .recent-opera { font-family: var(--font-interface); font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.2; } .recent-composer { font-size: 12px; color: var(--text-secondary); margin-bottom: var(--space-xs); } .recent-scene { font-size: 11px; color: var(--text-tertiary); } .lang-badge { display: inline-block; padding: 2px 6px; background: var(--accent-subtle); border-radius: 4px; font-size: 10px; font-weight: 500; color: var(--accent-primary); } /* Active Filters Pills */ .active-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-xs) var(--space-xl); min-height: 0; position: sticky; top: 98px; z-index: 99; background: var(--bg-primary); } .active-filters:empty { display: none; } .filter-pill { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--accent-subtle); border: none; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--accent-primary); cursor: pointer; transition: all var(--transition-fast); } .filter-pill:hover { background: var(--accent-primary); color: var(--bg-primary); } .pill-x { font-size: 14px; line-height: 1; opacity: 0.7; } .filter-pill:hover .pill-x { opacity: 1; } .filter-clear { font-size: 12px; color: var(--text-tertiary); cursor: pointer; transition: color var(--transition-fast); } .filter-clear:hover { color: var(--accent-primary); } /* View Controls */ .view-controls { padding: var(--space-md) var(--space-xl); display: flex; align-items: center; gap: var(--space-md); } /* Sort Control */ .sort-control { display: flex; align-items: center; gap: var(--space-sm); } .sort-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; } .sort-select { padding: var(--space-xs) var(--space-sm); padding-right: 24px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-primary); font-family: var(--font-interface); font-size: 13px; font-weight: 500; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%238a8780' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; transition: border-color var(--transition-fast); } .sort-select:hover { border-color: var(--border-default); } .sort-select:focus { outline: none; border-color: var(--accent-primary); } /* View Mode Toggle */ .view-mode-toggle { display: flex; align-items: center; gap: 2px; background: var(--bg-tertiary); border-radius: 6px; padding: 2px; } .view-mode-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: none; border-radius: 4px; color: var(--text-tertiary); cursor: pointer; transition: all var(--transition-fast); } .view-mode-btn:hover { color: var(--text-primary); } .view-mode-btn.active { background: var(--bg-secondary); color: var(--text-primary); box-shadow: var(--shadow-sm); } .view-toggle { margin-left: auto; padding: var(--space-xs) var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-secondary); font-family: var(--font-interface); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .view-toggle:hover { border-color: var(--accent-primary); color: var(--accent-primary); } /* ===== GRID VIEW ===== */ .opera-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); padding: 0 var(--space-xl); } .opera-card { display: flex; flex-direction: column; padding: var(--space-md) var(--space-lg); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); min-height: 120px; } .opera-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-sm); } .opera-card.opera-pending { opacity: 0.45; } .opera-card.opera-pending:hover { opacity: 0.7; } .opera-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-xs); } .opera-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .opera-card-composer { font-size: 12px; color: var(--text-secondary); margin-bottom: var(--space-sm); } .opera-card-meta { display: flex; align-items: center; gap: var(--space-sm); font-size: 12px; color: var(--text-tertiary); margin-top: auto; } .opera-card-hits { font-size: 11px; color: var(--text-tertiary); margin-top: var(--space-xs); } /* Timeline Toggle for Opera Cards */ .opera-title-row { display: flex; align-items: center; gap: var(--space-sm); } .timeline-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: transparent; border: none; color: var(--text-tertiary); font-family: var(--font-interface); font-size: 12px; cursor: pointer; transition: color var(--transition-fast); } .timeline-toggle:hover { color: var(--text-primary); } .toggle-arrow { font-size: 10px; } /* Collapsed Timeline */ .opera-timeline.collapsed { display: none; } /* Search Hint */ .search-hint { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: var(--space-xs); } .search-hint.hidden { display: none; } /* Skeleton Loading States */ .skeleton-section { padding: var(--space-xl); } .skeleton-header { height: 28px; width: 200px; background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-subtle) 50%, var(--bg-tertiary) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: 6px; margin-bottom: var(--space-lg); } .skeleton-opera { height: 80px; background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--border-subtle) 50%, var(--bg-tertiary) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: 10px; margin-bottom: var(--space-md); } /* Responsive adjustments */ @media (max-width: 1024px) { .opera-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .recent-cards { flex-wrap: nowrap; } .recent-card { width: 180px; } .view-controls { flex-wrap: wrap; gap: var(--space-sm); } .opera-card-grid { grid-template-columns: 1fr; padding: 0 var(--space-md); } .opera-strip { flex-direction: column; align-items: flex-start; } .opera-identity { width: 100%; } .opera-timeline { width: 100%; } } /* Progress bar in modal */ #progress-bar { background: var(--accent-primary) !important; } /* ===== FOCUS STATES (Accessibility) ===== */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* Remove default focus for mouse users */ :focus:not(:focus-visible) { outline: none; } /* ===== EMPTY STATE (Notion-style) ===== */ .empty-state { text-align: center; padding: 100px 40px; max-width: 400px; margin: 0 auto; } .empty-state-icon { width: 48px; height: 48px; margin: 0 auto var(--space-lg); color: var(--text-muted); } .empty-state h3 { font-size: 16px; font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-sm); } .empty-state p { font-size: 14px; color: var(--text-tertiary); line-height: 1.5; } /* ===== COMMAND PALETTE KEYBOARD HINT ===== */ .global-search { position: sticky; top: 0; z-index: 100; padding: var(--space-lg) var(--space-xl); background: linear-gradient(to bottom, var(--bg-primary) 80%, transparent); } .search-wrapper { position: relative; max-width: 600px; } .search-kbd-hint { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; transition: opacity var(--transition-fast); } .search-kbd-hint kbd { padding: 3px 6px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 4px; font-size: 11px; font-family: var(--font-interface); color: var(--text-tertiary); } /* Hide hint when focused */ .search-input:focus + .search-kbd-hint { opacity: 0; } /* ===== APP BRANDING ===== */ .app-brand { display: flex; align-items: center; gap: var(--space-sm); } .brand-icon { width: 20px; height: 20px; color: var(--accent-primary); } .brand-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .header-actions { display: flex; align-items: center; gap: var(--space-sm); } .header-action-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--text-secondary); background: none; cursor: pointer; transition: background 0.15s, color 0.15s; text-decoration: none; } .header-action-link:hover { background: var(--border-subtle); color: var(--text-primary); } /* Import button container */ .import-button-container { padding: 0 var(--space-lg) var(--space-md); } .ghost-button--full-width { width: 100%; } /* ===== VERTICAL TIMELINE (LessWrong Style) ===== */ .vertical-timeline { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-md) 0; } .timeline-act { position: relative; padding-left: 24px; } .timeline-act-line { position: absolute; left: 7px; top: 28px; bottom: 0; width: 2px; background: var(--border-subtle); } .timeline-act:last-child .timeline-act-line { display: none; } .timeline-act-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); } .timeline-act-title { font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: normal; color: var(--text-tertiary); opacity: 0.8; } .timeline-scenes { display: flex; flex-direction: column; gap: 2px; } .timeline-scene { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-sm) var(--space-md); margin-left: -7px; border-radius: 6px; text-decoration: none; color: inherit; transition: background var(--transition-fast); } .timeline-scene:hover { background: rgba(196, 112, 74, 0.08); /* LessWrong muted green */ } [data-theme="dark"] .timeline-scene:hover { background: rgba(196, 112, 74, 0.06); } .timeline-scene-shape { flex-shrink: 0; width: 14px; height: 14px; margin-top: 3px; display: flex; align-items: center; justify-content: center; } /* Shape variants for scene types */ .timeline-scene-shape.shape-aria { border-radius: 50%; background: var(--bg-secondary); border: 2px solid var(--accent-primary); } .timeline-scene-shape.shape-duet { width: 12px; height: 12px; transform: rotate(45deg); background: var(--bg-secondary); border: 2px solid var(--accent-primary); } .timeline-scene-shape.shape-ensemble { border-radius: 2px; background: var(--bg-secondary); border: 2px solid var(--accent-primary); } .timeline-scene-shape.shape-chorus { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: var(--accent-primary); width: 16px; height: 14px; } .timeline-scene-shape.shape-recit { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); opacity: 0.5; margin-top: 5px; margin-left: 3px; } .timeline-scene:hover .timeline-scene-shape.shape-aria, .timeline-scene:hover .timeline-scene-shape.shape-duet, .timeline-scene:hover .timeline-scene-shape.shape-ensemble { background: var(--accent-primary); } .timeline-scene:hover .timeline-scene-shape.shape-recit { opacity: 1; background: var(--accent-primary); } .timeline-scene-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .timeline-scene-title { font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .timeline-scene-incipit { font-size: 12px; color: var(--text-secondary); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .timeline-scene-meta { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-sm); } .timeline-scene-meta .meta-type { text-transform: capitalize; } .timeline-scene-meta .meta-divider { opacity: 0.5; } /* Scene count badge (visible in expanded timeline act labels) */ .timeline-scene-count { font-size: 11px; color: var(--text-tertiary); background: var(--bg-tertiary); padding: 2px 6px; border-radius: 10px; margin-left: auto; } /* Act divider for visual separation */ .timeline-act-divider { height: 1px; background: var(--border-subtle); margin: var(--space-md) 0; margin-left: -24px; } /* Characters inline display */ .timeline-scene-characters { font-size: 11px; color: var(--text-tertiary); font-style: italic; margin-top: 2px; } /* Responsive: Stack vertically on mobile */ @media (max-width: 768px) { .timeline-act { padding-left: 16px; } .timeline-act-line { left: 5px; } .timeline-scene { margin-left: -5px; padding: var(--space-xs) var(--space-sm); } .timeline-scene-title { font-size: 13px; } .timeline-scene-meta { font-size: 11px; } } /* Opera strip layout update for vertical timeline */ .opera-strip.has-vertical-timeline { flex-direction: column; align-items: stretch; } .opera-strip.has-vertical-timeline .opera-identity { width: 100%; } .opera-strip.has-vertical-timeline:has(.vertical-timeline:not(.collapsed)) .opera-identity { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-md); margin-bottom: var(--space-sm); } .opera-strip.has-vertical-timeline .vertical-timeline { width: 100%; max-height: 400px; overflow-y: auto; } /* ===== MOBILE: Hamburger Sidebar ===== */ .hamburger-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-secondary); cursor: pointer; position: fixed; top: var(--space-md); left: var(--space-md); z-index: 1001; } .hamburger-btn svg { width: 20px; height: 20px; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 999; } .sidebar-overlay.active { display: block; } @media (max-width: 768px) { .hamburger-btn { display: flex; } .sidebar { position: fixed; left: 0; top: 0; z-index: 1000; width: 280px; max-width: 80vw; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .canvas { width: 100%; padding-top: 60px; } } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }