fix(premiere-plugin): replace oklch() with hex/rgba for CEP Chromium compat
CEP's embedded Chromium (used by Premiere Pro panels) does not support oklch() color syntax. All color tokens were rendering as invalid/transparent, causing the panel to appear unstyled. Converted all oklch() values to their precise hex/rgba equivalents via OKLab→sRGB math. No design changes.
This commit is contained in:
parent
ada8105948
commit
ad9e1ef5f1
1 changed files with 36 additions and 36 deletions
|
|
@ -3,48 +3,48 @@
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Background scale */
|
/* Background scale */
|
||||||
--bg-deep: oklch(8% 0.011 32);
|
--bg-deep: #030101;
|
||||||
--bg-base: oklch(11% 0.010 32);
|
--bg-base: #070403;
|
||||||
--bg-panel: oklch(15% 0.013 32);
|
--bg-panel: #100908;
|
||||||
--bg-surface: oklch(19% 0.014 32);
|
--bg-surface: #1a1210;
|
||||||
--bg-raised: oklch(24% 0.015 32);
|
--bg-raised: #261d1b;
|
||||||
--bg-hover: oklch(28% 0.015 32);
|
--bg-hover: #302624;
|
||||||
|
|
||||||
/* Accent */
|
/* Accent */
|
||||||
--accent: oklch(62% 0.22 32);
|
--accent: #ed391a;
|
||||||
--accent-hover: oklch(68% 0.22 32);
|
--accent-hover: #ff5032;
|
||||||
--accent-bright: oklch(76% 0.20 32);
|
--accent-bright: #ff765a;
|
||||||
--accent-subtle: oklch(62% 0.22 32 / 0.12);
|
--accent-subtle: rgba(237, 57, 26, 0.12);
|
||||||
--accent-border: oklch(62% 0.22 32 / 0.36);
|
--accent-border: rgba(237, 57, 26, 0.36);
|
||||||
|
|
||||||
/* Text */
|
/* Text */
|
||||||
--text-primary: oklch(94% 0.008 32);
|
--text-primary: #f0e9e8;
|
||||||
--text-secondary: oklch(72% 0.014 32);
|
--text-secondary: #ada29f;
|
||||||
--text-tertiary: oklch(56% 0.012 32);
|
--text-tertiary: #7b7270;
|
||||||
--text-disabled: oklch(38% 0.010 32);
|
--text-disabled: #48413f;
|
||||||
|
|
||||||
/* Borders */
|
/* Borders */
|
||||||
--border-faint: oklch(22% 0.013 32);
|
--border-faint: #201817;
|
||||||
--border: oklch(28% 0.015 32);
|
--border: #302624;
|
||||||
--border-strong: oklch(38% 0.018 32);
|
--border-strong: #4c3f3c;
|
||||||
|
|
||||||
/* Signals (primary) */
|
/* Signals (primary) */
|
||||||
--signal-good: oklch(70% 0.18 148);
|
--signal-good: #35bb58;
|
||||||
--signal-bad: oklch(64% 0.22 25);
|
--signal-bad: #f53c41;
|
||||||
--signal-warn: oklch(80% 0.16 90);
|
--signal-warn: #e6b816;
|
||||||
--signal-idle: oklch(58% 0.012 32);
|
--signal-idle: #817876;
|
||||||
--signal-info: oklch(67% 0.16 245);
|
--signal-info: #1e9cf0;
|
||||||
|
|
||||||
/* Signal backgrounds */
|
/* Signal backgrounds */
|
||||||
--signal-good-bg: oklch(70% 0.18 148 / 0.12);
|
--signal-good-bg: rgba(53, 187, 88, 0.12);
|
||||||
--signal-bad-bg: oklch(64% 0.22 25 / 0.12);
|
--signal-bad-bg: rgba(245, 60, 65, 0.12);
|
||||||
--signal-warn-bg: oklch(80% 0.16 90 / 0.12);
|
--signal-warn-bg: rgba(230, 184, 22, 0.12);
|
||||||
--signal-info-bg: oklch(67% 0.16 245 / 0.12);
|
--signal-info-bg: rgba(30, 156, 240, 0.12);
|
||||||
|
|
||||||
/* Signal hover variants */
|
/* Signal hover variants */
|
||||||
--signal-good-hover: oklch(74% 0.18 148);
|
--signal-good-hover: #46c865;
|
||||||
--signal-bad-hover: oklch(68% 0.22 25);
|
--signal-bad-hover: #ff4c4d;
|
||||||
--signal-warn-hover: oklch(84% 0.16 90);
|
--signal-warn-hover: #f3c530;
|
||||||
|
|
||||||
/* Status aliases — backwards compat for main.js */
|
/* Status aliases — backwards compat for main.js */
|
||||||
--status-green: var(--signal-good);
|
--status-green: var(--signal-good);
|
||||||
|
|
@ -94,8 +94,8 @@
|
||||||
|
|
||||||
/* Elevation + surface extras */
|
/* Elevation + surface extras */
|
||||||
--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||||
--thumb-black: oklch(0% 0 32);
|
--thumb-black: #000000;
|
||||||
--overlay: oklch(8% 0.010 32 / 0.65);
|
--overlay: rgba(3, 1, 1, 0.65);
|
||||||
|
|
||||||
/* Z-index layers */
|
/* Z-index layers */
|
||||||
--z-dropdown: 40;
|
--z-dropdown: 40;
|
||||||
|
|
@ -264,7 +264,7 @@ html, body {
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
color: oklch(11% 0.010 32);
|
color: #070403;
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -296,7 +296,7 @@ html, body {
|
||||||
|
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
background: var(--signal-bad);
|
background: var(--signal-bad);
|
||||||
color: oklch(98% 0.005 25);
|
color: #fcf7f7;
|
||||||
border-color: var(--signal-bad);
|
border-color: var(--signal-bad);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1143,7 +1143,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
background: var(--signal-bad-bg);
|
background: var(--signal-bad-bg);
|
||||||
border: 1px solid oklch(64% 0.22 25 / 0.25);
|
border: 1px solid rgba(245, 60, 65, 0.25);
|
||||||
color: var(--signal-bad);
|
color: var(--signal-bad);
|
||||||
padding: var(--sp-2) var(--sp-3);
|
padding: var(--sp-2) var(--sp-3);
|
||||||
border-radius: var(--r-sm);
|
border-radius: var(--r-sm);
|
||||||
|
|
@ -1154,7 +1154,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
||||||
|
|
||||||
.success-message {
|
.success-message {
|
||||||
background: var(--signal-good-bg);
|
background: var(--signal-good-bg);
|
||||||
border: 1px solid oklch(70% 0.18 148 / 0.25);
|
border: 1px solid rgba(53, 187, 88, 0.25);
|
||||||
color: var(--signal-good);
|
color: var(--signal-good);
|
||||||
padding: var(--sp-2) var(--sp-3);
|
padding: var(--sp-2) var(--sp-3);
|
||||||
border-radius: var(--r-sm);
|
border-radius: var(--r-sm);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue