internal/ui/assets/style.css
1
:root {
2
--paper: #E9EAEE;
3
--surface: #F4F5F7;
4
--surface-2: #DFE1E7;
5
--rule: #C9CCD6;
6
--rule-soft: #D8DAE2;
7
--ink: #1B1D26;
8
--ink-soft: #4A4E5E;
9
--ink-faint: #7C8194;
10
--accent: #4A56C4;
12
--ok: #0E7C5F;
13
--ok-bg: #D3EDE4;
14
--moved: #35609E;
15
--moved-bg: #D6E3F4;
16
--ambiguous: #6B4FA1;
17
--ambiguous-bg: #E6DCF4;
18
--drifted: #A85708;
19
--drifted-bg: #F7E3C9;
20
--orphaned: #B03429;
21
--orphaned-bg: #F6D8D5;
23
--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
24
--serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
25
--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
27
--gutter: 3.25rem;
28
--rail: 17rem;
29
--gloss: 23rem;
30
}
32
@media (prefers-color-scheme: dark) {
33
:root {
34
--paper: #131519;
35
--surface: #1A1D23;
36
--surface-2: #23262E;
37
--rule: #333846;
38
--rule-soft: #272B34;
39
--ink: #E4E6EC;
40
--ink-soft: #A8AEBF;
41
--ink-faint: #6E7488;
42
--accent: #8F99EE;
43
--ok: #3FD3A3;
44
--ok-bg: #10312A;
45
--moved: #7FAAEE;
46
--moved-bg: #16243A;
47
--ambiguous: #BA94E8;
48
--ambiguous-bg: #2B1D3D;
49
--drifted: #EDA34C;
50
--drifted-bg: #34240F;
51
--orphaned: #F0796F;
52
--orphaned-bg: #38191A;
53
}
54
}
56
:root[data-theme="dark"] {
57
--paper: #131519;
58
--surface: #1A1D23;
59
--surface-2: #23262E;
60
--rule: #333846;
61
--rule-soft: #272B34;
62
--ink: #E4E6EC;
63
--ink-soft: #A8AEBF;
64
--ink-faint: #6E7488;
65
--accent: #8F99EE;
66
--ok: #3FD3A3;
67
--ok-bg: #10312A;
68
--moved: #7FAAEE;
69
--moved-bg: #16243A;
70
--ambiguous: #BA94E8;
71
--ambiguous-bg: #2B1D3D;
72
--drifted: #EDA34C;
73
--drifted-bg: #34240F;
74
--orphaned: #F0796F;
75
--orphaned-bg: #38191A;
76
}
78
:root[data-theme="light"] {
79
--paper: #E9EAEE;
80
--surface: #F4F5F7;
81
--surface-2: #DFE1E7;
82
--rule: #C9CCD6;
83
--rule-soft: #D8DAE2;
84
--ink: #1B1D26;
85
--ink-soft: #4A4E5E;
86
--ink-faint: #7C8194;
87
--accent: #4A56C4;
88
--ok: #0E7C5F;
89
--ok-bg: #D3EDE4;
90
--moved: #35609E;
91
--moved-bg: #D6E3F4;
92
--ambiguous: #6B4FA1;
93
--ambiguous-bg: #E6DCF4;
94
--drifted: #A85708;
95
--drifted-bg: #F7E3C9;
96
--orphaned: #B03429;
97
--orphaned-bg: #F6D8D5;
98
}
100
* { box-sizing: border-box; }
102
body {
103
margin: 0;
104
background: var(--paper);
105
color: var(--ink);
106
font-family: var(--sans);
107
font-size: 15px;
108
line-height: 1.5;
109
-webkit-font-smoothing: antialiased;
110
}
112
.snapshot {
113
display: flex;
114
flex-wrap: wrap;
115
align-items: baseline;
116
gap: .35rem .8rem;
117
padding: .55rem 1.25rem;
118
background: var(--surface-2);
119
border-bottom: 1px solid var(--rule);
120
font-size: .76rem;
121
color: var(--ink-soft);
122
}
123
.snapshot .stamp {
124
flex: none;
125
text-transform: uppercase;
126
letter-spacing: .08em;
127
font-size: .68rem;
128
color: var(--ink-faint);
129
}
130
.snapshot .said { min-width: 0; }
131
.snapshot code, .snapshot a { font-family: var(--mono); color: var(--accent); }
132
.snapshot .stamp code { letter-spacing: 0; font-size: .76rem; }
134
.write-result, .write-warning {
135
margin: 1rem var(--gutter) 0;
136
padding: .55rem .75rem;
137
border: 1px solid var(--rule);
138
background: var(--surface);
139
font-size: .82rem;
140
}
141
.write-warning { color: var(--drifted); border-color: var(--drifted); }
142
.write-card {
143
margin: 1rem var(--gutter);
144
padding: .7rem .85rem;
145
border: 1px solid var(--rule);
146
background: var(--surface);
147
}
148
.write-card summary { cursor: pointer; font-weight: 650; }
149
.write-card form { display: grid; gap: .7rem; margin-top: .8rem; }
150
.write-card label { display: grid; gap: .25rem; font-size: .76rem; color: var(--ink-soft); }
151
.write-card input, .write-card select, .write-card textarea, .write-card button {
152
width: 100%;
153
padding: .45rem .55rem;
154
border: 1px solid var(--rule);
155
background: var(--paper);
156
color: var(--ink);
157
font: inherit;
158
}
159
.write-card button { width: auto; justify-self: start; cursor: pointer; color: var(--accent); }
161
.app {
162
display: grid;
163
grid-template-columns: var(--rail) minmax(0, 1fr);
164
min-height: 100vh;
165
}
167
.rail {
168
background: var(--surface);
169
border-right: 1px solid var(--rule);
170
padding: 1.1rem 0 .8rem;
171
max-height: 100vh;
172
position: sticky;
173
top: 0;
174
display: flex;
175
flex-direction: column;
176
}
178
.brand {
179
display: flex;
180
align-items: center;
181
justify-content: space-between;
182
gap: .5rem;
183
padding: 0 1.1rem .9rem;
184
}
185
.brand .mark {
186
display: flex;
187
align-items: center;
188
gap: .45rem;
189
min-width: 0;
190
font-family: var(--mono);
191
font-size: 1.02rem;
192
letter-spacing: -.02em;
193
font-weight: 700;
194
color: var(--ink);
195
text-decoration: none;
196
overflow: hidden;
197
text-overflow: ellipsis;
198
}
199
.brand-mark { width: 1.45rem; height: 1.45rem; flex: none; }
200
.brand-label { overflow: hidden; text-overflow: ellipsis; }
201
.brand .mark:hover { color: var(--accent); }
202
.tally-count { font-size: .7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; }
204
.switcher {
205
display: flex;
206
align-items: center;
207
gap: .5rem;
208
padding: .25rem .35rem .25rem .65rem;
209
background: var(--paper);
210
border: 1px solid var(--rule);
211
border-radius: .55rem;
212
box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
213
}
214
.switcher label {
215
display: inline;
216
font-size: .66rem;
217
text-transform: uppercase;
218
letter-spacing: .09em;
219
color: var(--ink-faint);
220
}
221
.switcher select {
222
max-width: 15rem;
223
font: inherit;
224
font-size: .82rem;
225
font-family: var(--mono);
226
color: var(--ink);
227
background: var(--surface);
228
border: 0;
229
border-radius: .35rem;
230
padding: .28rem 1.65rem .28rem .5rem;
231
}
232
.switcher select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
233
.switcher-plain { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .82rem; }
234
.switcher-plain a { color: var(--accent); font-family: var(--mono); }
236
.pills {
237
display: flex;
238
flex-wrap: wrap;
239
gap: .3rem;
240
padding: 0 1.1rem .9rem;
241
}
243
.pill {
244
display: inline-flex;
245
align-items: center;
246
padding: .18rem .5rem;
247
border-radius: 2px;
248
font-size: .73rem;
249
font-weight: 600;
250
font-variant-numeric: tabular-nums;
251
}
252
.pill.ok { background: var(--ok-bg); color: var(--ok); }
253
.pill.moved { background: var(--moved-bg); color: var(--moved); }
254
.pill.ambiguous { background: var(--ambiguous-bg); color: var(--ambiguous); }
255
.pill.drifted { background: var(--drifted-bg); color: var(--drifted); }
256
.pill.orphaned { background: var(--orphaned-bg); color: var(--orphaned); }
258
.tree { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 1rem; }
260
.source-link {
261
display: block;
262
margin: .7rem 1.1rem 0;
263
padding-top: .75rem;
264
border-top: 1px solid var(--rule-soft);
265
color: var(--ink-faint);
266
font-family: var(--mono);
267
font-size: .68rem;
268
text-decoration: none;
269
}
270
.source-link:hover { color: var(--accent); }
271
.source-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
273
.dir > summary {
274
display: flex;
275
align-items: center;
276
gap: .45rem;
277
padding: .28rem 1.1rem;
278
font-family: var(--mono);
279
font-size: .78rem;
280
color: var(--ink-soft);
281
cursor: pointer;
282
list-style: none;
283
user-select: none;
284
}
285
.dir > summary::-webkit-details-marker { display: none; }
286
.dir > summary::before {
287
content: "";
288
flex: none;
289
width: 0;
290
height: 0;
291
border-left: 4px solid currentColor;
292
border-top: 3.5px solid transparent;
293
border-bottom: 3.5px solid transparent;
294
opacity: .55;
295
transition: transform .12s ease;
296
}
297
.dir[open] > summary::before { transform: rotate(90deg); }
298
.dir > summary:hover { background: var(--surface-2); color: var(--ink); }
299
.dir > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
300
.dir-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
302
.dir-body {
303
margin-left: 1.55rem;
304
border-left: 1px solid var(--rule-soft);
305
}
306
.dir-body > .dir > summary,
307
.dir-body > .file { padding-left: .65rem; }
309
.file {
310
display: flex;
311
align-items: center;
312
gap: .45rem;
313
padding: .26rem 1.1rem .26rem .65rem;
314
font-family: var(--mono);
315
font-size: .78rem;
316
color: var(--ink-soft);
317
text-decoration: none;
318
border-left: 2px solid transparent;
319
margin-left: -1px;
320
}
321
.file:hover { background: var(--surface-2); color: var(--ink); }
322
.file:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
323
.file[aria-current="page"] {
324
background: var(--surface-2);
325
color: var(--ink);
326
border-left-color: var(--accent);
327
font-weight: 600;
328
}
329
.file .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
330
.count { font-size: .7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; }
332
.dot { width: .45rem; height: .45rem; border-radius: 50%; flex: none; }
333
.dot.ok { background: var(--ok); }
334
.dot.moved { background: var(--moved); }
335
.dot.ambiguous { background: var(--ambiguous); }
336
.dot.drifted { background: var(--drifted); }
337
.dot.orphaned { background: var(--orphaned); }
339
.panel { min-width: 0; display: flex; flex-direction: column; }
341
.panel-head {
342
display: flex;
343
flex-wrap: wrap;
344
align-items: center;
345
gap: .6rem 1rem;
346
padding: .95rem 1.5rem;
347
border-bottom: 1px solid var(--rule);
348
background: var(--surface);
349
position: sticky;
350
top: 0;
351
z-index: 3;
352
}
353
.panel-head h1 {
354
margin: 0;
355
font-family: var(--mono);
356
font-size: .95rem;
357
font-weight: 600;
358
letter-spacing: -.01em;
359
min-width: 0;
360
overflow-wrap: anywhere;
361
flex: 1;
362
}
364
.panel-actions { margin-left: auto; display: flex; align-items: center; gap: .65rem; }
366
.search-trigger {
367
display: inline-flex;
368
align-items: center;
369
gap: .9rem;
370
padding: .38rem .45rem .38rem .65rem;
371
border: 1px solid var(--rule);
372
border-radius: .55rem;
373
background: var(--paper);
374
color: var(--ink-soft);
375
font: inherit;
376
font-size: .76rem;
377
cursor: pointer;
378
}
379
.search-trigger:hover { border-color: var(--accent); color: var(--ink); }
380
.search-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
381
.search-trigger kbd, .search-help kbd {
382
padding: .1rem .32rem;
383
border: 1px solid var(--rule);
384
border-bottom-width: 2px;
385
border-radius: .25rem;
386
background: var(--surface);
387
color: var(--ink-faint);
388
font-family: var(--mono);
389
font-size: .64rem;
390
}
392
.search-dialog {
393
width: min(42rem, calc(100vw - 2rem));
394
max-height: min(42rem, calc(100vh - 3rem));
395
padding: 0;
396
border: 1px solid var(--rule);
397
border-radius: .8rem;
398
background: var(--surface);
399
color: var(--ink);
400
box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .3);
401
}
402
.search-dialog::backdrop { background: rgba(13, 15, 22, .55); backdrop-filter: blur(3px); }
403
.search-dialog[open] { animation: search-in .12s ease-out; }
404
.search-surface { display: flex; flex-direction: column; max-height: inherit; }
405
.search-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .75rem; }
406
.search-head h2 { margin: 0; font-family: var(--mono); font-size: .96rem; }
407
.search-head p { margin: .15rem 0 0; color: var(--ink-faint); font-size: .74rem; }
408
.search-close { border: 0; background: transparent; color: var(--ink-faint); font: .68rem var(--mono); cursor: pointer; padding: .25rem; }
409
.search-close:hover { color: var(--ink); }
410
.search-box { display: flex; align-items: center; gap: .5rem; margin: 0 1rem .75rem; padding: .55rem .7rem; border: 1px solid var(--accent); border-radius: .5rem; background: var(--paper); }
411
.search-icon { color: var(--accent); font-size: 1.15rem; }
412
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: .9rem var(--sans); }
413
.search-results { min-height: 4rem; overflow-y: auto; border-top: 1px solid var(--rule-soft); }
414
.search-result { display: grid; grid-template-columns: .55rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem 1rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
415
.search-result:hover, .search-result.selected { background: var(--surface-2); }
416
.search-result:focus { outline: 0; }
417
.search-result-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: .78rem var(--mono); }
418
.search-result-meta { color: var(--ink-faint); font-size: .68rem; }
419
.search-empty { margin: 0; padding: 1.25rem 1rem; color: var(--ink-faint); text-align: center; font-size: .8rem; }
420
.search-help { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem; padding: .55rem 1rem; color: var(--ink-faint); font-size: .65rem; }
421
.search-help span { display: inline-flex; align-items: center; gap: .25rem; }
423
@keyframes search-in { from { opacity: 0; transform: translateY(-.5rem) scale(.985); } }
425
.drawer-state, .drawer-toggle { display: none; }
427
.detached {
428
padding: 1rem 1.5rem 0;
429
max-width: 46rem;
430
}
431
.detached-head {
432
font-size: .72rem;
433
text-transform: uppercase;
434
letter-spacing: .09em;
435
color: var(--ink-faint);
436
margin-bottom: .5rem;
437
}
439
.reading {
440
display: grid;
441
grid-template-columns: minmax(0, 1fr) var(--gloss);
442
align-items: start;
443
gap: 0 1.5rem;
444
padding: 1.1rem 1.5rem 6rem 0;
445
}
447
.code-scroll { overflow-x: auto; min-width: 0; }
448
.code { min-width: max-content; }
450
.row {
451
display: grid;
452
grid-template-columns: var(--gutter) minmax(0, 1fr);
453
align-items: start;
454
column-gap: .75rem;
455
scroll-margin-top: 4rem;
456
}
457
.row.marked { background: color-mix(in srgb, var(--accent) 5%, transparent); }
458
.row.marked.ok { --marker: var(--ok); }
459
.row.marked.moved { --marker: var(--moved); }
460
.row.marked.ambiguous { --marker: var(--ambiguous); }
461
.row.marked.drifted { --marker: var(--drifted); }
462
.row.marked.orphaned { --marker: var(--orphaned); }
463
.row.lit, .row:target { background: color-mix(in srgb, var(--accent) 12%, transparent); }
465
.ln {
466
font-family: var(--mono);
467
font-size: .74rem;
468
line-height: 1.65;
469
color: var(--ink-faint);
470
text-align: right;
471
padding: .08rem .5rem .08rem 0;
472
font-variant-numeric: tabular-nums;
473
user-select: none;
474
position: relative;
475
text-decoration: none;
476
}
477
.ln:hover { color: var(--accent); }
478
.row.marked .ln { color: var(--ink); font-weight: 600; }
479
.row.marked .ln::before {
480
content: "";
481
position: absolute;
482
left: .55rem;
483
top: .38rem;
484
width: 3px;
485
height: .95em;
486
border-radius: 1px;
487
background: var(--marker);
488
}
490
.src {
491
display: block;
492
font-family: var(--mono);
493
font-size: .82rem;
494
line-height: 1.65;
495
white-space: pre;
496
padding: .08rem 0;
497
tab-size: 4;
498
}
499
.src.void { color: var(--ink-faint); }
501
.gloss {
502
min-width: 0;
503
position: relative;
504
display: flex;
505
flex-direction: column;
506
gap: .75rem;
507
}
508
.gloss.aligned { gap: 0; display: block; }
510
.note {
511
position: relative;
512
background: var(--surface);
513
border: 1px solid var(--rule-soft);
514
border-left: 2px solid var(--note-marker);
515
border-radius: 2px;
516
padding: .6rem .8rem .55rem;
517
}
518
.gloss.aligned .note { position: absolute; width: 100%; }
519
.note.ok { --note-marker: var(--ok); }
520
.note.moved { --note-marker: var(--moved); }
521
.note.ambiguous { --note-marker: var(--ambiguous); }
522
.note.drifted { --note-marker: var(--drifted); }
523
.note.orphaned { --note-marker: var(--orphaned); }
524
.note.lit { border-color: var(--accent); border-left-color: var(--note-marker); }
526
.note-head {
527
display: flex;
528
align-items: center;
529
gap: .45rem;
530
margin-bottom: .4rem;
531
font-size: .68rem;
532
text-transform: uppercase;
533
letter-spacing: .08em;
534
color: var(--ink-faint);
535
}
536
.kind { color: var(--note-marker); font-weight: 700; }
537
.note-head .sep { opacity: .45; }
538
.note-head .at {
539
margin-left: auto;
540
font-family: var(--mono);
541
color: var(--ink-faint);
542
text-decoration: none;
543
letter-spacing: 0;
544
}
545
.note-head .at:hover { color: var(--accent); }
547
.body {
548
font-family: var(--serif);
549
font-size: .91rem;
550
line-height: 1.5;
551
margin: 0 0 .5rem;
552
}
553
.body:last-of-type { margin-bottom: 0; }
554
.note.stale .body { color: var(--ink-soft); }
556
.note-foot {
557
display: flex;
558
justify-content: space-between;
559
gap: .5rem;
560
margin-top: .5rem;
561
font-family: var(--mono);
562
font-size: .62rem;
563
color: var(--ink-faint);
564
}
565
.note-id { overflow: hidden; text-overflow: ellipsis; }
567
.was {
568
font-family: var(--mono);
569
font-size: .73rem;
570
color: var(--drifted);
571
background: var(--drifted-bg);
572
padding: .3rem .45rem;
573
margin-bottom: .5rem;
574
white-space: pre-wrap;
575
word-break: break-all;
576
}
577
.was .label {
578
display: block;
579
font-family: var(--sans);
580
font-size: .62rem;
581
text-transform: uppercase;
582
letter-spacing: .08em;
583
opacity: .85;
584
margin-bottom: .2rem;
585
}
587
.warn {
588
margin-top: .5rem;
589
font-size: .71rem;
590
line-height: 1.45;
591
color: var(--drifted);
592
font-weight: 600;
593
}
594
.note.orphaned .warn { color: var(--orphaned); }
596
.hollow { max-width: 40rem; margin: 6rem auto; padding: 0 1.5rem; }
597
.hollow h1 { font-family: var(--mono); font-size: 1.1rem; }
598
.hollow pre,
599
.hollow-inline code {
600
font-family: var(--mono);
601
font-size: .8rem;
602
background: var(--surface);
603
border: 1px solid var(--rule-soft);
604
padding: .7rem .8rem;
605
overflow-x: auto;
606
}
607
.hollow-inline { padding: 1.5rem; color: var(--ink-soft); }
608
.hollow-inline code { padding: .1rem .3rem; }
610
@media (max-width: 900px) {
611
.app { grid-template-columns: 1fr; }
613
.rail {
614
position: fixed;
615
z-index: 5;
616
inset: 0 auto 0 0;
617
width: min(85vw, var(--rail));
618
transform: translateX(-100%);
619
transition: transform .18s ease;
620
box-shadow: 0 0 2rem rgba(0, 0, 0, .28);
621
max-height: none;
622
}
623
.drawer-state:checked ~ .rail { transform: translateX(0); }
625
.drawer-toggle {
626
display: inline-flex;
627
align-items: center;
628
flex: none;
629
padding: .2rem .55rem;
630
border: 1px solid var(--rule);
631
border-radius: 3px;
632
font-size: .74rem;
633
color: var(--ink-soft);
634
cursor: pointer;
635
background: var(--paper);
636
}
637
.drawer-state:checked ~ .panel .drawer-toggle {
638
background: var(--accent);
639
border-color: var(--accent);
640
color: var(--paper);
641
}
643
.panel-head { padding: .75rem; }
644
.panel-actions { gap: .35rem; }
645
.search-trigger span { display: none; }
646
.search-trigger { gap: 0; padding: .33rem; }
647
.switcher { padding-left: .4rem; }
648
.switcher label { display: none; }
649
.switcher select { max-width: 8.5rem; }
651
.reading { grid-template-columns: minmax(0, 1fr); padding: .75rem 0 4rem; }
652
.code-scroll { padding: 0 .75rem; }
653
.gloss { padding: 0 .75rem; margin-top: .9rem; }
654
.gloss::before {
655
content: "Annotations";
656
font-size: .68rem;
657
text-transform: uppercase;
658
letter-spacing: .09em;
659
color: var(--ink-faint);
660
}
661
.detached { padding: 1rem .75rem 0; }
662
}
664
@media (prefers-reduced-motion: reduce) {
665
* { transition: none !important; }
666
}