agentgui 1.0.1000 → 1.0.1001
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,39 +2,58 @@
|
|
|
2
2
|
/* colors_and_type.css */
|
|
3
3
|
/* ============================================================
|
|
4
4
|
247420 design system — colors + type
|
|
5
|
-
|
|
5
|
+
"Acid Editorial": confident display type, ink-on-paper with one
|
|
6
|
+
electric lead, print texture over glow. Scope-prefixed at build time.
|
|
6
7
|
Source-of-truth tokens. Component sheet lives in app-shell.css.
|
|
7
8
|
============================================================ */
|
|
8
9
|
|
|
9
|
-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
|
|
10
|
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
|
|
11
|
+
|
|
12
|
+
/* Metric-matched fallback for the display face. While Space Grotesk loads,
|
|
13
|
+
text falls back to Arial with size-adjust tuned to its cap-height so the
|
|
14
|
+
oversized hero does not reflow on swap. Referenced first in --ff-display via
|
|
15
|
+
the 'Space Grotesk' family; this only kicks in for the fallback glyphs. */
|
|
16
|
+
@font-face {
|
|
17
|
+
font-family: 'Space Grotesk Fallback';
|
|
18
|
+
src: local('Arial');
|
|
19
|
+
size-adjust: 96%;
|
|
20
|
+
ascent-override: 95%;
|
|
21
|
+
descent-override: 24%;
|
|
22
|
+
}
|
|
10
23
|
|
|
11
24
|
.ds-247420 {
|
|
12
25
|
/* Tree view indentation tokens */
|
|
13
26
|
--tree-indent: 12px;
|
|
14
27
|
--tree-base-indent: 6px;
|
|
15
28
|
|
|
16
|
-
/* Paper / Ink —
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
--paper
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--ink
|
|
29
|
+
/* Paper / Ink — warm newsprint paper against near-black ink. The warmer
|
|
30
|
+
paper + deeper ink widen the tonal range so the electric lead reads as
|
|
31
|
+
printed, not glowing. */
|
|
32
|
+
--paper: #F4F1E9;
|
|
33
|
+
--paper-2: #EAE6DA;
|
|
34
|
+
--paper-3: #DCD7C7;
|
|
35
|
+
--ink: #0E0E12;
|
|
36
|
+
--ink-2: #1F1F26;
|
|
37
|
+
--ink-3: #52525A; /* WCAG AAA on --paper (~7.1:1) */
|
|
23
38
|
--ink-3-dark: #464650; /* dark theme bg-3 (tier-3 surface) */
|
|
24
39
|
--paper-3-dark: #B4B4BC; /* dark theme fg-3 (tier-3 text) */
|
|
25
40
|
|
|
26
|
-
/* Lore palette
|
|
41
|
+
/* Lore palette. --acid is the electric lead — a printed-ink lime that sits
|
|
42
|
+
forward of the heritage green; green/purple/mascot demote to print-ink
|
|
43
|
+
category roles. */
|
|
44
|
+
--acid: #B6FF1B;
|
|
45
|
+
--acid-deep: #4E7A00; /* AA text tone of the lead on paper */
|
|
27
46
|
--green: #247420;
|
|
28
47
|
--green-2: #3A9A34;
|
|
29
48
|
--green-deep: #133F10;
|
|
30
|
-
--green-tint: #
|
|
31
|
-
--purple: #
|
|
49
|
+
--green-tint: #D7E4C2;
|
|
50
|
+
--purple: #3A0140;
|
|
32
51
|
--purple-2: #7F18A4;
|
|
33
|
-
--purple-deep: #
|
|
34
|
-
--purple-tint: #
|
|
35
|
-
--mascot: #
|
|
52
|
+
--purple-deep: #220026;
|
|
53
|
+
--purple-tint: #E2CFE4;
|
|
54
|
+
--mascot: #FF2E84;
|
|
36
55
|
--mascot-2: #FF3CA7;
|
|
37
|
-
--mascot-tint: #
|
|
56
|
+
--mascot-tint: #F7CEDD;
|
|
38
57
|
--mascot-deep: #B81F63;
|
|
39
58
|
|
|
40
59
|
/* Signals */
|
|
@@ -66,10 +85,14 @@
|
|
|
66
85
|
--fg-2: var(--ink-2);
|
|
67
86
|
--fg-3: var(--ink-3);
|
|
68
87
|
|
|
69
|
-
--accent
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
--accent
|
|
88
|
+
/* The electric lead. --accent is the FILL (sits behind ink text); --accent-ink
|
|
89
|
+
is the readable TEXT tone for links/eyebrows/accents on paper (the lime
|
|
90
|
+
itself is too light for text). --accent-fg is what sits ON an --accent fill. */
|
|
91
|
+
--accent: var(--acid);
|
|
92
|
+
--accent-fg: var(--ink);
|
|
93
|
+
--accent-ink: var(--acid-deep);
|
|
94
|
+
--accent-bright: var(--acid); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */
|
|
95
|
+
--accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
|
|
73
96
|
|
|
74
97
|
/* On-color foregrounds — text/icons that sit ON a saturated fill (accent,
|
|
75
98
|
danger, category chips). Theme-driven so white-on-color never hard-codes
|
|
@@ -100,6 +123,7 @@
|
|
|
100
123
|
--panel-0: var(--bg);
|
|
101
124
|
--panel-1: var(--bg-2);
|
|
102
125
|
--panel-2: var(--bg-3);
|
|
126
|
+
--panel-hover: color-mix(in oklab, var(--fg) 4%, var(--panel-1));
|
|
103
127
|
--panel-3: color-mix(in oklab, var(--fg) 12%, transparent);
|
|
104
128
|
--panel-text: var(--fg);
|
|
105
129
|
--panel-text-2: var(--fg-2);
|
|
@@ -107,10 +131,12 @@
|
|
|
107
131
|
--panel-accent-2: var(--accent-bright, var(--accent));
|
|
108
132
|
--panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent);
|
|
109
133
|
|
|
110
|
-
/* Type —
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
134
|
+
/* Type — Space Grotesk carries display/headings (editorial grotesk with real
|
|
135
|
+
character), Inter carries body and UI, JetBrains carries code. The narrow
|
|
136
|
+
alias tracks the display face. size-adjust on the fallback keeps the
|
|
137
|
+
oversized hero from shifting while Space Grotesk loads. */
|
|
138
|
+
--ff-display: 'Space Grotesk', 'Space Grotesk Fallback', 'Inter', system-ui, sans-serif;
|
|
139
|
+
--ff-narrow: 'Space Grotesk', 'Space Grotesk Fallback', 'Inter', system-ui, sans-serif;
|
|
114
140
|
--ff-body: 'Inter', system-ui, sans-serif;
|
|
115
141
|
--ff-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
|
|
116
142
|
|
|
@@ -183,7 +209,23 @@
|
|
|
183
209
|
--dur-snap: 80ms;
|
|
184
210
|
--dur-base: 160ms;
|
|
185
211
|
--dur-slow: 280ms;
|
|
212
|
+
--dur-reveal: 560ms;
|
|
186
213
|
--ease: cubic-bezier(0.2, 0, 0, 1);
|
|
214
|
+
/* Physical tier — a slight overshoot that reads as a printed stamp landing,
|
|
215
|
+
used by presses and signature reveals (not by routine UI fades). */
|
|
216
|
+
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
217
|
+
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
218
|
+
|
|
219
|
+
/* Print texture — the signature surface treatment. --grain is a tiled
|
|
220
|
+
fractal-noise data-URI; --halftone is a dot screen. Both are opt-in via
|
|
221
|
+
.ds-grain / .ds-halftone utilities and tuned faint so type stays crisp. */
|
|
222
|
+
--grain-opacity: 0.05;
|
|
223
|
+
--grain-blend: multiply;
|
|
224
|
+
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
225
|
+
--halftone-size: 6px;
|
|
226
|
+
/* Offset-ink registration — the small print-mark offset used on editorial
|
|
227
|
+
edges (panel spine, expo numbering). A literal length, not a color. */
|
|
228
|
+
--ink-offset: 3px;
|
|
187
229
|
|
|
188
230
|
--z-header: 100;
|
|
189
231
|
--z-overlay: 1000;
|
|
@@ -267,9 +309,10 @@
|
|
|
267
309
|
--panel-text: var(--fg);
|
|
268
310
|
--panel-text-2: var(--fg-2);
|
|
269
311
|
--panel-text-3: var(--fg-3);
|
|
270
|
-
--accent: var(--
|
|
312
|
+
--accent: var(--acid);
|
|
271
313
|
--accent-fg: var(--ink);
|
|
272
|
-
--accent-
|
|
314
|
+
--accent-ink: var(--acid); /* on ink, the lime itself reads as bright text */
|
|
315
|
+
--accent-bright: var(--acid);
|
|
273
316
|
--danger: oklch(0.68 0.19 25);
|
|
274
317
|
--flame: #FF5A1F;
|
|
275
318
|
--amber: #D9A93A;
|
|
@@ -307,9 +350,10 @@
|
|
|
307
350
|
--panel-text: var(--fg);
|
|
308
351
|
--panel-text-2: var(--fg-2);
|
|
309
352
|
--panel-text-3: var(--fg-3);
|
|
310
|
-
--accent: var(--
|
|
353
|
+
--accent: var(--acid);
|
|
311
354
|
--accent-fg: var(--ink);
|
|
312
|
-
--accent-
|
|
355
|
+
--accent-ink: var(--acid);
|
|
356
|
+
--accent-bright: var(--acid);
|
|
313
357
|
--danger: oklch(0.68 0.19 25);
|
|
314
358
|
--flame: #FF5A1F;
|
|
315
359
|
--amber: #D9A93A;
|
|
@@ -339,6 +383,7 @@
|
|
|
339
383
|
--panel-bg-2: inherit;
|
|
340
384
|
--accent: inherit;
|
|
341
385
|
--accent-fg: inherit;
|
|
386
|
+
--accent-ink: inherit;
|
|
342
387
|
--panel-1: inherit;
|
|
343
388
|
--panel-2: inherit;
|
|
344
389
|
--panel-3: inherit;
|
|
@@ -378,7 +423,7 @@
|
|
|
378
423
|
color-scheme: light;
|
|
379
424
|
--bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
|
|
380
425
|
--fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
|
|
381
|
-
--accent: var(--
|
|
426
|
+
--accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
|
|
382
427
|
/* A paper island under a dark ancestor must not inherit the dark signal pair. */
|
|
383
428
|
--flame: #C53E00; --amber: #8A6512; --warn: #E0241A; --sky: #3A6EFF;
|
|
384
429
|
}
|
|
@@ -394,16 +439,17 @@
|
|
|
394
439
|
--paper-3: #E3DAC7;
|
|
395
440
|
--bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
|
|
396
441
|
--fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
|
|
397
|
-
--accent: var(--green); --accent-fg: var(--paper);
|
|
442
|
+
--accent: var(--green); --accent-fg: var(--paper); --accent-ink: var(--green);
|
|
398
443
|
}
|
|
399
444
|
|
|
400
445
|
.ds-247420[data-density="compact"] { --density: 0.75; }
|
|
401
446
|
.ds-247420[data-density="comfortable"] { --density: 1; }
|
|
402
447
|
.ds-247420[data-density="spacious"] { --density: 1.35; }
|
|
403
448
|
|
|
404
|
-
.ds-247420[data-accent="
|
|
405
|
-
.ds-247420[data-accent="
|
|
406
|
-
.ds-247420[data-accent="
|
|
449
|
+
.ds-247420[data-accent="acid"] { --accent: var(--acid); --accent-bright: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep); --panel-accent: var(--acid); }
|
|
450
|
+
.ds-247420[data-accent="green"] { --accent: var(--green); --accent-bright: var(--green-2); --accent-fg: var(--paper); --accent-ink: var(--green); --panel-accent: var(--green); }
|
|
451
|
+
.ds-247420[data-accent="purple"] { --accent: var(--purple); --accent-bright: #C277FF; --accent-fg: var(--paper); --accent-ink: var(--purple-2); --panel-accent: var(--purple); }
|
|
452
|
+
.ds-247420[data-accent="mascot"] { --accent: var(--mascot); --accent-bright: var(--mascot-2); --accent-fg: var(--ink); --accent-ink: var(--mascot-deep);--panel-accent: var(--mascot); }
|
|
407
453
|
|
|
408
454
|
/* Type-scale modifier — opt-in body/lg/xl bump for surfaces that want denser
|
|
409
455
|
or larger reading sizes without a custom override. */
|
|
@@ -454,8 +500,9 @@
|
|
|
454
500
|
/* app-shell.css */
|
|
455
501
|
/* ============================================================
|
|
456
502
|
247420 design system — component sheet
|
|
457
|
-
|
|
458
|
-
|
|
503
|
+
"Acid Editorial": Space Grotesk display + Inter body + JetBrains code.
|
|
504
|
+
Confident hierarchy, asymmetric grid tension, print texture over glow,
|
|
505
|
+
one electric lead accent. Indicator rails over hairlines.
|
|
459
506
|
============================================================ */
|
|
460
507
|
|
|
461
508
|
/* ============================================================
|
|
@@ -508,10 +555,10 @@
|
|
|
508
555
|
/* ============================================================
|
|
509
556
|
Typography
|
|
510
557
|
============================================================ */
|
|
511
|
-
.ds-247420 h1, .ds-247420 .t-h1 { font-family: var(--ff-
|
|
512
|
-
.ds-247420 h2, .ds-247420 .t-h2 { font-family: var(--ff-
|
|
513
|
-
.ds-247420 h3, .ds-247420 .t-h3 { font-family: var(--ff-
|
|
514
|
-
.ds-247420 h4, .ds-247420 .t-h4 { font-family: var(--ff-
|
|
558
|
+
.ds-247420 h1, .ds-247420 .t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
|
|
559
|
+
.ds-247420 h2, .ds-247420 .t-h2 { font-family: var(--ff-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
|
|
560
|
+
.ds-247420 h3, .ds-247420 .t-h3 { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; font-weight: 600; margin: 0; }
|
|
561
|
+
.ds-247420 h4, .ds-247420 .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; margin: 0; }
|
|
515
562
|
|
|
516
563
|
/* App/chrome typescale opt-in: compact heading ceiling for application UIs. */
|
|
517
564
|
.ds-247420[data-typescale="app"] h1, .ds-247420[data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
|
|
@@ -519,10 +566,10 @@
|
|
|
519
566
|
.ds-247420[data-typescale="app"] h3, .ds-247420[data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); }
|
|
520
567
|
.ds-247420[data-typescale="app"] h4, .ds-247420[data-typescale="app"] .t-h4 { font-size: var(--fs-h4-app); }
|
|
521
568
|
|
|
522
|
-
.ds-247420 .t-hero { font-family: var(--ff-
|
|
523
|
-
.ds-247420 .t-mega { font-family: var(--ff-
|
|
569
|
+
.ds-247420 .t-hero { font-family: var(--ff-display); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
|
|
570
|
+
.ds-247420 .t-mega { font-family: var(--ff-display); font-size: var(--fs-mega); line-height: 0.92; letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
|
|
524
571
|
|
|
525
|
-
.ds-247420 .t-display { font-family: var(--ff-
|
|
572
|
+
.ds-247420 .t-display { font-family: var(--ff-display); font-weight: 600; letter-spacing: var(--tr-tight); }
|
|
526
573
|
.ds-247420 .t-mono { font-family: var(--ff-mono); }
|
|
527
574
|
.ds-247420 .t-body { font-family: var(--ff-body); }
|
|
528
575
|
|
|
@@ -537,17 +584,18 @@
|
|
|
537
584
|
}
|
|
538
585
|
|
|
539
586
|
.ds-247420 .eyebrow {
|
|
540
|
-
font-family: var(--ff-
|
|
587
|
+
font-family: var(--ff-mono);
|
|
541
588
|
font-size: var(--fs-tiny);
|
|
542
589
|
font-weight: 600;
|
|
543
|
-
letter-spacing: var(--tr-
|
|
590
|
+
letter-spacing: var(--tr-label);
|
|
544
591
|
text-transform: uppercase;
|
|
545
|
-
color: var(--accent);
|
|
546
|
-
display: inline-flex; align-items: center; gap:
|
|
592
|
+
color: var(--accent-ink);
|
|
593
|
+
display: inline-flex; align-items: center; gap: 12px;
|
|
547
594
|
}
|
|
595
|
+
/* Editorial kicker mark — a short solid ink rule, the print-byline tell. */
|
|
548
596
|
.ds-247420 .eyebrow::before {
|
|
549
597
|
content: '';
|
|
550
|
-
width:
|
|
598
|
+
width: 28px; height: 3px; background: currentColor;
|
|
551
599
|
}
|
|
552
600
|
|
|
553
601
|
.ds-247420 .ds-prose {
|
|
@@ -567,7 +615,7 @@
|
|
|
567
615
|
/* Links */
|
|
568
616
|
.ds-247420 a { color: inherit; text-decoration: none; }
|
|
569
617
|
.ds-247420 a.ds-link-accent, .ds-247420 .ds-prose a {
|
|
570
|
-
color: var(--accent);
|
|
618
|
+
color: var(--accent-ink);
|
|
571
619
|
text-decoration: underline;
|
|
572
620
|
text-underline-offset: 4px;
|
|
573
621
|
text-decoration-thickness: 2px;
|
|
@@ -707,18 +755,19 @@
|
|
|
707
755
|
as misaligned. Same height as the inactive links — only the tint + underline
|
|
708
756
|
change. */
|
|
709
757
|
.ds-247420 .app-topbar nav a.active {
|
|
710
|
-
color: var(--accent);
|
|
758
|
+
color: var(--accent-ink);
|
|
711
759
|
background: color-mix(in oklab, var(--accent) 16%, transparent);
|
|
712
760
|
box-shadow: inset 0 -2px 0 0 var(--accent);
|
|
713
761
|
font-weight: 600;
|
|
714
762
|
}
|
|
715
763
|
|
|
716
764
|
.ds-247420 .brand {
|
|
717
|
-
font-family: var(--ff-
|
|
718
|
-
font-weight: 700; font-size: var(--fs-
|
|
719
|
-
letter-spacing: -
|
|
765
|
+
font-family: var(--ff-display);
|
|
766
|
+
font-weight: 700; font-size: var(--fs-lg);
|
|
767
|
+
letter-spacing: var(--tr-tight);
|
|
720
768
|
}
|
|
721
|
-
|
|
769
|
+
/* The wordmark separator printed in the electric lead — the brand tell. */
|
|
770
|
+
.ds-247420 .brand .slash { color: var(--accent-ink); font-weight: 700; margin: 0 3px; }
|
|
722
771
|
|
|
723
772
|
.ds-247420 .app-search {
|
|
724
773
|
display: inline-flex; align-items: center; gap: 10px;
|
|
@@ -807,7 +856,7 @@
|
|
|
807
856
|
failure mode any long-scroll page (a marketing/landing route) hits. Grow
|
|
808
857
|
children (.chat/.grow/etc.) re-assert flex:1 1 auto below via higher
|
|
809
858
|
specificity, so a single full-height pane still fills the region. */
|
|
810
|
-
.ds-247420 .app-main > * { min-height: 0; flex
|
|
859
|
+
.ds-247420 .app-main > * { min-height: 0; flex: none; }
|
|
811
860
|
/* The main region scrolls its own overflow at every breakpoint (previously
|
|
812
861
|
only ≥901px), so a fixed-height .app never clips route content and inner
|
|
813
862
|
panels don't fight the page scroll. */
|
|
@@ -847,7 +896,7 @@
|
|
|
847
896
|
border-top: 1px solid var(--rule);
|
|
848
897
|
}
|
|
849
898
|
.ds-247420 .app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
|
|
850
|
-
.ds-247420 .app-status .item:first-of-type { color: var(--accent); }
|
|
899
|
+
.ds-247420 .app-status .item:first-of-type { color: var(--accent-ink); }
|
|
851
900
|
.ds-247420 .app-status .spread { flex: 1; }
|
|
852
901
|
/* The status bar NEVER wraps: at narrow widths the trailing items (hints,
|
|
853
902
|
agent target) drop in priority order instead of breaking mid-word onto a
|
|
@@ -870,15 +919,20 @@
|
|
|
870
919
|
/* Rounded-rect app chrome, not a marketing-page stadium CTA. */
|
|
871
920
|
border-radius: var(--r-1);
|
|
872
921
|
border: 0;
|
|
873
|
-
transition: transform var(--dur-
|
|
922
|
+
transition: transform var(--dur-base) var(--ease-spring), background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
874
923
|
}
|
|
875
924
|
.ds-247420 .btn { background: var(--bg-2); color: var(--fg); }
|
|
876
925
|
.ds-247420 .btn:hover { background: var(--bg-3); color: var(--fg); }
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
.ds-247420 .btn-
|
|
880
|
-
|
|
881
|
-
|
|
926
|
+
/* Primary CTA — the electric lead as a solid editorial block; hover inverts to
|
|
927
|
+
an ink block with the lead as text, a confident two-tone flip. */
|
|
928
|
+
.ds-247420 .btn-primary {
|
|
929
|
+
background: var(--accent); color: var(--accent-fg);
|
|
930
|
+
font-weight: 700; letter-spacing: var(--tr-caps);
|
|
931
|
+
}
|
|
932
|
+
.ds-247420 .btn-primary:hover { background: var(--fg); color: var(--accent-ink); }
|
|
933
|
+
.ds-247420 .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
|
|
934
|
+
.ds-247420 .btn-ghost:hover { background: var(--fg); color: var(--bg); }
|
|
935
|
+
.ds-247420 .btn:active, .ds-247420 .btn-primary:active, .ds-247420 .btn-ghost:active { transform: translateY(2px); }
|
|
882
936
|
.ds-247420 .btn:focus-visible, .ds-247420 .btn-primary:focus-visible, .ds-247420 .btn-ghost:focus-visible {
|
|
883
937
|
outline: 2px solid var(--accent);
|
|
884
938
|
outline-offset: 2px;
|
|
@@ -974,6 +1028,17 @@
|
|
|
974
1028
|
padding: var(--space-3);
|
|
975
1029
|
position: relative;
|
|
976
1030
|
}
|
|
1031
|
+
/* Editorial accent spine — an opt-in printed-ink rule down the left edge that
|
|
1032
|
+
reads as a magazine pull-quote bar, not a glow card. */
|
|
1033
|
+
.ds-247420 .panel.panel-spine {
|
|
1034
|
+
border-radius: 0 var(--r-2) var(--r-2) 0;
|
|
1035
|
+
padding-left: calc(var(--space-3) + var(--bw-chunk));
|
|
1036
|
+
}
|
|
1037
|
+
.ds-247420 .panel.panel-spine::before {
|
|
1038
|
+
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
|
|
1039
|
+
width: var(--bw-chunk); background: var(--accent);
|
|
1040
|
+
border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
|
|
1041
|
+
}
|
|
977
1042
|
.ds-247420 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
|
|
978
1043
|
.ds-247420 .panel.panel-wide { background: transparent; }
|
|
979
1044
|
.ds-247420 .panel-head {
|
|
@@ -1048,9 +1113,13 @@
|
|
|
1048
1113
|
row should not signal an affordance it does not have. */
|
|
1049
1114
|
.ds-247420 .row[role="button"]:hover, .ds-247420 a.row:hover { background: var(--bg-2); }
|
|
1050
1115
|
.ds-247420 .row[role="button"]:hover::before, .ds-247420 a.row:hover::before { height: 56%; opacity: 1; }
|
|
1116
|
+
/* Editorial hover-reveal — the row's meta (cta) slides toward the lead accent
|
|
1117
|
+
and nudges right, the printed-index "open ->" affordance. */
|
|
1118
|
+
.ds-247420 .row .meta { transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring); }
|
|
1119
|
+
.ds-247420 a.row:hover .meta, .ds-247420 .row[role="button"]:hover .meta { color: var(--accent-ink); transform: translateX(3px); }
|
|
1051
1120
|
.ds-247420 .row.active { background: color-mix(in oklab, var(--accent) 10%, var(--bg-2)); }
|
|
1052
1121
|
.ds-247420 .row.active::before { height: 64%; opacity: 1; background: var(--accent); }
|
|
1053
|
-
.ds-247420 .row.active .title { color: var(--accent); }
|
|
1122
|
+
.ds-247420 .row.active .title { color: var(--accent-ink); }
|
|
1054
1123
|
.ds-247420 .row.row-state-disabled { opacity: 0.5; pointer-events: none; }
|
|
1055
1124
|
.ds-247420 .row.row-state-error { background: color-mix(in oklab, var(--flame) 10%, var(--bg-2)); }
|
|
1056
1125
|
.ds-247420 .row.row-state-error::before { height: 64%; opacity: 1; background: var(--flame); }
|
|
@@ -1092,24 +1161,43 @@
|
|
|
1092
1161
|
/* ============================================================
|
|
1093
1162
|
Hero
|
|
1094
1163
|
============================================================ */
|
|
1164
|
+
/* Signature hero — asymmetric editorial header. Title spans wide; the body +
|
|
1165
|
+
actions sit offset in a narrower right column on desktop, stacked on mobile.
|
|
1166
|
+
No centered stack. */
|
|
1095
1167
|
.ds-247420 .ds-hero {
|
|
1096
1168
|
padding: var(--space-9) 0 var(--space-8);
|
|
1097
|
-
display: grid; gap: var(--space-5);
|
|
1169
|
+
display: grid; gap: var(--space-5) var(--space-6);
|
|
1170
|
+
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
|
|
1171
|
+
grid-template-areas: 'title title' 'body actions';
|
|
1172
|
+
align-items: end;
|
|
1098
1173
|
max-width: var(--measure-wide);
|
|
1099
1174
|
}
|
|
1175
|
+
.ds-247420 .ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
|
|
1176
|
+
.ds-247420 .ds-hero-body { grid-area: body; }
|
|
1177
|
+
.ds-247420 .ds-hero-actions { grid-area: actions; }
|
|
1178
|
+
.ds-247420 .ds-hero-badge { grid-area: actions; }
|
|
1100
1179
|
.ds-247420 .ds-hero-title {
|
|
1101
|
-
font-family: var(--ff-
|
|
1102
|
-
font-size: clamp(
|
|
1103
|
-
line-height:
|
|
1104
|
-
margin: 0; max-width:
|
|
1180
|
+
font-family: var(--ff-display); font-weight: 700;
|
|
1181
|
+
font-size: clamp(40px, 9cqi, 116px);
|
|
1182
|
+
line-height: 0.96; letter-spacing: var(--tr-tighter);
|
|
1183
|
+
margin: 0; max-width: 16ch; text-wrap: balance;
|
|
1105
1184
|
}
|
|
1106
1185
|
.ds-247420 .ds-hero-body {
|
|
1107
1186
|
font-family: var(--ff-body); font-size: var(--fs-xl);
|
|
1108
|
-
line-height: 1.45; margin: 0; max-width:
|
|
1187
|
+
line-height: 1.45; margin: 0; max-width: 46ch;
|
|
1109
1188
|
color: var(--fg-2);
|
|
1110
1189
|
}
|
|
1111
|
-
|
|
1112
|
-
.ds-247420 .ds-hero-
|
|
1190
|
+
/* The lead phrase in the title — printed in the electric lead, not glowing. */
|
|
1191
|
+
.ds-247420 .ds-hero-accent { color: var(--accent-ink); font-weight: 700; }
|
|
1192
|
+
.ds-247420 .ds-hero-actions { display: flex; gap: var(--space-2, 10px); flex-wrap: wrap; align-self: end; }
|
|
1193
|
+
@media (max-width: 900px) {
|
|
1194
|
+
.ds-247420 .ds-hero {
|
|
1195
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1196
|
+
grid-template-areas: 'title' 'body' 'actions';
|
|
1197
|
+
align-items: start;
|
|
1198
|
+
padding: var(--space-7) 0 var(--space-6);
|
|
1199
|
+
}
|
|
1200
|
+
}
|
|
1113
1201
|
.ds-247420 .ds-chat-title { margin: 0; font-size: inherit; }
|
|
1114
1202
|
|
|
1115
1203
|
/* ============================================================
|
|
@@ -1125,6 +1213,63 @@
|
|
|
1125
1213
|
letter-spacing: -0.01em;
|
|
1126
1214
|
}
|
|
1127
1215
|
|
|
1216
|
+
@media (max-width: 900px) {
|
|
1217
|
+
.ds-247420 .ds-section { margin: var(--space-4) 0; }
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
/* ============================================================
|
|
1221
|
+
Print texture — the signature surface treatment. Opt-in overlay that
|
|
1222
|
+
reads as risograph/newsprint grain, layered above the surface fill but
|
|
1223
|
+
below content. Faint by default so type stays crisp; reduced-data and
|
|
1224
|
+
reduced-motion are unaffected (texture is static).
|
|
1225
|
+
============================================================ */
|
|
1226
|
+
.ds-247420 .ds-grain { position: relative; isolation: isolate; }
|
|
1227
|
+
.ds-247420 .ds-grain::after {
|
|
1228
|
+
content: ''; position: absolute; inset: 0; z-index: -1;
|
|
1229
|
+
pointer-events: none;
|
|
1230
|
+
background-image: var(--grain);
|
|
1231
|
+
background-size: 160px 160px;
|
|
1232
|
+
opacity: var(--grain-opacity);
|
|
1233
|
+
mix-blend-mode: var(--grain-blend);
|
|
1234
|
+
}
|
|
1235
|
+
/* Halftone dot screen — a heavier print tell for accent panels/hero. */
|
|
1236
|
+
.ds-247420 .ds-halftone { position: relative; isolation: isolate; }
|
|
1237
|
+
.ds-247420 .ds-halftone::after {
|
|
1238
|
+
content: ''; position: absolute; inset: 0; z-index: -1;
|
|
1239
|
+
pointer-events: none;
|
|
1240
|
+
background-image: radial-gradient(currentColor 1px, transparent 1.2px);
|
|
1241
|
+
background-size: var(--halftone-size) var(--halftone-size);
|
|
1242
|
+
opacity: 0.12;
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
/* ============================================================
|
|
1246
|
+
Marquee / ticker — brand kinetic device ("always open 24/7"). The track
|
|
1247
|
+
holds two identical runs so the loop is seamless; reduced-motion freezes it
|
|
1248
|
+
to a single static run. Editorial, not a decorative flourish.
|
|
1249
|
+
============================================================ */
|
|
1250
|
+
.ds-247420 .ds-marquee {
|
|
1251
|
+
overflow: hidden; width: 100%;
|
|
1252
|
+
border-block: var(--bw-rule) solid var(--fg);
|
|
1253
|
+
padding: var(--space-2) 0;
|
|
1254
|
+
font-family: var(--ff-display); font-weight: 600;
|
|
1255
|
+
text-transform: uppercase; letter-spacing: var(--tr-caps);
|
|
1256
|
+
}
|
|
1257
|
+
.ds-247420 .ds-marquee-track {
|
|
1258
|
+
display: inline-flex; gap: var(--space-5);
|
|
1259
|
+
white-space: nowrap; will-change: transform;
|
|
1260
|
+
animation: ds-marquee-run 28s linear infinite;
|
|
1261
|
+
}
|
|
1262
|
+
.ds-247420 .ds-marquee-item { display: inline-flex; align-items: center; gap: var(--space-5); }
|
|
1263
|
+
.ds-247420 .ds-marquee-sep { color: var(--accent-ink); }
|
|
1264
|
+
.ds-247420 .ds-marquee:hover .ds-marquee-track { animation-play-state: paused; }
|
|
1265
|
+
@keyframes ds-marquee-run {
|
|
1266
|
+
from { transform: translateX(0); }
|
|
1267
|
+
to { transform: translateX(-50%); }
|
|
1268
|
+
}
|
|
1269
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1270
|
+
.ds-247420 .ds-marquee-track { animation: none; }
|
|
1271
|
+
}
|
|
1272
|
+
|
|
1128
1273
|
/* ============================================================
|
|
1129
1274
|
Install — single CLI command card
|
|
1130
1275
|
============================================================ */
|
|
@@ -1576,7 +1721,7 @@
|
|
|
1576
1721
|
============================================================ */
|
|
1577
1722
|
.ds-247420 .ds-chat { display: flex; flex-direction: column; gap: 12px; padding: var(--space-4); }
|
|
1578
1723
|
.ds-247420 .ds-chat-msg { padding: 12px 18px; background: var(--bg-2); border-radius: var(--r-3); max-width: min(90vw, 36em); }
|
|
1579
|
-
.ds-247420 .ds-chat-msg.user { background: var(--accent); color: var(--
|
|
1724
|
+
.ds-247420 .ds-chat-msg.user { background: var(--accent-tint); color: var(--fg); align-self: flex-end; }
|
|
1580
1725
|
.ds-247420 .ds-chat-md { font-size: var(--fs-sm); line-height: 1.6; }
|
|
1581
1726
|
.ds-247420 .ds-chat-composer { display: flex; gap: 8px; padding: var(--space-4); }
|
|
1582
1727
|
.ds-247420 .ds-chat-composer input { flex: 1; padding: 13px 18px; background: var(--bg-2); border: 0; border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-sm); color: var(--fg); }
|
|
@@ -1615,7 +1760,7 @@
|
|
|
1615
1760
|
background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: var(--r-1);
|
|
1616
1761
|
}
|
|
1617
1762
|
.ds-247420 .ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
|
|
1618
|
-
.ds-247420 .ds-file-sort-btn.active { color: var(--accent); }
|
|
1763
|
+
.ds-247420 .ds-file-sort-btn.active { color: var(--accent-ink); }
|
|
1619
1764
|
.ds-247420 .ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
1620
1765
|
|
|
1621
1766
|
/* Skeleton shimmer rows shown while a directory loads. */
|
|
@@ -1703,7 +1848,7 @@
|
|
|
1703
1848
|
width: 26px; height: 26px; font-size: 15px; line-height: 1;
|
|
1704
1849
|
color: var(--fg-2);
|
|
1705
1850
|
}
|
|
1706
|
-
.ds-247420 .ds-file-row[data-file-type="dir"] .ds-file-icon { color: var(--accent); }
|
|
1851
|
+
.ds-247420 .ds-file-row[data-file-type="dir"] .ds-file-icon { color: var(--accent-ink); }
|
|
1707
1852
|
.ds-247420 .ds-file-row[data-file-type="image"] .ds-file-icon { color: var(--mascot); }
|
|
1708
1853
|
.ds-247420 .ds-file-row[data-file-type="video"] .ds-file-icon { color: var(--purple-2); }
|
|
1709
1854
|
.ds-247420 .ds-file-row[data-file-type="audio"] .ds-file-icon { color: var(--sky); }
|
|
@@ -1761,7 +1906,7 @@
|
|
|
1761
1906
|
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
1762
1907
|
}
|
|
1763
1908
|
.ds-247420 .ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
|
|
1764
|
-
.ds-247420 .ds-file-check.is-marked { color: var(--accent); }
|
|
1909
|
+
.ds-247420 .ds-file-check.is-marked { color: var(--accent-ink); }
|
|
1765
1910
|
.ds-247420 .ds-file-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
1766
1911
|
.ds-247420 .ds-file-check[disabled] { opacity: 0.4; cursor: default; }
|
|
1767
1912
|
.ds-247420 .ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
|
|
@@ -1854,7 +1999,7 @@
|
|
|
1854
1999
|
.ds-247420 .ds-file-cell-thumb { width: 100%; height: 100%; object-fit: cover; }
|
|
1855
2000
|
/* Per-type icon tints on thumb tiles so the grid keeps the colour-coding the
|
|
1856
2001
|
list rows already carry (mirrors .ds-file-row[data-file-type] .ds-file-icon). */
|
|
1857
|
-
.ds-247420 .ds-file-cell[data-file-type="dir"] .ds-file-icon { color: var(--accent); }
|
|
2002
|
+
.ds-247420 .ds-file-cell[data-file-type="dir"] .ds-file-icon { color: var(--accent-ink); }
|
|
1858
2003
|
.ds-247420 .ds-file-cell[data-file-type="image"] .ds-file-icon { color: var(--mascot); }
|
|
1859
2004
|
.ds-247420 .ds-file-cell[data-file-type="video"] .ds-file-icon { color: var(--purple-2); }
|
|
1860
2005
|
.ds-247420 .ds-file-cell[data-file-type="audio"] .ds-file-icon { color: var(--sky); }
|
|
@@ -1981,7 +2126,7 @@
|
|
|
1981
2126
|
.ds-247420 .ds-dropzone.dragover { animation: ds-dropzone-pulse 1.1s var(--ease) infinite; }
|
|
1982
2127
|
}
|
|
1983
2128
|
.ds-247420 .ds-dropzone.dragover .ds-dropzone-glyph,
|
|
1984
|
-
.ds-247420 .ds-dropzone.dragover .ds-dropzone-label { color: var(--accent); }
|
|
2129
|
+
.ds-247420 .ds-dropzone.dragover .ds-dropzone-label { color: var(--accent-ink); }
|
|
1985
2130
|
@keyframes ds-dropzone-pulse {
|
|
1986
2131
|
0%, 100% { border-color: var(--accent); }
|
|
1987
2132
|
50% { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
|
|
@@ -2344,7 +2489,7 @@
|
|
|
2344
2489
|
.ds-247420 .chat-msg:hover .chat-avatar { transform: scale(1.03); box-shadow: 0 1px 4px color-mix(in oklab, var(--fg) 6%, transparent); }
|
|
2345
2490
|
.ds-247420 .chat-msg.you .chat-avatar {
|
|
2346
2491
|
background: color-mix(in oklab, var(--accent) 26%, var(--bg-3));
|
|
2347
|
-
color: var(--accent);
|
|
2492
|
+
color: var(--accent-ink);
|
|
2348
2493
|
}
|
|
2349
2494
|
.ds-247420 .chat-msg.aicat .chat-avatar {
|
|
2350
2495
|
background: color-mix(in oklab, var(--mascot) 26%, var(--bg-2));
|
|
@@ -2367,7 +2512,8 @@
|
|
|
2367
2512
|
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
|
2368
2513
|
}
|
|
2369
2514
|
.ds-247420 .chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 6%, transparent); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
|
|
2370
|
-
|
|
2515
|
+
/* Own bubble — calm tinted lead, not a full electric fill (chat stays readable). */
|
|
2516
|
+
.ds-247420 .chat-msg.you .chat-bubble { background: var(--accent-tint); color: var(--fg); }
|
|
2371
2517
|
.ds-247420 .chat-msg.aicat .chat-bubble {
|
|
2372
2518
|
background: color-mix(in oklab, var(--mascot) 14%, var(--bg-2));
|
|
2373
2519
|
border: 1px solid color-mix(in oklab, var(--mascot) 28%, transparent);
|
|
@@ -2377,7 +2523,7 @@
|
|
|
2377
2523
|
background: color-mix(in oklab, var(--fg) 10%, transparent);
|
|
2378
2524
|
padding: 1px 6px; border-radius: 4px;
|
|
2379
2525
|
}
|
|
2380
|
-
.ds-247420 .chat-msg.you .chat-bubble code { background: color-mix(in oklab, var(--
|
|
2526
|
+
.ds-247420 .chat-msg.you .chat-bubble code { background: color-mix(in oklab, var(--fg) 10%, transparent); }
|
|
2381
2527
|
.ds-247420 .chat-bubble a {
|
|
2382
2528
|
color: inherit; text-decoration: underline;
|
|
2383
2529
|
text-underline-offset: 2px; text-decoration-thickness: 1px;
|
|
@@ -2461,7 +2607,7 @@
|
|
|
2461
2607
|
border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
|
|
2462
2608
|
font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
|
|
2463
2609
|
}
|
|
2464
|
-
.ds-247420 .chat-code-head .lang { text-transform: uppercase; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
|
|
2610
|
+
.ds-247420 .chat-code-head .lang { text-transform: uppercase; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.06em; }
|
|
2465
2611
|
.ds-247420 .chat-code-head .filename,
|
|
2466
2612
|
.ds-247420 .chat-code-head .name { color: var(--fg-2); font-weight: 500; }
|
|
2467
2613
|
.ds-247420 .chat-code-head .spread { flex: 1; }
|
|
@@ -2473,7 +2619,7 @@
|
|
|
2473
2619
|
.ds-247420 .chat-bubble.chat-code code { background: transparent; padding: 0; font-size: inherit; }
|
|
2474
2620
|
.ds-247420 .chat-bubble.chat-code .token.keyword,
|
|
2475
2621
|
.ds-247420 .chat-bubble.chat-code .token.atrule,
|
|
2476
|
-
.ds-247420 .chat-bubble.chat-code .token.selector { color: var(--accent); }
|
|
2622
|
+
.ds-247420 .chat-bubble.chat-code .token.selector { color: var(--accent-ink); }
|
|
2477
2623
|
.ds-247420 .chat-bubble.chat-code .token.string,
|
|
2478
2624
|
.ds-247420 .chat-bubble.chat-code .token.attr-value { color: var(--code-str-alt, var(--mascot)); }
|
|
2479
2625
|
.ds-247420 .chat-bubble.chat-code .token.comment { color: var(--fg-3); font-style: italic; }
|
|
@@ -2514,7 +2660,7 @@
|
|
|
2514
2660
|
font-size: 22px; width: 36px; height: 36px;
|
|
2515
2661
|
display: inline-flex; align-items: center; justify-content: center;
|
|
2516
2662
|
background: color-mix(in oklab, var(--accent) 18%, transparent);
|
|
2517
|
-
color: var(--accent); border-radius: 8px; flex-shrink: 0; font-family: var(--ff-mono);
|
|
2663
|
+
color: var(--accent-ink); border-radius: 8px; flex-shrink: 0; font-family: var(--ff-mono);
|
|
2518
2664
|
}
|
|
2519
2665
|
.ds-247420 .chat-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
2520
2666
|
.ds-247420 .chat-file .name {
|
|
@@ -2524,7 +2670,7 @@
|
|
|
2524
2670
|
.ds-247420 .chat-file .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
|
|
2525
2671
|
.ds-247420 .chat-file .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
|
|
2526
2672
|
.ds-247420 .chat-file .go { font-family: var(--ff-mono); font-size: 16px; color: var(--fg-3); flex-shrink: 0; }
|
|
2527
|
-
.ds-247420 .chat-file:hover .go { color: var(--accent); }
|
|
2673
|
+
.ds-247420 .chat-file:hover .go { color: var(--accent-ink); }
|
|
2528
2674
|
|
|
2529
2675
|
.ds-247420 .chat-msg.you .chat-pdf,
|
|
2530
2676
|
.ds-247420 .chat-msg .chat-pdf,
|
|
@@ -2544,7 +2690,7 @@
|
|
|
2544
2690
|
.ds-247420 .chat-pdf-head .glyph { font-size: 18px; color: var(--mascot); flex-shrink: 0; }
|
|
2545
2691
|
.ds-247420 .chat-pdf-head .name { flex: 1; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
2546
2692
|
.ds-247420 .chat-pdf-head .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
|
|
2547
|
-
.ds-247420 .chat-pdf-head a { color: var(--accent); font-family: var(--ff-mono); font-size: var(--fs-xs); text-decoration: none; }
|
|
2693
|
+
.ds-247420 .chat-pdf-head a { color: var(--accent-ink); font-family: var(--ff-mono); font-size: var(--fs-xs); text-decoration: none; }
|
|
2548
2694
|
.ds-247420 .chat-pdf embed,
|
|
2549
2695
|
.ds-247420 .chat-pdf iframe,
|
|
2550
2696
|
.ds-247420 .chat-pdf object { width: 100%; height: 360px; border: 0; display: block; }
|
|
@@ -2581,7 +2727,7 @@
|
|
|
2581
2727
|
.ds-247420 .chat-meta .who::after { content: ' ·'; color: var(--fg-3); font-weight: 400; }
|
|
2582
2728
|
.ds-247420 .chat-meta .t { color: var(--fg-3); }
|
|
2583
2729
|
.ds-247420 .chat-meta .tick { color: var(--fg-3); margin-left: 2px; letter-spacing: -2px; font-family: var(--ff-mono); }
|
|
2584
|
-
.ds-247420 .chat-meta .tick.read { color: var(--accent); }
|
|
2730
|
+
.ds-247420 .chat-meta .tick.read { color: var(--accent-ink); }
|
|
2585
2731
|
|
|
2586
2732
|
.ds-247420 .chat-reactions {
|
|
2587
2733
|
display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;
|
|
@@ -2599,11 +2745,11 @@
|
|
|
2599
2745
|
.ds-247420 .chat-reactions .rxn.you {
|
|
2600
2746
|
background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
|
|
2601
2747
|
border-color: color-mix(in oklab, var(--accent) 55%, transparent);
|
|
2602
|
-
color: var(--accent);
|
|
2748
|
+
color: var(--accent-ink);
|
|
2603
2749
|
}
|
|
2604
2750
|
.ds-247420 .chat-reactions .rxn .e { font-size: 14px; line-height: 1; }
|
|
2605
2751
|
.ds-247420 .chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: 11px; color: var(--fg-2); }
|
|
2606
|
-
.ds-247420 .chat-reactions .rxn.you .n { color: var(--accent); }
|
|
2752
|
+
.ds-247420 .chat-reactions .rxn.you .n { color: var(--accent-ink); }
|
|
2607
2753
|
|
|
2608
2754
|
.ds-247420 .chat-typing { display: inline-flex; gap: 4px; align-items: center; }
|
|
2609
2755
|
.ds-247420 .chat-typing span {
|
|
@@ -2742,7 +2888,7 @@
|
|
|
2742
2888
|
.ds-247420 .app-side a:has(> .count:empty) > .count,
|
|
2743
2889
|
.ds-247420 .app-side .count:empty { display: none; }
|
|
2744
2890
|
.ds-247420 .app-side a .glyph { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
|
|
2745
|
-
.ds-247420 .app-side a.active .glyph { color: var(--accent); }
|
|
2891
|
+
.ds-247420 .app-side a.active .glyph { color: var(--accent-ink); }
|
|
2746
2892
|
|
|
2747
2893
|
/* -- select primitive --------------------------------------------------- */
|
|
2748
2894
|
.ds-247420 .ds-select {
|
|
@@ -2919,7 +3065,7 @@
|
|
|
2919
3065
|
.ds-247420 .drop-zone.active {
|
|
2920
3066
|
border-color: var(--accent);
|
|
2921
3067
|
background: color-mix(in oklab, var(--accent) 10%, var(--bg));
|
|
2922
|
-
color: var(--accent);
|
|
3068
|
+
color: var(--accent-ink);
|
|
2923
3069
|
}
|
|
2924
3070
|
|
|
2925
3071
|
/* List item reorder indicator */
|
|
@@ -2982,7 +3128,7 @@
|
|
|
2982
3128
|
}
|
|
2983
3129
|
.ds-247420 .ds-context-menu-item:hover {
|
|
2984
3130
|
background: var(--bg-3);
|
|
2985
|
-
color: var(--accent);
|
|
3131
|
+
color: var(--accent-ink);
|
|
2986
3132
|
}
|
|
2987
3133
|
.ds-247420 .ds-context-menu-item:active {
|
|
2988
3134
|
background: color-mix(in oklab, var(--accent) 20%, var(--bg-3));
|
|
@@ -3074,9 +3220,13 @@
|
|
|
3074
3220
|
color: var(--fg);
|
|
3075
3221
|
background: var(--bg-2);
|
|
3076
3222
|
border: 0;
|
|
3077
|
-
|
|
3223
|
+
/* Editorial field — tonal fill with a printed baseline rule that thickens to
|
|
3224
|
+
the electric lead on focus, instead of a uniform hairline box. */
|
|
3225
|
+
box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
|
|
3226
|
+
inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
|
|
3078
3227
|
border-radius: var(--r-2, 10px);
|
|
3079
3228
|
padding: 10px 14px;
|
|
3229
|
+
transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
|
|
3080
3230
|
}
|
|
3081
3231
|
.ds-247420 .ds-field textarea { min-height: calc(4 * 1.5em); resize: vertical; }
|
|
3082
3232
|
.ds-247420 .ds-search-input::placeholder { color: var(--fg-3); }
|
|
@@ -3086,7 +3236,10 @@
|
|
|
3086
3236
|
.ds-247420 .ds-field .ds-select:focus-visible,
|
|
3087
3237
|
.ds-247420 .ds-search-input:focus-visible {
|
|
3088
3238
|
outline: none;
|
|
3089
|
-
|
|
3239
|
+
background: var(--bg);
|
|
3240
|
+
/* Focus thickens the baseline to the lead accent — the printed-rule tell. */
|
|
3241
|
+
box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
|
|
3242
|
+
inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent);
|
|
3090
3243
|
}
|
|
3091
3244
|
.ds-247420 .ds-field input:disabled,
|
|
3092
3245
|
.ds-247420 .ds-field textarea:disabled,
|
|
@@ -3669,6 +3822,8 @@
|
|
|
3669
3822
|
.ds-247420 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
|
|
3670
3823
|
.ds-247420 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
|
|
3671
3824
|
.ds-247420 .ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
3825
|
+
.ds-247420 .ws-rail-item-flag { width: 6px; height: 6px; border-radius: 50%; flex: none; }
|
|
3826
|
+
.ds-247420 .ws-rail-item-flag.tone-flame { background: var(--flame); box-shadow: 0 0 0 2px color-mix(in oklab, var(--flame) 38%, transparent); }
|
|
3672
3827
|
.ds-247420 .ws-rail-foot { margin-top: auto; padding-top: var(--space-2); border-top: var(--bw-hair) solid var(--bg-3); }
|
|
3673
3828
|
|
|
3674
3829
|
/* Collapsed rail: icon-only — hide text labels, center icons, drop toggle's far-right pin */
|
|
@@ -7989,6 +8144,204 @@
|
|
|
7989
8144
|
}
|
|
7990
8145
|
}
|
|
7991
8146
|
|
|
8147
|
+
/* gm-prose.css */
|
|
8148
|
+
/* ============================================================
|
|
8149
|
+
gm-prose -- long-form article + doc-site prose surfaces
|
|
8150
|
+
Extracted-article host, sticky table-of-contents rail, CLI
|
|
8151
|
+
transcript block, definition-panel rows, repo cards, tag
|
|
8152
|
+
chips, and attributed callouts. Consumed pro-rata by doc
|
|
8153
|
+
sites (the gm paper) that mount the SDK and inject a flatspace
|
|
8154
|
+
article into #ds-article-host. Every color is a token from
|
|
8155
|
+
colors_and_type.css; no raw literals.
|
|
8156
|
+
============================================================ */
|
|
8157
|
+
|
|
8158
|
+
.ds-247420 .ds-prose { line-height: 1.65; }
|
|
8159
|
+
.ds-247420 .ds-prose pre, .ds-247420 .ds-prose table { overflow-x: auto; max-width: 100%; }
|
|
8160
|
+
.ds-247420 .ds-prose canvas {
|
|
8161
|
+
display: block;
|
|
8162
|
+
width: 100%;
|
|
8163
|
+
max-width: 100%;
|
|
8164
|
+
height: 300px;
|
|
8165
|
+
max-height: 300px;
|
|
8166
|
+
}
|
|
8167
|
+
|
|
8168
|
+
.ds-247420 #ds-article-host, .ds-247420 .ds-prose {
|
|
8169
|
+
width: 100%;
|
|
8170
|
+
max-width: 100%;
|
|
8171
|
+
overflow: visible;
|
|
8172
|
+
min-height: 0;
|
|
8173
|
+
}
|
|
8174
|
+
|
|
8175
|
+
.ds-247420 #ds-article-host.has-toc {
|
|
8176
|
+
display: flex;
|
|
8177
|
+
align-items: flex-start;
|
|
8178
|
+
column-gap: 44px;
|
|
8179
|
+
gap: 44px;
|
|
8180
|
+
max-width: calc(256px + 44px + var(--measure-narrow));
|
|
8181
|
+
margin-left: auto;
|
|
8182
|
+
margin-right: auto;
|
|
8183
|
+
}
|
|
8184
|
+
.ds-247420 #ds-article-host.has-toc > .article-col {
|
|
8185
|
+
flex: 1 1 0;
|
|
8186
|
+
min-width: 0;
|
|
8187
|
+
max-width: var(--measure-narrow);
|
|
8188
|
+
}
|
|
8189
|
+
.ds-247420 #ds-article-host.has-toc > .toc {
|
|
8190
|
+
flex: 0 0 256px;
|
|
8191
|
+
align-self: flex-start;
|
|
8192
|
+
position: sticky;
|
|
8193
|
+
top: 24px;
|
|
8194
|
+
align-self: start;
|
|
8195
|
+
max-height: calc(100vh - 48px);
|
|
8196
|
+
overflow-y: auto;
|
|
8197
|
+
overscroll-behavior: contain;
|
|
8198
|
+
margin: 0;
|
|
8199
|
+
max-width: 100%;
|
|
8200
|
+
padding: 18px 18px 18px 20px;
|
|
8201
|
+
background: var(--panel-1);
|
|
8202
|
+
border-radius: 10px;
|
|
8203
|
+
box-shadow: var(--panel-shadow);
|
|
8204
|
+
scrollbar-width: thin;
|
|
8205
|
+
scrollbar-color: var(--panel-3) transparent;
|
|
8206
|
+
}
|
|
8207
|
+
.ds-247420 #ds-article-host.has-toc > .toc::-webkit-scrollbar { width: 8px; }
|
|
8208
|
+
.ds-247420 #ds-article-host.has-toc > .toc::-webkit-scrollbar-track { background: transparent; }
|
|
8209
|
+
.ds-247420 #ds-article-host.has-toc > .toc::-webkit-scrollbar-thumb {
|
|
8210
|
+
background: var(--panel-3);
|
|
8211
|
+
border-radius: 8px;
|
|
8212
|
+
border: 2px solid transparent;
|
|
8213
|
+
background-clip: padding-box;
|
|
8214
|
+
}
|
|
8215
|
+
.ds-247420 #ds-article-host.has-toc > .toc::-webkit-scrollbar-thumb:hover {
|
|
8216
|
+
background: var(--panel-text-3);
|
|
8217
|
+
background-clip: padding-box;
|
|
8218
|
+
}
|
|
8219
|
+
.ds-247420 #ds-article-host .toc .toc-title {
|
|
8220
|
+
font-family: var(--ff-mono);
|
|
8221
|
+
font-size: 11px;
|
|
8222
|
+
text-transform: uppercase;
|
|
8223
|
+
letter-spacing: .09em;
|
|
8224
|
+
color: var(--panel-text-2);
|
|
8225
|
+
margin: 0 0 14px 0;
|
|
8226
|
+
}
|
|
8227
|
+
.ds-247420 #ds-article-host .toc ol { margin: 0; padding-left: 18px; }
|
|
8228
|
+
.ds-247420 #ds-article-host .toc li { font-size: 13px; line-height: 1.85; color: var(--panel-text); }
|
|
8229
|
+
.ds-247420 #ds-article-host .toc li::marker { color: var(--panel-text-3); font-variant-numeric: tabular-nums; }
|
|
8230
|
+
.ds-247420 #ds-article-host .toc a { color: var(--panel-text-2); text-decoration: none; transition: color .12s ease; }
|
|
8231
|
+
.ds-247420 #ds-article-host .toc a:hover { color: var(--panel-accent); }
|
|
8232
|
+
.ds-247420 #ds-article-host.has-toc > .article-col > * { min-width: 0; }
|
|
8233
|
+
@media (max-width: 900px) {
|
|
8234
|
+
.ds-247420 #ds-article-host.has-toc { display: block; }
|
|
8235
|
+
.ds-247420 #ds-article-host.has-toc > .article-col { max-width: 100%; }
|
|
8236
|
+
.ds-247420 #ds-article-host.has-toc > .toc {
|
|
8237
|
+
position: static;
|
|
8238
|
+
max-height: none;
|
|
8239
|
+
overflow: visible;
|
|
8240
|
+
margin: 0 0 28px 0;
|
|
8241
|
+
}
|
|
8242
|
+
}
|
|
8243
|
+
|
|
8244
|
+
.ds-247420 .cli {
|
|
8245
|
+
display: block;
|
|
8246
|
+
background: var(--panel-1);
|
|
8247
|
+
border-radius: 8px;
|
|
8248
|
+
padding: 16px 20px;
|
|
8249
|
+
margin: 16px 0 28px 0;
|
|
8250
|
+
font-family: var(--ff-mono);
|
|
8251
|
+
font-size: 12.5px;
|
|
8252
|
+
line-height: 1.6;
|
|
8253
|
+
color: var(--panel-text);
|
|
8254
|
+
box-shadow: var(--panel-shadow);
|
|
8255
|
+
overflow-x: auto;
|
|
8256
|
+
white-space: pre-wrap;
|
|
8257
|
+
word-break: break-word;
|
|
8258
|
+
}
|
|
8259
|
+
.ds-247420 .cli .cli-cmt {
|
|
8260
|
+
color: var(--panel-text-3);
|
|
8261
|
+
white-space: pre-wrap;
|
|
8262
|
+
word-break: break-word;
|
|
8263
|
+
min-height: 1.4em;
|
|
8264
|
+
padding: 3px 0;
|
|
8265
|
+
line-height: 1.6;
|
|
8266
|
+
}
|
|
8267
|
+
.ds-247420 .cli .cli-cmt:empty::before { content: '\00a0'; }
|
|
8268
|
+
.ds-247420 .cli .cli-line {
|
|
8269
|
+
display: flex;
|
|
8270
|
+
gap: 10px;
|
|
8271
|
+
padding: 3px 0;
|
|
8272
|
+
white-space: pre-wrap;
|
|
8273
|
+
word-break: break-word;
|
|
8274
|
+
}
|
|
8275
|
+
.ds-247420 .cli .cli-line .prompt {
|
|
8276
|
+
color: var(--panel-accent);
|
|
8277
|
+
flex: 0 0 auto;
|
|
8278
|
+
user-select: none;
|
|
8279
|
+
}
|
|
8280
|
+
.ds-247420 .cli .cli-line .cmd {
|
|
8281
|
+
color: var(--panel-text);
|
|
8282
|
+
flex: 1 1 auto;
|
|
8283
|
+
white-space: pre-wrap;
|
|
8284
|
+
word-break: break-word;
|
|
8285
|
+
}
|
|
8286
|
+
|
|
8287
|
+
.ds-247420 .panel .row { align-items: flex-start; padding: 16px 20px; gap: 16px; }
|
|
8288
|
+
.ds-247420 .panel .row + .row { box-shadow: inset 0 1px 0 var(--rule); }
|
|
8289
|
+
.ds-247420 .panel .row .code { padding-top: 2px; min-width: 28px; }
|
|
8290
|
+
.ds-247420 .panel .row .meta { padding-top: 2px; opacity: 0.4; }
|
|
8291
|
+
.ds-247420 .panel .row .title { display: block; line-height: 1.4; }
|
|
8292
|
+
.ds-247420 .panel .row .title .sub {
|
|
8293
|
+
display: block;
|
|
8294
|
+
margin-top: 6px;
|
|
8295
|
+
font-weight: 400;
|
|
8296
|
+
color: var(--panel-text-2);
|
|
8297
|
+
font-size: 13px;
|
|
8298
|
+
line-height: 1.6;
|
|
8299
|
+
}
|
|
8300
|
+
|
|
8301
|
+
.ds-247420 .ds-prose .card {
|
|
8302
|
+
display: flex;
|
|
8303
|
+
flex-direction: column;
|
|
8304
|
+
gap: 8px;
|
|
8305
|
+
padding: 14px 18px;
|
|
8306
|
+
margin: 8px 0;
|
|
8307
|
+
background: var(--panel-1);
|
|
8308
|
+
border-radius: 6px;
|
|
8309
|
+
font-size: 13px;
|
|
8310
|
+
box-shadow: var(--panel-shadow);
|
|
8311
|
+
text-decoration: none;
|
|
8312
|
+
}
|
|
8313
|
+
.ds-247420 .ds-prose .card:hover { background: var(--panel-hover); }
|
|
8314
|
+
.ds-247420 .ds-prose .card .card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
|
|
8315
|
+
.ds-247420 .ds-prose .card .repo-name { font-weight: 600; color: var(--panel-text); }
|
|
8316
|
+
.ds-247420 .ds-prose .card .stars { color: var(--panel-text-3); font-family: var(--ff-mono); font-size: 12px; flex: 0 0 auto; }
|
|
8317
|
+
.ds-247420 .ds-prose .card .desc { color: var(--panel-text-2); font-size: 12px; line-height: 1.5; margin: 0; }
|
|
8318
|
+
.ds-247420 .ds-prose .tags { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
8319
|
+
.ds-247420 .ds-prose .tag {
|
|
8320
|
+
background: var(--panel-2);
|
|
8321
|
+
color: var(--panel-text-2);
|
|
8322
|
+
border: 1px solid var(--panel-3);
|
|
8323
|
+
font-size: 0.7rem;
|
|
8324
|
+
padding: 0.15rem 0.5rem;
|
|
8325
|
+
border-radius: 3px;
|
|
8326
|
+
font-family: var(--ff-mono);
|
|
8327
|
+
}
|
|
8328
|
+
.ds-247420 .ds-prose .gm-callout {
|
|
8329
|
+
margin: 18px 0;
|
|
8330
|
+
padding: 14px 18px;
|
|
8331
|
+
background: var(--panel-1);
|
|
8332
|
+
border-left: 3px solid var(--panel-accent);
|
|
8333
|
+
color: var(--panel-text);
|
|
8334
|
+
}
|
|
8335
|
+
.ds-247420 .ds-prose .gm-callout .who {
|
|
8336
|
+
display: block;
|
|
8337
|
+
font-family: var(--ff-mono);
|
|
8338
|
+
font-size: 11px;
|
|
8339
|
+
text-transform: uppercase;
|
|
8340
|
+
letter-spacing: .08em;
|
|
8341
|
+
color: var(--panel-text-2);
|
|
8342
|
+
margin-bottom: 4px;
|
|
8343
|
+
}
|
|
8344
|
+
|
|
7992
8345
|
/* marketing.css */
|
|
7993
8346
|
/* marketing.css — landing / docs site surface family (the agentgui flatspace
|
|
7994
8347
|
* site renderer composes these instead of carrying inline style= props). Every
|