diff --git a/services/premiere-plugin/css/styles.css b/services/premiere-plugin/css/styles.css index ebcc507..d1091c3 100644 --- a/services/premiere-plugin/css/styles.css +++ b/services/premiere-plugin/css/styles.css @@ -2,6 +2,7 @@ /* OKLCH tokens aligned with web-ui/common.css */ :root { + /* Background scale */ --bg-deep: oklch(8% 0.011 32); --bg-base: oklch(11% 0.010 32); --bg-panel: oklch(15% 0.013 32); @@ -9,36 +10,54 @@ --bg-raised: oklch(24% 0.015 32); --bg-hover: oklch(28% 0.015 32); + /* Accent */ --accent: oklch(62% 0.22 32); - --accent-dim: oklch(56% 0.130 52); + --accent-hover: oklch(68% 0.22 32); + --accent-bright: oklch(76% 0.20 32); --accent-subtle: oklch(62% 0.22 32 / 0.12); --accent-border: oklch(62% 0.22 32 / 0.36); + /* Text */ --text-primary: oklch(94% 0.008 32); --text-secondary: oklch(72% 0.014 32); --text-tertiary: oklch(56% 0.012 32); --text-disabled: oklch(38% 0.010 32); + /* Borders */ --border-faint: oklch(22% 0.013 32); --border: oklch(28% 0.015 32); --border-strong: oklch(38% 0.018 32); - --status-green: oklch(70% 0.18 148); - --status-red: oklch(64% 0.22 25); - --status-blue: oklch(67% 0.16 245); - --status-yellow: oklch(80% 0.16 90); - --status-gray: oklch(58% 0.012 32); + /* Signals (primary) */ + --signal-good: oklch(70% 0.18 148); + --signal-bad: oklch(64% 0.22 25); + --signal-warn: oklch(80% 0.16 90); + --signal-idle: oklch(58% 0.012 32); + --signal-info: oklch(67% 0.16 245); - --status-green-bg: oklch(70% 0.18 148 / 0.12); - --status-red-bg: oklch(64% 0.22 25 / 0.12); - --status-blue-bg: oklch(67% 0.16 245 / 0.12); - --status-yellow-bg: oklch(80% 0.16 90 / 0.12); + /* Signal backgrounds */ + --signal-good-bg: oklch(70% 0.18 148 / 0.12); + --signal-bad-bg: oklch(64% 0.22 25 / 0.12); + --signal-warn-bg: oklch(80% 0.16 90 / 0.12); + --signal-info-bg: oklch(67% 0.16 245 / 0.12); - --signal-good: var(--status-green); - --signal-warn: var(--status-yellow); - --signal-bad: var(--status-red); - --signal-idle: var(--status-gray); + /* Signal hover variants */ + --signal-good-hover: oklch(74% 0.18 148); + --signal-bad-hover: oklch(68% 0.22 25); + --signal-warn-hover: oklch(84% 0.16 90); + /* Status aliases — backwards compat for main.js */ + --status-green: var(--signal-good); + --status-red: var(--signal-bad); + --status-blue: var(--signal-info); + --status-yellow: var(--signal-warn); + --status-gray: var(--signal-idle); + --status-green-bg: var(--signal-good-bg); + --status-red-bg: var(--signal-bad-bg); + --status-blue-bg: var(--signal-info-bg); + --status-yellow-bg: var(--signal-warn-bg); + + /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; @@ -49,6 +68,7 @@ --sp-12: 48px; --sp-16: 64px; + /* Typography */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', 'Liberation Mono', monospace; --text-xs: 11px; @@ -56,13 +76,32 @@ --text-base: 14px; --text-md: 16px; + /* Radii */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; + /* Transitions (legacy) */ --t-fast: 150ms ease-out; --t-normal: 250ms ease-out; - --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + + /* Motion */ + --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); + --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); + --dur-fast: 120ms; + --dur-normal: 180ms; + --dur-slide: 240ms; + + /* Elevation + surface extras */ + --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + --thumb-black: oklch(0% 0 32); + --overlay: oklch(8% 0.010 32 / 0.65); + + /* Z-index layers */ + --z-dropdown: 40; + --z-overlay: 80; + --z-panel: 90; + --z-toast: 200; } * { margin: 0; padding: 0; box-sizing: border-box; } @@ -125,9 +164,9 @@ html, body { .server-url { flex: 1; min-width: 0; - height: 28px; + height: 32px; padding: 0 var(--sp-2); - background: var(--bg-surface); + background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); @@ -137,7 +176,7 @@ html, body { transition: border-color var(--t-fast), box-shadow var(--t-fast); } -.server-url:focus { +.server-url:focus-visible { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-subtle); } @@ -150,18 +189,18 @@ html, body { width: 8px; height: 8px; border-radius: 50%; - background: var(--status-red); + background: var(--signal-bad); flex-shrink: 0; transition: background var(--t-fast), box-shadow var(--t-fast); } .status-indicator.connected { - background: var(--status-green); - box-shadow: 0 0 6px var(--status-green); + background: var(--signal-good); + box-shadow: 0 0 6px var(--signal-good); } .status-indicator.connecting { - background: var(--status-yellow); + background: var(--signal-warn); animation: pulse 1.5s ease-in-out infinite; } @@ -179,13 +218,15 @@ html, body { align-items: center; justify-content: center; gap: var(--sp-1); - padding: 0 var(--sp-2); - height: 28px; - font-size: var(--text-xs); + padding: 0 var(--sp-3); + height: 32px; + font-size: var(--text-sm); font-weight: 500; border: 1px solid transparent; border-radius: var(--r-sm); - transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); + transition: background var(--dur-fast) var(--ease-out-quart), + border-color var(--dur-fast) var(--ease-out-quart), + color var(--dur-fast) var(--ease-out-quart); white-space: nowrap; line-height: 1; flex-shrink: 0; @@ -193,12 +234,34 @@ html, body { font-family: var(--font); } +.btn:focus-visible { + outline: 2px solid var(--accent-subtle); + outline-offset: 1px; +} + +.btn:active:not(:disabled) { + opacity: 0.85; + transition: opacity 60ms; +} + .btn-sm { - height: 24px; + height: 28px; padding: 0 var(--sp-2); font-size: 11px; } +.btn-lg { + height: 36px; + padding: 0 var(--sp-4); + font-size: var(--text-sm); +} + +.btn-icon { + width: 28px; + height: 28px; + padding: 0; +} + .btn-primary { background: var(--accent); color: oklch(11% 0.010 32); @@ -206,12 +269,8 @@ html, body { } .btn-primary:hover:not(:disabled) { - background: oklch(68% 0.22 32); - border-color: oklch(68% 0.22 32); -} - -.btn-primary:active:not(:disabled) { - background: oklch(56% 0.20 32); + background: var(--accent-hover); + border-color: var(--accent-hover); } .btn-secondary { @@ -236,13 +295,14 @@ html, body { } .btn-danger { - background: transparent; - color: var(--status-red); - border-color: oklch(62% 0.22 25 / 0.25); + background: var(--signal-bad); + color: oklch(98% 0.005 25); + border-color: var(--signal-bad); } .btn-danger:hover:not(:disabled) { - background: var(--status-red-bg); + background: var(--signal-bad-hover); + border-color: var(--signal-bad-hover); } .btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; } @@ -265,8 +325,8 @@ button.secondary { border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 0 var(--sp-2); - height: 28px; - font-size: var(--text-xs); + height: 32px; + font-size: var(--text-sm); font-weight: 500; display: inline-flex; align-items: center; @@ -297,9 +357,9 @@ button.secondary:hover:not(:disabled) { .search-input { flex: 1; - height: 30px; + height: 32px; padding: 0 var(--sp-3); - background: var(--bg-surface); + background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); @@ -308,7 +368,7 @@ button.secondary:hover:not(:disabled) { transition: border-color var(--t-fast), box-shadow var(--t-fast); } -.search-input:focus { +.search-input:focus-visible { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-subtle); } @@ -322,9 +382,9 @@ button.secondary:hover:not(:disabled) { select { flex: 1; - height: 28px; + height: 32px; padding: 0 24px 0 var(--sp-2); - background: var(--bg-surface); + background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); @@ -338,7 +398,7 @@ select { transition: border-color var(--t-fast), box-shadow var(--t-fast); } -select:focus { +select:focus-visible { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-subtle); } @@ -354,24 +414,23 @@ select option { background: var(--bg-surface); color: var(--text-primary); } align-items: center; gap: 6px; padding: 2px 8px; - height: 20px; + height: 18px; border-radius: 3px; - font-family: var(--font-mono); + font-family: var(--font); font-size: 11px; - letter-spacing: 0.04em; + letter-spacing: 0.08em; text-transform: uppercase; background: var(--bg-surface); color: var(--text-secondary); - border: 1px solid var(--border); white-space: nowrap; } .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } -.chip--good { color: var(--signal-good); border-color: oklch(70% 0.18 148 / 0.35); } -.chip--warn { color: var(--signal-warn); border-color: oklch(80% 0.16 90 / 0.35); } -.chip--bad { color: var(--signal-bad); border-color: oklch(64% 0.22 25 / 0.35); } -.chip--rec { color: var(--accent); border-color: var(--accent-border); } +.chip--good { color: var(--signal-good); background: var(--signal-good-bg); } +.chip--warn { color: var(--signal-warn); background: var(--signal-warn-bg); } +.chip--bad { color: var(--signal-bad); background: var(--signal-bad-bg); } +.chip--rec { color: var(--accent); background: var(--accent-subtle); } /* ================================================================ SEQUENCE INFO BAR @@ -421,7 +480,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .tab-btn { flex: 1; - height: 32px; + height: 36px; background: transparent; border: none; border-bottom: 2px solid transparent; @@ -435,8 +494,6 @@ select option { background: var(--bg-surface); color: var(--text-primary); } gap: var(--sp-2); cursor: pointer; transition: all var(--t-fast); - text-transform: uppercase; - letter-spacing: 0.05em; } .tab-btn:hover { @@ -453,18 +510,16 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .tab-btn .badge { background: var(--bg-raised); color: var(--text-secondary); - font-size: 9px; - font-family: var(--font-mono); + font-size: 10px; + font-family: var(--font); padding: 1px 6px; border-radius: 10px; - border: 1px solid var(--border-strong); font-weight: normal; } .tab-btn.active .badge { background: var(--accent-subtle); color: var(--accent); - border-color: var(--accent-border); } /* ================================================================ @@ -501,20 +556,20 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .asset-card { background: var(--bg-surface); - border: 1px solid var(--border); + border: 1px solid var(--border-faint); border-radius: var(--r-md); overflow: hidden; cursor: pointer; - transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); + transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); display: flex; flex-direction: column; - height: 155px; } .asset-card:hover { border-color: var(--accent-border); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); + filter: brightness(1.04); } .asset-card.selected { @@ -526,7 +581,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .asset-thumbnail { width: 100%; aspect-ratio: 16 / 9; - background: var(--bg-deep); + background: var(--thumb-black); display: flex; align-items: center; justify-content: center; @@ -571,43 +626,45 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .asset-status-badge { display: inline-flex; align-items: center; - padding: 1px 6px; + height: 18px; + padding: 0 6px; border-radius: 100px; + font-family: var(--font); font-size: 9px; - font-weight: 500; - letter-spacing: 0.04em; + font-weight: 600; + letter-spacing: 0.08em; text-transform: uppercase; width: fit-content; } .status-badge.ready { - background: var(--status-green-bg); - color: var(--status-green); + background: var(--signal-good-bg); + color: var(--signal-good); } .status-badge.live, .status-badge.recording { - background: var(--status-red-bg); - color: var(--status-red); + background: var(--signal-bad-bg); + color: var(--signal-bad); font-weight: bold; } .status-badge.ingesting, .status-badge.promoting, .status-badge.processing { - background: var(--status-blue-bg); - color: var(--status-blue); + background: var(--signal-info-bg); + color: var(--signal-info); animation: pulse 1.5s ease-in-out infinite; } .status-badge.idle { - background: var(--status-yellow-bg); - color: var(--status-yellow); + background: var(--signal-warn-bg); + color: var(--signal-warn); } .status-badge.error { - background: var(--status-red-bg); - color: var(--status-red); + background: var(--signal-bad-bg); + color: var(--signal-bad); } /* ================================================================ @@ -621,12 +678,12 @@ select option { background: var(--bg-surface); color: var(--text-primary); } justify-content: center; padding: var(--sp-12) var(--sp-8); text-align: center; - gap: var(--sp-2); + gap: var(--sp-3); } .empty-state-icon { color: var(--text-tertiary); - margin-bottom: var(--sp-1); + margin-bottom: var(--sp-2); } .empty-state-icon svg { @@ -636,7 +693,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .empty-state-title { font-size: var(--text-sm); - font-weight: 500; + font-weight: 600; color: var(--text-secondary); } @@ -644,7 +701,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } font-size: var(--text-xs); color: var(--text-tertiary); max-width: 30ch; - line-height: 1.5; + line-height: 1.6; } /* ================================================================ @@ -658,7 +715,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } padding: var(--sp-3); display: flex; flex-direction: column; - gap: var(--sp-2); + gap: var(--sp-3); overflow-y: auto; } @@ -679,19 +736,19 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .details-section { display: flex; flex-direction: column; - gap: 2px; + gap: 3px; } .details-label { font-size: 9px; - font-weight: 500; + font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); - letter-spacing: 0.06em; + letter-spacing: 0.07em; } .details-value { - font-size: 11px; + font-size: var(--text-xs); color: var(--text-primary); word-break: break-word; } @@ -752,7 +809,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } height: 100%; background: var(--accent); width: 0%; - transition: width 300ms ease-out; + transition: width var(--dur-slide) var(--ease-out-quart); } /* ================================================================ @@ -774,33 +831,33 @@ select option { background: var(--bg-surface); color: var(--text-primary); } text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); - margin-bottom: var(--sp-2); + margin-bottom: var(--sp-3); } .export-panel input[type="text"], .export-panel .input { width: 100%; - height: 28px; + height: 32px; padding: 0 var(--sp-2); - background: var(--bg-surface); + background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-size: var(--text-xs); - margin-bottom: var(--sp-1); + margin-bottom: var(--sp-2); outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); } -.export-panel input[type="text"]:focus, -.export-panel .input:focus { +.export-panel input[type="text"]:focus-visible, +.export-panel .input:focus-visible { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-subtle); } .export-panel select { width: 100%; - margin-bottom: var(--sp-2); + margin-bottom: var(--sp-3); flex: none; } @@ -835,7 +892,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); - margin-bottom: var(--sp-1); + margin-bottom: var(--sp-2); } .advanced-row { @@ -850,13 +907,13 @@ select option { background: var(--bg-surface); color: var(--text-primary); } ================================================================ */ .action-bar { - background: var(--bg-panel); + background: var(--bg-deep); border-top: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); flex-shrink: 0; display: flex; flex-direction: column; - gap: var(--sp-1); + gap: var(--sp-2); } .action-row { @@ -873,11 +930,11 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .slide-overlay { position: fixed; inset: 0; - background: oklch(8% 0.010 250 / 0.65); - z-index: 80; + background: var(--overlay); + z-index: var(--z-overlay); opacity: 0; pointer-events: none; - transition: opacity var(--t-normal); + transition: opacity var(--dur-slide) var(--ease-out-quart); } .slide-overlay.open { opacity: 1; pointer-events: all; } @@ -885,14 +942,15 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .slide-panel { position: fixed; top: 0; right: 0; bottom: 0; - width: 420px; + width: 460px; background: var(--bg-panel); border-left: 1px solid var(--border); - z-index: 90; + z-index: var(--z-panel); display: flex; flex-direction: column; + overflow: hidden; transform: translateX(100%); - transition: transform var(--t-normal); + transition: transform var(--dur-slide) var(--ease-out-expo); } .slide-panel.open { transform: translateX(0); } @@ -901,30 +959,32 @@ select option { background: var(--bg-surface); color: var(--text-primary); } display: flex; align-items: center; justify-content: space-between; - padding: 0 var(--sp-5); - height: 40px; - border-bottom: 1px solid var(--border); + padding: 0 18px; + height: 52px; + border-bottom: 1px solid var(--border-faint); flex-shrink: 0; } .slide-panel-title { - font-size: var(--text-sm); - font-weight: 500; + font: 600 14px/1 var(--font); + letter-spacing: -0.005em; color: var(--text-primary); } .slide-panel-body { flex: 1; + min-height: 0; overflow-y: auto; - padding: var(--sp-5); + padding: 18px; display: flex; flex-direction: column; gap: var(--sp-4); } .slide-panel-footer { - padding: var(--sp-3) var(--sp-5); - border-top: 1px solid var(--border); + padding: 14px 18px; + background: var(--bg-deep); + border-top: 1px solid var(--border-faint); display: flex; justify-content: flex-end; gap: var(--sp-2); @@ -942,7 +1002,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } } .preset-card { - padding: var(--sp-2) var(--sp-2); + padding: var(--sp-2) var(--sp-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); @@ -962,9 +1022,9 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .preset-card-title { font-size: var(--text-xs); - font-weight: 500; + font-weight: 600; color: var(--text-primary); - margin-bottom: 2px; + margin-bottom: 3px; } .preset-card-desc { @@ -995,7 +1055,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } display: flex; align-items: center; gap: var(--sp-2); - padding: var(--sp-2) var(--sp-2); + padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-faint); transition: background var(--t-fast); } @@ -1035,13 +1095,13 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .clip-list-item-status { flex-shrink: 0; font-size: 9px; - font-weight: 500; - letter-spacing: 0.04em; + font-weight: 600; + letter-spacing: 0.06em; text-transform: uppercase; } .clip-list-item-status.matched { - color: var(--status-green); + color: var(--signal-good); } .clip-list-item-status.unmatched { @@ -1063,7 +1123,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .relink-summary.hidden { display: none; } -.relink-summary-icon { color: var(--status-green); } +.relink-summary-icon { color: var(--signal-good); } .relink-summary-text { font-size: var(--text-sm); @@ -1082,22 +1142,24 @@ select option { background: var(--bg-surface); color: var(--text-primary); } ================================================================ */ .error-message { - background: var(--status-red-bg); + background: var(--signal-bad-bg); border: 1px solid oklch(64% 0.22 25 / 0.25); - color: var(--status-red); + color: var(--signal-bad); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--text-xs); + line-height: 1.5; margin-bottom: var(--sp-2); } .success-message { - background: var(--status-green-bg); + background: var(--signal-good-bg); border: 1px solid oklch(70% 0.18 148 / 0.25); - color: var(--status-green); + color: var(--signal-good); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--text-xs); + line-height: 1.5; margin-bottom: var(--sp-2); } @@ -1108,6 +1170,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--text-xs); + line-height: 1.5; margin-bottom: var(--sp-2); } @@ -1123,7 +1186,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); } .form-label { font-size: 10px; - font-weight: 500; + font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); @@ -1186,7 +1249,5 @@ select option { background: var(--bg-surface); color: var(--text-primary); } padding: var(--sp-2); } - .asset-card { height: 145px; } - .slide-panel { width: 100%; } }