@materialwebunofficial/antigravity-themes 1.0.5 → 1.0.13
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/README.md +173 -34
- package/bin/cli.mjs +91 -47
- package/lib/asar.mjs +163 -0
- package/lib/bundle.mjs +70 -17
- package/lib/injector.mjs +39 -6
- package/lib/keeper.mjs +73 -0
- package/lib/native.mjs +165 -0
- package/lib/paths.mjs +3 -2
- package/lib/plugin.mjs +98 -0
- package/package.json +1 -1
- package/src/code-tools.js +1 -1
- package/src/context-card.js +1 -1
- package/src/frame-host.js +282 -0
- package/src/loading-indicator.js +1 -1
- package/src/progress-indicators.js +49 -1
- package/src/theme-host.js +97 -66
- package/src/turn-tokens.js +1 -1
- package/themes/frames/matte.css +211 -0
- package/themes/frames/md3e.css +1410 -0
- package/themes/frames/nordic.css +252 -0
- package/themes/frames/paper.css +298 -0
- package/themes/index.json +18 -12
- package/themes/matte-tokens.css +98 -0
- package/themes/matte.css +465 -135
- package/themes/md3e.css +1124 -164
- package/themes/nordic-tokens.css +60 -0
- package/themes/nordic.css +457 -67
- package/themes/paper-tokens.css +54 -0
- package/themes/paper.css +508 -68
|
@@ -0,0 +1,1410 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
AGY "Material 3 Expressive" — sidecar frames (the Swarm pane)
|
|
3
|
+
|
|
4
|
+
Loaded by frame-host.js inside the plugin:// frame, after md3e-tokens.css
|
|
5
|
+
(the same --md-sys-* tokens, seed and mode as the window). The window's
|
|
6
|
+
md3e.css never reaches a frame, and nothing here reaches the window.
|
|
7
|
+
|
|
8
|
+
Swarm is plain HTML with its own stylesheet (styles.css, hive.css): a quiet
|
|
9
|
+
monochrome board drawn from --sw-* tokens. This file maps those tokens to
|
|
10
|
+
the scheme and then restates each control as the M3 component it is:
|
|
11
|
+
primary tabs, a search bar, icon buttons, filter chips, a switch, a slider,
|
|
12
|
+
lists, filled cards, a snackbar. Structure comes from tone and shape, as in
|
|
13
|
+
the window: the only lines are the ones M3 itself draws (the tabs' divider,
|
|
14
|
+
an unselected chip's outline, the switch's track).
|
|
15
|
+
|
|
16
|
+
The Live status is the package's <md-loading-indicator> (frame-host.js).
|
|
17
|
+
|
|
18
|
+
Performance: same rules as md3e.css. Nothing loops; transitions touch only
|
|
19
|
+
color and the corner radius of small controls.
|
|
20
|
+
========================================================================== */
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
/* 00 — Helpers (md3e.css 00) and tokens ------------------------------------ */
|
|
24
|
+
:root[data-agy-theme="md3e"] {
|
|
25
|
+
color-scheme: dark;
|
|
26
|
+
--md-hover: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
|
|
27
|
+
--md-press: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
|
|
28
|
+
--md-fast: var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast-easing);
|
|
29
|
+
--md-color-fast: var(--md-sys-motion-effect-fast-duration) var(--md-sys-motion-effect-fast-easing);
|
|
30
|
+
--md-state: 15ms linear;
|
|
31
|
+
/* a list row or card: one tone above the pane */
|
|
32
|
+
--md-row: var(--md-sys-color-surface-container);
|
|
33
|
+
--md-row-hover: var(--md-sys-color-surface-container-high);
|
|
34
|
+
|
|
35
|
+
/* The app's tokens. It sends the window's values (--background there is
|
|
36
|
+
the window, not this pane), and the sidecar SDK writes them inline on
|
|
37
|
+
<html>: hence !important. This frame sits in a surface pane. */
|
|
38
|
+
--background: var(--md-sys-color-surface) !important;
|
|
39
|
+
--foreground: var(--md-sys-color-on-surface) !important;
|
|
40
|
+
--primary: var(--md-sys-color-primary) !important;
|
|
41
|
+
--primary-foreground: var(--md-sys-color-on-primary) !important;
|
|
42
|
+
--secondary: var(--md-sys-color-surface-container-highest) !important;
|
|
43
|
+
--secondary-foreground: var(--md-sys-color-on-surface-variant) !important;
|
|
44
|
+
--muted: var(--md-sys-color-surface-container) !important;
|
|
45
|
+
--muted-foreground: var(--md-sys-color-on-surface-variant) !important;
|
|
46
|
+
--placeholder: var(--md-sys-color-on-surface-variant) !important;
|
|
47
|
+
--card: var(--md-sys-color-surface-container) !important;
|
|
48
|
+
--card-border: var(--md-sys-color-outline-variant) !important;
|
|
49
|
+
--border: var(--md-sys-color-outline-variant) !important;
|
|
50
|
+
--accent: var(--md-sys-color-primary) !important;
|
|
51
|
+
--error: var(--md-sys-color-error) !important;
|
|
52
|
+
--font-family: var(--md-sys-typescale-font-family);
|
|
53
|
+
|
|
54
|
+
/* Swarm's own tokens */
|
|
55
|
+
--sw-bg: var(--md-sys-color-surface);
|
|
56
|
+
--sw-card: var(--md-sys-color-surface-container);
|
|
57
|
+
--sw-secondary: var(--md-sys-color-surface-container-highest);
|
|
58
|
+
--sw-muted: var(--md-sys-color-surface-container);
|
|
59
|
+
--sw-fg: var(--md-sys-color-on-surface);
|
|
60
|
+
--sw-fg-2: var(--md-sys-color-on-surface-variant);
|
|
61
|
+
--sw-fg-muted: var(--md-sys-color-on-surface-variant);
|
|
62
|
+
--sw-fg-faint: var(--md-sys-color-outline);
|
|
63
|
+
--sw-border: var(--md-sys-color-outline-variant);
|
|
64
|
+
--sw-card-border: var(--md-sys-color-outline-variant);
|
|
65
|
+
--sw-primary: var(--md-sys-color-primary);
|
|
66
|
+
--sw-primary-fg: var(--md-sys-color-on-primary);
|
|
67
|
+
--sw-error: var(--md-sys-color-error);
|
|
68
|
+
/* M3 has no success or warning role: active work is tertiary (as the
|
|
69
|
+
window's diff colors), anything that needs attention is error */
|
|
70
|
+
--sw-success: var(--md-sys-color-tertiary);
|
|
71
|
+
--sw-warning: var(--md-sys-color-error);
|
|
72
|
+
--sw-hover: var(--md-hover);
|
|
73
|
+
--sw-press: var(--md-press);
|
|
74
|
+
--sw-ring: var(--md-sys-color-secondary);
|
|
75
|
+
--sw-line: var(--md-sys-color-outline-variant);
|
|
76
|
+
--sw-fill: var(--md-sys-color-surface-container-high);
|
|
77
|
+
--sw-field: var(--md-sys-color-surface-container-high);
|
|
78
|
+
--sw-font: var(--md-sys-typescale-font-family);
|
|
79
|
+
--r-sm: var(--md-sys-shape-corner-extra-small);
|
|
80
|
+
--r-md: var(--md-sys-shape-corner-small);
|
|
81
|
+
--r-lg: var(--md-sys-shape-corner-medium);
|
|
82
|
+
|
|
83
|
+
}
|
|
84
|
+
:root[data-agy-theme="md3e"][data-agy-mode="light"] {
|
|
85
|
+
color-scheme: light;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
:root[data-agy-theme="md3e"] {
|
|
89
|
+
/* Roboto, at its own width: Swarm sets Google Sans Flex axes on <body>
|
|
90
|
+
and the headings (wdth 92 would condense Roboto) */
|
|
91
|
+
body,
|
|
92
|
+
h1, h2, h3, .swarm-title, .o2-h, .o2-goal > b, .o2-lb b, .o2-cb b, .o2-tht b {
|
|
93
|
+
font-variation-settings: normal;
|
|
94
|
+
}
|
|
95
|
+
/* Scrollbars: Swarm styles a slim thumb (::-webkit-scrollbar), but its
|
|
96
|
+
scrollbar-width: thin on every element switches Chromium to the native
|
|
97
|
+
bar, arrow buttons and all, and those rules never apply */
|
|
98
|
+
&,
|
|
99
|
+
* {
|
|
100
|
+
scrollbar-width: auto;
|
|
101
|
+
scrollbar-color: auto;
|
|
102
|
+
}
|
|
103
|
+
body {
|
|
104
|
+
background: var(--sw-bg) !important; /* the SDK's inline body background is the window's */
|
|
105
|
+
font: var(--md-sys-typescale-body-medium);
|
|
106
|
+
font-family: var(--sw-font) !important;
|
|
107
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
108
|
+
}
|
|
109
|
+
/* M3 focus indicator: 3px secondary, 2px out */
|
|
110
|
+
:focus-visible {
|
|
111
|
+
outline: 3px solid var(--md-sys-color-secondary);
|
|
112
|
+
outline-offset: 2px;
|
|
113
|
+
}
|
|
114
|
+
code {
|
|
115
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
116
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
117
|
+
}
|
|
118
|
+
pre {
|
|
119
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
120
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
121
|
+
}
|
|
122
|
+
pre code {
|
|
123
|
+
background: none;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
/* 10 — Header: title, Live status, primary tabs ---------------------------- */
|
|
129
|
+
:root[data-agy-theme="md3e"] {
|
|
130
|
+
/* The header's bottom rule is the tabs' divider (1dp outline-variant, full
|
|
131
|
+
width): the one line in the pane */
|
|
132
|
+
.header {
|
|
133
|
+
gap: 0;
|
|
134
|
+
padding-top: 12px;
|
|
135
|
+
border-bottom-color: var(--md-sys-color-outline-variant);
|
|
136
|
+
}
|
|
137
|
+
.header-row {
|
|
138
|
+
min-height: 32px;
|
|
139
|
+
}
|
|
140
|
+
.swarm-title {
|
|
141
|
+
font: var(--md-sys-typescale-title-medium);
|
|
142
|
+
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
|
|
143
|
+
color: var(--md-sys-color-on-surface);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Live: the loading indicator at rest (frame-host.js) and a label, on no
|
|
147
|
+
container. Reconnecting runs the indicator; new posts morph it. */
|
|
148
|
+
#live {
|
|
149
|
+
height: 32px;
|
|
150
|
+
gap: 4px;
|
|
151
|
+
padding: 0;
|
|
152
|
+
border: 0;
|
|
153
|
+
border-radius: 0;
|
|
154
|
+
background: none;
|
|
155
|
+
font: var(--md-sys-typescale-label-large);
|
|
156
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
157
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
158
|
+
transition: color var(--md-color-fast);
|
|
159
|
+
}
|
|
160
|
+
#live.flash {
|
|
161
|
+
background: none;
|
|
162
|
+
color: var(--md-sys-color-on-surface);
|
|
163
|
+
}
|
|
164
|
+
.agy-live {
|
|
165
|
+
flex: none;
|
|
166
|
+
display: block;
|
|
167
|
+
width: 24px;
|
|
168
|
+
height: 24px;
|
|
169
|
+
}
|
|
170
|
+
/* No halo anywhere; where the component stands in, no dot either. Without
|
|
171
|
+
the component (vendor script missing) the dot stays, as an M3 small badge */
|
|
172
|
+
.live-dot::after {
|
|
173
|
+
content: none;
|
|
174
|
+
}
|
|
175
|
+
.live-dot {
|
|
176
|
+
width: 6px;
|
|
177
|
+
height: 6px;
|
|
178
|
+
background: var(--md-sys-color-primary);
|
|
179
|
+
}
|
|
180
|
+
#live.stale .live-dot {
|
|
181
|
+
background: var(--md-sys-color-error);
|
|
182
|
+
}
|
|
183
|
+
.agy-live + .live-dot {
|
|
184
|
+
display: none;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* Primary tabs: 48dp, title-small; the active label is primary over a 3dp
|
|
188
|
+
indicator as wide as the label, round at the top. 16dp either side of a
|
|
189
|
+
label; the strip is pulled out so the first label lines up with the title */
|
|
190
|
+
.tabs {
|
|
191
|
+
gap: 0;
|
|
192
|
+
margin: 4px -16px 0;
|
|
193
|
+
}
|
|
194
|
+
.tab {
|
|
195
|
+
height: 48px;
|
|
196
|
+
padding: 0 16px;
|
|
197
|
+
gap: 8px;
|
|
198
|
+
font: var(--md-sys-typescale-title-small);
|
|
199
|
+
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
200
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
201
|
+
transition: color var(--md-color-fast), background-color var(--md-state);
|
|
202
|
+
}
|
|
203
|
+
.tab::after {
|
|
204
|
+
left: 16px;
|
|
205
|
+
right: 16px;
|
|
206
|
+
bottom: -1px;
|
|
207
|
+
height: 3px;
|
|
208
|
+
border-radius: 3px 3px 0 0;
|
|
209
|
+
}
|
|
210
|
+
.tab:hover {
|
|
211
|
+
background: var(--md-hover);
|
|
212
|
+
color: var(--md-sys-color-on-surface);
|
|
213
|
+
}
|
|
214
|
+
.tab.active {
|
|
215
|
+
font-weight: 500;
|
|
216
|
+
color: var(--md-sys-color-primary);
|
|
217
|
+
}
|
|
218
|
+
.tab.active:hover {
|
|
219
|
+
background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
220
|
+
color: var(--md-sys-color-primary);
|
|
221
|
+
}
|
|
222
|
+
.tab.active::after {
|
|
223
|
+
background: var(--md-sys-color-primary);
|
|
224
|
+
}
|
|
225
|
+
.tab:focus-visible {
|
|
226
|
+
outline-offset: -3px;
|
|
227
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
228
|
+
}
|
|
229
|
+
/* How many posts and members: supporting text, not a badge (M3's badge is
|
|
230
|
+
the error color and means "new") */
|
|
231
|
+
.tab-count,
|
|
232
|
+
.tab.active .tab-count {
|
|
233
|
+
padding: 0;
|
|
234
|
+
border-radius: 0;
|
|
235
|
+
background: none;
|
|
236
|
+
font: var(--md-sys-typescale-label-medium);
|
|
237
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
238
|
+
color: inherit;
|
|
239
|
+
opacity: 0.8;
|
|
240
|
+
}
|
|
241
|
+
/* What needs attention on Overview is a badge: large, 16dp, error */
|
|
242
|
+
.tab-badge {
|
|
243
|
+
min-width: 16px;
|
|
244
|
+
height: 16px;
|
|
245
|
+
padding: 0 4px;
|
|
246
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
247
|
+
background: var(--md-sys-color-error);
|
|
248
|
+
font: var(--md-sys-typescale-label-small);
|
|
249
|
+
line-height: 16px;
|
|
250
|
+
color: var(--md-sys-color-on-error);
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
/* 20 — Board: search bar, filters ------------------------------------------ */
|
|
256
|
+
:root[data-agy-theme="md3e"] {
|
|
257
|
+
.toolbar {
|
|
258
|
+
padding: 12px 0;
|
|
259
|
+
}
|
|
260
|
+
/* Scrolled content passes under an opaque bar: no rule needed */
|
|
261
|
+
.toolbar.stuck {
|
|
262
|
+
box-shadow: 0 0 0 100vmax var(--sw-bg);
|
|
263
|
+
}
|
|
264
|
+
.searchbar {
|
|
265
|
+
gap: 8px;
|
|
266
|
+
}
|
|
267
|
+
/* Search bar: surface-container-high, full corners; focus is a tone, not
|
|
268
|
+
a ring (as the window's composer) */
|
|
269
|
+
.search,
|
|
270
|
+
.pane .o2-msearch {
|
|
271
|
+
height: 40px;
|
|
272
|
+
gap: 12px;
|
|
273
|
+
padding: 0 16px;
|
|
274
|
+
border: 0;
|
|
275
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
276
|
+
background: var(--md-sys-color-surface-container-high);
|
|
277
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
278
|
+
transition: background-color var(--md-color-fast);
|
|
279
|
+
}
|
|
280
|
+
.search:focus-within,
|
|
281
|
+
.pane .o2-msearch:focus-within {
|
|
282
|
+
border: 0;
|
|
283
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
284
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
285
|
+
}
|
|
286
|
+
.search .icon,
|
|
287
|
+
.pane .o2-msearch .icon {
|
|
288
|
+
width: 18px;
|
|
289
|
+
height: 18px;
|
|
290
|
+
}
|
|
291
|
+
.search input,
|
|
292
|
+
.pane .o2-msin {
|
|
293
|
+
font: var(--md-sys-typescale-body-large);
|
|
294
|
+
font-size: 14px;
|
|
295
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
296
|
+
color: var(--md-sys-color-on-surface);
|
|
297
|
+
}
|
|
298
|
+
.search input::placeholder,
|
|
299
|
+
.pane .o2-msin::placeholder {
|
|
300
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/* Icon buttons: standard, round, a state layer; 40dp next to the search
|
|
304
|
+
bar, 32dp in the replay row */
|
|
305
|
+
/* --r is half the height: a pill at any width (the wide Play button too),
|
|
306
|
+
and a real radius for the press morph to spring from */
|
|
307
|
+
.icon-btn {
|
|
308
|
+
--r: 16px;
|
|
309
|
+
width: 32px;
|
|
310
|
+
height: 32px;
|
|
311
|
+
border-radius: var(--r);
|
|
312
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
313
|
+
transition: background-color var(--md-state), border-radius var(--md-fast);
|
|
314
|
+
}
|
|
315
|
+
.icon-btn .icon {
|
|
316
|
+
width: 18px;
|
|
317
|
+
height: 18px;
|
|
318
|
+
}
|
|
319
|
+
.icon-btn:hover {
|
|
320
|
+
background: var(--md-hover);
|
|
321
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
322
|
+
}
|
|
323
|
+
.icon-btn:active {
|
|
324
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
325
|
+
background: var(--md-press);
|
|
326
|
+
}
|
|
327
|
+
.icon-btn:disabled {
|
|
328
|
+
border-radius: var(--r);
|
|
329
|
+
background: none;
|
|
330
|
+
opacity: 0.38;
|
|
331
|
+
}
|
|
332
|
+
.icon-btn.sm {
|
|
333
|
+
--r: 14px;
|
|
334
|
+
width: 28px;
|
|
335
|
+
height: 28px;
|
|
336
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
337
|
+
}
|
|
338
|
+
/* Filters: a toggle. Open is the selected tonal state, squared */
|
|
339
|
+
.filter-toggle {
|
|
340
|
+
--r: 20px;
|
|
341
|
+
width: 40px;
|
|
342
|
+
height: 40px;
|
|
343
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
344
|
+
}
|
|
345
|
+
.filter-toggle[aria-expanded="true"] {
|
|
346
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
347
|
+
background: var(--md-sys-color-secondary-container);
|
|
348
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
349
|
+
}
|
|
350
|
+
/* "a filter is set": a small badge on the icon's corner */
|
|
351
|
+
.filter-dot {
|
|
352
|
+
top: 9px;
|
|
353
|
+
right: 9px;
|
|
354
|
+
background: var(--md-sys-color-error);
|
|
355
|
+
box-shadow: none;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/* Selects: chips with a trailing arrow. Unset is the outlined chip; set
|
|
359
|
+
is the selected one (secondary-container, no outline) */
|
|
360
|
+
.select select {
|
|
361
|
+
height: 32px;
|
|
362
|
+
padding: 0 30px 0 12px;
|
|
363
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
364
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
365
|
+
background: transparent;
|
|
366
|
+
font: var(--md-sys-typescale-label-large);
|
|
367
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
368
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
369
|
+
transition: background-color var(--md-state);
|
|
370
|
+
}
|
|
371
|
+
.select select:hover {
|
|
372
|
+
border-color: var(--md-sys-color-outline-variant);
|
|
373
|
+
background: var(--md-hover);
|
|
374
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
375
|
+
}
|
|
376
|
+
.select select:focus-visible {
|
|
377
|
+
border-color: var(--md-sys-color-outline-variant);
|
|
378
|
+
outline: 3px solid var(--md-sys-color-secondary);
|
|
379
|
+
outline-offset: 2px;
|
|
380
|
+
}
|
|
381
|
+
.select select.set {
|
|
382
|
+
border-color: transparent;
|
|
383
|
+
background: var(--md-sys-color-secondary-container);
|
|
384
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
385
|
+
}
|
|
386
|
+
.select.sm select {
|
|
387
|
+
height: 32px;
|
|
388
|
+
padding: 0 28px 0 12px;
|
|
389
|
+
font: var(--md-sys-typescale-label-large);
|
|
390
|
+
}
|
|
391
|
+
.select::after {
|
|
392
|
+
right: 12px;
|
|
393
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
394
|
+
}
|
|
395
|
+
/* The list itself: an M3 menu. Chromium's customizable select
|
|
396
|
+
(appearance: base-select) draws the picker in the page, so it takes the
|
|
397
|
+
md-menu anatomy of the window's menus: surface-container-low, 16px
|
|
398
|
+
corners, level 2, scaling in from the field; 44px label-large options
|
|
399
|
+
with an 8% state layer; the chosen one a tertiary-container pill with
|
|
400
|
+
its check at the start. No script: the select keeps its own keyboard
|
|
401
|
+
and form behaviour. */
|
|
402
|
+
.select select,
|
|
403
|
+
.select select::picker(select) {
|
|
404
|
+
appearance: base-select;
|
|
405
|
+
}
|
|
406
|
+
.select select::picker-icon {
|
|
407
|
+
display: none; /* the wrapper draws the arrow */
|
|
408
|
+
}
|
|
409
|
+
.select select {
|
|
410
|
+
align-items: center; /* a base-select is a flex box: its label would sit at the top */
|
|
411
|
+
}
|
|
412
|
+
.select select::picker(select) {
|
|
413
|
+
margin-block: 4px;
|
|
414
|
+
padding: 4px;
|
|
415
|
+
border: 0;
|
|
416
|
+
border-radius: 16px;
|
|
417
|
+
background: var(--md-sys-color-surface-container-low);
|
|
418
|
+
box-shadow: 0 4px 16px -2px rgb(0 0 0 / 0.5);
|
|
419
|
+
color: var(--md-sys-color-on-surface);
|
|
420
|
+
transform-origin: top center;
|
|
421
|
+
transition: opacity var(--md-color-fast), scale var(--md-fast);
|
|
422
|
+
}
|
|
423
|
+
@starting-style {
|
|
424
|
+
.select select:open::picker(select) {
|
|
425
|
+
opacity: 0;
|
|
426
|
+
scale: 0.8;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
.select select option {
|
|
430
|
+
display: flex;
|
|
431
|
+
align-items: center;
|
|
432
|
+
gap: 8px;
|
|
433
|
+
min-height: 44px;
|
|
434
|
+
padding: 0 16px 0 12px;
|
|
435
|
+
border-radius: 8px;
|
|
436
|
+
background: transparent;
|
|
437
|
+
font: var(--md-sys-typescale-label-large);
|
|
438
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
439
|
+
color: var(--md-sys-color-on-surface);
|
|
440
|
+
transition: background-color var(--md-state);
|
|
441
|
+
}
|
|
442
|
+
.select select option:first-of-type {
|
|
443
|
+
border-top-left-radius: 12px;
|
|
444
|
+
border-top-right-radius: 12px;
|
|
445
|
+
}
|
|
446
|
+
.select select option:last-of-type {
|
|
447
|
+
border-bottom-left-radius: 12px;
|
|
448
|
+
border-bottom-right-radius: 12px;
|
|
449
|
+
}
|
|
450
|
+
.select select option:is(:hover, :focus-visible) {
|
|
451
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
452
|
+
outline: none;
|
|
453
|
+
}
|
|
454
|
+
.select select option:checked {
|
|
455
|
+
border-radius: 12px;
|
|
456
|
+
background: var(--md-sys-color-tertiary-container);
|
|
457
|
+
color: var(--md-sys-color-on-tertiary-container);
|
|
458
|
+
}
|
|
459
|
+
.select select option:checked:is(:hover, :focus-visible) {
|
|
460
|
+
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 10%, var(--md-sys-color-tertiary-container));
|
|
461
|
+
}
|
|
462
|
+
.select select option::checkmark {
|
|
463
|
+
content: "";
|
|
464
|
+
order: -1;
|
|
465
|
+
width: 20px;
|
|
466
|
+
height: 20px;
|
|
467
|
+
background: currentColor;
|
|
468
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M389 -369 688 -668Q699 -679 714 -679Q728 -679 739 -668Q750 -657 750 -642Q750 -628 739 -617L415 -292Q404 -281 390 -281Q375 -281 364 -292L221 -435Q210 -446 210 -460Q210 -475 221 -486Q232 -497 246 -497Q261 -497 272 -486Z'/%3E%3C/svg%3E") center / 20px no-repeat;
|
|
469
|
+
}
|
|
470
|
+
.select select option:not(:checked)::checkmark {
|
|
471
|
+
display: none;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
/* Switch, at three quarters of M3's 52x32: outlined track and a small
|
|
475
|
+
handle off; primary track and a full handle on */
|
|
476
|
+
.switch {
|
|
477
|
+
gap: 8px;
|
|
478
|
+
font: var(--md-sys-typescale-label-large);
|
|
479
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
480
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
481
|
+
}
|
|
482
|
+
.switch-track {
|
|
483
|
+
width: 40px;
|
|
484
|
+
height: 24px;
|
|
485
|
+
border: 2px solid var(--md-sys-color-outline);
|
|
486
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
487
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
488
|
+
transition: background-color var(--md-color-fast), border-color var(--md-color-fast);
|
|
489
|
+
}
|
|
490
|
+
.switch-track::after {
|
|
491
|
+
left: 4px;
|
|
492
|
+
top: 4px;
|
|
493
|
+
width: 12px;
|
|
494
|
+
height: 12px;
|
|
495
|
+
background: var(--md-sys-color-outline);
|
|
496
|
+
transition: translate var(--md-fast), scale var(--md-fast), background-color var(--md-color-fast);
|
|
497
|
+
will-change: translate, scale;
|
|
498
|
+
}
|
|
499
|
+
.switch:hover .switch-track::after {
|
|
500
|
+
background: var(--md-sys-color-on-surface-variant);
|
|
501
|
+
}
|
|
502
|
+
.switch input:checked + .switch-track {
|
|
503
|
+
border-color: var(--md-sys-color-primary);
|
|
504
|
+
background: var(--md-sys-color-primary);
|
|
505
|
+
}
|
|
506
|
+
/* translate, not transform: transform comes after scale, so a move there
|
|
507
|
+
would be scaled too and push the handle past the track */
|
|
508
|
+
.switch input:checked + .switch-track::after {
|
|
509
|
+
transform: none; /* Swarm's own translateX(10px) */
|
|
510
|
+
translate: 16px 0;
|
|
511
|
+
scale: 1.5;
|
|
512
|
+
background: var(--md-sys-color-on-primary);
|
|
513
|
+
}
|
|
514
|
+
.switch input:focus-visible + .switch-track {
|
|
515
|
+
outline: 3px solid var(--md-sys-color-secondary);
|
|
516
|
+
outline-offset: 2px;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
/* Member and channel chips: filter chips. Shown is selected; hidden (.dim)
|
|
520
|
+
is the unselected outline */
|
|
521
|
+
.chip,
|
|
522
|
+
.channel-tab {
|
|
523
|
+
height: 32px;
|
|
524
|
+
gap: 8px;
|
|
525
|
+
padding: 0 12px;
|
|
526
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
527
|
+
background: var(--md-sys-color-secondary-container);
|
|
528
|
+
font: var(--md-sys-typescale-label-large);
|
|
529
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
530
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
531
|
+
transition: background-color var(--md-state);
|
|
532
|
+
}
|
|
533
|
+
.chip:hover,
|
|
534
|
+
.channel-tab.on:hover {
|
|
535
|
+
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
|
|
536
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
537
|
+
}
|
|
538
|
+
.chip .chip-count,
|
|
539
|
+
.channel-tab .chip-count {
|
|
540
|
+
font-weight: 400;
|
|
541
|
+
color: inherit;
|
|
542
|
+
opacity: 0.8;
|
|
543
|
+
}
|
|
544
|
+
.chip.dim,
|
|
545
|
+
.channel-tab {
|
|
546
|
+
background: transparent;
|
|
547
|
+
box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
|
|
548
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
549
|
+
}
|
|
550
|
+
.chip.dim:hover,
|
|
551
|
+
.channel-tab:hover {
|
|
552
|
+
background: var(--md-hover);
|
|
553
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
554
|
+
}
|
|
555
|
+
.chip.dim .chip-count {
|
|
556
|
+
color: inherit;
|
|
557
|
+
}
|
|
558
|
+
.channel-tab.on {
|
|
559
|
+
background: var(--md-sys-color-secondary-container);
|
|
560
|
+
box-shadow: none;
|
|
561
|
+
font-weight: 500;
|
|
562
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
563
|
+
}
|
|
564
|
+
/* A chip row scrolls sideways under the pointer; no scrollbar under it */
|
|
565
|
+
.agents,
|
|
566
|
+
.channel-tabs {
|
|
567
|
+
gap: 8px;
|
|
568
|
+
padding-bottom: 0;
|
|
569
|
+
scrollbar-width: none;
|
|
570
|
+
}
|
|
571
|
+
.msg-channel {
|
|
572
|
+
height: 20px;
|
|
573
|
+
padding: 0 8px;
|
|
574
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
575
|
+
background: var(--md-sys-color-secondary-container);
|
|
576
|
+
font: var(--md-sys-typescale-label-small);
|
|
577
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
578
|
+
}
|
|
579
|
+
.msg-channel:hover {
|
|
580
|
+
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
|
|
581
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
|
|
586
|
+
/* 30 — Board: the feed, an M3 Expressive list ------------------------------ */
|
|
587
|
+
:root[data-agy-theme="md3e"] {
|
|
588
|
+
/* Posts are list items in one segmented group: a tone above the pane, 2dp
|
|
589
|
+
apart, 4dp corners inside the run and large ones at its ends. The rows
|
|
590
|
+
keep to the column (Swarm lets its hover fill hang 10px out of it). */
|
|
591
|
+
.feed .msg:not(.msg-system) {
|
|
592
|
+
column-gap: 16px;
|
|
593
|
+
margin: 2px 0 0;
|
|
594
|
+
padding: 12px 16px;
|
|
595
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
596
|
+
background: var(--md-row);
|
|
597
|
+
transition: background-color var(--md-state);
|
|
598
|
+
}
|
|
599
|
+
.feed > .msg:first-child,
|
|
600
|
+
.feed .divider + .msg,
|
|
601
|
+
.feed .msg-system + .msg:not(.msg-system) {
|
|
602
|
+
margin-top: 0;
|
|
603
|
+
border-top-left-radius: var(--md-sys-shape-corner-large);
|
|
604
|
+
border-top-right-radius: var(--md-sys-shape-corner-large);
|
|
605
|
+
}
|
|
606
|
+
.feed > .msg:last-child,
|
|
607
|
+
.feed > .msg:has(+ .divider),
|
|
608
|
+
.feed > .msg:has(+ .msg-system) {
|
|
609
|
+
border-bottom-left-radius: var(--md-sys-shape-corner-large);
|
|
610
|
+
border-bottom-right-radius: var(--md-sys-shape-corner-large);
|
|
611
|
+
}
|
|
612
|
+
.feed .msg:not(.msg-system):hover {
|
|
613
|
+
background: var(--md-row-hover);
|
|
614
|
+
}
|
|
615
|
+
/* A post that calls on you: the selected list item */
|
|
616
|
+
.feed .msg.unread-by-me,
|
|
617
|
+
.feed .msg.unread-by-me:hover {
|
|
618
|
+
background: var(--md-sys-color-secondary-container);
|
|
619
|
+
}
|
|
620
|
+
.feed .msg.unread-by-me :is(.msg-author, .msg-body, .msg-to, .ts) {
|
|
621
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
622
|
+
}
|
|
623
|
+
.feed .msg.msg-system {
|
|
624
|
+
margin: 8px 16px;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
/* The bee: a leading image on a medium shape, no ring */
|
|
628
|
+
.msg-av {
|
|
629
|
+
margin-top: 0;
|
|
630
|
+
}
|
|
631
|
+
.msg-av.bee {
|
|
632
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
633
|
+
box-shadow: none;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
.msg-author,
|
|
637
|
+
.feed .msg-author {
|
|
638
|
+
font: var(--md-sys-typescale-title-small);
|
|
639
|
+
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
640
|
+
color: var(--md-sys-color-on-surface);
|
|
641
|
+
}
|
|
642
|
+
.msg-to,
|
|
643
|
+
.msg-note {
|
|
644
|
+
font: var(--md-sys-typescale-body-small);
|
|
645
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
646
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
647
|
+
}
|
|
648
|
+
.msg-to .arrow {
|
|
649
|
+
color: var(--md-sys-color-outline);
|
|
650
|
+
}
|
|
651
|
+
.msg .ts,
|
|
652
|
+
.feed .msg .ts {
|
|
653
|
+
font: var(--md-sys-typescale-label-small);
|
|
654
|
+
font-variant-numeric: tabular-nums;
|
|
655
|
+
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
656
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
657
|
+
}
|
|
658
|
+
.msg-body,
|
|
659
|
+
.feed .msg-body {
|
|
660
|
+
font: var(--md-sys-typescale-body-medium);
|
|
661
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
662
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
663
|
+
}
|
|
664
|
+
.feed .msg-body.clamped {
|
|
665
|
+
max-height: 40px; /* two body-medium lines */
|
|
666
|
+
}
|
|
667
|
+
.feed .msg-body.clamped.open {
|
|
668
|
+
max-height: none;
|
|
669
|
+
color: var(--md-sys-color-on-surface);
|
|
670
|
+
}
|
|
671
|
+
.md :is(h1, h2, h3, h4) {
|
|
672
|
+
font: var(--md-sys-typescale-title-small);
|
|
673
|
+
color: var(--md-sys-color-on-surface);
|
|
674
|
+
}
|
|
675
|
+
/* A mention is emphasis in the text, not a chip in it */
|
|
676
|
+
.mention {
|
|
677
|
+
padding: 0;
|
|
678
|
+
border-radius: 0;
|
|
679
|
+
background: none;
|
|
680
|
+
font-weight: 500;
|
|
681
|
+
color: var(--md-sys-color-primary);
|
|
682
|
+
}
|
|
683
|
+
.feed .msg.unread-by-me .mention {
|
|
684
|
+
color: inherit;
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
/* Show more / less: a text button */
|
|
688
|
+
.msg-more {
|
|
689
|
+
height: 32px;
|
|
690
|
+
margin: 4px 0 -4px -12px;
|
|
691
|
+
padding: 0 12px;
|
|
692
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
693
|
+
font: var(--md-sys-typescale-label-large);
|
|
694
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
695
|
+
color: var(--md-sys-color-primary);
|
|
696
|
+
transition: background-color var(--md-state);
|
|
697
|
+
}
|
|
698
|
+
.msg-more:hover {
|
|
699
|
+
background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
700
|
+
color: var(--md-sys-color-primary);
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
/* "New since you last read": a labelled divider between two runs */
|
|
704
|
+
.divider {
|
|
705
|
+
margin: 16px 0 8px;
|
|
706
|
+
padding: 0 16px;
|
|
707
|
+
font: var(--md-sys-typescale-label-medium);
|
|
708
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
709
|
+
color: var(--md-sys-color-primary);
|
|
710
|
+
}
|
|
711
|
+
.divider::after {
|
|
712
|
+
background: var(--md-sys-color-outline-variant);
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.feed-empty {
|
|
716
|
+
font: var(--md-sys-typescale-body-medium);
|
|
717
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
718
|
+
}
|
|
719
|
+
.feed-empty-title {
|
|
720
|
+
font: var(--md-sys-typescale-title-medium);
|
|
721
|
+
color: var(--md-sys-color-on-surface);
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
/* Latest: a small extended FAB (primary-container, level 3) */
|
|
725
|
+
.jump {
|
|
726
|
+
height: 40px;
|
|
727
|
+
gap: 8px;
|
|
728
|
+
padding: 0 16px 0 12px;
|
|
729
|
+
border: 0;
|
|
730
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
731
|
+
background: var(--md-sys-color-primary-container);
|
|
732
|
+
box-shadow: var(--md-sys-elevation-level3);
|
|
733
|
+
font: var(--md-sys-typescale-label-large);
|
|
734
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
735
|
+
color: var(--md-sys-color-on-primary-container);
|
|
736
|
+
transition: background-color var(--md-state), border-radius var(--md-fast);
|
|
737
|
+
}
|
|
738
|
+
.jump:hover {
|
|
739
|
+
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, var(--md-sys-color-primary-container));
|
|
740
|
+
}
|
|
741
|
+
.jump:active {
|
|
742
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
743
|
+
}
|
|
744
|
+
.jump .icon {
|
|
745
|
+
width: 18px;
|
|
746
|
+
height: 18px;
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
/* Snackbar */
|
|
750
|
+
.toast {
|
|
751
|
+
bottom: 24px;
|
|
752
|
+
padding: 14px 16px;
|
|
753
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
754
|
+
background: var(--md-sys-color-inverse-surface);
|
|
755
|
+
box-shadow: var(--md-sys-elevation-level3);
|
|
756
|
+
font: var(--md-sys-typescale-body-medium);
|
|
757
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
758
|
+
color: var(--md-sys-color-inverse-on-surface);
|
|
759
|
+
}
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
|
|
763
|
+
/* 40 — Buttons, labels and Overview chrome --------------------------------- */
|
|
764
|
+
:root[data-agy-theme="md3e"] {
|
|
765
|
+
/* Text button */
|
|
766
|
+
.ghost-btn {
|
|
767
|
+
height: 32px;
|
|
768
|
+
padding: 0 12px;
|
|
769
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
770
|
+
font: var(--md-sys-typescale-label-large);
|
|
771
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
772
|
+
color: var(--md-sys-color-primary);
|
|
773
|
+
transition: background-color var(--md-state);
|
|
774
|
+
}
|
|
775
|
+
.ghost-btn:hover {
|
|
776
|
+
background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
777
|
+
color: var(--md-sys-color-primary);
|
|
778
|
+
}
|
|
779
|
+
.ghost-btn:active {
|
|
780
|
+
background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
|
|
781
|
+
}
|
|
782
|
+
.ghost-btn.sm {
|
|
783
|
+
height: 28px;
|
|
784
|
+
padding: 0 12px;
|
|
785
|
+
font: var(--md-sys-typescale-label-medium);
|
|
786
|
+
}
|
|
787
|
+
.ghost-btn[aria-pressed="true"],
|
|
788
|
+
.feed-empty .ghost-btn {
|
|
789
|
+
background: var(--md-sys-color-secondary-container);
|
|
790
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
791
|
+
}
|
|
792
|
+
.link-btn {
|
|
793
|
+
font-weight: 500;
|
|
794
|
+
color: var(--md-sys-color-primary);
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
/* Tonal buttons (hive.css's toolkit buttons), size xs: 32dp, label-large,
|
|
798
|
+
round until pressed */
|
|
799
|
+
.pane .o2-btn,
|
|
800
|
+
.pane.embedded .b,
|
|
801
|
+
.pane.embedded .b.pri {
|
|
802
|
+
height: 32px;
|
|
803
|
+
padding: 0 16px;
|
|
804
|
+
border-radius: 16px;
|
|
805
|
+
background: var(--md-sys-color-secondary-container);
|
|
806
|
+
font: var(--md-sys-typescale-label-large);
|
|
807
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
808
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
809
|
+
transition: background-color var(--md-state), border-radius var(--md-fast);
|
|
810
|
+
}
|
|
811
|
+
.pane .o2-btn:hover,
|
|
812
|
+
.pane.embedded .b:hover {
|
|
813
|
+
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
|
|
814
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
815
|
+
}
|
|
816
|
+
.pane .o2-btn:active,
|
|
817
|
+
.pane.embedded .b:active {
|
|
818
|
+
border-radius: 8px;
|
|
819
|
+
}
|
|
820
|
+
.pane .o2-btn.xs,
|
|
821
|
+
.pane .o2-rh .o2-btn {
|
|
822
|
+
height: 28px;
|
|
823
|
+
padding: 0 12px;
|
|
824
|
+
border-radius: 14px;
|
|
825
|
+
font: var(--md-sys-typescale-label-medium);
|
|
826
|
+
}
|
|
827
|
+
.pane .o2-more,
|
|
828
|
+
.pane.embedded .b.ghost {
|
|
829
|
+
height: 32px;
|
|
830
|
+
padding: 0 12px;
|
|
831
|
+
border-radius: 16px;
|
|
832
|
+
background: transparent;
|
|
833
|
+
font: var(--md-sys-typescale-label-large);
|
|
834
|
+
color: var(--md-sys-color-primary);
|
|
835
|
+
}
|
|
836
|
+
.pane .o2-more:hover,
|
|
837
|
+
.pane.embedded .b.ghost:hover {
|
|
838
|
+
background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
839
|
+
color: var(--md-sys-color-primary);
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
/* Connected button group (Raw's file picker) */
|
|
843
|
+
.segmented {
|
|
844
|
+
gap: 2px;
|
|
845
|
+
padding: 0;
|
|
846
|
+
background: none;
|
|
847
|
+
}
|
|
848
|
+
.segmented button {
|
|
849
|
+
height: 32px;
|
|
850
|
+
padding: 0 16px;
|
|
851
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
852
|
+
background: var(--md-sys-color-surface-container);
|
|
853
|
+
font: var(--md-sys-typescale-label-large);
|
|
854
|
+
font-family: var(--sw-mono);
|
|
855
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
856
|
+
transition: background-color var(--md-state), border-radius var(--md-fast);
|
|
857
|
+
}
|
|
858
|
+
.segmented button:first-child {
|
|
859
|
+
border-top-left-radius: 16px;
|
|
860
|
+
border-bottom-left-radius: 16px;
|
|
861
|
+
}
|
|
862
|
+
.segmented button:last-child,
|
|
863
|
+
.segmented button:has(+ .hidden:last-child) {
|
|
864
|
+
border-top-right-radius: 16px;
|
|
865
|
+
border-bottom-right-radius: 16px;
|
|
866
|
+
}
|
|
867
|
+
.segmented button:hover {
|
|
868
|
+
background: var(--md-sys-color-surface-container-high);
|
|
869
|
+
color: var(--md-sys-color-on-surface);
|
|
870
|
+
}
|
|
871
|
+
.segmented button.on {
|
|
872
|
+
border-radius: 16px;
|
|
873
|
+
background: var(--md-sys-color-secondary-container);
|
|
874
|
+
box-shadow: none;
|
|
875
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
/* Small labels */
|
|
879
|
+
.badge,
|
|
880
|
+
.ov-phase,
|
|
881
|
+
.ref,
|
|
882
|
+
.pane .o2-mtag,
|
|
883
|
+
.pane .o2-runph,
|
|
884
|
+
.pane .o2-wchip {
|
|
885
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
886
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
887
|
+
font-family: inherit;
|
|
888
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
889
|
+
}
|
|
890
|
+
.ref.seq-ref {
|
|
891
|
+
font-family: var(--sw-mono);
|
|
892
|
+
}
|
|
893
|
+
button.ref:hover {
|
|
894
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-highest));
|
|
895
|
+
color: var(--md-sys-color-on-surface);
|
|
896
|
+
}
|
|
897
|
+
.badge.working {
|
|
898
|
+
background: var(--md-sys-color-tertiary-container);
|
|
899
|
+
color: var(--md-sys-color-on-tertiary-container);
|
|
900
|
+
}
|
|
901
|
+
.badge.paused,
|
|
902
|
+
.badge.stale {
|
|
903
|
+
background: var(--md-sys-color-error-container);
|
|
904
|
+
color: var(--md-sys-color-on-error-container);
|
|
905
|
+
}
|
|
906
|
+
.ov-h,
|
|
907
|
+
.pane .o2-glbl,
|
|
908
|
+
.pane .o2-qhdr,
|
|
909
|
+
.pane .o2-msec,
|
|
910
|
+
.pane .o2-mret {
|
|
911
|
+
font: var(--md-sys-typescale-title-small);
|
|
912
|
+
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
913
|
+
text-transform: none;
|
|
914
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
915
|
+
}
|
|
916
|
+
.ov-kind,
|
|
917
|
+
.ov-state {
|
|
918
|
+
font: var(--md-sys-typescale-label-medium);
|
|
919
|
+
text-transform: none;
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
/* Alerts and notices: tonal containers */
|
|
923
|
+
.ov-sys {
|
|
924
|
+
padding: 8px 12px;
|
|
925
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
926
|
+
background: var(--md-sys-color-error-container);
|
|
927
|
+
color: var(--md-sys-color-on-error-container);
|
|
928
|
+
}
|
|
929
|
+
.ov-sys.error {
|
|
930
|
+
background: var(--md-sys-color-error-container);
|
|
931
|
+
}
|
|
932
|
+
.ov-sys-icon,
|
|
933
|
+
.ov-sys.error .ov-sys-icon {
|
|
934
|
+
color: var(--md-sys-color-on-error-container);
|
|
935
|
+
}
|
|
936
|
+
.ov-notice {
|
|
937
|
+
padding: 12px 16px;
|
|
938
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
939
|
+
background: var(--md-row);
|
|
940
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
941
|
+
}
|
|
942
|
+
/* The narrator's page keeps its frame on purpose (it marks content the
|
|
943
|
+
narrator made, not the app): an outlined card */
|
|
944
|
+
.ov-label {
|
|
945
|
+
border-color: var(--md-sys-color-outline-variant);
|
|
946
|
+
border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0;
|
|
947
|
+
}
|
|
948
|
+
.ov-frame,
|
|
949
|
+
.ov-plain {
|
|
950
|
+
border-color: var(--md-sys-color-outline-variant);
|
|
951
|
+
border-radius: 0 0 var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium);
|
|
952
|
+
}
|
|
953
|
+
.ov-label.hidden + .ov-frame,
|
|
954
|
+
.ov-label.hidden ~ .ov-plain {
|
|
955
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
956
|
+
}
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
|
|
960
|
+
/* 50 — Overview and Members (hive.css): filled cards and lists ------------- */
|
|
961
|
+
:root[data-agy-theme="md3e"] {
|
|
962
|
+
/* hive.css sets its own tokens on .o2. Filled cards: the row tone and no
|
|
963
|
+
outline; with a transparent border the hairlines inside the cards go too
|
|
964
|
+
(the 1px border box stays, so nothing shifts) */
|
|
965
|
+
.pane .o2 {
|
|
966
|
+
--o2-card: var(--md-row);
|
|
967
|
+
--o2-border: transparent;
|
|
968
|
+
--o2-hover: var(--md-row-hover);
|
|
969
|
+
--o2-secondary: var(--md-sys-color-surface-container-highest);
|
|
970
|
+
}
|
|
971
|
+
.pane .o2 .o2-h {
|
|
972
|
+
font: var(--md-sys-typescale-title-small);
|
|
973
|
+
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
974
|
+
color: var(--md-sys-color-on-surface);
|
|
975
|
+
}
|
|
976
|
+
.pane .o2-lead,
|
|
977
|
+
.pane .o2-card,
|
|
978
|
+
.pane .o2-goal,
|
|
979
|
+
.pane .o2-run,
|
|
980
|
+
.pane .o2-prog,
|
|
981
|
+
.pane .o2-th,
|
|
982
|
+
.pane .o2-reel {
|
|
983
|
+
border-radius: var(--md-sys-shape-corner-large);
|
|
984
|
+
}
|
|
985
|
+
.pane .o2-goal,
|
|
986
|
+
.pane .o2-run,
|
|
987
|
+
.pane .o2-reel {
|
|
988
|
+
padding: 16px;
|
|
989
|
+
}
|
|
990
|
+
.pane .o2-th.done {
|
|
991
|
+
background: transparent;
|
|
992
|
+
box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); /* done: the outlined card */
|
|
993
|
+
}
|
|
994
|
+
/* Blocked or waiting on you: the card takes an error tint (a state layer
|
|
995
|
+
of error on its tone), not a red outline; its dot and label say why */
|
|
996
|
+
.pane .o2-br.blocked .o2-card,
|
|
997
|
+
.pane .o2-th.needs,
|
|
998
|
+
.pane .o2-th.blocked {
|
|
999
|
+
border-color: transparent;
|
|
1000
|
+
background: color-mix(in srgb, var(--md-sys-color-error) 10%, var(--md-row));
|
|
1001
|
+
}
|
|
1002
|
+
.pane .o2-ask {
|
|
1003
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
1004
|
+
background: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
|
|
1005
|
+
}
|
|
1006
|
+
.pane .o2-goal > b,
|
|
1007
|
+
.pane .o2-lb b {
|
|
1008
|
+
font: var(--md-sys-typescale-title-medium);
|
|
1009
|
+
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
|
|
1010
|
+
}
|
|
1011
|
+
.pane .o2-cb b,
|
|
1012
|
+
.pane .o2-tht b,
|
|
1013
|
+
.pane .o2-runt,
|
|
1014
|
+
.pane .o2-ask b {
|
|
1015
|
+
font: var(--md-sys-typescale-title-small);
|
|
1016
|
+
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
1017
|
+
}
|
|
1018
|
+
.pane .o2-goal > p,
|
|
1019
|
+
.pane .o2-lb p,
|
|
1020
|
+
.pane .o2-cb p,
|
|
1021
|
+
.pane .o2-runsum,
|
|
1022
|
+
.pane .o2-thg {
|
|
1023
|
+
font: var(--md-sys-typescale-body-medium);
|
|
1024
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
1025
|
+
}
|
|
1026
|
+
.pane .o2-lb p {
|
|
1027
|
+
white-space: nowrap;
|
|
1028
|
+
}
|
|
1029
|
+
/* A running dot is a dot: no halo */
|
|
1030
|
+
.pane .o2-rundot {
|
|
1031
|
+
box-shadow: none;
|
|
1032
|
+
}
|
|
1033
|
+
.pane .o2-progh:hover {
|
|
1034
|
+
background: var(--md-row-hover);
|
|
1035
|
+
}
|
|
1036
|
+
.pane .o2-thh {
|
|
1037
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
1038
|
+
}
|
|
1039
|
+
/* Bee tiles: a shape and a tone; selection is a primary ring */
|
|
1040
|
+
.pane .o2-tile,
|
|
1041
|
+
.pane .o2-tile.lg {
|
|
1042
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
1043
|
+
}
|
|
1044
|
+
.pane .o2-m .o2-tile {
|
|
1045
|
+
box-shadow: none;
|
|
1046
|
+
transition: box-shadow var(--md-state);
|
|
1047
|
+
}
|
|
1048
|
+
.pane .o2-m:hover .o2-tile {
|
|
1049
|
+
box-shadow: 0 0 0 2px var(--md-sys-color-outline-variant);
|
|
1050
|
+
}
|
|
1051
|
+
.pane .o2-m.on .o2-tile {
|
|
1052
|
+
box-shadow: 0 0 0 2px var(--md-sys-color-primary);
|
|
1053
|
+
}
|
|
1054
|
+
.pane .o2-st {
|
|
1055
|
+
box-shadow: none;
|
|
1056
|
+
}
|
|
1057
|
+
.pane .o2-rstage {
|
|
1058
|
+
border: 0;
|
|
1059
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
1060
|
+
}
|
|
1061
|
+
/* The onboarding sketch draws its paths in the border color */
|
|
1062
|
+
.pane .o2-onb-lines path {
|
|
1063
|
+
stroke: var(--md-sys-color-outline-variant);
|
|
1064
|
+
}
|
|
1065
|
+
.pane .o2-onb-i {
|
|
1066
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
1067
|
+
background: var(--md-row);
|
|
1068
|
+
box-shadow: none;
|
|
1069
|
+
}
|
|
1070
|
+
.pane .o2-onb-h {
|
|
1071
|
+
font: var(--md-sys-typescale-title-large);
|
|
1072
|
+
color: var(--md-sys-color-on-surface);
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
/* Members: the same segmented list as the feed */
|
|
1076
|
+
.pane .o2-mtop {
|
|
1077
|
+
margin-bottom: 16px;
|
|
1078
|
+
}
|
|
1079
|
+
.pane .o2-mcoord {
|
|
1080
|
+
margin-bottom: 16px;
|
|
1081
|
+
padding-bottom: 0;
|
|
1082
|
+
border-bottom: 0;
|
|
1083
|
+
}
|
|
1084
|
+
.pane .o2-msec {
|
|
1085
|
+
padding: 0 16px 8px;
|
|
1086
|
+
}
|
|
1087
|
+
.pane .o2-msec em,
|
|
1088
|
+
.pane .o2-mret em {
|
|
1089
|
+
font-weight: 400;
|
|
1090
|
+
color: inherit;
|
|
1091
|
+
opacity: 0.8;
|
|
1092
|
+
}
|
|
1093
|
+
.pane .o2-mrow.bees {
|
|
1094
|
+
column-gap: 16px;
|
|
1095
|
+
margin: 2px 0 0;
|
|
1096
|
+
padding: 12px 16px;
|
|
1097
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
1098
|
+
background: var(--md-row);
|
|
1099
|
+
transition: background-color var(--md-state);
|
|
1100
|
+
}
|
|
1101
|
+
.pane .o2-mrow.bees:first-child {
|
|
1102
|
+
margin-top: 0;
|
|
1103
|
+
border-top-left-radius: var(--md-sys-shape-corner-large);
|
|
1104
|
+
border-top-right-radius: var(--md-sys-shape-corner-large);
|
|
1105
|
+
}
|
|
1106
|
+
.pane .o2-mrow.bees:last-child {
|
|
1107
|
+
border-bottom-left-radius: var(--md-sys-shape-corner-large);
|
|
1108
|
+
border-bottom-right-radius: var(--md-sys-shape-corner-large);
|
|
1109
|
+
}
|
|
1110
|
+
.pane .o2-mrow.bees:hover {
|
|
1111
|
+
background: var(--md-row-hover);
|
|
1112
|
+
}
|
|
1113
|
+
.pane .o2-mav.bee {
|
|
1114
|
+
margin-top: 0;
|
|
1115
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
1116
|
+
box-shadow: none;
|
|
1117
|
+
}
|
|
1118
|
+
/* Status: a badge on the tile's corner, cut out of the row it sits on */
|
|
1119
|
+
.pane .o2-mavd {
|
|
1120
|
+
box-shadow: 0 0 0 2px var(--md-row);
|
|
1121
|
+
}
|
|
1122
|
+
.pane .o2-mrow.bees:hover .o2-mavd {
|
|
1123
|
+
box-shadow: 0 0 0 2px var(--md-row-hover);
|
|
1124
|
+
}
|
|
1125
|
+
.pane .o2-mauth {
|
|
1126
|
+
font: var(--md-sys-typescale-title-small);
|
|
1127
|
+
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
1128
|
+
color: var(--md-sys-color-on-surface);
|
|
1129
|
+
}
|
|
1130
|
+
.pane .o2-mstat,
|
|
1131
|
+
.pane .o2-mrole {
|
|
1132
|
+
font: var(--md-sys-typescale-body-small);
|
|
1133
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
1134
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1135
|
+
}
|
|
1136
|
+
.pane .o2-mstat.info {
|
|
1137
|
+
color: var(--md-sys-color-primary);
|
|
1138
|
+
}
|
|
1139
|
+
.pane .o2-mstat.warn {
|
|
1140
|
+
color: var(--md-sys-color-error);
|
|
1141
|
+
}
|
|
1142
|
+
.pane .o2-mts {
|
|
1143
|
+
font: var(--md-sys-typescale-label-small);
|
|
1144
|
+
font-variant-numeric: tabular-nums;
|
|
1145
|
+
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
1146
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1147
|
+
}
|
|
1148
|
+
.pane .o2-mnow {
|
|
1149
|
+
max-height: 40px;
|
|
1150
|
+
margin-top: 4px;
|
|
1151
|
+
font: var(--md-sys-typescale-body-medium);
|
|
1152
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
1153
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1154
|
+
}
|
|
1155
|
+
.pane .o2-mrow:not(.working):not(.needs_you):not(.waiting_on):not(.coord) .o2-mnow {
|
|
1156
|
+
max-height: 20px;
|
|
1157
|
+
}
|
|
1158
|
+
.pane .o2-mretgrp {
|
|
1159
|
+
margin-top: 16px;
|
|
1160
|
+
padding-top: 0;
|
|
1161
|
+
border-top: 0;
|
|
1162
|
+
}
|
|
1163
|
+
.pane .o2-mret {
|
|
1164
|
+
min-height: 40px;
|
|
1165
|
+
padding: 0 16px;
|
|
1166
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
1167
|
+
}
|
|
1168
|
+
.pane .o2-mret:hover {
|
|
1169
|
+
background: var(--md-hover);
|
|
1170
|
+
color: var(--md-sys-color-on-surface);
|
|
1171
|
+
}
|
|
1172
|
+
.pane .o2-src {
|
|
1173
|
+
font: var(--md-sys-typescale-body-small);
|
|
1174
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1175
|
+
}
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
|
|
1179
|
+
/* 60 — Graph: the replay toolbar, slider, nodes ---------------------------- */
|
|
1180
|
+
:root[data-agy-theme="md3e"] {
|
|
1181
|
+
/* The replay controls: a docked toolbar on the row tone */
|
|
1182
|
+
.player {
|
|
1183
|
+
gap: 8px;
|
|
1184
|
+
margin-bottom: 16px;
|
|
1185
|
+
padding: 12px 16px;
|
|
1186
|
+
border: 0;
|
|
1187
|
+
border-radius: var(--md-sys-shape-corner-large);
|
|
1188
|
+
background: var(--md-row);
|
|
1189
|
+
}
|
|
1190
|
+
.player-row {
|
|
1191
|
+
gap: 8px;
|
|
1192
|
+
}
|
|
1193
|
+
.player-row.sub {
|
|
1194
|
+
gap: 8px 16px;
|
|
1195
|
+
}
|
|
1196
|
+
.btn-group {
|
|
1197
|
+
gap: 4px;
|
|
1198
|
+
}
|
|
1199
|
+
/* Play: the filled, wide icon button; it squares off when pressed */
|
|
1200
|
+
.icon-btn.play {
|
|
1201
|
+
width: 48px;
|
|
1202
|
+
background: var(--md-sys-color-primary);
|
|
1203
|
+
color: var(--md-sys-color-on-primary);
|
|
1204
|
+
}
|
|
1205
|
+
.icon-btn.play:hover {
|
|
1206
|
+
background: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
|
|
1207
|
+
color: var(--md-sys-color-on-primary);
|
|
1208
|
+
}
|
|
1209
|
+
.icon-btn.play .icon {
|
|
1210
|
+
width: 18px;
|
|
1211
|
+
height: 18px;
|
|
1212
|
+
}
|
|
1213
|
+
.replay-label {
|
|
1214
|
+
font: var(--md-sys-typescale-body-small);
|
|
1215
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
1216
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1217
|
+
}
|
|
1218
|
+
.replay-label b {
|
|
1219
|
+
color: var(--md-sys-color-on-surface);
|
|
1220
|
+
}
|
|
1221
|
+
|
|
1222
|
+
/* Live in the replay row: a filter chip. On: selected, with the check */
|
|
1223
|
+
.pill-btn {
|
|
1224
|
+
height: 32px;
|
|
1225
|
+
gap: 8px;
|
|
1226
|
+
padding: 0 16px;
|
|
1227
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
1228
|
+
box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
|
|
1229
|
+
font: var(--md-sys-typescale-label-large);
|
|
1230
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
1231
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1232
|
+
transition: background-color var(--md-state);
|
|
1233
|
+
}
|
|
1234
|
+
.pill-btn:hover {
|
|
1235
|
+
background: var(--md-hover);
|
|
1236
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1237
|
+
}
|
|
1238
|
+
.pill-btn.on {
|
|
1239
|
+
padding-left: 8px;
|
|
1240
|
+
background: var(--md-sys-color-secondary-container);
|
|
1241
|
+
box-shadow: none;
|
|
1242
|
+
color: var(--md-sys-color-on-secondary-container);
|
|
1243
|
+
}
|
|
1244
|
+
.pill-btn.on:hover {
|
|
1245
|
+
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
|
|
1246
|
+
}
|
|
1247
|
+
.pill-btn .live-dot {
|
|
1248
|
+
display: none;
|
|
1249
|
+
}
|
|
1250
|
+
/* Material Symbols Rounded "check" (opsz 20, wght 400), as md3e-icons.css */
|
|
1251
|
+
.pill-btn.on .live-dot {
|
|
1252
|
+
display: block;
|
|
1253
|
+
width: 18px;
|
|
1254
|
+
height: 18px;
|
|
1255
|
+
border-radius: 0;
|
|
1256
|
+
background: currentColor;
|
|
1257
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M389 -369 688 -668Q699 -679 714 -679Q728 -679 739 -668Q750 -657 750 -642Q750 -628 739 -617L415 -292Q404 -281 390 -281Q375 -281 364 -292L221 -435Q210 -446 210 -460Q210 -475 221 -486Q232 -497 246 -497Q261 -497 272 -486Z'/%3E%3C/svg%3E") center / contain no-repeat;
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
/* Slider (M3 Expressive, size xs): a 16dp track, primary up to the handle
|
|
1261
|
+
and secondary-container after it, and a 4dp bar handle that stands off
|
|
1262
|
+
the track by a gap in the toolbar's tone */
|
|
1263
|
+
.slider {
|
|
1264
|
+
height: 32px;
|
|
1265
|
+
margin: 0 8px;
|
|
1266
|
+
}
|
|
1267
|
+
.slider::-webkit-slider-runnable-track {
|
|
1268
|
+
height: 16px;
|
|
1269
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
1270
|
+
background: linear-gradient(to right, var(--md-sys-color-primary) var(--pct), var(--md-sys-color-secondary-container) var(--pct));
|
|
1271
|
+
}
|
|
1272
|
+
.slider::-webkit-slider-thumb {
|
|
1273
|
+
width: 4px;
|
|
1274
|
+
height: 32px;
|
|
1275
|
+
margin-top: -8px;
|
|
1276
|
+
border: 0;
|
|
1277
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
1278
|
+
background: var(--md-sys-color-primary);
|
|
1279
|
+
box-shadow: -4px 0 0 var(--md-row), 4px 0 0 var(--md-row);
|
|
1280
|
+
transition: none;
|
|
1281
|
+
}
|
|
1282
|
+
.slider::-webkit-slider-thumb:hover {
|
|
1283
|
+
transform: none;
|
|
1284
|
+
}
|
|
1285
|
+
.slider:active::-webkit-slider-thumb {
|
|
1286
|
+
width: 2px;
|
|
1287
|
+
box-shadow: -5px 0 0 var(--md-row), 5px 0 0 var(--md-row);
|
|
1288
|
+
}
|
|
1289
|
+
.slider:focus-visible {
|
|
1290
|
+
outline-offset: 2px;
|
|
1291
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
1292
|
+
}
|
|
1293
|
+
|
|
1294
|
+
/* Nodes are tonal shapes; an outline only says "outsider" or "killed" */
|
|
1295
|
+
.graph text {
|
|
1296
|
+
font-family: var(--sw-font);
|
|
1297
|
+
}
|
|
1298
|
+
.graph .node-box {
|
|
1299
|
+
fill: var(--md-sys-color-surface-container-high);
|
|
1300
|
+
stroke: none;
|
|
1301
|
+
transition: fill var(--md-color-fast);
|
|
1302
|
+
}
|
|
1303
|
+
.graph .node:hover .node-box {
|
|
1304
|
+
fill: var(--md-sys-color-surface-container-highest);
|
|
1305
|
+
stroke: none;
|
|
1306
|
+
}
|
|
1307
|
+
.graph .node.outsider .node-box,
|
|
1308
|
+
.graph .node.killed .node-box {
|
|
1309
|
+
fill: none;
|
|
1310
|
+
stroke: var(--md-sys-color-outline);
|
|
1311
|
+
stroke-width: 1;
|
|
1312
|
+
}
|
|
1313
|
+
.graph .node.hot .node-box {
|
|
1314
|
+
fill: var(--md-sys-color-secondary-container);
|
|
1315
|
+
stroke: none;
|
|
1316
|
+
}
|
|
1317
|
+
.graph .node-label {
|
|
1318
|
+
font-size: 12px;
|
|
1319
|
+
font-weight: 500;
|
|
1320
|
+
fill: var(--md-sys-color-on-surface);
|
|
1321
|
+
}
|
|
1322
|
+
.graph .node.hot .node-label {
|
|
1323
|
+
fill: var(--md-sys-color-on-secondary-container);
|
|
1324
|
+
}
|
|
1325
|
+
.graph .ring {
|
|
1326
|
+
stroke: var(--md-sys-color-outline);
|
|
1327
|
+
}
|
|
1328
|
+
.graph .edge {
|
|
1329
|
+
stroke: var(--md-sys-color-on-surface-variant);
|
|
1330
|
+
}
|
|
1331
|
+
.graph .edge.cur {
|
|
1332
|
+
stroke: var(--md-sys-color-primary);
|
|
1333
|
+
}
|
|
1334
|
+
.graph .arrowhead {
|
|
1335
|
+
fill: var(--md-sys-color-on-surface-variant);
|
|
1336
|
+
}
|
|
1337
|
+
.graph .msg-dot {
|
|
1338
|
+
fill: var(--md-sys-color-primary);
|
|
1339
|
+
}
|
|
1340
|
+
.graph .bcast rect {
|
|
1341
|
+
fill: var(--md-sys-color-tertiary-container);
|
|
1342
|
+
stroke: none;
|
|
1343
|
+
}
|
|
1344
|
+
.graph .bcast text {
|
|
1345
|
+
fill: var(--md-sys-color-on-tertiary-container);
|
|
1346
|
+
}
|
|
1347
|
+
.graph-legend {
|
|
1348
|
+
font: var(--md-sys-typescale-body-small);
|
|
1349
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1350
|
+
}
|
|
1351
|
+
.graph-legend .lg-bcast {
|
|
1352
|
+
background: var(--md-sys-color-tertiary-container);
|
|
1353
|
+
color: var(--md-sys-color-on-tertiary-container);
|
|
1354
|
+
}
|
|
1355
|
+
.replay-caption {
|
|
1356
|
+
margin-top: 16px;
|
|
1357
|
+
padding: 12px 16px;
|
|
1358
|
+
border-radius: var(--md-sys-shape-corner-large);
|
|
1359
|
+
background: var(--md-row);
|
|
1360
|
+
}
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
|
|
1364
|
+
/* 70 — Raw, loading, empty ------------------------------------------------- */
|
|
1365
|
+
:root[data-agy-theme="md3e"] {
|
|
1366
|
+
.raw {
|
|
1367
|
+
padding: 16px;
|
|
1368
|
+
border-radius: var(--md-sys-shape-corner-large);
|
|
1369
|
+
background: var(--md-row);
|
|
1370
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1371
|
+
}
|
|
1372
|
+
.raw-meta {
|
|
1373
|
+
font: var(--md-sys-typescale-body-small);
|
|
1374
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1375
|
+
}
|
|
1376
|
+
.skel {
|
|
1377
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
1378
|
+
animation: none; /* nothing loops: the skeleton is a still placeholder */
|
|
1379
|
+
background: var(--md-sys-color-surface-container-high);
|
|
1380
|
+
}
|
|
1381
|
+
.skel-tabs {
|
|
1382
|
+
border-bottom-color: var(--md-sys-color-outline-variant);
|
|
1383
|
+
}
|
|
1384
|
+
.loading-caption {
|
|
1385
|
+
font: var(--md-sys-typescale-body-small);
|
|
1386
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1387
|
+
}
|
|
1388
|
+
.empty-title {
|
|
1389
|
+
font: var(--md-sys-typescale-title-medium);
|
|
1390
|
+
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
|
|
1391
|
+
color: var(--md-sys-color-on-surface);
|
|
1392
|
+
}
|
|
1393
|
+
.empty-body {
|
|
1394
|
+
font: var(--md-sys-typescale-body-medium);
|
|
1395
|
+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
1396
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1397
|
+
}
|
|
1398
|
+
.empty-hint {
|
|
1399
|
+
gap: 4px;
|
|
1400
|
+
font: var(--md-sys-typescale-label-large);
|
|
1401
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
1402
|
+
}
|
|
1403
|
+
.empty-icon .links line {
|
|
1404
|
+
stroke: var(--md-sys-color-outline-variant);
|
|
1405
|
+
}
|
|
1406
|
+
.empty-icon .node {
|
|
1407
|
+
fill: var(--md-sys-color-secondary-container);
|
|
1408
|
+
stroke: none;
|
|
1409
|
+
}
|
|
1410
|
+
}
|