detached faeaea7

fix(blocked-page): replace dynamic variables with shadcn tokens and split border shorthand

commit
faeaea7aa2fba33558c9a5c120411c2b1b02cf68
author
brice · · 2025-12-16 18:05 UTC
committer
brice · · 2025-12-16 22:11 UTC
parent
c560186
signature
unsigned
2 files · +27 -23
Unified
UnifiedSplit
M webui/src/pages/BlockedPage.svelte +26 -22
@@ -99,7 +99,7 @@
9999 <title>Page Blocked</title>
100100 {@html `<style>
101101 html, body {
102- background: var(--dynamic-bg, #0a0a0a);
102+ background: var(--background, #0a0a0a);
103103 margin: 0;
104104 padding: 0;
105105 min-height: 100vh;
@@ -176,8 +176,8 @@
176176 align-items: center;
177177 justify-content: center;
178178 padding: 2rem;
179- background: var(--dynamic-bg, #0a0a0a);
180- color: var(--dynamic-text, #e5e5e5);
179+ background: var(--background, #0a0a0a);
180+ color: var(--foreground, #e5e5e5);
181181 font-family: 'Inter', system-ui, -apple-system, sans-serif;
182182 }
183183
@@ -185,8 +185,10 @@
185185 max-width: 480px;
186186 width: 100%;
187187 padding: 2.5rem 2rem;
188- background: var(--dynamic-surface, #141414);
189- border: 1px solid var(--dynamic-border, #262626);
188+ background: var(--card, #141414);
189+ border-width: 1px;
190+ border-style: solid;
191+ border-color: var(--border, #262626);
190192 text-align: center;
191193 }
192194
@@ -197,7 +199,7 @@
197199 .shield-icon {
198200 width: 64px;
199201 height: 64px;
200- color: var(--dynamic-accent, #3b82f6);
202+ color: var(--primary, #3b82f6);
201203 opacity: 0.9;
202204 }
203205
@@ -205,18 +207,20 @@
205207 font-size: 1.5rem;
206208 font-weight: 600;
207209 margin: 0 0 0.75rem 0;
208- color: var(--dynamic-text, #e5e5e5);
210+ color: var(--foreground, #e5e5e5);
209211 }
210212
211213 .reason {
212214 font-size: 0.9375rem;
213- color: var(--dynamic-muted, #737373);
215+ color: var(--muted-foreground, #737373);
214216 margin: 0 0 1.5rem 0;
215217 }
216218
217219 .url-display {
218- background: var(--dynamic-bg, #0a0a0a);
219- border: 1px solid var(--dynamic-border, #262626);
220+ background: var(--background, #0a0a0a);
221+ border-width: 1px;
222+ border-style: solid;
223+ border-color: var(--border, #262626);
220224 padding: 0.75rem 1rem;
221225 margin-bottom: 1.5rem;
222226 text-align: left;
@@ -225,7 +229,7 @@
225229 .url-label {
226230 display: block;
227231 font-size: 0.75rem;
228- color: var(--dynamic-muted, #737373);
232+ color: var(--muted-foreground, #737373);
229233 margin-bottom: 0.25rem;
230234 text-transform: uppercase;
231235 letter-spacing: 0.05em;
@@ -234,7 +238,7 @@
234238 .url-value {
235239 font-family: 'JetBrains Mono NF', monospace;
236240 font-size: 0.8125rem;
237- color: var(--dynamic-text, #e5e5e5);
241+ color: var(--foreground, #e5e5e5);
238242 word-break: break-all;
239243 display: block;
240244 }
@@ -274,9 +278,9 @@
274278 }
275279
276280 .btn-primary {
277- background: var(--dynamic-accent, #3b82f6);
281+ background: var(--primary, #3b82f6);
278282 color: white;
279- border-color: var(--dynamic-accent, #3b82f6);
283+ border-color: var(--primary, #3b82f6);
280284 }
281285
282286 .btn-primary:hover:not(:disabled) {
@@ -285,23 +289,23 @@
285289
286290 .btn-secondary {
287291 background: transparent;
288- color: var(--dynamic-text, #e5e5e5);
289- border-color: var(--dynamic-border, #262626);
292+ color: var(--foreground, #e5e5e5);
293+ border-color: var(--border, #262626);
290294 }
291295
292296 .btn-secondary:hover:not(:disabled) {
293- background: var(--dynamic-surface-variant, #1a1a1a);
294- border-color: var(--dynamic-muted, #737373);
297+ background: var(--secondary, #1a1a1a);
298+ border-color: var(--muted-foreground, #737373);
295299 }
296300
297301 .btn-ghost {
298302 background: transparent;
299- color: var(--dynamic-muted, #737373);
303+ color: var(--muted-foreground, #737373);
300304 border-color: transparent;
301305 }
302306
303307 .btn-ghost:hover:not(:disabled) {
304- color: var(--dynamic-text, #e5e5e5);
308+ color: var(--foreground, #e5e5e5);
305309 }
306310
307311 .loading-spinner {
@@ -319,12 +323,12 @@
319323
320324 .domain-note {
321325 font-size: 0.75rem;
322- color: var(--dynamic-muted, #737373);
326+ color: var(--muted-foreground, #737373);
323327 margin: 0;
324328 }
325329
326330 .domain-note strong {
327- color: var(--dynamic-text, #e5e5e5);
331+ color: var(--foreground, #e5e5e5);
328332 font-weight: 500;
329333 }
330334 </style>
@@ -99,7 +99,7 @@
99 <title>Page Blocked</title>99 <title>Page Blocked</title>
100 {@html `<style>100 {@html `<style>
101 html, body {101 html, body {
102- background: var(--dynamic-bg, #0a0a0a);102+ background: var(--background, #0a0a0a);
103 margin: 0;103 margin: 0;
104 padding: 0;104 padding: 0;
105 min-height: 100vh;105 min-height: 100vh;
@@ -176,8 +176,8 @@
176 align-items: center;176 align-items: center;
177 justify-content: center;177 justify-content: center;
178 padding: 2rem;178 padding: 2rem;
179- background: var(--dynamic-bg, #0a0a0a);179+ background: var(--background, #0a0a0a);
180- color: var(--dynamic-text, #e5e5e5);180+ color: var(--foreground, #e5e5e5);
181 font-family: 'Inter', system-ui, -apple-system, sans-serif;181 font-family: 'Inter', system-ui, -apple-system, sans-serif;
182 }182 }
183 183
@@ -185,8 +185,10 @@
185 max-width: 480px;185 max-width: 480px;
186 width: 100%;186 width: 100%;
187 padding: 2.5rem 2rem;187 padding: 2.5rem 2rem;
188- background: var(--dynamic-surface, #141414);188+ background: var(--card, #141414);
189- border: 1px solid var(--dynamic-border, #262626);189+ border-width: 1px;
190+ border-style: solid;
191+ border-color: var(--border, #262626);
190 text-align: center;192 text-align: center;
191 }193 }
192 194
@@ -197,7 +199,7 @@
197 .shield-icon {199 .shield-icon {
198 width: 64px;200 width: 64px;
199 height: 64px;201 height: 64px;
200- color: var(--dynamic-accent, #3b82f6);202+ color: var(--primary, #3b82f6);
201 opacity: 0.9;203 opacity: 0.9;
202 }204 }
203 205
@@ -205,18 +207,20 @@
205 font-size: 1.5rem;207 font-size: 1.5rem;
206 font-weight: 600;208 font-weight: 600;
207 margin: 0 0 0.75rem 0;209 margin: 0 0 0.75rem 0;
208- color: var(--dynamic-text, #e5e5e5);210+ color: var(--foreground, #e5e5e5);
209 }211 }
210 212
211 .reason {213 .reason {
212 font-size: 0.9375rem;214 font-size: 0.9375rem;
213- color: var(--dynamic-muted, #737373);215+ color: var(--muted-foreground, #737373);
214 margin: 0 0 1.5rem 0;216 margin: 0 0 1.5rem 0;
215 }217 }
216 218
217 .url-display {219 .url-display {
218- background: var(--dynamic-bg, #0a0a0a);220+ background: var(--background, #0a0a0a);
219- border: 1px solid var(--dynamic-border, #262626);221+ border-width: 1px;
222+ border-style: solid;
223+ border-color: var(--border, #262626);
220 padding: 0.75rem 1rem;224 padding: 0.75rem 1rem;
221 margin-bottom: 1.5rem;225 margin-bottom: 1.5rem;
222 text-align: left;226 text-align: left;
@@ -225,7 +229,7 @@
225 .url-label {229 .url-label {
226 display: block;230 display: block;
227 font-size: 0.75rem;231 font-size: 0.75rem;
228- color: var(--dynamic-muted, #737373);232+ color: var(--muted-foreground, #737373);
229 margin-bottom: 0.25rem;233 margin-bottom: 0.25rem;
230 text-transform: uppercase;234 text-transform: uppercase;
231 letter-spacing: 0.05em;235 letter-spacing: 0.05em;
@@ -234,7 +238,7 @@
234 .url-value {238 .url-value {
235 font-family: 'JetBrains Mono NF', monospace;239 font-family: 'JetBrains Mono NF', monospace;
236 font-size: 0.8125rem;240 font-size: 0.8125rem;
237- color: var(--dynamic-text, #e5e5e5);241+ color: var(--foreground, #e5e5e5);
238 word-break: break-all;242 word-break: break-all;
239 display: block;243 display: block;
240 }244 }
@@ -274,9 +278,9 @@
274 }278 }
275 279
276 .btn-primary {280 .btn-primary {
277- background: var(--dynamic-accent, #3b82f6);281+ background: var(--primary, #3b82f6);
278 color: white;282 color: white;
279- border-color: var(--dynamic-accent, #3b82f6);283+ border-color: var(--primary, #3b82f6);
280 }284 }
281 285
282 .btn-primary:hover:not(:disabled) {286 .btn-primary:hover:not(:disabled) {
@@ -285,23 +289,23 @@
285 289
286 .btn-secondary {290 .btn-secondary {
287 background: transparent;291 background: transparent;
288- color: var(--dynamic-text, #e5e5e5);292+ color: var(--foreground, #e5e5e5);
289- border-color: var(--dynamic-border, #262626);293+ border-color: var(--border, #262626);
290 }294 }
291 295
292 .btn-secondary:hover:not(:disabled) {296 .btn-secondary:hover:not(:disabled) {
293- background: var(--dynamic-surface-variant, #1a1a1a);297+ background: var(--secondary, #1a1a1a);
294- border-color: var(--dynamic-muted, #737373);298+ border-color: var(--muted-foreground, #737373);
295 }299 }
296 300
297 .btn-ghost {301 .btn-ghost {
298 background: transparent;302 background: transparent;
299- color: var(--dynamic-muted, #737373);303+ color: var(--muted-foreground, #737373);
300 border-color: transparent;304 border-color: transparent;
301 }305 }
302 306
303 .btn-ghost:hover:not(:disabled) {307 .btn-ghost:hover:not(:disabled) {
304- color: var(--dynamic-text, #e5e5e5);308+ color: var(--foreground, #e5e5e5);
305 }309 }
306 310
307 .loading-spinner {311 .loading-spinner {
@@ -319,12 +323,12 @@
319 323
320 .domain-note {324 .domain-note {
321 font-size: 0.75rem;325 font-size: 0.75rem;
322- color: var(--dynamic-muted, #737373);326+ color: var(--muted-foreground, #737373);
323 margin: 0;327 margin: 0;
324 }328 }
325 329
326 .domain-note strong {330 .domain-note strong {
327- color: var(--dynamic-text, #e5e5e5);331+ color: var(--foreground, #e5e5e5);
328 font-weight: 500;332 font-weight: 500;
329 }333 }
330 </style>334 </style>
M webui/src/pages/blocked.ts +1 -1
@@ -1,5 +1,5 @@
11 import { mount } from "svelte";
2-import "../styles/tailwind.css";
2+import "../styles/app.css";
33 import BlockedPage from "./BlockedPage.svelte";
44
55 // Mount the BlockedPage component to the DOM
@@ -1,5 +1,5 @@
1 import { mount } from "svelte";1 import { mount } from "svelte";
2-import "../styles/tailwind.css";2+import "../styles/app.css";
3 import BlockedPage from "./BlockedPage.svelte";3 import BlockedPage from "./BlockedPage.svelte";
4 4
5 // Mount the BlockedPage component to the DOM5 // Mount the BlockedPage component to the DOM

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