detached 8c16893

fix(homepage-content): replace dynamic variables with shadcn tokens across all panels

commit
8c168932d762c100c0428d797f571619d80a0cf8
author
brice · · 2025-12-16 22:00 UTC
committer
brice · · 2025-12-16 20:01 UTC
parent
fed5f0c
signature
unsigned
15 files · +312 -218
Split
UnifiedSplit
M webui/src/pages/homepage/analytics/DailyVisitsChart.svelte +1 -1
@@ -95,7 +95,7 @@
9595 }
9696
9797 .chart-value {
98- color: var(--dynamic-muted, #737373);
98+ color: var(--muted-foreground, #737373);
9999 }
100100
101101 .chart-container {
@@ -95,7 +95,7 @@
95 }95 }
96 96
97 .chart-value {97 .chart-value {
98- color: var(--dynamic-muted, #737373);98+ color: var(--muted-foreground, #737373);
99 }99 }
100 100
101 .chart-container {101 .chart-container {
M webui/src/pages/homepage/analytics/HourlyActivityChart.svelte +1 -1
@@ -100,7 +100,7 @@
100100 }
101101
102102 .chart-value {
103- color: var(--dynamic-muted, #737373);
103+ color: var(--muted-foreground, #737373);
104104 }
105105
106106 .chart-container {
@@ -100,7 +100,7 @@
100 }100 }
101 101
102 .chart-value {102 .chart-value {
103- color: var(--dynamic-muted, #737373);103+ color: var(--muted-foreground, #737373);
104 }104 }
105 105
106 .chart-container {106 .chart-container {
M webui/src/pages/homepage/favorites/FavoriteCard.svelte +33 -21
@@ -113,20 +113,22 @@
113113 align-items: center;
114114 gap: 0.75rem;
115115 padding: 0.65rem 0.85rem;
116- border: 1px solid var(--dynamic-border);
117- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
116+ border-width: 1px;
117+ border-style: solid;
118+ border-color: var(--border);
119+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
118120 transition: all 100ms ease;
119121 cursor: pointer;
120122 }
121123
122124 .favorite-card:hover,
123125 .favorite-card.focused {
124- background: color-mix(in srgb, var(--dynamic-surface) 40%, var(--dynamic-bg) 60%);
125- border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
126+ background: color-mix(in srgb, var(--card) 40%, var(--background) 60%);
127+ border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 50%);
126128 }
127129
128130 .favorite-card.focused {
129- outline: 1px solid var(--dynamic-accent, #4ade80);
131+ outline: 1px solid var(--primary, #4ade80);
130132 outline-offset: -1px;
131133 }
132134
@@ -134,8 +136,10 @@
134136 position: relative;
135137 width: 32px;
136138 height: 32px;
137- border: 1px solid var(--dynamic-border);
138- background: var(--dynamic-bg);
139+ border-width: 1px;
140+ border-style: solid;
141+ border-color: var(--border);
142+ background: var(--background);
139143 display: flex;
140144 align-items: center;
141145 justify-content: center;
@@ -154,7 +158,7 @@
154158 display: flex;
155159 align-items: center;
156160 justify-content: center;
157- color: var(--dynamic-muted);
161+ color: var(--muted-foreground);
158162 }
159163
160164 .favicon-fallback::before {
@@ -173,9 +177,11 @@
173177 justify-content: center;
174178 font-size: 0.55rem;
175179 font-weight: 700;
176- color: var(--dynamic-bg);
177- background: var(--dynamic-accent, #4ade80);
178- border: 1px solid var(--dynamic-bg);
180+ color: var(--background);
181+ background: var(--primary, #4ade80);
182+ border-width: 1px;
183+ border-style: solid;
184+ border-color: var(--background);
179185 }
180186
181187 .card-content {
@@ -188,7 +194,7 @@
188194 .card-title {
189195 font-size: 0.8rem;
190196 font-weight: 500;
191- color: var(--dynamic-text);
197+ color: var(--foreground);
192198 white-space: nowrap;
193199 overflow: hidden;
194200 text-overflow: ellipsis;
@@ -196,7 +202,7 @@
196202
197203 .card-domain {
198204 font-size: 0.65rem;
199- color: var(--dynamic-muted);
205+ color: var(--muted-foreground);
200206 letter-spacing: 0.06em;
201207 white-space: nowrap;
202208 overflow: hidden;
@@ -214,16 +220,20 @@
214220 font-weight: 500;
215221 padding: 0.15rem 0.4rem;
216222 background: color-mix(in srgb, var(--tag-color) 20%, transparent);
217- border: 1px solid var(--tag-color);
223+ border-width: 1px;
224+ border-style: solid;
225+ border-color: var(--tag-color);
218226 color: var(--tag-color);
219227 letter-spacing: 0.05em;
220228 }
221229
222230 .tag-more {
223231 font-size: 0.55rem;
224- color: var(--dynamic-muted);
232+ color: var(--muted-foreground);
225233 padding: 0.15rem 0.3rem;
226- border: 1px solid var(--dynamic-border);
234+ border-width: 1px;
235+ border-style: solid;
236+ border-color: var(--border);
227237 }
228238
229239 .card-actions {
@@ -245,16 +255,18 @@
245255 align-items: center;
246256 justify-content: center;
247257 font-size: 0.8rem;
248- border: 1px solid var(--dynamic-border);
258+ border-width: 1px;
259+ border-style: solid;
260+ border-color: var(--border);
249261 background: transparent;
250- color: var(--dynamic-muted);
262+ color: var(--muted-foreground);
251263 cursor: pointer;
252264 transition: all 100ms ease;
253265 }
254266
255267 .action-btn:hover {
256- color: var(--dynamic-text);
257- border-color: var(--dynamic-text);
258- background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);
268+ color: var(--foreground);
269+ border-color: var(--foreground);
270+ background: color-mix(in srgb, var(--card) 50%, transparent);
259271 }
260272 </style>
@@ -113,20 +113,22 @@
113 align-items: center;113 align-items: center;
114 gap: 0.75rem;114 gap: 0.75rem;
115 padding: 0.65rem 0.85rem;115 padding: 0.65rem 0.85rem;
116- border: 1px solid var(--dynamic-border);116+ border-width: 1px;
117- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);117+ border-style: solid;
118+ border-color: var(--border);
119+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
118 transition: all 100ms ease;120 transition: all 100ms ease;
119 cursor: pointer;121 cursor: pointer;
120 }122 }
121 123
122 .favorite-card:hover,124 .favorite-card:hover,
123 .favorite-card.focused {125 .favorite-card.focused {
124- background: color-mix(in srgb, var(--dynamic-surface) 40%, var(--dynamic-bg) 60%);126+ background: color-mix(in srgb, var(--card) 40%, var(--background) 60%);
125- border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);127+ border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 50%);
126 }128 }
127 129
128 .favorite-card.focused {130 .favorite-card.focused {
129- outline: 1px solid var(--dynamic-accent, #4ade80);131+ outline: 1px solid var(--primary, #4ade80);
130 outline-offset: -1px;132 outline-offset: -1px;
131 }133 }
132 134
@@ -134,8 +136,10 @@
134 position: relative;136 position: relative;
135 width: 32px;137 width: 32px;
136 height: 32px;138 height: 32px;
137- border: 1px solid var(--dynamic-border);139+ border-width: 1px;
138- background: var(--dynamic-bg);140+ border-style: solid;
141+ border-color: var(--border);
142+ background: var(--background);
139 display: flex;143 display: flex;
140 align-items: center;144 align-items: center;
141 justify-content: center;145 justify-content: center;
@@ -154,7 +158,7 @@
154 display: flex;158 display: flex;
155 align-items: center;159 align-items: center;
156 justify-content: center;160 justify-content: center;
157- color: var(--dynamic-muted);161+ color: var(--muted-foreground);
158 }162 }
159 163
160 .favicon-fallback::before {164 .favicon-fallback::before {
@@ -173,9 +177,11 @@
173 justify-content: center;177 justify-content: center;
174 font-size: 0.55rem;178 font-size: 0.55rem;
175 font-weight: 700;179 font-weight: 700;
176- color: var(--dynamic-bg);180+ color: var(--background);
177- background: var(--dynamic-accent, #4ade80);181+ background: var(--primary, #4ade80);
178- border: 1px solid var(--dynamic-bg);182+ border-width: 1px;
183+ border-style: solid;
184+ border-color: var(--background);
179 }185 }
180 186
181 .card-content {187 .card-content {
@@ -188,7 +194,7 @@
188 .card-title {194 .card-title {
189 font-size: 0.8rem;195 font-size: 0.8rem;
190 font-weight: 500;196 font-weight: 500;
191- color: var(--dynamic-text);197+ color: var(--foreground);
192 white-space: nowrap;198 white-space: nowrap;
193 overflow: hidden;199 overflow: hidden;
194 text-overflow: ellipsis;200 text-overflow: ellipsis;
@@ -196,7 +202,7 @@
196 202
197 .card-domain {203 .card-domain {
198 font-size: 0.65rem;204 font-size: 0.65rem;
199- color: var(--dynamic-muted);205+ color: var(--muted-foreground);
200 letter-spacing: 0.06em;206 letter-spacing: 0.06em;
201 white-space: nowrap;207 white-space: nowrap;
202 overflow: hidden;208 overflow: hidden;
@@ -214,16 +220,20 @@
214 font-weight: 500;220 font-weight: 500;
215 padding: 0.15rem 0.4rem;221 padding: 0.15rem 0.4rem;
216 background: color-mix(in srgb, var(--tag-color) 20%, transparent);222 background: color-mix(in srgb, var(--tag-color) 20%, transparent);
217- border: 1px solid var(--tag-color);223+ border-width: 1px;
224+ border-style: solid;
225+ border-color: var(--tag-color);
218 color: var(--tag-color);226 color: var(--tag-color);
219 letter-spacing: 0.05em;227 letter-spacing: 0.05em;
220 }228 }
221 229
222 .tag-more {230 .tag-more {
223 font-size: 0.55rem;231 font-size: 0.55rem;
224- color: var(--dynamic-muted);232+ color: var(--muted-foreground);
225 padding: 0.15rem 0.3rem;233 padding: 0.15rem 0.3rem;
226- border: 1px solid var(--dynamic-border);234+ border-width: 1px;
235+ border-style: solid;
236+ border-color: var(--border);
227 }237 }
228 238
229 .card-actions {239 .card-actions {
@@ -245,16 +255,18 @@
245 align-items: center;255 align-items: center;
246 justify-content: center;256 justify-content: center;
247 font-size: 0.8rem;257 font-size: 0.8rem;
248- border: 1px solid var(--dynamic-border);258+ border-width: 1px;
259+ border-style: solid;
260+ border-color: var(--border);
249 background: transparent;261 background: transparent;
250- color: var(--dynamic-muted);262+ color: var(--muted-foreground);
251 cursor: pointer;263 cursor: pointer;
252 transition: all 100ms ease;264 transition: all 100ms ease;
253 }265 }
254 266
255 .action-btn:hover {267 .action-btn:hover {
256- color: var(--dynamic-text);268+ color: var(--foreground);
257- border-color: var(--dynamic-text);269+ border-color: var(--foreground);
258- background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);270+ background: color-mix(in srgb, var(--card) 50%, transparent);
259 }271 }
260 </style>272 </style>
M webui/src/pages/homepage/favorites/FavoriteEditor.svelte +48 -36
@@ -220,8 +220,10 @@
220220 width: 100%;
221221 max-width: 480px;
222222 margin: 1rem;
223- background: var(--dynamic-surface);
224- border: 1px solid var(--dynamic-border);
223+ background: var(--card);
224+ border-width: 1px;
225+ border-style: solid;
226+ border-color: var(--border);
225227 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
226228 animation: modal-in 150ms ease;
227229 }
@@ -238,14 +240,14 @@
238240 align-items: center;
239241 gap: 0.6rem;
240242 padding: 0.75rem 1rem;
241- border-bottom: 1px solid var(--dynamic-border);
242- background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);
243+ border-bottom: 1px solid var(--border);
244+ background: color-mix(in srgb, var(--background) 80%, transparent);
243245 }
244246
245247 .modal-icon::before {
246248 content: '';
247249 font-size: 0.9rem;
248- color: var(--dynamic-accent, #4ade80);
250+ color: var(--primary, #4ade80);
249251 }
250252
251253 .modal-title {
@@ -253,27 +255,29 @@
253255 font-size: 0.72rem;
254256 font-weight: 600;
255257 letter-spacing: 0.1em;
256- color: var(--dynamic-text);
258+ color: var(--foreground);
257259 }
258260
259261 .close-btn {
260262 padding: 0.25rem 0.5rem;
261263 background: transparent;
262- border: 1px solid var(--dynamic-border);
264+ border-width: 1px;
265+ border-style: solid;
266+ border-color: var(--border);
263267 cursor: pointer;
264268 }
265269
266270 .close-btn kbd {
267271 font-size: 0.6rem;
268- color: var(--dynamic-muted);
272+ color: var(--muted-foreground);
269273 }
270274
271275 .close-btn:hover {
272- border-color: var(--dynamic-text);
276+ border-color: var(--foreground);
273277 }
274278
275279 .close-btn:hover kbd {
276- color: var(--dynamic-text);
280+ color: var(--foreground);
277281 }
278282
279283 .modal-body {
@@ -293,15 +297,17 @@
293297 font-size: 0.6rem;
294298 font-weight: 600;
295299 letter-spacing: 0.12em;
296- color: var(--dynamic-muted);
300+ color: var(--muted-foreground);
297301 }
298302
299303 .url-display {
300304 font-size: 0.72rem;
301- color: var(--dynamic-text);
305+ color: var(--foreground);
302306 padding: 0.5rem 0.65rem;
303- border: 1px solid var(--dynamic-border);
304- background: var(--dynamic-bg);
307+ border-width: 1px;
308+ border-style: solid;
309+ border-color: var(--border);
310+ background: var(--background);
305311 white-space: nowrap;
306312 overflow: hidden;
307313 text-overflow: ellipsis;
@@ -312,25 +318,27 @@
312318 font-family: inherit;
313319 font-size: 0.75rem;
314320 padding: 0.5rem 0.65rem;
315- border: 1px solid var(--dynamic-border);
316- background: var(--dynamic-bg);
317- color: var(--dynamic-text);
321+ border-width: 1px;
322+ border-style: solid;
323+ border-color: var(--border);
324+ background: var(--background);
325+ color: var(--foreground);
318326 outline: none;
319327 transition: border-color 100ms ease;
320328 }
321329
322330 .form-input:focus,
323331 .form-select:focus {
324- border-color: var(--dynamic-accent, #4ade80);
332+ border-color: var(--primary, #4ade80);
325333 }
326334
327335 .form-input::placeholder {
328- color: var(--dynamic-muted);
336+ color: var(--muted-foreground);
329337 }
330338
331339 .form-hint {
332340 font-size: 0.6rem;
333- color: var(--dynamic-muted);
341+ color: var(--muted-foreground);
334342 letter-spacing: 0.05em;
335343 }
336344
@@ -342,7 +350,7 @@
342350
343351 .no-tags {
344352 font-size: 0.65rem;
345- color: var(--dynamic-muted);
353+ color: var(--muted-foreground);
346354 font-style: italic;
347355 }
348356
@@ -354,9 +362,11 @@
354362 font-size: 0.62rem;
355363 font-weight: 500;
356364 letter-spacing: 0.05em;
357- border: 1px solid var(--tag-color);
365+ border-width: 1px;
366+ border-style: solid;
367+ border-color: var(--tag-color);
358368 background: transparent;
359- color: var(--dynamic-text);
369+ color: var(--foreground);
360370 cursor: pointer;
361371 transition: all 100ms ease;
362372 }
@@ -388,8 +398,8 @@
388398 justify-content: space-between;
389399 gap: 0.5rem;
390400 padding: 0.75rem 1rem;
391- border-top: 1px solid var(--dynamic-border);
392- background: color-mix(in srgb, var(--dynamic-bg) 60%, transparent);
401+ border-top: 1px solid var(--border);
402+ background: color-mix(in srgb, var(--background) 60%, transparent);
393403 }
394404
395405 .footer-right {
@@ -405,7 +415,9 @@
405415 font-size: 0.68rem;
406416 font-weight: 500;
407417 letter-spacing: 0.08em;
408- border: 1px solid var(--dynamic-border);
418+ border-width: 1px;
419+ border-style: solid;
420+ border-color: var(--border);
409421 cursor: pointer;
410422 transition: all 100ms ease;
411423 }
@@ -419,18 +431,18 @@
419431
420432 .btn-secondary {
421433 background: transparent;
422- color: var(--dynamic-muted);
434+ color: var(--muted-foreground);
423435 }
424436
425437 .btn-secondary:hover {
426- color: var(--dynamic-text);
427- border-color: var(--dynamic-text);
438+ color: var(--foreground);
439+ border-color: var(--foreground);
428440 }
429441
430442 .btn-primary {
431- background: var(--dynamic-accent, #4ade80);
432- color: var(--dynamic-bg);
433- border-color: var(--dynamic-accent, #4ade80);
443+ background: var(--primary, #4ade80);
444+ color: var(--background);
445+ border-color: var(--primary, #4ade80);
434446 }
435447
436448 .btn-primary:hover {
@@ -439,7 +451,7 @@
439451
440452 .btn-danger-outline {
441453 background: transparent;
442- color: var(--dynamic-muted);
454+ color: var(--muted-foreground);
443455 }
444456
445457 .btn-danger-outline:hover {
@@ -459,12 +471,12 @@
459471
460472 .btn-cancel {
461473 background: transparent;
462- color: var(--dynamic-muted);
474+ color: var(--muted-foreground);
463475 }
464476
465477 .btn-cancel:hover {
466- color: var(--dynamic-text);
467- border-color: var(--dynamic-text);
478+ color: var(--foreground);
479+ border-color: var(--foreground);
468480 }
469481
470482 .confirm-delete {
@@ -220,8 +220,10 @@
220 width: 100%;220 width: 100%;
221 max-width: 480px;221 max-width: 480px;
222 margin: 1rem;222 margin: 1rem;
223- background: var(--dynamic-surface);223+ background: var(--card);
224- border: 1px solid var(--dynamic-border);224+ border-width: 1px;
225+ border-style: solid;
226+ border-color: var(--border);
225 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);227 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
226 animation: modal-in 150ms ease;228 animation: modal-in 150ms ease;
227 }229 }
@@ -238,14 +240,14 @@
238 align-items: center;240 align-items: center;
239 gap: 0.6rem;241 gap: 0.6rem;
240 padding: 0.75rem 1rem;242 padding: 0.75rem 1rem;
241- border-bottom: 1px solid var(--dynamic-border);243+ border-bottom: 1px solid var(--border);
242- background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);244+ background: color-mix(in srgb, var(--background) 80%, transparent);
243 }245 }
244 246
245 .modal-icon::before {247 .modal-icon::before {
246 content: '';248 content: '';
247 font-size: 0.9rem;249 font-size: 0.9rem;
248- color: var(--dynamic-accent, #4ade80);250+ color: var(--primary, #4ade80);
249 }251 }
250 252
251 .modal-title {253 .modal-title {
@@ -253,27 +255,29 @@
253 font-size: 0.72rem;255 font-size: 0.72rem;
254 font-weight: 600;256 font-weight: 600;
255 letter-spacing: 0.1em;257 letter-spacing: 0.1em;
256- color: var(--dynamic-text);258+ color: var(--foreground);
257 }259 }
258 260
259 .close-btn {261 .close-btn {
260 padding: 0.25rem 0.5rem;262 padding: 0.25rem 0.5rem;
261 background: transparent;263 background: transparent;
262- border: 1px solid var(--dynamic-border);264+ border-width: 1px;
265+ border-style: solid;
266+ border-color: var(--border);
263 cursor: pointer;267 cursor: pointer;
264 }268 }
265 269
266 .close-btn kbd {270 .close-btn kbd {
267 font-size: 0.6rem;271 font-size: 0.6rem;
268- color: var(--dynamic-muted);272+ color: var(--muted-foreground);
269 }273 }
270 274
271 .close-btn:hover {275 .close-btn:hover {
272- border-color: var(--dynamic-text);276+ border-color: var(--foreground);
273 }277 }
274 278
275 .close-btn:hover kbd {279 .close-btn:hover kbd {
276- color: var(--dynamic-text);280+ color: var(--foreground);
277 }281 }
278 282
279 .modal-body {283 .modal-body {
@@ -293,15 +297,17 @@
293 font-size: 0.6rem;297 font-size: 0.6rem;
294 font-weight: 600;298 font-weight: 600;
295 letter-spacing: 0.12em;299 letter-spacing: 0.12em;
296- color: var(--dynamic-muted);300+ color: var(--muted-foreground);
297 }301 }
298 302
299 .url-display {303 .url-display {
300 font-size: 0.72rem;304 font-size: 0.72rem;
301- color: var(--dynamic-text);305+ color: var(--foreground);
302 padding: 0.5rem 0.65rem;306 padding: 0.5rem 0.65rem;
303- border: 1px solid var(--dynamic-border);307+ border-width: 1px;
304- background: var(--dynamic-bg);308+ border-style: solid;
309+ border-color: var(--border);
310+ background: var(--background);
305 white-space: nowrap;311 white-space: nowrap;
306 overflow: hidden;312 overflow: hidden;
307 text-overflow: ellipsis;313 text-overflow: ellipsis;
@@ -312,25 +318,27 @@
312 font-family: inherit;318 font-family: inherit;
313 font-size: 0.75rem;319 font-size: 0.75rem;
314 padding: 0.5rem 0.65rem;320 padding: 0.5rem 0.65rem;
315- border: 1px solid var(--dynamic-border);321+ border-width: 1px;
316- background: var(--dynamic-bg);322+ border-style: solid;
317- color: var(--dynamic-text);323+ border-color: var(--border);
324+ background: var(--background);
325+ color: var(--foreground);
318 outline: none;326 outline: none;
319 transition: border-color 100ms ease;327 transition: border-color 100ms ease;
320 }328 }
321 329
322 .form-input:focus,330 .form-input:focus,
323 .form-select:focus {331 .form-select:focus {
324- border-color: var(--dynamic-accent, #4ade80);332+ border-color: var(--primary, #4ade80);
325 }333 }
326 334
327 .form-input::placeholder {335 .form-input::placeholder {
328- color: var(--dynamic-muted);336+ color: var(--muted-foreground);
329 }337 }
330 338
331 .form-hint {339 .form-hint {
332 font-size: 0.6rem;340 font-size: 0.6rem;
333- color: var(--dynamic-muted);341+ color: var(--muted-foreground);
334 letter-spacing: 0.05em;342 letter-spacing: 0.05em;
335 }343 }
336 344
@@ -342,7 +350,7 @@
342 350
343 .no-tags {351 .no-tags {
344 font-size: 0.65rem;352 font-size: 0.65rem;
345- color: var(--dynamic-muted);353+ color: var(--muted-foreground);
346 font-style: italic;354 font-style: italic;
347 }355 }
348 356
@@ -354,9 +362,11 @@
354 font-size: 0.62rem;362 font-size: 0.62rem;
355 font-weight: 500;363 font-weight: 500;
356 letter-spacing: 0.05em;364 letter-spacing: 0.05em;
357- border: 1px solid var(--tag-color);365+ border-width: 1px;
366+ border-style: solid;
367+ border-color: var(--tag-color);
358 background: transparent;368 background: transparent;
359- color: var(--dynamic-text);369+ color: var(--foreground);
360 cursor: pointer;370 cursor: pointer;
361 transition: all 100ms ease;371 transition: all 100ms ease;
362 }372 }
@@ -388,8 +398,8 @@
388 justify-content: space-between;398 justify-content: space-between;
389 gap: 0.5rem;399 gap: 0.5rem;
390 padding: 0.75rem 1rem;400 padding: 0.75rem 1rem;
391- border-top: 1px solid var(--dynamic-border);401+ border-top: 1px solid var(--border);
392- background: color-mix(in srgb, var(--dynamic-bg) 60%, transparent);402+ background: color-mix(in srgb, var(--background) 60%, transparent);
393 }403 }
394 404
395 .footer-right {405 .footer-right {
@@ -405,7 +415,9 @@
405 font-size: 0.68rem;415 font-size: 0.68rem;
406 font-weight: 500;416 font-weight: 500;
407 letter-spacing: 0.08em;417 letter-spacing: 0.08em;
408- border: 1px solid var(--dynamic-border);418+ border-width: 1px;
419+ border-style: solid;
420+ border-color: var(--border);
409 cursor: pointer;421 cursor: pointer;
410 transition: all 100ms ease;422 transition: all 100ms ease;
411 }423 }
@@ -419,18 +431,18 @@
419 431
420 .btn-secondary {432 .btn-secondary {
421 background: transparent;433 background: transparent;
422- color: var(--dynamic-muted);434+ color: var(--muted-foreground);
423 }435 }
424 436
425 .btn-secondary:hover {437 .btn-secondary:hover {
426- color: var(--dynamic-text);438+ color: var(--foreground);
427- border-color: var(--dynamic-text);439+ border-color: var(--foreground);
428 }440 }
429 441
430 .btn-primary {442 .btn-primary {
431- background: var(--dynamic-accent, #4ade80);443+ background: var(--primary, #4ade80);
432- color: var(--dynamic-bg);444+ color: var(--background);
433- border-color: var(--dynamic-accent, #4ade80);445+ border-color: var(--primary, #4ade80);
434 }446 }
435 447
436 .btn-primary:hover {448 .btn-primary:hover {
@@ -439,7 +451,7 @@
439 451
440 .btn-danger-outline {452 .btn-danger-outline {
441 background: transparent;453 background: transparent;
442- color: var(--dynamic-muted);454+ color: var(--muted-foreground);
443 }455 }
444 456
445 .btn-danger-outline:hover {457 .btn-danger-outline:hover {
@@ -459,12 +471,12 @@
459 471
460 .btn-cancel {472 .btn-cancel {
461 background: transparent;473 background: transparent;
462- color: var(--dynamic-muted);474+ color: var(--muted-foreground);
463 }475 }
464 476
465 .btn-cancel:hover {477 .btn-cancel:hover {
466- color: var(--dynamic-text);478+ color: var(--foreground);
467- border-color: var(--dynamic-text);479+ border-color: var(--foreground);
468 }480 }
469 481
470 .confirm-delete {482 .confirm-delete {
M webui/src/pages/homepage/favorites/FavoriteGrid.svelte +3 -3
@@ -83,10 +83,10 @@
8383 justify-content: center;
8484 gap: 0.5rem;
8585 padding: 2rem;
86- color: var(--dynamic-muted);
86+ color: var(--muted-foreground);
8787 text-align: center;
88- border: 1px dashed var(--dynamic-border);
89- background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);
88+ border: 1px dashed var(--border);
89+ background: color-mix(in srgb, var(--background) 95%, var(--card) 5%);
9090 }
9191
9292 .empty-icon {
@@ -83,10 +83,10 @@
83 justify-content: center;83 justify-content: center;
84 gap: 0.5rem;84 gap: 0.5rem;
85 padding: 2rem;85 padding: 2rem;
86- color: var(--dynamic-muted);86+ color: var(--muted-foreground);
87 text-align: center;87 text-align: center;
88- border: 1px dashed var(--dynamic-border);88+ border: 1px dashed var(--border);
89- background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);89+ background: color-mix(in srgb, var(--background) 95%, var(--card) 5%);
90 }90 }
91 91
92 .empty-icon {92 .empty-icon {
M webui/src/pages/homepage/favorites/FolderList.svelte +35 -27
@@ -155,8 +155,10 @@
155155 .folder-list {
156156 display: flex;
157157 flex-direction: column;
158- border: 1px solid var(--dynamic-border);
159- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
158+ border-width: 1px;
159+ border-style: solid;
160+ border-color: var(--border);
161+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
160162 }
161163
162164 .folder-header {
@@ -164,14 +166,14 @@
164166 align-items: center;
165167 justify-content: space-between;
166168 padding: 0.5rem 0.75rem;
167- border-bottom: 1px solid var(--dynamic-border);
168- background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
169+ border-bottom: 1px solid var(--border);
170+ background: color-mix(in srgb, var(--background) 80%, var(--card) 20%);
169171 }
170172
171173 .header-label {
172174 font-size: 0.6rem;
173175 font-weight: 600;
174- color: var(--dynamic-muted);
176+ color: var(--muted-foreground);
175177 letter-spacing: 0.12em;
176178 }
177179
@@ -183,20 +185,22 @@
183185 justify-content: center;
184186 font-size: 0.9rem;
185187 font-weight: 500;
186- border: 1px solid var(--dynamic-border);
188+ border-width: 1px;
189+ border-style: solid;
190+ border-color: var(--border);
187191 background: transparent;
188- color: var(--dynamic-muted);
192+ color: var(--muted-foreground);
189193 cursor: pointer;
190194 transition: all 100ms ease;
191195 }
192196
193197 .add-folder-btn:hover {
194- color: var(--dynamic-text);
195- border-color: var(--dynamic-text);
198+ color: var(--foreground);
199+ border-color: var(--foreground);
196200 }
197201
198202 .add-folder-btn.cancel {
199- color: var(--dynamic-muted);
203+ color: var(--muted-foreground);
200204 }
201205
202206 .add-folder-btn.cancel:hover {
@@ -206,8 +210,8 @@
206210
207211 .create-input-row {
208212 padding: 0.4rem 0.5rem;
209- border-bottom: 1px solid var(--dynamic-border);
210- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 8%, var(--dynamic-bg) 92%);
213+ border-bottom: 1px solid var(--border);
214+ background: color-mix(in srgb, var(--primary, #4ade80) 8%, var(--background) 92%);
211215 }
212216
213217 .create-input {
@@ -215,14 +219,16 @@
215219 padding: 0.35rem 0.5rem;
216220 font-size: 0.7rem;
217221 font-family: inherit;
218- color: var(--dynamic-text);
219- background: var(--dynamic-bg);
220- border: 1px solid var(--dynamic-accent, #4ade80);
222+ color: var(--foreground);
223+ background: var(--background);
224+ border-width: 1px;
225+ border-style: solid;
226+ border-color: var(--primary, #4ade80);
221227 outline: none;
222228 }
223229
224230 .create-input::placeholder {
225- color: var(--dynamic-muted);
231+ color: var(--muted-foreground);
226232 }
227233
228234 .folder-items {
@@ -238,7 +244,7 @@
238244 text-align: left;
239245 background: transparent;
240246 border: none;
241- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 40%, transparent);
247+ border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
242248 cursor: pointer;
243249 transition: background-color 100ms ease;
244250 }
@@ -248,11 +254,11 @@
248254 }
249255
250256 .folder-item:hover {
251- background: color-mix(in srgb, var(--dynamic-surface) 30%, transparent);
257+ background: color-mix(in srgb, var(--card) 30%, transparent);
252258 }
253259
254260 .folder-item.active {
255- background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);
261+ background: color-mix(in srgb, var(--card) 50%, transparent);
256262 }
257263
258264 .folder-item.active::before {
@@ -262,7 +268,7 @@
262268 top: 0;
263269 bottom: 0;
264270 width: 2px;
265- background: var(--dynamic-accent, #4ade80);
271+ background: var(--primary, #4ade80);
266272 }
267273
268274 .folder-item {
@@ -273,17 +279,17 @@
273279 font-size: 0.8rem;
274280 width: 1.2rem;
275281 text-align: center;
276- color: var(--dynamic-muted);
282+ color: var(--muted-foreground);
277283 }
278284
279285 .folder-item.active .folder-icon {
280- color: var(--dynamic-text);
286+ color: var(--foreground);
281287 }
282288
283289 .folder-name {
284290 flex: 1;
285291 font-size: 0.72rem;
286- color: var(--dynamic-text);
292+ color: var(--foreground);
287293 white-space: nowrap;
288294 overflow: hidden;
289295 text-overflow: ellipsis;
@@ -291,14 +297,16 @@
291297
292298 .folder-item.unfiled .folder-name {
293299 font-style: italic;
294- color: var(--dynamic-muted);
300+ color: var(--muted-foreground);
295301 }
296302
297303 .folder-count {
298304 font-size: 0.6rem;
299305 padding: 0.1rem 0.35rem;
300- border: 1px solid var(--dynamic-border);
301- background: var(--dynamic-bg);
302- color: var(--dynamic-muted);
306+ border-width: 1px;
307+ border-style: solid;
308+ border-color: var(--border);
309+ background: var(--background);
310+ color: var(--muted-foreground);
303311 }
304312 </style>
@@ -155,8 +155,10 @@
155 .folder-list {155 .folder-list {
156 display: flex;156 display: flex;
157 flex-direction: column;157 flex-direction: column;
158- border: 1px solid var(--dynamic-border);158+ border-width: 1px;
159- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);159+ border-style: solid;
160+ border-color: var(--border);
161+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
160 }162 }
161 163
162 .folder-header {164 .folder-header {
@@ -164,14 +166,14 @@
164 align-items: center;166 align-items: center;
165 justify-content: space-between;167 justify-content: space-between;
166 padding: 0.5rem 0.75rem;168 padding: 0.5rem 0.75rem;
167- border-bottom: 1px solid var(--dynamic-border);169+ border-bottom: 1px solid var(--border);
168- background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);170+ background: color-mix(in srgb, var(--background) 80%, var(--card) 20%);
169 }171 }
170 172
171 .header-label {173 .header-label {
172 font-size: 0.6rem;174 font-size: 0.6rem;
173 font-weight: 600;175 font-weight: 600;
174- color: var(--dynamic-muted);176+ color: var(--muted-foreground);
175 letter-spacing: 0.12em;177 letter-spacing: 0.12em;
176 }178 }
177 179
@@ -183,20 +185,22 @@
183 justify-content: center;185 justify-content: center;
184 font-size: 0.9rem;186 font-size: 0.9rem;
185 font-weight: 500;187 font-weight: 500;
186- border: 1px solid var(--dynamic-border);188+ border-width: 1px;
189+ border-style: solid;
190+ border-color: var(--border);
187 background: transparent;191 background: transparent;
188- color: var(--dynamic-muted);192+ color: var(--muted-foreground);
189 cursor: pointer;193 cursor: pointer;
190 transition: all 100ms ease;194 transition: all 100ms ease;
191 }195 }
192 196
193 .add-folder-btn:hover {197 .add-folder-btn:hover {
194- color: var(--dynamic-text);198+ color: var(--foreground);
195- border-color: var(--dynamic-text);199+ border-color: var(--foreground);
196 }200 }
197 201
198 .add-folder-btn.cancel {202 .add-folder-btn.cancel {
199- color: var(--dynamic-muted);203+ color: var(--muted-foreground);
200 }204 }
201 205
202 .add-folder-btn.cancel:hover {206 .add-folder-btn.cancel:hover {
@@ -206,8 +210,8 @@
206 210
207 .create-input-row {211 .create-input-row {
208 padding: 0.4rem 0.5rem;212 padding: 0.4rem 0.5rem;
209- border-bottom: 1px solid var(--dynamic-border);213+ border-bottom: 1px solid var(--border);
210- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 8%, var(--dynamic-bg) 92%);214+ background: color-mix(in srgb, var(--primary, #4ade80) 8%, var(--background) 92%);
211 }215 }
212 216
213 .create-input {217 .create-input {
@@ -215,14 +219,16 @@
215 padding: 0.35rem 0.5rem;219 padding: 0.35rem 0.5rem;
216 font-size: 0.7rem;220 font-size: 0.7rem;
217 font-family: inherit;221 font-family: inherit;
218- color: var(--dynamic-text);222+ color: var(--foreground);
219- background: var(--dynamic-bg);223+ background: var(--background);
220- border: 1px solid var(--dynamic-accent, #4ade80);224+ border-width: 1px;
225+ border-style: solid;
226+ border-color: var(--primary, #4ade80);
221 outline: none;227 outline: none;
222 }228 }
223 229
224 .create-input::placeholder {230 .create-input::placeholder {
225- color: var(--dynamic-muted);231+ color: var(--muted-foreground);
226 }232 }
227 233
228 .folder-items {234 .folder-items {
@@ -238,7 +244,7 @@
238 text-align: left;244 text-align: left;
239 background: transparent;245 background: transparent;
240 border: none;246 border: none;
241- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 40%, transparent);247+ border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
242 cursor: pointer;248 cursor: pointer;
243 transition: background-color 100ms ease;249 transition: background-color 100ms ease;
244 }250 }
@@ -248,11 +254,11 @@
248 }254 }
249 255
250 .folder-item:hover {256 .folder-item:hover {
251- background: color-mix(in srgb, var(--dynamic-surface) 30%, transparent);257+ background: color-mix(in srgb, var(--card) 30%, transparent);
252 }258 }
253 259
254 .folder-item.active {260 .folder-item.active {
255- background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);261+ background: color-mix(in srgb, var(--card) 50%, transparent);
256 }262 }
257 263
258 .folder-item.active::before {264 .folder-item.active::before {
@@ -262,7 +268,7 @@
262 top: 0;268 top: 0;
263 bottom: 0;269 bottom: 0;
264 width: 2px;270 width: 2px;
265- background: var(--dynamic-accent, #4ade80);271+ background: var(--primary, #4ade80);
266 }272 }
267 273
268 .folder-item {274 .folder-item {
@@ -273,17 +279,17 @@
273 font-size: 0.8rem;279 font-size: 0.8rem;
274 width: 1.2rem;280 width: 1.2rem;
275 text-align: center;281 text-align: center;
276- color: var(--dynamic-muted);282+ color: var(--muted-foreground);
277 }283 }
278 284
279 .folder-item.active .folder-icon {285 .folder-item.active .folder-icon {
280- color: var(--dynamic-text);286+ color: var(--foreground);
281 }287 }
282 288
283 .folder-name {289 .folder-name {
284 flex: 1;290 flex: 1;
285 font-size: 0.72rem;291 font-size: 0.72rem;
286- color: var(--dynamic-text);292+ color: var(--foreground);
287 white-space: nowrap;293 white-space: nowrap;
288 overflow: hidden;294 overflow: hidden;
289 text-overflow: ellipsis;295 text-overflow: ellipsis;
@@ -291,14 +297,16 @@
291 297
292 .folder-item.unfiled .folder-name {298 .folder-item.unfiled .folder-name {
293 font-style: italic;299 font-style: italic;
294- color: var(--dynamic-muted);300+ color: var(--muted-foreground);
295 }301 }
296 302
297 .folder-count {303 .folder-count {
298 font-size: 0.6rem;304 font-size: 0.6rem;
299 padding: 0.1rem 0.35rem;305 padding: 0.1rem 0.35rem;
300- border: 1px solid var(--dynamic-border);306+ border-width: 1px;
301- background: var(--dynamic-bg);307+ border-style: solid;
302- color: var(--dynamic-muted);308+ border-color: var(--border);
309+ background: var(--background);
310+ color: var(--muted-foreground);
303 }311 }
304 </style>312 </style>
M webui/src/pages/homepage/favorites/TagCloud.svelte +29 -19
@@ -144,8 +144,10 @@
144144 flex-direction: column;
145145 gap: 0.5rem;
146146 padding: 0.6rem 0.75rem;
147- border: 1px solid var(--dynamic-border);
148- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
147+ border-width: 1px;
148+ border-style: solid;
149+ border-color: var(--border);
150+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
149151 }
150152
151153 .tag-header {
@@ -157,7 +159,7 @@
157159 .header-label {
158160 font-size: 0.6rem;
159161 font-weight: 600;
160- color: var(--dynamic-muted);
162+ color: var(--muted-foreground);
161163 letter-spacing: 0.12em;
162164 }
163165
@@ -171,16 +173,18 @@
171173 font-size: 0.55rem;
172174 font-weight: 500;
173175 letter-spacing: 0.08em;
174- border: 1px solid var(--dynamic-border);
176+ border-width: 1px;
177+ border-style: solid;
178+ border-color: var(--border);
175179 background: transparent;
176- color: var(--dynamic-muted);
180+ color: var(--muted-foreground);
177181 cursor: pointer;
178182 transition: all 100ms ease;
179183 }
180184
181185 .clear-btn:hover {
182- color: var(--dynamic-text);
183- border-color: var(--dynamic-text);
186+ color: var(--foreground);
187+ border-color: var(--foreground);
184188 }
185189
186190 .add-tag-btn {
@@ -191,20 +195,22 @@
191195 justify-content: center;
192196 font-size: 0.9rem;
193197 font-weight: 500;
194- border: 1px solid var(--dynamic-border);
198+ border-width: 1px;
199+ border-style: solid;
200+ border-color: var(--border);
195201 background: transparent;
196- color: var(--dynamic-muted);
202+ color: var(--muted-foreground);
197203 cursor: pointer;
198204 transition: all 100ms ease;
199205 }
200206
201207 .add-tag-btn:hover {
202- color: var(--dynamic-text);
203- border-color: var(--dynamic-text);
208+ color: var(--foreground);
209+ border-color: var(--foreground);
204210 }
205211
206212 .add-tag-btn.cancel {
207- color: var(--dynamic-muted);
213+ color: var(--muted-foreground);
208214 }
209215
210216 .add-tag-btn.cancel:hover {
@@ -221,14 +227,16 @@
221227 padding: 0.35rem 0.5rem;
222228 font-size: 0.68rem;
223229 font-family: inherit;
224- color: var(--dynamic-text);
225- background: var(--dynamic-bg);
226- border: 1px solid var(--dynamic-accent, #4ade80);
230+ color: var(--foreground);
231+ background: var(--background);
232+ border-width: 1px;
233+ border-style: solid;
234+ border-color: var(--primary, #4ade80);
227235 outline: none;
228236 }
229237
230238 .create-input::placeholder {
231- color: var(--dynamic-muted);
239+ color: var(--muted-foreground);
232240 }
233241
234242 .tag-chips {
@@ -239,7 +247,7 @@
239247
240248 .no-tags {
241249 font-size: 0.65rem;
242- color: var(--dynamic-muted);
250+ color: var(--muted-foreground);
243251 font-style: italic;
244252 padding: 0.25rem 0;
245253 }
@@ -252,9 +260,11 @@
252260 font-size: 0.62rem;
253261 font-weight: 500;
254262 letter-spacing: 0.05em;
255- border: 1px solid var(--tag-color);
263+ border-width: 1px;
264+ border-style: solid;
265+ border-color: var(--tag-color);
256266 background: transparent;
257- color: var(--dynamic-text);
267+ color: var(--foreground);
258268 cursor: pointer;
259269 transition: all 100ms ease;
260270 }
@@ -144,8 +144,10 @@
144 flex-direction: column;144 flex-direction: column;
145 gap: 0.5rem;145 gap: 0.5rem;
146 padding: 0.6rem 0.75rem;146 padding: 0.6rem 0.75rem;
147- border: 1px solid var(--dynamic-border);147+ border-width: 1px;
148- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);148+ border-style: solid;
149+ border-color: var(--border);
150+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
149 }151 }
150 152
151 .tag-header {153 .tag-header {
@@ -157,7 +159,7 @@
157 .header-label {159 .header-label {
158 font-size: 0.6rem;160 font-size: 0.6rem;
159 font-weight: 600;161 font-weight: 600;
160- color: var(--dynamic-muted);162+ color: var(--muted-foreground);
161 letter-spacing: 0.12em;163 letter-spacing: 0.12em;
162 }164 }
163 165
@@ -171,16 +173,18 @@
171 font-size: 0.55rem;173 font-size: 0.55rem;
172 font-weight: 500;174 font-weight: 500;
173 letter-spacing: 0.08em;175 letter-spacing: 0.08em;
174- border: 1px solid var(--dynamic-border);176+ border-width: 1px;
177+ border-style: solid;
178+ border-color: var(--border);
175 background: transparent;179 background: transparent;
176- color: var(--dynamic-muted);180+ color: var(--muted-foreground);
177 cursor: pointer;181 cursor: pointer;
178 transition: all 100ms ease;182 transition: all 100ms ease;
179 }183 }
180 184
181 .clear-btn:hover {185 .clear-btn:hover {
182- color: var(--dynamic-text);186+ color: var(--foreground);
183- border-color: var(--dynamic-text);187+ border-color: var(--foreground);
184 }188 }
185 189
186 .add-tag-btn {190 .add-tag-btn {
@@ -191,20 +195,22 @@
191 justify-content: center;195 justify-content: center;
192 font-size: 0.9rem;196 font-size: 0.9rem;
193 font-weight: 500;197 font-weight: 500;
194- border: 1px solid var(--dynamic-border);198+ border-width: 1px;
199+ border-style: solid;
200+ border-color: var(--border);
195 background: transparent;201 background: transparent;
196- color: var(--dynamic-muted);202+ color: var(--muted-foreground);
197 cursor: pointer;203 cursor: pointer;
198 transition: all 100ms ease;204 transition: all 100ms ease;
199 }205 }
200 206
201 .add-tag-btn:hover {207 .add-tag-btn:hover {
202- color: var(--dynamic-text);208+ color: var(--foreground);
203- border-color: var(--dynamic-text);209+ border-color: var(--foreground);
204 }210 }
205 211
206 .add-tag-btn.cancel {212 .add-tag-btn.cancel {
207- color: var(--dynamic-muted);213+ color: var(--muted-foreground);
208 }214 }
209 215
210 .add-tag-btn.cancel:hover {216 .add-tag-btn.cancel:hover {
@@ -221,14 +227,16 @@
221 padding: 0.35rem 0.5rem;227 padding: 0.35rem 0.5rem;
222 font-size: 0.68rem;228 font-size: 0.68rem;
223 font-family: inherit;229 font-family: inherit;
224- color: var(--dynamic-text);230+ color: var(--foreground);
225- background: var(--dynamic-bg);231+ background: var(--background);
226- border: 1px solid var(--dynamic-accent, #4ade80);232+ border-width: 1px;
233+ border-style: solid;
234+ border-color: var(--primary, #4ade80);
227 outline: none;235 outline: none;
228 }236 }
229 237
230 .create-input::placeholder {238 .create-input::placeholder {
231- color: var(--dynamic-muted);239+ color: var(--muted-foreground);
232 }240 }
233 241
234 .tag-chips {242 .tag-chips {
@@ -239,7 +247,7 @@
239 247
240 .no-tags {248 .no-tags {
241 font-size: 0.65rem;249 font-size: 0.65rem;
242- color: var(--dynamic-muted);250+ color: var(--muted-foreground);
243 font-style: italic;251 font-style: italic;
244 padding: 0.25rem 0;252 padding: 0.25rem 0;
245 }253 }
@@ -252,9 +260,11 @@
252 font-size: 0.62rem;260 font-size: 0.62rem;
253 font-weight: 500;261 font-weight: 500;
254 letter-spacing: 0.05em;262 letter-spacing: 0.05em;
255- border: 1px solid var(--tag-color);263+ border-width: 1px;
264+ border-style: solid;
265+ border-color: var(--tag-color);
256 background: transparent;266 background: transparent;
257- color: var(--dynamic-text);267+ color: var(--foreground);
258 cursor: pointer;268 cursor: pointer;
259 transition: all 100ms ease;269 transition: all 100ms ease;
260 }270 }
M webui/src/pages/homepage/history/HistoryCleanup.svelte +37 -27
@@ -164,8 +164,10 @@
164164 width: 100%;
165165 max-width: 420px;
166166 margin: 1rem;
167- background: var(--dynamic-surface);
168- border: 1px solid var(--dynamic-border);
167+ background: var(--card);
168+ border-width: 1px;
169+ border-style: solid;
170+ border-color: var(--border);
169171 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
170172 animation: modal-in 150ms ease;
171173 }
@@ -182,8 +184,8 @@
182184 align-items: center;
183185 gap: 0.6rem;
184186 padding: 0.75rem 1rem;
185- border-bottom: 1px solid var(--dynamic-border);
186- background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);
187+ border-bottom: 1px solid var(--border);
188+ background: color-mix(in srgb, var(--background) 80%, transparent);
187189 }
188190
189191 .modal-icon::before {
@@ -197,27 +199,29 @@
197199 font-size: 0.72rem;
198200 font-weight: 600;
199201 letter-spacing: 0.1em;
200- color: var(--dynamic-text);
202+ color: var(--foreground);
201203 }
202204
203205 .close-btn {
204206 padding: 0.25rem 0.5rem;
205207 background: transparent;
206- border: 1px solid var(--dynamic-border);
208+ border-width: 1px;
209+ border-style: solid;
210+ border-color: var(--border);
207211 cursor: pointer;
208212 }
209213
210214 .close-btn kbd {
211215 font-size: 0.6rem;
212- color: var(--dynamic-muted);
216+ color: var(--muted-foreground);
213217 }
214218
215219 .close-btn:hover {
216- border-color: var(--dynamic-text);
220+ border-color: var(--foreground);
217221 }
218222
219223 .close-btn:hover kbd {
220- color: var(--dynamic-text);
224+ color: var(--foreground);
221225 }
222226
223227 .cleanup-options {
@@ -234,7 +238,7 @@
234238 text-align: left;
235239 background: transparent;
236240 border: none;
237- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
241+ border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
238242 cursor: pointer;
239243 transition: background-color 100ms ease;
240244 }
@@ -245,11 +249,11 @@
245249
246250 .cleanup-option:hover,
247251 .cleanup-option.selected {
248- background: color-mix(in srgb, var(--dynamic-surface) 80%, var(--dynamic-bg) 20%);
252+ background: color-mix(in srgb, var(--card) 80%, var(--background) 20%);
249253 }
250254
251255 .cleanup-option.selected {
252- outline: 1px solid var(--dynamic-accent, #4ade80);
256+ outline: 1px solid var(--primary, #4ade80);
253257 outline-offset: -1px;
254258 }
255259
@@ -267,12 +271,12 @@
267271 font-size: 0.75rem;
268272 font-weight: 600;
269273 letter-spacing: 0.08em;
270- color: var(--dynamic-text);
274+ color: var(--foreground);
271275 }
272276
273277 .option-desc {
274278 font-size: 0.68rem;
275- color: var(--dynamic-muted);
279+ color: var(--muted-foreground);
276280 letter-spacing: 0.04em;
277281 }
278282
@@ -280,9 +284,11 @@
280284 padding: 0.2rem 0.45rem;
281285 font-size: 0.58rem;
282286 letter-spacing: 0.05em;
283- border: 1px solid var(--dynamic-border);
284- background: var(--dynamic-bg);
285- color: var(--dynamic-muted);
287+ border-width: 1px;
288+ border-style: solid;
289+ border-color: var(--border);
290+ background: var(--background);
291+ color: var(--muted-foreground);
286292 }
287293
288294 .confirm-panel {
@@ -304,7 +310,7 @@
304310 margin: 0;
305311 font-size: 0.8rem;
306312 line-height: 1.5;
307- color: var(--dynamic-text);
313+ color: var(--foreground);
308314 }
309315
310316 .confirm-message strong {
@@ -328,7 +334,9 @@
328334 font-size: 0.7rem;
329335 font-weight: 500;
330336 letter-spacing: 0.08em;
331- border: 1px solid var(--dynamic-border);
337+ border-width: 1px;
338+ border-style: solid;
339+ border-color: var(--border);
332340 cursor: pointer;
333341 transition: all 100ms ease;
334342 }
@@ -342,12 +350,12 @@
342350
343351 .confirm-btn.cancel {
344352 background: transparent;
345- color: var(--dynamic-muted);
353+ color: var(--muted-foreground);
346354 }
347355
348356 .confirm-btn.cancel:hover {
349- color: var(--dynamic-text);
350- border-color: var(--dynamic-text);
357+ color: var(--foreground);
358+ border-color: var(--foreground);
351359 }
352360
353361 .confirm-btn.destructive {
@@ -366,13 +374,13 @@
366374 justify-content: center;
367375 gap: 1rem;
368376 padding: 0.6rem 1rem;
369- border-top: 1px solid var(--dynamic-border);
370- background: color-mix(in srgb, var(--dynamic-bg) 60%, transparent);
377+ border-top: 1px solid var(--border);
378+ background: color-mix(in srgb, var(--background) 60%, transparent);
371379 }
372380
373381 .hint {
374382 font-size: 0.6rem;
375- color: var(--dynamic-muted);
383+ color: var(--muted-foreground);
376384 letter-spacing: 0.05em;
377385 }
378386
@@ -380,7 +388,9 @@
380388 font-size: 0.55rem;
381389 padding: 0.1rem 0.25rem;
382390 margin-right: 0.25rem;
383- border: 1px solid var(--dynamic-border);
384- background: var(--dynamic-bg);
391+ border-width: 1px;
392+ border-style: solid;
393+ border-color: var(--border);
394+ background: var(--background);
385395 }
386396 </style>
@@ -164,8 +164,10 @@
164 width: 100%;164 width: 100%;
165 max-width: 420px;165 max-width: 420px;
166 margin: 1rem;166 margin: 1rem;
167- background: var(--dynamic-surface);167+ background: var(--card);
168- border: 1px solid var(--dynamic-border);168+ border-width: 1px;
169+ border-style: solid;
170+ border-color: var(--border);
169 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);171 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
170 animation: modal-in 150ms ease;172 animation: modal-in 150ms ease;
171 }173 }
@@ -182,8 +184,8 @@
182 align-items: center;184 align-items: center;
183 gap: 0.6rem;185 gap: 0.6rem;
184 padding: 0.75rem 1rem;186 padding: 0.75rem 1rem;
185- border-bottom: 1px solid var(--dynamic-border);187+ border-bottom: 1px solid var(--border);
186- background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);188+ background: color-mix(in srgb, var(--background) 80%, transparent);
187 }189 }
188 190
189 .modal-icon::before {191 .modal-icon::before {
@@ -197,27 +199,29 @@
197 font-size: 0.72rem;199 font-size: 0.72rem;
198 font-weight: 600;200 font-weight: 600;
199 letter-spacing: 0.1em;201 letter-spacing: 0.1em;
200- color: var(--dynamic-text);202+ color: var(--foreground);
201 }203 }
202 204
203 .close-btn {205 .close-btn {
204 padding: 0.25rem 0.5rem;206 padding: 0.25rem 0.5rem;
205 background: transparent;207 background: transparent;
206- border: 1px solid var(--dynamic-border);208+ border-width: 1px;
209+ border-style: solid;
210+ border-color: var(--border);
207 cursor: pointer;211 cursor: pointer;
208 }212 }
209 213
210 .close-btn kbd {214 .close-btn kbd {
211 font-size: 0.6rem;215 font-size: 0.6rem;
212- color: var(--dynamic-muted);216+ color: var(--muted-foreground);
213 }217 }
214 218
215 .close-btn:hover {219 .close-btn:hover {
216- border-color: var(--dynamic-text);220+ border-color: var(--foreground);
217 }221 }
218 222
219 .close-btn:hover kbd {223 .close-btn:hover kbd {
220- color: var(--dynamic-text);224+ color: var(--foreground);
221 }225 }
222 226
223 .cleanup-options {227 .cleanup-options {
@@ -234,7 +238,7 @@
234 text-align: left;238 text-align: left;
235 background: transparent;239 background: transparent;
236 border: none;240 border: none;
237- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);241+ border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
238 cursor: pointer;242 cursor: pointer;
239 transition: background-color 100ms ease;243 transition: background-color 100ms ease;
240 }244 }
@@ -245,11 +249,11 @@
245 249
246 .cleanup-option:hover,250 .cleanup-option:hover,
247 .cleanup-option.selected {251 .cleanup-option.selected {
248- background: color-mix(in srgb, var(--dynamic-surface) 80%, var(--dynamic-bg) 20%);252+ background: color-mix(in srgb, var(--card) 80%, var(--background) 20%);
249 }253 }
250 254
251 .cleanup-option.selected {255 .cleanup-option.selected {
252- outline: 1px solid var(--dynamic-accent, #4ade80);256+ outline: 1px solid var(--primary, #4ade80);
253 outline-offset: -1px;257 outline-offset: -1px;
254 }258 }
255 259
@@ -267,12 +271,12 @@
267 font-size: 0.75rem;271 font-size: 0.75rem;
268 font-weight: 600;272 font-weight: 600;
269 letter-spacing: 0.08em;273 letter-spacing: 0.08em;
270- color: var(--dynamic-text);274+ color: var(--foreground);
271 }275 }
272 276
273 .option-desc {277 .option-desc {
274 font-size: 0.68rem;278 font-size: 0.68rem;
275- color: var(--dynamic-muted);279+ color: var(--muted-foreground);
276 letter-spacing: 0.04em;280 letter-spacing: 0.04em;
277 }281 }
278 282
@@ -280,9 +284,11 @@
280 padding: 0.2rem 0.45rem;284 padding: 0.2rem 0.45rem;
281 font-size: 0.58rem;285 font-size: 0.58rem;
282 letter-spacing: 0.05em;286 letter-spacing: 0.05em;
283- border: 1px solid var(--dynamic-border);287+ border-width: 1px;
284- background: var(--dynamic-bg);288+ border-style: solid;
285- color: var(--dynamic-muted);289+ border-color: var(--border);
290+ background: var(--background);
291+ color: var(--muted-foreground);
286 }292 }
287 293
288 .confirm-panel {294 .confirm-panel {
@@ -304,7 +310,7 @@
304 margin: 0;310 margin: 0;
305 font-size: 0.8rem;311 font-size: 0.8rem;
306 line-height: 1.5;312 line-height: 1.5;
307- color: var(--dynamic-text);313+ color: var(--foreground);
308 }314 }
309 315
310 .confirm-message strong {316 .confirm-message strong {
@@ -328,7 +334,9 @@
328 font-size: 0.7rem;334 font-size: 0.7rem;
329 font-weight: 500;335 font-weight: 500;
330 letter-spacing: 0.08em;336 letter-spacing: 0.08em;
331- border: 1px solid var(--dynamic-border);337+ border-width: 1px;
338+ border-style: solid;
339+ border-color: var(--border);
332 cursor: pointer;340 cursor: pointer;
333 transition: all 100ms ease;341 transition: all 100ms ease;
334 }342 }
@@ -342,12 +350,12 @@
342 350
343 .confirm-btn.cancel {351 .confirm-btn.cancel {
344 background: transparent;352 background: transparent;
345- color: var(--dynamic-muted);353+ color: var(--muted-foreground);
346 }354 }
347 355
348 .confirm-btn.cancel:hover {356 .confirm-btn.cancel:hover {
349- color: var(--dynamic-text);357+ color: var(--foreground);
350- border-color: var(--dynamic-text);358+ border-color: var(--foreground);
351 }359 }
352 360
353 .confirm-btn.destructive {361 .confirm-btn.destructive {
@@ -366,13 +374,13 @@
366 justify-content: center;374 justify-content: center;
367 gap: 1rem;375 gap: 1rem;
368 padding: 0.6rem 1rem;376 padding: 0.6rem 1rem;
369- border-top: 1px solid var(--dynamic-border);377+ border-top: 1px solid var(--border);
370- background: color-mix(in srgb, var(--dynamic-bg) 60%, transparent);378+ background: color-mix(in srgb, var(--background) 60%, transparent);
371 }379 }
372 380
373 .hint {381 .hint {
374 font-size: 0.6rem;382 font-size: 0.6rem;
375- color: var(--dynamic-muted);383+ color: var(--muted-foreground);
376 letter-spacing: 0.05em;384 letter-spacing: 0.05em;
377 }385 }
378 386
@@ -380,7 +388,9 @@
380 font-size: 0.55rem;388 font-size: 0.55rem;
381 padding: 0.1rem 0.25rem;389 padding: 0.1rem 0.25rem;
382 margin-right: 0.25rem;390 margin-right: 0.25rem;
383- border: 1px solid var(--dynamic-border);391+ border-width: 1px;
384- background: var(--dynamic-bg);392+ border-style: solid;
393+ border-color: var(--border);
394+ background: var(--background);
385 }395 }
386 </style>396 </style>
M webui/src/pages/homepage/history/HistoryFilters.svelte +14 -10
@@ -77,7 +77,7 @@
7777 .filter-label {
7878 font-size: 0.6rem;
7979 font-weight: 600;
80- color: var(--dynamic-muted);
80+ color: var(--muted-foreground);
8181 letter-spacing: 0.12em;
8282 flex-shrink: 0;
8383 }
@@ -98,9 +98,11 @@
9898 font-size: 0.6rem;
9999 font-weight: 500;
100100 letter-spacing: 0.08em;
101- color: var(--dynamic-muted);
101+ color: var(--muted-foreground);
102102 background: transparent;
103- border: 1px solid var(--dynamic-border);
103+ border-width: 1px;
104+ border-style: solid;
105+ border-color: var(--border);
104106 cursor: pointer;
105107 transition: all 100ms ease;
106108 white-space: nowrap;
@@ -108,14 +110,14 @@
108110 }
109111
110112 .filter-chip:hover {
111- color: var(--dynamic-text);
112- border-color: var(--dynamic-text);
113+ color: var(--foreground);
114+ border-color: var(--foreground);
113115 }
114116
115117 .filter-chip.active {
116- color: var(--dynamic-primary-foreground, var(--dynamic-bg));
117- background: var(--dynamic-accent);
118- border-color: var(--dynamic-accent);
118+ color: var(--primary-foreground, var(--background));
119+ background: var(--primary);
120+ border-color: var(--primary);
119121 }
120122
121123 .filter-actions {
@@ -132,9 +134,11 @@
132134 font-size: 0.6rem;
133135 font-weight: 500;
134136 letter-spacing: 0.08em;
135- color: var(--dynamic-muted);
137+ color: var(--muted-foreground);
136138 background: transparent;
137- border: 1px solid var(--dynamic-border);
139+ border-width: 1px;
140+ border-style: solid;
141+ border-color: var(--border);
138142 cursor: pointer;
139143 transition: all 100ms ease;
140144 }
@@ -77,7 +77,7 @@
77 .filter-label {77 .filter-label {
78 font-size: 0.6rem;78 font-size: 0.6rem;
79 font-weight: 600;79 font-weight: 600;
80- color: var(--dynamic-muted);80+ color: var(--muted-foreground);
81 letter-spacing: 0.12em;81 letter-spacing: 0.12em;
82 flex-shrink: 0;82 flex-shrink: 0;
83 }83 }
@@ -98,9 +98,11 @@
98 font-size: 0.6rem;98 font-size: 0.6rem;
99 font-weight: 500;99 font-weight: 500;
100 letter-spacing: 0.08em;100 letter-spacing: 0.08em;
101- color: var(--dynamic-muted);101+ color: var(--muted-foreground);
102 background: transparent;102 background: transparent;
103- border: 1px solid var(--dynamic-border);103+ border-width: 1px;
104+ border-style: solid;
105+ border-color: var(--border);
104 cursor: pointer;106 cursor: pointer;
105 transition: all 100ms ease;107 transition: all 100ms ease;
106 white-space: nowrap;108 white-space: nowrap;
@@ -108,14 +110,14 @@
108 }110 }
109 111
110 .filter-chip:hover {112 .filter-chip:hover {
111- color: var(--dynamic-text);113+ color: var(--foreground);
112- border-color: var(--dynamic-text);114+ border-color: var(--foreground);
113 }115 }
114 116
115 .filter-chip.active {117 .filter-chip.active {
116- color: var(--dynamic-primary-foreground, var(--dynamic-bg));118+ color: var(--primary-foreground, var(--background));
117- background: var(--dynamic-accent);119+ background: var(--primary);
118- border-color: var(--dynamic-accent);120+ border-color: var(--primary);
119 }121 }
120 122
121 .filter-actions {123 .filter-actions {
@@ -132,9 +134,11 @@
132 font-size: 0.6rem;134 font-size: 0.6rem;
133 font-weight: 500;135 font-weight: 500;
134 letter-spacing: 0.08em;136 letter-spacing: 0.08em;
135- color: var(--dynamic-muted);137+ color: var(--muted-foreground);
136 background: transparent;138 background: transparent;
137- border: 1px solid var(--dynamic-border);139+ border-width: 1px;
140+ border-style: solid;
141+ border-color: var(--border);
138 cursor: pointer;142 cursor: pointer;
139 transition: all 100ms ease;143 transition: all 100ms ease;
140 }144 }
M webui/src/pages/homepage/history/HistoryItem.svelte +25 -17
@@ -123,7 +123,9 @@
123123 align-items: center;
124124 gap: 0.75rem;
125125 padding: 0.55rem 0.85rem;
126- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
126+ border-bottom-width: 1px;
127+ border-bottom-style: solid;
128+ border-bottom-color: color-mix(in srgb, var(--border) 50%, transparent);
127129 transition: background-color 100ms ease;
128130 cursor: pointer;
129131 }
@@ -134,11 +136,11 @@
134136
135137 .history-item:hover,
136138 .history-item.focused {
137- background: color-mix(in srgb, var(--dynamic-surface) 40%, transparent);
139+ background: color-mix(in srgb, var(--card) 40%, transparent);
138140 }
139141
140142 .history-item.focused {
141- outline: 1px solid var(--dynamic-accent, #4ade80);
143+ outline: 1px solid var(--primary, #4ade80);
142144 outline-offset: -1px;
143145 }
144146
@@ -150,8 +152,10 @@
150152 .item-favicon {
151153 width: 28px;
152154 height: 28px;
153- border: 1px solid var(--dynamic-border);
154- background: var(--dynamic-bg);
155+ border-width: 1px;
156+ border-style: solid;
157+ border-color: var(--border);
158+ background: var(--background);
155159 display: flex;
156160 align-items: center;
157161 justify-content: center;
@@ -170,7 +174,7 @@
170174 display: flex;
171175 align-items: center;
172176 justify-content: center;
173- color: var(--dynamic-muted);
177+ color: var(--muted-foreground);
174178 }
175179
176180 .favicon-fallback::before {
@@ -195,7 +199,7 @@
195199 .item-title {
196200 font-size: 0.8rem;
197201 font-weight: 500;
198- color: var(--dynamic-text);
202+ color: var(--foreground);
199203 white-space: nowrap;
200204 overflow: hidden;
201205 text-overflow: ellipsis;
@@ -203,7 +207,7 @@
203207
204208 .item-time {
205209 font-size: 0.65rem;
206- color: var(--dynamic-muted);
210+ color: var(--muted-foreground);
207211 text-transform: uppercase;
208212 letter-spacing: 0.08em;
209213 white-space: nowrap;
@@ -212,7 +216,7 @@
212216
213217 .item-url {
214218 font-size: 0.68rem;
215- color: var(--dynamic-muted);
219+ color: var(--muted-foreground);
216220 white-space: nowrap;
217221 overflow: hidden;
218222 text-overflow: ellipsis;
@@ -226,10 +230,12 @@
226230
227231 .visit-count {
228232 font-size: 0.6rem;
229- color: var(--dynamic-muted);
233+ color: var(--muted-foreground);
230234 padding: 0.15rem 0.35rem;
231- border: 1px solid var(--dynamic-border);
232- background: var(--dynamic-bg);
235+ border-width: 1px;
236+ border-style: solid;
237+ border-color: var(--border);
238+ background: var(--background);
233239 }
234240
235241 .action-btn {
@@ -238,9 +244,11 @@
238244 display: flex;
239245 align-items: center;
240246 justify-content: center;
241- border: 1px solid var(--dynamic-border);
247+ border-width: 1px;
248+ border-style: solid;
249+ border-color: var(--border);
242250 background: transparent;
243- color: var(--dynamic-muted);
251+ color: var(--muted-foreground);
244252 cursor: pointer;
245253 transition: all 100ms ease;
246254 opacity: 0;
@@ -252,9 +260,9 @@
252260 }
253261
254262 .action-btn:hover {
255- color: var(--dynamic-text);
256- border-color: var(--dynamic-text);
257- background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);
263+ color: var(--foreground);
264+ border-color: var(--foreground);
265+ background: color-mix(in srgb, var(--card) 50%, transparent);
258266 }
259267
260268 .delete-btn:hover {
@@ -123,7 +123,9 @@
123 align-items: center;123 align-items: center;
124 gap: 0.75rem;124 gap: 0.75rem;
125 padding: 0.55rem 0.85rem;125 padding: 0.55rem 0.85rem;
126- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);126+ border-bottom-width: 1px;
127+ border-bottom-style: solid;
128+ border-bottom-color: color-mix(in srgb, var(--border) 50%, transparent);
127 transition: background-color 100ms ease;129 transition: background-color 100ms ease;
128 cursor: pointer;130 cursor: pointer;
129 }131 }
@@ -134,11 +136,11 @@
134 136
135 .history-item:hover,137 .history-item:hover,
136 .history-item.focused {138 .history-item.focused {
137- background: color-mix(in srgb, var(--dynamic-surface) 40%, transparent);139+ background: color-mix(in srgb, var(--card) 40%, transparent);
138 }140 }
139 141
140 .history-item.focused {142 .history-item.focused {
141- outline: 1px solid var(--dynamic-accent, #4ade80);143+ outline: 1px solid var(--primary, #4ade80);
142 outline-offset: -1px;144 outline-offset: -1px;
143 }145 }
144 146
@@ -150,8 +152,10 @@
150 .item-favicon {152 .item-favicon {
151 width: 28px;153 width: 28px;
152 height: 28px;154 height: 28px;
153- border: 1px solid var(--dynamic-border);155+ border-width: 1px;
154- background: var(--dynamic-bg);156+ border-style: solid;
157+ border-color: var(--border);
158+ background: var(--background);
155 display: flex;159 display: flex;
156 align-items: center;160 align-items: center;
157 justify-content: center;161 justify-content: center;
@@ -170,7 +174,7 @@
170 display: flex;174 display: flex;
171 align-items: center;175 align-items: center;
172 justify-content: center;176 justify-content: center;
173- color: var(--dynamic-muted);177+ color: var(--muted-foreground);
174 }178 }
175 179
176 .favicon-fallback::before {180 .favicon-fallback::before {
@@ -195,7 +199,7 @@
195 .item-title {199 .item-title {
196 font-size: 0.8rem;200 font-size: 0.8rem;
197 font-weight: 500;201 font-weight: 500;
198- color: var(--dynamic-text);202+ color: var(--foreground);
199 white-space: nowrap;203 white-space: nowrap;
200 overflow: hidden;204 overflow: hidden;
201 text-overflow: ellipsis;205 text-overflow: ellipsis;
@@ -203,7 +207,7 @@
203 207
204 .item-time {208 .item-time {
205 font-size: 0.65rem;209 font-size: 0.65rem;
206- color: var(--dynamic-muted);210+ color: var(--muted-foreground);
207 text-transform: uppercase;211 text-transform: uppercase;
208 letter-spacing: 0.08em;212 letter-spacing: 0.08em;
209 white-space: nowrap;213 white-space: nowrap;
@@ -212,7 +216,7 @@
212 216
213 .item-url {217 .item-url {
214 font-size: 0.68rem;218 font-size: 0.68rem;
215- color: var(--dynamic-muted);219+ color: var(--muted-foreground);
216 white-space: nowrap;220 white-space: nowrap;
217 overflow: hidden;221 overflow: hidden;
218 text-overflow: ellipsis;222 text-overflow: ellipsis;
@@ -226,10 +230,12 @@
226 230
227 .visit-count {231 .visit-count {
228 font-size: 0.6rem;232 font-size: 0.6rem;
229- color: var(--dynamic-muted);233+ color: var(--muted-foreground);
230 padding: 0.15rem 0.35rem;234 padding: 0.15rem 0.35rem;
231- border: 1px solid var(--dynamic-border);235+ border-width: 1px;
232- background: var(--dynamic-bg);236+ border-style: solid;
237+ border-color: var(--border);
238+ background: var(--background);
233 }239 }
234 240
235 .action-btn {241 .action-btn {
@@ -238,9 +244,11 @@
238 display: flex;244 display: flex;
239 align-items: center;245 align-items: center;
240 justify-content: center;246 justify-content: center;
241- border: 1px solid var(--dynamic-border);247+ border-width: 1px;
248+ border-style: solid;
249+ border-color: var(--border);
242 background: transparent;250 background: transparent;
243- color: var(--dynamic-muted);251+ color: var(--muted-foreground);
244 cursor: pointer;252 cursor: pointer;
245 transition: all 100ms ease;253 transition: all 100ms ease;
246 opacity: 0;254 opacity: 0;
@@ -252,9 +260,9 @@
252 }260 }
253 261
254 .action-btn:hover {262 .action-btn:hover {
255- color: var(--dynamic-text);263+ color: var(--foreground);
256- border-color: var(--dynamic-text);264+ border-color: var(--foreground);
257- background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);265+ background: color-mix(in srgb, var(--card) 50%, transparent);
258 }266 }
259 267
260 .delete-btn:hover {268 .delete-btn:hover {
M webui/src/pages/homepage/history/HistorySearch.svelte +23 -15
@@ -99,41 +99,45 @@
9999 align-items: center;
100100 gap: 0.6rem;
101101 padding: 0.5rem 0.75rem;
102- border: 1px solid var(--dynamic-border);
103- background: var(--dynamic-bg);
102+ border-width: 1px;
103+ border-style: solid;
104+ border-color: var(--border);
105+ background: var(--background);
104106 transition: border-color 150ms ease;
105107 }
106108
107109 .history-search:focus-within {
108- border-color: var(--dynamic-accent, #4ade80);
110+ border-color: var(--primary, #4ade80);
109111 }
110112
111113 .search-icon::before {
112114 content: '';
113115 font-size: 0.85rem;
114- color: var(--dynamic-muted);
116+ color: var(--muted-foreground);
115117 }
116118
117119 .search-input {
118120 flex: 1;
119121 border: none;
120122 background: transparent;
121- color: var(--dynamic-text);
123+ color: var(--foreground);
122124 font-family: inherit;
123125 font-size: 0.8rem;
124126 outline: none;
125127 }
126128
127129 .search-input::placeholder {
128- color: var(--dynamic-muted);
130+ color: var(--muted-foreground);
129131 letter-spacing: 0.05em;
130132 }
131133
132134 .search-spinner {
133135 width: 14px;
134136 height: 14px;
135- border: 2px solid var(--dynamic-border);
136- border-top-color: var(--dynamic-accent, #4ade80);
137+ border-width: 2px;
138+ border-style: solid;
139+ border-color: var(--border);
140+ border-top-color: var(--primary, #4ade80);
137141 border-radius: 50%;
138142 animation: spin 0.8s linear infinite;
139143 }
@@ -148,24 +152,28 @@
148152 display: flex;
149153 align-items: center;
150154 justify-content: center;
151- border: 1px solid var(--dynamic-border);
155+ border-width: 1px;
156+ border-style: solid;
157+ border-color: var(--border);
152158 background: transparent;
153- color: var(--dynamic-muted);
159+ color: var(--muted-foreground);
154160 font-size: 0.9rem;
155161 cursor: pointer;
156162 transition: all 100ms ease;
157163 }
158164
159165 .clear-btn:hover {
160- color: var(--dynamic-text);
161- border-color: var(--dynamic-text);
166+ color: var(--foreground);
167+ border-color: var(--foreground);
162168 }
163169
164170 .search-hint {
165171 font-size: 0.6rem;
166172 padding: 0.15rem 0.35rem;
167- border: 1px solid var(--dynamic-border);
168- background: color-mix(in srgb, var(--dynamic-surface) 30%, transparent);
169- color: var(--dynamic-muted);
173+ border-width: 1px;
174+ border-style: solid;
175+ border-color: var(--border);
176+ background: color-mix(in srgb, var(--card) 30%, transparent);
177+ color: var(--muted-foreground);
170178 }
171179 </style>
@@ -99,41 +99,45 @@
99 align-items: center;99 align-items: center;
100 gap: 0.6rem;100 gap: 0.6rem;
101 padding: 0.5rem 0.75rem;101 padding: 0.5rem 0.75rem;
102- border: 1px solid var(--dynamic-border);102+ border-width: 1px;
103- background: var(--dynamic-bg);103+ border-style: solid;
104+ border-color: var(--border);
105+ background: var(--background);
104 transition: border-color 150ms ease;106 transition: border-color 150ms ease;
105 }107 }
106 108
107 .history-search:focus-within {109 .history-search:focus-within {
108- border-color: var(--dynamic-accent, #4ade80);110+ border-color: var(--primary, #4ade80);
109 }111 }
110 112
111 .search-icon::before {113 .search-icon::before {
112 content: '';114 content: '';
113 font-size: 0.85rem;115 font-size: 0.85rem;
114- color: var(--dynamic-muted);116+ color: var(--muted-foreground);
115 }117 }
116 118
117 .search-input {119 .search-input {
118 flex: 1;120 flex: 1;
119 border: none;121 border: none;
120 background: transparent;122 background: transparent;
121- color: var(--dynamic-text);123+ color: var(--foreground);
122 font-family: inherit;124 font-family: inherit;
123 font-size: 0.8rem;125 font-size: 0.8rem;
124 outline: none;126 outline: none;
125 }127 }
126 128
127 .search-input::placeholder {129 .search-input::placeholder {
128- color: var(--dynamic-muted);130+ color: var(--muted-foreground);
129 letter-spacing: 0.05em;131 letter-spacing: 0.05em;
130 }132 }
131 133
132 .search-spinner {134 .search-spinner {
133 width: 14px;135 width: 14px;
134 height: 14px;136 height: 14px;
135- border: 2px solid var(--dynamic-border);137+ border-width: 2px;
136- border-top-color: var(--dynamic-accent, #4ade80);138+ border-style: solid;
139+ border-color: var(--border);
140+ border-top-color: var(--primary, #4ade80);
137 border-radius: 50%;141 border-radius: 50%;
138 animation: spin 0.8s linear infinite;142 animation: spin 0.8s linear infinite;
139 }143 }
@@ -148,24 +152,28 @@
148 display: flex;152 display: flex;
149 align-items: center;153 align-items: center;
150 justify-content: center;154 justify-content: center;
151- border: 1px solid var(--dynamic-border);155+ border-width: 1px;
156+ border-style: solid;
157+ border-color: var(--border);
152 background: transparent;158 background: transparent;
153- color: var(--dynamic-muted);159+ color: var(--muted-foreground);
154 font-size: 0.9rem;160 font-size: 0.9rem;
155 cursor: pointer;161 cursor: pointer;
156 transition: all 100ms ease;162 transition: all 100ms ease;
157 }163 }
158 164
159 .clear-btn:hover {165 .clear-btn:hover {
160- color: var(--dynamic-text);166+ color: var(--foreground);
161- border-color: var(--dynamic-text);167+ border-color: var(--foreground);
162 }168 }
163 169
164 .search-hint {170 .search-hint {
165 font-size: 0.6rem;171 font-size: 0.6rem;
166 padding: 0.15rem 0.35rem;172 padding: 0.15rem 0.35rem;
167- border: 1px solid var(--dynamic-border);173+ border-width: 1px;
168- background: color-mix(in srgb, var(--dynamic-surface) 30%, transparent);174+ border-style: solid;
169- color: var(--dynamic-muted);175+ border-color: var(--border);
176+ background: color-mix(in srgb, var(--card) 30%, transparent);
177+ color: var(--muted-foreground);
170 }178 }
171 </style>179 </style>
M webui/src/pages/homepage/history/HistoryTimeline.svelte +15 -9
@@ -132,7 +132,7 @@
132132 justify-content: center;
133133 gap: 0.5rem;
134134 padding: 2rem;
135- color: var(--dynamic-muted);
135+ color: var(--muted-foreground);
136136 text-align: center;
137137 }
138138
@@ -154,7 +154,9 @@
154154 }
155155
156156 .timeline-group {
157- border-bottom: 1px solid var(--dynamic-border);
157+ border-bottom-width: 1px;
158+ border-bottom-style: solid;
159+ border-bottom-color: var(--border);
158160 }
159161
160162 .timeline-group:last-child {
@@ -167,8 +169,10 @@
167169 justify-content: space-between;
168170 gap: 0.75rem;
169171 padding: 0.5rem 0.85rem;
170- background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
171- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
172+ background: color-mix(in srgb, var(--background) 80%, var(--card) 20%);
173+ border-bottom-width: 1px;
174+ border-bottom-style: solid;
175+ border-bottom-color: color-mix(in srgb, var(--border) 50%, transparent);
172176 position: sticky;
173177 top: 0;
174178 z-index: 1;
@@ -179,15 +183,17 @@
179183 font-weight: 600;
180184 text-transform: uppercase;
181185 letter-spacing: 0.12em;
182- color: var(--dynamic-text);
186+ color: var(--foreground);
183187 }
184188
185189 .group-count {
186190 font-size: 0.6rem;
187191 padding: 0.15rem 0.4rem;
188- border: 1px solid var(--dynamic-border);
189- background: var(--dynamic-bg);
190- color: var(--dynamic-muted);
192+ border-width: 1px;
193+ border-style: solid;
194+ border-color: var(--border);
195+ background: var(--background);
196+ color: var(--muted-foreground);
191197 }
192198
193199 .group-entries {
@@ -205,7 +211,7 @@
205211
206212 .loading-text {
207213 font-size: 0.65rem;
208- color: var(--dynamic-muted);
214+ color: var(--muted-foreground);
209215 letter-spacing: 0.12em;
210216 animation: pulse 1.5s ease-in-out infinite;
211217 }
@@ -132,7 +132,7 @@
132 justify-content: center;132 justify-content: center;
133 gap: 0.5rem;133 gap: 0.5rem;
134 padding: 2rem;134 padding: 2rem;
135- color: var(--dynamic-muted);135+ color: var(--muted-foreground);
136 text-align: center;136 text-align: center;
137 }137 }
138 138
@@ -154,7 +154,9 @@
154 }154 }
155 155
156 .timeline-group {156 .timeline-group {
157- border-bottom: 1px solid var(--dynamic-border);157+ border-bottom-width: 1px;
158+ border-bottom-style: solid;
159+ border-bottom-color: var(--border);
158 }160 }
159 161
160 .timeline-group:last-child {162 .timeline-group:last-child {
@@ -167,8 +169,10 @@
167 justify-content: space-between;169 justify-content: space-between;
168 gap: 0.75rem;170 gap: 0.75rem;
169 padding: 0.5rem 0.85rem;171 padding: 0.5rem 0.85rem;
170- background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);172+ background: color-mix(in srgb, var(--background) 80%, var(--card) 20%);
171- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);173+ border-bottom-width: 1px;
174+ border-bottom-style: solid;
175+ border-bottom-color: color-mix(in srgb, var(--border) 50%, transparent);
172 position: sticky;176 position: sticky;
173 top: 0;177 top: 0;
174 z-index: 1;178 z-index: 1;
@@ -179,15 +183,17 @@
179 font-weight: 600;183 font-weight: 600;
180 text-transform: uppercase;184 text-transform: uppercase;
181 letter-spacing: 0.12em;185 letter-spacing: 0.12em;
182- color: var(--dynamic-text);186+ color: var(--foreground);
183 }187 }
184 188
185 .group-count {189 .group-count {
186 font-size: 0.6rem;190 font-size: 0.6rem;
187 padding: 0.15rem 0.4rem;191 padding: 0.15rem 0.4rem;
188- border: 1px solid var(--dynamic-border);192+ border-width: 1px;
189- background: var(--dynamic-bg);193+ border-style: solid;
190- color: var(--dynamic-muted);194+ border-color: var(--border);
195+ background: var(--background);
196+ color: var(--muted-foreground);
191 }197 }
192 198
193 .group-entries {199 .group-entries {
@@ -205,7 +211,7 @@
205 211
206 .loading-text {212 .loading-text {
207 font-size: 0.65rem;213 font-size: 0.65rem;
208- color: var(--dynamic-muted);214+ color: var(--muted-foreground);
209 letter-spacing: 0.12em;215 letter-spacing: 0.12em;
210 animation: pulse 1.5s ease-in-out infinite;216 animation: pulse 1.5s ease-in-out infinite;
211 }217 }
M webui/src/pages/homepage/panels/AnalyticsPanel.svelte +22 -16
@@ -111,15 +111,17 @@
111111 justify-content: center;
112112 gap: 0.5rem;
113113 padding: 2rem;
114- color: var(--dynamic-muted);
114+ color: var(--muted-foreground);
115115 text-align: center;
116116 }
117117
118118 .loading-spinner {
119119 width: 24px;
120120 height: 24px;
121- border: 2px solid var(--dynamic-border);
122- border-top-color: var(--dynamic-accent, #4ade80);
121+ border-width: 2px;
122+ border-style: solid;
123+ border-color: var(--border);
124+ border-top-color: var(--primary, #4ade80);
123125 border-radius: 50%;
124126 animation: spin 0.8s linear infinite;
125127 }
@@ -157,39 +159,43 @@
157159 flex-direction: column;
158160 gap: 0.3rem;
159161 padding: 0.85rem;
160- border: 1px solid var(--dynamic-border);
161- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
162+ border-width: 1px;
163+ border-style: solid;
164+ border-color: var(--border);
165+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
162166 }
163167
164168 .stat-value {
165169 font-size: 1.5rem;
166170 font-weight: 700;
167- color: var(--dynamic-text);
171+ color: var(--foreground);
168172 letter-spacing: -0.02em;
169173 }
170174
171175 .stat-label {
172176 font-size: 0.6rem;
173177 font-weight: 600;
174- color: var(--dynamic-muted);
178+ color: var(--muted-foreground);
175179 letter-spacing: 0.12em;
176180 }
177181
178182 .section {
179- border: 1px solid var(--dynamic-border);
180- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
183+ border-width: 1px;
184+ border-style: solid;
185+ border-color: var(--border);
186+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
181187 }
182188
183189 .section-header {
184190 padding: 0.5rem 0.75rem;
185- border-bottom: 1px solid var(--dynamic-border);
186- background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
191+ border-bottom: 1px solid var(--border);
192+ background: color-mix(in srgb, var(--background) 80%, var(--card) 20%);
187193 }
188194
189195 .section-title {
190196 font-size: 0.6rem;
191197 font-weight: 600;
192- color: var(--dynamic-muted);
198+ color: var(--muted-foreground);
193199 letter-spacing: 0.12em;
194200 }
195201
@@ -204,7 +210,7 @@
204210 align-items: center;
205211 gap: 0.75rem;
206212 padding: 0.5rem 0.75rem;
207- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 40%, transparent);
213+ border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
208214 }
209215
210216 .domain-item:last-child {
@@ -215,13 +221,13 @@
215221 width: 1.5rem;
216222 font-size: 0.65rem;
217223 font-weight: 600;
218- color: var(--dynamic-muted);
224+ color: var(--muted-foreground);
219225 text-align: center;
220226 }
221227
222228 .domain-name {
223229 font-size: 0.75rem;
224- color: var(--dynamic-text);
230+ color: var(--foreground);
225231 white-space: nowrap;
226232 overflow: hidden;
227233 text-overflow: ellipsis;
@@ -231,7 +237,7 @@
231237 display: flex;
232238 gap: 0.75rem;
233239 font-size: 0.6rem;
234- color: var(--dynamic-muted);
240+ color: var(--muted-foreground);
235241 }
236242
237243 .chart-container {
@@ -111,15 +111,17 @@
111 justify-content: center;111 justify-content: center;
112 gap: 0.5rem;112 gap: 0.5rem;
113 padding: 2rem;113 padding: 2rem;
114- color: var(--dynamic-muted);114+ color: var(--muted-foreground);
115 text-align: center;115 text-align: center;
116 }116 }
117 117
118 .loading-spinner {118 .loading-spinner {
119 width: 24px;119 width: 24px;
120 height: 24px;120 height: 24px;
121- border: 2px solid var(--dynamic-border);121+ border-width: 2px;
122- border-top-color: var(--dynamic-accent, #4ade80);122+ border-style: solid;
123+ border-color: var(--border);
124+ border-top-color: var(--primary, #4ade80);
123 border-radius: 50%;125 border-radius: 50%;
124 animation: spin 0.8s linear infinite;126 animation: spin 0.8s linear infinite;
125 }127 }
@@ -157,39 +159,43 @@
157 flex-direction: column;159 flex-direction: column;
158 gap: 0.3rem;160 gap: 0.3rem;
159 padding: 0.85rem;161 padding: 0.85rem;
160- border: 1px solid var(--dynamic-border);162+ border-width: 1px;
161- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);163+ border-style: solid;
164+ border-color: var(--border);
165+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
162 }166 }
163 167
164 .stat-value {168 .stat-value {
165 font-size: 1.5rem;169 font-size: 1.5rem;
166 font-weight: 700;170 font-weight: 700;
167- color: var(--dynamic-text);171+ color: var(--foreground);
168 letter-spacing: -0.02em;172 letter-spacing: -0.02em;
169 }173 }
170 174
171 .stat-label {175 .stat-label {
172 font-size: 0.6rem;176 font-size: 0.6rem;
173 font-weight: 600;177 font-weight: 600;
174- color: var(--dynamic-muted);178+ color: var(--muted-foreground);
175 letter-spacing: 0.12em;179 letter-spacing: 0.12em;
176 }180 }
177 181
178 .section {182 .section {
179- border: 1px solid var(--dynamic-border);183+ border-width: 1px;
180- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);184+ border-style: solid;
185+ border-color: var(--border);
186+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
181 }187 }
182 188
183 .section-header {189 .section-header {
184 padding: 0.5rem 0.75rem;190 padding: 0.5rem 0.75rem;
185- border-bottom: 1px solid var(--dynamic-border);191+ border-bottom: 1px solid var(--border);
186- background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);192+ background: color-mix(in srgb, var(--background) 80%, var(--card) 20%);
187 }193 }
188 194
189 .section-title {195 .section-title {
190 font-size: 0.6rem;196 font-size: 0.6rem;
191 font-weight: 600;197 font-weight: 600;
192- color: var(--dynamic-muted);198+ color: var(--muted-foreground);
193 letter-spacing: 0.12em;199 letter-spacing: 0.12em;
194 }200 }
195 201
@@ -204,7 +210,7 @@
204 align-items: center;210 align-items: center;
205 gap: 0.75rem;211 gap: 0.75rem;
206 padding: 0.5rem 0.75rem;212 padding: 0.5rem 0.75rem;
207- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 40%, transparent);213+ border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
208 }214 }
209 215
210 .domain-item:last-child {216 .domain-item:last-child {
@@ -215,13 +221,13 @@
215 width: 1.5rem;221 width: 1.5rem;
216 font-size: 0.65rem;222 font-size: 0.65rem;
217 font-weight: 600;223 font-weight: 600;
218- color: var(--dynamic-muted);224+ color: var(--muted-foreground);
219 text-align: center;225 text-align: center;
220 }226 }
221 227
222 .domain-name {228 .domain-name {
223 font-size: 0.75rem;229 font-size: 0.75rem;
224- color: var(--dynamic-text);230+ color: var(--foreground);
225 white-space: nowrap;231 white-space: nowrap;
226 overflow: hidden;232 overflow: hidden;
227 text-overflow: ellipsis;233 text-overflow: ellipsis;
@@ -231,7 +237,7 @@
231 display: flex;237 display: flex;
232 gap: 0.75rem;238 gap: 0.75rem;
233 font-size: 0.6rem;239 font-size: 0.6rem;
234- color: var(--dynamic-muted);240+ color: var(--muted-foreground);
235 }241 }
236 242
237 .chart-container {243 .chart-container {
M webui/src/pages/homepage/panels/FavoritesPanel.svelte +17 -11
@@ -193,8 +193,10 @@
193193 display: flex;
194194 flex-direction: column;
195195 min-height: 0;
196- border: 1px solid var(--dynamic-border);
197- background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);
196+ border-width: 1px;
197+ border-style: solid;
198+ border-color: var(--border);
199+ background: color-mix(in srgb, var(--background) 95%, var(--card) 5%);
198200 }
199201
200202 .panel-header {
@@ -202,23 +204,25 @@
202204 align-items: center;
203205 justify-content: space-between;
204206 padding: 0.6rem 0.85rem;
205- border-bottom: 1px solid var(--dynamic-border);
206- background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);
207+ border-bottom: 1px solid var(--border);
208+ background: color-mix(in srgb, var(--background) 80%, var(--card) 20%);
207209 }
208210
209211 .header-title {
210212 font-size: 0.68rem;
211213 font-weight: 600;
212214 letter-spacing: 0.12em;
213- color: var(--dynamic-text);
215+ color: var(--foreground);
214216 }
215217
216218 .header-count {
217219 font-size: 0.6rem;
218220 padding: 0.15rem 0.4rem;
219- border: 1px solid var(--dynamic-border);
220- background: var(--dynamic-bg);
221- color: var(--dynamic-muted);
221+ border-width: 1px;
222+ border-style: solid;
223+ border-color: var(--border);
224+ background: var(--background);
225+ color: var(--muted-foreground);
222226 }
223227
224228 .panel-content {
@@ -233,14 +237,16 @@
233237 justify-content: center;
234238 gap: 0.75rem;
235239 padding: 2rem;
236- color: var(--dynamic-muted);
240+ color: var(--muted-foreground);
237241 }
238242
239243 .loading-spinner {
240244 width: 24px;
241245 height: 24px;
242- border: 2px solid var(--dynamic-border);
243- border-top-color: var(--dynamic-accent, #4ade80);
246+ border-width: 2px;
247+ border-style: solid;
248+ border-color: var(--border);
249+ border-top-color: var(--primary, #4ade80);
244250 border-radius: 50%;
245251 animation: spin 0.8s linear infinite;
246252 }
@@ -193,8 +193,10 @@
193 display: flex;193 display: flex;
194 flex-direction: column;194 flex-direction: column;
195 min-height: 0;195 min-height: 0;
196- border: 1px solid var(--dynamic-border);196+ border-width: 1px;
197- background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);197+ border-style: solid;
198+ border-color: var(--border);
199+ background: color-mix(in srgb, var(--background) 95%, var(--card) 5%);
198 }200 }
199 201
200 .panel-header {202 .panel-header {
@@ -202,23 +204,25 @@
202 align-items: center;204 align-items: center;
203 justify-content: space-between;205 justify-content: space-between;
204 padding: 0.6rem 0.85rem;206 padding: 0.6rem 0.85rem;
205- border-bottom: 1px solid var(--dynamic-border);207+ border-bottom: 1px solid var(--border);
206- background: color-mix(in srgb, var(--dynamic-bg) 80%, var(--dynamic-surface) 20%);208+ background: color-mix(in srgb, var(--background) 80%, var(--card) 20%);
207 }209 }
208 210
209 .header-title {211 .header-title {
210 font-size: 0.68rem;212 font-size: 0.68rem;
211 font-weight: 600;213 font-weight: 600;
212 letter-spacing: 0.12em;214 letter-spacing: 0.12em;
213- color: var(--dynamic-text);215+ color: var(--foreground);
214 }216 }
215 217
216 .header-count {218 .header-count {
217 font-size: 0.6rem;219 font-size: 0.6rem;
218 padding: 0.15rem 0.4rem;220 padding: 0.15rem 0.4rem;
219- border: 1px solid var(--dynamic-border);221+ border-width: 1px;
220- background: var(--dynamic-bg);222+ border-style: solid;
221- color: var(--dynamic-muted);223+ border-color: var(--border);
224+ background: var(--background);
225+ color: var(--muted-foreground);
222 }226 }
223 227
224 .panel-content {228 .panel-content {
@@ -233,14 +237,16 @@
233 justify-content: center;237 justify-content: center;
234 gap: 0.75rem;238 gap: 0.75rem;
235 padding: 2rem;239 padding: 2rem;
236- color: var(--dynamic-muted);240+ color: var(--muted-foreground);
237 }241 }
238 242
239 .loading-spinner {243 .loading-spinner {
240 width: 24px;244 width: 24px;
241 height: 24px;245 height: 24px;
242- border: 2px solid var(--dynamic-border);246+ border-width: 2px;
243- border-top-color: var(--dynamic-accent, #4ade80);247+ border-style: solid;
248+ border-color: var(--border);
249+ border-top-color: var(--primary, #4ade80);
244 border-radius: 50%;250 border-radius: 50%;
245 animation: spin 0.8s linear infinite;251 animation: spin 0.8s linear infinite;
246 }252 }
M webui/src/pages/homepage/panels/HistoryPanel.svelte +9 -5
@@ -164,8 +164,10 @@
164164 .panel-content {
165165 display: flex;
166166 flex-direction: column;
167- border: 1px solid var(--dynamic-border);
168- background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);
167+ border-width: 1px;
168+ border-style: solid;
169+ border-color: var(--border);
170+ background: color-mix(in srgb, var(--background) 95%, var(--card) 5%);
169171 }
170172
171173 .loading-state {
@@ -175,14 +177,16 @@
175177 align-items: center;
176178 justify-content: center;
177179 gap: 0.75rem;
178- color: var(--dynamic-muted);
180+ color: var(--muted-foreground);
179181 }
180182
181183 .loading-spinner {
182184 width: 24px;
183185 height: 24px;
184- border: 2px solid var(--dynamic-border);
185- border-top-color: var(--dynamic-accent, #4ade80);
186+ border-width: 2px;
187+ border-style: solid;
188+ border-color: var(--border);
189+ border-top-color: var(--primary, #4ade80);
186190 border-radius: 50%;
187191 animation: spin 0.8s linear infinite;
188192 }
@@ -164,8 +164,10 @@
164 .panel-content {164 .panel-content {
165 display: flex;165 display: flex;
166 flex-direction: column;166 flex-direction: column;
167- border: 1px solid var(--dynamic-border);167+ border-width: 1px;
168- background: color-mix(in srgb, var(--dynamic-bg) 95%, var(--dynamic-surface) 5%);168+ border-style: solid;
169+ border-color: var(--border);
170+ background: color-mix(in srgb, var(--background) 95%, var(--card) 5%);
169 }171 }
170 172
171 .loading-state {173 .loading-state {
@@ -175,14 +177,16 @@
175 align-items: center;177 align-items: center;
176 justify-content: center;178 justify-content: center;
177 gap: 0.75rem;179 gap: 0.75rem;
178- color: var(--dynamic-muted);180+ color: var(--muted-foreground);
179 }181 }
180 182
181 .loading-spinner {183 .loading-spinner {
182 width: 24px;184 width: 24px;
183 height: 24px;185 height: 24px;
184- border: 2px solid var(--dynamic-border);186+ border-width: 2px;
185- border-top-color: var(--dynamic-accent, #4ade80);187+ border-style: solid;
188+ border-color: var(--border);
189+ border-top-color: var(--primary, #4ade80);
186 border-radius: 50%;190 border-radius: 50%;
187 animation: spin 0.8s linear infinite;191 animation: spin 0.8s linear infinite;
188 }192 }

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