app.css RawHistoryFolder
1@import "tailwindcss";
2@import "tw-animate-css";
3
4/*
5 * Dumber Browser - Unified Theme CSS
6 * Following shadcn-svelte conventions
7 *
8 * Aesthetic: Industrial Terminal / Brutalist Minimal
9 * - Sharp corners (--radius: 0)
10 * - High contrast
11 * - Vibrant green primary accent
12 *
13 * Theme Flow:
14 * 1. TOML config defines appearance.light_palette / dark_palette
15 * 2. Go ThemeManager converts to CSS variables via palette.ToWebCSSVars()
16 * 3. ContentInjector injects <style data-dumber-theme-vars> into webviews
17 * 4. These CSS values below serve as fallbacks when running outside the browser
18 */
19
20@custom-variant dark (&:is(.dark *));
21
22/* ═══════════════════════════════════════════════════════════════
23 * LIGHT THEME (fallback values - Go backend overrides at runtime)
24 * ═══════════════════════════════════════════════════════════════ */
25:root {
26 --radius: 0;
27
28 /* Core surfaces */
29 --background: oklch(0.985 0.002 260);
30 --foreground: oklch(0.145 0.02 260);
31
32 /* Card/Panel surfaces */
33 --card: oklch(0.965 0.004 260);
34 --card-foreground: oklch(0.145 0.02 260);
35
36 /* Popover/Dropdown */
37 --popover: oklch(0.985 0.002 260);
38 --popover-foreground: oklch(0.145 0.02 260);
39
40 /* Primary - Vibrant Green */
41 --primary: oklch(0.55 0.20 145);
42 --primary-foreground: oklch(0.985 0 0);
43
44 /* Secondary - Muted surfaces */
45 --secondary: oklch(0.94 0.008 260);
46 --secondary-foreground: oklch(0.20 0.02 260);
47
48 /* Muted - Subdued content */
49 --muted: oklch(0.94 0.008 260);
50 --muted-foreground: oklch(0.48 0.02 260);
51
52 /* Accent - Cyan for info/highlights */
53 --accent: oklch(0.58 0.14 200);
54 --accent-foreground: oklch(0.145 0.02 260);
55
56 /* Destructive - Red for danger */
57 --destructive: oklch(0.55 0.22 25);
58 --destructive-foreground: oklch(0.985 0 0);
59
60 /* Borders & Inputs - solid colors for WebKitGTK compatibility */
61 --border: oklch(0.88 0.008 260);
62 --input: oklch(0.88 0.008 260);
63 --ring: var(--primary);
64
65 /* Semantic colors - for status indicators */
66 --success: oklch(0.65 0.20 145);
67 --success-foreground: oklch(0.985 0 0);
68 --warning: oklch(0.75 0.18 85);
69 --warning-foreground: oklch(0.145 0.02 260);
70 --info: oklch(0.65 0.15 230);
71 --info-foreground: oklch(0.985 0 0);
72
73 /* Chart colors */
74 --chart-1: oklch(0.58 0.18 145);
75 --chart-2: oklch(0.56 0.14 200);
76 --chart-3: oklch(0.66 0.15 70);
77 --chart-4: oklch(0.58 0.18 300);
78 --chart-5: oklch(0.60 0.18 25);
79
80 /* Sidebar */
81 --sidebar: oklch(0.975 0.002 260);
82 --sidebar-foreground: oklch(0.145 0.02 260);
83 --sidebar-primary: oklch(0.55 0.20 145);
84 --sidebar-primary-foreground: oklch(0.985 0 0);
85 --sidebar-accent: oklch(0.94 0.008 260);
86 --sidebar-accent-foreground: oklch(0.20 0.02 260);
87 --sidebar-border: oklch(0.88 0.008 260);
88 --sidebar-ring: oklch(0.55 0.20 145);
89}
90
91/* ═══════════════════════════════════════════════════════════════
92 * DARK THEME (fallback values - Go backend overrides at runtime)
93 * ═══════════════════════════════════════════════════════════════ */
94.dark {
95 /* Core surfaces - true black for maximum contrast */
96 --background: oklch(0.09 0.005 260);
97 --foreground: oklch(0.97 0 0);
98
99 /* Card/Panel surfaces - slightly elevated */
100 --card: oklch(0.14 0.008 260);
101 --card-foreground: oklch(0.97 0 0);
102
103 /* Popover/Dropdown */
104 --popover: oklch(0.16 0.008 260);
105 --popover-foreground: oklch(0.97 0 0);
106
107 /* Primary - Bright Green */
108 --primary: oklch(0.75 0.19 145);
109 --primary-foreground: oklch(0.12 0.02 145);
110
111 /* Secondary - Elevated surfaces */
112 --secondary: oklch(0.20 0.008 260);
113 --secondary-foreground: oklch(0.97 0 0);
114
115 /* Muted - More visible subdued content */
116 --muted: oklch(0.22 0.008 260);
117 --muted-foreground: oklch(0.70 0.01 260);
118
119 /* Accent - Cyan for info/highlights */
120 --accent: oklch(0.68 0.14 200);
121 --accent-foreground: oklch(0.97 0 0);
122
123 /* Destructive - Red for danger */
124 --destructive: oklch(0.65 0.20 25);
125 --destructive-foreground: oklch(0.97 0 0);
126
127 /* Borders & Inputs - solid colors for WebKitGTK compatibility */
128 --border: oklch(0.35 0.01 260);
129 --input: oklch(0.35 0.01 260);
130 --ring: var(--primary);
131
132 /* Semantic colors - brighter for dark bg */
133 --success: oklch(0.72 0.18 145);
134 --success-foreground: oklch(0.12 0.02 145);
135 --warning: oklch(0.80 0.16 85);
136 --warning-foreground: oklch(0.12 0.02 85);
137 --info: oklch(0.70 0.14 230);
138 --info-foreground: oklch(0.12 0.02 230);
139
140 /* Chart colors - brighter for dark bg */
141 --chart-1: oklch(0.72 0.18 145);
142 --chart-2: oklch(0.68 0.14 200);
143 --chart-3: oklch(0.76 0.16 70);
144 --chart-4: oklch(0.66 0.18 300);
145 --chart-5: oklch(0.68 0.18 25);
146
147 /* Sidebar */
148 --sidebar: oklch(0.12 0.008 260);
149 --sidebar-foreground: oklch(0.97 0 0);
150 --sidebar-primary: oklch(0.75 0.19 145);
151 --sidebar-primary-foreground: oklch(0.12 0.02 145);
152 --sidebar-accent: oklch(0.20 0.008 260);
153 --sidebar-accent-foreground: oklch(0.97 0 0);
154 --sidebar-border: oklch(0.35 0.01 260);
155 --sidebar-ring: oklch(0.75 0.19 145);
156}
157
158/* ═══════════════════════════════════════════════════════════════
159 * TAILWIND THEME BRIDGE
160 * Maps design tokens to Tailwind's color system
161 * ═══════════════════════════════════════════════════════════════ */
162@theme inline {
163 --radius-sm: calc(var(--radius) - 4px);
164 --radius-md: calc(var(--radius) - 2px);
165 --radius-lg: var(--radius);
166 --radius-xl: calc(var(--radius) + 4px);
167
168 --color-background: var(--background);
169 --color-foreground: var(--foreground);
170 --color-card: var(--card);
171 --color-card-foreground: var(--card-foreground);
172 --color-popover: var(--popover);
173 --color-popover-foreground: var(--popover-foreground);
174 --color-primary: var(--primary);
175 --color-primary-foreground: var(--primary-foreground);
176 --color-secondary: var(--secondary);
177 --color-secondary-foreground: var(--secondary-foreground);
178 --color-muted: var(--muted);
179 --color-muted-foreground: var(--muted-foreground);
180 --color-accent: var(--accent);
181 --color-accent-foreground: var(--accent-foreground);
182 --color-destructive: var(--destructive);
183 --color-destructive-foreground: var(--destructive-foreground);
184 --color-success: var(--success);
185 --color-success-foreground: var(--success-foreground);
186 --color-warning: var(--warning);
187 --color-warning-foreground: var(--warning-foreground);
188 --color-info: var(--info);
189 --color-info-foreground: var(--info-foreground);
190 --color-border: var(--border);
191 --color-input: var(--input);
192 --color-ring: var(--ring);
193 --color-chart-1: var(--chart-1);
194 --color-chart-2: var(--chart-2);
195 --color-chart-3: var(--chart-3);
196 --color-chart-4: var(--chart-4);
197 --color-chart-5: var(--chart-5);
198 --color-sidebar: var(--sidebar);
199 --color-sidebar-foreground: var(--sidebar-foreground);
200 --color-sidebar-primary: var(--sidebar-primary);
201 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
202 --color-sidebar-accent: var(--sidebar-accent);
203 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
204 --color-sidebar-border: var(--sidebar-border);
205 --color-sidebar-ring: var(--sidebar-ring);
206}
207
208/* ═══════════════════════════════════════════════════════════════
209 * BASE LAYER
210 * Default styles applied to all elements
211 * ═══════════════════════════════════════════════════════════════ */
212@layer base {
213 * {
214 @apply border-border outline-ring/50;
215 }
216 body {
217 @apply bg-background text-foreground;
218 transition:
219 background-color 200ms ease,
220 color 200ms ease;
221 }
222}
223
224/* ═══════════════════════════════════════════════════════════════
225 * BROWSER UI BASE
226 * ═══════════════════════════════════════════════════════════════ */
227
228.browser-ui {
229 background-color: var(--background);
230 color: var(--foreground);
231 border-color: var(--border);
232 transition: colors 250ms;
233}
234
235/* ═══════════════════════════════════════════════════════════════
236 * ANIMATIONS
237 * ═══════════════════════════════════════════════════════════════ */
238
239.slide-in-top {
240 animation: slide-in-top 0.25s ease-out;
241}
242
243.slide-out-top {
244 animation: slide-out-top 0.25s ease-in;
245}
246
247.fade-in {
248 animation: fade-in 0.15s ease-out;
249}
250
251.fade-out {
252 animation: fade-out 0.15s ease-in;
253}
254
255@keyframes slide-in-top {
256 from {
257 transform: translateY(-100%);
258 opacity: 0;
259 }
260 to {
261 transform: translateY(0);
262 opacity: 1;
263 }
264}
265
266@keyframes slide-out-top {
267 from {
268 transform: translateY(0);
269 opacity: 1;
270 }
271 to {
272 transform: translateY(-100%);
273 opacity: 0;
274 }
275}
276
277@keyframes fade-in {
278 from {
279 opacity: 0;
280 }
281 to {
282 opacity: 1;
283 }
284}
285
286@keyframes fade-out {
287 from {
288 opacity: 1;
289 }
290 to {
291 opacity: 0;
292 }
293}
294
295/* ═══════════════════════════════════════════════════════════════
296 * FIND HIGHLIGHTING
297 * Styles for in-page search highlights
298 * ═══════════════════════════════════════════════════════════════ */
299
300.find-highlight {
301 background-color: rgb(255 235 59); /* yellow-400 */
302 color: rgb(0 0 0); /* black */
303 padding: 0 0.125rem; /* px-0.5 */
304 border-radius: 0.125rem; /* rounded-sm */
305 box-shadow: 0 0 0 1px rgb(200 185 0) inset;
306}
307
308.find-active {
309 background-color: rgb(255 152 0) !important; /* orange-500 */
310 color: rgb(0 0 0); /* black */
311 box-shadow: 0 0 0 1px rgb(179 107 0) inset !important;
312}
313
314/* ═══════════════════════════════════════════════════════════════
315 * COMPONENT ISOLATION
316 * For injecting browser UI into external pages
317 * ═══════════════════════════════════════════════════════════════ */
318
319.browser-component-root {
320 /* Reset any inherited styles from the website */
321 all: initial;
322 /* Apply our design system */
323 font-family:
324 Fira Sans,
325 system-ui,
326 -apple-system,
327 sans-serif;
328 box-sizing: border-box;
329 * {
330 box-sizing: border-box;
331 }
332}