detached afcf42b

feat(styles): add unified app.css following shadcn-svelte conventions

commit
afcf42b7df068066bcd78835ca178d0f9156df84
author
brice · · 2025-12-16 22:41 UTC
committer
brice · · 2025-12-16 19:08 UTC
parent
8c16893
signature
unsigned
1 file · +354 -0
Unified
UnifiedSplit
A webui/src/styles/app.css +354 -0
@@ -0,0 +1,354 @@
1+@import "tailwindcss";
2+
3+/*
4+ * Dumber Browser - Unified Theme CSS
5+ * Following shadcn-svelte conventions
6+ *
7+ * Aesthetic: Industrial Terminal / Brutalist Minimal
8+ * - Sharp corners (--radius: 0)
9+ * - High contrast
10+ * - Vibrant green primary accent
11+ */
12+
13+@custom-variant dark (&:is(.dark *));
14+
15+/* ═══════════════════════════════════════════════════════════════
16+ * LIGHT THEME
17+ * ═══════════════════════════════════════════════════════════════ */
18+:root {
19+ --radius: 0;
20+
21+ /* Core surfaces */
22+ --background: oklch(0.985 0.002 260);
23+ --foreground: oklch(0.145 0.02 260);
24+
25+ /* Card/Panel surfaces */
26+ --card: oklch(0.965 0.004 260);
27+ --card-foreground: oklch(0.145 0.02 260);
28+
29+ /* Popover/Dropdown */
30+ --popover: oklch(0.985 0.002 260);
31+ --popover-foreground: oklch(0.145 0.02 260);
32+
33+ /* Primary - Vibrant Green */
34+ --primary: oklch(0.55 0.20 145);
35+ --primary-foreground: oklch(0.985 0 0);
36+
37+ /* Secondary - Muted surfaces */
38+ --secondary: oklch(0.94 0.008 260);
39+ --secondary-foreground: oklch(0.20 0.02 260);
40+
41+ /* Muted - Subdued content */
42+ --muted: oklch(0.94 0.008 260);
43+ --muted-foreground: oklch(0.48 0.02 260);
44+
45+ /* Accent - Cyan for info/highlights */
46+ --accent: oklch(0.58 0.14 200);
47+ --accent-foreground: oklch(0.145 0.02 260);
48+
49+ /* Destructive - Red for danger */
50+ --destructive: oklch(0.55 0.22 25);
51+ --destructive-foreground: oklch(0.985 0 0);
52+
53+ /* Borders & Inputs - solid colors for WebKitGTK compatibility */
54+ --border: oklch(0.88 0.008 260);
55+ --input: oklch(0.88 0.008 260);
56+ --ring: oklch(0.55 0.20 145);
57+
58+ /* Chart colors */
59+ --chart-1: oklch(0.58 0.18 145);
60+ --chart-2: oklch(0.56 0.14 200);
61+ --chart-3: oklch(0.66 0.15 70);
62+ --chart-4: oklch(0.58 0.18 300);
63+ --chart-5: oklch(0.60 0.18 25);
64+
65+ /* Sidebar */
66+ --sidebar: oklch(0.975 0.002 260);
67+ --sidebar-foreground: oklch(0.145 0.02 260);
68+ --sidebar-primary: oklch(0.55 0.20 145);
69+ --sidebar-primary-foreground: oklch(0.985 0 0);
70+ --sidebar-accent: oklch(0.94 0.008 260);
71+ --sidebar-accent-foreground: oklch(0.20 0.02 260);
72+ --sidebar-border: oklch(0.88 0.008 260);
73+ --sidebar-ring: oklch(0.55 0.20 145);
74+}
75+
76+/* ═══════════════════════════════════════════════════════════════
77+ * DARK THEME
78+ * ═══════════════════════════════════════════════════════════════ */
79+.dark {
80+ /* Core surfaces - true black for maximum contrast */
81+ --background: oklch(0.09 0.005 260);
82+ --foreground: oklch(0.97 0 0);
83+
84+ /* Card/Panel surfaces - slightly elevated */
85+ --card: oklch(0.14 0.008 260);
86+ --card-foreground: oklch(0.97 0 0);
87+
88+ /* Popover/Dropdown */
89+ --popover: oklch(0.16 0.008 260);
90+ --popover-foreground: oklch(0.97 0 0);
91+
92+ /* Primary - Bright Green */
93+ --primary: oklch(0.75 0.19 145);
94+ --primary-foreground: oklch(0.12 0.02 145);
95+
96+ /* Secondary - Elevated surfaces */
97+ --secondary: oklch(0.20 0.008 260);
98+ --secondary-foreground: oklch(0.97 0 0);
99+
100+ /* Muted - More visible subdued content */
101+ --muted: oklch(0.22 0.008 260);
102+ --muted-foreground: oklch(0.70 0.01 260);
103+
104+ /* Accent - Cyan for info/highlights */
105+ --accent: oklch(0.68 0.14 200);
106+ --accent-foreground: oklch(0.97 0 0);
107+
108+ /* Destructive - Red for danger */
109+ --destructive: oklch(0.65 0.20 25);
110+ --destructive-foreground: oklch(0.97 0 0);
111+
112+ /* Borders & Inputs - solid colors for WebKitGTK compatibility */
113+ --border: oklch(0.35 0.01 260);
114+ --input: oklch(0.35 0.01 260);
115+ --ring: oklch(0.75 0.19 145);
116+
117+ /* Chart colors - brighter for dark bg */
118+ --chart-1: oklch(0.72 0.18 145);
119+ --chart-2: oklch(0.68 0.14 200);
120+ --chart-3: oklch(0.76 0.16 70);
121+ --chart-4: oklch(0.66 0.18 300);
122+ --chart-5: oklch(0.68 0.18 25);
123+
124+ /* Sidebar */
125+ --sidebar: oklch(0.12 0.008 260);
126+ --sidebar-foreground: oklch(0.97 0 0);
127+ --sidebar-primary: oklch(0.75 0.19 145);
128+ --sidebar-primary-foreground: oklch(0.12 0.02 145);
129+ --sidebar-accent: oklch(0.20 0.008 260);
130+ --sidebar-accent-foreground: oklch(0.97 0 0);
131+ --sidebar-border: oklch(0.35 0.01 260);
132+ --sidebar-ring: oklch(0.75 0.19 145);
133+}
134+
135+/* ═══════════════════════════════════════════════════════════════
136+ * TAILWIND THEME BRIDGE
137+ * Maps design tokens to Tailwind's color system
138+ * ═══════════════════════════════════════════════════════════════ */
139+@theme inline {
140+ --radius-sm: calc(var(--radius) - 4px);
141+ --radius-md: calc(var(--radius) - 2px);
142+ --radius-lg: var(--radius);
143+ --radius-xl: calc(var(--radius) + 4px);
144+
145+ --color-background: var(--background);
146+ --color-foreground: var(--foreground);
147+ --color-card: var(--card);
148+ --color-card-foreground: var(--card-foreground);
149+ --color-popover: var(--popover);
150+ --color-popover-foreground: var(--popover-foreground);
151+ --color-primary: var(--primary);
152+ --color-primary-foreground: var(--primary-foreground);
153+ --color-secondary: var(--secondary);
154+ --color-secondary-foreground: var(--secondary-foreground);
155+ --color-muted: var(--muted);
156+ --color-muted-foreground: var(--muted-foreground);
157+ --color-accent: var(--accent);
158+ --color-accent-foreground: var(--accent-foreground);
159+ --color-destructive: var(--destructive);
160+ --color-destructive-foreground: var(--destructive-foreground);
161+ --color-border: var(--border);
162+ --color-input: var(--input);
163+ --color-ring: var(--ring);
164+ --color-chart-1: var(--chart-1);
165+ --color-chart-2: var(--chart-2);
166+ --color-chart-3: var(--chart-3);
167+ --color-chart-4: var(--chart-4);
168+ --color-chart-5: var(--chart-5);
169+ --color-sidebar: var(--sidebar);
170+ --color-sidebar-foreground: var(--sidebar-foreground);
171+ --color-sidebar-primary: var(--sidebar-primary);
172+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
173+ --color-sidebar-accent: var(--sidebar-accent);
174+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
175+ --color-sidebar-border: var(--sidebar-border);
176+ --color-sidebar-ring: var(--sidebar-ring);
177+}
178+
179+/* ═══════════════════════════════════════════════════════════════
180+ * BASE LAYER
181+ * Default styles applied to all elements
182+ * ═══════════════════════════════════════════════════════════════ */
183+@layer base {
184+ * {
185+ @apply border-border;
186+ }
187+ body {
188+ @apply bg-background text-foreground;
189+ }
190+}
191+
192+/* ═══════════════════════════════════════════════════════════════
193+ * BROWSER UI COMPONENTS
194+ * Custom styles for browser-specific UI elements
195+ * ═══════════════════════════════════════════════════════════════ */
196+
197+/* Toast notifications */
198+.toast-base {
199+ border-radius: 0;
200+ box-shadow:
201+ 0 10px 15px -3px rgb(0 0 0 / 0.1),
202+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
203+ padding: 0.25rem 0.5rem;
204+ max-width: 24rem;
205+ pointer-events: auto;
206+ background-color: var(--card);
207+ color: var(--foreground);
208+ border-width: 1px;
209+ border-style: solid;
210+ border-color: var(--border);
211+}
212+
213+/* Omnibox/Find bar */
214+.omnibox-base {
215+ background-color: var(--background);
216+ color: var(--foreground);
217+ border-width: 1px;
218+ border-style: solid;
219+ border-color: var(--border);
220+ box-shadow:
221+ 0 4px 6px -1px rgb(0 0 0 / 0.1),
222+ 0 2px 4px -2px rgb(0 0 0 / 0.1);
223+ transition: all 150ms;
224+}
225+
226+.omnibox-base:focus-within {
227+ border-color: var(--primary);
228+}
229+
230+.omnibox-input {
231+ width: 100%;
232+ padding: 0.5rem 0.75rem;
233+ background-color: transparent;
234+ color: var(--foreground);
235+ outline: none;
236+ font-size: 0.875rem;
237+}
238+
239+.omnibox-input::placeholder {
240+ color: var(--muted-foreground);
241+}
242+
243+/* Find bar */
244+.findbar {
245+ display: flex;
246+ align-items: center;
247+ gap: 0.5rem;
248+ padding: 0.5rem 0.75rem;
249+}
250+
251+.findbar-input {
252+ flex: 1;
253+ background-color: transparent;
254+ color: var(--foreground);
255+ outline: none;
256+ font-size: 0.875rem;
257+}
258+
259+.findbar-input::placeholder {
260+ color: var(--muted-foreground);
261+}
262+
263+.findbar-button {
264+ padding: 0.25rem 0.5rem;
265+ border-radius: 0;
266+ color: var(--muted-foreground);
267+ transition: color 150ms;
268+ font-size: 0.875rem;
269+}
270+
271+.findbar-button:hover {
272+ color: var(--foreground);
273+}
274+
275+.findbar-count {
276+ font-size: 0.75rem;
277+ color: var(--muted-foreground);
278+ font-variant-numeric: tabular-nums;
279+}
280+
281+/* Find highlighting */
282+.find-highlight {
283+ background-color: rgb(255 235 59);
284+ color: rgb(0 0 0);
285+ padding: 0 0.125rem;
286+ border-radius: 0.125rem;
287+ box-shadow: 0 0 0 1px rgb(200 185 0) inset;
288+}
289+
290+.find-active {
291+ background-color: rgb(255 152 0) !important;
292+ color: rgb(0 0 0);
293+ box-shadow: 0 0 0 1px rgb(179 107 0) inset !important;
294+}
295+
296+/* Animation utilities */
297+.slide-in-top {
298+ animation: slide-in-top 0.25s ease-out;
299+}
300+
301+.slide-out-top {
302+ animation: slide-out-top 0.25s ease-in;
303+}
304+
305+.fade-in {
306+ animation: fade-in 0.15s ease-out;
307+}
308+
309+.fade-out {
310+ animation: fade-out 0.15s ease-in;
311+}
312+
313+@keyframes slide-in-top {
314+ from {
315+ transform: translateY(-100%);
316+ opacity: 0;
317+ }
318+ to {
319+ transform: translateY(0);
320+ opacity: 1;
321+ }
322+}
323+
324+@keyframes slide-out-top {
325+ from {
326+ transform: translateY(0);
327+ opacity: 1;
328+ }
329+ to {
330+ transform: translateY(-100%);
331+ opacity: 0;
332+ }
333+}
334+
335+@keyframes fade-in {
336+ from { opacity: 0; }
337+ to { opacity: 1; }
338+}
339+
340+@keyframes fade-out {
341+ from { opacity: 1; }
342+ to { opacity: 0; }
343+}
344+
345+/* Component isolation utility */
346+.browser-component-root {
347+ all: initial;
348+ font-family: Fira Sans, system-ui, -apple-system, sans-serif;
349+ box-sizing: border-box;
350+}
351+
352+.browser-component-root * {
353+ box-sizing: border-box;
354+}
@@ -0,0 +1,354 @@
1+@import "tailwindcss";
2+
3+/*
4+ * Dumber Browser - Unified Theme CSS
5+ * Following shadcn-svelte conventions
6+ *
7+ * Aesthetic: Industrial Terminal / Brutalist Minimal
8+ * - Sharp corners (--radius: 0)
9+ * - High contrast
10+ * - Vibrant green primary accent
11+ */
12+
13+@custom-variant dark (&:is(.dark *));
14+
15+/* ═══════════════════════════════════════════════════════════════
16+ * LIGHT THEME
17+ * ═══════════════════════════════════════════════════════════════ */
18+:root {
19+ --radius: 0;
20+
21+ /* Core surfaces */
22+ --background: oklch(0.985 0.002 260);
23+ --foreground: oklch(0.145 0.02 260);
24+
25+ /* Card/Panel surfaces */
26+ --card: oklch(0.965 0.004 260);
27+ --card-foreground: oklch(0.145 0.02 260);
28+
29+ /* Popover/Dropdown */
30+ --popover: oklch(0.985 0.002 260);
31+ --popover-foreground: oklch(0.145 0.02 260);
32+
33+ /* Primary - Vibrant Green */
34+ --primary: oklch(0.55 0.20 145);
35+ --primary-foreground: oklch(0.985 0 0);
36+
37+ /* Secondary - Muted surfaces */
38+ --secondary: oklch(0.94 0.008 260);
39+ --secondary-foreground: oklch(0.20 0.02 260);
40+
41+ /* Muted - Subdued content */
42+ --muted: oklch(0.94 0.008 260);
43+ --muted-foreground: oklch(0.48 0.02 260);
44+
45+ /* Accent - Cyan for info/highlights */
46+ --accent: oklch(0.58 0.14 200);
47+ --accent-foreground: oklch(0.145 0.02 260);
48+
49+ /* Destructive - Red for danger */
50+ --destructive: oklch(0.55 0.22 25);
51+ --destructive-foreground: oklch(0.985 0 0);
52+
53+ /* Borders & Inputs - solid colors for WebKitGTK compatibility */
54+ --border: oklch(0.88 0.008 260);
55+ --input: oklch(0.88 0.008 260);
56+ --ring: oklch(0.55 0.20 145);
57+
58+ /* Chart colors */
59+ --chart-1: oklch(0.58 0.18 145);
60+ --chart-2: oklch(0.56 0.14 200);
61+ --chart-3: oklch(0.66 0.15 70);
62+ --chart-4: oklch(0.58 0.18 300);
63+ --chart-5: oklch(0.60 0.18 25);
64+
65+ /* Sidebar */
66+ --sidebar: oklch(0.975 0.002 260);
67+ --sidebar-foreground: oklch(0.145 0.02 260);
68+ --sidebar-primary: oklch(0.55 0.20 145);
69+ --sidebar-primary-foreground: oklch(0.985 0 0);
70+ --sidebar-accent: oklch(0.94 0.008 260);
71+ --sidebar-accent-foreground: oklch(0.20 0.02 260);
72+ --sidebar-border: oklch(0.88 0.008 260);
73+ --sidebar-ring: oklch(0.55 0.20 145);
74+}
75+
76+/* ═══════════════════════════════════════════════════════════════
77+ * DARK THEME
78+ * ═══════════════════════════════════════════════════════════════ */
79+.dark {
80+ /* Core surfaces - true black for maximum contrast */
81+ --background: oklch(0.09 0.005 260);
82+ --foreground: oklch(0.97 0 0);
83+
84+ /* Card/Panel surfaces - slightly elevated */
85+ --card: oklch(0.14 0.008 260);
86+ --card-foreground: oklch(0.97 0 0);
87+
88+ /* Popover/Dropdown */
89+ --popover: oklch(0.16 0.008 260);
90+ --popover-foreground: oklch(0.97 0 0);
91+
92+ /* Primary - Bright Green */
93+ --primary: oklch(0.75 0.19 145);
94+ --primary-foreground: oklch(0.12 0.02 145);
95+
96+ /* Secondary - Elevated surfaces */
97+ --secondary: oklch(0.20 0.008 260);
98+ --secondary-foreground: oklch(0.97 0 0);
99+
100+ /* Muted - More visible subdued content */
101+ --muted: oklch(0.22 0.008 260);
102+ --muted-foreground: oklch(0.70 0.01 260);
103+
104+ /* Accent - Cyan for info/highlights */
105+ --accent: oklch(0.68 0.14 200);
106+ --accent-foreground: oklch(0.97 0 0);
107+
108+ /* Destructive - Red for danger */
109+ --destructive: oklch(0.65 0.20 25);
110+ --destructive-foreground: oklch(0.97 0 0);
111+
112+ /* Borders & Inputs - solid colors for WebKitGTK compatibility */
113+ --border: oklch(0.35 0.01 260);
114+ --input: oklch(0.35 0.01 260);
115+ --ring: oklch(0.75 0.19 145);
116+
117+ /* Chart colors - brighter for dark bg */
118+ --chart-1: oklch(0.72 0.18 145);
119+ --chart-2: oklch(0.68 0.14 200);
120+ --chart-3: oklch(0.76 0.16 70);
121+ --chart-4: oklch(0.66 0.18 300);
122+ --chart-5: oklch(0.68 0.18 25);
123+
124+ /* Sidebar */
125+ --sidebar: oklch(0.12 0.008 260);
126+ --sidebar-foreground: oklch(0.97 0 0);
127+ --sidebar-primary: oklch(0.75 0.19 145);
128+ --sidebar-primary-foreground: oklch(0.12 0.02 145);
129+ --sidebar-accent: oklch(0.20 0.008 260);
130+ --sidebar-accent-foreground: oklch(0.97 0 0);
131+ --sidebar-border: oklch(0.35 0.01 260);
132+ --sidebar-ring: oklch(0.75 0.19 145);
133+}
134+
135+/* ═══════════════════════════════════════════════════════════════
136+ * TAILWIND THEME BRIDGE
137+ * Maps design tokens to Tailwind's color system
138+ * ═══════════════════════════════════════════════════════════════ */
139+@theme inline {
140+ --radius-sm: calc(var(--radius) - 4px);
141+ --radius-md: calc(var(--radius) - 2px);
142+ --radius-lg: var(--radius);
143+ --radius-xl: calc(var(--radius) + 4px);
144+
145+ --color-background: var(--background);
146+ --color-foreground: var(--foreground);
147+ --color-card: var(--card);
148+ --color-card-foreground: var(--card-foreground);
149+ --color-popover: var(--popover);
150+ --color-popover-foreground: var(--popover-foreground);
151+ --color-primary: var(--primary);
152+ --color-primary-foreground: var(--primary-foreground);
153+ --color-secondary: var(--secondary);
154+ --color-secondary-foreground: var(--secondary-foreground);
155+ --color-muted: var(--muted);
156+ --color-muted-foreground: var(--muted-foreground);
157+ --color-accent: var(--accent);
158+ --color-accent-foreground: var(--accent-foreground);
159+ --color-destructive: var(--destructive);
160+ --color-destructive-foreground: var(--destructive-foreground);
161+ --color-border: var(--border);
162+ --color-input: var(--input);
163+ --color-ring: var(--ring);
164+ --color-chart-1: var(--chart-1);
165+ --color-chart-2: var(--chart-2);
166+ --color-chart-3: var(--chart-3);
167+ --color-chart-4: var(--chart-4);
168+ --color-chart-5: var(--chart-5);
169+ --color-sidebar: var(--sidebar);
170+ --color-sidebar-foreground: var(--sidebar-foreground);
171+ --color-sidebar-primary: var(--sidebar-primary);
172+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
173+ --color-sidebar-accent: var(--sidebar-accent);
174+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
175+ --color-sidebar-border: var(--sidebar-border);
176+ --color-sidebar-ring: var(--sidebar-ring);
177+}
178+
179+/* ═══════════════════════════════════════════════════════════════
180+ * BASE LAYER
181+ * Default styles applied to all elements
182+ * ═══════════════════════════════════════════════════════════════ */
183+@layer base {
184+ * {
185+ @apply border-border;
186+ }
187+ body {
188+ @apply bg-background text-foreground;
189+ }
190+}
191+
192+/* ═══════════════════════════════════════════════════════════════
193+ * BROWSER UI COMPONENTS
194+ * Custom styles for browser-specific UI elements
195+ * ═══════════════════════════════════════════════════════════════ */
196+
197+/* Toast notifications */
198+.toast-base {
199+ border-radius: 0;
200+ box-shadow:
201+ 0 10px 15px -3px rgb(0 0 0 / 0.1),
202+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
203+ padding: 0.25rem 0.5rem;
204+ max-width: 24rem;
205+ pointer-events: auto;
206+ background-color: var(--card);
207+ color: var(--foreground);
208+ border-width: 1px;
209+ border-style: solid;
210+ border-color: var(--border);
211+}
212+
213+/* Omnibox/Find bar */
214+.omnibox-base {
215+ background-color: var(--background);
216+ color: var(--foreground);
217+ border-width: 1px;
218+ border-style: solid;
219+ border-color: var(--border);
220+ box-shadow:
221+ 0 4px 6px -1px rgb(0 0 0 / 0.1),
222+ 0 2px 4px -2px rgb(0 0 0 / 0.1);
223+ transition: all 150ms;
224+}
225+
226+.omnibox-base:focus-within {
227+ border-color: var(--primary);
228+}
229+
230+.omnibox-input {
231+ width: 100%;
232+ padding: 0.5rem 0.75rem;
233+ background-color: transparent;
234+ color: var(--foreground);
235+ outline: none;
236+ font-size: 0.875rem;
237+}
238+
239+.omnibox-input::placeholder {
240+ color: var(--muted-foreground);
241+}
242+
243+/* Find bar */
244+.findbar {
245+ display: flex;
246+ align-items: center;
247+ gap: 0.5rem;
248+ padding: 0.5rem 0.75rem;
249+}
250+
251+.findbar-input {
252+ flex: 1;
253+ background-color: transparent;
254+ color: var(--foreground);
255+ outline: none;
256+ font-size: 0.875rem;
257+}
258+
259+.findbar-input::placeholder {
260+ color: var(--muted-foreground);
261+}
262+
263+.findbar-button {
264+ padding: 0.25rem 0.5rem;
265+ border-radius: 0;
266+ color: var(--muted-foreground);
267+ transition: color 150ms;
268+ font-size: 0.875rem;
269+}
270+
271+.findbar-button:hover {
272+ color: var(--foreground);
273+}
274+
275+.findbar-count {
276+ font-size: 0.75rem;
277+ color: var(--muted-foreground);
278+ font-variant-numeric: tabular-nums;
279+}
280+
281+/* Find highlighting */
282+.find-highlight {
283+ background-color: rgb(255 235 59);
284+ color: rgb(0 0 0);
285+ padding: 0 0.125rem;
286+ border-radius: 0.125rem;
287+ box-shadow: 0 0 0 1px rgb(200 185 0) inset;
288+}
289+
290+.find-active {
291+ background-color: rgb(255 152 0) !important;
292+ color: rgb(0 0 0);
293+ box-shadow: 0 0 0 1px rgb(179 107 0) inset !important;
294+}
295+
296+/* Animation utilities */
297+.slide-in-top {
298+ animation: slide-in-top 0.25s ease-out;
299+}
300+
301+.slide-out-top {
302+ animation: slide-out-top 0.25s ease-in;
303+}
304+
305+.fade-in {
306+ animation: fade-in 0.15s ease-out;
307+}
308+
309+.fade-out {
310+ animation: fade-out 0.15s ease-in;
311+}
312+
313+@keyframes slide-in-top {
314+ from {
315+ transform: translateY(-100%);
316+ opacity: 0;
317+ }
318+ to {
319+ transform: translateY(0);
320+ opacity: 1;
321+ }
322+}
323+
324+@keyframes slide-out-top {
325+ from {
326+ transform: translateY(0);
327+ opacity: 1;
328+ }
329+ to {
330+ transform: translateY(-100%);
331+ opacity: 0;
332+ }
333+}
334+
335+@keyframes fade-in {
336+ from { opacity: 0; }
337+ to { opacity: 1; }
338+}
339+
340+@keyframes fade-out {
341+ from { opacity: 1; }
342+ to { opacity: 0; }
343+}
344+
345+/* Component isolation utility */
346+.browser-component-root {
347+ all: initial;
348+ font-family: Fira Sans, system-ui, -apple-system, sans-serif;
349+ box-sizing: border-box;
350+}
351+
352+.browser-component-root * {
353+ box-sizing: border-box;
354+}

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 8

Tags 42

↑↓ moveenter openesc close