detached 70a4bbc

style(ui): refine footer and toast component styling

Footer:
- Add top border with dynamic colors
- Update background with color-mix for subtle layering
- Switch to monospace font (JetBrains Mono, Fira Code)
- Apply uppercase text with increased letter-spacing
- Use CSS custom properties for dynamic theming
- Update hover effects (letter-spacing transition)
- Remove border-radius from focus outlines

Toast:
- Simplify color system with CSS custom properties
- Update background mixing ratios for better visibility
- Adjust border color mixing for enhanced contrast
- Increase box-shadow depth
- Remove unused variant-specific background colors
- Apply dynamic color tokens consistently
commit
70a4bbcae9a7af54fa755278920bdcd8cf6a987b
author
bamen · · 2025-10-06 21:56 UTC
committer
bamen · · 2025-10-06 17:04 UTC
parent
3293762
signature
unsigned
2 files · +40 -65
Unified
UnifiedSplit
M gui/src/components/Footer.svelte +23 -13
@@ -18,53 +18,63 @@
1818
1919 <style>
2020 .footer {
21- margin-top: 1rem;
21+ margin-top: 1.5rem;
2222 width: 100%;
23+ border-top: 1px solid var(--dynamic-border);
24+ background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
2325 }
2426
2527 .footer-content {
2628 display: flex;
2729 justify-content: center;
2830 align-items: center;
29- padding: 1rem 0;
31+ padding: 0.75rem 0;
3032 }
3133
3234 .footer-text {
3335 display: flex;
3436 align-items: center;
3537 gap: 0.75rem;
36- font-size: 0.85rem;
37- color: #888;
38+ font-size: 0.75rem;
39+ text-transform: uppercase;
40+ letter-spacing: 0.12em;
41+ color: var(--dynamic-muted);
3842 }
3943
4044 .footer-name {
41- color: #aaa;
42- font-weight: 500;
45+ color: var(--dynamic-text);
46+ font-weight: 600;
4347 }
4448
4549 .footer-dot {
46- color: #666;
50+ color: var(--dynamic-border);
4751 }
4852
4953 .footer-link {
5054 background: none;
5155 border: none;
52- color: #0066cc;
56+ color: var(--dynamic-muted);
5357 text-decoration: none;
5458 cursor: pointer;
5559 font-size: 0.85rem;
5660 padding: 0;
57- transition: color 0.2s ease;
61+ transition: color 0.2s ease, letter-spacing 0.2s ease;
62+ font-family:
63+ "JetBrains Mono",
64+ "Fira Code",
65+ "SFMono-Regular",
66+ Menlo,
67+ monospace;
5868 }
5969
6070 .footer-link:hover {
61- color: #4d94ff;
62- text-decoration: underline;
71+ color: var(--dynamic-text);
72+ letter-spacing: 0.16em;
6373 }
6474
6575 .footer-link:focus {
66- outline: 1px solid #0066cc;
76+ outline: 1px solid var(--dynamic-border);
6777 outline-offset: 2px;
68- border-radius: 2px;
78+ border-radius: 0;
6979 }
7080 </style>
@@ -18,53 +18,63 @@
18 18
19 <style>19 <style>
20 .footer {20 .footer {
21- margin-top: 1rem;21+ margin-top: 1.5rem;
22 width: 100%;22 width: 100%;
23+ border-top: 1px solid var(--dynamic-border);
24+ background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
23 }25 }
24 26
25 .footer-content {27 .footer-content {
26 display: flex;28 display: flex;
27 justify-content: center;29 justify-content: center;
28 align-items: center;30 align-items: center;
29- padding: 1rem 0;31+ padding: 0.75rem 0;
30 }32 }
31 33
32 .footer-text {34 .footer-text {
33 display: flex;35 display: flex;
34 align-items: center;36 align-items: center;
35 gap: 0.75rem;37 gap: 0.75rem;
36- font-size: 0.85rem;38+ font-size: 0.75rem;
37- color: #888;39+ text-transform: uppercase;
40+ letter-spacing: 0.12em;
41+ color: var(--dynamic-muted);
38 }42 }
39 43
40 .footer-name {44 .footer-name {
41- color: #aaa;45+ color: var(--dynamic-text);
42- font-weight: 500;46+ font-weight: 600;
43 }47 }
44 48
45 .footer-dot {49 .footer-dot {
46- color: #666;50+ color: var(--dynamic-border);
47 }51 }
48 52
49 .footer-link {53 .footer-link {
50 background: none;54 background: none;
51 border: none;55 border: none;
52- color: #0066cc;56+ color: var(--dynamic-muted);
53 text-decoration: none;57 text-decoration: none;
54 cursor: pointer;58 cursor: pointer;
55 font-size: 0.85rem;59 font-size: 0.85rem;
56 padding: 0;60 padding: 0;
57- transition: color 0.2s ease;61+ transition: color 0.2s ease, letter-spacing 0.2s ease;
62+ font-family:
63+ "JetBrains Mono",
64+ "Fira Code",
65+ "SFMono-Regular",
66+ Menlo,
67+ monospace;
58 }68 }
59 69
60 .footer-link:hover {70 .footer-link:hover {
61- color: #4d94ff;71+ color: var(--dynamic-text);
62- text-decoration: underline;72+ letter-spacing: 0.16em;
63 }73 }
64 74
65 .footer-link:focus {75 .footer-link:focus {
66- outline: 1px solid #0066cc;76+ outline: 1px solid var(--dynamic-border);
67 outline-offset: 2px;77 outline-offset: 2px;
68- border-radius: 2px;78+ border-radius: 0;
69 }79 }
70 </style>80 </style>
M gui/src/components/toast/Toast.svelte +17 -52
@@ -95,10 +95,13 @@
9595
9696 <style>
9797 .toast {
98- background-color: var(--dynamic-surface);
99- border: 1px solid var(--dynamic-border);
98+ --toast-bg: color-mix(in srgb, var(--dynamic-surface) 88%, var(--dynamic-text) 12%);
99+ --toast-border: color-mix(in srgb, var(--dynamic-border) 70%, var(--dynamic-text) 30%);
100+ --toast-text: var(--dynamic-text);
101+ background-color: var(--toast-bg);
102+ border: 1px solid var(--toast-border);
100103 border-radius: 0;
101- box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
104+ box-shadow: 0 8px 14px rgba(0, 0, 0, 0.08);
102105 cursor: pointer;
103106 display: inline-flex;
104107 margin: 0;
@@ -118,7 +121,7 @@
118121 }
119122
120123 .toast-message {
121- color: var(--dynamic-text);
124+ color: var(--toast-text);
122125 font-size: 0.875rem;
123126 font-weight: 600;
124127 min-width: 9rem;
@@ -126,57 +129,19 @@
126129 text-align: center;
127130 }
128131
129- .toast-light.toast-info {
130- background-color: rgb(239 246 255);
131- border-color: rgb(191 219 254);
132+ .toast.toast-info {
133+ --toast-bg: color-mix(in srgb, var(--dynamic-surface) 82%, var(--dynamic-text) 18%);
134+ --toast-border: color-mix(in srgb, var(--dynamic-border) 55%, var(--dynamic-text) 45%);
132135 }
133136
134- .toast-dark.toast-info {
135- background-color: rgb(59 130 246 / 0.2);
136- border-color: rgb(59 130 246);
137+ .toast.toast-success {
138+ --toast-bg: color-mix(in srgb, var(--dynamic-surface) 78%, var(--dynamic-text) 22%);
139+ --toast-border: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
137140 }
138141
139- .toast-light.toast-success {
140- background-color: rgb(240 253 244);
141- border-color: rgb(187 247 208);
142- }
143-
144- .toast-dark.toast-success {
145- background-color: rgb(22 163 74 / 0.2);
146- border-color: rgb(22 163 74);
147- }
148-
149- .toast-light.toast-error {
150- background-color: rgb(254 242 242);
151- border-color: rgb(254 202 202);
152- }
153-
154- .toast-dark.toast-error {
155- background-color: rgb(220 38 38 / 0.2);
156- border-color: rgb(220 38 38);
157- }
158-
159- .toast-light.toast-info .toast-message {
160- color: rgb(59 130 246);
161- }
162-
163- .toast-dark.toast-info .toast-message {
164- color: rgb(191 219 254);
165- }
166-
167- .toast-light.toast-success .toast-message {
168- color: rgb(22 163 74);
169- }
170-
171- .toast-dark.toast-success .toast-message {
172- color: rgb(187 247 208);
173- }
174-
175- .toast-light.toast-error .toast-message {
176- color: rgb(220 38 38);
177- }
178-
179- .toast-dark.toast-error .toast-message {
180- color: rgb(254 202 202);
142+ .toast.toast-error {
143+ --toast-bg: color-mix(in srgb, var(--dynamic-surface) 74%, var(--dynamic-text) 26%);
144+ --toast-border: color-mix(in srgb, var(--dynamic-border) 45%, var(--dynamic-text) 55%);
145+ --toast-text: color-mix(in srgb, var(--dynamic-text) 80%, var(--dynamic-muted) 20%);
181146 }
182147 </style>
@@ -95,10 +95,13 @@
95 95
96 <style>96 <style>
97 .toast {97 .toast {
98- background-color: var(--dynamic-surface);98+ --toast-bg: color-mix(in srgb, var(--dynamic-surface) 88%, var(--dynamic-text) 12%);
99- border: 1px solid var(--dynamic-border);99+ --toast-border: color-mix(in srgb, var(--dynamic-border) 70%, var(--dynamic-text) 30%);
100+ --toast-text: var(--dynamic-text);
101+ background-color: var(--toast-bg);
102+ border: 1px solid var(--toast-border);
100 border-radius: 0;103 border-radius: 0;
101- box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);104+ box-shadow: 0 8px 14px rgba(0, 0, 0, 0.08);
102 cursor: pointer;105 cursor: pointer;
103 display: inline-flex;106 display: inline-flex;
104 margin: 0;107 margin: 0;
@@ -118,7 +121,7 @@
118 }121 }
119 122
120 .toast-message {123 .toast-message {
121- color: var(--dynamic-text);124+ color: var(--toast-text);
122 font-size: 0.875rem;125 font-size: 0.875rem;
123 font-weight: 600;126 font-weight: 600;
124 min-width: 9rem;127 min-width: 9rem;
@@ -126,57 +129,19 @@
126 text-align: center;129 text-align: center;
127 }130 }
128 131
129- .toast-light.toast-info {132+ .toast.toast-info {
130- background-color: rgb(239 246 255);133+ --toast-bg: color-mix(in srgb, var(--dynamic-surface) 82%, var(--dynamic-text) 18%);
131- border-color: rgb(191 219 254);134+ --toast-border: color-mix(in srgb, var(--dynamic-border) 55%, var(--dynamic-text) 45%);
132 }135 }
133 136
134- .toast-dark.toast-info {137+ .toast.toast-success {
135- background-color: rgb(59 130 246 / 0.2);138+ --toast-bg: color-mix(in srgb, var(--dynamic-surface) 78%, var(--dynamic-text) 22%);
136- border-color: rgb(59 130 246);139+ --toast-border: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
137 }140 }
138 141
139- .toast-light.toast-success {142+ .toast.toast-error {
140- background-color: rgb(240 253 244);143+ --toast-bg: color-mix(in srgb, var(--dynamic-surface) 74%, var(--dynamic-text) 26%);
141- border-color: rgb(187 247 208);144+ --toast-border: color-mix(in srgb, var(--dynamic-border) 45%, var(--dynamic-text) 55%);
142- }145+ --toast-text: color-mix(in srgb, var(--dynamic-text) 80%, var(--dynamic-muted) 20%);
143-
144- .toast-dark.toast-success {
145- background-color: rgb(22 163 74 / 0.2);
146- border-color: rgb(22 163 74);
147- }
148-
149- .toast-light.toast-error {
150- background-color: rgb(254 242 242);
151- border-color: rgb(254 202 202);
152- }
153-
154- .toast-dark.toast-error {
155- background-color: rgb(220 38 38 / 0.2);
156- border-color: rgb(220 38 38);
157- }
158-
159- .toast-light.toast-info .toast-message {
160- color: rgb(59 130 246);
161- }
162-
163- .toast-dark.toast-info .toast-message {
164- color: rgb(191 219 254);
165- }
166-
167- .toast-light.toast-success .toast-message {
168- color: rgb(22 163 74);
169- }
170-
171- .toast-dark.toast-success .toast-message {
172- color: rgb(187 247 208);
173- }
174-
175- .toast-light.toast-error .toast-message {
176- color: rgb(220 38 38);
177- }
178-
179- .toast-dark.toast-error .toast-message {
180- color: rgb(254 202 202);
181 }146 }
182 </style>147 </style>

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