dev vouch dev on at. thats about it
atvouch.dev
change styling a bit
+199
-69
+2
frontend/index.html
+2
frontend/index.html
···
3
3
<head>
4
4
<meta charset="UTF-8" />
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
6
8
<title>atvouch</title>
7
9
</head>
8
10
<body>
+197
-69
frontend/src/App.css
+197
-69
frontend/src/App.css
···
1
+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap');
2
+
3
+
:root {
4
+
--bg: #0c0c0c;
5
+
--bg-raised: #141412;
6
+
--bg-input: #1a1a17;
7
+
--border: #2a2a25;
8
+
--border-strong: #3a3a33;
9
+
--text: #e8e4de;
10
+
--text-dim: #8a867e;
11
+
--text-faint: #5a5750;
12
+
--accent: #00ff88;
13
+
--accent-dim: #00cc6d;
14
+
--accent-bg: #00ff8808;
15
+
--error: #ff5f56;
16
+
--error-bg: #ff5f5608;
17
+
--serif: 'Instrument Serif', Georgia, serif;
18
+
--sans: 'DM Sans', system-ui, sans-serif;
19
+
--mono: 'JetBrains Mono', 'Courier New', monospace;
20
+
}
21
+
1
22
* {
2
23
box-sizing: border-box;
3
24
margin: 0;
4
25
padding: 0;
26
+
}
27
+
28
+
::selection {
29
+
background: var(--accent);
30
+
color: var(--bg);
5
31
}
6
32
7
33
body {
8
-
font-family: system-ui, -apple-system, sans-serif;
9
-
background: #0a0a0a;
10
-
color: #e0e0e0;
11
-
line-height: 1.5;
34
+
font-family: var(--sans);
35
+
font-size: 14px;
36
+
background: var(--bg);
37
+
color: var(--text);
38
+
line-height: 1.65;
39
+
-webkit-font-smoothing: antialiased;
12
40
}
13
41
42
+
/* ── layout ── */
43
+
14
44
.container {
15
-
max-width: 900px;
45
+
max-width: 960px;
16
46
margin: 0 auto;
17
-
padding: 2rem 1rem;
47
+
padding: 3rem 2rem;
18
48
}
19
49
20
50
h1 {
21
-
font-size: 1.5rem;
22
-
margin-bottom: 1.5rem;
23
-
color: #fff;
51
+
font-family: var(--sans);
52
+
font-size: 3.5rem;
53
+
font-weight: 400;
54
+
font-style: normal;
55
+
color: var(--text);
56
+
letter-spacing: -0.03em;
57
+
margin-bottom: 2.5rem;
58
+
line-height: 1;
59
+
}
60
+
61
+
h1::after {
62
+
content: '';
63
+
display: block;
64
+
width: 100%;
65
+
height: 2px;
66
+
background: var(--accent);
67
+
margin-top: 1rem;
24
68
}
25
69
26
70
h2 {
27
-
font-size: 1.1rem;
28
-
margin-bottom: 0.75rem;
29
-
color: #ccc;
71
+
font-family: var(--sans);
72
+
font-size: 1.5rem;
73
+
font-weight: 400;
74
+
color: var(--text);
75
+
letter-spacing: -0.01em;
76
+
margin-bottom: 1rem;
77
+
line-height: 1.2;
30
78
}
31
79
80
+
/* ── topbar ── */
81
+
32
82
.topbar {
33
83
display: flex;
34
84
align-items: center;
35
85
justify-content: space-between;
36
86
gap: 1rem;
37
-
padding: 0.5rem 0;
38
-
border-bottom: 1px solid #222;
39
-
margin-bottom: 1rem;
87
+
padding: 0.75rem 0;
88
+
border-bottom: 2px solid var(--border);
89
+
margin-bottom: 2rem;
90
+
}
91
+
92
+
.topbar span {
93
+
font-size: 12px;
94
+
color: var(--text-dim);
95
+
letter-spacing: 0.02em;
96
+
text-transform: uppercase;
40
97
}
41
98
42
99
.topbar code {
43
-
font-size: 0.85rem;
44
-
color: #aaa;
100
+
font-family: var(--mono);
101
+
font-size: 12px;
102
+
color: var(--accent);
103
+
text-transform: none;
45
104
}
46
105
106
+
/* ── two-column layout ── */
107
+
47
108
.layout {
48
109
display: flex;
49
-
gap: 1.5rem;
110
+
gap: 2rem;
50
111
align-items: flex-start;
51
112
}
52
113
53
114
.sidebar {
54
-
width: 240px;
115
+
width: 260px;
55
116
flex-shrink: 0;
56
-
border: 1px solid #222;
57
-
border-radius: 8px;
58
-
padding: 1rem;
117
+
border: 1px solid var(--border);
118
+
border-top: 3px solid var(--accent);
119
+
padding: 1.25rem;
120
+
background: var(--bg-raised);
59
121
}
60
122
61
123
.main-panel {
···
63
125
min-width: 0;
64
126
}
65
127
128
+
/* ── sections ── */
129
+
66
130
section {
67
131
margin-bottom: 1.5rem;
68
-
padding: 1rem;
69
-
border: 1px solid #222;
70
-
border-radius: 8px;
132
+
padding: 1.25rem;
133
+
border: 1px solid var(--border);
134
+
border-left: 3px solid var(--border-strong);
135
+
background: var(--bg-raised);
136
+
transition: border-left-color 0.2s ease;
137
+
}
138
+
139
+
section:hover {
140
+
border-left-color: var(--accent);
71
141
}
72
142
73
143
section:last-child {
74
144
margin-bottom: 0;
75
145
}
76
146
147
+
/* ── text helpers ── */
148
+
77
149
.muted {
78
-
color: #666;
79
-
font-size: 0.85rem;
150
+
color: var(--text-faint);
151
+
font-size: 12px;
152
+
letter-spacing: 0.03em;
153
+
text-transform: uppercase;
80
154
}
81
155
156
+
/* ── form fields ── */
157
+
82
158
.field {
83
159
display: flex;
84
-
gap: 0.5rem;
160
+
gap: 0;
85
161
}
86
162
87
163
input[type="text"] {
88
164
flex: 1;
89
-
padding: 0.5rem 0.75rem;
90
-
border: 1px solid #333;
91
-
border-radius: 6px;
92
-
background: #141414;
93
-
color: #e0e0e0;
94
-
font-size: 0.9rem;
165
+
padding: 0.6rem 0.85rem;
166
+
border: 1px solid var(--border);
167
+
border-right: none;
168
+
background: var(--bg-input);
169
+
color: var(--text);
170
+
font-family: var(--mono);
171
+
font-size: 13px;
172
+
transition: border-color 0.15s ease;
95
173
}
96
174
97
175
input[type="text"]::placeholder {
98
-
color: #666;
176
+
color: var(--text-faint);
177
+
font-style: italic;
178
+
font-family: var(--sans);
179
+
font-size: 13px;
99
180
}
100
181
101
182
input[type="text"]:focus {
102
183
outline: none;
103
-
border-color: #555;
184
+
border-color: var(--accent);
185
+
background: var(--bg);
104
186
}
105
187
106
188
button {
107
-
padding: 0.5rem 1rem;
108
-
border: 1px solid #333;
109
-
border-radius: 6px;
110
-
background: #1a1a1a;
111
-
color: #e0e0e0;
189
+
padding: 0.6rem 1.2rem;
190
+
border: 1px solid var(--border);
191
+
background: var(--bg-input);
192
+
color: var(--text);
112
193
cursor: pointer;
113
-
font-size: 0.9rem;
194
+
font-family: var(--sans);
195
+
font-size: 13px;
196
+
font-weight: 700;
197
+
letter-spacing: 0.06em;
198
+
text-transform: uppercase;
114
199
white-space: nowrap;
200
+
transition: all 0.15s ease;
115
201
}
116
202
117
203
button:hover:not(:disabled) {
118
-
background: #252525;
119
-
border-color: #444;
204
+
background: var(--accent);
205
+
color: var(--bg);
206
+
border-color: var(--accent);
120
207
}
121
208
122
209
button:disabled {
123
-
opacity: 0.5;
210
+
opacity: 0.35;
124
211
cursor: not-allowed;
125
212
}
126
213
214
+
/* ── topbar logout button ── */
215
+
216
+
.topbar button {
217
+
font-size: 11px;
218
+
padding: 0.4rem 0.8rem;
219
+
border-color: var(--border);
220
+
}
221
+
222
+
/* ── pre / code output ── */
223
+
127
224
pre {
128
-
background: #141414;
129
-
border: 1px solid #222;
130
-
border-radius: 6px;
131
-
padding: 0.75rem;
225
+
background: var(--bg);
226
+
border: 1px solid var(--border);
227
+
border-left: 3px solid var(--text-faint);
228
+
padding: 0.85rem 1rem;
132
229
overflow-x: auto;
133
-
font-size: 0.85rem;
134
-
margin-top: 0.5rem;
230
+
font-family: var(--mono);
231
+
font-size: 12px;
232
+
margin-top: 0.75rem;
135
233
white-space: pre-wrap;
136
234
word-break: break-all;
235
+
line-height: 1.7;
236
+
color: var(--text-dim);
137
237
}
138
238
239
+
/* ── messages ── */
240
+
139
241
.error {
140
-
color: #f87171;
141
-
background: #1c0a0a;
142
-
border: 1px solid #3b1111;
143
-
border-radius: 6px;
144
-
padding: 0.5rem 0.75rem;
145
-
margin-top: 0.5rem;
146
-
font-size: 0.85rem;
242
+
color: var(--error);
243
+
background: var(--error-bg);
244
+
border: 1px solid var(--error);
245
+
border-left: 3px solid var(--error);
246
+
padding: 0.6rem 0.85rem;
247
+
margin-top: 0.75rem;
248
+
font-size: 12px;
147
249
}
148
250
149
251
.success {
150
-
color: #4ade80;
151
-
border-color: #113b11;
252
+
color: var(--accent);
253
+
border-color: var(--accent);
254
+
border-left: 3px solid var(--accent);
255
+
background: var(--accent-bg);
152
256
}
153
257
258
+
/* ── login form ── */
259
+
154
260
form {
155
261
margin: 0;
156
262
}
157
263
264
+
/* ── vouch list ── */
265
+
158
266
.vouch-list {
159
267
list-style: none;
160
-
margin-top: 0.5rem;
268
+
margin-top: 0.75rem;
161
269
}
162
270
163
271
.vouch-list li {
164
272
display: flex;
165
273
justify-content: space-between;
166
-
align-items: center;
167
-
padding: 0.4rem 0;
168
-
border-bottom: 1px solid #1a1a1a;
169
-
font-size: 0.85rem;
170
-
gap: 0.5rem;
274
+
align-items: baseline;
275
+
padding: 0.5rem 0;
276
+
border-bottom: 1px solid var(--border);
277
+
font-size: 12px;
278
+
gap: 0.75rem;
171
279
}
172
280
173
281
.vouch-list li:last-child {
174
282
border-bottom: none;
175
283
}
176
284
285
+
.vouch-list li::before {
286
+
content: '\2713';
287
+
color: var(--accent);
288
+
font-size: 10px;
289
+
margin-right: 0.25rem;
290
+
flex-shrink: 0;
291
+
}
292
+
177
293
.vouch-handle {
178
-
color: #e0e0e0;
294
+
color: var(--text);
179
295
overflow: hidden;
180
296
text-overflow: ellipsis;
181
297
white-space: nowrap;
298
+
flex: 1;
182
299
}
183
300
184
301
.vouch-date {
185
-
color: #666;
186
-
font-size: 0.75rem;
302
+
color: var(--text-faint);
303
+
font-size: 11px;
187
304
flex-shrink: 0;
305
+
font-variant-numeric: tabular-nums;
188
306
}
307
+
308
+
/* ── responsive ── */
189
309
190
310
@media (max-width: 640px) {
311
+
.container {
312
+
padding: 2rem 1rem;
313
+
}
314
+
315
+
h1 {
316
+
font-size: 2.5rem;
317
+
}
318
+
191
319
.layout {
192
320
flex-direction: column;
193
321
}