@aginies/ui 0.0.0-stage → 0.1.0
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 +149 -2
- package/dist/index.cjs +7456 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +2911 -0
- package/dist/index.d.ts +2911 -0
- package/dist/index.js +7237 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +2462 -0
- package/package.json +65 -4
package/dist/styles.css
ADDED
|
@@ -0,0 +1,2462 @@
|
|
|
1
|
+
/* generated by sync-from-ds; edit the design system, not this file */
|
|
2
|
+
|
|
3
|
+
/* --- 00-base.css --- */
|
|
4
|
+
/* Aginies Design System — bundle.css. Loaded after tokens.css (every --name comes from tokens.json). Classes are prefixed agn-. Light is the default theme; [data-theme="dark"] switches. */
|
|
5
|
+
.agn-root, .agn-body { font-family: var(--font-body); font-size: var(--font-size-ui, 13px); line-height: 1.4; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
|
|
6
|
+
.agn-root *, .agn-root *::before, .agn-root *::after { box-sizing: border-box; }
|
|
7
|
+
/* Instrument Sans' word space is 0.200em; UI text gets word-spacing-ui (tokens.json), declared on every element because browsers reset it on form controls and an inherited em would resolve at the root's size. Headings, reading text, stats and monospace keep the face's own spacing. */
|
|
8
|
+
.agn-root, .agn-body, .agn-root *, .agn-body * { word-spacing: var(--word-spacing-ui, 0.05em); }
|
|
9
|
+
.agn-root :is(h1, h2, h3, h4, pre, code, kbd, samp, .agn-display, .agn-mono, .agn-text--display, .agn-text--h1, .agn-text--h2, .agn-text--h3, .agn-text--h4, .agn-text--title, .agn-text--heading, .agn-text--stat, .agn-text--lede, .agn-text--body, .agn-text--body-2, .agn-code, .agn-diff, .agn-json, .agn-logo__word, .agn-stat__value), .agn-root :is(h1, h2, h3, h4, pre, code, kbd, samp, .agn-display, .agn-mono, .agn-text--display, .agn-text--h1, .agn-text--h2, .agn-text--h3, .agn-text--h4, .agn-text--title, .agn-text--heading, .agn-text--stat, .agn-text--lede, .agn-text--body, .agn-text--body-2, .agn-code, .agn-diff, .agn-json, .agn-logo__word, .agn-stat__value) * { word-spacing: normal; }
|
|
10
|
+
/* density: compact is the token default; comfortable scales controls for chat, approvals and mobile */
|
|
11
|
+
[data-density="comfortable"] { --control-h: 40px; --control-h-sm: 32px; --control-h-xs: 28px; --control-h-lg: 48px; --control-px: 16px; --row-h: 44px; --list-item-h: 48px; --nav-item-h: 40px; --icon: 20px; }
|
|
12
|
+
/* shared primitives */
|
|
13
|
+
.agn-focus:focus-visible, .agn-btn:focus-visible, .agn-chip:focus-visible, .agn-tab:focus-visible, .agn-nav-item:focus-visible, .agn-menu__item:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
|
|
14
|
+
.agn-focus-inset:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
|
|
15
|
+
.agn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
|
|
16
|
+
.agn-num, .agn-tabular { font-variant-numeric: tabular-nums; }
|
|
17
|
+
.agn-mono { font-family: var(--font-mono); }
|
|
18
|
+
.agn-display { font-family: var(--font-display); }
|
|
19
|
+
.agn-eyebrow { font-family: var(--font-mono); font-size: 11.5px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--link); font-weight: 500; }
|
|
20
|
+
.agn-eyebrow--quiet { color: var(--mute); }
|
|
21
|
+
.agn-icon { flex-shrink: 0; }
|
|
22
|
+
.agn-product-icon { color: var(--link); }
|
|
23
|
+
.agn-product-box { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--signal-soft); color: var(--link); flex-shrink: 0; }
|
|
24
|
+
.agn-mark { flex-shrink: 0; }
|
|
25
|
+
.agn-logo { display: inline-flex; align-items: center; gap: calc(var(--agn-logo-size, 24px) * .4); line-height: 1; color: var(--text); }
|
|
26
|
+
.agn-logo__word { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--agn-logo-size, 24px) * .92); letter-spacing: -.03em; font-variation-settings: 'opsz' 48; }
|
|
27
|
+
.agn-logo__product { font-weight: 400; color: var(--text-2); margin-left: .35em; letter-spacing: -.02em; }
|
|
28
|
+
@media (prefers-reduced-motion: reduce) { .agn-root *, .agn-root *::before, .agn-root *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }
|
|
29
|
+
|
|
30
|
+
/* --- 05-core.css --- */
|
|
31
|
+
/* core: Eyebrow (base class in 00-base), Kbd, Text */
|
|
32
|
+
.agn-kbd { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 500; color: var(--text-2); vertical-align: middle; }
|
|
33
|
+
.agn-kbd__key { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: inset 0 -1px 0 var(--line-2); }
|
|
34
|
+
.agn-kbd--sm .agn-kbd__key { min-width: 18px; height: 18px; padding: 0 3px; }
|
|
35
|
+
/* Text: the type styles in tokens.json, one class each */
|
|
36
|
+
.agn-text { margin: 0; }
|
|
37
|
+
.agn-text--display, .agn-text--h1, .agn-text--h2, .agn-text--h3, .agn-text--title, .agn-text--h4, .agn-text--heading, .agn-text--stat { font-family: var(--font-display); font-weight: 600; color: var(--text); }
|
|
38
|
+
.agn-text--display { font-size: 40px; line-height: .96; letter-spacing: -.04em; font-variation-settings: 'opsz' 48; }
|
|
39
|
+
.agn-text--h1 { font-size: 36px; line-height: 1; letter-spacing: -.035em; }
|
|
40
|
+
.agn-text--h2 { font-size: 28px; line-height: 1.04; letter-spacing: -.03em; }
|
|
41
|
+
.agn-text--h3, .agn-text--title { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
|
|
42
|
+
.agn-text--h4 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
|
|
43
|
+
.agn-text--heading { font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
|
|
44
|
+
.agn-text--stat { font-size: 32px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
|
|
45
|
+
.agn-text--lede, .agn-text--body, .agn-text--body-2, .agn-text--small, .agn-text--ui, .agn-text--ui-sm, .agn-text--ui-xs { font-family: var(--font-body); }
|
|
46
|
+
.agn-text--lede { font-size: 17px; line-height: 1.5; font-weight: 400; max-width: 60ch; color: var(--text-2); }
|
|
47
|
+
.agn-text--body { font-size: 16px; line-height: 1.55; font-weight: 400; }
|
|
48
|
+
.agn-text--body-2 { font-size: 15px; line-height: 1.5; font-weight: 400; }
|
|
49
|
+
.agn-text--small { font-size: 13.5px; line-height: 1.45; font-weight: 400; color: var(--text-2); }
|
|
50
|
+
.agn-text--ui { font-size: 13px; line-height: 1.4; font-weight: 500; }
|
|
51
|
+
.agn-text--ui-sm { font-size: 12px; line-height: 1.35; font-weight: 500; }
|
|
52
|
+
.agn-text--ui-xs { font-size: 11px; line-height: 1.3; font-weight: 500; }
|
|
53
|
+
.agn-text--eyebrow, .agn-text--label, .agn-text--tag, .agn-text--code, .agn-text--code-sm { font-family: var(--font-mono); }
|
|
54
|
+
.agn-text--eyebrow { font-size: 11.5px; line-height: 1; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
|
|
55
|
+
.agn-text--label { font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
56
|
+
.agn-text--tag { font-size: 11.5px; line-height: 1; font-weight: 500; letter-spacing: .04em; }
|
|
57
|
+
.agn-text--code { font-size: 13px; line-height: 1.55; font-weight: 400; font-variant-numeric: tabular-nums; }
|
|
58
|
+
.agn-text--code-sm { font-size: 12px; line-height: 1.5; font-weight: 400; font-variant-numeric: tabular-nums; }
|
|
59
|
+
.agn-text--truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
60
|
+
/* tones override the variant's own colour */
|
|
61
|
+
.agn-text--tone-text { color: var(--text); }
|
|
62
|
+
.agn-text--tone-text-2 { color: var(--text-2); }
|
|
63
|
+
.agn-text--tone-mute { color: var(--mute); }
|
|
64
|
+
.agn-text--tone-link { color: var(--link); }
|
|
65
|
+
.agn-text--tone-ok { color: var(--ok); }
|
|
66
|
+
.agn-text--tone-warn { color: var(--warn); }
|
|
67
|
+
.agn-text--tone-bad { color: var(--bad); }
|
|
68
|
+
|
|
69
|
+
/* --- 10-actions.css --- */
|
|
70
|
+
/* actions: Button, ButtonIcon, ButtonGroup */
|
|
71
|
+
.agn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--control-px); border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: -.005em; cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none; background: none; color: inherit; transition: background-color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter); }
|
|
72
|
+
.agn-btn:active:not(:disabled) { transform: translateY(1px); }
|
|
73
|
+
.agn-btn:disabled { cursor: default; opacity: .5; }
|
|
74
|
+
.agn-btn--sm { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: 12px; }
|
|
75
|
+
.agn-btn--xs { height: var(--control-h-xs); padding: 0 var(--space-2); font-size: 12px; gap: var(--space-1); }
|
|
76
|
+
.agn-btn--lg { height: var(--control-h-lg); padding: 0 18px; font-size: 15px; font-weight: 600; }
|
|
77
|
+
.agn-btn--stretch { width: 100%; }
|
|
78
|
+
/* primary = the one signal action per view */
|
|
79
|
+
.agn-btn--primary { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
|
|
80
|
+
.agn-btn--primary:hover:not(:disabled) { background: var(--signal-2); border-color: var(--signal-2); }
|
|
81
|
+
/* ink = the website's .btn.primary: text-coloured fill, flips to signal on hover; for brand screens */
|
|
82
|
+
.agn-btn--ink { background: var(--text); color: var(--bg); border-color: var(--text); }
|
|
83
|
+
.agn-btn--ink:hover:not(:disabled) { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
|
|
84
|
+
.agn-btn--neutral { background: var(--panel); color: var(--text); border-color: var(--edge); }
|
|
85
|
+
.agn-btn--neutral:hover:not(:disabled) { background: var(--panel-2); border-color: var(--text-2); }
|
|
86
|
+
.agn-btn--outline { background: transparent; color: var(--link); border-color: var(--link); }
|
|
87
|
+
.agn-btn--outline:hover:not(:disabled) { background: var(--signal-soft); }
|
|
88
|
+
.agn-btn--ghost { background: transparent; color: var(--text); }
|
|
89
|
+
.agn-btn--ghost:hover:not(:disabled) { background: var(--panel-2); }
|
|
90
|
+
.agn-btn--ghost:active:not(:disabled) { background: var(--panel-3); }
|
|
91
|
+
.agn-btn--destructive { background: var(--bad); color: var(--bad-ink); border-color: var(--bad); }
|
|
92
|
+
.agn-btn--destructive:hover:not(:disabled) { filter: brightness(.92); }
|
|
93
|
+
.agn-btn--destructive-text { background: var(--panel); color: var(--bad); border-color: var(--edge); }
|
|
94
|
+
.agn-btn--destructive-text:hover:not(:disabled) { background: var(--bad-soft); border-color: var(--bad); }
|
|
95
|
+
.agn-btn--success { background: var(--ok); color: var(--ok-ink); border-color: var(--ok); }
|
|
96
|
+
.agn-btn--success:hover:not(:disabled) { filter: brightness(.92); }
|
|
97
|
+
.agn-btn--link { background: none; border: 0; padding: 0; height: auto; color: var(--link); }
|
|
98
|
+
.agn-btn--link:hover:not(:disabled) { color: var(--link-hover); text-decoration: underline; }
|
|
99
|
+
.agn-btn--selected { background: var(--signal-soft); color: var(--link); border-color: var(--link); }
|
|
100
|
+
.agn-btn--icon { padding: 0; width: var(--control-h); position: relative; }
|
|
101
|
+
.agn-btn--icon.agn-btn--sm, .agn-btn--icon.agn-btn--xs { width: var(--control-h-sm); }
|
|
102
|
+
.agn-btn--icon.agn-btn--xs { width: var(--control-h-xs); height: var(--control-h-xs); }
|
|
103
|
+
.agn-btn--icon.agn-btn--lg { width: var(--control-h-lg); }
|
|
104
|
+
.agn-btn__dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--bad); box-shadow: 0 0 0 2px var(--panel); }
|
|
105
|
+
.agn-btn__arrow { transition: transform var(--duration-fast) var(--ease-enter); }
|
|
106
|
+
.agn-btn:hover:not(:disabled) .agn-btn__arrow { transform: translateX(3px); }
|
|
107
|
+
.agn-btn__spinner { width: 14px; height: 14px; border-radius: var(--radius-full); border: 2px solid currentColor; border-right-color: transparent; animation: agn-spin .8s linear infinite; }
|
|
108
|
+
@keyframes agn-spin { to { transform: rotate(360deg); } }
|
|
109
|
+
.agn-btn-group { display: inline-flex; align-items: center; }
|
|
110
|
+
.agn-btn-group--list { gap: var(--space-2); }
|
|
111
|
+
.agn-btn-group--joined > .agn-btn { border-radius: 0; margin-left: -1px; }
|
|
112
|
+
.agn-btn-group--joined > .agn-btn:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); margin-left: 0; }
|
|
113
|
+
.agn-btn-group--joined > .agn-btn:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
|
|
114
|
+
.agn-btn-group--joined > .agn-btn:focus-visible { position: relative; z-index: 1; }
|
|
115
|
+
/* ButtonStateful: three labels stacked in one grid cell so the width is the widest label */
|
|
116
|
+
.agn-btn-stateful__labels { display: grid; }
|
|
117
|
+
.agn-btn-stateful__label { grid-area: 1 / 1; visibility: hidden; }
|
|
118
|
+
.agn-btn-stateful__label--current { visibility: visible; }
|
|
119
|
+
.agn-btn-stateful--leaving:not(:disabled) { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
|
|
120
|
+
/* Menu */
|
|
121
|
+
.agn-menu-wrap { position: relative; display: inline-block; }
|
|
122
|
+
.agn-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: var(--z-dropdown); min-width: 200px; max-width: 320px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-1); font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text); animation: agn-pop-in var(--duration-base) var(--ease-enter); }
|
|
123
|
+
.agn-menu--right { left: auto; right: 0; }
|
|
124
|
+
.agn-menu--static { position: static; animation: none; }
|
|
125
|
+
@keyframes agn-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
|
|
126
|
+
.agn-menu__list { max-height: 320px; overflow: auto; }
|
|
127
|
+
.agn-menu__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--list-item-h); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
128
|
+
.agn-menu__item:hover, .agn-menu__item:focus-visible { background: var(--panel-2); }
|
|
129
|
+
.agn-menu__item:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
|
|
130
|
+
.agn-menu__item[aria-disabled="true"] { opacity: .5; cursor: default; background: none; }
|
|
131
|
+
.agn-menu__item--danger { color: var(--bad); }
|
|
132
|
+
.agn-menu__item--danger:hover, .agn-menu__item--danger:focus-visible { background: var(--bad-soft); }
|
|
133
|
+
.agn-menu__item--selected { color: var(--link); }
|
|
134
|
+
.agn-menu__check { width: 16px; display: inline-flex; justify-content: center; flex-shrink: 0; color: var(--link); }
|
|
135
|
+
.agn-menu__icon { color: var(--mute); }
|
|
136
|
+
.agn-menu__item--danger .agn-menu__icon { color: inherit; }
|
|
137
|
+
.agn-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: flex; flex-direction: column; gap: 2px; }
|
|
138
|
+
.agn-menu__meta { font-size: 12px; font-weight: 400; color: var(--mute); }
|
|
139
|
+
.agn-menu__shortcut { margin-left: var(--space-3); }
|
|
140
|
+
.agn-menu__sep { height: 1px; background: var(--line); margin: var(--space-1) var(--space-2); }
|
|
141
|
+
.agn-menu__header { padding: var(--space-2) var(--space-2) var(--space-1); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
142
|
+
.agn-menu__search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-2); margin: 0 0 var(--space-1); border-bottom: 1px solid var(--line); color: var(--mute); }
|
|
143
|
+
.agn-menu__search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
|
|
144
|
+
.agn-menu__search-input::placeholder { color: var(--mute); }
|
|
145
|
+
.agn-menu__empty { padding: var(--space-3) var(--space-2); color: var(--mute); font-weight: 400; }
|
|
146
|
+
.agn-menu__footer { margin-top: var(--space-1); padding: var(--space-1) var(--space-1) 0; border-top: 1px solid var(--line); }
|
|
147
|
+
/* Pill */
|
|
148
|
+
.agn-pill { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; max-width: 100%; padding: 0 var(--space-1) 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1; vertical-align: middle; }
|
|
149
|
+
.agn-pill--sm { height: 20px; font-size: 11px; }
|
|
150
|
+
.agn-pill--avatar { padding-left: 3px; border-radius: var(--radius-full); }
|
|
151
|
+
.agn-pill--invalid { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
|
|
152
|
+
.agn-pill__icon { color: var(--mute); }
|
|
153
|
+
.agn-pill--invalid .agn-pill__icon { color: inherit; }
|
|
154
|
+
.agn-pill__avatar { width: 16px; height: 16px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; }
|
|
155
|
+
.agn-pill__avatar--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--signal-soft); color: var(--link); font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: .02em; }
|
|
156
|
+
.agn-pill__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
|
|
157
|
+
a.agn-pill__label:hover { text-decoration: underline; color: var(--link); }
|
|
158
|
+
.agn-pill__remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--mute); cursor: pointer; flex-shrink: 0; transition: background-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter); }
|
|
159
|
+
.agn-pill__remove:hover { background: var(--panel-3); color: var(--text); }
|
|
160
|
+
.agn-pill__remove:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
|
|
161
|
+
.agn-pill-container { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; min-height: var(--control-h); padding: 3px var(--space-2); border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--bg-2); }
|
|
162
|
+
.agn-pill-container:focus-within { border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
163
|
+
.agn-pill-container--bare { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
|
|
164
|
+
.agn-pill-container--bare:focus-within { box-shadow: none; }
|
|
165
|
+
/* Chip (the website's .chip) */
|
|
166
|
+
.agn-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; user-select: none; transition: background-color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter); }
|
|
167
|
+
.agn-chip:hover:not(:disabled) { border-color: var(--edge); color: var(--text); background: var(--panel-2); }
|
|
168
|
+
.agn-chip--sm { height: var(--control-h-sm); padding: 0 10px; font-size: 12px; gap: var(--space-1); }
|
|
169
|
+
.agn-chip--active, .agn-chip[aria-pressed="true"] { background: var(--signal-soft); color: var(--link); border-color: var(--link); }
|
|
170
|
+
.agn-chip:disabled { opacity: .5; cursor: default; }
|
|
171
|
+
.agn-chip__count { font-family: var(--font-mono); font-size: 11px; color: var(--mute); padding: 2px 5px; border-radius: var(--radius-full); background: var(--panel-2); }
|
|
172
|
+
.agn-chip--active .agn-chip__count { background: var(--panel); color: var(--link); }
|
|
173
|
+
.agn-chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
|
174
|
+
/* CommandPalette */
|
|
175
|
+
.agn-cmdk__backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--space-4) var(--space-4); animation: agn-fade-in var(--duration-base) var(--ease-enter); }
|
|
176
|
+
@keyframes agn-fade-in { from { opacity: 0; } to { opacity: 1; } }
|
|
177
|
+
.agn-cmdk { width: 100%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; font-family: var(--font-body); font-size: 13px; color: var(--text); animation: agn-pop-in var(--duration-base) var(--ease-enter); }
|
|
178
|
+
.agn-cmdk--static { max-height: none; animation: none; }
|
|
179
|
+
.agn-cmdk__field { display: flex; align-items: center; gap: var(--space-3); height: var(--control-h-lg); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); flex-shrink: 0; }
|
|
180
|
+
.agn-cmdk__search-icon { color: var(--mute); }
|
|
181
|
+
.agn-cmdk__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--font-body); font-size: 15px; font-weight: 400; }
|
|
182
|
+
.agn-cmdk__input::placeholder { color: var(--mute); }
|
|
183
|
+
.agn-cmdk__list { flex: 1; overflow: auto; padding: var(--space-2); }
|
|
184
|
+
.agn-cmdk__group + .agn-cmdk__group { margin-top: var(--space-2); }
|
|
185
|
+
.agn-cmdk__group-label { padding: var(--space-2) var(--space-2) var(--space-1); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
186
|
+
.agn-cmdk__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--list-item-h); padding: 0 var(--space-2); border-radius: var(--radius-md); cursor: pointer; font-weight: 500; }
|
|
187
|
+
.agn-cmdk__item--active { background: var(--selection); color: var(--selection-ink); }
|
|
188
|
+
.agn-cmdk__icon { display: inline-flex; width: 16px; justify-content: center; color: var(--mute); flex-shrink: 0; }
|
|
189
|
+
.agn-cmdk__item--active .agn-cmdk__icon { color: var(--link); }
|
|
190
|
+
.agn-cmdk__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
191
|
+
.agn-cmdk__meta { font-size: 12px; font-weight: 400; color: var(--mute); white-space: nowrap; }
|
|
192
|
+
.agn-cmdk__empty { padding: var(--space-5) var(--space-3); text-align: center; color: var(--mute); font-weight: 400; }
|
|
193
|
+
.agn-cmdk__footer { display: flex; gap: var(--space-4); align-items: center; height: var(--control-h); padding: 0 var(--space-4); border-top: 1px solid var(--line); background: var(--panel-2); color: var(--mute); font-size: 12px; flex-shrink: 0; }
|
|
194
|
+
.agn-cmdk__hint { display: inline-flex; align-items: center; gap: var(--space-1); }
|
|
195
|
+
/* ThemeToggle: a segmented track of icon radios */
|
|
196
|
+
.agn-theme-toggle { display: inline-flex; align-items: center; gap: 2px; height: var(--control-h); padding: 3px; border-radius: var(--radius-md); background: var(--panel-2); border: 1px solid var(--line); }
|
|
197
|
+
.agn-theme-toggle--sm { height: var(--control-h-sm); padding: 2px; }
|
|
198
|
+
.agn-theme-toggle__opt { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); height: 100%; min-width: var(--control-h-xs); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--mute); font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter); }
|
|
199
|
+
.agn-theme-toggle__opt:hover { color: var(--text); }
|
|
200
|
+
.agn-theme-toggle__opt--on { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line-2); }
|
|
201
|
+
|
|
202
|
+
/* --- 20-forms.css --- */
|
|
203
|
+
/* forms: shared field, FormElement, Input, Textarea, Select, Checkbox, Switch, CheckboxButton, RadioGroup, Combobox, SegmentedControl, SecretField, TagInput */
|
|
204
|
+
.agn-field { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--control-h); padding: 0 var(--space-3); background: var(--bg-2); border: 1px solid var(--edge); border-radius: var(--radius-md); color: var(--text); font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.4; transition: border-color var(--duration-fast) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-enter), background-color var(--duration-fast) var(--ease-enter); }
|
|
205
|
+
.agn-field:hover:not(.agn-field--disabled):not(:focus-within) { border-color: var(--text-2); }
|
|
206
|
+
.agn-field:focus-within { border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
207
|
+
.agn-field--sm { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: 12px; gap: var(--space-1); }
|
|
208
|
+
.agn-field--lg { height: var(--control-h-lg); padding: 0 var(--space-4); font-size: 15px; }
|
|
209
|
+
.agn-field--invalid { border-color: var(--bad); }
|
|
210
|
+
.agn-field--invalid:focus-within { border-color: var(--bad); box-shadow: 0 0 0 var(--focus-halo) var(--bad-soft); }
|
|
211
|
+
.agn-field--disabled { opacity: .5; background: var(--panel-2); cursor: not-allowed; }
|
|
212
|
+
.agn-field--disabled .agn-field__input { cursor: not-allowed; }
|
|
213
|
+
.agn-field--readonly { background: var(--panel); }
|
|
214
|
+
.agn-field--bare { border-color: transparent; background: transparent; }
|
|
215
|
+
.agn-field--bare:not(:focus-within) { box-shadow: none; }
|
|
216
|
+
.agn-field__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
|
|
217
|
+
.agn-field__input::placeholder { color: var(--mute); font-weight: 400; }
|
|
218
|
+
.agn-field__input:-webkit-autofill { -webkit-text-fill-color: var(--text); transition: background-color 9999s; }
|
|
219
|
+
.agn-field__icon { color: var(--mute); }
|
|
220
|
+
.agn-field__affix { color: var(--mute); font-size: 12px; font-family: var(--font-mono); white-space: nowrap; }
|
|
221
|
+
.agn-field__action { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: calc(var(--space-1) * -1); border: 0; border-radius: var(--radius-sm); background: none; color: var(--mute); cursor: pointer; flex-shrink: 0; transition: background-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter); }
|
|
222
|
+
.agn-field__action:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
|
|
223
|
+
.agn-field__action:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
|
|
224
|
+
.agn-field__action:disabled { opacity: .5; cursor: default; }
|
|
225
|
+
.agn-field__action--ok { color: var(--ok); }
|
|
226
|
+
/* Textarea */
|
|
227
|
+
.agn-field--area { flex-direction: column; align-items: stretch; height: auto; min-height: var(--control-h); padding: var(--space-2) var(--space-3); }
|
|
228
|
+
.agn-field__textarea { height: auto; resize: vertical; line-height: 1.45; font-weight: 400; }
|
|
229
|
+
.agn-field__counter { align-self: flex-end; margin-top: var(--space-1); font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
230
|
+
.agn-field__counter--over { color: var(--bad); }
|
|
231
|
+
/* Select: native control, chevron drawn in CSS */
|
|
232
|
+
.agn-select { position: relative; padding-right: 0; }
|
|
233
|
+
.agn-select__native { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; }
|
|
234
|
+
.agn-select__native:disabled { cursor: not-allowed; }
|
|
235
|
+
.agn-select__native option { color: var(--text); background: var(--panel); }
|
|
236
|
+
.agn-select__chevron { position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(45deg); pointer-events: none; }
|
|
237
|
+
.agn-field--sm .agn-select__chevron { right: 10px; }
|
|
238
|
+
.agn-select:focus-within .agn-select__chevron { border-color: var(--text); }
|
|
239
|
+
/* FormElement */
|
|
240
|
+
.agn-form-el { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-family: var(--font-body); }
|
|
241
|
+
.agn-form-el__head { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
|
|
242
|
+
.agn-form-el__label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); line-height: 1.2; }
|
|
243
|
+
.agn-form-el__req { color: var(--bad); margin-left: 2px; }
|
|
244
|
+
.agn-form-el__opt { margin-left: var(--space-2); color: var(--mute); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 11.5px; font-weight: 400; }
|
|
245
|
+
.agn-form-el__hint { display: inline-flex; color: var(--mute); cursor: help; }
|
|
246
|
+
.agn-form-el__control { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
|
|
247
|
+
.agn-form-el__help { font-size: 12px; line-height: 1.4; color: var(--mute); font-weight: 400; }
|
|
248
|
+
.agn-form-el__error { display: flex; align-items: flex-start; gap: var(--space-1); font-size: 12px; line-height: 1.4; color: var(--bad); font-weight: 500; }
|
|
249
|
+
.agn-form-el__error .agn-icon { margin-top: 1px; }
|
|
250
|
+
.agn-form-el--inline { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
|
|
251
|
+
.agn-form-el--inline:last-child { border-bottom: 0; }
|
|
252
|
+
.agn-form-el--inline .agn-form-el__head { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding-top: calc((var(--control-h) - 13px) / 2); }
|
|
253
|
+
.agn-form-el__help--inline { padding: 0; }
|
|
254
|
+
.agn-form-el__value { display: flex; align-items: center; gap: var(--space-2); min-height: 24px; font-size: 13px; line-height: 1.4; color: var(--text); }
|
|
255
|
+
.agn-form-el__value-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
|
|
256
|
+
.agn-form-el__value-empty { color: var(--mute); }
|
|
257
|
+
.agn-form-el__edit { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--mute); cursor: pointer; flex-shrink: 0; opacity: 0; transition: opacity var(--duration-fast) var(--ease-enter), background-color var(--duration-fast) var(--ease-enter); }
|
|
258
|
+
.agn-form-el--readonly:hover .agn-form-el__edit, .agn-form-el__edit:focus-visible { opacity: 1; }
|
|
259
|
+
.agn-form-el__edit:hover { background: var(--panel-2); color: var(--text); }
|
|
260
|
+
.agn-form-el__edit:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
|
|
261
|
+
/* Checkbox */
|
|
262
|
+
.agn-check { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text); position: relative; }
|
|
263
|
+
.agn-check--bare { display: inline-flex; vertical-align: middle; }
|
|
264
|
+
.agn-check--disabled { opacity: .5; cursor: not-allowed; }
|
|
265
|
+
.agn-check__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
|
|
266
|
+
.agn-check__box { position: relative; display: inline-flex; width: 16px; height: 16px; margin-top: 1px; border: 1px solid var(--edge); border-radius: var(--radius-sm); background: var(--bg-2); flex-shrink: 0; transition: background-color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter); }
|
|
267
|
+
.agn-check--sm .agn-check__box { width: 14px; height: 14px; }
|
|
268
|
+
.agn-check--sm { font-size: 12px; }
|
|
269
|
+
.agn-check:hover:not(.agn-check--disabled) .agn-check__box { border-color: var(--text-2); }
|
|
270
|
+
.agn-check__input:checked + .agn-check__box, .agn-check__input:indeterminate + .agn-check__box { background: var(--signal); border-color: var(--signal); }
|
|
271
|
+
.agn-check__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border-right: 2px solid var(--signal-ink); border-bottom: 2px solid var(--signal-ink); transform: rotate(45deg) scale(0); transition: transform var(--duration-fast) var(--ease-enter); }
|
|
272
|
+
.agn-check--sm .agn-check__box::after { left: 3px; top: 0; width: 4px; height: 8px; }
|
|
273
|
+
.agn-check__input:checked + .agn-check__box::after { transform: rotate(45deg) scale(1); }
|
|
274
|
+
.agn-check__input:indeterminate + .agn-check__box::after { left: 3px; top: 6px; width: 8px; height: 0; border-right: 0; border-bottom: 2px solid var(--signal-ink); transform: none; }
|
|
275
|
+
.agn-check--sm .agn-check__input:indeterminate + .agn-check__box::after { left: 2px; top: 5px; }
|
|
276
|
+
.agn-check__input:focus-visible + .agn-check__box { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
|
|
277
|
+
.agn-check--invalid .agn-check__box { border-color: var(--bad); }
|
|
278
|
+
.agn-check__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
279
|
+
.agn-check__desc { font-size: 12px; font-weight: 400; color: var(--mute); }
|
|
280
|
+
.agn-check-group { margin: 0; padding: 0; border: 0; min-width: 0; }
|
|
281
|
+
.agn-check-group__legend { padding: 0; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
|
|
282
|
+
.agn-check-group__items { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
283
|
+
.agn-check-group--inline .agn-check-group__items { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
|
|
284
|
+
.agn-check-group .agn-form-el__help, .agn-check-group .agn-form-el__error { margin-top: var(--space-2); }
|
|
285
|
+
/* Switch */
|
|
286
|
+
.agn-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text); position: relative; }
|
|
287
|
+
.agn-switch--disabled { opacity: .5; cursor: not-allowed; }
|
|
288
|
+
.agn-switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
|
|
289
|
+
.agn-switch__track { position: relative; display: inline-block; width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--edge); flex-shrink: 0; transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
290
|
+
.agn-switch__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--panel); transition: transform var(--duration-fast) var(--ease-enter); }
|
|
291
|
+
.agn-switch--sm .agn-switch__track { width: 28px; height: 16px; }
|
|
292
|
+
.agn-switch--sm .agn-switch__knob { width: 12px; height: 12px; }
|
|
293
|
+
.agn-switch--sm { font-size: 12px; }
|
|
294
|
+
.agn-switch__input:checked + .agn-switch__track { background: var(--signal); }
|
|
295
|
+
.agn-switch__input:checked + .agn-switch__track .agn-switch__knob { transform: translateX(16px); background: var(--signal-ink); }
|
|
296
|
+
.agn-switch--sm .agn-switch__input:checked + .agn-switch__track .agn-switch__knob { transform: translateX(12px); }
|
|
297
|
+
.agn-switch:hover:not(.agn-switch--disabled) .agn-switch__input:not(:checked) + .agn-switch__track { background: var(--text-2); }
|
|
298
|
+
.agn-switch__input:focus-visible + .agn-switch__track { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
|
|
299
|
+
.agn-switch__state { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); min-width: 2.2em; }
|
|
300
|
+
.agn-switch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
301
|
+
.agn-switch--label-left .agn-switch__text { text-align: left; }
|
|
302
|
+
.agn-switch__desc { font-size: 12px; font-weight: 400; color: var(--mute); }
|
|
303
|
+
/* CheckboxButton */
|
|
304
|
+
.agn-check-btn--on { background: var(--signal-soft); color: var(--link); border-color: var(--link); }
|
|
305
|
+
.agn-check-btn--on:hover:not(:disabled) { background: var(--signal-soft); border-color: var(--link-hover); color: var(--link-hover); }
|
|
306
|
+
/* RadioGroup: list */
|
|
307
|
+
.agn-radio-group { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); }
|
|
308
|
+
.agn-radio-group--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
|
|
309
|
+
.agn-radio { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text); position: relative; }
|
|
310
|
+
.agn-radio--disabled { opacity: .5; cursor: not-allowed; }
|
|
311
|
+
.agn-radio__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
|
|
312
|
+
.agn-radio__dot { position: relative; width: 16px; height: 16px; margin-top: 1px; border: 1px solid var(--edge); border-radius: var(--radius-full); background: var(--bg-2); flex-shrink: 0; transition: border-color var(--duration-fast) var(--ease-enter); }
|
|
313
|
+
.agn-radio:hover:not(.agn-radio--disabled) .agn-radio__dot { border-color: var(--text-2); }
|
|
314
|
+
.agn-radio__input:checked + .agn-radio__dot { border: 5px solid var(--signal); background: var(--signal-ink); }
|
|
315
|
+
.agn-radio__input:focus-visible + .agn-radio__dot { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
|
|
316
|
+
.agn-radio-group--invalid .agn-radio__dot { border-color: var(--bad); }
|
|
317
|
+
.agn-radio__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
318
|
+
.agn-radio__desc { font-size: 12px; font-weight: 400; color: var(--mute); }
|
|
319
|
+
.agn-radio-group--sm .agn-radio { font-size: 12px; }
|
|
320
|
+
/* RadioGroup: button (segmented radio button group) */
|
|
321
|
+
.agn-radio-group--button { flex-direction: row; gap: 0; display: inline-flex; }
|
|
322
|
+
.agn-radio-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--control-px); margin-left: -1px; border: 1px solid var(--edge); background: var(--panel); color: var(--text); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; user-select: none; position: relative; transition: background-color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter); }
|
|
323
|
+
.agn-radio-btn:first-child { margin-left: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
|
|
324
|
+
.agn-radio-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
|
|
325
|
+
.agn-radio-btn:hover:not(.agn-radio-btn--disabled) { background: var(--panel-2); }
|
|
326
|
+
.agn-radio-btn--on { background: var(--signal-soft); color: var(--link); border-color: var(--link); z-index: 1; }
|
|
327
|
+
.agn-radio-btn--disabled { opacity: .5; cursor: not-allowed; }
|
|
328
|
+
.agn-radio-btn:focus-within { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); z-index: 2; }
|
|
329
|
+
.agn-radio-group--sm .agn-radio-btn { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: 12px; }
|
|
330
|
+
/* SegmentedControl: items in a track */
|
|
331
|
+
.agn-seg { display: inline-flex; align-items: center; gap: 2px; height: var(--control-h); padding: 3px; border-radius: var(--radius-md); background: var(--panel-2); border: 1px solid var(--line); font-family: var(--font-body); }
|
|
332
|
+
.agn-seg--sm { height: var(--control-h-sm); padding: 2px; }
|
|
333
|
+
.agn-seg--stretch { display: flex; }
|
|
334
|
+
.agn-seg--stretch .agn-seg__item { flex: 1; }
|
|
335
|
+
.agn-seg__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); height: 100%; min-width: var(--control-h-xs); padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter); }
|
|
336
|
+
.agn-seg--sm .agn-seg__item { padding: 0 var(--space-2); font-size: 12px; }
|
|
337
|
+
.agn-seg__item:hover:not(:disabled) { color: var(--text); }
|
|
338
|
+
.agn-seg__item--on { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line-2); }
|
|
339
|
+
.agn-seg__item:disabled { opacity: .5; cursor: default; }
|
|
340
|
+
/* Combobox */
|
|
341
|
+
.agn-combo { position: relative; min-width: 0; font-family: var(--font-body); }
|
|
342
|
+
.agn-combo__anchor { position: relative; }
|
|
343
|
+
.agn-field--picklist, .agn-combo__input--closed { cursor: pointer; }
|
|
344
|
+
.agn-combo__chevron { transition: transform var(--duration-fast) var(--ease-enter); }
|
|
345
|
+
.agn-combo__chevron--open { transform: rotate(180deg); }
|
|
346
|
+
.agn-combo__list { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: var(--z-dropdown); max-height: 280px; overflow: auto; padding: var(--space-1); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); animation: agn-pop-in var(--duration-base) var(--ease-enter); }
|
|
347
|
+
.agn-combo__opt { display: flex; align-items: center; gap: var(--space-2); min-height: var(--list-item-h); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); cursor: pointer; color: var(--text); font-size: 13px; font-weight: 500; }
|
|
348
|
+
.agn-combo__opt--active { background: var(--panel-2); }
|
|
349
|
+
.agn-combo__opt--selected { color: var(--link); }
|
|
350
|
+
.agn-combo__opt--disabled { opacity: .5; cursor: default; }
|
|
351
|
+
.agn-combo__tick { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--edge); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--signal-ink); flex-shrink: 0; }
|
|
352
|
+
.agn-combo__tick--on { background: var(--signal); border-color: var(--signal); }
|
|
353
|
+
.agn-combo__lead { color: var(--mute); }
|
|
354
|
+
.agn-combo__opt--selected .agn-combo__lead { color: var(--link); }
|
|
355
|
+
.agn-combo__avatar { width: 20px; height: 20px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; }
|
|
356
|
+
.agn-combo__avatar--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--signal-soft); color: var(--link); font-family: var(--font-mono); font-size: 9px; font-weight: 600; }
|
|
357
|
+
.agn-field .agn-combo__avatar { width: 18px; height: 18px; }
|
|
358
|
+
.agn-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
|
|
359
|
+
.agn-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
360
|
+
.agn-combo__meta { font-size: 12px; font-weight: 400; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
361
|
+
.agn-combo__check { color: var(--link); }
|
|
362
|
+
.agn-combo__header { padding: var(--space-2) var(--space-2) var(--space-1); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
363
|
+
.agn-combo__empty { padding: var(--space-3) var(--space-2); color: var(--mute); font-weight: 400; font-size: 13px; }
|
|
364
|
+
.agn-combo__pills { margin-top: var(--space-2); }
|
|
365
|
+
/* SecretField */
|
|
366
|
+
.agn-secret__input { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; font-weight: 400; }
|
|
367
|
+
/* TagInput */
|
|
368
|
+
.agn-tag-input { cursor: text; }
|
|
369
|
+
.agn-tag-input--invalid { border-color: var(--bad); }
|
|
370
|
+
.agn-tag-input--invalid:focus-within { border-color: var(--bad); box-shadow: 0 0 0 var(--focus-halo) var(--bad-soft); }
|
|
371
|
+
.agn-tag-input__input { flex: 1; min-width: 96px; height: 22px; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--font-body); font-size: 13px; font-weight: 500; }
|
|
372
|
+
.agn-tag-input__input::placeholder { color: var(--mute); font-weight: 400; }
|
|
373
|
+
.agn-tag-input__input:disabled { cursor: not-allowed; }
|
|
374
|
+
|
|
375
|
+
/* --- 30-pickers.css --- */
|
|
376
|
+
/* pickers: Datepicker/Calendar, Timepicker/DatetimePicker, Slider, ColorPicker, Counter, DuelingPicklist, FileSelector, RichTextEditor, VisualPicker, Expression, DockedFormFooter */
|
|
377
|
+
/* Calendar */
|
|
378
|
+
.agn-cal { width: 280px; padding: var(--space-3); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); font-family: var(--font-body); font-size: 13px; color: var(--text); }
|
|
379
|
+
.agn-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
|
|
380
|
+
.agn-cal__title { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: -.01em; text-transform: capitalize; }
|
|
381
|
+
.agn-cal__nav { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border: 0; border-radius: var(--radius-md); background: none; color: var(--text-2); cursor: pointer; }
|
|
382
|
+
.agn-cal__nav:hover { background: var(--panel-2); color: var(--text); }
|
|
383
|
+
.agn-cal__nav:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
|
|
384
|
+
.agn-cal__grid { display: flex; flex-direction: column; gap: 2px; }
|
|
385
|
+
.agn-cal__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
|
|
386
|
+
.agn-cal__dow { text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: var(--space-1) 0; }
|
|
387
|
+
.agn-cal__day { height: var(--control-h); border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font-family: var(--font-body); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
388
|
+
.agn-cal__day:hover:not(:disabled) { background: var(--panel-2); }
|
|
389
|
+
.agn-cal__day--out { color: var(--mute); font-weight: 400; }
|
|
390
|
+
.agn-cal__day--today { box-shadow: inset 0 0 0 1px var(--line-3); }
|
|
391
|
+
.agn-cal__day--range { background: var(--signal-soft); border-radius: 0; color: var(--link); }
|
|
392
|
+
.agn-cal__day--sel, .agn-cal__day--sel:hover:not(:disabled) { background: var(--signal); color: var(--signal-ink); box-shadow: none; }
|
|
393
|
+
.agn-cal__day--range-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
|
394
|
+
.agn-cal__day--range-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
|
395
|
+
.agn-cal__day:disabled { opacity: .35; cursor: default; }
|
|
396
|
+
.agn-cal__foot { display: flex; justify-content: space-between; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 12px; }
|
|
397
|
+
.agn-cal__foot .agn-btn--link { font-size: 12px; }
|
|
398
|
+
.agn-dp { position: relative; min-width: 0; }
|
|
399
|
+
.agn-dp .agn-field__input { cursor: pointer; }
|
|
400
|
+
.agn-dp__pop { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: var(--z-dropdown); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); animation: agn-pop-in var(--duration-base) var(--ease-enter); }
|
|
401
|
+
/* Timepicker / DatetimePicker */
|
|
402
|
+
.agn-tp .agn-field__input { font-variant-numeric: tabular-nums; }
|
|
403
|
+
.agn-dtp { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: var(--space-2); }
|
|
404
|
+
/* Slider */
|
|
405
|
+
.agn-slider { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); height: var(--control-h); font-family: var(--font-body); }
|
|
406
|
+
.agn-slider__track { position: relative; grid-column: 1; grid-row: 1; height: 4px; border-radius: var(--radius-full); background: var(--line-2); }
|
|
407
|
+
.agn-slider__fill { position: absolute; top: 0; bottom: 0; left: var(--agn-slider-a, 0%); right: calc(100% - var(--agn-slider-b, 0%)); border-radius: var(--radius-full); background: var(--signal); }
|
|
408
|
+
.agn-slider__input { grid-column: 1; grid-row: 1; width: 100%; height: var(--control-h); margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; pointer-events: none; }
|
|
409
|
+
.agn-slider__input::-webkit-slider-runnable-track { height: 4px; background: transparent; }
|
|
410
|
+
.agn-slider__input::-moz-range-track { height: 4px; background: transparent; }
|
|
411
|
+
.agn-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: var(--radius-full); background: var(--panel); border: 2px solid var(--signal); box-shadow: var(--shadow-sm); pointer-events: auto; cursor: grab; transition: transform var(--duration-fast) var(--ease-enter); }
|
|
412
|
+
.agn-slider__input::-moz-range-thumb { width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--panel); border: 2px solid var(--signal); box-shadow: var(--shadow-sm); pointer-events: auto; cursor: grab; }
|
|
413
|
+
.agn-slider__input:active::-webkit-slider-thumb { transform: scale(1.1); cursor: grabbing; }
|
|
414
|
+
.agn-slider__input:focus-visible { outline: none; }
|
|
415
|
+
.agn-slider__input:focus-visible::-webkit-slider-thumb { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
|
|
416
|
+
.agn-slider__input:focus-visible::-moz-range-thumb { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
|
|
417
|
+
.agn-slider__value { grid-column: 2; grid-row: 1; min-width: 3ch; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
|
|
418
|
+
.agn-slider--sm { height: var(--control-h-sm); }
|
|
419
|
+
.agn-slider--sm .agn-slider__input { height: var(--control-h-sm); }
|
|
420
|
+
.agn-slider--disabled { opacity: .5; }
|
|
421
|
+
.agn-slider--disabled .agn-slider__input { cursor: not-allowed; }
|
|
422
|
+
/* ColorPicker */
|
|
423
|
+
.agn-color { position: relative; min-width: 0; }
|
|
424
|
+
.agn-color__swatch { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: calc(var(--space-1) * -1); border: 1px solid var(--edge); border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; color: var(--mute); padding: 0; }
|
|
425
|
+
.agn-color__swatch:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
|
|
426
|
+
.agn-color__pop { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: var(--z-dropdown); padding: var(--space-3); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); animation: agn-pop-in var(--duration-base) var(--ease-enter); }
|
|
427
|
+
.agn-color__grid { display: grid; grid-template-columns: repeat(6, 24px); gap: var(--space-1); }
|
|
428
|
+
.agn-color__cell { width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--signal-ink); box-shadow: inset 0 0 0 1px var(--overlay); }
|
|
429
|
+
.agn-color__cell:hover { transform: scale(1.08); }
|
|
430
|
+
.agn-color__cell--on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--signal); }
|
|
431
|
+
.agn-color__cell:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
|
|
432
|
+
.agn-color__foot { display: flex; justify-content: flex-start; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
|
|
433
|
+
/* Counter */
|
|
434
|
+
.agn-counter { width: auto; display: inline-flex; padding: 0 var(--space-1); gap: 0; }
|
|
435
|
+
.agn-counter__input { width: 4.5ch; min-width: 3ch; text-align: center; padding: 0 var(--space-1); }
|
|
436
|
+
.agn-counter__btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-2); cursor: pointer; flex-shrink: 0; transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
437
|
+
.agn-counter__btn:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
|
|
438
|
+
.agn-counter__btn:disabled { opacity: .4; cursor: default; }
|
|
439
|
+
.agn-counter .agn-field__affix { padding-right: var(--space-1); }
|
|
440
|
+
/* DuelingPicklist */
|
|
441
|
+
.agn-dpl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: stretch; font-family: var(--font-body); font-size: 13px; }
|
|
442
|
+
.agn-dpl__col { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
|
|
443
|
+
.agn-dpl__title { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: 0 2px; }
|
|
444
|
+
.agn-dpl__count { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--mute); }
|
|
445
|
+
.agn-dpl__list { overflow: auto; padding: var(--space-1); border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--bg-2); }
|
|
446
|
+
.agn-dpl__list:focus-within { border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
447
|
+
.agn-dpl__item { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-xs); padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; user-select: none; color: var(--text); font-weight: 500; }
|
|
448
|
+
.agn-dpl__item:hover { background: var(--panel-2); }
|
|
449
|
+
.agn-dpl__item--on, .agn-dpl__item--on:hover { background: var(--selection); color: var(--selection-ink); }
|
|
450
|
+
.agn-dpl__meta { margin-left: auto; font-size: 11px; color: var(--mute); font-weight: 400; }
|
|
451
|
+
.agn-dpl__empty { padding: var(--space-3); text-align: center; color: var(--mute); font-weight: 400; }
|
|
452
|
+
.agn-dpl__moves { display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); padding-top: 18px; }
|
|
453
|
+
.agn-dpl--disabled { opacity: .5; pointer-events: none; }
|
|
454
|
+
/* FileSelector */
|
|
455
|
+
.agn-file { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); font-size: 13px; }
|
|
456
|
+
.agn-file__zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-5) var(--space-4); border: 1px dashed var(--edge); border-radius: var(--radius-lg); background: var(--bg-2); color: var(--text-2); text-align: center; transition: border-color var(--duration-fast) var(--ease-enter), background-color var(--duration-fast) var(--ease-enter); }
|
|
457
|
+
.agn-file__zone--over { border-color: var(--signal); border-style: solid; background: var(--signal-soft); }
|
|
458
|
+
.agn-file__zone--invalid { border-color: var(--bad); }
|
|
459
|
+
.agn-file__zone-icon { color: var(--mute); margin-bottom: var(--space-1); }
|
|
460
|
+
.agn-file__zone-text { font-weight: 500; color: var(--text); }
|
|
461
|
+
.agn-file__browse { cursor: pointer; }
|
|
462
|
+
.agn-file__hint { font-size: 12px; color: var(--mute); }
|
|
463
|
+
.agn-file__accept { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 11px; }
|
|
464
|
+
.agn-file--disabled .agn-file__zone { opacity: .5; pointer-events: none; }
|
|
465
|
+
.agn-file__row-text { flex: 1; min-width: 0; color: var(--text-2); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
466
|
+
.agn-file--row .agn-field { padding-right: var(--space-1); }
|
|
467
|
+
.agn-file__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
|
|
468
|
+
.agn-file__item { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: var(--list-item-h); padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); overflow: hidden; }
|
|
469
|
+
.agn-file__item--failed { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-soft); }
|
|
470
|
+
.agn-file__icon { color: var(--mute); }
|
|
471
|
+
.agn-file__icon--ok { color: var(--ok); }
|
|
472
|
+
.agn-file__icon--bad { color: var(--bad); }
|
|
473
|
+
.agn-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
|
|
474
|
+
.agn-file__meta { font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
|
|
475
|
+
.agn-file__item--failed .agn-file__meta { color: var(--bad); }
|
|
476
|
+
.agn-file__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
|
|
477
|
+
.agn-file__bar > span { display: block; height: 100%; background: var(--signal); transition: width var(--duration-base) var(--ease-enter); }
|
|
478
|
+
.agn-file__errors { display: flex; flex-direction: column; gap: var(--space-1); }
|
|
479
|
+
/* RichTextEditor */
|
|
480
|
+
.agn-rte { display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--bg-2); font-family: var(--font-body); color: var(--text); transition: border-color var(--duration-fast) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-enter); }
|
|
481
|
+
.agn-rte:focus-within { border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
482
|
+
.agn-rte--invalid { border-color: var(--bad); }
|
|
483
|
+
.agn-rte--invalid:focus-within { border-color: var(--bad); box-shadow: 0 0 0 var(--focus-halo) var(--bad-soft); }
|
|
484
|
+
.agn-rte--disabled { opacity: .5; background: var(--panel-2); }
|
|
485
|
+
.agn-rte__toolbar { display: flex; align-items: center; gap: 2px; padding: var(--space-1); border-bottom: 1px solid var(--line); }
|
|
486
|
+
.agn-rte__sep { width: 1px; height: 16px; margin: 0 var(--space-1); background: var(--line-2); }
|
|
487
|
+
.agn-rte__body { padding: var(--space-2) var(--space-3); outline: none; font-size: 13.5px; line-height: 1.5; font-weight: 400; overflow-wrap: anywhere; }
|
|
488
|
+
.agn-rte__body:empty::before { content: attr(data-placeholder); color: var(--mute); pointer-events: none; }
|
|
489
|
+
.agn-rte__body p { margin: 0 0 var(--space-2); }
|
|
490
|
+
.agn-rte__body ul { margin: 0 0 var(--space-2); padding-left: 20px; }
|
|
491
|
+
.agn-rte__body a { color: var(--link); }
|
|
492
|
+
.agn-rte__body code { font-family: var(--font-mono); font-size: 12px; padding: 1px 4px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); }
|
|
493
|
+
/* VisualPicker */
|
|
494
|
+
.agn-vp { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); font-family: var(--font-body); }
|
|
495
|
+
.agn-vp--wide { grid-template-columns: 1fr; }
|
|
496
|
+
.agn-vp__tile { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-height: 120px; padding: var(--space-4); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-enter), background-color var(--duration-fast) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-enter); }
|
|
497
|
+
.agn-vp--wide .agn-vp__tile { flex-direction: row; align-items: center; min-height: 0; padding: var(--space-3) var(--space-4); }
|
|
498
|
+
.agn-vp--sm .agn-vp__tile { min-height: 0; padding: var(--space-3); gap: var(--space-2); }
|
|
499
|
+
.agn-vp__tile:hover { border-color: var(--edge); }
|
|
500
|
+
.agn-vp__tile--on { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); background: var(--panel); }
|
|
501
|
+
.agn-vp__tile--disabled { opacity: .5; cursor: not-allowed; }
|
|
502
|
+
.agn-vp__tile:focus-within { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
|
|
503
|
+
.agn-vp__mark { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--edge); border-radius: var(--radius-full); background: var(--bg-2); color: var(--signal-ink); transition: background-color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter); }
|
|
504
|
+
.agn-vp__tile--on .agn-vp__mark { background: var(--signal); border-color: var(--signal); }
|
|
505
|
+
.agn-vp__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--panel-2); color: var(--text-2); flex-shrink: 0; }
|
|
506
|
+
.agn-vp__tile--on .agn-vp__icon { background: var(--signal-soft); color: var(--link); }
|
|
507
|
+
.agn-vp__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 20px; }
|
|
508
|
+
.agn-vp--wide .agn-vp__text { padding-right: 28px; }
|
|
509
|
+
.agn-vp__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
|
|
510
|
+
.agn-vp__desc { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
|
|
511
|
+
.agn-vp__meta { margin-top: var(--space-1); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); }
|
|
512
|
+
/* Expression */
|
|
513
|
+
.agn-expr { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); font-family: var(--font-body); font-size: 13px; }
|
|
514
|
+
.agn-expr__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
|
|
515
|
+
.agn-expr__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-right: auto; }
|
|
516
|
+
.agn-expr__logic-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
517
|
+
.agn-expr__rows { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
518
|
+
.agn-expr__row { display: grid; grid-template-columns: 24px minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1.2fr) auto; gap: var(--space-2); align-items: center; }
|
|
519
|
+
.agn-expr__num { position: relative; font-family: var(--font-mono); font-size: 11px; color: var(--mute); text-align: center; }
|
|
520
|
+
.agn-expr__joiner { display: flex; padding-left: 24px; }
|
|
521
|
+
.agn-expr__join { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--link); padding: 2px 6px; border-radius: var(--radius-sm); background: var(--signal-soft); }
|
|
522
|
+
.agn-expr__novalue { display: block; }
|
|
523
|
+
.agn-expr__group { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--line-2); border-radius: var(--radius-md); background: var(--bg); }
|
|
524
|
+
.agn-expr__group-head { display: flex; align-items: center; gap: var(--space-2); }
|
|
525
|
+
.agn-expr__group-head > .agn-btn { margin-left: auto; }
|
|
526
|
+
.agn-expr__foot { display: flex; gap: var(--space-2); }
|
|
527
|
+
@media (max-width: 640px) { .agn-expr__row { grid-template-columns: 24px 1fr auto; } .agn-expr__op, .agn-expr__value { grid-column: 2; } }
|
|
528
|
+
.agn-dp--range { min-width: 260px; }
|
|
529
|
+
/* DockedFormFooter */
|
|
530
|
+
.agn-docked { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); margin: 0 calc(var(--gutter-console) * -1); background: var(--panel); border-top: 1px solid var(--line-2); box-shadow: var(--shadow-sm); font-family: var(--font-body); font-size: 13px; }
|
|
531
|
+
.agn-docked--fixed { position: fixed; left: 0; right: 0; margin: 0; }
|
|
532
|
+
.agn-docked--right .agn-docked__actions { margin-left: auto; }
|
|
533
|
+
.agn-docked--center { justify-content: center; }
|
|
534
|
+
.agn-docked--left .agn-docked__actions { order: -1; }
|
|
535
|
+
.agn-docked__note { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--warn); font-weight: 500; white-space: nowrap; }
|
|
536
|
+
.agn-docked__note--saved { color: var(--ok); }
|
|
537
|
+
.agn-docked__extra { color: var(--mute); white-space: nowrap; }
|
|
538
|
+
.agn-docked__actions { display: inline-flex; gap: var(--space-2); }
|
|
539
|
+
|
|
540
|
+
/* --- 40-data.css --- */
|
|
541
|
+
/* data: Avatar, Badge, Tag, BlockIcon, Tile, SummaryDetail, DescriptionList, Amount, Stat, MiniChart, Sparkline, Heatmap, DataTable, TreeGrid, Tree, FileCard, Feed, ActivityTimeline, Illustration, Kanban, CalendarView, Gantt, CodeBlock, JsonTree, DiffView */
|
|
542
|
+
|
|
543
|
+
/* ---- Avatar: people are circles, systems and agents are radius-md squares ---- */
|
|
544
|
+
.agn-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--agn-avatar-size, 32px); height: var(--agn-avatar-size, 32px); border-radius: var(--radius-md); background: var(--panel-2); color: var(--text-2); font-family: var(--font-body); font-weight: 600; font-size: calc(var(--agn-avatar-size, 32px) * .38); letter-spacing: -.01em; overflow: visible; vertical-align: middle; user-select: none; }
|
|
545
|
+
.agn-avatar--person { border-radius: var(--radius-full); }
|
|
546
|
+
.agn-avatar--agent { background: var(--signal-soft); color: var(--link); }
|
|
547
|
+
.agn-avatar--xs { border-radius: var(--radius-sm); font-size: 9px; }
|
|
548
|
+
.agn-avatar--person.agn-avatar--xs { border-radius: var(--radius-full); }
|
|
549
|
+
.agn-avatar--lg { border-radius: var(--radius-lg); }
|
|
550
|
+
.agn-avatar--xl { border-radius: var(--radius-lg); }
|
|
551
|
+
.agn-avatar--g1 { background: var(--neutral-100); color: var(--neutral-700); }
|
|
552
|
+
.agn-avatar--g2 { background: var(--neutral-200); color: var(--neutral-800); }
|
|
553
|
+
.agn-avatar--g3 { background: var(--neutral-300); color: var(--neutral-900); }
|
|
554
|
+
.agn-avatar--g4 { background: var(--neutral-800); color: var(--neutral-100); }
|
|
555
|
+
.agn-avatar--agent.agn-avatar--g1, .agn-avatar--agent.agn-avatar--g2, .agn-avatar--agent.agn-avatar--g3, .agn-avatar--agent.agn-avatar--g4 { background: var(--signal-soft); color: var(--link); }
|
|
556
|
+
.agn-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
|
|
557
|
+
.agn-avatar__initials { line-height: 1; }
|
|
558
|
+
.agn-avatar__status { position: absolute; right: -1px; bottom: -1px; width: max(8px, calc(var(--agn-avatar-size, 32px) * .28)); height: max(8px, calc(var(--agn-avatar-size, 32px) * .28)); border-radius: var(--radius-full); box-shadow: 0 0 0 2px var(--panel); background: var(--mute); }
|
|
559
|
+
.agn-avatar__status--online { background: var(--ok); }
|
|
560
|
+
.agn-avatar__status--busy { background: var(--bad); }
|
|
561
|
+
.agn-avatar__status--away { background: var(--warn); }
|
|
562
|
+
.agn-avatar--more { background: var(--panel-2); color: var(--text-2); font-family: var(--font-mono); font-weight: 500; font-size: calc(var(--agn-avatar-size, 24px) * .4); }
|
|
563
|
+
.agn-avatar-group { display: inline-flex; align-items: center; }
|
|
564
|
+
.agn-avatar-group > .agn-avatar { box-shadow: 0 0 0 2px var(--panel); }
|
|
565
|
+
.agn-avatar-group > .agn-avatar + .agn-avatar { margin-left: calc(var(--agn-avatar-size, 24px) * -.3); }
|
|
566
|
+
|
|
567
|
+
/* ---- Badge: count or short status on a pill ---- */
|
|
568
|
+
.agn-badge { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--panel-3); color: var(--text-2); vertical-align: middle; }
|
|
569
|
+
.agn-badge--sm { min-width: 16px; height: 16px; padding: 0 5px; font-size: 10px; }
|
|
570
|
+
.agn-badge--count { padding: 0 5px; }
|
|
571
|
+
.agn-badge--signal { background: var(--signal-soft); color: var(--link); }
|
|
572
|
+
.agn-badge--ok { background: var(--ok-soft); color: var(--ok); }
|
|
573
|
+
.agn-badge--warn { background: var(--warn-soft); color: var(--warn); }
|
|
574
|
+
.agn-badge--bad { background: var(--bad-soft); color: var(--bad); }
|
|
575
|
+
.agn-badge--info { background: var(--info-soft); color: var(--info); }
|
|
576
|
+
.agn-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); color: var(--text-2); }
|
|
577
|
+
.agn-badge--outline.agn-badge--signal { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 55%, transparent); color: var(--link); }
|
|
578
|
+
.agn-badge--outline.agn-badge--ok { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
|
|
579
|
+
.agn-badge--outline.agn-badge--warn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
|
|
580
|
+
.agn-badge--outline.agn-badge--bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); }
|
|
581
|
+
.agn-badge--outline.agn-badge--info { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 45%, transparent); color: var(--info); }
|
|
582
|
+
.agn-badge--solid.agn-badge--neutral { background: var(--text); color: var(--bg); }
|
|
583
|
+
.agn-badge--solid.agn-badge--signal { background: var(--signal); color: var(--signal-ink); }
|
|
584
|
+
.agn-badge--solid.agn-badge--ok { background: var(--ok); color: var(--ok-ink); }
|
|
585
|
+
.agn-badge--solid.agn-badge--warn { background: var(--warn); color: var(--warn-ink); }
|
|
586
|
+
.agn-badge--solid.agn-badge--bad { background: var(--bad); color: var(--bad-ink); }
|
|
587
|
+
.agn-badge--solid.agn-badge--info { background: var(--info); color: var(--info-ink); }
|
|
588
|
+
|
|
589
|
+
/* ---- Tag: the website .tag ---- */
|
|
590
|
+
.agn-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: .04em; white-space: nowrap; vertical-align: middle; text-decoration: none; }
|
|
591
|
+
.agn-tag--signal { background: var(--signal-soft); color: var(--link); border-color: color-mix(in srgb, var(--link) 45%, transparent); }
|
|
592
|
+
.agn-tag--ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
|
|
593
|
+
.agn-tag--warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
|
|
594
|
+
.agn-tag--bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
|
|
595
|
+
.agn-tag--info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
|
|
596
|
+
.agn-tag__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
|
|
597
|
+
.agn-tag--dot.agn-tag--info .agn-tag__dot, .agn-tag--dot.agn-tag--signal .agn-tag__dot { animation: agn-tag-pulse var(--loader-pulse) var(--ease-loader) infinite; }
|
|
598
|
+
@keyframes agn-tag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
|
|
599
|
+
|
|
600
|
+
/* ---- BlockIcon: the 24px tile of a canvas block or tool ---- */
|
|
601
|
+
.agn-block-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--agn-block-size, 24px); height: var(--agn-block-size, 24px); border-radius: var(--radius-md); background: var(--signal-soft); color: var(--link); vertical-align: middle; }
|
|
602
|
+
.agn-block-icon--lg, .agn-block-icon--xl { border-radius: var(--radius-lg); }
|
|
603
|
+
.agn-block-icon--neutral { background: var(--panel-2); color: var(--text-2); }
|
|
604
|
+
.agn-block-icon--ok { background: var(--ok-soft); color: var(--ok); }
|
|
605
|
+
.agn-block-icon--warn { background: var(--warn-soft); color: var(--warn); }
|
|
606
|
+
.agn-block-icon--bad { background: var(--bad-soft); color: var(--bad); }
|
|
607
|
+
.agn-block-icon--info { background: var(--info-soft); color: var(--info); }
|
|
608
|
+
/* the documented exception: a tool's brand colour, washed to 14% for the ground and used as the glyph colour */
|
|
609
|
+
.agn-block-icon--brand { background: color-mix(in srgb, var(--agn-brand) 14%, var(--panel)); color: var(--agn-brand); }
|
|
610
|
+
|
|
611
|
+
/* ---- Tile: compact record summary ---- */
|
|
612
|
+
.agn-tile { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; min-width: 0; font-size: 13px; color: var(--text); }
|
|
613
|
+
.agn-tile--boxed { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
|
|
614
|
+
.agn-tile--interactive.agn-tile--boxed:hover { border-color: var(--line-3); }
|
|
615
|
+
.agn-tile--selected { background: var(--selection); color: var(--selection-ink); }
|
|
616
|
+
.agn-tile--selected.agn-tile--boxed { border-color: var(--signal); }
|
|
617
|
+
.agn-tile__media { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-2); min-height: 20px; }
|
|
618
|
+
.agn-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
|
|
619
|
+
.agn-tile__title { color: var(--text); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; text-align: left; cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--radius-sm); }
|
|
620
|
+
a.agn-tile__title, button.agn-tile__title { cursor: pointer; }
|
|
621
|
+
a.agn-tile__title:hover, button.agn-tile__title:hover { color: var(--link); }
|
|
622
|
+
.agn-tile__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: 12px; color: var(--mute); }
|
|
623
|
+
.agn-tile__meta-item + .agn-tile__meta-item::before { content: '·'; margin-right: var(--space-2); color: var(--line-3); }
|
|
624
|
+
.agn-tile__actions { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; margin-left: auto; }
|
|
625
|
+
|
|
626
|
+
/* ---- SummaryDetail: key fields in a row under a record title ---- */
|
|
627
|
+
.agn-summary { display: flex; flex-wrap: wrap; gap: var(--space-4) 0; margin: 0; padding: 0; }
|
|
628
|
+
.agn-summary__item { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-5) 0 0; margin-right: var(--space-5); border-right: 1px solid var(--line); min-width: 0; }
|
|
629
|
+
.agn-summary__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
|
|
630
|
+
.agn-summary--dense .agn-summary__item { padding-right: var(--space-3); margin-right: var(--space-3); }
|
|
631
|
+
.agn-summary__label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
632
|
+
.agn-summary__value { margin: 0; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; }
|
|
633
|
+
.agn-summary__item--ok .agn-summary__value { color: var(--ok); }
|
|
634
|
+
.agn-summary__item--warn .agn-summary__value { color: var(--warn); }
|
|
635
|
+
.agn-summary__item--bad .agn-summary__value { color: var(--bad); }
|
|
636
|
+
.agn-summary__empty, .agn-dl__empty, .agn-table__null { color: var(--mute); }
|
|
637
|
+
|
|
638
|
+
/* ---- DescriptionList ---- */
|
|
639
|
+
.agn-dl { display: grid; grid-template-columns: repeat(var(--agn-dl-cols, 1), minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; padding: 0; }
|
|
640
|
+
.agn-dl--cols-1 { --agn-dl-cols: 1; }
|
|
641
|
+
.agn-dl--cols-2 { --agn-dl-cols: 2; }
|
|
642
|
+
.agn-dl--cols-3 { --agn-dl-cols: 3; }
|
|
643
|
+
.agn-dl__item { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
|
|
644
|
+
.agn-dl__item--span { grid-column: 1 / -1; }
|
|
645
|
+
.agn-dl__label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
646
|
+
.agn-dl__value { margin: 0; font-size: 13px; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
|
|
647
|
+
.agn-dl--horizontal { gap: var(--space-3) var(--space-5); }
|
|
648
|
+
.agn-dl--horizontal .agn-dl__item { flex-direction: row; align-items: baseline; gap: var(--space-3); }
|
|
649
|
+
.agn-dl--horizontal .agn-dl__label { flex: 0 0 var(--agn-dl-label-w, 120px); }
|
|
650
|
+
.agn-dl--horizontal .agn-dl__value { flex: 1; }
|
|
651
|
+
@media (max-width: 640px) { .agn-dl { grid-template-columns: 1fr; } }
|
|
652
|
+
|
|
653
|
+
/* ---- Amount ---- */
|
|
654
|
+
.agn-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
655
|
+
.agn-amount--strong { font-weight: 600; }
|
|
656
|
+
.agn-amount--bad { color: var(--bad); }
|
|
657
|
+
.agn-amount--ok { color: var(--ok); }
|
|
658
|
+
.agn-amount__sign { margin-right: 1px; }
|
|
659
|
+
.agn-amount__frac { color: var(--mute); }
|
|
660
|
+
.agn-amount--bad .agn-amount__frac, .agn-amount--ok .agn-amount__frac { color: inherit; opacity: .75; }
|
|
661
|
+
|
|
662
|
+
/* ---- Stat: the website .stat ---- */
|
|
663
|
+
.agn-stat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
|
|
664
|
+
.agn-stat__head { display: flex; align-items: center; gap: var(--space-2); }
|
|
665
|
+
.agn-stat__icon { color: var(--mute); }
|
|
666
|
+
.agn-stat__label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
667
|
+
.agn-stat__row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
|
|
668
|
+
.agn-stat__value { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); font-variation-settings: 'opsz' 48; }
|
|
669
|
+
.agn-stat--sm .agn-stat__value { font-size: 20px; letter-spacing: -.02em; }
|
|
670
|
+
.agn-stat--lg .agn-stat__value { font-size: 44px; letter-spacing: -.035em; }
|
|
671
|
+
.agn-stat__delta { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-2); }
|
|
672
|
+
.agn-stat__delta--ok { color: var(--ok); }
|
|
673
|
+
.agn-stat__delta--bad { color: var(--bad); }
|
|
674
|
+
.agn-stat__delta-label { color: var(--mute); margin-left: var(--space-1); font-family: var(--font-body); font-weight: 400; }
|
|
675
|
+
.agn-stat__sub { font-size: 12px; color: var(--mute); }
|
|
676
|
+
.agn-stat__chart { margin-top: var(--space-1); }
|
|
677
|
+
|
|
678
|
+
/* ---- MiniChart, Sparkline ---- */
|
|
679
|
+
.agn-chart { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
|
|
680
|
+
.agn-chart__svg { display: block; width: 100%; overflow: visible; }
|
|
681
|
+
.agn-chart__grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
|
|
682
|
+
.agn-chart__label { font-family: var(--font-mono); font-size: 10px; fill: var(--mute); font-variant-numeric: tabular-nums; }
|
|
683
|
+
.agn-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 12px; color: var(--text-2); }
|
|
684
|
+
.agn-chart__key { display: inline-flex; align-items: center; gap: 6px; }
|
|
685
|
+
.agn-chart__key b { font-weight: 500; color: var(--text); }
|
|
686
|
+
.agn-chart__swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
|
|
687
|
+
.agn-chart__band rect { fill: var(--signal-soft); }
|
|
688
|
+
.agn-chart__ref line { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 4 3; shape-rendering: crispEdges; }
|
|
689
|
+
.agn-chart__ref-label, .agn-chart__band-label { fill: var(--text-2); }
|
|
690
|
+
.agn-chart__swatch--dashed { height: 0; border-top: 2px dashed currentColor; border-radius: 0; width: 12px; }
|
|
691
|
+
.agn-sparkline { display: inline-block; vertical-align: middle; overflow: visible; }
|
|
692
|
+
|
|
693
|
+
/* ---- Heatmap ---- */
|
|
694
|
+
.agn-heatmap { display: inline-flex; flex-direction: column; gap: var(--space-3); max-width: 100%; overflow: auto; }
|
|
695
|
+
.agn-heatmap__table { border-collapse: separate; border-spacing: 2px; }
|
|
696
|
+
.agn-heatmap__col, .agn-heatmap__row { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--mute); text-align: left; padding: 0 var(--space-2) 2px 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
|
|
697
|
+
.agn-heatmap__col { text-align: center; padding: 0 0 4px; vertical-align: bottom; }
|
|
698
|
+
.agn-heatmap__row { padding-right: var(--space-3); color: var(--text-2); font-family: var(--font-body); font-size: 12px; letter-spacing: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
|
|
699
|
+
.agn-heatmap__td { padding: 0; }
|
|
700
|
+
.agn-heatmap__cell { display: flex; align-items: center; justify-content: center; width: var(--agn-cell, 28px); height: var(--agn-cell, 28px); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0; font-family: var(--font-mono); font-size: 10px; cursor: default; transition: transform var(--duration-fast) var(--ease-enter); }
|
|
701
|
+
.agn-heatmap__cell--none { border-color: var(--line-2); }
|
|
702
|
+
.agn-heatmap__cell:hover { transform: scale(1.08); }
|
|
703
|
+
.agn-heatmap__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 12px; color: var(--text-2); }
|
|
704
|
+
.agn-heatmap__key { display: inline-flex; align-items: center; gap: 6px; }
|
|
705
|
+
.agn-heatmap__key i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid transparent; flex-shrink: 0; }
|
|
706
|
+
.agn-heatmap__legend--seq { align-items: center; }
|
|
707
|
+
.agn-heatmap__ramp { display: inline-flex; gap: 2px; }
|
|
708
|
+
.agn-heatmap__ramp i { width: 16px; height: 12px; border-radius: 2px; }
|
|
709
|
+
|
|
710
|
+
/* ---- DataTable (TreeGrid shares it) ---- */
|
|
711
|
+
.agn-table { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
|
|
712
|
+
.agn-table--bare { border: 0; border-radius: 0; background: transparent; }
|
|
713
|
+
.agn-table__scroll { overflow: auto; position: relative; }
|
|
714
|
+
.agn-table__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
|
|
715
|
+
.agn-table__head--sticky th { position: sticky; top: 0; z-index: var(--z-raised); }
|
|
716
|
+
.agn-table__th { height: 28px; padding: 0 var(--space-3); background: var(--panel-2); border-bottom: 1px solid var(--line-2); text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); white-space: nowrap; vertical-align: middle; }
|
|
717
|
+
.agn-table__th--right { text-align: right; }
|
|
718
|
+
.agn-table__th--center { text-align: center; }
|
|
719
|
+
.agn-table__th-inner { display: inline-flex; align-items: center; gap: var(--space-1); }
|
|
720
|
+
.agn-table__th--right .agn-table__th-inner { flex-direction: row-reverse; }
|
|
721
|
+
.agn-table__sort-btn { all: unset; display: inline-flex; align-items: center; cursor: pointer; height: 28px; margin: 0 calc(var(--space-3) * -1); padding: 0 var(--space-3); border-radius: var(--radius-sm); }
|
|
722
|
+
.agn-table__sort-btn:hover { color: var(--text); }
|
|
723
|
+
.agn-table__sort { color: var(--line-3); }
|
|
724
|
+
.agn-table__sort--active, .agn-table__th--sorted { color: var(--text); }
|
|
725
|
+
.agn-table__th--check, .agn-table__td--check { width: 32px; padding: 0 0 0 var(--space-3); }
|
|
726
|
+
.agn-table__th--actions, .agn-table__td--actions { width: 1%; text-align: right; padding-right: var(--space-2); white-space: nowrap; }
|
|
727
|
+
.agn-table__check { width: 14px; height: 14px; margin: 0; accent-color: var(--signal); vertical-align: middle; cursor: pointer; }
|
|
728
|
+
.agn-table__row { height: var(--row-h); transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
729
|
+
.agn-table__row:hover { background: var(--panel-2); }
|
|
730
|
+
.agn-table__row--clickable { cursor: pointer; }
|
|
731
|
+
.agn-table__row--selected { background: var(--selection); color: var(--selection-ink); }
|
|
732
|
+
.agn-table__row--selected:hover { background: var(--selection); }
|
|
733
|
+
.agn-table__row--active, .agn-table__row--active:hover { background: var(--selection); color: var(--selection-ink); }
|
|
734
|
+
.agn-table__row--active > .agn-table__td:first-child { box-shadow: inset 2px 0 0 var(--signal); }
|
|
735
|
+
.agn-table--striped .agn-table__row:nth-child(even) { background: var(--bg-2); }
|
|
736
|
+
.agn-table__td { height: var(--row-h); padding: 0 var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
|
|
737
|
+
.agn-table__body .agn-table__row:last-child .agn-table__td { border-bottom-color: transparent; }
|
|
738
|
+
.agn-table--bare .agn-table__body .agn-table__row:last-child .agn-table__td { border-bottom-color: var(--line); }
|
|
739
|
+
.agn-table__td--right { text-align: right; }
|
|
740
|
+
.agn-table__td--center { text-align: center; }
|
|
741
|
+
.agn-table__td--mono { font-family: var(--font-mono); font-size: 12px; }
|
|
742
|
+
.agn-table__td--ellipsis { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
743
|
+
.agn-table__td--editable { position: relative; padding-right: 28px; }
|
|
744
|
+
.agn-table__edit { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mute); cursor: pointer; opacity: 0; transition: opacity var(--duration-fast) var(--ease-enter); }
|
|
745
|
+
.agn-table__row:hover .agn-table__edit, .agn-table__edit:focus-visible, .agn-table__row:focus-within .agn-table__edit { opacity: 1; }
|
|
746
|
+
.agn-table__edit:hover { background: var(--panel-3); color: var(--text); }
|
|
747
|
+
.agn-table__td--editing { padding: 0 var(--space-1); }
|
|
748
|
+
.agn-table__input { width: 100%; height: var(--control-h-xs); padding: 0 var(--space-2); border: 1px solid var(--signal); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text); font: inherit; font-size: 13px; outline: none; box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
749
|
+
.agn-table__td--actions > * { opacity: .75; }
|
|
750
|
+
.agn-table__row:hover .agn-table__td--actions > *, .agn-table__row:focus-within .agn-table__td--actions > * { opacity: 1; }
|
|
751
|
+
.agn-table__state { height: 160px; padding: var(--space-5); text-align: center; vertical-align: middle; color: var(--mute); }
|
|
752
|
+
.agn-table__state > .agn-icon { color: var(--mute); margin-bottom: var(--space-2); }
|
|
753
|
+
.agn-table__state--error > .agn-icon { color: var(--bad); }
|
|
754
|
+
.agn-table__state-title { font-size: 13px; font-weight: 500; color: var(--text); }
|
|
755
|
+
.agn-table__state-hint { font-size: 12px; margin-top: 2px; }
|
|
756
|
+
.agn-table__state .agn-btn { margin-top: var(--space-3); }
|
|
757
|
+
.agn-table__spin { animation: agn-spin .8s linear infinite; margin-right: var(--space-2); vertical-align: middle; }
|
|
758
|
+
.agn-table__skeleton { display: inline-block; height: 10px; border-radius: var(--radius-sm); background: var(--panel-3); animation: agn-skeleton var(--loader-pulse) var(--ease-loader) infinite; vertical-align: middle; }
|
|
759
|
+
.agn-table__skeleton--box { width: 14px; height: 14px; }
|
|
760
|
+
@keyframes agn-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
|
|
761
|
+
.agn-table__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; padding: var(--space-1) var(--space-3); border-top: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--text-2); }
|
|
762
|
+
.agn-table__footer-main { flex: 1; }
|
|
763
|
+
.agn-table__pagination { margin-left: auto; }
|
|
764
|
+
/* TreeGrid */
|
|
765
|
+
.agn-treegrid__first { display: flex; align-items: center; gap: var(--space-1); height: var(--row-h); }
|
|
766
|
+
.agn-treegrid__toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; background: transparent; color: var(--mute); border-radius: var(--radius-sm); cursor: pointer; padding: 0; flex-shrink: 0; }
|
|
767
|
+
.agn-treegrid__toggle:hover { background: var(--panel-3); color: var(--text); }
|
|
768
|
+
.agn-treegrid__toggle--leaf { cursor: default; }
|
|
769
|
+
.agn-treegrid__chev, .agn-tree__chev, .agn-json__chev, .agn-timeline__chev { transition: transform var(--duration-fast) var(--ease-enter); }
|
|
770
|
+
.agn-treegrid__chev--open, .agn-tree__chev--open, .agn-json__chev--open, .agn-timeline__chev--open { transform: rotate(90deg); }
|
|
771
|
+
.agn-treegrid__icon { color: var(--mute); }
|
|
772
|
+
.agn-treegrid__row--parent .agn-treegrid__first { font-weight: 500; }
|
|
773
|
+
|
|
774
|
+
/* ---- Tree: nav tree with folders ---- */
|
|
775
|
+
.agn-tree { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
|
|
776
|
+
.agn-tree__header { padding: var(--space-2) var(--space-2) var(--space-1); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
777
|
+
.agn-tree__list { list-style: none; margin: 0; padding: 0; }
|
|
778
|
+
.agn-tree__empty { padding: var(--space-3); color: var(--mute); font-size: 12px; }
|
|
779
|
+
.agn-tree__item { display: flex; align-items: center; gap: var(--space-1); height: var(--nav-item-h); padding-right: var(--space-2); border-radius: var(--radius-md); color: var(--text); cursor: pointer; user-select: none; min-width: 0; transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
780
|
+
.agn-tree__item:hover { background: var(--panel-2); }
|
|
781
|
+
.agn-tree__item--selected { background: var(--selection); color: var(--selection-ink); font-weight: 500; }
|
|
782
|
+
.agn-tree__toggle { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--mute); flex-shrink: 0; }
|
|
783
|
+
.agn-tree__icon { color: var(--text-2); margin-right: 3px; }
|
|
784
|
+
.agn-tree__icon--folder { color: var(--mute); }
|
|
785
|
+
.agn-tree__item--selected .agn-tree__icon { color: var(--link); }
|
|
786
|
+
.agn-tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
787
|
+
.agn-tree__meta { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
788
|
+
|
|
789
|
+
/* ---- FileCard ---- */
|
|
790
|
+
.agn-file { display: flex; gap: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); min-width: 0; transition: border-color var(--duration-fast) var(--ease-enter); }
|
|
791
|
+
.agn-file--card { flex-direction: column; gap: 0; width: 180px; }
|
|
792
|
+
.agn-file--row { align-items: center; padding: var(--space-2) var(--space-3); }
|
|
793
|
+
.agn-file:hover { border-color: var(--line-3); }
|
|
794
|
+
.agn-file--selected { border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
795
|
+
.agn-file__thumb { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-2); background: var(--panel-2); position: relative; overflow: hidden; }
|
|
796
|
+
.agn-file--card .agn-file__thumb { height: 100px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 1px solid var(--line); }
|
|
797
|
+
.agn-file--row .agn-file__thumb { width: 36px; height: 36px; border-radius: var(--radius-md); }
|
|
798
|
+
.agn-file__img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
799
|
+
.agn-file__ext { position: absolute; right: 8px; bottom: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
|
|
800
|
+
.agn-file__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
|
|
801
|
+
.agn-file--card .agn-file__body { padding: var(--space-2) var(--space-3) var(--space-3); }
|
|
802
|
+
.agn-file__name { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; font-family: inherit; text-align: left; text-decoration: none; border-radius: var(--radius-sm); }
|
|
803
|
+
a.agn-file__name, button.agn-file__name { cursor: pointer; }
|
|
804
|
+
a.agn-file__name:hover, button.agn-file__name:hover { color: var(--link); }
|
|
805
|
+
.agn-file__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-family: var(--font-mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
|
|
806
|
+
.agn-file__meta > span + span::before { content: '·'; margin-right: var(--space-2); color: var(--line-3); }
|
|
807
|
+
.agn-file__actions { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
|
|
808
|
+
.agn-file--card .agn-file__actions { position: absolute; top: 6px; right: 6px; }
|
|
809
|
+
.agn-file--card { position: relative; }
|
|
810
|
+
|
|
811
|
+
/* ---- Feed, FeedPost ---- */
|
|
812
|
+
.agn-feed { display: flex; flex-direction: column; }
|
|
813
|
+
.agn-post { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 13px; }
|
|
814
|
+
.agn-feed > .agn-post:last-child { border-bottom: 0; }
|
|
815
|
+
.agn-post__avatar { margin-top: 2px; }
|
|
816
|
+
.agn-post__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
|
|
817
|
+
.agn-post__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1); color: var(--text-2); line-height: 1.4; }
|
|
818
|
+
.agn-post__author { font-weight: 600; color: var(--text); }
|
|
819
|
+
.agn-post__target { font-weight: 500; color: var(--text); }
|
|
820
|
+
.agn-post__time { font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-left: var(--space-2); font-variant-numeric: tabular-nums; }
|
|
821
|
+
.agn-post__body { color: var(--text); line-height: 1.5; font-size: 13.5px; overflow-wrap: anywhere; }
|
|
822
|
+
.agn-post--warn .agn-post__body { padding: var(--space-2) var(--space-3); background: var(--warn-soft); border-radius: var(--radius-md); }
|
|
823
|
+
.agn-post__actions { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
|
|
824
|
+
.agn-post__btn { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-h-xs); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
|
|
825
|
+
.agn-post__btn:hover { background: var(--panel-2); color: var(--text); }
|
|
826
|
+
.agn-post__btn--active { color: var(--link); }
|
|
827
|
+
.agn-post__replies { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--line); }
|
|
828
|
+
.agn-post__reply { display: flex; gap: var(--space-2); }
|
|
829
|
+
.agn-post__reply-main { min-width: 0; flex: 1; }
|
|
830
|
+
|
|
831
|
+
/* ---- ActivityTimeline ---- */
|
|
832
|
+
.agn-timeline { list-style: none; margin: 0; padding: 0; position: relative; --agn-tl-marker: 28px; }
|
|
833
|
+
.agn-timeline--compact { --agn-tl-marker: 22px; }
|
|
834
|
+
.agn-timeline__group { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: var(--space-3) 0 var(--space-2); }
|
|
835
|
+
.agn-timeline__group:first-child { padding-top: 0; }
|
|
836
|
+
.agn-timeline__item { position: relative; display: flex; gap: var(--space-3); padding: 0 0 var(--space-4); }
|
|
837
|
+
.agn-timeline--compact .agn-timeline__item { padding-bottom: var(--space-3); }
|
|
838
|
+
.agn-timeline__item::before { content: ''; position: absolute; left: calc(var(--agn-tl-marker) / 2 - 1px); top: var(--agn-tl-marker); bottom: 0; width: 2px; background: var(--line); }
|
|
839
|
+
.agn-timeline__item:last-child::before { display: none; }
|
|
840
|
+
.agn-timeline__marker { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--agn-tl-marker); height: var(--agn-tl-marker); border-radius: var(--radius-full); background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line-2); }
|
|
841
|
+
.agn-timeline__item--ok .agn-timeline__marker { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
|
|
842
|
+
.agn-timeline__item--warn .agn-timeline__marker { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
|
|
843
|
+
.agn-timeline__item--bad .agn-timeline__marker { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
|
|
844
|
+
.agn-timeline__item--info .agn-timeline__marker, .agn-timeline__item--signal .agn-timeline__marker { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
|
|
845
|
+
.agn-timeline__item--current .agn-timeline__marker { box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); border-color: var(--signal); }
|
|
846
|
+
.agn-timeline__item--pending { opacity: .6; }
|
|
847
|
+
.agn-timeline__item--pending .agn-timeline__marker { border-style: dashed; background: transparent; }
|
|
848
|
+
.agn-timeline__main { flex: 1; min-width: 0; padding-top: calc((var(--agn-tl-marker) - 18px) / 2); }
|
|
849
|
+
.agn-timeline__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
|
|
850
|
+
.agn-timeline__title { font-size: 13px; font-weight: 500; color: var(--text); }
|
|
851
|
+
.agn-timeline__time { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
852
|
+
.agn-timeline__desc { font-size: 13px; color: var(--text-2); line-height: 1.45; margin-top: 2px; }
|
|
853
|
+
.agn-timeline__toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-1); padding: 2px 4px 2px 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; border-radius: var(--radius-sm); }
|
|
854
|
+
.agn-timeline__detail { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-2); font-size: 12.5px; color: var(--text-2); }
|
|
855
|
+
|
|
856
|
+
/* ---- Illustration: twelve token-built scenes ---- */
|
|
857
|
+
.agn-illus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-5); text-align: center; color: var(--text-2); }
|
|
858
|
+
.agn-illus--sm { padding: var(--space-4); gap: var(--space-1); }
|
|
859
|
+
.agn-illus__scene { position: relative; width: 160px; height: 120px; margin-bottom: var(--space-2); }
|
|
860
|
+
.agn-illus--sm .agn-illus__scene { width: 96px; height: 72px; margin-bottom: 0; }
|
|
861
|
+
.agn-illus__blob { position: absolute; inset: 8% 14%; border-radius: 48% 52% 55% 45% / 55% 45% 55% 45%; background: var(--signal-soft); }
|
|
862
|
+
.agn-illus--error .agn-illus__blob { background: var(--bad-soft); }
|
|
863
|
+
.agn-illus--success .agn-illus__blob { background: var(--ok-soft); }
|
|
864
|
+
.agn-illus--build .agn-illus__blob { background: var(--warn-soft); }
|
|
865
|
+
.agn-illus--offline .agn-illus__blob, .agn-illus--locked .agn-illus__blob { background: var(--panel-3); }
|
|
866
|
+
.agn-illus__card { position: absolute; border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-sm); animation: agn-illus-float 6s ease-in-out infinite; }
|
|
867
|
+
.agn-illus__card:nth-child(3) { animation-delay: -3s; }
|
|
868
|
+
.agn-illus__card::before, .agn-illus__card::after { content: ''; position: absolute; left: 8px; height: 4px; border-radius: 2px; background: var(--line-2); }
|
|
869
|
+
.agn-illus__card::before { top: 8px; width: 50%; }
|
|
870
|
+
.agn-illus__card::after { top: 17px; width: 70%; background: var(--line); }
|
|
871
|
+
.agn-illus__dot { position: absolute; width: 10px; height: 10px; border-radius: var(--radius-full); transform: translate(-50%, -50%); }
|
|
872
|
+
.agn-illus--sm .agn-illus__dot { width: 6px; height: 6px; }
|
|
873
|
+
.agn-illus__glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--panel); color: var(--link); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
|
|
874
|
+
.agn-illus--sm .agn-illus__glyph { width: 40px; height: 40px; border-radius: var(--radius-md); }
|
|
875
|
+
.agn-illus__glyph--ok { color: var(--ok); }
|
|
876
|
+
.agn-illus__glyph--warn { color: var(--warn); }
|
|
877
|
+
.agn-illus__glyph--bad { color: var(--bad); }
|
|
878
|
+
.agn-illus__glyph--neutral { color: var(--text-2); }
|
|
879
|
+
.agn-illus__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
|
|
880
|
+
.agn-illus--sm .agn-illus__title { font-size: 14px; }
|
|
881
|
+
.agn-illus__message { max-width: 380px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
|
|
882
|
+
.agn-illus__action { margin-top: var(--space-2); display: flex; gap: var(--space-2); }
|
|
883
|
+
@keyframes agn-illus-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
|
|
884
|
+
|
|
885
|
+
/* ---- Kanban ---- */
|
|
886
|
+
.agn-kanban { display: flex; gap: var(--space-3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--space-2); min-width: 0; }
|
|
887
|
+
.agn-kanban__col { flex: 0 0 260px; display: flex; flex-direction: column; max-height: 100%; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line); transition: border-color var(--duration-fast) var(--ease-enter), background-color var(--duration-fast) var(--ease-enter); }
|
|
888
|
+
.agn-kanban__col--over { border-color: var(--signal); background: var(--signal-soft); }
|
|
889
|
+
.agn-kanban__head { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-2) 0 var(--space-3); }
|
|
890
|
+
.agn-kanban__title { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
891
|
+
.agn-kanban__tone { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--mute); }
|
|
892
|
+
.agn-kanban__title--ok .agn-kanban__tone { background: var(--ok); }
|
|
893
|
+
.agn-kanban__title--warn .agn-kanban__tone { background: var(--warn); }
|
|
894
|
+
.agn-kanban__title--bad .agn-kanban__tone { background: var(--bad); }
|
|
895
|
+
.agn-kanban__title--info .agn-kanban__tone, .agn-kanban__title--signal .agn-kanban__tone { background: var(--signal); }
|
|
896
|
+
.agn-kanban__count { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
897
|
+
.agn-kanban__count--over { color: var(--bad); font-weight: 600; }
|
|
898
|
+
.agn-kanban__limit { color: var(--line-3); }
|
|
899
|
+
.agn-kanban__add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mute); cursor: pointer; }
|
|
900
|
+
.agn-kanban__add:hover { background: var(--panel-3); color: var(--text); }
|
|
901
|
+
.agn-kanban__cards { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2); min-height: 48px; overflow-y: auto; }
|
|
902
|
+
.agn-kanban__empty { padding: var(--space-3); text-align: center; font-size: 12px; color: var(--mute); border: 1px dashed var(--line-2); border-radius: var(--radius-md); }
|
|
903
|
+
.agn-kanban__card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); cursor: grab; font-size: 13px; transition: border-color var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-enter); }
|
|
904
|
+
.agn-kanban__card:hover { border-color: var(--line-3); }
|
|
905
|
+
.agn-kanban__card--dragging { opacity: .5; cursor: grabbing; }
|
|
906
|
+
.agn-kanban__card--bad { border-left: 3px solid var(--bad); }
|
|
907
|
+
.agn-kanban__card--warn { border-left: 3px solid var(--warn); }
|
|
908
|
+
.agn-kanban__card--ok { border-left: 3px solid var(--ok); }
|
|
909
|
+
.agn-kanban__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
|
|
910
|
+
.agn-kanban__card-title { font-weight: 500; color: var(--text); line-height: 1.35; }
|
|
911
|
+
.agn-kanban__card-sub { font-size: 12px; color: var(--text-2); line-height: 1.4; }
|
|
912
|
+
.agn-kanban__card-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
|
|
913
|
+
.agn-kanban__due { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
|
|
914
|
+
.agn-kanban__due--overdue { color: var(--bad); }
|
|
915
|
+
.agn-kanban__card-foot .agn-badge { margin-left: auto; }
|
|
916
|
+
|
|
917
|
+
/* ---- CalendarView ---- */
|
|
918
|
+
.agn-calview.agn-cal { width: auto; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; min-width: 0; font-size: 13px; }
|
|
919
|
+
.agn-calview .agn-cal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 44px; padding: 0 var(--space-3) 0 var(--space-4); border-bottom: 1px solid var(--line); }
|
|
920
|
+
.agn-calview .agn-cal__month { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); text-transform: capitalize; }
|
|
921
|
+
.agn-calview .agn-cal__nav { display: inline-flex; align-items: center; gap: 2px; }
|
|
922
|
+
.agn-calview .agn-cal__nav-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--control-h-sm); min-width: var(--control-h-sm); padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
|
|
923
|
+
.agn-calview .agn-cal__nav-btn--today { padding: 0 var(--space-2); }
|
|
924
|
+
.agn-calview .agn-cal__nav-btn:hover { background: var(--panel-2); }
|
|
925
|
+
.agn-calview .agn-cal__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--panel-2); border-bottom: 1px solid var(--line-2); }
|
|
926
|
+
.agn-calview .agn-cal__weekday { height: 28px; display: flex; align-items: center; padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
927
|
+
.agn-calview .agn-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(96px, auto); }
|
|
928
|
+
.agn-calview .agn-cal__day { display: flex; flex-direction: column; gap: 2px; padding: var(--space-1) var(--space-1) var(--space-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
|
|
929
|
+
.agn-calview .agn-cal__day:nth-child(7n) { border-right: 0; }
|
|
930
|
+
.agn-calview .agn-cal__grid > .agn-cal__day:nth-last-child(-n+7) { border-bottom: 0; }
|
|
931
|
+
.agn-calview .agn-cal__day--outside { background: var(--bg); }
|
|
932
|
+
.agn-calview .agn-cal__day--outside .agn-cal__date { color: var(--mute); }
|
|
933
|
+
.agn-calview .agn-cal__day--weekend:not(.agn-cal__day--outside) { background: var(--bg-2); }
|
|
934
|
+
.agn-calview .agn-cal__date { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 0 0 2px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--text-2); }
|
|
935
|
+
.agn-calview button.agn-cal__date { padding: 0; border: 0; background: none; cursor: pointer; }
|
|
936
|
+
.agn-calview .agn-cal__day--today .agn-cal__date { background: var(--signal); color: var(--signal-ink); }
|
|
937
|
+
.agn-calview .agn-cal__events { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
938
|
+
.agn-calview .agn-cal__chip { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border: 0; border-left: 2px solid currentColor; border-radius: var(--radius-sm); font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1; text-align: left; cursor: pointer; min-width: 0; background: var(--signal-soft); color: var(--link); }
|
|
939
|
+
.agn-calview .agn-cal__chip--ok { background: var(--ok-soft); color: var(--ok); }
|
|
940
|
+
.agn-calview .agn-cal__chip--warn { background: var(--warn-soft); color: var(--warn); }
|
|
941
|
+
.agn-calview .agn-cal__chip--bad { background: var(--bad-soft); color: var(--bad); }
|
|
942
|
+
.agn-calview .agn-cal__chip--info { background: var(--info-soft); color: var(--info); }
|
|
943
|
+
.agn-calview .agn-cal__chip--neutral { background: var(--panel-2); color: var(--text-2); }
|
|
944
|
+
.agn-calview .agn-cal__chip:hover { filter: brightness(.95); }
|
|
945
|
+
.agn-calview .agn-cal__chip-time { font-family: var(--font-mono); font-size: 10px; flex-shrink: 0; opacity: .85; }
|
|
946
|
+
.agn-calview .agn-cal__chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
947
|
+
.agn-calview .agn-cal__more { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); padding: 0 6px; }
|
|
948
|
+
@media (max-width: 640px) { .agn-calview .agn-cal__grid { grid-auto-rows: minmax(56px, auto); } .agn-calview .agn-cal__chip-title, .agn-calview .agn-cal__chip-time { display: none; } .agn-calview .agn-cal__chip { width: 8px; height: 8px; padding: 0; border-radius: var(--radius-full); border: 0; background: currentColor; } .agn-calview .agn-cal__events { flex-direction: row; flex-wrap: wrap; gap: 3px; padding: 2px 4px; } }
|
|
949
|
+
|
|
950
|
+
/* ---- Gantt ---- */
|
|
951
|
+
.agn-gantt { display: flex; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; min-width: 0; font-size: 13px; --agn-gantt-row: var(--row-h); }
|
|
952
|
+
.agn-gantt__labels { flex: 0 0 var(--agn-gantt-label-w, 200px); border-right: 1px solid var(--line-2); }
|
|
953
|
+
.agn-gantt__head { height: 44px; background: var(--panel-2); border-bottom: 1px solid var(--line-2); }
|
|
954
|
+
.agn-gantt__label { display: flex; align-items: center; gap: 6px; height: var(--agn-gantt-row); padding-right: var(--space-3); border-bottom: 1px solid var(--line); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
955
|
+
.agn-gantt__label--group { font-weight: 600; }
|
|
956
|
+
.agn-gantt__label-icon { color: var(--mute); }
|
|
957
|
+
.agn-gantt__scroll { flex: 1; overflow-x: auto; min-width: 0; }
|
|
958
|
+
.agn-gantt__canvas { position: relative; min-width: 100%; }
|
|
959
|
+
.agn-gantt__bands { display: flex; height: 20px; }
|
|
960
|
+
.agn-gantt__band { display: flex; align-items: center; padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); border-right: 1px solid var(--line); overflow: hidden; white-space: nowrap; flex-shrink: 0; }
|
|
961
|
+
.agn-gantt__cols { display: flex; height: 24px; }
|
|
962
|
+
.agn-gantt__col { flex: 0 0 var(--agn-gantt-col, 32px); display: flex; align-items: center; justify-content: center; gap: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); border-right: 1px solid var(--line); overflow: hidden; }
|
|
963
|
+
.agn-gantt__col--weekend { background: var(--panel-3); }
|
|
964
|
+
.agn-gantt__wd { color: var(--mute); }
|
|
965
|
+
.agn-gantt__rows { position: relative; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: var(--agn-gantt-col, 32px) 100%; }
|
|
966
|
+
.agn-gantt__row { position: relative; height: var(--agn-gantt-row); border-bottom: 1px solid var(--line); }
|
|
967
|
+
.agn-gantt__row--group { background: var(--bg-2); }
|
|
968
|
+
.agn-gantt__bar { position: absolute; top: 6px; height: calc(var(--agn-gantt-row) - 12px); display: flex; align-items: center; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--signal-soft); color: var(--link); font: inherit; font-size: 11px; font-weight: 500; font-family: var(--font-mono); cursor: default; }
|
|
969
|
+
button.agn-gantt__bar, button.agn-gantt__milestone { cursor: pointer; }
|
|
970
|
+
.agn-gantt__bar--ok { background: var(--ok-soft); color: var(--ok); }
|
|
971
|
+
.agn-gantt__bar--warn { background: var(--warn-soft); color: var(--warn); }
|
|
972
|
+
.agn-gantt__bar--bad { background: var(--bad-soft); color: var(--bad); }
|
|
973
|
+
.agn-gantt__bar--neutral { background: var(--panel-3); color: var(--text-2); }
|
|
974
|
+
.agn-gantt__bar--group { top: 11px; height: 6px; padding: 0; border-radius: 3px; background: var(--line-3); }
|
|
975
|
+
.agn-gantt__progress { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; opacity: .28; }
|
|
976
|
+
.agn-gantt__bar-label { position: relative; white-space: nowrap; }
|
|
977
|
+
.agn-gantt__milestone { position: absolute; top: 50%; width: 12px; height: 12px; margin-left: -6px; transform: translateY(-50%) rotate(45deg); border: 0; padding: 0; border-radius: 2px; background: var(--signal); }
|
|
978
|
+
.agn-gantt__milestone.agn-gantt__bar--ok { background: var(--ok); }
|
|
979
|
+
.agn-gantt__milestone.agn-gantt__bar--bad { background: var(--bad); }
|
|
980
|
+
.agn-gantt__milestone.agn-gantt__bar--warn { background: var(--warn); }
|
|
981
|
+
.agn-gantt__today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--signal); z-index: var(--z-raised); pointer-events: none; }
|
|
982
|
+
.agn-gantt__today-label { position: absolute; top: 2px; left: 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--link); background: var(--panel); padding: 1px 4px; border-radius: var(--radius-sm); }
|
|
983
|
+
|
|
984
|
+
/* ---- CodeBlock (bar shared with JsonTree and DiffView) ---- */
|
|
985
|
+
.agn-code { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); overflow: hidden; min-width: 0; }
|
|
986
|
+
.agn-code__bar { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-2) 0 var(--space-3); background: var(--panel-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); }
|
|
987
|
+
.agn-code__title { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
988
|
+
.agn-code__lang { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; padding: 1px 5px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
|
|
989
|
+
.agn-code__tools { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
|
|
990
|
+
.agn-code__tool { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font: inherit; font-size: 11px; cursor: pointer; }
|
|
991
|
+
.agn-code__tool:hover { background: var(--panel-3); color: var(--text); }
|
|
992
|
+
.agn-code__tool--on { color: var(--link); }
|
|
993
|
+
.agn-code__pre { margin: 0; padding: var(--space-2) 0; overflow: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--text); font-variant-numeric: tabular-nums; tab-size: 2; }
|
|
994
|
+
.agn-code__code { display: block; font: inherit; }
|
|
995
|
+
.agn-code__line { display: flex; min-width: max-content; }
|
|
996
|
+
.agn-code--wrap .agn-code__line { min-width: 0; }
|
|
997
|
+
.agn-code--wrap .agn-code__text { white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
998
|
+
.agn-code__line--hl { background: var(--signal-soft); }
|
|
999
|
+
.agn-code__ln { flex: 0 0 auto; width: 3.5ch; margin-right: var(--space-3); padding-left: var(--space-3); text-align: right; color: var(--mute); user-select: none; box-sizing: content-box; }
|
|
1000
|
+
.agn-code--plain .agn-code__text { padding-left: var(--space-3); }
|
|
1001
|
+
.agn-code__text { white-space: pre; padding-right: var(--space-3); flex: 1; }
|
|
1002
|
+
.agn-code__str { color: var(--ok); }
|
|
1003
|
+
.agn-code__num { color: var(--warn); }
|
|
1004
|
+
.agn-code__kw { color: var(--link); }
|
|
1005
|
+
.agn-code__key { color: var(--text); font-weight: 500; }
|
|
1006
|
+
.agn-code__cmt { color: var(--text-2); font-style: italic; }
|
|
1007
|
+
.agn-code__op { color: var(--text-2); }
|
|
1008
|
+
|
|
1009
|
+
/* ---- JsonTree ---- */
|
|
1010
|
+
.agn-json { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); overflow: hidden; min-width: 0; }
|
|
1011
|
+
.agn-json__body { overflow: auto; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--text); font-variant-numeric: tabular-nums; }
|
|
1012
|
+
.agn-json__list { list-style: none; margin: 0; padding: 0; }
|
|
1013
|
+
.agn-json__row { display: flex; align-items: center; white-space: nowrap; }
|
|
1014
|
+
.agn-json__toggle { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 2px; border: 0; padding: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mute); cursor: pointer; flex-shrink: 0; }
|
|
1015
|
+
.agn-json__toggle:hover { background: var(--panel-3); color: var(--text); }
|
|
1016
|
+
.agn-json__toggle--leaf { cursor: default; }
|
|
1017
|
+
.agn-json__k { color: var(--text); font-weight: 500; }
|
|
1018
|
+
.agn-json__k--index { color: var(--mute); font-weight: 400; }
|
|
1019
|
+
.agn-json__p { color: var(--text-2); }
|
|
1020
|
+
.agn-json__hint { color: var(--mute); margin: 0 4px; font-size: 11px; }
|
|
1021
|
+
.agn-json__v--string { color: var(--ok); }
|
|
1022
|
+
.agn-json__v--number { color: var(--warn); }
|
|
1023
|
+
.agn-json__v--boolean, .agn-json__v--null, .agn-json__v--undefined { color: var(--link); }
|
|
1024
|
+
|
|
1025
|
+
/* ---- DiffView ---- */
|
|
1026
|
+
.agn-diff { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); overflow: hidden; min-width: 0; }
|
|
1027
|
+
.agn-diff__stats { margin-left: auto; display: inline-flex; gap: var(--space-3); }
|
|
1028
|
+
.agn-diff__stat--add { color: var(--ok); }
|
|
1029
|
+
.agn-diff__stat--del { color: var(--bad); }
|
|
1030
|
+
.agn-diff__body { overflow: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--text); font-variant-numeric: tabular-nums; }
|
|
1031
|
+
.agn-diff__table { border-collapse: collapse; width: 100%; }
|
|
1032
|
+
.agn-diff__caption { caption-side: top; text-align: left; padding: 4px var(--space-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); background: var(--panel-2); border-bottom: 1px solid var(--line); }
|
|
1033
|
+
.agn-diff__ln { width: 3.5ch; padding: 0 var(--space-2); text-align: right; color: var(--mute); user-select: none; vertical-align: top; white-space: nowrap; }
|
|
1034
|
+
.agn-diff__code { padding: 0 var(--space-3) 0 var(--space-1); white-space: pre; }
|
|
1035
|
+
.agn-diff__mark { display: inline-block; width: 1.4ch; user-select: none; color: var(--mute); }
|
|
1036
|
+
.agn-diff__row--add { background: var(--ok-soft); }
|
|
1037
|
+
.agn-diff__row--add .agn-diff__mark { color: var(--ok); font-weight: 600; }
|
|
1038
|
+
.agn-diff__row--del { background: var(--bad-soft); }
|
|
1039
|
+
.agn-diff__row--del .agn-diff__mark { color: var(--bad); font-weight: 600; }
|
|
1040
|
+
.agn-diff__row--pad { background: var(--panel-2); }
|
|
1041
|
+
.agn-diff__row--pad td { height: calc(12.5px * 1.6); }
|
|
1042
|
+
.agn-diff__fold td { padding: 2px var(--space-3); background: var(--panel-2); color: var(--mute); font-size: 11px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
|
|
1043
|
+
.agn-diff__word { background: transparent; border-radius: 2px; padding: 0 1px; color: inherit; }
|
|
1044
|
+
.agn-diff__row--add .agn-diff__word, .agn-diff__cell--add .agn-diff__word { background: color-mix(in srgb, var(--ok) 28%, transparent); box-shadow: inset 0 -1px 0 var(--ok); }
|
|
1045
|
+
.agn-diff__row--del .agn-diff__word, .agn-diff__cell--del .agn-diff__word { background: color-mix(in srgb, var(--bad) 24%, transparent); box-shadow: inset 0 -1px 0 var(--bad); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent); }
|
|
1046
|
+
.agn-diff--wrap .agn-diff__code { white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
1047
|
+
.agn-diff__table--paired { table-layout: fixed; }
|
|
1048
|
+
.agn-diff__col-ln { width: 5ch; }
|
|
1049
|
+
.agn-diff__table--paired th.agn-diff__caption { display: table-cell; font-weight: 400; }
|
|
1050
|
+
.agn-diff__caption--b, .agn-diff__table--paired td.agn-diff__ln:nth-child(3) { border-left: 1px solid var(--line-2); }
|
|
1051
|
+
.agn-diff__cell--add { background: var(--ok-soft); }
|
|
1052
|
+
.agn-diff__cell--add .agn-diff__mark { color: var(--ok); font-weight: 600; }
|
|
1053
|
+
.agn-diff__cell--del { background: var(--bad-soft); }
|
|
1054
|
+
.agn-diff__cell--del .agn-diff__mark { color: var(--bad); font-weight: 600; }
|
|
1055
|
+
.agn-diff__cell--pad { background: var(--panel-2); }
|
|
1056
|
+
.agn-diff__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
|
|
1057
|
+
.agn-diff__side { min-width: 0; overflow-x: auto; }
|
|
1058
|
+
.agn-diff__side .agn-diff__table { min-width: 100%; width: max-content; }
|
|
1059
|
+
.agn-diff__side + .agn-diff__side { border-left: 1px solid var(--line-2); }
|
|
1060
|
+
.agn-diff__split > .agn-diff__table + .agn-diff__table { border-left: 1px solid var(--line-2); }
|
|
1061
|
+
|
|
1062
|
+
/* --- 50-layout.css --- */
|
|
1063
|
+
/* layout: Card, Toolbar, ToolbarSeparator, PageLayout, Room */
|
|
1064
|
+
|
|
1065
|
+
/* ---- Card: flat, 1px line, radius-lg, no shadow ---- */
|
|
1066
|
+
.agn-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); transition: border-color var(--duration-fast) var(--ease-enter); }
|
|
1067
|
+
.agn-card--sunken { background: var(--bg-2); }
|
|
1068
|
+
.agn-card--interactive { cursor: pointer; }
|
|
1069
|
+
button.agn-card, a.agn-card { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; padding: 0; font: inherit; font-size: inherit; line-height: inherit; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
|
|
1070
|
+
button.agn-card:focus-visible, a.agn-card:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
|
|
1071
|
+
button.agn-card:disabled { cursor: default; opacity: .55; }
|
|
1072
|
+
.agn-card--interactive:hover { border-color: var(--line-3); }
|
|
1073
|
+
.agn-card--selected { border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
1074
|
+
.agn-card__header { display: flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-3) 0 var(--space-4); border-bottom: 1px solid var(--line); flex-shrink: 0; }
|
|
1075
|
+
.agn-card__icon { color: var(--text-2); }
|
|
1076
|
+
.agn-card__title { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
1077
|
+
.agn-card__count { font-family: var(--font-mono); font-size: 11.5px; color: var(--mute); padding: 1px 6px; border-radius: var(--radius-sm); background: var(--panel-2); }
|
|
1078
|
+
.agn-card__actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
|
|
1079
|
+
.agn-card__body { flex: 1; min-width: 0; }
|
|
1080
|
+
.agn-card--pad-md > .agn-card__body { padding: var(--space-4); }
|
|
1081
|
+
.agn-card--pad-sm > .agn-card__body { padding: var(--space-3); }
|
|
1082
|
+
.agn-card--pad-none > .agn-card__body { padding: 0; }
|
|
1083
|
+
.agn-card--pad-none > .agn-card__body > .agn-table, .agn-card--pad-none > .agn-card__body > .agn-code, .agn-card--pad-none > .agn-card__body > .agn-cal { border: 0; border-radius: 0; }
|
|
1084
|
+
.agn-card__footer { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: var(--space-1) var(--space-3); border-top: 1px solid var(--line); font-size: 12px; }
|
|
1085
|
+
|
|
1086
|
+
/* ---- Toolbar ---- */
|
|
1087
|
+
.agn-toolbar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: var(--space-2) 0; background: var(--bg); min-width: 0; }
|
|
1088
|
+
.agn-toolbar--sticky { position: sticky; top: 0; z-index: var(--z-sticky); }
|
|
1089
|
+
.agn-toolbar--bare { background: transparent; }
|
|
1090
|
+
.agn-toolbar__title { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); white-space: nowrap; margin-right: var(--space-2); }
|
|
1091
|
+
.agn-toolbar__count { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--mute); }
|
|
1092
|
+
.agn-toolbar__search { position: relative; display: inline-flex; align-items: center; height: var(--control-h-sm); width: 220px; max-width: 100%; border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--bg-2); color: var(--text); transition: border-color var(--duration-fast) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-enter); }
|
|
1093
|
+
.agn-toolbar__search:focus-within { border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
1094
|
+
.agn-toolbar__search-icon { position: absolute; left: 8px; color: var(--mute); pointer-events: none; }
|
|
1095
|
+
.agn-toolbar__input { width: 100%; height: 100%; padding: 0 26px 0 28px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; outline: none; -webkit-appearance: none; appearance: none; }
|
|
1096
|
+
.agn-toolbar__input::placeholder { color: var(--mute); }
|
|
1097
|
+
.agn-toolbar__input::-webkit-search-cancel-button { display: none; }
|
|
1098
|
+
.agn-toolbar__clear { position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mute); cursor: pointer; }
|
|
1099
|
+
.agn-toolbar__clear:hover { background: var(--panel-3); color: var(--text); }
|
|
1100
|
+
.agn-toolbar__left, .agn-toolbar__main, .agn-toolbar__right { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
|
|
1101
|
+
.agn-toolbar__main { flex: 1; }
|
|
1102
|
+
.agn-toolbar__right { margin-left: auto; }
|
|
1103
|
+
.agn-toolbar .agn-btn:not(.agn-btn--primary):not(.agn-btn--sm):not(.agn-btn--xs):not(.agn-btn--lg) { height: var(--control-h-sm); }
|
|
1104
|
+
.agn-toolbar__sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 var(--space-1); flex-shrink: 0; }
|
|
1105
|
+
|
|
1106
|
+
/* ---- PageLayout: the console frame ---- */
|
|
1107
|
+
.agn-page { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); color: var(--text); }
|
|
1108
|
+
.agn-page__header { flex-shrink: 0; z-index: var(--z-sticky); }
|
|
1109
|
+
.agn-page__body { display: flex; flex: 1; min-height: 0; }
|
|
1110
|
+
.agn-page__nav { flex-shrink: 0; height: 100%; }
|
|
1111
|
+
.agn-page__main { flex: 1; min-width: 0; overflow: auto; }
|
|
1112
|
+
.agn-page__content { max-width: var(--agn-page-max, var(--content-max)); margin: 0 auto; padding: var(--space-5) var(--gutter-console); }
|
|
1113
|
+
.agn-page--flush .agn-page__content { padding: 0; max-width: none; height: 100%; min-height: 0; }
|
|
1114
|
+
.agn-page__panel { flex: 0 0 var(--agn-page-panel-w, var(--panel-w)); width: var(--agn-page-panel-w, var(--panel-w)); border-left: 1px solid var(--line); background: var(--panel); overflow: auto; }
|
|
1115
|
+
@media (max-width: 900px) { .agn-page__panel { display: none; } }
|
|
1116
|
+
@media (max-width: 640px) { .agn-page__content { padding: var(--space-4) var(--space-4); } }
|
|
1117
|
+
|
|
1118
|
+
/* ---- Room: inverted-theme section ---- */
|
|
1119
|
+
.agn-room { background: var(--bg); color: var(--text); }
|
|
1120
|
+
.agn-room--pad-lg { padding: var(--space-7) var(--gutter); }
|
|
1121
|
+
.agn-room--pad-md { padding: var(--space-5) var(--gutter-console); }
|
|
1122
|
+
.agn-room--pad-none { padding: 0; }
|
|
1123
|
+
|
|
1124
|
+
/* --- 60-navigation.css --- */
|
|
1125
|
+
/* navigation: GlobalHeader, VerticalNavigation, Tabs, Breadcrumbs, Path, ProgressIndicator, SplitView, AppLauncher, PageHeader, BuilderHeader, BrandBand, Accordion, ExpandableSection, Carousel, SetupAssistant, WelcomeMat, MobileTabBar, Pagination, Stepper */
|
|
1126
|
+
|
|
1127
|
+
/* ---- GlobalHeader: 48px ---- */
|
|
1128
|
+
.agn-gheader { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); padding: 0 var(--space-3) 0 var(--space-4); background: var(--panel); color: var(--text); border-bottom: 1px solid var(--line); }
|
|
1129
|
+
.agn-gheader--ink { background: var(--text); color: var(--bg); border-bottom-color: transparent; }
|
|
1130
|
+
.agn-gheader--ink .agn-logo, .agn-gheader--ink .agn-logo__product { color: inherit; }
|
|
1131
|
+
.agn-gheader--ink .agn-btn--ghost { color: inherit; }
|
|
1132
|
+
.agn-gheader--ink .agn-btn--ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--bg) 12%, transparent); }
|
|
1133
|
+
.agn-gheader__brand { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
|
|
1134
|
+
.agn-gheader__apps { margin-left: calc(var(--space-2) * -1); }
|
|
1135
|
+
.agn-gheader__left { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
|
|
1136
|
+
.agn-gheader__search { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-sm); width: 320px; max-width: 40vw; margin: 0 auto; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--bg-2); color: var(--mute); font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: border-color var(--duration-fast) var(--ease-enter); }
|
|
1137
|
+
.agn-gheader__search:hover { border-color: var(--edge); color: var(--text-2); }
|
|
1138
|
+
.agn-gheader--ink .agn-gheader__search { background: color-mix(in srgb, var(--bg) 10%, transparent); border-color: color-mix(in srgb, var(--bg) 25%, transparent); color: color-mix(in srgb, var(--bg) 70%, transparent); }
|
|
1139
|
+
.agn-gheader__search-hint { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1140
|
+
.agn-gheader__kbd, .agn-sidebar__kbd { font-family: var(--font-mono); font-size: 10.5px; line-height: 1; padding: 3px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--radius-sm); color: var(--mute); background: var(--panel); }
|
|
1141
|
+
.agn-gheader--ink .agn-gheader__kbd { background: transparent; border-color: color-mix(in srgb, var(--bg) 30%, transparent); color: inherit; }
|
|
1142
|
+
.agn-gheader__actions { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; flex-shrink: 0; }
|
|
1143
|
+
.agn-gheader__notif { position: relative; display: inline-flex; }
|
|
1144
|
+
.agn-gheader__notif-count { position: absolute; top: 2px; right: 2px; pointer-events: none; }
|
|
1145
|
+
.agn-gheader__user { display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--space-1); margin-left: var(--space-1); border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer; }
|
|
1146
|
+
@media (max-width: 640px) { .agn-gheader__search { width: var(--control-h-sm); padding: 0; justify-content: center; margin-left: auto; } .agn-gheader__search-hint, .agn-gheader__kbd { display: none; } }
|
|
1147
|
+
|
|
1148
|
+
/* ---- VerticalNavigation: the console sidebar ---- */
|
|
1149
|
+
.agn-sidebar { position: relative; display: flex; flex-direction: column; width: var(--sidebar-w); height: 100%; min-height: 0; background: var(--panel); color: var(--text); border-right: 1px solid var(--line); transition: width var(--duration-base) var(--ease-enter); }
|
|
1150
|
+
.agn-sidebar--collapsed { width: var(--sidebar-w-collapsed); }
|
|
1151
|
+
.agn-sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--header-h); padding: 0 var(--space-2) 0 var(--space-4); flex-shrink: 0; }
|
|
1152
|
+
.agn-sidebar--collapsed .agn-sidebar__top { padding: 0; justify-content: center; flex-direction: column; height: auto; padding-top: var(--space-3); gap: var(--space-1); }
|
|
1153
|
+
.agn-sidebar__logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; border-radius: var(--radius-sm); min-width: 0; overflow: hidden; }
|
|
1154
|
+
.agn-sidebar__logo .agn-logo__product { font-size: .85em; }
|
|
1155
|
+
.agn-sidebar__collapse { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--mute); cursor: pointer; flex-shrink: 0; }
|
|
1156
|
+
.agn-sidebar__collapse:hover { background: var(--panel-2); color: var(--text); }
|
|
1157
|
+
.agn-sidebar__search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h-sm); margin: var(--space-1) var(--space-3) var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--bg-2); color: var(--mute); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
|
|
1158
|
+
.agn-sidebar__search:hover { border-color: var(--edge); color: var(--text-2); }
|
|
1159
|
+
.agn-sidebar__search-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1160
|
+
.agn-sidebar--collapsed .agn-sidebar__search { margin: var(--space-1) auto var(--space-2); width: var(--control-h-sm); padding: 0; justify-content: center; }
|
|
1161
|
+
.agn-sidebar--collapsed .agn-sidebar__search-label, .agn-sidebar--collapsed .agn-sidebar__kbd { display: none; }
|
|
1162
|
+
.agn-sidebar__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 var(--space-2) var(--space-3); }
|
|
1163
|
+
.agn-sidebar__group + .agn-sidebar__group { margin-top: var(--space-3); }
|
|
1164
|
+
.agn-sidebar__eyebrow { display: block; padding: var(--space-3) var(--space-2) var(--space-1); font-size: 10.5px; }
|
|
1165
|
+
.agn-sidebar--collapsed .agn-sidebar__eyebrow { padding: var(--space-2) 0 var(--space-1); display: flex; justify-content: center; }
|
|
1166
|
+
.agn-sidebar__eyebrow-rule { display: block; width: 16px; height: 1px; background: var(--line-2); }
|
|
1167
|
+
.agn-sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
|
|
1168
|
+
.agn-nav-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--nav-item-h); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; text-align: left; cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter); }
|
|
1169
|
+
.agn-nav-item:hover { background: var(--panel-2); color: var(--text); }
|
|
1170
|
+
.agn-nav-item--active { background: var(--selection); color: var(--selection-ink); }
|
|
1171
|
+
.agn-nav-item--active .agn-nav-item__icon { color: var(--link); }
|
|
1172
|
+
.agn-nav-item--disabled { opacity: .5; cursor: default; }
|
|
1173
|
+
.agn-nav-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; }
|
|
1174
|
+
.agn-nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
1175
|
+
.agn-nav-item__count { margin-left: auto; }
|
|
1176
|
+
.agn-sidebar--collapsed .agn-nav-item { justify-content: center; padding: 0; position: relative; }
|
|
1177
|
+
.agn-sidebar--collapsed .agn-nav-item__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
|
|
1178
|
+
.agn-nav-item__dot { position: absolute; top: 6px; right: 8px; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--signal); }
|
|
1179
|
+
.agn-sidebar__tree { margin: 0 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
|
|
1180
|
+
.agn-sidebar--resizing { transition: none; user-select: none; }
|
|
1181
|
+
.agn-sidebar__resize { position: absolute; top: 0; bottom: 0; right: -3px; width: 6px; cursor: col-resize; z-index: var(--z-raised); touch-action: none; }
|
|
1182
|
+
.agn-sidebar__resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: transparent; transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
1183
|
+
.agn-sidebar__resize:hover::after, .agn-sidebar--resizing .agn-sidebar__resize::after { background: var(--signal); }
|
|
1184
|
+
.agn-sidebar__resize:focus-visible { outline: none; }
|
|
1185
|
+
.agn-sidebar__resize:focus-visible::after { background: var(--focus); width: var(--focus-width); }
|
|
1186
|
+
.agn-launcher-trigger__chevron { color: var(--mute); flex-shrink: 0; }
|
|
1187
|
+
.agn-launcher-trigger:has(.agn-launcher-trigger__meta) { height: auto; min-height: var(--nav-item-h); padding-block: var(--space-1); }
|
|
1188
|
+
.agn-launcher-trigger .agn-nav-item__label { display: flex; flex-direction: column; min-width: 0; }
|
|
1189
|
+
.agn-launcher-trigger__meta { font-size: 11px; line-height: 1.3; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1190
|
+
.agn-sidebar--collapsed .agn-launcher-trigger, .agn-launcher-trigger--collapsed { justify-content: center; padding: 0; }
|
|
1191
|
+
.agn-launcher-trigger--collapsed .agn-nav-item__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
|
|
1192
|
+
.agn-sidebar__bottom { flex-shrink: 0; padding: var(--space-2); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-2); }
|
|
1193
|
+
|
|
1194
|
+
/* ---- Tabs ---- */
|
|
1195
|
+
.agn-tabs { display: flex; flex-direction: column; min-width: 0; }
|
|
1196
|
+
.agn-tabs__bar { display: flex; align-items: center; gap: var(--space-3); }
|
|
1197
|
+
.agn-tabs__actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); }
|
|
1198
|
+
.agn-tabs__list { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
|
|
1199
|
+
.agn-tabs__list::-webkit-scrollbar { display: none; }
|
|
1200
|
+
.agn-tab { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; position: relative; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-enter); }
|
|
1201
|
+
.agn-tab:hover { color: var(--text); }
|
|
1202
|
+
.agn-tab--active { color: var(--text); }
|
|
1203
|
+
.agn-tab--disabled { opacity: .5; cursor: default; }
|
|
1204
|
+
.agn-tabs--line .agn-tabs__list { border-bottom: 1px solid var(--line); flex: 1; }
|
|
1205
|
+
.agn-tabs--line .agn-tab { margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
|
|
1206
|
+
.agn-tabs--line .agn-tab--active { border-bottom-color: var(--signal); }
|
|
1207
|
+
.agn-tabs--pill .agn-tabs__list { gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel-2); align-self: flex-start; }
|
|
1208
|
+
.agn-tabs--pill .agn-tab { height: var(--control-h-xs); border-radius: var(--radius-sm); }
|
|
1209
|
+
.agn-tabs--pill .agn-tab--active { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); }
|
|
1210
|
+
.agn-tabs--vertical { flex-direction: row; gap: var(--space-5); }
|
|
1211
|
+
.agn-tabs--vertical .agn-tabs__bar { flex-direction: column; align-items: stretch; width: 200px; flex-shrink: 0; }
|
|
1212
|
+
.agn-tabs--vertical .agn-tabs__list { flex-direction: column; gap: 1px; overflow: visible; }
|
|
1213
|
+
.agn-tabs--vertical .agn-tab { height: var(--nav-item-h); justify-content: flex-start; border-radius: var(--radius-md); }
|
|
1214
|
+
.agn-tabs--vertical .agn-tab--active { background: var(--selection); color: var(--selection-ink); }
|
|
1215
|
+
.agn-tabs--vertical .agn-tabs__panel { flex: 1; min-width: 0; padding-top: 0; }
|
|
1216
|
+
.agn-tabs--sm .agn-tab { height: 30px; font-size: 12px; padding: 0 var(--space-2); }
|
|
1217
|
+
.agn-tabs__item { position: relative; display: inline-flex; align-items: stretch; flex-shrink: 0; }
|
|
1218
|
+
.agn-tab--closable { padding-right: calc(var(--space-3) + 18px); }
|
|
1219
|
+
.agn-tabs--sm .agn-tab--closable { padding-right: calc(var(--space-2) + 18px); }
|
|
1220
|
+
.agn-tab__close { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mute); cursor: pointer; opacity: .7; transition: background-color var(--duration-fast) var(--ease-enter), opacity var(--duration-fast) var(--ease-enter); }
|
|
1221
|
+
.agn-tabs--line .agn-tab__close { margin-top: -1px; }
|
|
1222
|
+
.agn-tabs__item:hover .agn-tab__close, .agn-tab--active + .agn-tab__close { opacity: 1; }
|
|
1223
|
+
.agn-tab__close:hover { background: var(--panel-3); color: var(--text); }
|
|
1224
|
+
.agn-tabs--vertical .agn-tabs__item { display: flex; }
|
|
1225
|
+
.agn-tabs--vertical .agn-tabs__item .agn-tab { flex: 1; }
|
|
1226
|
+
/* GlobalNavigation */
|
|
1227
|
+
.agn-gnav { position: relative; display: flex; align-items: stretch; min-width: 0; flex: 1; height: var(--header-h); }
|
|
1228
|
+
.agn-gnav__list { display: flex; align-items: stretch; gap: var(--space-1); margin: 0; padding: 0; list-style: none; min-width: 0; }
|
|
1229
|
+
.agn-gnav__list > li { display: flex; position: relative; }
|
|
1230
|
+
.agn-gnav__item { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 100%; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; transition: color var(--duration-fast) var(--ease-enter), background-color var(--duration-fast) var(--ease-enter); }
|
|
1231
|
+
.agn-gnav__item:hover { color: var(--text); background: var(--panel-2); }
|
|
1232
|
+
.agn-gnav__item::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
|
|
1233
|
+
.agn-gnav__item--active { color: var(--text); }
|
|
1234
|
+
.agn-gnav__item--active::after { background: var(--signal); }
|
|
1235
|
+
.agn-gnav__item--active .agn-gnav__icon { color: var(--link); }
|
|
1236
|
+
.agn-gnav__item--disabled { opacity: .5; cursor: default; }
|
|
1237
|
+
.agn-gnav__item--disabled:hover { background: transparent; color: var(--text-2); }
|
|
1238
|
+
.agn-gnav__item:focus-visible { outline-offset: calc(var(--focus-width) * -1); }
|
|
1239
|
+
.agn-gnav__icon { flex-shrink: 0; }
|
|
1240
|
+
.agn-gnav__more .agn-gnav__label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
|
|
1241
|
+
.agn-gnav__menu { position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: var(--z-dropdown); min-width: 200px; padding: var(--space-1); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 1px; }
|
|
1242
|
+
.agn-gnav__menu-item { display: flex; align-items: center; gap: var(--space-2); min-height: var(--list-item-h); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
|
|
1243
|
+
.agn-gnav__menu-item:hover, .agn-gnav__menu-item:focus-visible { background: var(--panel-2); }
|
|
1244
|
+
.agn-gnav__menu-item:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
|
|
1245
|
+
.agn-gnav__menu-item--active { background: var(--selection); color: var(--selection-ink); }
|
|
1246
|
+
.agn-gnav__menu-item[aria-disabled="true"] { opacity: .5; cursor: default; }
|
|
1247
|
+
.agn-gnav__menu-item .agn-gnav__label { flex: 1; }
|
|
1248
|
+
.agn-gnav__check { color: var(--link); }
|
|
1249
|
+
.agn-gnav__measure { position: absolute; left: 0; top: 0; height: 0; display: flex; gap: var(--space-1); visibility: hidden; pointer-events: none; overflow: hidden; white-space: nowrap; }
|
|
1250
|
+
.agn-tabs__panel { padding-top: var(--space-4); outline-offset: 2px; }
|
|
1251
|
+
.agn-tabs__panel:focus-visible { outline: var(--focus-width) solid var(--focus); border-radius: var(--radius-sm); }
|
|
1252
|
+
|
|
1253
|
+
/* ---- Breadcrumbs ---- */
|
|
1254
|
+
.agn-crumbs { font-size: 12px; min-width: 0; }
|
|
1255
|
+
.agn-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
|
|
1256
|
+
.agn-crumbs__item { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
|
|
1257
|
+
.agn-crumbs__link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); text-decoration: none; padding: 2px 4px; border-radius: var(--radius-sm); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1258
|
+
.agn-crumbs__link:hover { color: var(--link); background: var(--panel-2); }
|
|
1259
|
+
.agn-crumbs__current { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 500; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1260
|
+
.agn-crumbs__sep { color: var(--line-3); }
|
|
1261
|
+
.agn-crumbs__more { display: inline-flex; align-items: center; height: 20px; padding: 0 4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mute); cursor: pointer; }
|
|
1262
|
+
.agn-crumbs__more:hover { background: var(--panel-2); color: var(--text); }
|
|
1263
|
+
|
|
1264
|
+
/* ---- Path: chevron stage steps ---- */
|
|
1265
|
+
.agn-path { display: flex; list-style: none; margin: 0; padding: 0; min-width: 0; overflow-x: auto; gap: 2px; }
|
|
1266
|
+
.agn-path__step { flex: 1 1 0; min-width: 0; position: relative; }
|
|
1267
|
+
.agn-path__inner { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: var(--control-h-sm); padding: 0 var(--space-4) 0 var(--space-5); border: 0; background: var(--panel-2); color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); cursor: default; }
|
|
1268
|
+
button.agn-path__inner { cursor: pointer; }
|
|
1269
|
+
.agn-path__step:first-child .agn-path__inner { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left: var(--space-3); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
|
|
1270
|
+
.agn-path__step:last-child .agn-path__inner { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
|
|
1271
|
+
.agn-path__step--done .agn-path__inner { background: var(--ok-soft); color: var(--ok); }
|
|
1272
|
+
.agn-path__step--current .agn-path__inner { background: var(--text); color: var(--bg); font-weight: 600; }
|
|
1273
|
+
.agn-path__step--lost .agn-path__inner { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
|
|
1274
|
+
.agn-path__step--upcoming .agn-path__inner { background: var(--panel-2); color: var(--mute); }
|
|
1275
|
+
button.agn-path__inner:hover { filter: brightness(.95); }
|
|
1276
|
+
.agn-path__label { overflow: hidden; text-overflow: ellipsis; }
|
|
1277
|
+
.agn-path--compact { display: flex; flex-direction: column; gap: var(--space-1); overflow: visible; }
|
|
1278
|
+
.agn-path__bar { display: flex; gap: 2px; height: 6px; }
|
|
1279
|
+
.agn-path__seg { flex: 1; border-radius: 3px; background: var(--panel-3); }
|
|
1280
|
+
.agn-path__seg--done { background: var(--ok); }
|
|
1281
|
+
.agn-path__seg--current { background: var(--text); }
|
|
1282
|
+
.agn-path__seg--lost { background: var(--bad); }
|
|
1283
|
+
.agn-path__caption { display: flex; align-items: baseline; gap: var(--space-2); font-size: 12px; }
|
|
1284
|
+
.agn-path__caption-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
1285
|
+
.agn-path__caption-value { font-weight: 500; color: var(--text); }
|
|
1286
|
+
.agn-path__caption-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
1287
|
+
|
|
1288
|
+
/* ---- ProgressIndicator: numbered steps for real sequences ---- */
|
|
1289
|
+
.agn-pind { display: flex; list-style: none; margin: 0; padding: 0; min-width: 0; }
|
|
1290
|
+
.agn-pind--horizontal { align-items: flex-start; }
|
|
1291
|
+
.agn-pind--vertical { flex-direction: column; }
|
|
1292
|
+
.agn-pind__step { position: relative; display: flex; min-width: 0; }
|
|
1293
|
+
.agn-pind--horizontal .agn-pind__step { flex: 1 1 0; flex-direction: column; align-items: center; }
|
|
1294
|
+
.agn-pind--vertical .agn-pind__step { flex-direction: row; padding-bottom: var(--space-4); }
|
|
1295
|
+
.agn-pind--vertical .agn-pind__step:last-child { padding-bottom: 0; }
|
|
1296
|
+
.agn-pind__inner { display: flex; align-items: center; gap: var(--space-2); border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-align: left; border-radius: var(--radius-sm); }
|
|
1297
|
+
.agn-pind--horizontal .agn-pind__inner { flex-direction: column; text-align: center; }
|
|
1298
|
+
button.agn-pind__inner { cursor: pointer; }
|
|
1299
|
+
.agn-pind__marker { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); border: 1px solid var(--line-2); background: var(--panel); color: var(--mute); font-family: var(--font-mono); font-size: 11px; font-weight: 500; flex-shrink: 0; position: relative; z-index: 1; }
|
|
1300
|
+
.agn-pind__step--done .agn-pind__marker { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
|
|
1301
|
+
.agn-pind__step--current .agn-pind__marker { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
1302
|
+
.agn-pind__step--error .agn-pind__marker { background: var(--bad); border-color: var(--bad); color: var(--bad-ink); }
|
|
1303
|
+
.agn-pind__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
1304
|
+
.agn-pind__label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
|
|
1305
|
+
.agn-pind__step--current .agn-pind__label { color: var(--text); font-weight: 600; }
|
|
1306
|
+
.agn-pind__step--error .agn-pind__label { color: var(--bad); }
|
|
1307
|
+
.agn-pind__desc { font-size: 12px; color: var(--mute); }
|
|
1308
|
+
.agn-pind__line { position: absolute; background: var(--line-2); }
|
|
1309
|
+
.agn-pind--horizontal .agn-pind__line { top: 12px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 2px; }
|
|
1310
|
+
.agn-pind--horizontal .agn-pind__step:last-child .agn-pind__line { display: none; }
|
|
1311
|
+
.agn-pind--vertical .agn-pind__line { left: 11px; top: 26px; bottom: -2px; width: 2px; }
|
|
1312
|
+
.agn-pind__step--done .agn-pind__line { background: var(--ok); }
|
|
1313
|
+
|
|
1314
|
+
/* ---- SplitView ---- */
|
|
1315
|
+
.agn-split { display: flex; height: 100%; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; position: relative; }
|
|
1316
|
+
.agn-split__list { flex: 0 0 var(--agn-split-w, var(--panel-w-lg)); width: var(--agn-split-w, var(--panel-w-lg)); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
|
|
1317
|
+
.agn-split--collapsed .agn-split__list { display: none; }
|
|
1318
|
+
.agn-split__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: 44px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--line); flex-shrink: 0; }
|
|
1319
|
+
.agn-split__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; display: inline-flex; align-items: baseline; gap: var(--space-2); }
|
|
1320
|
+
.agn-split__count { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--mute); }
|
|
1321
|
+
.agn-split__head-actions { display: inline-flex; gap: var(--space-1); }
|
|
1322
|
+
.agn-split__items { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
|
|
1323
|
+
.agn-split__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--list-item-h); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
1324
|
+
.agn-split__item:hover { background: var(--panel-2); }
|
|
1325
|
+
.agn-split__item--selected { background: var(--selection); color: var(--selection-ink); box-shadow: inset 2px 0 0 var(--signal); }
|
|
1326
|
+
.agn-split__item-icon { color: var(--text-2); }
|
|
1327
|
+
.agn-split__item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
|
|
1328
|
+
.agn-split__item-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1329
|
+
.agn-split__item-sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1330
|
+
.agn-split__item-meta { font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
|
|
1331
|
+
.agn-split__divider { flex: 0 0 5px; margin: 0 -2px; cursor: col-resize; background: transparent; position: relative; z-index: 1; transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
1332
|
+
.agn-split__divider:hover, .agn-split__divider:focus-visible { background: var(--signal); }
|
|
1333
|
+
.agn-split__toggle { position: absolute; left: var(--space-2); bottom: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--mute); cursor: pointer; z-index: 2; }
|
|
1334
|
+
.agn-split__detail { flex: 1; min-width: 0; overflow: auto; }
|
|
1335
|
+
.agn-split__empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 160px; color: var(--mute); font-size: 13px; }
|
|
1336
|
+
@media (max-width: 640px) { .agn-split { flex-direction: column; } .agn-split__list { flex-basis: auto; width: auto; max-height: 40%; border-right: 0; border-bottom: 1px solid var(--line); } .agn-split__divider { display: none; } }
|
|
1337
|
+
|
|
1338
|
+
/* ---- AppLauncher ---- */
|
|
1339
|
+
.agn-launcher { width: 360px; max-width: 100%; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-sm); }
|
|
1340
|
+
.agn-launcher--inline { box-shadow: none; border: 0; padding: 0; width: auto; }
|
|
1341
|
+
.agn-launcher__title { padding: var(--space-1) var(--space-2) var(--space-3); display: block; }
|
|
1342
|
+
.agn-launcher__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
|
|
1343
|
+
.agn-launcher__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; min-width: 0; transition: background-color var(--duration-fast) var(--ease-enter); }
|
|
1344
|
+
.agn-launcher__item:hover { background: var(--panel-2); }
|
|
1345
|
+
.agn-launcher__item--current { background: var(--selection); color: var(--selection-ink); }
|
|
1346
|
+
.agn-launcher__item .agn-product-box { width: 36px; height: 36px; border-radius: var(--radius-md); }
|
|
1347
|
+
.agn-launcher__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
|
|
1348
|
+
.agn-launcher__name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1349
|
+
.agn-launcher__desc { font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1350
|
+
.agn-launcher__check { color: var(--link); flex-shrink: 0; }
|
|
1351
|
+
|
|
1352
|
+
/* ---- PageHeader ---- */
|
|
1353
|
+
.agn-pageheader { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-5); min-width: 0; }
|
|
1354
|
+
.agn-pageheader--tabs { padding-bottom: 0; }
|
|
1355
|
+
.agn-pageheader__crumbs { margin-bottom: calc(var(--space-1) * -1); }
|
|
1356
|
+
.agn-pageheader__back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 12.5px; font-weight: 500; color: var(--text-2); text-decoration: none; border-radius: var(--radius-sm); }
|
|
1357
|
+
.agn-pageheader__back:hover { color: var(--link); }
|
|
1358
|
+
.agn-pageheader__row { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; }
|
|
1359
|
+
.agn-pageheader__media { flex-shrink: 0; }
|
|
1360
|
+
.agn-pageheader__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; }
|
|
1361
|
+
.agn-pageheader__eyebrow { display: block; }
|
|
1362
|
+
.agn-pageheader__title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--text); font-variation-settings: 'opsz' 48; overflow-wrap: anywhere; }
|
|
1363
|
+
.agn-pageheader__desc { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); max-width: 60ch; }
|
|
1364
|
+
.agn-pageheader__actions { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; margin-left: auto; padding-top: 2px; }
|
|
1365
|
+
.agn-pageheader__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 12.5px; color: var(--text-2); }
|
|
1366
|
+
.agn-pageheader__tabs { margin-top: var(--space-2); }
|
|
1367
|
+
@media (max-width: 640px) { .agn-pageheader__row { flex-direction: column; } .agn-pageheader__actions { margin-left: 0; } }
|
|
1368
|
+
|
|
1369
|
+
/* ---- BuilderHeader ---- */
|
|
1370
|
+
.agn-builder { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); padding: 0 var(--space-3); background: var(--panel); border-bottom: 1px solid var(--line); }
|
|
1371
|
+
.agn-builder__left, .agn-builder__right { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
|
|
1372
|
+
.agn-builder__right { margin-left: auto; flex-shrink: 0; }
|
|
1373
|
+
.agn-builder__name-wrap { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
|
|
1374
|
+
.agn-builder__name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1375
|
+
.agn-builder__rename { opacity: 0; transition: opacity var(--duration-fast) var(--ease-enter); }
|
|
1376
|
+
.agn-builder__name-wrap:hover .agn-builder__rename, .agn-builder__rename:focus-visible { opacity: 1; }
|
|
1377
|
+
.agn-builder__draft { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--warn); }
|
|
1378
|
+
.agn-builder__save { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-right: var(--space-2); }
|
|
1379
|
+
.agn-builder__spin { animation: agn-spin .8s linear infinite; }
|
|
1380
|
+
|
|
1381
|
+
/* ---- BrandBand: the one gradient ---- */
|
|
1382
|
+
.agn-band { --agn-band-bg: var(--text); --agn-band-glow: var(--signal); position: relative; display: flex; overflow: hidden; }
|
|
1383
|
+
.agn-band__room { flex: 1; display: flex; position: relative; background: var(--agn-band-bg); color: var(--text); }
|
|
1384
|
+
.agn-band__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--agn-band-glow) 28%, transparent) 0%, transparent 70%); }
|
|
1385
|
+
.agn-band--glow-top-left .agn-band__glow { background: radial-gradient(60% 70% at 15% 10%, color-mix(in srgb, var(--agn-band-glow) 28%, transparent) 0%, transparent 70%); }
|
|
1386
|
+
.agn-band--glow-center .agn-band__glow { background: radial-gradient(50% 60% at 50% 50%, color-mix(in srgb, var(--agn-band-glow) 24%, transparent) 0%, transparent 70%); }
|
|
1387
|
+
.agn-band--glow-bottom .agn-band__glow { background: radial-gradient(70% 50% at 50% 100%, color-mix(in srgb, var(--agn-band-glow) 26%, transparent) 0%, transparent 70%); }
|
|
1388
|
+
.agn-band__content { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-7) var(--gutter); max-width: var(--page-max); margin: 0 auto; width: 100%; }
|
|
1389
|
+
.agn-band--align-center .agn-band__content { align-items: center; text-align: center; }
|
|
1390
|
+
.agn-band--align-end .agn-band__content { align-items: flex-end; text-align: right; }
|
|
1391
|
+
|
|
1392
|
+
/* ---- Accordion, ExpandableSection ---- */
|
|
1393
|
+
.agn-accordion { display: flex; flex-direction: column; }
|
|
1394
|
+
.agn-accordion--boxed { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; }
|
|
1395
|
+
.agn-accordion__item { border-bottom: 1px solid var(--line); }
|
|
1396
|
+
.agn-accordion__item:last-child { border-bottom: 0; }
|
|
1397
|
+
.agn-accordion__heading, .agn-xsection__heading { margin: 0; display: flex; align-items: center; font: inherit; }
|
|
1398
|
+
.agn-accordion__trigger { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; height: 40px; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
|
|
1399
|
+
.agn-accordion__trigger:hover { background: var(--panel-2); }
|
|
1400
|
+
.agn-accordion__trigger:disabled { opacity: .5; cursor: default; }
|
|
1401
|
+
.agn-accordion__chev { color: var(--mute); transition: transform var(--duration-fast) var(--ease-enter); flex-shrink: 0; }
|
|
1402
|
+
.agn-accordion__chev--open { transform: rotate(90deg); }
|
|
1403
|
+
.agn-accordion__icon { color: var(--text-2); }
|
|
1404
|
+
.agn-accordion__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1405
|
+
.agn-accordion__meta { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
1406
|
+
.agn-accordion__actions, .agn-xsection__actions { display: inline-flex; align-items: center; gap: var(--space-1); padding-right: var(--space-2); }
|
|
1407
|
+
.agn-accordion__panel { padding: var(--space-2) var(--space-3) var(--space-4) calc(var(--space-3) + 14px + var(--space-2)); font-size: 13px; color: var(--text-2); line-height: 1.5; }
|
|
1408
|
+
.agn-xsection { display: flex; flex-direction: column; }
|
|
1409
|
+
.agn-xsection__heading { border-bottom: 1px solid var(--line); padding-bottom: var(--space-1); margin-bottom: var(--space-3); }
|
|
1410
|
+
.agn-xsection__trigger { display: inline-flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; height: 32px; padding: 0 var(--space-1) 0 0; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; text-align: left; border-radius: var(--radius-sm); }
|
|
1411
|
+
.agn-xsection__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
|
|
1412
|
+
.agn-xsection__count { font-family: var(--font-mono); font-size: 11.5px; color: var(--mute); }
|
|
1413
|
+
.agn-xsection__panel { font-size: 13px; }
|
|
1414
|
+
|
|
1415
|
+
/* ---- Carousel ---- */
|
|
1416
|
+
.agn-carousel { display: flex; flex-direction: column; gap: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); padding: var(--space-4); min-width: 0; }
|
|
1417
|
+
.agn-carousel__viewport { position: relative; min-height: 120px; }
|
|
1418
|
+
.agn-carousel__slide { display: flex; gap: var(--space-4); align-items: flex-start; animation: agn-carousel-in var(--duration-base) var(--ease-enter); }
|
|
1419
|
+
@keyframes agn-carousel-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
|
|
1420
|
+
.agn-carousel__media { flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; }
|
|
1421
|
+
.agn-carousel__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--signal-soft); color: var(--link); flex-shrink: 0; }
|
|
1422
|
+
.agn-carousel__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
|
|
1423
|
+
.agn-carousel__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
|
|
1424
|
+
.agn-carousel__desc { font-size: 13.5px; line-height: 1.5; color: var(--text-2); max-width: 60ch; }
|
|
1425
|
+
.agn-carousel__action { margin-top: var(--space-1); }
|
|
1426
|
+
.agn-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
|
|
1427
|
+
.agn-carousel__arrow { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--panel); color: var(--text); cursor: pointer; }
|
|
1428
|
+
.agn-carousel__arrow:hover:not(:disabled) { background: var(--panel-2); }
|
|
1429
|
+
.agn-carousel__arrow:disabled { opacity: .4; cursor: default; }
|
|
1430
|
+
.agn-carousel__dots { display: inline-flex; gap: 6px; }
|
|
1431
|
+
.agn-carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--line-2); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-enter), width var(--duration-fast) var(--ease-enter); }
|
|
1432
|
+
.agn-carousel__dot--active { background: var(--signal); width: 20px; }
|
|
1433
|
+
.agn-carousel__dot:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
|
|
1434
|
+
|
|
1435
|
+
/* ---- SetupAssistant ---- */
|
|
1436
|
+
.agn-setup { display: flex; flex-direction: column; gap: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); padding: var(--space-5); min-width: 0; }
|
|
1437
|
+
.agn-setup--bare { border: 0; border-radius: 0; background: transparent; padding: 0; }
|
|
1438
|
+
.agn-setup--untitled .agn-setup__head { justify-content: flex-end; }
|
|
1439
|
+
.agn-setup--untitled .agn-setup__progress { flex: 1; }
|
|
1440
|
+
.agn-setup__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
|
|
1441
|
+
.agn-setup__title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--text); }
|
|
1442
|
+
.agn-setup__desc { margin: var(--space-1) 0 0; font-size: 13.5px; color: var(--text-2); max-width: 60ch; }
|
|
1443
|
+
.agn-setup__progress { display: flex; flex-direction: column; gap: var(--space-1); min-width: 200px; }
|
|
1444
|
+
.agn-setup__progress-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); text-align: right; }
|
|
1445
|
+
.agn-setup__bar { display: block; height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
|
|
1446
|
+
.agn-setup__fill { display: block; height: 100%; background: var(--ok); border-radius: 3px; transition: width var(--duration-slow) var(--ease-enter); }
|
|
1447
|
+
.agn-setup__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
|
|
1448
|
+
.agn-setup__step { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
|
|
1449
|
+
.agn-setup__step--next { background: var(--signal-soft); margin: 0 calc(var(--space-3) * -1); padding-left: var(--space-3); padding-right: var(--space-3); border-radius: var(--radius-md); border-top-color: transparent; }
|
|
1450
|
+
.agn-setup__step--next + .agn-setup__step { border-top-color: transparent; }
|
|
1451
|
+
.agn-setup__marker { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); border: 1px solid var(--line-2); background: var(--panel); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; flex-shrink: 0; }
|
|
1452
|
+
.agn-setup__step--done .agn-setup__marker { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
|
|
1453
|
+
.agn-setup__step--next .agn-setup__marker { border-color: var(--signal); color: var(--link); }
|
|
1454
|
+
.agn-setup__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
|
|
1455
|
+
.agn-setup__step-title { font-size: 13.5px; font-weight: 500; color: var(--text); }
|
|
1456
|
+
.agn-setup__step--done .agn-setup__step-title { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--line-3); }
|
|
1457
|
+
.agn-setup__optional { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
|
|
1458
|
+
.agn-setup__step-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
|
|
1459
|
+
.agn-setup__side { display: inline-flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
|
|
1460
|
+
.agn-setup__time { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
1461
|
+
|
|
1462
|
+
/* ---- WelcomeMat ---- */
|
|
1463
|
+
.agn-welcome { display: grid; grid-template-columns: minmax(220px, 2fr) 3fr; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel); overflow: hidden; max-width: 760px; box-shadow: var(--shadow); }
|
|
1464
|
+
.agn-welcome__brand { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-5); background: var(--bg-2); border-right: 1px solid var(--line); }
|
|
1465
|
+
.agn-welcome__title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 28px; line-height: 1.04; font-weight: 600; letter-spacing: -.03em; color: var(--text); font-variation-settings: 'opsz' 48; }
|
|
1466
|
+
.agn-welcome__subtitle { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
|
|
1467
|
+
.agn-welcome__progress { margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--mute); }
|
|
1468
|
+
.agn-welcome__steps { display: flex; flex-direction: column; padding: var(--space-4); }
|
|
1469
|
+
.agn-welcome__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
1470
|
+
.agn-welcome__step { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; text-align: left; }
|
|
1471
|
+
button.agn-welcome__step { cursor: pointer; }
|
|
1472
|
+
button.agn-welcome__step:hover { background: var(--panel-2); }
|
|
1473
|
+
.agn-welcome__step--done { color: var(--text-2); }
|
|
1474
|
+
.agn-welcome__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--signal-soft); color: var(--link); flex-shrink: 0; }
|
|
1475
|
+
.agn-welcome__icon--done { background: var(--ok-soft); color: var(--ok); }
|
|
1476
|
+
.agn-welcome__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
|
|
1477
|
+
.agn-welcome__step-title { font-size: 13.5px; font-weight: 500; }
|
|
1478
|
+
.agn-welcome__step-desc { font-size: 12.5px; color: var(--text-2); }
|
|
1479
|
+
.agn-welcome__arrow { color: var(--mute); }
|
|
1480
|
+
.agn-welcome__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); }
|
|
1481
|
+
@media (max-width: 640px) { .agn-welcome { grid-template-columns: 1fr; } .agn-welcome__brand { border-right: 0; border-bottom: 1px solid var(--line); } }
|
|
1482
|
+
|
|
1483
|
+
/* ---- MobileTabBar ---- */
|
|
1484
|
+
.agn-tabbar { display: flex; align-items: stretch; height: var(--mobile-tab-h); padding: 0 var(--space-1); background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
|
|
1485
|
+
.agn-tabbar__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: var(--touch-target); min-height: var(--touch-target); padding: 0 var(--space-1); border: 0; background: transparent; color: var(--mute); font: inherit; text-decoration: none; cursor: pointer; border-radius: var(--radius-md); }
|
|
1486
|
+
.agn-tabbar__item--active { color: var(--link); }
|
|
1487
|
+
.agn-tabbar__icon { position: relative; display: inline-flex; }
|
|
1488
|
+
.agn-tabbar__badge { position: absolute; top: -4px; left: 12px; }
|
|
1489
|
+
.agn-tabbar__label { font-size: 10.5px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
|
|
1490
|
+
|
|
1491
|
+
/* ---- Pagination ---- */
|
|
1492
|
+
.agn-pagination { display: flex; align-items: center; gap: var(--space-3); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 0; }
|
|
1493
|
+
.agn-pagination__size { display: inline-flex; align-items: center; gap: var(--space-2); }
|
|
1494
|
+
.agn-pagination__select { height: var(--control-h-xs); padding: 0 var(--space-2); border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--bg-2); color: var(--text); font: inherit; font-size: 12px; }
|
|
1495
|
+
.agn-pagination__size-label { color: var(--mute); }
|
|
1496
|
+
.agn-pagination__range { margin-left: auto; white-space: nowrap; color: var(--text-2); }
|
|
1497
|
+
.agn-pagination--compact .agn-pagination__range { margin-left: 0; }
|
|
1498
|
+
.agn-pagination__nav { display: inline-flex; align-items: center; gap: 2px; }
|
|
1499
|
+
.agn-pagination__page { padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 11.5px; color: var(--mute); white-space: nowrap; }
|
|
1500
|
+
.agn-pagination__btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-xs); height: var(--control-h-xs); border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--panel); color: var(--text); cursor: pointer; }
|
|
1501
|
+
.agn-pagination__btn:hover:not(:disabled) { background: var(--panel-2); }
|
|
1502
|
+
.agn-pagination__btn:disabled { opacity: .4; cursor: default; }
|
|
1503
|
+
|
|
1504
|
+
/* ---- Stepper: read-only step progress ---- */
|
|
1505
|
+
.agn-stepper { display: flex; list-style: none; margin: 0; padding: 0; min-width: 0; --agn-step-m: 20px; }
|
|
1506
|
+
.agn-stepper--sm { --agn-step-m: 16px; }
|
|
1507
|
+
.agn-stepper--horizontal { align-items: flex-start; }
|
|
1508
|
+
.agn-stepper--vertical { flex-direction: column; }
|
|
1509
|
+
.agn-stepper__step { position: relative; display: flex; min-width: 0; gap: var(--space-2); }
|
|
1510
|
+
.agn-stepper--horizontal .agn-stepper__step { flex: 1 1 0; flex-direction: column; align-items: center; text-align: center; }
|
|
1511
|
+
.agn-stepper--vertical .agn-stepper__step { flex-direction: row; padding-bottom: var(--space-4); }
|
|
1512
|
+
.agn-stepper--vertical .agn-stepper__step:last-child { padding-bottom: 0; }
|
|
1513
|
+
.agn-stepper__marker { display: inline-flex; align-items: center; justify-content: center; width: var(--agn-step-m); height: var(--agn-step-m); border-radius: var(--radius-full); border: 2px solid var(--line-2); background: var(--panel); color: var(--mute); flex-shrink: 0; position: relative; z-index: 1; }
|
|
1514
|
+
.agn-stepper__step--done .agn-stepper__marker { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
|
|
1515
|
+
.agn-stepper__step--current .agn-stepper__marker { border-color: var(--signal); }
|
|
1516
|
+
.agn-stepper__pulse { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--signal); animation: agn-tag-pulse var(--loader-pulse) var(--ease-loader) infinite; }
|
|
1517
|
+
.agn-stepper__step--error .agn-stepper__marker { background: var(--bad); border-color: var(--bad); color: var(--bad-ink); }
|
|
1518
|
+
.agn-stepper__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
|
|
1519
|
+
.agn-stepper__label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
|
|
1520
|
+
.agn-stepper__step--current .agn-stepper__label { color: var(--text); font-weight: 600; }
|
|
1521
|
+
.agn-stepper__step--error .agn-stepper__label { color: var(--bad); }
|
|
1522
|
+
.agn-stepper__desc { font-size: 12px; color: var(--mute); line-height: 1.4; }
|
|
1523
|
+
.agn-stepper__meta { font-family: var(--font-mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
|
|
1524
|
+
.agn-stepper__line { position: absolute; background: var(--line-2); }
|
|
1525
|
+
.agn-stepper--horizontal .agn-stepper__line { top: calc(var(--agn-step-m) / 2 - 1px); left: calc(50% + var(--agn-step-m) / 2 + 4px); right: calc(-50% + var(--agn-step-m) / 2 + 4px); height: 2px; }
|
|
1526
|
+
.agn-stepper--vertical .agn-stepper__line { left: calc(var(--agn-step-m) / 2 - 1px); top: calc(var(--agn-step-m) + 4px); bottom: 0; width: 2px; }
|
|
1527
|
+
.agn-stepper__step--done .agn-stepper__line { background: var(--ok); }
|
|
1528
|
+
|
|
1529
|
+
/* --- 70-feedback.css --- */
|
|
1530
|
+
/* feedback: AginiesLoader, Skeleton, PageSkeleton, Alert, Toast, ScopedNotification, Notification, Modal, Prompt, Popover, Tooltip, Spinner, ProgressBar, ProgressRing, SidePanel, DockedComposer, DockedUtilityBar, Publisher, EmptyState */
|
|
1531
|
+
/* AginiesLoader — the mark animated by keyframes only; tiers set the size, variants the motion */
|
|
1532
|
+
.agn-loader { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--text); }
|
|
1533
|
+
.agn-loader--region { display: flex; width: 100%; min-height: 120px; padding: var(--space-5); }
|
|
1534
|
+
.agn-loader--inline { display: inline-flex; flex-direction: row; gap: var(--space-2); vertical-align: middle; line-height: 1; }
|
|
1535
|
+
.agn-loader--page { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; gap: var(--space-4); background: var(--bg); }
|
|
1536
|
+
.agn-loader__mark { position: relative; display: inline-flex; line-height: 0; }
|
|
1537
|
+
.agn-loader__word { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -.03em; line-height: 1; color: var(--text); }
|
|
1538
|
+
.agn-loader__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
|
|
1539
|
+
.agn-loader--inline .agn-loader__label { font-family: var(--font-body); font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--text-2); }
|
|
1540
|
+
.agn-loader .agn-mark__ring, .agn-loader .agn-mark__core, .agn-loader .agn-mark__crescent { transform-box: view-box; transform-origin: 50% 50%; }
|
|
1541
|
+
.agn-loader--orbit .agn-mark__ring { animation: agn-loader-spin var(--loader-spin) linear infinite; }
|
|
1542
|
+
.agn-loader--orbit .agn-mark__core { animation: agn-loader-counter var(--loader-spin) var(--ease-loader) infinite; }
|
|
1543
|
+
.agn-loader--orbit .agn-mark__crescent { animation: agn-loader-breathe var(--loader-breathe) var(--ease-loader) infinite; }
|
|
1544
|
+
.agn-loader--pulse .agn-loader__mark::before { content: ''; position: absolute; inset: -22%; border-radius: var(--radius-full); background: var(--signal-soft); animation: agn-loader-pulse var(--loader-pulse) var(--ease-loader) infinite; }
|
|
1545
|
+
.agn-loader--pulse .agn-mark { position: relative; }
|
|
1546
|
+
.agn-loader--draw .agn-mark__ring { stroke-dasharray: 1; animation: agn-loader-draw-ring var(--loader-spin) var(--ease-loader) infinite; }
|
|
1547
|
+
.agn-loader--draw .agn-mark__core { stroke-dasharray: 1; animation: agn-loader-draw-core var(--loader-spin) var(--ease-loader) infinite; }
|
|
1548
|
+
.agn-loader--draw .agn-mark__crescent { animation: agn-loader-draw-crescent var(--loader-spin) var(--ease-loader) infinite; }
|
|
1549
|
+
@keyframes agn-loader-spin { to { transform: rotate(360deg); } }
|
|
1550
|
+
@keyframes agn-loader-counter { 0% { transform: rotate(0); } 18% { transform: rotate(-90deg); } 25% { transform: rotate(-90deg); } 43% { transform: rotate(-180deg); } 50% { transform: rotate(-180deg); } 68% { transform: rotate(-270deg); } 75% { transform: rotate(-270deg); } 93% { transform: rotate(-360deg); } 100% { transform: rotate(-360deg); } }
|
|
1551
|
+
@keyframes agn-loader-breathe { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.045); opacity: 1; } }
|
|
1552
|
+
@keyframes agn-loader-pulse { 0% { transform: scale(.55); opacity: .9; } 70% { transform: scale(1.15); opacity: 0; } 100% { transform: scale(1.15); opacity: 0; } }
|
|
1553
|
+
@keyframes agn-loader-draw-ring { 0% { stroke-dashoffset: 1; opacity: 1; } 50% { stroke-dashoffset: 0; opacity: 1; } 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
|
|
1554
|
+
@keyframes agn-loader-draw-core { 0%, 50% { stroke-dashoffset: 1; opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 1; } 86% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
|
|
1555
|
+
@keyframes agn-loader-draw-crescent { 0%, 50% { opacity: 0; } 75% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
|
|
1556
|
+
@keyframes agn-loader-fade { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
|
|
1557
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1558
|
+
.agn-loader .agn-mark__ring, .agn-loader .agn-mark__core, .agn-loader .agn-mark__crescent, .agn-loader .agn-loader__mark::before { animation: none !important; stroke-dasharray: none; opacity: 1; transform: none; }
|
|
1559
|
+
.agn-loader .agn-loader__mark { animation: agn-loader-fade 2.4s steps(1, end) infinite !important; animation-duration: 2.4s !important; }
|
|
1560
|
+
}
|
|
1561
|
+
/* Skeleton, PageSkeleton */
|
|
1562
|
+
.agn-skeleton { display: inline-block; background: var(--panel-3); border-radius: var(--radius-sm); animation: agn-placeholder-pulse 2s var(--ease-loader) infinite; }
|
|
1563
|
+
.agn-skeleton--line { display: block; width: 100%; height: 10px; }
|
|
1564
|
+
.agn-skeleton--rect { display: block; width: 100%; height: 48px; border-radius: var(--radius-md); }
|
|
1565
|
+
.agn-skeleton--circle { width: 32px; height: 32px; border-radius: var(--radius-full); }
|
|
1566
|
+
.agn-skeleton-text { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
1567
|
+
@keyframes agn-placeholder-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
|
|
1568
|
+
.agn-page-skeleton { display: flex; flex-direction: column; gap: var(--space-5); }
|
|
1569
|
+
.agn-page-skeleton__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
|
|
1570
|
+
.agn-page-skeleton__table { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; }
|
|
1571
|
+
.agn-page-skeleton__row { display: grid; gap: var(--space-4); align-items: center; height: var(--row-h); padding: 0 var(--space-3); border-top: 1px solid var(--line); }
|
|
1572
|
+
.agn-page-skeleton__row--head { border-top: 0; background: var(--panel-2); }
|
|
1573
|
+
/* Alert */
|
|
1574
|
+
.agn-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.45; }
|
|
1575
|
+
.agn-alert__icon { margin-top: 1px; }
|
|
1576
|
+
.agn-alert__body { flex: 1; min-width: 0; }
|
|
1577
|
+
.agn-alert__title { font-weight: 600; }
|
|
1578
|
+
.agn-alert__text { color: var(--text-2); }
|
|
1579
|
+
.agn-alert__title + .agn-alert__text { margin-top: 2px; }
|
|
1580
|
+
.agn-alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
|
|
1581
|
+
.agn-alert__close { margin: -4px -6px -4px 0; }
|
|
1582
|
+
.agn-alert--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
|
|
1583
|
+
.agn-alert--info .agn-alert__icon, .agn-alert--info .agn-alert__title { color: var(--info); }
|
|
1584
|
+
.agn-alert--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
|
|
1585
|
+
.agn-alert--ok .agn-alert__icon, .agn-alert--ok .agn-alert__title { color: var(--ok); }
|
|
1586
|
+
.agn-alert--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
|
|
1587
|
+
.agn-alert--warn .agn-alert__icon, .agn-alert--warn .agn-alert__title { color: var(--warn); }
|
|
1588
|
+
.agn-alert--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
|
|
1589
|
+
.agn-alert--bad .agn-alert__icon, .agn-alert--bad .agn-alert__title { color: var(--bad); }
|
|
1590
|
+
/* Toast, ToastContainer */
|
|
1591
|
+
.agn-toasts { position: fixed; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
|
|
1592
|
+
.agn-toasts--bottom-right { right: var(--space-4); bottom: var(--space-4); align-items: flex-end; }
|
|
1593
|
+
.agn-toasts--bottom-left { left: var(--space-4); bottom: var(--space-4); align-items: flex-start; }
|
|
1594
|
+
.agn-toasts--top-right { right: var(--space-4); top: var(--space-4); align-items: flex-end; }
|
|
1595
|
+
.agn-toasts--static { position: static; pointer-events: auto; }
|
|
1596
|
+
.agn-toasts--contained { position: absolute; max-width: calc(100% - var(--space-4) * 2); }
|
|
1597
|
+
.agn-toasts--top-left { left: var(--space-4); top: var(--space-4); align-items: flex-start; }
|
|
1598
|
+
.agn-toasts--top-center { left: 50%; top: var(--space-4); transform: translateX(-50%); align-items: center; }
|
|
1599
|
+
.agn-toasts--bottom-center { left: 50%; bottom: var(--space-4); transform: translateX(-50%); align-items: center; }
|
|
1600
|
+
.agn-toasts > * { pointer-events: auto; }
|
|
1601
|
+
.agn-toast { display: flex; align-items: flex-start; gap: var(--space-3); width: min(360px, calc(100vw - 2 * var(--space-4))); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); color: var(--text); font-size: 13px; line-height: 1.4; animation: agn-toast-in var(--duration-slow) var(--ease-enter); }
|
|
1602
|
+
.agn-toast__icon { margin-top: 1px; }
|
|
1603
|
+
.agn-toast--ok .agn-toast__icon { color: var(--ok); }
|
|
1604
|
+
.agn-toast--bad .agn-toast__icon { color: var(--bad); }
|
|
1605
|
+
.agn-toast--warn .agn-toast__icon { color: var(--warn); }
|
|
1606
|
+
.agn-toast--info .agn-toast__icon { color: var(--info); }
|
|
1607
|
+
.agn-toast__body { flex: 1; min-width: 0; }
|
|
1608
|
+
.agn-toast__title { font-weight: 600; }
|
|
1609
|
+
.agn-toast__text { color: var(--text-2); font-size: 12.5px; }
|
|
1610
|
+
.agn-toast__action { margin-top: var(--space-2); }
|
|
1611
|
+
.agn-toast__close { margin: -4px -4px -4px 0; }
|
|
1612
|
+
@keyframes agn-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
|
|
1613
|
+
/* ScopedNotification */
|
|
1614
|
+
.agn-scoped { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--panel-2); color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
|
|
1615
|
+
.agn-scoped__icon { margin-top: 2px; color: var(--mute); }
|
|
1616
|
+
.agn-scoped__text { flex: 1; min-width: 0; }
|
|
1617
|
+
.agn-scoped__action { flex-shrink: 0; margin: -4px 0; }
|
|
1618
|
+
.agn-scoped--info { background: var(--info-soft); color: var(--text); } .agn-scoped--info .agn-scoped__icon { color: var(--info); }
|
|
1619
|
+
.agn-scoped--ok { background: var(--ok-soft); color: var(--text); } .agn-scoped--ok .agn-scoped__icon { color: var(--ok); }
|
|
1620
|
+
.agn-scoped--warn { background: var(--warn-soft); color: var(--text); } .agn-scoped--warn .agn-scoped__icon { color: var(--warn); }
|
|
1621
|
+
.agn-scoped--bad { background: var(--bad-soft); color: var(--text); } .agn-scoped--bad .agn-scoped__icon { color: var(--bad); }
|
|
1622
|
+
/* Notification, NotificationList */
|
|
1623
|
+
.agn-notif { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: default; }
|
|
1624
|
+
.agn-notif--clickable { cursor: pointer; }
|
|
1625
|
+
.agn-notif--clickable:hover { background: var(--panel-2); }
|
|
1626
|
+
.agn-notif__dot { position: absolute; left: 8px; top: 20px; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--signal); opacity: 0; }
|
|
1627
|
+
.agn-notif--unread .agn-notif__dot { opacity: 1; }
|
|
1628
|
+
.agn-notif--unread .agn-notif__title { font-weight: 600; }
|
|
1629
|
+
.agn-notif__avatar, .agn-notif__tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
|
|
1630
|
+
.agn-notif__avatar { border-radius: var(--radius-full); background: var(--panel-3); color: var(--text-2); }
|
|
1631
|
+
.agn-notif__tile { border-radius: var(--radius-md); background: var(--signal-soft); color: var(--link); }
|
|
1632
|
+
.agn-notif__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
1633
|
+
.agn-notif__title { font-size: 13px; font-weight: 500; line-height: 1.35; }
|
|
1634
|
+
.agn-notif__msg { font-size: 12.5px; color: var(--text-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
1635
|
+
.agn-notif__object { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
1636
|
+
.agn-notif__time { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--mute); padding-top: 2px; font-variant-numeric: tabular-nums; }
|
|
1637
|
+
.agn-notif-list { width: var(--panel-w-lg); max-width: 100%; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
|
|
1638
|
+
.agn-notif-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: var(--header-h); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); }
|
|
1639
|
+
.agn-notif-list__title { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
|
|
1640
|
+
.agn-notif-list__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--signal); color: var(--signal-ink); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; }
|
|
1641
|
+
.agn-notif-list__body { max-height: 420px; overflow: auto; }
|
|
1642
|
+
.agn-notif-list--bare { width: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
|
|
1643
|
+
.agn-notif-list--bare .agn-notif-list__body { max-height: none; }
|
|
1644
|
+
.agn-notif-list__day { padding: var(--space-3) var(--space-4) var(--space-1); }
|
|
1645
|
+
.agn-notif-list__group + .agn-notif-list__group { border-top: 1px solid var(--line); }
|
|
1646
|
+
.agn-notif-list__empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--mute); font-size: 13px; }
|
|
1647
|
+
/* Modal, Prompt */
|
|
1648
|
+
/* Sheet */
|
|
1649
|
+
.agn-sheet-scrim { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; justify-content: flex-end; background: var(--overlay); animation: agn-fade-in var(--duration-base) var(--ease-enter); }
|
|
1650
|
+
.agn-sheet-scrim--contained { position: absolute; }
|
|
1651
|
+
.agn-sheet { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 85%; background: var(--panel); color: var(--text); border-top: 1px solid var(--line); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; box-shadow: var(--shadow); outline: none; animation: agn-sheet-in var(--duration-slow) var(--ease-enter); }
|
|
1652
|
+
@keyframes agn-sheet-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
|
|
1653
|
+
.agn-sheet__handle { display: block; width: 36px; height: 4px; margin: var(--space-2) auto 0; border-radius: var(--radius-full); background: var(--line-3); flex-shrink: 0; }
|
|
1654
|
+
.agn-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-2); flex-shrink: 0; }
|
|
1655
|
+
.agn-sheet__heading { min-width: 0; }
|
|
1656
|
+
.agn-sheet__title { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
|
|
1657
|
+
.agn-sheet__desc { margin: var(--space-1) 0 0; font-size: 13px; color: var(--text-2); }
|
|
1658
|
+
.agn-sheet__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-2) var(--space-4) var(--space-4); }
|
|
1659
|
+
.agn-sheet__foot { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); flex-shrink: 0; }
|
|
1660
|
+
.agn-sheet__foot > .agn-btn { width: 100%; justify-content: center; min-height: var(--touch-target); }
|
|
1661
|
+
.agn-scrim { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: var(--overlay); animation: agn-fade-in var(--duration-base) var(--ease-enter); }
|
|
1662
|
+
.agn-modal { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: calc(100vh - 2 * var(--space-5)); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); outline: none; animation: agn-modal-in var(--duration-slow) var(--ease-enter); }
|
|
1663
|
+
.agn-modal--sm { max-width: 400px; }
|
|
1664
|
+
.agn-modal--lg { max-width: 800px; }
|
|
1665
|
+
.agn-modal--full { max-width: none; width: calc(100vw - 2 * var(--space-5)); height: calc(100vh - 2 * var(--space-5)); }
|
|
1666
|
+
.agn-modal__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
|
|
1667
|
+
.agn-modal__heading { flex: 1; min-width: 0; }
|
|
1668
|
+
.agn-modal__title { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
|
|
1669
|
+
.agn-modal__desc { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
|
|
1670
|
+
.agn-modal__close { margin: -4px -4px -4px 0; }
|
|
1671
|
+
.agn-modal__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4) var(--space-5); font-size: 13px; line-height: 1.5; }
|
|
1672
|
+
.agn-modal__foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
|
|
1673
|
+
.agn-prompt__body { display: flex; gap: var(--space-4); padding: var(--space-5); }
|
|
1674
|
+
.agn-prompt__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-lg); background: var(--warn-soft); color: var(--warn); }
|
|
1675
|
+
.agn-prompt--bad .agn-prompt__icon { background: var(--bad-soft); color: var(--bad); }
|
|
1676
|
+
.agn-prompt--info .agn-prompt__icon { background: var(--info-soft); color: var(--info); }
|
|
1677
|
+
.agn-prompt--ok .agn-prompt__icon { background: var(--ok-soft); color: var(--ok); }
|
|
1678
|
+
.agn-prompt__text { margin-top: var(--space-2); font-size: 13px; line-height: 1.5; color: var(--text-2); }
|
|
1679
|
+
.agn-prompt__consequence { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--text); font-size: 12.5px; }
|
|
1680
|
+
.agn-prompt--bad .agn-prompt__consequence { background: var(--bad-soft); }
|
|
1681
|
+
@keyframes agn-fade-in { from { opacity: 0; } to { opacity: 1; } }
|
|
1682
|
+
@keyframes agn-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
|
|
1683
|
+
/* Popover */
|
|
1684
|
+
.agn-pop-wrap { position: relative; display: inline-block; }
|
|
1685
|
+
.agn-pop { position: absolute; z-index: var(--z-dropdown); background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font-size: 13px; line-height: 1.45; outline: none; animation: agn-pop-in var(--duration-base) var(--ease-enter); }
|
|
1686
|
+
.agn-pop--static { position: static; }
|
|
1687
|
+
.agn-pop--bottom, .agn-pop--bottom-start, .agn-pop--bottom-end { top: 100%; margin-top: var(--space-2); }
|
|
1688
|
+
.agn-pop--top, .agn-pop--top-start, .agn-pop--top-end { bottom: 100%; margin-bottom: var(--space-2); }
|
|
1689
|
+
.agn-pop--bottom-start, .agn-pop--top-start { left: 0; }
|
|
1690
|
+
.agn-pop--bottom-end, .agn-pop--top-end { right: 0; }
|
|
1691
|
+
.agn-pop--bottom, .agn-pop--top { left: 50%; transform: translateX(-50%); }
|
|
1692
|
+
.agn-pop--left { right: 100%; top: 0; margin-right: var(--space-2); }
|
|
1693
|
+
.agn-pop--right { left: 100%; top: 0; margin-left: var(--space-2); }
|
|
1694
|
+
.agn-pop__arrow { position: absolute; width: 10px; height: 10px; background: var(--panel); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg); }
|
|
1695
|
+
.agn-pop--bottom .agn-pop__arrow, .agn-pop--bottom-start .agn-pop__arrow, .agn-pop--bottom-end .agn-pop__arrow { top: -6px; }
|
|
1696
|
+
.agn-pop--top .agn-pop__arrow, .agn-pop--top-start .agn-pop__arrow, .agn-pop--top-end .agn-pop__arrow { bottom: -6px; transform: rotate(225deg); }
|
|
1697
|
+
.agn-pop--bottom-start .agn-pop__arrow, .agn-pop--top-start .agn-pop__arrow { left: 14px; }
|
|
1698
|
+
.agn-pop--bottom-end .agn-pop__arrow, .agn-pop--top-end .agn-pop__arrow { right: 14px; }
|
|
1699
|
+
.agn-pop--bottom .agn-pop__arrow, .agn-pop--top .agn-pop__arrow { left: calc(50% - 5px); }
|
|
1700
|
+
.agn-pop--left .agn-pop__arrow { right: -6px; top: 12px; transform: rotate(135deg); }
|
|
1701
|
+
.agn-pop--right .agn-pop__arrow { left: -6px; top: 12px; transform: rotate(-45deg); }
|
|
1702
|
+
.agn-pop__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); min-height: 36px; }
|
|
1703
|
+
.agn-pop__title { flex: 1; font-weight: 600; font-size: 13px; }
|
|
1704
|
+
.agn-pop__close { margin-left: auto; }
|
|
1705
|
+
.agn-pop__body { padding: var(--space-3) var(--space-4); }
|
|
1706
|
+
.agn-pop__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); }
|
|
1707
|
+
@keyframes agn-pop-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
|
|
1708
|
+
/* Tooltip */
|
|
1709
|
+
.agn-tip-wrap { position: relative; display: inline-flex; }
|
|
1710
|
+
.agn-tip { position: absolute; z-index: var(--z-dropdown); display: inline-flex; align-items: center; gap: var(--space-2); width: max-content; max-width: 260px; padding: 5px 8px; border-radius: var(--radius-md); background: var(--text); color: var(--bg); font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0; white-space: normal; pointer-events: none; animation: agn-fade-in var(--duration-fast) var(--ease-enter); }
|
|
1711
|
+
.agn-tip--top { left: 50%; bottom: 100%; transform: translate(-50%, -6px); }
|
|
1712
|
+
.agn-tip--bottom { left: 50%; top: 100%; transform: translate(-50%, 6px); }
|
|
1713
|
+
.agn-tip--left { right: 100%; top: 50%; transform: translate(-6px, -50%); }
|
|
1714
|
+
.agn-tip--right { left: 100%; top: 50%; transform: translate(6px, -50%); }
|
|
1715
|
+
.agn-tip__kbd { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); font: inherit; font-size: 10.5px; color: var(--bg); opacity: .85; }
|
|
1716
|
+
/* Spinner */
|
|
1717
|
+
.agn-spinner { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--link); vertical-align: middle; }
|
|
1718
|
+
.agn-spinner--neutral { color: var(--text-2); }
|
|
1719
|
+
.agn-spinner--inverse { color: var(--signal-ink); }
|
|
1720
|
+
.agn-spinner__svg { animation: agn-spin 1s linear infinite; }
|
|
1721
|
+
.agn-spinner__track { stroke: currentColor; opacity: .18; }
|
|
1722
|
+
.agn-spinner__arc { stroke: currentColor; }
|
|
1723
|
+
.agn-spinner__label { font-size: 12.5px; color: var(--text-2); }
|
|
1724
|
+
.agn-spinner--cover { position: absolute; inset: 0; z-index: var(--z-raised); justify-content: center; background: color-mix(in srgb, var(--panel) 70%, transparent); border-radius: inherit; }
|
|
1725
|
+
/* ProgressBar */
|
|
1726
|
+
.agn-progress { display: flex; flex-direction: column; gap: var(--space-1); min-width: 120px; }
|
|
1727
|
+
.agn-progress__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
|
|
1728
|
+
.agn-progress__label { font-size: 12px; color: var(--text-2); }
|
|
1729
|
+
.agn-progress__value { font-family: var(--font-mono); font-size: 11.5px; color: var(--mute); }
|
|
1730
|
+
.agn-progress__track { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--panel-3); overflow: hidden; }
|
|
1731
|
+
.agn-progress--sm .agn-progress__track { height: 4px; }
|
|
1732
|
+
.agn-progress--lg .agn-progress__track { height: 10px; }
|
|
1733
|
+
.agn-progress__fill { height: 100%; border-radius: inherit; background: var(--signal); transition: width var(--duration-slow) var(--ease-enter); }
|
|
1734
|
+
.agn-progress--ok .agn-progress__fill { background: var(--ok); }
|
|
1735
|
+
.agn-progress--warn .agn-progress__fill { background: var(--warn); }
|
|
1736
|
+
.agn-progress--bad .agn-progress__fill { background: var(--bad); }
|
|
1737
|
+
.agn-progress--neutral .agn-progress__fill { background: var(--text-2); }
|
|
1738
|
+
.agn-progress--indeterminate .agn-progress__fill { position: absolute; width: 40%; animation: agn-progress-slide 1.4s var(--ease-loader) infinite; }
|
|
1739
|
+
@keyframes agn-progress-slide { from { left: -40%; } to { left: 100%; } }
|
|
1740
|
+
/* ProgressRing */
|
|
1741
|
+
.agn-ring { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); }
|
|
1742
|
+
.agn-ring__box { position: relative; display: inline-flex; }
|
|
1743
|
+
.agn-ring__track { stroke: var(--panel-3); }
|
|
1744
|
+
.agn-ring__arc { stroke: var(--signal); transition: stroke-dashoffset var(--duration-slow) var(--ease-enter); }
|
|
1745
|
+
.agn-ring--ok .agn-ring__arc { stroke: var(--ok); }
|
|
1746
|
+
.agn-ring--warn .agn-ring__arc { stroke: var(--warn); }
|
|
1747
|
+
.agn-ring--bad .agn-ring__arc { stroke: var(--bad); }
|
|
1748
|
+
.agn-ring--neutral .agn-ring__arc { stroke: var(--text-2); }
|
|
1749
|
+
.agn-ring__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--text); }
|
|
1750
|
+
.agn-ring__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-align: center; }
|
|
1751
|
+
/* SidePanel */
|
|
1752
|
+
.agn-panel { display: flex; flex-direction: column; width: var(--panel-w); max-width: 100%; background: var(--panel); color: var(--text); border-left: 1px solid var(--line); }
|
|
1753
|
+
.agn-panel--lg { width: var(--panel-w-lg); }
|
|
1754
|
+
.agn-panel--overlay { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-panel); box-shadow: var(--shadow-sm); animation: agn-panel-in var(--duration-slow) var(--ease-enter); }
|
|
1755
|
+
.agn-panel--docked { position: relative; height: 100%; }
|
|
1756
|
+
.agn-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-height: var(--header-h); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
|
|
1757
|
+
.agn-panel__heading { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
|
1758
|
+
.agn-panel__title { margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1759
|
+
.agn-panel__subtitle { font-size: 12px; color: var(--text-2); }
|
|
1760
|
+
.agn-panel__actions { display: flex; align-items: center; gap: var(--space-1); margin: -4px -2px 0 0; }
|
|
1761
|
+
.agn-panel__tabs { border-bottom: 1px solid var(--line); padding: 0 var(--space-2); }
|
|
1762
|
+
.agn-panel__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4); font-size: 13px; }
|
|
1763
|
+
.agn-panel__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--panel); }
|
|
1764
|
+
@keyframes agn-panel-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
|
|
1765
|
+
/* DockedComposer */
|
|
1766
|
+
.agn-composer { position: fixed; bottom: 0; z-index: var(--z-panel); display: flex; flex-direction: column; width: 480px; max-width: calc(100vw - 2 * var(--space-4)); max-height: 70vh; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow); }
|
|
1767
|
+
.agn-composer--right { right: var(--space-5); }
|
|
1768
|
+
.agn-composer--left { left: var(--space-5); }
|
|
1769
|
+
.agn-composer--static { position: relative; right: auto; left: auto; bottom: auto; }
|
|
1770
|
+
.agn-composer__head { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--line); background: var(--panel-2); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
|
|
1771
|
+
.agn-composer--min .agn-composer__head { border-bottom: 0; }
|
|
1772
|
+
.agn-composer__icon { color: var(--link); }
|
|
1773
|
+
.agn-composer__title { flex: 1; margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1774
|
+
.agn-composer__ctl { display: flex; gap: 2px; }
|
|
1775
|
+
.agn-composer__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); font-size: 13px; }
|
|
1776
|
+
.agn-composer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); }
|
|
1777
|
+
.agn-composer__tools, .agn-composer__actions { display: flex; align-items: center; gap: var(--space-1); }
|
|
1778
|
+
/* DockedUtilityBar */
|
|
1779
|
+
.agn-utility { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); }
|
|
1780
|
+
.agn-utility--static { position: relative; }
|
|
1781
|
+
.agn-utility__bar { display: flex; align-items: stretch; gap: var(--space-1); height: 36px; padding: 0 var(--space-3); background: var(--panel); border-top: 1px solid var(--line-2); }
|
|
1782
|
+
.agn-utility__item { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
|
|
1783
|
+
.agn-utility__item:hover { color: var(--text); background: var(--panel-2); }
|
|
1784
|
+
.agn-utility__item:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
|
|
1785
|
+
.agn-utility__item--active { color: var(--link); background: var(--signal-soft); }
|
|
1786
|
+
.agn-utility__item--active::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--signal); }
|
|
1787
|
+
.agn-utility__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full); background: var(--panel-3); color: var(--text-2); font-family: var(--font-mono); font-size: 10.5px; }
|
|
1788
|
+
.agn-utility__item--active .agn-utility__badge { background: var(--signal); color: var(--signal-ink); }
|
|
1789
|
+
.agn-utility__panel { position: absolute; left: var(--space-3); bottom: 100%; width: var(--panel-w-lg); max-width: calc(100vw - 2 * var(--space-3)); max-height: 360px; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4); font-size: 13px; animation: agn-modal-in var(--duration-base) var(--ease-enter); }
|
|
1790
|
+
.agn-utility--static .agn-utility__panel { position: relative; left: auto; bottom: auto; margin-left: var(--space-3); }
|
|
1791
|
+
/* Publisher */
|
|
1792
|
+
.agn-publisher { display: flex; gap: var(--space-3); align-items: flex-start; }
|
|
1793
|
+
.agn-publisher__avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--panel-3); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
|
|
1794
|
+
.agn-publisher__field { flex: 1; min-width: 0; border: 1px solid var(--edge); border-radius: var(--radius-lg); background: var(--bg-2); transition: border-color var(--duration-fast) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-enter); }
|
|
1795
|
+
.agn-publisher__field:focus-within { border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
1796
|
+
.agn-publisher__input { display: block; width: 100%; min-height: var(--control-h); padding: 7px var(--space-3); border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 1.45; }
|
|
1797
|
+
.agn-publisher__input::placeholder { color: var(--mute); }
|
|
1798
|
+
.agn-publisher__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-2); }
|
|
1799
|
+
.agn-publisher__tools { display: flex; gap: 2px; }
|
|
1800
|
+
/* EmptyState */
|
|
1801
|
+
.agn-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-7) var(--space-5); text-align: center; color: var(--text); }
|
|
1802
|
+
.agn-empty--compact { flex-direction: row; justify-content: flex-start; gap: var(--space-3); padding: var(--space-4); text-align: left; }
|
|
1803
|
+
.agn-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-lg); background: var(--signal-soft); color: var(--link); }
|
|
1804
|
+
.agn-empty--compact .agn-empty__icon { width: 36px; height: 36px; border-radius: var(--radius-md); }
|
|
1805
|
+
.agn-empty__art { max-width: 200px; line-height: 0; }
|
|
1806
|
+
.agn-empty__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 40ch; }
|
|
1807
|
+
.agn-empty--compact .agn-empty__body { align-items: flex-start; gap: var(--space-1); max-width: none; }
|
|
1808
|
+
.agn-empty__title { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
|
|
1809
|
+
.agn-empty--compact .agn-empty__title { font-size: 13px; }
|
|
1810
|
+
.agn-empty__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
|
|
1811
|
+
.agn-empty--compact .agn-empty__text { font-size: 12.5px; }
|
|
1812
|
+
.agn-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-1); }
|
|
1813
|
+
.agn-empty--compact .agn-empty__actions { margin-top: var(--space-2); justify-content: flex-start; }
|
|
1814
|
+
|
|
1815
|
+
/* --- 75-chat.css --- */
|
|
1816
|
+
/* chat: ChatThread, ChatDivider, ChatMessage (+ ChatMarkdown), ChatEvent, ChatSuggestions, ChatComposer, ToolCallCard, StreamingIndicator, TranscriptPanel */
|
|
1817
|
+
/* ChatThread — compact by default; comfortable density widens the gaps and the type for hosted chat and the desk */
|
|
1818
|
+
.agn-chat { position: relative; --agn-chat-gap: var(--space-3); --agn-chat-size: 13px; --agn-chat-max: 72%; display: flex; flex-direction: column; gap: var(--agn-chat-gap); padding: var(--space-3) var(--space-4); overflow: auto; overscroll-behavior: contain; font-size: var(--agn-chat-size); color: var(--text); }
|
|
1819
|
+
[data-density="comfortable"] .agn-chat, .agn-chat[data-density="comfortable"] { --agn-chat-gap: var(--space-4); --agn-chat-size: 14px; --agn-chat-max: 80%; }
|
|
1820
|
+
.agn-chat__divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-1) 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
|
|
1821
|
+
.agn-chat__divider::before, .agn-chat__divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
|
|
1822
|
+
.agn-chat__divider--new { color: var(--link); }
|
|
1823
|
+
.agn-chat__divider--new::before, .agn-chat__divider--new::after { background: var(--signal); opacity: .6; }
|
|
1824
|
+
/* ChatMessage — user on the start side (customer in the desk), agent on the end side; .agn-chat--user-end flips both sides and the sender corners */
|
|
1825
|
+
.agn-msg { display: flex; gap: var(--space-2); max-width: var(--agn-chat-max); align-items: flex-start; }
|
|
1826
|
+
.agn-msg--user { align-self: flex-start; }
|
|
1827
|
+
.agn-msg--agent, .agn-msg--human-agent { align-self: flex-end; flex-direction: row-reverse; }
|
|
1828
|
+
.agn-chat--user-end .agn-msg--user { align-self: flex-end; flex-direction: row-reverse; }
|
|
1829
|
+
.agn-chat--user-end .agn-msg--agent, .agn-chat--user-end .agn-msg--human-agent { align-self: flex-start; flex-direction: row; }
|
|
1830
|
+
.agn-msg__side { flex-shrink: 0; padding-top: 16px; }
|
|
1831
|
+
.agn-msg__tile { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--signal-soft); color: var(--link); }
|
|
1832
|
+
.agn-msg__avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--panel-3); color: var(--text-2); font-family: var(--font-mono); font-size: 10px; font-weight: 500; }
|
|
1833
|
+
.agn-msg__col { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
|
|
1834
|
+
.agn-msg--agent .agn-msg__col, .agn-msg--human-agent .agn-msg__col { align-items: flex-end; }
|
|
1835
|
+
.agn-chat--user-end .agn-msg--user .agn-msg__col { align-items: flex-end; }
|
|
1836
|
+
.agn-chat--user-end .agn-msg--agent .agn-msg__col, .agn-chat--user-end .agn-msg--human-agent .agn-msg__col { align-items: flex-start; }
|
|
1837
|
+
.agn-msg__name { font-size: 11px; font-weight: 600; color: var(--text-2); padding: 0 2px; }
|
|
1838
|
+
.agn-msg__bubble { position: relative; padding: var(--space-2) var(--space-3); border-radius: 12px 4px 12px 12px; background: var(--panel); border: 1px solid var(--line); line-height: 1.5; overflow-wrap: anywhere; }
|
|
1839
|
+
.agn-msg--user .agn-msg__bubble { border-radius: 4px 12px 12px 12px; background: var(--panel-2); border-color: transparent; }
|
|
1840
|
+
.agn-msg--human-agent .agn-msg__bubble { background: var(--signal-soft); border-color: transparent; }
|
|
1841
|
+
.agn-chat--user-end .agn-msg--user .agn-msg__bubble { border-radius: 12px 4px 12px 12px; }
|
|
1842
|
+
.agn-chat--user-end .agn-msg--agent .agn-msg__bubble, .agn-chat--user-end .agn-msg--human-agent .agn-msg__bubble { border-radius: 4px 12px 12px 12px; }
|
|
1843
|
+
.agn-msg__cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--link); animation: agn-blink 1s steps(1, end) infinite; }
|
|
1844
|
+
@keyframes agn-blink { 50% { opacity: 0; } }
|
|
1845
|
+
.agn-msg__meta { display: flex; align-items: center; gap: var(--space-1); padding: 0 2px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
|
|
1846
|
+
.agn-msg__tick { display: inline-flex; align-items: center; gap: 3px; color: var(--mute); }
|
|
1847
|
+
.agn-msg__tick--read { color: var(--link); }
|
|
1848
|
+
.agn-msg__tick--failed { color: var(--bad); }
|
|
1849
|
+
.agn-msg__tick-text { font-size: 11px; }
|
|
1850
|
+
.agn-msg--system { align-self: center; max-width: 90%; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
|
|
1851
|
+
.agn-msg__system { font-size: 12px; color: var(--mute); }
|
|
1852
|
+
.agn-msg--system .agn-msg__time { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); }
|
|
1853
|
+
/* structured replies */
|
|
1854
|
+
.agn-msg__structured { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
|
|
1855
|
+
.agn-msg__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
|
1856
|
+
.agn-msg__cards { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
|
|
1857
|
+
.agn-msg__card { flex: 0 0 200px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; }
|
|
1858
|
+
.agn-msg__card-image { width: 100%; height: 96px; object-fit: cover; display: block; }
|
|
1859
|
+
.agn-msg__card-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); }
|
|
1860
|
+
.agn-msg__card-title { font-weight: 600; font-size: 12.5px; }
|
|
1861
|
+
.agn-msg__card-text { font-size: 12px; color: var(--text-2); line-height: 1.45; }
|
|
1862
|
+
.agn-msg__card-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
|
|
1863
|
+
.agn-msg__table-wrap, .agn-md__table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
|
|
1864
|
+
.agn-msg__table, .agn-md__table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
|
1865
|
+
.agn-msg__table th, .agn-md__table th { text-align: left; padding: 6px var(--space-3); background: var(--panel-2); border-bottom: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
|
|
1866
|
+
.agn-msg__table td, .agn-md__table td { padding: 6px var(--space-3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: top; }
|
|
1867
|
+
.agn-msg__table tr:last-child td, .agn-md__table tr:last-child td { border-bottom: 0; }
|
|
1868
|
+
.agn-msg__figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
|
|
1869
|
+
.agn-msg__image { display: block; max-width: 100%; max-height: 240px; border-radius: var(--radius-lg); border: 1px solid var(--line); object-fit: cover; }
|
|
1870
|
+
.agn-msg__figure figcaption { font-size: 11.5px; color: var(--mute); }
|
|
1871
|
+
/* tools and sources under a message */
|
|
1872
|
+
.agn-msg__tools { width: 100%; }
|
|
1873
|
+
.agn-msg__tools-head { display: inline-flex; align-items: center; gap: var(--space-1); list-style: none; cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--mute); padding: 2px 4px; border-radius: var(--radius-sm); }
|
|
1874
|
+
.agn-msg__tools-head::-webkit-details-marker { display: none; }
|
|
1875
|
+
.agn-msg__tools-head:hover { color: var(--text-2); background: var(--panel-2); }
|
|
1876
|
+
.agn-msg__tools-caret { transition: transform var(--duration-fast) var(--ease-enter); }
|
|
1877
|
+
.agn-msg__tools[open] .agn-msg__tools-caret { transform: rotate(90deg); }
|
|
1878
|
+
.agn-msg__tools-body { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
|
|
1879
|
+
.agn-msg__sources { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 2px; }
|
|
1880
|
+
.agn-msg__source-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
|
|
1881
|
+
.agn-msg__source { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); border: 1px solid var(--line-2); background: var(--panel); font-size: 11.5px; color: var(--text-2); text-decoration: none; }
|
|
1882
|
+
a.agn-msg__source:hover { color: var(--link); border-color: var(--link); }
|
|
1883
|
+
/* ChatMarkdown — rendered inside a bubble; headings are small, code sits on bg-2 */
|
|
1884
|
+
.agn-md { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
1885
|
+
.agn-md__p { margin: 0; }
|
|
1886
|
+
.agn-md__h { margin: var(--space-1) 0 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
|
|
1887
|
+
.agn-md__h--1 { font-size: 1.2em; } .agn-md__h--2 { font-size: 1.1em; } .agn-md__h--3, .agn-md__h--4, .agn-md__h--5, .agn-md__h--6 { font-size: 1em; }
|
|
1888
|
+
.agn-md__code, .agn-tool__pre, .agn-md__pre { font-family: var(--font-mono); }
|
|
1889
|
+
.agn-md__code { font-size: .92em; padding: 1px 4px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
|
|
1890
|
+
.agn-md__pre { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; }
|
|
1891
|
+
.agn-md__pre[data-lang]::before { content: attr(data-lang); display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
1892
|
+
.agn-md__list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 2px; }
|
|
1893
|
+
.agn-md__quote { margin: 0; padding: 2px 0 2px var(--space-3); border-left: 2px solid var(--line-3); color: var(--text-2); display: flex; flex-direction: column; gap: var(--space-1); }
|
|
1894
|
+
.agn-md__hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-1) 0; }
|
|
1895
|
+
.agn-md a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
|
|
1896
|
+
.agn-md a:hover { color: var(--link-hover); }
|
|
1897
|
+
/* ChatEvent */
|
|
1898
|
+
.agn-chat-event { align-self: center; display: inline-flex; align-items: center; gap: var(--space-1); max-width: 90%; height: 22px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--panel-2); color: var(--text-2); font-size: 11.5px; }
|
|
1899
|
+
.agn-chat-event__time { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); margin-left: 2px; font-variant-numeric: tabular-nums; }
|
|
1900
|
+
.agn-chat-event--warn { background: var(--warn-soft); color: var(--warn); }
|
|
1901
|
+
.agn-chat-event--ok { background: var(--ok-soft); color: var(--ok); }
|
|
1902
|
+
.agn-chat-event--info { background: var(--info-soft); color: var(--info); }
|
|
1903
|
+
.agn-chat-event--bad { background: var(--bad-soft); color: var(--bad); }
|
|
1904
|
+
.agn-chat-event--warn .agn-chat-event__time, .agn-chat-event--ok .agn-chat-event__time, .agn-chat-event--info .agn-chat-event__time, .agn-chat-event--bad .agn-chat-event__time { color: inherit; opacity: .8; }
|
|
1905
|
+
/* ChatSuggestions */
|
|
1906
|
+
.agn-chat-suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4); }
|
|
1907
|
+
.agn-chat-suggest--row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
|
|
1908
|
+
.agn-chat-suggest__chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-h-sm); padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--line-2); background: var(--panel); color: var(--link); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter); }
|
|
1909
|
+
.agn-chat-suggest__chip:hover { background: var(--signal-soft); border-color: var(--link); }
|
|
1910
|
+
/* ChatComposer */
|
|
1911
|
+
.agn-chatbox { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-4) var(--space-3); }
|
|
1912
|
+
.agn-chatbox__box { display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: var(--radius-xl); background: var(--bg-2); transition: border-color var(--duration-fast) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-enter); }
|
|
1913
|
+
.agn-chatbox__box:focus-within { border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
1914
|
+
.agn-chatbox--disabled .agn-chatbox__box { opacity: .6; }
|
|
1915
|
+
.agn-chatbox__input { display: block; width: 100%; min-height: var(--control-h); max-height: 50vh; padding: 8px var(--space-3) 4px; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 1.5; }
|
|
1916
|
+
[data-density="comfortable"] .agn-chatbox__input { font-size: 14px; padding: 10px var(--space-4) 4px; }
|
|
1917
|
+
.agn-chatbox__input::placeholder { color: var(--mute); }
|
|
1918
|
+
.agn-chatbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1) var(--space-1) var(--space-1); }
|
|
1919
|
+
.agn-chatbox__tools { display: flex; align-items: center; gap: 2px; min-width: 0; flex-wrap: wrap; }
|
|
1920
|
+
.agn-chatbox__send { flex-shrink: 0; }
|
|
1921
|
+
.agn-chatbox__voice--on { background: var(--signal-soft); color: var(--link); }
|
|
1922
|
+
.agn-chatbox__voice-state { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-1); font-family: var(--font-mono); font-size: 11px; color: var(--link); }
|
|
1923
|
+
.agn-chatbox__voice-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--signal); animation: agn-placeholder-pulse 1.2s var(--ease-loader) infinite; }
|
|
1924
|
+
.agn-chatbox__error { margin-left: var(--space-2); font-size: 11.5px; color: var(--bad); }
|
|
1925
|
+
.agn-chatbox__files { list-style: none; margin: 0; padding: var(--space-2) var(--space-2) 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
|
|
1926
|
+
.agn-chatbox__file { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 var(--space-2); border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); max-width: 220px; }
|
|
1927
|
+
.agn-chatbox__file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1928
|
+
.agn-chatbox__file-size { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); }
|
|
1929
|
+
.agn-chatbox__file-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--mute); cursor: pointer; }
|
|
1930
|
+
.agn-chatbox__file-x:hover { color: var(--text); background: var(--panel-3); }
|
|
1931
|
+
.agn-chatbox__footnote { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2); text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; color: var(--mute); }
|
|
1932
|
+
.agn-chatbox__toolbar { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
|
|
1933
|
+
.agn-chatbox__header { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3) 0; min-width: 0; font-size: 12px; color: var(--text-2); }
|
|
1934
|
+
/* ToolCallCard */
|
|
1935
|
+
.agn-tool { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); font-size: 12px; }
|
|
1936
|
+
.agn-tool__head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); padding: 0 var(--space-2); list-style: none; cursor: pointer; color: var(--text); border-radius: var(--radius-md); }
|
|
1937
|
+
.agn-tool__head::-webkit-details-marker { display: none; }
|
|
1938
|
+
.agn-tool__head:hover { background: var(--panel-2); }
|
|
1939
|
+
.agn-tool__caret { color: var(--mute); transition: transform var(--duration-fast) var(--ease-enter); }
|
|
1940
|
+
.agn-tool[open] > .agn-tool__head .agn-tool__caret { transform: rotate(90deg); }
|
|
1941
|
+
.agn-tool__icon { color: var(--mute); }
|
|
1942
|
+
.agn-tool__name { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
|
|
1943
|
+
.agn-tool__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 11.5px; }
|
|
1944
|
+
.agn-tool__status { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; height: 18px; padding: 0 6px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; background: var(--panel-2); color: var(--text-2); white-space: nowrap; }
|
|
1945
|
+
.agn-tool__status--ok { background: var(--ok-soft); color: var(--ok); }
|
|
1946
|
+
.agn-tool__status--bad { background: var(--bad-soft); color: var(--bad); }
|
|
1947
|
+
.agn-tool__status--info { background: var(--info-soft); color: var(--info); }
|
|
1948
|
+
.agn-tool__spin { animation: agn-spin 1s linear infinite; }
|
|
1949
|
+
.agn-tool__duration { font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
|
|
1950
|
+
.agn-tool__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-2); border-top: 1px solid var(--line); }
|
|
1951
|
+
.agn-tool__section { display: flex; flex-direction: column; gap: var(--space-1); }
|
|
1952
|
+
.agn-tool__section .agn-eyebrow { font-size: 10.5px; padding-top: var(--space-1); }
|
|
1953
|
+
.agn-tool__pre { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: 11.5px; line-height: 1.5; max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
|
|
1954
|
+
/* StreamingIndicator */
|
|
1955
|
+
.agn-streaming { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: 12.5px; }
|
|
1956
|
+
.agn-streaming__dots { display: inline-flex; gap: 3px; }
|
|
1957
|
+
.agn-streaming__dots i { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--link); opacity: .35; animation: agn-dots 1.2s var(--ease-loader) infinite; }
|
|
1958
|
+
.agn-streaming__dots i:nth-child(2) { animation-delay: .2s; } .agn-streaming__dots i:nth-child(3) { animation-delay: .4s; }
|
|
1959
|
+
@keyframes agn-dots { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
|
|
1960
|
+
.agn-streaming__text { background: linear-gradient(90deg, var(--text-2) 0%, var(--text-2) 35%, var(--text) 50%, var(--text-2) 65%, var(--text-2) 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: agn-shine 1.8s linear infinite; }
|
|
1961
|
+
@keyframes agn-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
|
|
1962
|
+
@media (prefers-reduced-motion: reduce) { .agn-streaming__text { background: none; color: var(--text-2); } .agn-streaming__dots i { opacity: .7; } }
|
|
1963
|
+
/* TranscriptPanel */
|
|
1964
|
+
.agn-transcript { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); overflow: hidden; }
|
|
1965
|
+
.agn-transcript__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
|
|
1966
|
+
.agn-transcript__title { margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
|
|
1967
|
+
.agn-transcript__meta { font-family: var(--font-mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
|
|
1968
|
+
.agn-transcript__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); font-size: 12px; }
|
|
1969
|
+
.agn-transcript__verdict--ok { background: var(--ok-soft); color: var(--ok); }
|
|
1970
|
+
.agn-transcript__verdict--bad { background: var(--bad-soft); color: var(--bad); }
|
|
1971
|
+
.agn-transcript__verdict--warn { background: var(--warn-soft); color: var(--warn); }
|
|
1972
|
+
.agn-transcript__verdict-label { font-weight: 600; }
|
|
1973
|
+
.agn-transcript__verdict-score { font-family: var(--font-mono); font-size: 11.5px; }
|
|
1974
|
+
.agn-transcript__verdict-text { color: var(--text-2); }
|
|
1975
|
+
.agn-transcript__dims { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
|
|
1976
|
+
.agn-transcript__dim { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); }
|
|
1977
|
+
.agn-transcript__dim--ok { color: var(--ok); } .agn-transcript__dim--bad { color: var(--bad); }
|
|
1978
|
+
.agn-transcript__turns { list-style: none; margin: 0; padding: 0; overflow: auto; }
|
|
1979
|
+
.agn-transcript__turn { border-bottom: 1px solid var(--line); }
|
|
1980
|
+
.agn-transcript__turn:last-child { border-bottom: 0; }
|
|
1981
|
+
.agn-transcript__row { display: grid; grid-template-columns: 28px 84px 1fr auto; gap: var(--space-3); align-items: start; width: 100%; padding: var(--space-2) var(--space-4); border: 0; background: none; color: inherit; font: inherit; text-align: left; font-size: 12.5px; line-height: 1.5; }
|
|
1982
|
+
button.agn-transcript__row { cursor: pointer; }
|
|
1983
|
+
button.agn-transcript__row:hover { background: var(--panel-2); }
|
|
1984
|
+
.agn-transcript__turn--selected .agn-transcript__row { background: var(--selection); color: var(--selection-ink); }
|
|
1985
|
+
.agn-transcript__turn--flagged { box-shadow: inset 3px 0 0 var(--bad); }
|
|
1986
|
+
.agn-transcript__n { font-family: var(--font-mono); font-size: 11px; color: var(--mute); padding-top: 2px; }
|
|
1987
|
+
.agn-transcript__speaker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1988
|
+
.agn-transcript__turn--agent .agn-transcript__speaker { color: var(--link); }
|
|
1989
|
+
.agn-transcript__turn--system .agn-transcript__speaker, .agn-transcript__turn--system .agn-transcript__text { color: var(--mute); }
|
|
1990
|
+
.agn-transcript__text { min-width: 0; overflow-wrap: anywhere; }
|
|
1991
|
+
.agn-transcript__note { display: block; margin-top: 2px; font-size: 11.5px; color: var(--bad); }
|
|
1992
|
+
.agn-transcript__right { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; padding-top: 2px; }
|
|
1993
|
+
.agn-transcript__flag { display: inline-flex; align-items: center; gap: 3px; color: var(--bad); }
|
|
1994
|
+
.agn-transcript__empty { padding: var(--space-5); text-align: center; color: var(--mute); font-size: 13px; }
|
|
1995
|
+
|
|
1996
|
+
/* --- 80-widgets.css --- */
|
|
1997
|
+
/* widgets (group "Agent"): RunStatus, ApprovalCard, RunTimeline, TraceSpans, AgentRunCard, CostBars, CanvasBlock, CanvasEdge, CanvasNote, QueueCard, CallCard */
|
|
1998
|
+
/* RunStatus — the status tag: icon + word on the tone's soft wash; "since" in mono after it */
|
|
1999
|
+
.agn-run-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12px; }
|
|
2000
|
+
.agn-run-status__tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
|
|
2001
|
+
.agn-run-status--sm .agn-run-status__tag { height: 18px; padding: 0 5px; font-size: 10.5px; }
|
|
2002
|
+
.agn-run-status--info .agn-run-status__tag { background: var(--info-soft); color: var(--info); }
|
|
2003
|
+
.agn-run-status--ok .agn-run-status__tag { background: var(--ok-soft); color: var(--ok); }
|
|
2004
|
+
.agn-run-status--warn .agn-run-status__tag { background: var(--warn-soft); color: var(--warn); }
|
|
2005
|
+
.agn-run-status--bad .agn-run-status__tag { background: var(--bad-soft); color: var(--bad); }
|
|
2006
|
+
.agn-run-status__detail { font-weight: 400; opacity: .85; }
|
|
2007
|
+
.agn-run-status__since { font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
|
|
2008
|
+
.agn-run-status__spin, .agn-rt__spin, .agn-block__spin { animation: agn-spin 1s linear infinite; }
|
|
2009
|
+
/* ApprovalCard — warn reason, proposal, form, decision; controls read --control-h so comfortable density scales them */
|
|
2010
|
+
.agn-approval { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); font-size: 13px; max-width: 640px; }
|
|
2011
|
+
.agn-approval--pending { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
|
|
2012
|
+
.agn-approval--compact { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
|
|
2013
|
+
.agn-approval__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
|
|
2014
|
+
.agn-approval__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
2015
|
+
.agn-approval__title { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
|
|
2016
|
+
.agn-approval__meta { display: flex; flex-wrap: wrap; gap: 2px var(--space-2); font-family: var(--font-mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
|
|
2017
|
+
/* the separator trails each part, so a wrap ends a line with it instead of starting the next one */
|
|
2018
|
+
.agn-approval__meta > span { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
|
|
2019
|
+
.agn-approval__meta > span:not(:last-child)::after { content: '·'; }
|
|
2020
|
+
.agn-approval__status { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
|
|
2021
|
+
.agn-approval__status--warn { background: var(--warn-soft); color: var(--warn); }
|
|
2022
|
+
.agn-approval__status--ok { background: var(--ok-soft); color: var(--ok); }
|
|
2023
|
+
.agn-approval__status--bad { background: var(--bad-soft); color: var(--bad); }
|
|
2024
|
+
.agn-approval__reason { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--text); }
|
|
2025
|
+
.agn-approval__reason .agn-icon { color: var(--warn); margin-top: 1px; }
|
|
2026
|
+
.agn-approval__reason-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); margin-bottom: 2px; }
|
|
2027
|
+
.agn-approval__reason-text { line-height: 1.5; }
|
|
2028
|
+
.agn-approval__section { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
2029
|
+
.agn-approval__kv { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
|
|
2030
|
+
.agn-approval__kv-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: var(--space-3); padding: 6px var(--space-3); border-top: 1px solid var(--line); }
|
|
2031
|
+
.agn-approval__kv-row:first-child { border-top: 0; }
|
|
2032
|
+
.agn-approval__kv dt { margin: 0; font-size: 12px; color: var(--text-2); }
|
|
2033
|
+
.agn-approval__kv dd { margin: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
|
|
2034
|
+
.agn-approval__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
|
|
2035
|
+
.agn-approval__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
2036
|
+
.agn-approval__field--check { justify-content: center; }
|
|
2037
|
+
.agn-approval__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
|
|
2038
|
+
.agn-approval__input { width: 100%; height: var(--control-h); padding: 0 var(--control-px); border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--bg-2); color: var(--text); font: inherit; font-size: 13px; transition: border-color var(--duration-fast) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-enter); }
|
|
2039
|
+
.agn-approval__input:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 var(--focus-halo) var(--signal-soft); }
|
|
2040
|
+
.agn-approval__input:disabled { opacity: .6; }
|
|
2041
|
+
.agn-approval__input--json { height: auto; padding: var(--space-2) var(--control-px); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; resize: vertical; }
|
|
2042
|
+
.agn-approval__check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); font-size: 13px; cursor: pointer; }
|
|
2043
|
+
.agn-approval__check input { width: 16px; height: 16px; margin: 0; accent-color: var(--signal); }
|
|
2044
|
+
.agn-approval__help { font-size: 11.5px; color: var(--mute); }
|
|
2045
|
+
.agn-approval__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
|
|
2046
|
+
.agn-approval__note { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12.5px; color: var(--text-2); }
|
|
2047
|
+
.agn-approval__note--ok { color: var(--ok); } .agn-approval__note--bad { color: var(--bad); }
|
|
2048
|
+
.agn-approval__note-time { color: var(--mute); font-family: var(--font-mono); font-size: 11px; }
|
|
2049
|
+
/* RunTimeline — rows on a grid: step | time track | tokens | cost */
|
|
2050
|
+
.agn-rt { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; font-size: 12.5px; }
|
|
2051
|
+
.agn-rt__grid { display: grid; grid-template-columns: minmax(180px, 220px) 1fr 80px 96px; gap: var(--space-3); align-items: center; padding: 0 var(--space-3); }
|
|
2052
|
+
.agn-rt__grid--no-tokens { grid-template-columns: minmax(180px, 220px) 1fr 96px; }
|
|
2053
|
+
.agn-rt__grid--no-cost { grid-template-columns: minmax(180px, 220px) 1fr 80px; }
|
|
2054
|
+
.agn-rt__grid--no-tokens.agn-rt__grid--no-cost { grid-template-columns: minmax(180px, 220px) 1fr; }
|
|
2055
|
+
.agn-rt__head, .agn-rt__foot { height: var(--row-h); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); background: var(--panel-2); }
|
|
2056
|
+
.agn-rt__head { border-bottom: 1px solid var(--line-2); }
|
|
2057
|
+
.agn-rt__foot { border-top: 1px solid var(--line-2); text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--text-2); }
|
|
2058
|
+
.agn-rt__scale { position: relative; height: 100%; }
|
|
2059
|
+
.agn-rt__tick { position: absolute; top: 50%; transform: translate(-50%, -50%); letter-spacing: 0; text-transform: none; white-space: nowrap; }
|
|
2060
|
+
.agn-rt__tick:first-child { transform: translate(0, -50%); } .agn-rt__tick:last-child { transform: translate(-100%, -50%); }
|
|
2061
|
+
.agn-rt__row { width: 100%; min-height: var(--row-h); border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; font-size: 12.5px; text-align: left; }
|
|
2062
|
+
.agn-rt__row:first-of-type { border-top: 0; }
|
|
2063
|
+
button.agn-rt__row { cursor: pointer; }
|
|
2064
|
+
button.agn-rt__row:hover { background: var(--panel-2); }
|
|
2065
|
+
.agn-rt__row--selected, button.agn-rt__row--selected:hover { background: var(--selection); color: var(--selection-ink); }
|
|
2066
|
+
.agn-rt__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
|
|
2067
|
+
.agn-rt__n { font-family: var(--font-mono); font-size: 11px; color: var(--mute); flex-shrink: 0; }
|
|
2068
|
+
.agn-rt__label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
|
|
2069
|
+
.agn-rt__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2070
|
+
.agn-rt__kind { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); }
|
|
2071
|
+
.agn-rt__icon { margin-left: auto; color: var(--mute); }
|
|
2072
|
+
.agn-rt__row--ok .agn-rt__icon { color: var(--ok); } .agn-rt__row--bad .agn-rt__icon { color: var(--bad); } .agn-rt__row--warn .agn-rt__icon { color: var(--warn); } .agn-rt__row--info .agn-rt__icon { color: var(--info); }
|
|
2073
|
+
.agn-rt__track { position: relative; display: block; height: 14px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 25%); border-radius: var(--radius-sm); }
|
|
2074
|
+
.agn-rt__bar { position: absolute; top: 0; height: 100%; min-width: 3px; border-radius: 3px; background: var(--ok); }
|
|
2075
|
+
.agn-rt__row--bad .agn-rt__bar { background: var(--bad); }
|
|
2076
|
+
.agn-rt__row--warn .agn-rt__bar { background: var(--warn); }
|
|
2077
|
+
.agn-rt__row--neutral .agn-rt__bar { background: var(--line-3); }
|
|
2078
|
+
.agn-rt__row--info .agn-rt__bar { background: var(--info); background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--info-ink) 25%, transparent) 4px 8px); animation: agn-rt-stripes 1s linear infinite; }
|
|
2079
|
+
@keyframes agn-rt-stripes { to { background-position: 11px 0; } }
|
|
2080
|
+
.agn-rt__dur { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); white-space: nowrap; }
|
|
2081
|
+
.agn-rt__num { font-family: var(--font-mono); font-size: 11.5px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
2082
|
+
.agn-rt__total { font-family: var(--font-mono); font-size: 11px; }
|
|
2083
|
+
/* TraceSpans — indented tree with bars; kinds take the chart series, errors take bad */
|
|
2084
|
+
.agn-spans { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; font-size: 12px; --agn-spans-name: 300px; }
|
|
2085
|
+
.agn-spans__scale { position: relative; height: 24px; margin-left: var(--agn-spans-name); margin-right: 72px; border-bottom: 1px solid var(--line-2); background: var(--panel-2); }
|
|
2086
|
+
.agn-spans__tick { position: absolute; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); white-space: nowrap; }
|
|
2087
|
+
.agn-spans__tick:first-child { transform: translate(2px, -50%); } .agn-spans__tick:last-child { transform: translate(calc(-100% - 2px), -50%); }
|
|
2088
|
+
.agn-spans__row { display: grid; grid-template-columns: var(--agn-spans-name) 1fr 72px; align-items: center; min-height: 28px; border-top: 1px solid var(--line); }
|
|
2089
|
+
.agn-spans__row:first-of-type { border-top: 0; }
|
|
2090
|
+
.agn-spans__row:hover { background: var(--panel-2); }
|
|
2091
|
+
.agn-spans__row--selected, .agn-spans__row--selected:hover { background: var(--selection); color: var(--selection-ink); }
|
|
2092
|
+
.agn-spans__name { display: flex; align-items: center; min-width: 0; padding-right: var(--space-2); }
|
|
2093
|
+
.agn-spans__caret { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border: 0; background: none; color: var(--mute); cursor: pointer; border-radius: var(--radius-sm); }
|
|
2094
|
+
.agn-spans__caret--leaf { cursor: default; }
|
|
2095
|
+
.agn-spans__caret .agn-icon { transition: transform var(--duration-fast) var(--ease-enter); }
|
|
2096
|
+
.agn-spans__caret--open { transform: rotate(90deg); }
|
|
2097
|
+
.agn-spans__label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1; height: 28px; padding: 0 var(--space-1); border: 0; background: none; color: inherit; font: inherit; text-align: left; }
|
|
2098
|
+
button.agn-spans__label { cursor: pointer; }
|
|
2099
|
+
.agn-spans__title { font-family: var(--font-mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2100
|
+
.agn-spans__service { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--panel-3); color: var(--text-2); white-space: nowrap; }
|
|
2101
|
+
.agn-spans__err { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--bad); }
|
|
2102
|
+
.agn-spans__track { position: relative; height: 12px; margin-right: var(--space-2); border-left: 1px solid var(--line); }
|
|
2103
|
+
.agn-spans__bar { position: absolute; top: 0; height: 100%; min-width: 2px; border-radius: 2px; background: var(--data-5); }
|
|
2104
|
+
.agn-spans__row--llm .agn-spans__bar { background: var(--data-1); }
|
|
2105
|
+
.agn-spans__row--tool .agn-spans__bar { background: var(--data-2); }
|
|
2106
|
+
.agn-spans__row--http .agn-spans__bar { background: var(--data-3); }
|
|
2107
|
+
.agn-spans__row--workflow .agn-spans__bar { background: var(--data-5); }
|
|
2108
|
+
.agn-spans__row--db .agn-spans__bar { background: var(--data-6); }
|
|
2109
|
+
.agn-spans__row--bad .agn-spans__bar { background: var(--bad); }
|
|
2110
|
+
.agn-spans__dur { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); text-align: right; padding-right: var(--space-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
2111
|
+
/* AgentRunCard */
|
|
2112
|
+
.agn-run-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); font-size: 12.5px; max-width: 420px; }
|
|
2113
|
+
.agn-run-card--selected { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
|
|
2114
|
+
.agn-run-card__head { display: flex; align-items: center; gap: var(--space-2); }
|
|
2115
|
+
.agn-run-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--signal-soft); color: var(--link); }
|
|
2116
|
+
.agn-run-card__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
|
|
2117
|
+
.agn-run-card__title { margin: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2118
|
+
.agn-run-card__id { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
2119
|
+
.agn-run-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--text-2); font-size: 12px; }
|
|
2120
|
+
.agn-run-card__meta > span { display: inline-flex; align-items: center; gap: 4px; }
|
|
2121
|
+
.agn-run-card__meta .agn-icon { color: var(--mute); }
|
|
2122
|
+
.agn-run-card__stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
|
|
2123
|
+
.agn-run-card__stats > div { display: flex; flex-direction: column; gap: 2px; }
|
|
2124
|
+
.agn-run-card__stats dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
|
|
2125
|
+
.agn-run-card__stats dd { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
|
|
2126
|
+
.agn-run-card__foot { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
|
|
2127
|
+
.agn-run-card__open { margin-left: auto; }
|
|
2128
|
+
/* CostBars */
|
|
2129
|
+
.agn-costbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 12.5px; }
|
|
2130
|
+
.agn-costbars__row { display: grid; grid-template-columns: minmax(96px, 160px) 1fr auto; align-items: center; gap: var(--space-3); }
|
|
2131
|
+
.agn-costbars__label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2132
|
+
.agn-costbars__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); }
|
|
2133
|
+
.agn-costbars__track { display: block; height: 10px; border-radius: var(--radius-sm); background: var(--panel-2); }
|
|
2134
|
+
.agn-costbars__fill { display: block; height: 100%; border-radius: inherit; background: var(--signal); transition: width var(--duration-slow) var(--ease-enter); }
|
|
2135
|
+
.agn-costbars__fill--1 { background: var(--data-1); } .agn-costbars__fill--2 { background: var(--data-2); } .agn-costbars__fill--3 { background: var(--data-3); } .agn-costbars__fill--4 { background: var(--data-4); } .agn-costbars__fill--5 { background: var(--data-5); } .agn-costbars__fill--6 { background: var(--data-6); }
|
|
2136
|
+
.agn-costbars__row--bad .agn-costbars__fill { background: var(--bad); } .agn-costbars__row--warn .agn-costbars__fill { background: var(--warn); } .agn-costbars__row--ok .agn-costbars__fill { background: var(--ok); }
|
|
2137
|
+
.agn-costbars__value { display: flex; flex-direction: column; align-items: flex-end; min-width: 88px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.25; }
|
|
2138
|
+
.agn-costbars__tokens { font-size: 10.5px; color: var(--mute); }
|
|
2139
|
+
/* CanvasBlock */
|
|
2140
|
+
.agn-block { position: relative; display: flex; flex-direction: column; gap: 0; width: 250px; padding: 0; border: 1px solid var(--canvas-node-line); border-radius: var(--radius-lg); background: var(--canvas-node); color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: default; transition: box-shadow var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter); }
|
|
2141
|
+
button.agn-block { cursor: pointer; }
|
|
2142
|
+
.agn-block:hover { border-color: var(--line-3); }
|
|
2143
|
+
.agn-block:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
|
|
2144
|
+
.agn-block--selected { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
|
|
2145
|
+
.agn-block--running { border-color: var(--execution); box-shadow: 0 0 0 2px var(--execution); animation: agn-block-run 1.6s var(--ease-loader) infinite; }
|
|
2146
|
+
@keyframes agn-block-run { 0%, 100% { box-shadow: 0 0 0 2px var(--execution); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--execution) 45%, transparent); } }
|
|
2147
|
+
.agn-block--error { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad); }
|
|
2148
|
+
.agn-block--disabled { opacity: .55; }
|
|
2149
|
+
.agn-block--done { border-color: color-mix(in srgb, var(--ok) 55%, var(--canvas-node-line)); }
|
|
2150
|
+
.agn-block--waiting { border-style: dashed; border-color: var(--edge); }
|
|
2151
|
+
.agn-block__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
|
|
2152
|
+
.agn-block__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--signal-soft); color: var(--link); }
|
|
2153
|
+
.agn-block--error .agn-block__icon { background: var(--bad-soft); color: var(--bad); }
|
|
2154
|
+
.agn-block__heading { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
|
|
2155
|
+
.agn-block__name { font-size: 12.5px; font-weight: 600; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
|
2156
|
+
.agn-block__kind { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2157
|
+
.agn-block__state { margin-left: auto; display: inline-flex; flex-shrink: 0; color: var(--mute); }
|
|
2158
|
+
.agn-block--done .agn-block__state { color: var(--ok); }
|
|
2159
|
+
.agn-block--running .agn-block__state { color: var(--execution); } .agn-block--error .agn-block__state { color: var(--bad); }
|
|
2160
|
+
.agn-block__rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding: var(--space-1) 0; }
|
|
2161
|
+
.agn-block__row { display: flex; justify-content: space-between; gap: var(--space-2); padding: 2px var(--space-3); line-height: 1.4; }
|
|
2162
|
+
.agn-block__k { color: var(--mute); font-size: 11px; flex-shrink: 0; }
|
|
2163
|
+
.agn-block__v { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2164
|
+
.agn-block__next { display: flex; align-items: center; gap: var(--space-1); margin: 0 -1px -1px; padding: 4px var(--space-3); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--warn-soft); color: var(--warn); font-size: 11px; }
|
|
2165
|
+
.agn-block__next-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
|
|
2166
|
+
.agn-block__port { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--canvas-node); border: 2px solid var(--canvas-edge); transform: translateY(-50%); }
|
|
2167
|
+
.agn-block__port--in { left: -6px; } .agn-block__port--out { right: -6px; }
|
|
2168
|
+
.agn-block__port--left { left: -6px; right: auto; top: 50%; transform: translateY(-50%); }
|
|
2169
|
+
.agn-block__port--right { right: -6px; left: auto; top: 50%; transform: translateY(-50%); }
|
|
2170
|
+
.agn-block__port--top { top: -6px; left: 50%; right: auto; transform: translateX(-50%); }
|
|
2171
|
+
.agn-block__port--bottom { top: auto; bottom: -6px; left: 50%; right: auto; transform: translateX(-50%); }
|
|
2172
|
+
.agn-block--selected .agn-block__port, .agn-block:hover .agn-block__port { border-color: var(--edge-active); }
|
|
2173
|
+
.agn-block__bar { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px); display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter); z-index: var(--z-raised); }
|
|
2174
|
+
.agn-block:hover .agn-block__bar, .agn-block:focus-within .agn-block__bar, .agn-block--selected .agn-block__bar { opacity: 1; pointer-events: auto; transform: translate(-50%, -6px); }
|
|
2175
|
+
/* CanvasEdge — inside the consumer's <svg> */
|
|
2176
|
+
.agn-edge__hit { fill: none; stroke: transparent; stroke-width: 12; }
|
|
2177
|
+
.agn-edge__path { fill: none; stroke: var(--canvas-edge); stroke-width: 1.5; transition: stroke var(--duration-fast) var(--ease-enter); }
|
|
2178
|
+
.agn-edge__arrow { fill: none; stroke: var(--canvas-edge); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
|
|
2179
|
+
.agn-edge--clickable { cursor: pointer; }
|
|
2180
|
+
.agn-edge--clickable:focus-visible { outline: none; }
|
|
2181
|
+
.agn-edge--clickable:focus-visible .agn-edge__path, .agn-edge--clickable:focus-visible .agn-edge__arrow { stroke: var(--focus); stroke-width: 2.5; }
|
|
2182
|
+
.agn-edge:hover .agn-edge__path, .agn-edge:hover .agn-edge__arrow { stroke: var(--edge-hover); }
|
|
2183
|
+
.agn-edge--active .agn-edge__path, .agn-edge--active .agn-edge__arrow { stroke: var(--edge-active); stroke-width: 2; }
|
|
2184
|
+
.agn-edge--running .agn-edge__path { stroke: var(--execution); stroke-width: 2; stroke-dasharray: 6 4; animation: agn-edge-dash 1s linear infinite; }
|
|
2185
|
+
.agn-edge--running .agn-edge__arrow { stroke: var(--execution); }
|
|
2186
|
+
@keyframes agn-edge-dash { to { stroke-dashoffset: -10; } }
|
|
2187
|
+
.agn-edge--deleted .agn-edge__path, .agn-edge--deleted .agn-edge__arrow { stroke: var(--mute); stroke-dasharray: 3 4; opacity: .6; }
|
|
2188
|
+
.agn-edge__label rect { fill: var(--panel); stroke: var(--line-2); }
|
|
2189
|
+
.agn-edge__label text { fill: var(--text-2); font-family: var(--font-mono); font-size: 10px; }
|
|
2190
|
+
/* Canvas */
|
|
2191
|
+
.agn-canvas { position: relative; overflow: hidden; min-height: 240px; background-color: var(--canvas-bg); border-radius: var(--radius-lg); touch-action: none; outline: none; }
|
|
2192
|
+
.agn-canvas--grid { background-image: radial-gradient(circle, var(--canvas-grid) 1px, transparent 1.2px); }
|
|
2193
|
+
.agn-canvas--interactive { cursor: grab; }
|
|
2194
|
+
.agn-canvas--interactive:active { cursor: grabbing; }
|
|
2195
|
+
.agn-canvas:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
|
|
2196
|
+
.agn-canvas__layer { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
|
|
2197
|
+
.agn-canvas__layer > .agn-block, .agn-canvas__layer > .agn-note, .agn-canvas__layer > [data-canvas-node] { position: absolute; }
|
|
2198
|
+
.agn-canvas__edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
|
|
2199
|
+
.agn-canvas__edges .agn-edge--clickable { pointer-events: stroke; }
|
|
2200
|
+
.agn-canvas__controls { position: absolute; left: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-sm); cursor: default; }
|
|
2201
|
+
.agn-canvas__zoom { min-width: 48px; height: var(--control-h-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; cursor: pointer; }
|
|
2202
|
+
.agn-canvas__zoom:hover { background: var(--panel-2); color: var(--text); }
|
|
2203
|
+
/* CanvasNote */
|
|
2204
|
+
.agn-note { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); color: var(--text); font-size: 12.5px; line-height: 1.45; }
|
|
2205
|
+
.agn-note--neutral { background: var(--panel-2); border-color: var(--line-2); }
|
|
2206
|
+
.agn-note--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
|
|
2207
|
+
.agn-note__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
|
|
2208
|
+
.agn-note__title { font-weight: 600; font-size: 12px; }
|
|
2209
|
+
.agn-note__ctl { display: inline-flex; gap: 2px; margin: -4px -6px -4px 0; opacity: 0; transition: opacity var(--duration-fast) var(--ease-enter); }
|
|
2210
|
+
.agn-note:hover .agn-note__ctl, .agn-note:focus-within .agn-note__ctl { opacity: 1; }
|
|
2211
|
+
.agn-note__body { white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
2212
|
+
.agn-note__foot { font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); }
|
|
2213
|
+
/* QueueCard */
|
|
2214
|
+
.agn-queue { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: default; }
|
|
2215
|
+
.agn-queue--clickable { cursor: pointer; }
|
|
2216
|
+
.agn-queue--clickable:hover { background: var(--panel-2); }
|
|
2217
|
+
.agn-queue--selected, .agn-queue--selected:hover { background: var(--selection); color: var(--selection-ink); border-color: var(--signal); }
|
|
2218
|
+
.agn-queue__channel { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--panel-2); color: var(--text-2); }
|
|
2219
|
+
.agn-queue--whatsapp .agn-queue__channel { background: var(--ok-soft); color: var(--ok); }
|
|
2220
|
+
.agn-queue--voice .agn-queue__channel { background: var(--info-soft); color: var(--info); }
|
|
2221
|
+
.agn-queue__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
2222
|
+
.agn-queue__top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
|
|
2223
|
+
.agn-queue__name { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2224
|
+
.agn-queue--unread .agn-queue__name { font-weight: 600; }
|
|
2225
|
+
.agn-queue__unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--signal); color: var(--signal-ink); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; }
|
|
2226
|
+
.agn-queue__tenant { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--mute); }
|
|
2227
|
+
.agn-queue__phone { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
2228
|
+
.agn-queue__preview { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2229
|
+
.agn-queue--unread .agn-queue__preview { color: var(--text); }
|
|
2230
|
+
.agn-queue__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
|
|
2231
|
+
.agn-queue__wait { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
|
|
2232
|
+
.agn-queue__sla { height: 18px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text-2); font-family: var(--font-mono); font-size: 10.5px; line-height: 18px; white-space: nowrap; }
|
|
2233
|
+
.agn-queue__sla--ok { background: var(--ok-soft); color: var(--ok); } .agn-queue__sla--warn { background: var(--warn-soft); color: var(--warn); } .agn-queue__sla--bad { background: var(--bad-soft); color: var(--bad); }
|
|
2234
|
+
.agn-queue__owner { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 4px; border-radius: var(--radius-full); border: 1px solid var(--line-2); font-size: 11px; color: var(--text-2); white-space: nowrap; }
|
|
2235
|
+
.agn-queue__owner--bot { background: var(--signal-soft); border-color: transparent; color: var(--link); padding-left: 6px; }
|
|
2236
|
+
.agn-queue__owner--queue { padding-left: 6px; }
|
|
2237
|
+
.agn-queue__owner-avatar { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--panel-3); font-family: var(--font-mono); font-size: 8px; font-weight: 500; color: var(--text-2); }
|
|
2238
|
+
/* CallCard */
|
|
2239
|
+
.agn-call { display: flex; flex-direction: column; gap: var(--space-3); width: 320px; max-width: 100%; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); font-size: 12.5px; }
|
|
2240
|
+
.agn-call--ringing { border-color: color-mix(in srgb, var(--info) 45%, transparent); }
|
|
2241
|
+
.agn-call--in-call { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
|
|
2242
|
+
.agn-call__head { display: flex; align-items: center; gap: var(--space-2); }
|
|
2243
|
+
.agn-call__dir { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--panel-2); color: var(--text-2); }
|
|
2244
|
+
.agn-call__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
|
|
2245
|
+
.agn-call__name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2246
|
+
.agn-call__number { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
|
|
2247
|
+
.agn-call__state { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; white-space: nowrap; }
|
|
2248
|
+
.agn-call__state--info { background: var(--info-soft); color: var(--info); } .agn-call__state--ok { background: var(--ok-soft); color: var(--ok); } .agn-call__state--warn { background: var(--warn-soft); color: var(--warn); }
|
|
2249
|
+
.agn-call__ring { animation: agn-call-ring 1.2s var(--ease-loader) infinite; }
|
|
2250
|
+
@keyframes agn-call-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
|
|
2251
|
+
.agn-call__body { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
|
2252
|
+
.agn-call__time { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
|
|
2253
|
+
.agn-call--ended .agn-call__time { color: var(--text-2); }
|
|
2254
|
+
.agn-call__wave { display: flex; align-items: center; gap: 2px; height: 32px; }
|
|
2255
|
+
.agn-call__bar { display: block; width: 3px; height: calc(var(--agn-h) * 100%); border-radius: 2px; background: var(--line-3); transform-origin: center; }
|
|
2256
|
+
.agn-call--in-call .agn-call__bar { background: var(--ok); animation: agn-call-wave 1.1s var(--ease-loader) calc(var(--agn-i) * -.09s) infinite; }
|
|
2257
|
+
.agn-call--ringing .agn-call__bar { background: var(--info); opacity: .5; }
|
|
2258
|
+
.agn-call--on-hold .agn-call__bar { background: var(--warn); opacity: .6; height: 25%; }
|
|
2259
|
+
@keyframes agn-call-wave { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
|
|
2260
|
+
.agn-call__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--text-2); font-size: 12px; }
|
|
2261
|
+
.agn-call__meta > span { display: inline-flex; align-items: center; gap: 4px; }
|
|
2262
|
+
.agn-call__meta .agn-icon { color: var(--mute); }
|
|
2263
|
+
.agn-call__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
|
|
2264
|
+
.agn-call__foot:empty { display: none; }
|
|
2265
|
+
|
|
2266
|
+
/* --- 85-dashboard.css --- */
|
|
2267
|
+
/* dashboard (group "Widgets"): KpiWidget, KpiRow, ChartCard, TaskListWidget, AiInsightWidget, FilterBar, RecordSummaryWidget, TeamWorkloadWidget, ActivityWidget, QuickActions, NotificationsWidget, AgentFlowWidget, LeaderboardWidget, AgendaWidget, OnboardingWidget, CommentsWidget */
|
|
2268
|
+
/* KpiWidget — a Stat in a flat card; plain inside the summary row; the options menu pinned top-right */
|
|
2269
|
+
.agn-kpi { position: relative; min-width: 0; }
|
|
2270
|
+
.agn-kpi--menu .agn-stat__head { padding-right: var(--space-6); }
|
|
2271
|
+
.agn-kpi__menu { position: absolute; top: var(--space-2); right: var(--space-2); }
|
|
2272
|
+
.agn-kpi--plain { padding: var(--space-1) var(--space-5); }
|
|
2273
|
+
.agn-kpi .agn-stat__chart { margin-top: var(--space-1); }
|
|
2274
|
+
/* KpiRow — the page summary: no boxes, hairlines between */
|
|
2275
|
+
.agn-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); row-gap: var(--space-5); padding: var(--space-2) 0; }
|
|
2276
|
+
.agn-kpi-row > .agn-kpi--plain { border-left: 1px solid var(--line); }
|
|
2277
|
+
.agn-kpi-row > .agn-kpi--plain:first-child { border-left: 0; padding-left: 0; }
|
|
2278
|
+
|
|
2279
|
+
/* ChartCard — unit after the title, headline over the plot, the plot measured so the SVG is never stretched */
|
|
2280
|
+
.agn-chart-card__unit { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--mute); }
|
|
2281
|
+
.agn-chart-card .agn-card__body { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
2282
|
+
.agn-chart-card__plot { min-width: 0; }
|
|
2283
|
+
.agn-chart-card__loading { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
2284
|
+
.agn-chart-card__empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-2); border-radius: var(--radius-md); }
|
|
2285
|
+
.agn-chart-card__foot { margin: 0; font-size: 12px; line-height: 1.45; color: var(--mute); }
|
|
2286
|
+
|
|
2287
|
+
/* TaskListWidget — 40px rows: checkbox · title + meta · priority · owner */
|
|
2288
|
+
.agn-tasks__list { list-style: none; margin: 0; padding: 0; }
|
|
2289
|
+
.agn-tasks__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--list-item-h); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); }
|
|
2290
|
+
.agn-tasks__item:first-child { border-top: 0; }
|
|
2291
|
+
.agn-tasks__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
2292
|
+
.agn-tasks__title { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2293
|
+
.agn-tasks__title--link { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
|
|
2294
|
+
.agn-tasks__title--link:hover { color: var(--link); }
|
|
2295
|
+
.agn-tasks__item--done .agn-tasks__title { color: var(--mute); text-decoration: line-through; }
|
|
2296
|
+
.agn-tasks__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); font-size: 12px; color: var(--mute); }
|
|
2297
|
+
.agn-tasks__related { font-family: var(--font-mono); font-size: 11px; }
|
|
2298
|
+
.agn-tasks__due { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
|
|
2299
|
+
.agn-tasks__due--overdue { color: var(--bad); font-weight: 500; }
|
|
2300
|
+
.agn-tasks__priority, .agn-tasks__owner { flex-shrink: 0; }
|
|
2301
|
+
.agn-tasks__empty { padding: var(--space-4); }
|
|
2302
|
+
|
|
2303
|
+
/* AiInsightWidget — sparkles in link colour, evidence numbered, actions left and feedback right */
|
|
2304
|
+
.agn-insight .agn-card__icon { color: var(--link); }
|
|
2305
|
+
.agn-insight .agn-card__title { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
|
|
2306
|
+
.agn-insight__meta { display: inline-flex; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
2307
|
+
.agn-insight__meta > span + span::before { content: '·'; margin-right: var(--space-2); }
|
|
2308
|
+
.agn-insight .agn-card__body { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
2309
|
+
.agn-insight__title { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--text); }
|
|
2310
|
+
.agn-insight__text { font-size: 13px; line-height: 1.55; color: var(--text-2); }
|
|
2311
|
+
.agn-insight__evidence { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-2); }
|
|
2312
|
+
.agn-insight__label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
|
|
2313
|
+
.agn-insight__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
|
|
2314
|
+
.agn-insight__item { display: flex; gap: var(--space-2); align-items: flex-start; }
|
|
2315
|
+
.agn-insight__n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); }
|
|
2316
|
+
.agn-insight__item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--text); }
|
|
2317
|
+
.agn-insight__source { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; font-family: var(--font-mono); font-size: 11px; color: var(--mute); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2318
|
+
a.agn-insight__source { color: var(--link); }
|
|
2319
|
+
a.agn-insight__source:hover { color: var(--link-hover); text-decoration: underline; }
|
|
2320
|
+
.agn-insight__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--line); }
|
|
2321
|
+
.agn-insight__actions { display: flex; gap: var(--space-2); }
|
|
2322
|
+
.agn-insight__feedback { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
|
|
2323
|
+
.agn-insight__ask { margin-right: var(--space-1); font-size: 12px; color: var(--mute); }
|
|
2324
|
+
.agn-insight__thumb--on { background: var(--signal-soft); color: var(--link); }
|
|
2325
|
+
.agn-insight--dismissed .agn-insight__title, .agn-insight--dismissed .agn-insight__text { color: var(--mute); }
|
|
2326
|
+
|
|
2327
|
+
/* FilterBar — one row of controls, a second row of active filters */
|
|
2328
|
+
.agn-filterbar { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
|
|
2329
|
+
.agn-filterbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
|
|
2330
|
+
.agn-filterbar__search { width: 240px; max-width: 100%; flex: 0 1 240px; }
|
|
2331
|
+
.agn-filterbar__spacer { flex: 1; }
|
|
2332
|
+
.agn-filterbar__views { width: 210px; max-width: 100%; margin-left: auto; }
|
|
2333
|
+
.agn-filterbar__active { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-height: 28px; }
|
|
2334
|
+
.agn-filterbar__label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
2335
|
+
.agn-filterbar__active .agn-pill-container { flex: 0 1 auto; }
|
|
2336
|
+
|
|
2337
|
+
/* RecordSummaryWidget — head, key fields, stage path, actions */
|
|
2338
|
+
.agn-record .agn-card__body { display: flex; flex-direction: column; gap: var(--space-4); }
|
|
2339
|
+
.agn-record__head { display: flex; align-items: flex-start; gap: var(--space-3); }
|
|
2340
|
+
.agn-record__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
|
2341
|
+
.agn-record__title { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
|
|
2342
|
+
.agn-record__sub { font-size: 12.5px; color: var(--mute); }
|
|
2343
|
+
.agn-record__side { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
|
|
2344
|
+
.agn-record__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
|
|
2345
|
+
|
|
2346
|
+
/* TeamWorkloadWidget — avatar · who · bar · value · flag */
|
|
2347
|
+
.agn-workload__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
|
|
2348
|
+
.agn-workload__row { display: grid; grid-template-columns: auto minmax(120px, 1fr) minmax(80px, 1.1fr) 92px 112px; align-items: center; gap: var(--space-3); min-height: var(--list-item-h); padding: var(--space-1) 0; }
|
|
2349
|
+
.agn-workload__row + .agn-workload__row { border-top: 1px solid var(--line); }
|
|
2350
|
+
.agn-workload__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
|
|
2351
|
+
.agn-workload__name { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2352
|
+
.agn-workload__name--link { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
|
|
2353
|
+
.agn-workload__name--link:hover { color: var(--link); }
|
|
2354
|
+
.agn-workload__role { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2355
|
+
.agn-workload__value { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); text-align: right; white-space: nowrap; }
|
|
2356
|
+
.agn-workload__flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--warn); white-space: nowrap; }
|
|
2357
|
+
.agn-workload__row--over .agn-workload__value { color: var(--warn); font-weight: 600; }
|
|
2358
|
+
|
|
2359
|
+
/* ActivityWidget — the type filter above the timeline */
|
|
2360
|
+
.agn-activity-w .agn-card__body { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
2361
|
+
.agn-activity-w__filter { overflow-x: auto; margin: 0 calc(-1 * var(--space-1)); padding: 0 var(--space-1) 2px; }
|
|
2362
|
+
|
|
2363
|
+
/* QuickActions — tiles on an auto-fill grid */
|
|
2364
|
+
.agn-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--agn-quick-min, 168px), 1fr)); gap: var(--space-3); }
|
|
2365
|
+
.agn-quick__tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-height: 96px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-enter), background var(--duration-fast) var(--ease-enter); }
|
|
2366
|
+
.agn-quick__tile:hover:not(:disabled) { border-color: var(--edge); background: var(--panel-2); }
|
|
2367
|
+
.agn-quick__tile:disabled { opacity: .5; cursor: not-allowed; }
|
|
2368
|
+
.agn-quick__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); width: 100%; margin-bottom: var(--space-2); }
|
|
2369
|
+
.agn-quick__kbd { margin-left: auto; }
|
|
2370
|
+
.agn-quick__badge { position: absolute; top: var(--space-2); right: var(--space-2); }
|
|
2371
|
+
.agn-quick__kbd + .agn-quick__badge { position: static; }
|
|
2372
|
+
.agn-quick__label { font-size: 13px; font-weight: 600; line-height: 1.3; }
|
|
2373
|
+
.agn-quick__desc { font-size: 12px; line-height: 1.4; color: var(--mute); }
|
|
2374
|
+
.agn-quick-card .agn-quick { gap: var(--space-2); }
|
|
2375
|
+
|
|
2376
|
+
/* NotificationsWidget — the list without its floating frame; head matches the 44px card header */
|
|
2377
|
+
.agn-notifs-w { overflow: hidden; }
|
|
2378
|
+
.agn-notifs-w .agn-notif-list__head { height: 44px; padding: 0 var(--space-3) 0 var(--space-4); }
|
|
2379
|
+
|
|
2380
|
+
/* AgentFlowWidget — a strip of canvas: blocks, edges, a caption under each block */
|
|
2381
|
+
.agn-flow { display: flex; align-items: flex-start; overflow-x: auto; padding: var(--space-5) var(--space-4) var(--space-4); background-color: var(--canvas-bg); background-image: radial-gradient(var(--canvas-grid) 1px, transparent 1px); background-size: 20px 20px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
|
|
2382
|
+
.agn-flow__step { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); flex-shrink: 0; }
|
|
2383
|
+
.agn-flow__edge { flex-shrink: 0; margin-top: 22px; overflow: visible; }
|
|
2384
|
+
.agn-flow__block { min-height: 60px; justify-content: center; }
|
|
2385
|
+
.agn-flow__block .agn-block__kind { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2386
|
+
.agn-flow__block .agn-block__name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; }
|
|
2387
|
+
.agn-flow__block--waiting { border-color: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 45%, transparent); }
|
|
2388
|
+
.agn-flow__block--waiting .agn-block__icon { background: var(--warn-soft); color: var(--warn); }
|
|
2389
|
+
.agn-flow__block--upcoming { border-style: dashed; background: transparent; }
|
|
2390
|
+
.agn-flow__block--upcoming .agn-block__icon { background: var(--panel-2); color: var(--mute); }
|
|
2391
|
+
.agn-flow__block--upcoming .agn-block__name { color: var(--text-2); }
|
|
2392
|
+
.agn-flow__block--done .agn-block__icon { background: var(--ok-soft); color: var(--ok); }
|
|
2393
|
+
.agn-flow__caption { display: inline-flex; align-items: center; gap: 4px; padding-left: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
|
|
2394
|
+
.agn-flow__caption--running { color: var(--link); font-weight: 500; }
|
|
2395
|
+
.agn-flow__caption--error { color: var(--bad); }
|
|
2396
|
+
.agn-flow__caption--waiting { color: var(--warn); }
|
|
2397
|
+
.agn-flow__caption--done { color: var(--text-2); }
|
|
2398
|
+
.agn-flow__spin { animation: agn-spin 1s linear infinite; }
|
|
2399
|
+
.agn-flow__version { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--mute); }
|
|
2400
|
+
|
|
2401
|
+
/* LeaderboardWidget — rank · who · bar + value · change */
|
|
2402
|
+
.agn-leader .agn-card__body { padding-top: var(--space-2); }
|
|
2403
|
+
.agn-leader__head, .agn-leader__row { display: grid; grid-template-columns: 24px minmax(140px, 1.5fr) minmax(110px, 1fr) 64px; align-items: center; gap: var(--space-3); }
|
|
2404
|
+
.agn-leader__head { padding: var(--space-1) 0 var(--space-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
|
|
2405
|
+
.agn-leader__head > span:last-child { text-align: right; }
|
|
2406
|
+
.agn-leader__list { list-style: none; margin: 0; padding: 0; }
|
|
2407
|
+
.agn-leader__row { min-height: var(--list-item-h); padding: var(--space-1) 0; border-bottom: 1px solid var(--line); }
|
|
2408
|
+
.agn-leader__row:last-child { border-bottom: 0; }
|
|
2409
|
+
.agn-leader__row--hl { margin: 0 calc(-1 * var(--space-2)); padding-left: var(--space-2); padding-right: var(--space-2); border-radius: var(--radius-md); background: var(--signal-soft); }
|
|
2410
|
+
.agn-leader__rank { font-family: var(--font-mono); font-size: 12px; color: var(--mute); text-align: center; }
|
|
2411
|
+
.agn-leader__row:nth-child(-n+3) .agn-leader__rank { color: var(--text); font-weight: 600; }
|
|
2412
|
+
.agn-leader__who { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
|
|
2413
|
+
.agn-leader__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
|
|
2414
|
+
.agn-leader__name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2415
|
+
.agn-leader__sub { font-family: var(--font-mono); font-size: 11px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2416
|
+
.agn-leader__measure { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
|
|
2417
|
+
.agn-leader__bar { flex: 1; height: 6px; border-radius: var(--radius-sm); background: var(--panel-3); overflow: hidden; }
|
|
2418
|
+
.agn-leader__fill { display: block; height: 100%; border-radius: var(--radius-sm); background: var(--data-1); opacity: .7; }
|
|
2419
|
+
.agn-leader__row--hl .agn-leader__fill { opacity: 1; }
|
|
2420
|
+
.agn-leader__value { min-width: 64px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-align: right; color: var(--text); }
|
|
2421
|
+
.agn-leader__delta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
|
|
2422
|
+
.agn-leader__delta--ok { color: var(--ok); } .agn-leader__delta--bad { color: var(--bad); } .agn-leader__delta--flat { color: var(--mute); }
|
|
2423
|
+
|
|
2424
|
+
/* AgendaWidget — time rail · tone bar · event · status; the now line in signal */
|
|
2425
|
+
.agn-agenda__date { font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-right: var(--space-1); }
|
|
2426
|
+
.agn-agenda__list { list-style: none; margin: 0; padding: var(--space-2) 0; }
|
|
2427
|
+
.agn-agenda__item { display: grid; grid-template-columns: 48px 3px minmax(0, 1fr) auto; align-items: stretch; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
|
|
2428
|
+
.agn-agenda__time { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--text); }
|
|
2429
|
+
.agn-agenda__end { font-weight: 400; color: var(--mute); }
|
|
2430
|
+
.agn-agenda__bar { border-radius: var(--radius-sm); background: var(--signal); }
|
|
2431
|
+
.agn-agenda__item--ok .agn-agenda__bar { background: var(--ok); }
|
|
2432
|
+
.agn-agenda__item--warn .agn-agenda__bar { background: var(--warn); }
|
|
2433
|
+
.agn-agenda__item--bad .agn-agenda__bar { background: var(--bad); }
|
|
2434
|
+
.agn-agenda__item--info .agn-agenda__bar { background: var(--info); }
|
|
2435
|
+
.agn-agenda__item--neutral .agn-agenda__bar { background: var(--line-3); }
|
|
2436
|
+
.agn-agenda__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
2437
|
+
.agn-agenda__title { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
2438
|
+
.agn-agenda__title--link { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
|
|
2439
|
+
.agn-agenda__title--link:hover { color: var(--link); }
|
|
2440
|
+
.agn-agenda__meta { display: flex; flex-wrap: wrap; gap: 2px var(--space-2); font-size: 12px; color: var(--mute); }
|
|
2441
|
+
.agn-agenda__meta > span + span::before { content: '·'; margin-right: var(--space-2); }
|
|
2442
|
+
.agn-agenda__kind { display: inline-flex; align-items: center; gap: 4px; }
|
|
2443
|
+
.agn-agenda__tenant { font-family: var(--font-mono); font-size: 11px; }
|
|
2444
|
+
.agn-agenda__status { display: flex; align-items: center; }
|
|
2445
|
+
.agn-agenda__done, .agn-agenda__soon { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
|
|
2446
|
+
.agn-agenda__soon { color: var(--link); }
|
|
2447
|
+
.agn-agenda__item--past .agn-agenda__title, .agn-agenda__item--past .agn-agenda__time { color: var(--mute); }
|
|
2448
|
+
.agn-agenda__item--past .agn-agenda__bar { opacity: .4; }
|
|
2449
|
+
.agn-agenda__item--live { background: var(--signal-soft); }
|
|
2450
|
+
.agn-agenda__now { position: relative; display: flex; align-items: center; height: 18px; margin: 0 var(--space-4); }
|
|
2451
|
+
.agn-agenda__now::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--signal); }
|
|
2452
|
+
.agn-agenda__now-label { position: relative; padding: 0 var(--space-2) 0 0; background: var(--panel); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
|
|
2453
|
+
.agn-agenda__empty { padding: var(--space-4); }
|
|
2454
|
+
|
|
2455
|
+
/* OnboardingWidget — the assistant without its own frame; its title steps down to heading size */
|
|
2456
|
+
.agn-onboard .agn-setup__title { font-size: 15px; letter-spacing: -.01em; }
|
|
2457
|
+
|
|
2458
|
+
/* CommentsWidget — scrolling feed, the publisher docked under a hairline */
|
|
2459
|
+
.agn-comments__list { overflow-y: auto; padding: 0 var(--space-4); }
|
|
2460
|
+
.agn-comments__list > .agn-empty { padding: var(--space-4) 0; }
|
|
2461
|
+
.agn-comments__composer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--bg-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
|
|
2462
|
+
.agn-comments__mention { color: var(--link); font-weight: 500; }
|