fix(styles): resolve WebKitGTK nested var() issues with hardcoded border fallbacks
- commit
- c5601864b83b406db13d8022fe993126cc001e43
- author
- brice · · 2025-12-16 19:08 UTC
- committer
- brice · · 2025-12-16 17:59 UTC
- parent
- 6b28179
- signature
- unsigned
1 file · +8 -2
M webui/src/styles/tailwind.css +8 -2
| @@ -5,7 +5,7 @@ | |||
| 5 | 5 | * These bridge between: | |
| 6 | 6 | * 1. Backend palette (--color-browser-*) injected at runtime | |
| 7 | 7 | * 2. Design tokens (--background, --primary, etc.) for static fallbacks | |
| 8 | - | * 3. Component usage (--dynamic-*) for actual styling | |
| 8 | + | * 3. Component usage (shadcn-svelte variables: --background, --card, --foreground, etc.) | |
| 9 | 9 | */ | |
| 10 | 10 | :root { | |
| 11 | 11 | /* Primary bridge - uses backend palette when available, falls back to tokens */ | |
| @@ -15,7 +15,8 @@ | |||
| 15 | 15 | --dynamic-text: var(--color-browser-text, var(--foreground)); | |
| 16 | 16 | --dynamic-muted: var(--color-browser-muted, var(--muted-foreground)); | |
| 17 | 17 | --dynamic-accent: var(--color-browser-accent, var(--primary)); | |
| 18 | - | --dynamic-border: var(--color-browser-border, var(--border)); | |
| 18 | + | /* Border: hardcoded to avoid nested var() issues in WebKitGTK */ | |
| 19 | + | --dynamic-border: var(--color-browser-border, rgba(0, 0, 0, 0.12)); | |
| 19 | 20 | ||
| 20 | 21 | /* Extended semantic colors from design tokens */ | |
| 21 | 22 | --dynamic-primary: var(--primary); | |
| @@ -25,6 +26,11 @@ | |||
| 25 | 26 | --dynamic-ring: var(--ring); | |
| 26 | 27 | } | |
| 27 | 28 | ||
| 29 | + | /* Dark mode border override */ | |
| 30 | + | .dark { | |
| 31 | + | --dynamic-border: var(--color-browser-border, rgba(255, 255, 255, 0.15)); | |
| 32 | + | } | |
| 33 | + | ||
| 28 | 34 | /* Base styles for browser UI components */ | |
| 29 | 35 | .browser-ui { | |
| 30 | 36 | background-color: var(--dynamic-bg); | |
| @@ -5,7 +5,7 @@ | |||||
| 5 | * These bridge between: | 5 | * These bridge between: | ||
| 6 | * 1. Backend palette (--color-browser-*) injected at runtime | 6 | * 1. Backend palette (--color-browser-*) injected at runtime | ||
| 7 | * 2. Design tokens (--background, --primary, etc.) for static fallbacks | 7 | * 2. Design tokens (--background, --primary, etc.) for static fallbacks | ||
| 8 | - | * 3. Component usage (--dynamic-*) for actual styling | 8 | + | * 3. Component usage (shadcn-svelte variables: --background, --card, --foreground, etc.) |
| 9 | */ | 9 | */ | ||
| 10 | :root { | 10 | :root { | ||
| 11 | /* Primary bridge - uses backend palette when available, falls back to tokens */ | 11 | /* Primary bridge - uses backend palette when available, falls back to tokens */ | ||
| @@ -15,7 +15,8 @@ | |||||
| 15 | --dynamic-text: var(--color-browser-text, var(--foreground)); | 15 | --dynamic-text: var(--color-browser-text, var(--foreground)); | ||
| 16 | --dynamic-muted: var(--color-browser-muted, var(--muted-foreground)); | 16 | --dynamic-muted: var(--color-browser-muted, var(--muted-foreground)); | ||
| 17 | --dynamic-accent: var(--color-browser-accent, var(--primary)); | 17 | --dynamic-accent: var(--color-browser-accent, var(--primary)); | ||
| 18 | - | --dynamic-border: var(--color-browser-border, var(--border)); | 18 | + | /* Border: hardcoded to avoid nested var() issues in WebKitGTK */ |
| 19 | + | --dynamic-border: var(--color-browser-border, rgba(0, 0, 0, 0.12)); | |||
| 19 | 20 | ||||
| 20 | /* Extended semantic colors from design tokens */ | 21 | /* Extended semantic colors from design tokens */ | ||
| 21 | --dynamic-primary: var(--primary); | 22 | --dynamic-primary: var(--primary); | ||
| @@ -25,6 +26,11 @@ | |||||
| 25 | --dynamic-ring: var(--ring); | 26 | --dynamic-ring: var(--ring); | ||
| 26 | } | 27 | } | ||
| 27 | 28 | ||||
| 29 | + | /* Dark mode border override */ | |||
| 30 | + | .dark { | |||
| 31 | + | --dynamic-border: var(--color-browser-border, rgba(255, 255, 255, 0.15)); | |||
| 32 | + | } | |||
| 33 | + | ||||
| 28 | /* Base styles for browser UI components */ | 34 | /* Base styles for browser UI components */ | ||
| 29 | .browser-ui { | 35 | .browser-ui { | ||
| 30 | background-color: var(--dynamic-bg); | 36 | background-color: var(--dynamic-bg); | ||