anentrypoint-design 0.0.291 → 0.0.293
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.
- package/app-shell.css +48 -40
- package/colors_and_type.css +22 -1
- package/community.css +1 -1
- package/dist/247420.css +73 -44
- package/dist/247420.js +12 -12
- package/package.json +1 -1
- package/src/components/agent-chat.js +1 -1
package/dist/247420.css
CHANGED
|
@@ -92,7 +92,11 @@
|
|
|
92
92
|
--accent-fg: var(--ink);
|
|
93
93
|
--accent-ink: var(--acid-deep);
|
|
94
94
|
--accent-bright: var(--acid); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */
|
|
95
|
-
--accent-
|
|
95
|
+
/* Blends --accent-ink (the readable/darker ink variant), not the raw
|
|
96
|
+
--accent fill, so light-theme active states clear contrast against --bg;
|
|
97
|
+
dark/ink and auto-dark restate the prior --accent-based value explicitly
|
|
98
|
+
below so this change does not leak into them via inheritance. */
|
|
99
|
+
--accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
|
|
96
100
|
|
|
97
101
|
/* On-color foregrounds — text/icons that sit ON a saturated fill (accent,
|
|
98
102
|
danger, category chips). Theme-driven so white-on-color never hard-codes
|
|
@@ -329,6 +333,9 @@
|
|
|
329
333
|
--accent-fg: var(--ink);
|
|
330
334
|
--accent-ink: var(--acid); /* on ink, the lime itself reads as bright text */
|
|
331
335
|
--accent-bright: var(--acid);
|
|
336
|
+
/* Preserves the prior --accent-based blend for dark; the :root light-theme
|
|
337
|
+
value above was retuned to blend --accent-ink instead. */
|
|
338
|
+
--accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
|
|
332
339
|
--danger: oklch(0.68 0.19 25);
|
|
333
340
|
--flame: #FF5A1F;
|
|
334
341
|
--amber: #D9A93A;
|
|
@@ -343,6 +350,14 @@
|
|
|
343
350
|
--code-num: var(--sun);
|
|
344
351
|
}
|
|
345
352
|
|
|
353
|
+
/* Restores the pre-existing (weaker) dark-theme selection tint after the
|
|
354
|
+
light-theme-only bump in app-shell.css's base ::selection rule. */
|
|
355
|
+
.ds-247420[data-theme="ink"] ::selection,
|
|
356
|
+
.ds-247420[data-theme="dark"] ::selection {
|
|
357
|
+
background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
|
|
358
|
+
color: var(--fg);
|
|
359
|
+
}
|
|
360
|
+
|
|
346
361
|
/* NOTE: the [data-theme="auto"] block below mirrors the
|
|
347
362
|
[data-theme="ink"/"dark"] block above token-for-token. 'auto + OS-dark' and
|
|
348
363
|
'explicit dark' are the same visual context and resolve every token —
|
|
@@ -370,6 +385,7 @@
|
|
|
370
385
|
--accent-fg: var(--ink);
|
|
371
386
|
--accent-ink: var(--acid);
|
|
372
387
|
--accent-bright: var(--acid);
|
|
388
|
+
--accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg));
|
|
373
389
|
--danger: oklch(0.68 0.19 25);
|
|
374
390
|
--flame: #FF5A1F;
|
|
375
391
|
--amber: #D9A93A;
|
|
@@ -381,6 +397,10 @@
|
|
|
381
397
|
--code-str-alt: var(--mascot);
|
|
382
398
|
--code-num: var(--sun);
|
|
383
399
|
}
|
|
400
|
+
.ds-247420[data-theme="auto"] ::selection {
|
|
401
|
+
background: color-mix(in oklab, var(--accent) 24%, var(--bg-2));
|
|
402
|
+
color: var(--fg);
|
|
403
|
+
}
|
|
384
404
|
}
|
|
385
405
|
|
|
386
406
|
/* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g.
|
|
@@ -440,6 +460,7 @@
|
|
|
440
460
|
--bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
|
|
441
461
|
--fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
|
|
442
462
|
--accent: var(--acid); --accent-fg: var(--ink); --accent-ink: var(--acid-deep);
|
|
463
|
+
--accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg));
|
|
443
464
|
/* A paper island under a dark ancestor must not inherit the dark signal pair. */
|
|
444
465
|
--flame: #C53E00; --amber: #7C570F; --warn: #E0241A; --sky: #3A6EFF;
|
|
445
466
|
}
|
|
@@ -546,8 +567,8 @@
|
|
|
546
567
|
}
|
|
547
568
|
.ds-247420 .skip-link:focus {
|
|
548
569
|
top: 10px;
|
|
549
|
-
outline:
|
|
550
|
-
outline-offset:
|
|
570
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
571
|
+
outline-offset: var(--focus-offset);
|
|
551
572
|
}
|
|
552
573
|
.ds-247420 body {
|
|
553
574
|
background: var(--bg);
|
|
@@ -558,7 +579,12 @@
|
|
|
558
579
|
-webkit-font-smoothing: antialiased;
|
|
559
580
|
text-rendering: optimizeLegibility;
|
|
560
581
|
}
|
|
561
|
-
|
|
582
|
+
/* Light (paper, the default theme) needs a stronger accent share than dark to
|
|
583
|
+
clear a visible selection tint against --bg-2 -- the dark-theme value (24%)
|
|
584
|
+
read too weak on paper. Dark/ink keeps its existing 24% mix, restored below
|
|
585
|
+
in the ink/dark + auto-dark blocks (mirrors the --danger/--flame pattern of
|
|
586
|
+
scoping a value per theme rather than sharing one across both). */
|
|
587
|
+
.ds-247420 ::selection { background: color-mix(in oklab, var(--accent) 46%, var(--bg-2)); color: var(--fg); }
|
|
562
588
|
|
|
563
589
|
/* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
|
|
564
590
|
.ds-247420 .app, .ds-247420 .ds-stage {
|
|
@@ -763,8 +789,8 @@
|
|
|
763
789
|
}
|
|
764
790
|
.ds-247420 .app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); }
|
|
765
791
|
.ds-247420 .app-topbar nav a:focus-visible {
|
|
766
|
-
outline:
|
|
767
|
-
outline-offset:
|
|
792
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
793
|
+
outline-offset: var(--focus-offset);
|
|
768
794
|
}
|
|
769
795
|
/* Active tab reads as a subtle tinted pill with an accent underline rather than
|
|
770
796
|
an oversized filled oval that sits taller than its inactive siblings and reads
|
|
@@ -799,8 +825,8 @@
|
|
|
799
825
|
width: 100%;
|
|
800
826
|
}
|
|
801
827
|
.ds-247420 .app-search:focus-within {
|
|
802
|
-
outline:
|
|
803
|
-
outline-offset:
|
|
828
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
829
|
+
outline-offset: var(--focus-offset);
|
|
804
830
|
}
|
|
805
831
|
|
|
806
832
|
.ds-247420 .app-crumb {
|
|
@@ -841,8 +867,8 @@
|
|
|
841
867
|
}
|
|
842
868
|
.ds-247420 .app-side a:hover { background: var(--bg-2); color: var(--fg); }
|
|
843
869
|
.ds-247420 .app-side a:focus-visible {
|
|
844
|
-
outline:
|
|
845
|
-
outline-offset:
|
|
870
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
871
|
+
outline-offset: var(--focus-offset);
|
|
846
872
|
}
|
|
847
873
|
.ds-247420 .app-side a.active {
|
|
848
874
|
color: var(--accent-fg);
|
|
@@ -1101,7 +1127,7 @@
|
|
|
1101
1127
|
background: var(--panel-1, var(--bg-2));
|
|
1102
1128
|
border: var(--bw-hair) solid var(--rule);
|
|
1103
1129
|
border-radius: var(--r-2);
|
|
1104
|
-
margin: 0 0 var(--space-
|
|
1130
|
+
margin: 0 0 var(--space-4);
|
|
1105
1131
|
padding: var(--space-3);
|
|
1106
1132
|
position: relative;
|
|
1107
1133
|
/* Crisp, restrained elevation — a hairline border does the edge definition;
|
|
@@ -1249,6 +1275,9 @@
|
|
|
1249
1275
|
.ds-247420[data-typescale="app"] .row { padding: 12px 16px; }
|
|
1250
1276
|
.ds-247420[data-typescale="app"] .row .title { font-size: var(--fs-sm); font-weight: 500; }
|
|
1251
1277
|
.ds-247420 .row .sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
|
|
1278
|
+
/* Context-pane cwd fact reads as a path (like .ds-dash-cwd/.ds-session-agent/
|
|
1279
|
+
.ds-dash-model) -- scoped to that one row so no other Row .sub is affected. */
|
|
1280
|
+
.ds-247420 .ds-context-cwd-row .row .sub { font-family: var(--ff-mono); }
|
|
1252
1281
|
.ds-247420 .row .meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
|
|
1253
1282
|
/* WorksList meta pairs a label with a disclosure chevron, inline-aligned. */
|
|
1254
1283
|
.ds-247420 .ds-works-meta { display: inline-flex; align-items: center; gap: .4em; }
|
|
@@ -1517,7 +1546,7 @@
|
|
|
1517
1546
|
.ds-247420 table tr.clickable { cursor: pointer; }
|
|
1518
1547
|
.ds-247420 table tr.clickable:hover td { background: var(--bg-2); }
|
|
1519
1548
|
.ds-247420 table tr.clickable:focus-visible {
|
|
1520
|
-
outline:
|
|
1549
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
1521
1550
|
outline-offset: -2px;
|
|
1522
1551
|
}
|
|
1523
1552
|
.ds-247420 table tr.clickable:focus-visible td { background: var(--bg-2); }
|
|
@@ -1958,7 +1987,7 @@
|
|
|
1958
1987
|
flex-direction: column;
|
|
1959
1988
|
gap: 4px;
|
|
1960
1989
|
}
|
|
1961
|
-
.ds-247420 .ds-file-grid:focus-visible { outline:
|
|
1990
|
+
.ds-247420 .ds-file-grid:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-2); }
|
|
1962
1991
|
|
|
1963
1992
|
/* Listing wrapper holds the optional filter + sort header above the grid. */
|
|
1964
1993
|
.ds-247420 .ds-file-listing { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
|
|
@@ -1980,7 +2009,7 @@
|
|
|
1980
2009
|
}
|
|
1981
2010
|
.ds-247420 .ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
|
|
1982
2011
|
.ds-247420 .ds-file-sort-btn.active { color: var(--accent-ink); }
|
|
1983
|
-
.ds-247420 .ds-file-sort-btn:focus-visible { outline:
|
|
2012
|
+
.ds-247420 .ds-file-sort-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
1984
2013
|
|
|
1985
2014
|
/* Skeleton shimmer rows shown while a directory loads. */
|
|
1986
2015
|
.ds-247420 .ds-file-row-skeleton { cursor: default; pointer-events: none; }
|
|
@@ -2028,7 +2057,7 @@
|
|
|
2028
2057
|
color: inherit; font: inherit; text-align: left; cursor: pointer;
|
|
2029
2058
|
}
|
|
2030
2059
|
.ds-247420 .ds-file-open[disabled] { cursor: default; }
|
|
2031
|
-
.ds-247420 .ds-file-open:focus-visible { outline:
|
|
2060
|
+
.ds-247420 .ds-file-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
|
|
2032
2061
|
.ds-247420 .ds-file-row:hover {
|
|
2033
2062
|
background: var(--bg-2);
|
|
2034
2063
|
border-color: var(--rule);
|
|
@@ -2132,7 +2161,7 @@
|
|
|
2132
2161
|
}
|
|
2133
2162
|
.ds-247420 .ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
|
|
2134
2163
|
.ds-247420 .ds-file-check.is-marked { color: var(--accent-ink); }
|
|
2135
|
-
.ds-247420 .ds-file-check:focus-visible { outline:
|
|
2164
|
+
.ds-247420 .ds-file-check:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
2136
2165
|
.ds-247420 .ds-file-check[disabled] { opacity: 0.4; cursor: default; }
|
|
2137
2166
|
.ds-247420 .ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
|
|
2138
2167
|
.ds-247420 .ds-file-selectall {
|
|
@@ -2142,7 +2171,7 @@
|
|
|
2142
2171
|
padding: var(--space-1); border-radius: var(--r-1);
|
|
2143
2172
|
}
|
|
2144
2173
|
.ds-247420 .ds-file-selectall:hover { background: var(--bg-2); color: var(--fg); }
|
|
2145
|
-
.ds-247420 .ds-file-selectall:focus-visible { outline:
|
|
2174
|
+
.ds-247420 .ds-file-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
2146
2175
|
.ds-247420 .ds-file-controls { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); flex-wrap: wrap; }
|
|
2147
2176
|
.ds-247420 .ds-file-controls .spread { flex: 1 1 auto; }
|
|
2148
2177
|
.ds-247420 .ds-file-controls .ds-file-sort { padding: 0; }
|
|
@@ -2180,7 +2209,7 @@
|
|
|
2180
2209
|
}
|
|
2181
2210
|
.ds-247420 .ds-density-btn:hover { color: var(--fg); }
|
|
2182
2211
|
.ds-247420 .ds-density-btn.active { background: var(--accent-tint); color: var(--fg); }
|
|
2183
|
-
.ds-247420 .ds-density-btn:focus-visible { outline:
|
|
2212
|
+
.ds-247420 .ds-density-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
2184
2213
|
|
|
2185
2214
|
/* Compact density — tighter rows for long listings. */
|
|
2186
2215
|
.ds-247420 .ds-file-grid[data-density="compact"] { gap: 2px; }
|
|
@@ -2218,7 +2247,7 @@
|
|
|
2218
2247
|
background: none; border: none; cursor: pointer; color: var(--fg);
|
|
2219
2248
|
}
|
|
2220
2249
|
.ds-247420 .ds-file-cell-open[disabled] { cursor: default; }
|
|
2221
|
-
.ds-247420 .ds-file-cell-open:focus-visible { outline:
|
|
2250
|
+
.ds-247420 .ds-file-cell-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; border-radius: var(--r-2); }
|
|
2222
2251
|
.ds-247420 .ds-file-cell-media {
|
|
2223
2252
|
display: flex; align-items: center; justify-content: center;
|
|
2224
2253
|
width: 100%; aspect-ratio: 4 / 3;
|
|
@@ -2458,7 +2487,7 @@
|
|
|
2458
2487
|
color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
|
|
2459
2488
|
}
|
|
2460
2489
|
.ds-247420 .ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
|
|
2461
|
-
.ds-247420 .ds-upload-act:focus-visible { outline:
|
|
2490
|
+
.ds-247420 .ds-upload-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
2462
2491
|
@media (hover: none), (pointer: coarse) {
|
|
2463
2492
|
.ds-247420 .ds-upload-act { min-height: 44px; min-width: 44px; }
|
|
2464
2493
|
/* 44px floor for file controls on ANY touch device, not only narrow ones
|
|
@@ -2529,7 +2558,7 @@
|
|
|
2529
2558
|
border-radius: var(--r-2); color: var(--fg);
|
|
2530
2559
|
font-family: inherit; font-size: var(--fs-sm);
|
|
2531
2560
|
}
|
|
2532
|
-
.ds-247420 .ds-modal-input:focus-visible { outline:
|
|
2561
|
+
.ds-247420 .ds-modal-input:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
2533
2562
|
/* iOS auto-zooms inputs under 16px on focus, breaking the modal layout. */
|
|
2534
2563
|
@media (hover: none), (pointer: coarse) {
|
|
2535
2564
|
.ds-247420 .ds-modal-input { font-size: 16px; min-height: 44px; }
|
|
@@ -2716,7 +2745,7 @@
|
|
|
2716
2745
|
transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
|
|
2717
2746
|
}
|
|
2718
2747
|
.ds-247420 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
|
|
2719
|
-
.ds-247420 .ds-segmented .ds-seg-btn:focus-visible { outline:
|
|
2748
|
+
.ds-247420 .ds-segmented .ds-seg-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
2720
2749
|
.ds-247420 .ds-segmented .ds-seg-btn.is-on {
|
|
2721
2750
|
background: var(--bg); color: var(--fg);
|
|
2722
2751
|
box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
|
|
@@ -3162,12 +3191,12 @@
|
|
|
3162
3191
|
transition: background var(--dur-snap, .15s) var(--ease, ease), color var(--dur-snap, .15s) var(--ease, ease);
|
|
3163
3192
|
}
|
|
3164
3193
|
.ds-247420 .composer-btn:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
|
|
3165
|
-
.ds-247420 .chat-composer .send:hover { filter: brightness(
|
|
3194
|
+
.ds-247420 .chat-composer .send:hover { filter: brightness(0.92); }
|
|
3166
3195
|
.ds-247420 .chat-composer .send:active { filter: brightness(0.94); }
|
|
3167
3196
|
.ds-247420 .chat-composer .send:focus-visible,
|
|
3168
3197
|
.ds-247420 .composer-btn:focus-visible {
|
|
3169
|
-
outline:
|
|
3170
|
-
outline-offset:
|
|
3198
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
3199
|
+
outline-offset: var(--focus-offset);
|
|
3171
3200
|
}
|
|
3172
3201
|
.ds-247420 .chat-composer .send:disabled {
|
|
3173
3202
|
background: var(--bg-3); color: var(--fg-3); cursor: not-allowed; transform: none;
|
|
@@ -3700,8 +3729,8 @@
|
|
|
3700
3729
|
|
|
3701
3730
|
/* Base focus-visible: 2px ring + 2px offset clears dark bg-3 surfaces (WCAG 1.4.11) */
|
|
3702
3731
|
.ds-247420 :focus-visible {
|
|
3703
|
-
outline:
|
|
3704
|
-
outline-offset:
|
|
3732
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
3733
|
+
outline-offset: var(--focus-offset);
|
|
3705
3734
|
}
|
|
3706
3735
|
|
|
3707
3736
|
/* Enhanced focus-visible for all interactive elements */
|
|
@@ -3710,8 +3739,8 @@
|
|
|
3710
3739
|
.ds-247420[role="tab"]:focus-visible,
|
|
3711
3740
|
.ds-247420 .row:focus-visible,
|
|
3712
3741
|
.ds-247420 .row[tabindex]:focus-visible {
|
|
3713
|
-
outline:
|
|
3714
|
-
outline-offset:
|
|
3742
|
+
outline: var(--focus-w) solid var(--focus-color);
|
|
3743
|
+
outline-offset: var(--focus-offset);
|
|
3715
3744
|
}
|
|
3716
3745
|
|
|
3717
3746
|
/* Skip to main content link */
|
|
@@ -4100,7 +4129,7 @@
|
|
|
4100
4129
|
border-radius: var(--r-1, 6px);
|
|
4101
4130
|
cursor: pointer;
|
|
4102
4131
|
}
|
|
4103
|
-
.ds-247420 .app-side-toggle:focus-visible { outline:
|
|
4132
|
+
.ds-247420 .app-side-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
4104
4133
|
@container (max-width: 900px) {
|
|
4105
4134
|
.ds-247420 .app-side-toggle { display: inline-flex; }
|
|
4106
4135
|
.ds-247420 .app-topbar .brand { margin-left: 44px; }
|
|
@@ -4194,7 +4223,7 @@
|
|
|
4194
4223
|
.ds-247420 .ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: 5; cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; }
|
|
4195
4224
|
.ds-247420 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
|
|
4196
4225
|
.ds-247420 .ws-resizer:hover::after, .ds-247420 .ws-resizer:focus-visible::after { background: var(--accent); }
|
|
4197
|
-
.ds-247420 .ws-resizer:focus-visible { outline:
|
|
4226
|
+
.ds-247420 .ws-resizer:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
|
|
4198
4227
|
.ds-247420 .ws-resizer.ws-resizer-rail { grid-column: 1; }
|
|
4199
4228
|
.ds-247420 .ws-resizer.ws-resizer-sessions { grid-column: 2; }
|
|
4200
4229
|
.ds-247420 .ws-resizer.ws-resizer-pane { grid-column: 3; justify-self: end; }
|
|
@@ -4246,7 +4275,7 @@
|
|
|
4246
4275
|
border-radius: var(--r-1); cursor: pointer;
|
|
4247
4276
|
}
|
|
4248
4277
|
.ds-247420 .ws-rail-toggle:hover { background: var(--bg-3); color: var(--fg); }
|
|
4249
|
-
.ds-247420 .ws-rail-toggle:focus-visible { outline:
|
|
4278
|
+
.ds-247420 .ws-rail-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
4250
4279
|
.ds-247420 .ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
|
|
4251
4280
|
.ds-247420 .ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
|
|
4252
4281
|
.ds-247420 .ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
|
|
@@ -4258,8 +4287,8 @@
|
|
|
4258
4287
|
font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600;
|
|
4259
4288
|
min-height: 40px; white-space: nowrap; overflow: hidden;
|
|
4260
4289
|
}
|
|
4261
|
-
.ds-247420 .ws-rail-action:hover { filter: brightness(
|
|
4262
|
-
.ds-247420 .ws-rail-action:focus-visible { outline:
|
|
4290
|
+
.ds-247420 .ws-rail-action:hover { filter: brightness(0.92); }
|
|
4291
|
+
.ds-247420 .ws-rail-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
4263
4292
|
.ds-247420 .ws-rail-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
|
|
4264
4293
|
.ds-247420 .ws-rail-item {
|
|
4265
4294
|
display: flex; align-items: center; gap: var(--space-2);
|
|
@@ -4269,7 +4298,7 @@
|
|
|
4269
4298
|
font-family: var(--ff-body); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
|
|
4270
4299
|
}
|
|
4271
4300
|
.ds-247420 .ws-rail-item:hover { background: var(--bg-3); color: var(--fg); }
|
|
4272
|
-
.ds-247420 .ws-rail-item:focus-visible { outline:
|
|
4301
|
+
.ds-247420 .ws-rail-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
|
|
4273
4302
|
.ds-247420 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
|
|
4274
4303
|
.ds-247420 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
|
|
4275
4304
|
.ds-247420 .ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
|
|
@@ -4342,7 +4371,7 @@
|
|
|
4342
4371
|
/* Desktop-only chrome toggle (sessions collapse): inverse of the mobile drawer-toggle. */
|
|
4343
4372
|
.ds-247420 .ws-desktop-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--fg-2); cursor: pointer; border-radius: var(--r-1); }
|
|
4344
4373
|
.ds-247420 .ws-desktop-toggle:hover { background: var(--bg-2); color: var(--fg); }
|
|
4345
|
-
.ds-247420 .ws-desktop-toggle:focus-visible { outline:
|
|
4374
|
+
.ds-247420 .ws-desktop-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
4346
4375
|
@media (max-width: 900px) { .ds-247420 .ws-desktop-toggle { display: none; } }
|
|
4347
4376
|
/* The pane collapse toggle is meaningless once the pane TRACK is dropped (the
|
|
4348
4377
|
pane becomes a mobile overlay drawer at <=1480px, reached via its own
|
|
@@ -4466,7 +4495,7 @@
|
|
|
4466
4495
|
.ds-247420 .ws-crumb .app-crumb .crumb-right { margin-left: 0; flex-wrap: wrap; min-width: 0; display: inline-flex; }
|
|
4467
4496
|
}
|
|
4468
4497
|
.ds-247420 .ws-drawer-toggle:hover { background: var(--bg-2); color: var(--fg); }
|
|
4469
|
-
.ds-247420 .ws-drawer-toggle:focus-visible { outline:
|
|
4498
|
+
.ds-247420 .ws-drawer-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
4470
4499
|
|
|
4471
4500
|
@media (prefers-reduced-motion: reduce) {
|
|
4472
4501
|
.ds-247420 .ws-shell, .ds-247420 .ws-rail, .ds-247420 .ws-pane, .ds-247420 .ws-sessions, .ds-247420 .ws-scrim { transition: none; }
|
|
@@ -4491,7 +4520,7 @@
|
|
|
4491
4520
|
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
4492
4521
|
}
|
|
4493
4522
|
.ds-247420 .row-act:hover { background: var(--bg-3); color: var(--fg); }
|
|
4494
|
-
.ds-247420 .row-act:focus-visible { outline:
|
|
4523
|
+
.ds-247420 .row-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
4495
4524
|
|
|
4496
4525
|
/* FilterPills - a group of pill toggle buttons (aria-pressed). */
|
|
4497
4526
|
.ds-247420 .ds-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
|
@@ -4504,7 +4533,7 @@
|
|
|
4504
4533
|
}
|
|
4505
4534
|
.ds-247420 .ds-filter-pill:hover { background: var(--bg-3); color: var(--fg); }
|
|
4506
4535
|
.ds-247420 .ds-filter-pill.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
|
|
4507
|
-
.ds-247420 .ds-filter-pill:focus-visible { outline:
|
|
4536
|
+
.ds-247420 .ds-filter-pill:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
4508
4537
|
|
|
4509
4538
|
/* Touch floor for the new small controls. */
|
|
4510
4539
|
@media (pointer: coarse) {
|
|
@@ -4514,7 +4543,7 @@
|
|
|
4514
4543
|
/* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
|
|
4515
4544
|
.ds-247420 .ds-file-act:disabled { opacity: .45; cursor: default; }
|
|
4516
4545
|
.ds-247420 .ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
|
|
4517
|
-
.ds-247420 .ds-file-act:focus-visible { outline:
|
|
4546
|
+
.ds-247420 .ds-file-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
4518
4547
|
|
|
4519
4548
|
/* ============================================================
|
|
4520
4549
|
Print — linearize WorkspaceShell so main content prints in full.
|
|
@@ -4838,7 +4867,7 @@
|
|
|
4838
4867
|
.ds-feature above), so the hover affordance is a lift, matching the same
|
|
4839
4868
|
translateY + shadow idiom .chat-msg:hover .chat-bubble already uses. */
|
|
4840
4869
|
.ds-247420 .ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
|
|
4841
|
-
.ds-247420 .ds-gallery-tile:focus-visible { outline:
|
|
4870
|
+
.ds-247420 .ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
|
|
4842
4871
|
.ds-247420 .ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
|
|
4843
4872
|
.ds-247420 .ds-lightbox {
|
|
4844
4873
|
position: fixed; inset: 0; background: var(--scrim);
|
|
@@ -5197,7 +5226,7 @@
|
|
|
5197
5226
|
height: 48px;
|
|
5198
5227
|
border-radius: var(--r-3);
|
|
5199
5228
|
background: var(--bg-2);
|
|
5200
|
-
color: var(--green
|
|
5229
|
+
color: var(--green);
|
|
5201
5230
|
display: flex;
|
|
5202
5231
|
align-items: center;
|
|
5203
5232
|
justify-content: center;
|
|
@@ -8405,11 +8434,11 @@
|
|
|
8405
8434
|
.ds-247420 .ds-ep-dialog-btn.kind-primary {
|
|
8406
8435
|
background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
|
|
8407
8436
|
}
|
|
8408
|
-
.ds-247420 .ds-ep-dialog-btn.kind-primary:hover { filter: brightness(
|
|
8437
|
+
.ds-247420 .ds-ep-dialog-btn.kind-primary:hover { filter: brightness(0.92); }
|
|
8409
8438
|
.ds-247420 .ds-ep-dialog-btn.kind-danger {
|
|
8410
8439
|
background: var(--danger); color: var(--on-accent); border-color: var(--danger);
|
|
8411
8440
|
}
|
|
8412
|
-
.ds-247420 .ds-ep-dialog-btn.kind-danger:hover { filter: brightness(
|
|
8441
|
+
.ds-247420 .ds-ep-dialog-btn.kind-danger:hover { filter: brightness(0.92); }
|
|
8413
8442
|
|
|
8414
8443
|
/* ---------------------------------------------------------------
|
|
8415
8444
|
Toast
|