fuzzy find my records
ken.waow.tech
embeddings
pds
search
restore full CSS, apply only pack-menu changes
the previous commit rewrote the entire style.css and dropped ~220
lines of rules (search form, typeahead, progress bar, results,
modals, etc.), nuking the site layout. this restores the known-good
CSS from 39daa31 and applies only the targeted pack-menu changes:
kill the pill border/padding, make the trigger inline text, add
margin-left: auto on the share button.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+356
-157
+356
-157
backend/src/assets/style.css
+356
-157
backend/src/assets/style.css
···
1
-
/* ------- ken ------- */
1
+
/* ken — minimal, dark, monospace, mobile-first.
2
+
* palette kept to 5 custom properties. single accent (warm amber) so the
3
+
* page has one clear interaction color. sizing via clamp() throughout so
4
+
* the layout breathes from 360px phones up to wide desktops with no
5
+
* breakpoints. soft radii, subtle transitions.
6
+
*/
7
+
2
8
:root {
3
9
--bg: #0d0d0f;
4
10
--fg: #e6e2d7;
···
6
12
--accent: #d4a76a;
7
13
--accent-dim: #8a6b40;
8
14
--border: #242329;
9
-
--bg-2: #141318;
10
-
--bg-3: #1a191f;
15
+
--surface: #16161a;
16
+
--surface-hover: #1c1c22;
11
17
--danger: #e08872;
12
18
--danger-dim: #4a2a22;
13
-
--hero-size: clamp(16px, 1.5vmin, 18px);
19
+
14
20
--radius: clamp(6px, 0.6vmin, 10px);
15
-
/* base body size — clamped so it never goes below 12px on phones.
16
-
* --text-small derives from it for secondary UI elements. */
17
-
--text-body: clamp(13px, 1.5vmin, 15px);
21
+
--gap: clamp(10px, 2vmin, 16px);
22
+
--pad: clamp(14px, 3vmin, 22px);
23
+
--text-body: clamp(13px, 1.6vmin, 15px);
18
24
--text-small: clamp(11px, 1.3vmin, 12px);
25
+
--text-h: clamp(15px, 2vmin, 18px);
19
26
}
20
27
21
-
/* ------- reset / base ------- */
22
-
*,
23
-
*::before,
24
-
*::after { box-sizing: border-box; margin: 0; padding: 0; }
25
-
html { height: 100%; }
26
-
body {
28
+
* { box-sizing: border-box; margin: 0; padding: 0; }
29
+
30
+
html, body {
27
31
background: var(--bg);
28
32
color: var(--fg);
29
-
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
30
-
font-size: var(--text-body);
31
-
line-height: 1.6;
33
+
font: var(--text-body) / 1.5 ui-monospace, "SF Mono", Menlo, "Cascadia Code", monospace;
32
34
min-height: 100vh;
33
-
display: flex;
34
-
flex-direction: column;
35
+
-webkit-font-smoothing: antialiased;
36
+
-moz-osx-font-smoothing: grayscale;
35
37
}
38
+
36
39
a {
37
40
color: var(--accent);
38
41
text-decoration: none;
39
42
border-bottom: 1px solid transparent;
43
+
transition: border-color 0.15s;
40
44
}
41
45
a:hover { border-bottom-color: var(--accent); }
42
46
43
-
/* ------- shared chrome ------- */
44
-
button, .text-btn {
45
-
background: none;
46
-
border: none;
47
-
color: var(--fg);
48
-
cursor: pointer;
47
+
button {
49
48
font: inherit;
50
-
padding: 0;
49
+
cursor: pointer;
50
+
background: transparent;
51
+
color: var(--fg);
52
+
border: 1px solid var(--border);
53
+
padding: clamp(8px, 1.4vmin, 10px) clamp(12px, 2vmin, 16px);
54
+
border-radius: var(--radius);
55
+
transition: all 0.15s;
56
+
min-height: 44px;
51
57
}
52
-
.text-btn {
53
-
border-bottom: 1px solid transparent;
54
-
transition: border-color 0.15s;
58
+
button:hover:not(:disabled) {
59
+
border-color: var(--fg-mute);
55
60
}
56
-
.text-btn:hover { color: var(--fg); }
61
+
button:disabled { opacity: 0.5; cursor: wait; }
62
+
63
+
.hidden { display: none !important; }
57
64
.muted { color: var(--fg-mute); }
58
-
.hidden { display: none !important; }
59
65
60
-
/* ------- nav / brand ------- */
66
+
/* ------- header ------- */
67
+
61
68
header {
62
69
display: flex;
63
70
align-items: baseline;
64
-
gap: 12px;
65
-
padding: clamp(12px, 2vmin, 20px) clamp(12px, 3vmin, 24px);
71
+
justify-content: space-between;
72
+
gap: var(--gap);
73
+
padding: clamp(14px, 2.5vmin, 22px) var(--pad);
66
74
}
75
+
67
76
.brand {
68
-
font-size: var(--hero-size);
69
-
font-weight: 700;
77
+
font-size: var(--text-h);
70
78
color: var(--fg);
71
-
text-decoration: none;
72
79
border-bottom: none;
80
+
letter-spacing: -0.01em;
73
81
}
74
82
.brand:hover { border-bottom: none; color: var(--accent); }
75
-
nav {
83
+
84
+
.signed-nav {
76
85
display: flex;
77
-
gap: 8px;
78
86
align-items: baseline;
79
-
margin-left: auto;
87
+
gap: 8px;
80
88
font-size: var(--text-small);
81
89
color: var(--fg-mute);
90
+
font-variant-numeric: tabular-nums;
82
91
}
83
92
.session-handle { color: var(--accent); }
84
93
.sep { color: var(--fg-mute); opacity: 0.4; }
85
94
86
-
/* ------- handle suggestions ------- */
87
-
.handle-suggestions {
88
-
position: absolute;
89
-
width: 100%;
90
-
max-height: 240px;
91
-
overflow-y: auto;
92
-
background: var(--bg-2);
95
+
.text-btn {
96
+
background: transparent;
97
+
border: none;
98
+
padding: 0;
99
+
min-height: 0;
93
100
color: var(--fg-mute);
101
+
font: inherit;
94
102
font-size: var(--text-small);
95
-
border: 1px solid var(--border);
96
-
border-top: none;
97
-
border-radius: 0 0 var(--radius) var(--radius);
98
-
z-index: 10;
99
-
top: 100%;
100
-
left: 0;
101
-
list-style: none;
102
-
}
103
-
.handle-suggestion {
104
-
padding: 8px 14px;
105
103
cursor: pointer;
104
+
transition: color 0.15s;
106
105
}
107
-
.handle-suggestion:hover,
108
-
.handle-suggestion.active {
109
-
background: var(--bg-3);
110
-
color: var(--fg);
106
+
.text-btn:hover { color: var(--fg); }
107
+
108
+
/* ------- footer ------- */
109
+
110
+
footer {
111
+
display: flex;
112
+
justify-content: center;
113
+
align-items: baseline;
114
+
gap: 8px;
115
+
padding: clamp(20px, 4vmin, 40px) var(--pad);
116
+
font-size: var(--text-small);
117
+
color: var(--fg-mute);
111
118
}
119
+
footer .text-btn { color: var(--fg-mute); }
120
+
footer .text-btn:hover { color: var(--accent); }
121
+
footer a { color: var(--fg-mute); }
122
+
footer a:hover { color: var(--accent); }
112
123
113
-
/* ------- main / sections ------- */
114
-
main { flex: 1; display: flex; flex-direction: column; align-items: center; }
115
-
.section { width: 100%; max-width: 800px; padding: clamp(16px, 3vmin, 40px); }
124
+
/* ------- main ------- */
116
125
117
-
/* ------- sign-in form ------- */
118
-
.search-form {
119
-
display: flex;
120
-
gap: clamp(6px, 1vmin, 10px);
126
+
main {
127
+
max-width: 820px;
128
+
margin: 0 auto;
129
+
padding: var(--pad);
130
+
padding-bottom: clamp(40px, 8vmin, 80px);
131
+
}
132
+
133
+
.row {
121
134
position: relative;
135
+
margin-bottom: var(--gap);
136
+
display: flex;
137
+
gap: var(--gap);
122
138
}
123
-
.search-form input {
139
+
140
+
.row input[type="text"],
141
+
#search-form input {
124
142
flex: 1;
125
-
background: var(--bg);
143
+
background: var(--surface);
126
144
border: 1px solid var(--border);
127
145
color: var(--fg);
128
-
padding: clamp(10px, 1.5vmin, 14px) clamp(12px, 2vmin, 16px);
146
+
padding: clamp(12px, 2vmin, 16px);
129
147
font: inherit;
130
-
/* 16px floor stops iOS from zooming into <input>. inherit above sets
131
-
* the font-family and weight; the font-size override here only raises
132
-
* the floor on phones, it doesn't override the clamp on desktop. */
148
+
/* 16px floor — iOS Safari auto-zooms into any text input rendered
149
+
smaller than that, which is obnoxious on phones. max() keeps the
150
+
desktop clamp behavior intact when --text-body ever exceeds 16. */
133
151
font-size: max(16px, var(--text-body));
134
152
border-radius: var(--radius);
135
153
outline: none;
136
154
transition: border-color 0.15s;
155
+
min-height: 44px;
137
156
}
138
-
.search-form input:focus { border-color: var(--fg-mute); }
139
-
.search-form input::placeholder { color: var(--fg-mute); }
140
-
.search-form button[type="submit"] {
141
-
padding: clamp(8px, 1.5vmin, 14px) clamp(14px, 2vmin, 20px);
157
+
.row input[type="text"]:focus,
158
+
#search-form input:focus { border-color: var(--accent-dim); }
159
+
.row input[type="text"]::placeholder,
160
+
#search-form input::placeholder { color: var(--fg-mute); }
161
+
162
+
/* share view: search input is locked to the shared query. visually
163
+
signal that the input is fixed — no focus outline, muted fill, text
164
+
is still selectable/copyable but not editable (readonly, not disabled). */
165
+
#search-form input[readonly] {
166
+
background: transparent;
167
+
border-style: dashed;
168
+
border-color: var(--border);
169
+
color: var(--fg-mute);
170
+
cursor: default;
171
+
}
172
+
#search-form input[readonly]:focus {
173
+
border-color: var(--border);
174
+
outline: none;
175
+
}
176
+
177
+
#signed-out .row button {
142
178
background: var(--accent-dim);
143
179
color: var(--fg);
144
-
border: 1px solid var(--accent-dim);
180
+
border-color: var(--accent-dim);
181
+
}
182
+
#signed-out .row button:hover {
183
+
background: var(--accent);
184
+
color: var(--bg);
185
+
border-color: var(--accent);
186
+
}
187
+
188
+
/* ------- typeahead ------- */
189
+
190
+
.typeahead {
191
+
position: relative;
192
+
flex: 1;
193
+
display: flex;
194
+
}
195
+
.typeahead input { flex: 1; }
196
+
197
+
.suggestions {
198
+
position: absolute;
199
+
top: calc(100% + 4px);
200
+
left: 0;
201
+
right: 0;
202
+
list-style: none;
203
+
background: var(--surface);
204
+
border: 1px solid var(--border);
145
205
border-radius: var(--radius);
146
-
font: inherit;
147
-
font-size: var(--text-body);
206
+
overflow: hidden;
207
+
z-index: 10;
208
+
max-height: 320px;
209
+
overflow-y: auto;
210
+
}
211
+
.suggestions li {
212
+
display: flex;
213
+
align-items: center;
214
+
gap: 10px;
215
+
padding: clamp(8px, 1.5vmin, 12px) clamp(10px, 2vmin, 14px);
148
216
cursor: pointer;
149
-
transition: background 0.15s;
217
+
font-size: var(--text-small);
218
+
border-bottom: 1px solid var(--border);
219
+
min-height: 44px;
220
+
}
221
+
.suggestions li:last-child { border-bottom: none; }
222
+
.suggestions li.active,
223
+
.suggestions li:hover { background: var(--surface-hover); }
224
+
.suggestions img,
225
+
.suggestions .avatar-placeholder {
226
+
width: 24px;
227
+
height: 24px;
228
+
border-radius: 50%;
229
+
background: var(--border);
230
+
flex-shrink: 0;
231
+
object-fit: cover;
232
+
}
233
+
.suggestions .handle { color: var(--fg); }
234
+
.suggestions .display { color: var(--fg-mute); }
235
+
236
+
/* ------- status / progress ------- */
237
+
238
+
.status {
239
+
font-size: var(--text-small);
240
+
color: var(--fg-mute);
241
+
margin-bottom: var(--gap);
242
+
padding: clamp(10px, 1.8vmin, 14px);
243
+
background: var(--surface);
244
+
border: 1px solid var(--border);
245
+
border-radius: var(--radius);
150
246
}
151
-
.search-form button:hover { background: var(--accent); color: var(--bg); }
247
+
.status.error { color: var(--danger); border-color: var(--danger-dim); }
152
248
153
-
/* ------- progress ------- */
154
-
.progress-wrap {
155
-
margin-top: clamp(12px, 2vmin, 20px);
156
-
width: 100%;
249
+
.progress {
250
+
margin-bottom: var(--gap);
251
+
padding: clamp(12px, 2vmin, 16px);
252
+
background: var(--surface);
253
+
border: 1px solid var(--border);
254
+
border-radius: var(--radius);
157
255
}
158
256
.progress-bar {
159
-
height: 3px;
257
+
height: 4px;
160
258
background: var(--border);
161
259
border-radius: 2px;
162
260
overflow: hidden;
163
-
margin-bottom: clamp(6px, 1vmin, 10px);
261
+
margin-bottom: 10px;
164
262
}
165
263
.progress-fill {
166
264
height: 100%;
167
-
width: 0%;
168
265
background: var(--accent);
169
-
transition: width 0.3s ease;
266
+
width: 0%;
267
+
transition: width 0.4s ease-out;
268
+
position: relative;
269
+
}
270
+
.progress-fill::after {
271
+
content: "";
272
+
position: absolute;
273
+
inset: 0;
274
+
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
275
+
animation: shimmer 1.4s linear infinite;
276
+
}
277
+
@keyframes shimmer {
278
+
0% { transform: translateX(-100%); }
279
+
100% { transform: translateX(100%); }
170
280
}
171
281
.progress-meta {
172
282
display: flex;
173
283
justify-content: space-between;
284
+
gap: var(--gap);
174
285
font-size: var(--text-small);
175
-
color: var(--fg-mute);
286
+
margin-bottom: 6px;
287
+
font-variant-numeric: tabular-nums;
288
+
flex-wrap: wrap;
176
289
}
177
290
.progress-flavor {
178
291
font-size: var(--text-small);
···
204
317
}
205
318
.text-btn-danger:hover { color: var(--fg); }
206
319
320
+
/* ------- pack menu (single-disclosure popover) -------
321
+
*
322
+
* the trigger is a real pill button that always says "search index"
323
+
* plus its current state ("saved" / "not saved" / "local only"). the
324
+
* subject is explicit so users don't have to wonder "saved what?".
325
+
* clicking the pill opens a popover with every action you can take
326
+
* on the index (view on PDS, save, delete, share-this-search).
327
+
*
328
+
* visual weight: the pill has a visible border, padding, and a chevron
329
+
* that flips when the popover is open, so it's obviously clickable —
330
+
* an earlier iteration used muted text with a 0.75em chevron and was
331
+
* borderline invisible.
332
+
*/
207
333
/* ------- pack menu (inline disclosure) ------- */
208
334
.pack-menu {
209
335
position: relative;
···
232
358
position: absolute;
233
359
right: 0;
234
360
top: calc(100% + 8px);
235
-
min-width: 20rem;
236
-
max-width: min(28rem, calc(100vw - 32px));
361
+
min-width: 17rem;
237
362
padding: 14px 16px;
238
363
background: var(--bg);
239
364
border: 1px solid var(--border);
···
255
380
padding: 4px 0;
256
381
font-size: var(--text-small);
257
382
}
383
+
/* on very narrow screens pin the popover to the viewport so it doesn't
384
+
* clip off the right edge of the meta line */
258
385
@media (max-width: 480px) {
259
386
.pack-menu-panel {
260
387
right: auto;
261
388
left: 0;
262
-
min-width: min(18rem, calc(100vw - 32px));
389
+
min-width: min(17rem, calc(100vw - 32px));
263
390
}
264
391
}
265
392
···
291
418
#share-modal #share-copy:hover {
292
419
background: var(--accent);
293
420
color: var(--bg);
421
+
border-color: var(--accent);
294
422
}
295
423
296
-
/* ------- status banner ------- */
297
-
.status {
298
-
margin-top: clamp(8px, 1vmin, 12px);
299
-
padding: 8px 12px;
300
-
font-size: var(--text-small);
301
-
border-radius: var(--radius);
302
-
text-align: center;
303
-
background: var(--bg-2);
304
-
border: 1px solid var(--border);
424
+
/* ------- results ------- */
425
+
426
+
.results {
427
+
display: flex;
428
+
flex-direction: column;
429
+
gap: 6px;
305
430
}
306
-
.status.error { border-color: var(--danger-dim); color: var(--danger); }
307
431
308
-
/* ------- result cards ------- */
309
-
.results { margin-top: clamp(12px, 2vmin, 20px); }
310
-
.result-card {
311
-
background: var(--bg-2);
432
+
.result {
433
+
background: var(--surface);
312
434
border: 1px solid var(--border);
313
435
border-radius: var(--radius);
314
-
padding: clamp(12px, 2vmin, 16px);
315
-
margin-bottom: clamp(8px, 1vmin, 12px);
316
-
transition: border-color 0.15s;
436
+
padding: clamp(10px, 1.8vmin, 14px);
437
+
display: grid;
438
+
grid-template-columns: 1fr auto;
439
+
gap: 4px 12px;
440
+
transition: background 0.1s, border-color 0.1s;
317
441
}
318
-
.result-card:hover { border-color: var(--fg-mute); }
319
-
.result-header {
442
+
.result:hover {
443
+
background: var(--surface-hover);
444
+
border-color: var(--fg-mute);
445
+
}
446
+
447
+
.result .head {
448
+
grid-column: 1;
320
449
display: flex;
321
-
justify-content: space-between;
322
450
align-items: baseline;
323
-
margin-bottom: 4px;
324
-
gap: 8px;
451
+
gap: 10px;
452
+
min-width: 0;
325
453
}
326
-
.result-icon {
327
-
width: 20px;
328
-
height: 20px;
329
-
border-radius: 3px;
330
-
vertical-align: middle;
331
-
margin-right: 6px;
454
+
455
+
.result .collection-chip {
456
+
display: inline-flex;
457
+
align-items: center;
458
+
gap: 6px;
459
+
min-width: 0;
332
460
}
333
-
.result-collection {
461
+
.result .collection-name {
334
462
font-size: var(--text-small);
335
463
color: var(--fg-mute);
464
+
white-space: nowrap;
465
+
overflow: hidden;
466
+
text-overflow: ellipsis;
336
467
}
337
-
.result-date {
468
+
.result .collection-logo-slot {
469
+
width: 14px;
470
+
height: 14px;
471
+
border-radius: 3px;
472
+
background: var(--border);
473
+
flex-shrink: 0;
474
+
display: inline-flex;
475
+
overflow: hidden;
476
+
}
477
+
.result .collection-logo {
478
+
width: 100%;
479
+
height: 100%;
480
+
object-fit: cover;
481
+
}
482
+
483
+
.result .date {
338
484
font-size: var(--text-small);
339
485
color: var(--fg-mute);
486
+
margin-left: auto;
340
487
white-space: nowrap;
341
488
}
342
-
.result-body {
489
+
490
+
.result .body {
491
+
grid-column: 1;
343
492
font-size: var(--text-body);
344
-
color: var(--fg);
345
-
margin-top: 2px;
493
+
line-height: 1.45;
494
+
display: -webkit-box;
495
+
-webkit-line-clamp: 2;
496
+
-webkit-box-orient: vertical;
497
+
overflow: hidden;
498
+
word-break: break-word;
346
499
}
347
-
.result-link {
500
+
501
+
.result .body-second {
502
+
grid-column: 1;
348
503
font-size: var(--text-small);
349
504
color: var(--fg-mute);
350
-
display: inline-block;
351
-
margin-top: 4px;
505
+
line-height: 1.45;
506
+
display: -webkit-box;
507
+
-webkit-line-clamp: 2;
508
+
-webkit-box-orient: vertical;
509
+
overflow: hidden;
510
+
word-break: break-word;
352
511
}
353
512
354
-
/* ------- modal ------- */
513
+
.result .actions {
514
+
grid-column: 2;
515
+
grid-row: 1 / span 3;
516
+
display: flex;
517
+
align-items: start;
518
+
}
519
+
.result .pdsls-link {
520
+
color: var(--fg-mute);
521
+
font-size: var(--text-small);
522
+
padding: 4px 8px;
523
+
border-radius: 4px;
524
+
border: 1px solid transparent;
525
+
}
526
+
.result .pdsls-link:hover {
527
+
color: var(--accent);
528
+
border-color: var(--border);
529
+
}
530
+
531
+
/* ------- about modal ------- */
532
+
355
533
.overlay {
356
534
position: fixed;
357
535
inset: 0;
358
536
background: rgba(0, 0, 0, 0.6);
359
-
z-index: 50;
537
+
z-index: 100;
360
538
}
539
+
361
540
.modal {
362
541
position: fixed;
363
542
top: 50%;
364
543
left: 50%;
365
544
transform: translate(-50%, -50%);
366
-
background: var(--bg-2);
545
+
background: var(--surface);
367
546
border: 1px solid var(--border);
368
547
border-radius: var(--radius);
369
-
padding: clamp(20px, 3vmin, 30px);
370
-
z-index: 51;
371
-
max-width: 500px;
372
-
width: calc(100% - 32px);
373
-
max-height: calc(100vh - 40px);
374
-
overflow-y: auto;
548
+
padding: clamp(20px, 4vmin, 32px);
549
+
max-width: min(92vw, 460px);
550
+
z-index: 101;
375
551
}
376
-
.modal h2 { font-size: var(--hero-size); margin-bottom: 12px; }
377
-
.modal p { color: var(--fg-mute); font-size: var(--text-small); margin-bottom: 8px; }
378
-
.about-links { list-style: none; margin-top: 12px; }
379
-
.about-links li { margin-bottom: 6px; }
380
-
.about-links a { font-size: var(--text-small); }
381
-
#about-close {
382
-
display: block;
383
-
margin-top: 16px;
384
-
width: 100%;
385
-
padding: 8px;
386
-
border: 1px solid var(--border);
387
-
border-radius: var(--radius);
552
+
.modal h2 {
553
+
font-size: var(--text-h);
554
+
margin-bottom: clamp(10px, 2vmin, 14px);
555
+
color: var(--fg);
556
+
font-weight: 500;
388
557
}
389
-
390
-
/* ------- footer ------- */
391
-
footer {
392
-
text-align: center;
393
-
padding: clamp(16px, 3vmin, 24px);
558
+
.modal p {
394
559
font-size: var(--text-small);
395
-
color: var(--fg-mute);
560
+
line-height: 1.6;
561
+
color: var(--fg);
562
+
margin-bottom: clamp(8px, 1.5vmin, 12px);
563
+
}
564
+
.modal p:last-of-type { color: var(--fg-mute); }
565
+
.modal ul.about-links {
566
+
list-style: none;
567
+
margin: clamp(14px, 2.5vmin, 20px) 0;
568
+
display: flex;
569
+
flex-direction: column;
570
+
gap: 6px;
571
+
}
572
+
.modal ul.about-links a { font-size: var(--text-small); }
573
+
.modal button {
574
+
margin-top: clamp(10px, 2vmin, 14px);
575
+
font-size: var(--text-small);
576
+
}
577
+
578
+
/* ------- mobile layout tweaks ------- */
579
+
580
+
@media (max-width: 520px) {
581
+
header { gap: 8px; }
582
+
.stats { flex-basis: 100%; order: 5; margin-left: 0; }
583
+
#signed-out .row { flex-direction: column; }
584
+
#signed-out .row button { width: 100%; }
585
+
.pack-actions-row { flex-direction: column; align-items: stretch; }
586
+
.pack-btn { width: 100%; }
587
+
.result {
588
+
grid-template-columns: 1fr;
589
+
}
590
+
.result .actions {
591
+
grid-column: 1;
592
+
grid-row: auto;
593
+
justify-content: flex-end;
594
+
}
396
595
}