2328 lines
182 KiB
CSS
2328 lines
182 KiB
CSS
/* magpie — one quiet surface, real logos, controls that read as pop-up buttons. */
|
||
:root {
|
||
--bg: #f4f4f6;
|
||
--card: #ffffff;
|
||
--card-2: #f9f9fb; /* expanded editor */
|
||
--pill: #f1f1f4;
|
||
--pill-hover: #e9e9ee;
|
||
/* the header's view switch: its track and the thumb on the view shown, the
|
||
track a shade deeper than a pill so the white thumb stands off it (#477) */
|
||
--seg-track: #e6e6eb;
|
||
--seg-thumb: var(--card);
|
||
--seg-edge: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .08);
|
||
/* a control's quiet text (the switch's other views, a text button): darker
|
||
than --muted, so it reads at 4.5:1 or better on every surface it sits on */
|
||
--ctl-fg: #63636b;
|
||
--line: #e3e3e8;
|
||
--line-2: #ececf0;
|
||
--fg: #1c1c21;
|
||
--fg-2: #4b4b53;
|
||
--muted: #85858d;
|
||
--faint: #b9b9c2;
|
||
--accent: #4f46e5;
|
||
--accent-soft: #eeedfd;
|
||
--accent-fg: #ffffff;
|
||
--sel: #ecebfb;
|
||
--green: #189a58;
|
||
--green-soft: #e4f6ec;
|
||
--red: #d64545;
|
||
--red-soft: #fbe9e9;
|
||
--amber: #b45309;
|
||
--amber-soft: #fbf0df;
|
||
/* an agent magpie set up that no longer goes through it */
|
||
--drift: #ce2c31;
|
||
--drift-soft: #feebec;
|
||
--pop-bg: rgba(255, 255, 255, .94);
|
||
--shadow: 0 16px 44px rgba(20, 22, 30, .16), 0 2px 8px rgba(20, 22, 30, .06), 0 0 0 .5px rgba(20, 22, 30, .1);
|
||
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
|
||
--code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||
--logo-invert: 0;
|
||
--tk-s: #1a7f45; --tk-k: #7c3aed; --tk-f: #1d4ed8; --tk-n: #b45309; --tk-v: #0e7490; --tk-o: #a21caf; --tk-c: #85858d;
|
||
/* what a chart tells apart: providers, agents, models */
|
||
--c1: #4f46e5; --c2: #0ea5e9; --c3: #10b981; --c4: #f59e0b; --c5: #ec4899; --c6: #8b5cf6; --c7: #64748b;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not([data-theme="light"]) {
|
||
--bg: #1a1a1e;
|
||
--card: #232327;
|
||
--card-2: #1f1f23;
|
||
--pill: #2d2d33;
|
||
--pill-hover: #36363d;
|
||
--seg-track: rgba(255, 255, 255, .035);
|
||
--seg-thumb: rgba(255, 255, 255, .15);
|
||
--seg-edge: inset 0 .5px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .3);
|
||
--line: #333339;
|
||
--line-2: #2c2c32;
|
||
--fg: #ededf1;
|
||
--fg-2: #b9b9c1;
|
||
--muted: #8b8b94;
|
||
--faint: #56565f;
|
||
--ctl-fg: #a1a1aa;
|
||
--accent: #a5b4fc;
|
||
--accent-soft: #2b2c47;
|
||
--accent-fg: #14142a;
|
||
--sel: #33345a;
|
||
--green: #6fd99b;
|
||
--green-soft: #1e3a2b;
|
||
--red: #f28b82;
|
||
--red-soft: #45272a;
|
||
--amber: #f2b544;
|
||
--amber-soft: #3f3220;
|
||
--drift: #ff9592;
|
||
--drift-soft: #3b1219;
|
||
--pop-bg: rgba(38, 38, 43, .96);
|
||
--shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(255, 255, 255, .1);
|
||
--logo-invert: 1;
|
||
--tk-s: #98d8a4; --tk-k: #c4b5fd; --tk-f: #93c5fd; --tk-n: #f2b544; --tk-v: #67e8f9; --tk-o: #f0abfc; --tk-c: #8b8b94;
|
||
--c1: #a5b4fc; --c2: #7dd3fc; --c3: #6ee7b7; --c4: #fcd34d; --c5: #f9a8d4; --c6: #c4b5fd; --c7: #94a3b8;
|
||
}
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--bg: #1a1a1e; --card: #232327; --card-2: #1f1f23; --pill: #2d2d33; --pill-hover: #36363d;
|
||
--seg-track: rgba(255, 255, 255, .035); --seg-thumb: rgba(255, 255, 255, .15); --seg-edge: inset 0 .5px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .3);
|
||
--line: #333339; --line-2: #2c2c32; --fg: #ededf1; --fg-2: #b9b9c1; --muted: #8b8b94; --faint: #56565f; --ctl-fg: #a1a1aa;
|
||
--accent: #a5b4fc; --accent-soft: #2b2c47; --accent-fg: #14142a; --sel: #33345a;
|
||
--green: #6fd99b; --green-soft: #1e3a2b; --red: #f28b82; --red-soft: #45272a; --amber: #f2b544; --amber-soft: #3f3220;
|
||
--drift: #ff9592; --drift-soft: #3b1219;
|
||
--pop-bg: rgba(38, 38, 43, .96);
|
||
--shadow: 0 16px 44px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(255, 255, 255, .1);
|
||
--logo-invert: 1;
|
||
--tk-s: #98d8a4; --tk-k: #c4b5fd; --tk-f: #93c5fd; --tk-n: #f2b544; --tk-v: #67e8f9; --tk-o: #f0abfc; --tk-c: #8b8b94;
|
||
--c1: #a5b4fc; --c2: #7dd3fc; --c3: #6ee7b7; --c4: #fcd34d; --c5: #f9a8d4; --c6: #c4b5fd; --c7: #94a3b8;
|
||
}
|
||
/* Windows' own text faces, and Chinese in YaHei UI, its UI face for it, not
|
||
the webview's fallback; the Mac's and Linux's stack is the one above */
|
||
:root.win { --font: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif; }
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body { height: 100%; }
|
||
body {
|
||
font: 13px/1.4 var(--font);
|
||
color: var(--fg);
|
||
background: var(--bg);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
-webkit-font-smoothing: antialiased;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
cursor: default;
|
||
}
|
||
/* The tray panel sits on a frosted NSVisualEffectView, so its own paint is thin. */
|
||
body.panel { --panel-tint: color-mix(in srgb, var(--bg) 93%, transparent); background: var(--panel-tint); border-radius: 12px; }
|
||
/* on the Mac the panel's colour is painted under the page, where it keeps up
|
||
with the panel as it grows (see tintPanel) */
|
||
body.panel.tinted { background: transparent; }
|
||
.tint-probe { display: none; background: var(--panel-tint); }
|
||
/* on the frosted panel the surfaces are tints of the backdrop, not flat paint */
|
||
@media (prefers-color-scheme: dark) {
|
||
:root:not([data-theme="light"]) body.panel { --bg: #1b1c20; --card: #25262c; --card-2: #212227; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .06); --pill: #2e2f36; --pill-hover: #383942; --pill-line: rgba(255, 255, 255, .11); --pill-shadow: 0 1px 2px rgba(0, 0, 0, .28); --muted: #9c9ca6; --faint: #7c7c87; --card-edge: inset 0 0 0 1px rgba(255, 255, 255, .06); }
|
||
}
|
||
:root[data-theme="dark"] body.panel { --bg: #1b1c20; --card: #25262c; --card-2: #212227; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .06); --pill: #2e2f36; --pill-hover: #383942; --pill-line: rgba(255, 255, 255, .11); --pill-shadow: 0 1px 2px rgba(0, 0, 0, .28); --muted: #9c9ca6; --faint: #7c7c87; --card-edge: inset 0 0 0 1px rgba(255, 255, 255, .06); }
|
||
@media (prefers-color-scheme: light) {
|
||
:root:not([data-theme="dark"]) body.panel { --bg: #f2f2f5; --card: #ffffff; --card-2: #f8f8fa; --line: rgba(0, 0, 0, .07); --line-2: rgba(0, 0, 0, .06); --pill: #ffffff; --pill-hover: #f4f4f7; --skel: #eeeef2; --skel-hi: #e2e2e8; --pill-line: rgba(0, 0, 0, .12); --pill-shadow: 0 1px 1px rgba(0, 0, 0, .06); --faint: #9a9aa3; --card-edge: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04); }
|
||
}
|
||
:root[data-theme="light"] body.panel { --bg: #f2f2f5; --card: #ffffff; --card-2: #f8f8fa; --line: rgba(0, 0, 0, .07); --line-2: rgba(0, 0, 0, .06); --pill: #ffffff; --pill-hover: #f4f4f7; --skel: #eeeef2; --skel-hi: #e2e2e8; --pill-line: rgba(0, 0, 0, .12); --pill-shadow: 0 1px 1px rgba(0, 0, 0, .06); --faint: #9a9aa3; --card-edge: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04); }
|
||
button { font: inherit; color: inherit; background: none; border: 0; cursor: default; appearance: none; -webkit-appearance: none; text-align: center; }
|
||
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
||
input { font: inherit; color: var(--fg); }
|
||
.grow { flex: 1; }
|
||
[hidden] { display: none !important; }
|
||
code { font: 11.5px var(--code); }
|
||
|
||
/* ---- brand icons: colour ones are images, mono ones take the text colour --- */
|
||
/* a box of its own by default: a mask icon has no size to fall back on, and
|
||
one placed where nothing sizes it would otherwise not show at all */
|
||
.ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; }
|
||
.ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
|
||
.ic .mask { width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
|
||
.ic.generic { color: var(--muted); }
|
||
/* a routing group's providers, overlapping discs with the first on top */
|
||
.ic-stack { display: inline-flex; flex: none; align-items: center; }
|
||
.ic-stack .disc { position: relative; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
|
||
.ic-stack .disc + .disc { margin-left: -4px; }
|
||
.ic-stack .disc:nth-child(1) { z-index: 3; }
|
||
.ic-stack .disc:nth-child(2) { z-index: 2; }
|
||
.ic-stack .disc:nth-child(3) { z-index: 1; }
|
||
/* the stack sizes its own icons, whatever sizes the icons around it */
|
||
.ic-stack .disc > .ic { width: 13px !important; height: 13px !important; }
|
||
.ic-stack .more { font-size: 8.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||
.row .field .ic-stack .disc { width: 17px; height: 17px; }
|
||
.row .field .ic-stack .disc > .ic { width: 11px !important; height: 11px !important; }
|
||
.row .field .ic-stack .disc + .disc { margin-left: -4px; }
|
||
.ic.generic svg { width: 100%; height: 100%; }
|
||
|
||
/* ---- header --------------------------------------------------------------- */
|
||
.top { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; height: 46px; flex: none; position: relative; }
|
||
/* the traffic lights centre 25.75pt from the top, not 25; they are the window's, drawn in points, so at a larger text size (--zoom, the page's zoom) the header is that many fewer CSS pixels, still level with them */
|
||
body.window.mac .top { padding-left: calc(96px / var(--zoom, 1)); height: calc(50px / var(--zoom, 1)); padding-top: calc(2px / var(--zoom, 1)); }
|
||
body.window.mac .seg { top: calc(50% + 1px / var(--zoom, 1)); } /* 50% centres in the padding box; the 2px top padding puts the flex row a pixel lower */
|
||
.brand { display: flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: .01em; }
|
||
body.window:not(.mac):not(.linux):not(.web) .brand { display: none; } /* Windows' title bar above already shows the icon and the name; a browser tab has no title bar of the app's */
|
||
/* Linux: the header is the title bar, so it closes the window too — round,
|
||
as GNOME draws its close button, and set a little apart from the icons */
|
||
.icon.winclose { align-self: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; background: var(--pill); color: var(--fg-2); }
|
||
.icon.winclose:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
|
||
/* the magpie flaps, flicks its tail and bobs when the window opens and on
|
||
hover. It moves in pieces cut from the logo, and is drawn whole at rest, so
|
||
the cuts never show. */
|
||
.logo svg { display: block; overflow: visible; }
|
||
.logo .parts, .logo.wag .whole { display: none; }
|
||
.logo.wag .parts { display: inline; }
|
||
.logo .tail { transform-box: view-box; transform-origin: 14px 22px; }
|
||
.logo .wing { transform-box: view-box; transform-origin: 30px 19.8px; }
|
||
.logo .bird { transform-box: view-box; transform-origin: 26px 38px; }
|
||
.logo.wag .tail { animation: tail-flick .9s cubic-bezier(.3, 0, .3, 1); }
|
||
.logo.wag .wing { animation: wing-flap .9s cubic-bezier(.3, 0, .3, 1); }
|
||
.logo.wag .bird { animation: bird-bob .9s cubic-bezier(.3, 0, .3, 1); }
|
||
@keyframes wing-flap {
|
||
0%, 100% { transform: none; }
|
||
12% { transform: rotate(10deg); }
|
||
26% { transform: rotate(-3deg); }
|
||
40% { transform: rotate(8deg); }
|
||
56% { transform: rotate(-2deg); }
|
||
72% { transform: rotate(3deg); }
|
||
}
|
||
@keyframes tail-flick {
|
||
0%, 100% { transform: none; }
|
||
18% { transform: rotate(16deg); }
|
||
36% { transform: rotate(-7deg); }
|
||
54% { transform: rotate(9deg); }
|
||
72% { transform: rotate(-3deg); }
|
||
86% { transform: rotate(2deg); }
|
||
}
|
||
@keyframes bird-bob {
|
||
0%, 100% { transform: none; }
|
||
18% { transform: rotate(-4deg); }
|
||
40% { transform: rotate(2deg); }
|
||
62% { transform: rotate(-1deg); }
|
||
}
|
||
.logo { color: var(--fg); display: inline-flex; } /* ink, like the wordmark; the accent blue fought the text in light mode */
|
||
.seg {
|
||
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
|
||
display: inline-flex; padding: 2px; border-radius: 8px;
|
||
background: var(--seg-track);
|
||
}
|
||
.seg > .thumb { border-radius: 6px; background: var(--seg-thumb); box-shadow: var(--seg-edge); }
|
||
body.panel .seg { display: none; }
|
||
.seg button { position: relative; z-index: 1; white-space: nowrap; height: 24px; padding: 0 12px; border-radius: 6px; font-size: 12.5px; color: var(--ctl-fg); transition: color .18s var(--ease), transform .14s var(--ease); }
|
||
.seg button.on { color: var(--fg); }
|
||
/* a plugin update waiting for the reader: a dot on Plugins */
|
||
.seg button.has-dot::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
|
||
.seg button:hover:not(.on) { color: var(--fg-2); }
|
||
.actions { margin-left: auto; display: flex; gap: 2px; }
|
||
.icon {
|
||
width: 26px; height: 26px; border-radius: 7px;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
color: var(--muted);
|
||
transition: background .12s, color .12s;
|
||
}
|
||
.icon:hover, .icon.on { background: var(--pill); color: var(--fg); }
|
||
/* the icon turns on a layer of its own — painted in place, WebKit leaves
|
||
ghosts of each frame behind (#16) — and always finishes its turn */
|
||
.icon svg { transform-origin: 50% 50%; backface-visibility: hidden; }
|
||
.icon.spin svg { animation: spin .9s linear infinite; will-change: transform; }
|
||
/* a newer magpie is ready: a quiet pill before the header's icons */
|
||
.update {
|
||
align-self: center; display: inline-flex; align-items: center; gap: 4px;
|
||
height: 22px; margin-right: 6px; padding: 0 9px 0 7px; border-radius: 999px;
|
||
font-size: 11.5px; font-weight: 560; letter-spacing: .005em; white-space: nowrap;
|
||
color: var(--accent); background: var(--accent-soft);
|
||
box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--accent) 35%, transparent);
|
||
transition: background .15s, color .15s, transform .12s var(--ease), opacity .15s;
|
||
animation: update-in .45s var(--ease);
|
||
}
|
||
.update[hidden] { display: none; }
|
||
.update:hover { background: var(--accent); color: var(--accent-fg); }
|
||
.update:active { transform: scale(.96); }
|
||
.update.busy { pointer-events: none; opacity: .6; }
|
||
/* its × on the pill's corner, shown while the pointer is over it: hides
|
||
the pill until a newer version is out */
|
||
.update-wrap { position: relative; align-self: center; display: inline-flex; }
|
||
.update-hide {
|
||
position: absolute; top: -5px; right: 3px; width: 14px; height: 14px; border-radius: 50%;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
color: var(--muted); background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.12);
|
||
opacity: 0; pointer-events: none; transition: opacity .12s, color .12s;
|
||
}
|
||
.update-wrap:hover .update-hide { opacity: 1; pointer-events: auto; }
|
||
.update-hide:focus-visible { opacity: 1; pointer-events: auto; } /* its own rule: Safari before 15.4 drops a list holding it */
|
||
.update-hide:hover { color: var(--fg); }
|
||
.update[hidden] + .update-hide, .update.busy + .update-hide { display: none; }
|
||
/* a narrow header (fitTop): the magpie without its name, Update as its arrow,
|
||
the tabs closer together, still in the middle of the window, and only when
|
||
they don't fit there, in the row rather than over it: halfway between what
|
||
is either side of them, not a third of the room their left and two thirds
|
||
their right (#442) */
|
||
.top.tight .brand > span:not(.logo), .top.tight .update span { display: none; }
|
||
.top.tight .update { width: 22px; padding: 0; justify-content: center; margin-right: 4px; }
|
||
body.window .top.inrow .seg { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; } /* relative still: its thumb sits in it, not over the whole header */
|
||
body.window .top.inrow .actions { margin-left: 0; }
|
||
.top.cramped .seg button { padding: 0 8px; }
|
||
.top.crowded .seg button { padding: 0 6px; font-size: 12px; }
|
||
.top.crowded .brand { display: none; }
|
||
.top.packed .seg button { padding: 0 3px; font-size: 11.5px; }
|
||
/* and when even that doesn't fit, the tabs scroll sideways rather than push the page wider */
|
||
.top.packed .seg { min-width: 0; flex: 0 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
|
||
.top.packed .seg::-webkit-scrollbar { display: none; }
|
||
@keyframes update-in { from { opacity: 0; transform: translateY(-3px) scale(.94); } }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
||
/* ---- lists ---------------------------------------------------------------- */
|
||
.view { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 4px; display: flex; flex-direction: column; animation: view-in .24s var(--ease); }
|
||
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
|
||
body.window .view { padding: 2px 16px 8px; }
|
||
.view > .view-room { flex: none; pointer-events: none; } /* see "where the reader is" */
|
||
.view::-webkit-scrollbar { width: 0; }
|
||
/* Windows and Linux draw a classic scrollbar, arrows and all; a thin rounded
|
||
thumb instead, like the overlay one macOS shows (left as it is there) */
|
||
:where(body:not(.mac)) ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
|
||
:where(body:not(.mac)) ::-webkit-scrollbar-thumb { background: var(--faint); border: 3px solid transparent; border-radius: 10px; background-clip: padding-box; }
|
||
:where(body:not(.mac)) ::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
|
||
:where(body:not(.mac)) ::-webkit-scrollbar-button, :where(body:not(.mac)) ::-webkit-scrollbar-corner { display: none; background: transparent; }
|
||
.list { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; flex: none; }
|
||
body.panel .list { border: 0; border-radius: 10px; box-shadow: var(--card-edge); }
|
||
.row { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 5px 9px 5px 11px; }
|
||
body.window .row { min-height: 48px; padding: 7px 12px 7px 14px; gap: 12px; }
|
||
.row + .row, .editor + .row, .row + .editor { border-top: 1px solid var(--line-2); }
|
||
.row .ic { width: 18px; height: 18px; }
|
||
body.window .row .ic { width: 22px; height: 22px; }
|
||
.row .name { font-weight: 500; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
|
||
.row .who { min-width: 0; flex: 1 1 auto; }
|
||
.row .sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
|
||
.empty-state { padding: 36px 20px; text-align: center; color: var(--muted); }
|
||
.empty-state b { display: block; color: var(--fg); font-weight: 500; margin-bottom: 4px; }
|
||
|
||
/* the last row of the list: the agents nothing is set on, folded away */
|
||
.agent-more { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; border: 0; border-top: 1px solid var(--line-2); background: none; font: inherit; font-size: 12px; color: var(--muted); padding: 9px; cursor: pointer; transition: color .2s, background-color .2s; }
|
||
.agent-more:hover { color: var(--fg); background: var(--card-2); }
|
||
.agent-more span { display: inline-flex; }
|
||
.agent-more .chev { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
|
||
.agent-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
|
||
/* the folded agents unroll like a scroll: the height opens on a long ease-out,
|
||
each row settles in a beat after the one above, and the unrolling edge is
|
||
soft while it moves. Rolling up is quicker, bottom row first. */
|
||
.agent-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.4, 0, .2, 1); }
|
||
.agent-fold.open { grid-template-rows: 1fr; transition-duration: .62s; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
|
||
.agent-fold-inner { min-height: 0; overflow: hidden; }
|
||
.agent-fold-inner > .row:first-child { border-top: 1px solid var(--line-2); }
|
||
.agent-fold.moving .agent-fold-inner { -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent); mask-image: linear-gradient(#000 calc(100% - 32px), transparent); }
|
||
.agent-fold .row { opacity: 0; transform: translateY(-10px) scale(.985); transform-origin: 50% 0; transition: opacity .22s ease, transform .32s cubic-bezier(.4, 0, .2, 1); transition-delay: calc((var(--n) - 1 - var(--i)) * 22ms); }
|
||
.agent-fold.open .row { opacity: 1; transform: none; transition: opacity .42s ease, transform .56s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(70ms + var(--i) * 48ms); }
|
||
|
||
/* the logo is the row's handle: hovered, it turns into a grip to drag the row
|
||
by, and a click opens the row's menu (Move up, Move down, Hide). It takes
|
||
no more room than the logo did. */
|
||
.ag-handle { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin: -3px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; cursor: grab; touch-action: none; transition: background-color .15s; }
|
||
body.window .ag-handle { width: 28px; height: 28px; }
|
||
.ag-handle > .ic, .ag-handle > .grip { grid-area: 1 / 1; transition: opacity .15s, transform .2s cubic-bezier(.22, 1, .36, 1); }
|
||
.ag-handle > .grip { display: grid; place-items: center; color: var(--muted); opacity: 0; transform: scale(.8); }
|
||
.ag-handle:hover, .ag-handle.open { background: var(--pill); }
|
||
.ag-handle:focus-visible { background: var(--pill); outline: 1.5px solid var(--fg-2); outline-offset: 0; }
|
||
.agent-fold .ag-handle { cursor: default; }
|
||
#agents > .row .ag-handle:is(:hover, .open) > .ic, #agents > .row.dragging .ag-handle > .ic { opacity: 0; transform: scale(.8); }
|
||
#agents > .row .ag-handle:focus-visible > .ic { opacity: 0; transform: scale(.8); }
|
||
#agents > .row .ag-handle:is(:hover, .open) > .grip, #agents > .row.dragging .ag-handle > .grip { opacity: 1; transform: none; }
|
||
#agents > .row .ag-handle:focus-visible > .grip { opacity: 1; transform: none; }
|
||
/* the logo's grip comes up only on hover, so a row in the list also carries a
|
||
faint one in its left margin, always there, that says the row can be taken
|
||
hold of (#479): it is the handle's own, so a drag or a click on it does what
|
||
the logo does, and it takes no room from the row */
|
||
#agents > .row .ag-handle { position: relative; }
|
||
#agents > .row .ag-handle::before { content: ""; position: absolute; left: -6px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--grip-dot) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; --grip-dot: var(--faint); }
|
||
body.panel #agents > .row .ag-handle::before { left: -9px; }
|
||
#agents > .row:is(:hover, .dragging) .ag-handle::before { --grip-dot: var(--muted); }
|
||
/* one hidden by hand reads as put away, with its way back beside its name */
|
||
.agent-fold .row.put-away .ag-handle > .ic, .agent-fold .row.put-away .name { opacity: .6; }
|
||
.agent-fold .row.put-away .who { display: flex; align-items: center; gap: 8px; }
|
||
/* at the end of the name's column, so it comes up in one place down the rows */
|
||
.agent-fold .row .ag-show { margin-left: auto; }
|
||
.ag-show { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 22px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg-2); font: inherit; font-size: 11.5px; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
|
||
.ag-show:hover { background: var(--pill); color: var(--fg); }
|
||
/* always there, not only under the pointer: it is the way back for a row
|
||
hidden by hand, and has to be seen to be found (#479) */
|
||
.ag-show:focus-visible { outline: 1.5px solid var(--fg-2); outline-offset: 1px; }
|
||
.ag-show svg { color: var(--muted); }
|
||
/* an agent whose config was rewritten since magpie set it: a line under
|
||
its name saying so, and the button that sets it again */
|
||
/* a drifted agent: a coral pill on its name's line — the row keeps its
|
||
height and the pickers their columns */
|
||
.row.drifted .who { display: flex; align-items: center; gap: 7px; }
|
||
.row.drifted .who .name { flex: 0 1 auto; }
|
||
.ag-fix { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 8px 0 6px; border: 0; border-radius: 999px; background: var(--drift-soft); color: var(--drift); font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s, transform .12s; }
|
||
.ag-fix:hover { background: color-mix(in srgb, var(--drift) 16%, var(--drift-soft)); }
|
||
.ag-fix:active { transform: scale(.96); }
|
||
.ag-fix:focus-visible { outline: 1.5px solid var(--drift); outline-offset: 1px; }
|
||
.ag-fix.busy { pointer-events: none; opacity: .7; }
|
||
.ag-fix.busy svg { animation: spin .8s linear infinite; }
|
||
/* the agent's CLI on its name's line (#202): its version faint, and a quiet
|
||
pill that updates it when a newer one is out — the row keeps its height */
|
||
body.window .row.agent .who { display: flex; align-items: center; gap: 7px; container-type: inline-size; }
|
||
/* the name is the last to give way: where the row is tight the update
|
||
pill keeps only its arrow, then the version goes, and only then is the
|
||
name cut (it was "C." beside a full pill at the window's first width) */
|
||
body.window .row.agent .who .name { flex: 0 0 auto; max-width: 100%; }
|
||
body.window .row.agent .who .ag-cli { flex: 0 1 auto; overflow: hidden; }
|
||
@container (max-width: 250px) {
|
||
body.window .row.agent .ag-up { padding: 0 6px; }
|
||
body.window .row.agent .ag-up > span { display: none; }
|
||
}
|
||
@container (max-width: 150px) { body.window .row.agent .ag-ver { display: none; } }
|
||
.ag-cli { display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 0; }
|
||
.ag-cli:empty { display: none; }
|
||
.ag-ver { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; }
|
||
.ag-up { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 8px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg-2); font: inherit; font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, transform .12s; }
|
||
.ag-up:hover { background: var(--pill); color: var(--fg); }
|
||
.ag-up:active { transform: scale(.96); }
|
||
.ag-up:focus-visible { outline: 1.5px solid var(--fg-2); outline-offset: 1px; }
|
||
.ag-up svg { color: var(--muted); }
|
||
.ag-up.busy { pointer-events: none; color: var(--muted); }
|
||
.ag-up.busy svg { animation: spin .8s linear infinite; }
|
||
@media (prefers-reduced-motion: reduce) { .ag-up.busy svg { animation: none; } }
|
||
/* the panel's name column has no room for it: there it is a badge on the
|
||
agent's logo, the name and the columns left as every other row's */
|
||
body.panel .row.drifted { position: relative; }
|
||
body.panel .ag-fix { position: absolute; left: 20px; top: calc(50% + 1px); width: 14px; height: 14px; padding: 0; justify-content: center; background: var(--drift); color: var(--card); box-shadow: 0 0 0 2px var(--card); }
|
||
body.panel .ag-fix:hover { background: var(--drift); filter: brightness(1.08); }
|
||
body.panel .ag-fix svg { width: 9px; height: 9px; }
|
||
body.panel .ag-fix span { display: none; }
|
||
.row.drifted .field[data-key="model"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--drift) 38%, transparent); }
|
||
|
||
/* the line over each kind of folded agent: hidden by hand, or nothing set */
|
||
.agent-fold-cap { padding: 8px 11px 2px; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .02em; border-top: 1px solid var(--line-2); }
|
||
body.window .agent-fold-cap { padding: 10px 14px 3px; }
|
||
.agent-fold-cap + .row { border-top: 0; }
|
||
.agent-fold .agent-fold-cap { opacity: 0; transition: opacity .22s ease; }
|
||
.agent-fold.open .agent-fold-cap { opacity: 1; transition: opacity .42s ease; transition-delay: calc(70ms + var(--i) * 48ms); }
|
||
/* while a row is dragged the others slide out of its way */
|
||
#agents.sorting { user-select: none; -webkit-user-select: none; }
|
||
#agents.sorting > .row { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
|
||
#agents.sorting .ag-handle { cursor: grabbing; }
|
||
#agents > .row.dragging { position: relative; z-index: 2; background: var(--card); box-shadow: 0 6px 18px rgba(20, 22, 30, .12), 0 0 0 1px var(--line); border-radius: 8px; }
|
||
#agents > .row.dragging { transition: none; }
|
||
|
||
.pop.row-menu { width: auto; min-width: 176px; max-height: none; padding: 4px; border: 1px solid var(--line); display: grid; gap: 1px; }
|
||
.row-menu .rm-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--fg); font: inherit; font-size: 12.5px; text-align: left; cursor: default; outline: none; }
|
||
.row-menu .rm-item svg { flex: none; color: var(--muted); }
|
||
.row-menu .rm-item:not(:disabled):is(:hover, :focus) { background: var(--pill); }
|
||
.row-menu .rm-item:disabled, .row-menu .rm-item:disabled svg { color: var(--faint); }
|
||
.row-menu .rm-name { flex: 1; }
|
||
.row-menu .rm-key { margin-left: 14px; font-size: 11px; color: var(--faint); }
|
||
.row-menu .rm-sep { height: 1px; margin: 3px 6px; background: var(--line-2); }
|
||
|
||
/* an agent row: logo, name, then one pop-up button per setting */
|
||
/* two columns: the model, then the smaller setting; single controls sit at the end.
|
||
Fixed widths keep every chevron on the same vertical line down the list. */
|
||
.agent .who { flex: 1 1 auto; }
|
||
/* Two fixed columns: the model (or large model) fills the left, the second
|
||
setting the right, so every chip and its chevron lines up down the list.
|
||
A single control keeps the left column, so the model always sits in the
|
||
same place. */
|
||
.fields { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 5px; width: 350px; flex: none; margin-left: auto; }
|
||
body.panel .fields { width: 272px; grid-template-columns: minmax(0, 1fr) 118px; }
|
||
.field {
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
max-width: 100%; min-width: 0;
|
||
height: 25px; padding: 0 5px 0 8px;
|
||
border-radius: 6px;
|
||
background: var(--pill);
|
||
font-size: 12.5px;
|
||
transition: background .12s, box-shadow .12s;
|
||
}
|
||
/* on the panel a control is a real pop-up button: hairline edge, a breath of shadow */
|
||
body.panel .field { height: 24px; font-size: 12px; box-shadow: inset 0 0 0 1px var(--pill-line), var(--pill-shadow); }
|
||
body.panel .field:hover { box-shadow: inset 0 0 0 1px var(--pill-line), var(--pill-shadow); }
|
||
body.panel .field.open { box-shadow: inset 0 0 0 1px var(--accent), var(--pill-shadow); }
|
||
/* the tray panel keeps control-sized pills: a solo control spans both columns
|
||
and hugs the right — an economy the narrow panel wants */
|
||
/* a field that follows the model unless set: a square in a third column */
|
||
#agents { --extras: 1; --extras-w: calc(var(--extras) * 29px - 5px); }
|
||
#agents.extras .fields { width: calc(355px + var(--extras-w)); grid-template-columns: minmax(0, 1fr) 124px var(--extras-w); }
|
||
/* the panel has no width to give: a second square is taken from the model's
|
||
column, as the names were left three letters when the row grew with it */
|
||
body.panel #agents.extras .fields { width: 301px; grid-template-columns: minmax(0, 1fr) 118px var(--extras-w); }
|
||
.extras-cell { grid-column: 3; display: flex; justify-content: flex-end; gap: 5px; }
|
||
#agents.extras .field.solo { grid-column: 1 / 3; }
|
||
body.window #agents.extras .field.solo { grid-column: 1 / 3; }
|
||
.field.extra { grid-column: 3; width: 24px; padding: 0; justify-content: center; position: relative; color: var(--faint); }
|
||
.field.extra:hover, .field.extra.open { color: var(--fg-2); }
|
||
.field.extra.set { color: var(--fg); }
|
||
.field.extra.set::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
|
||
.field.main, .field.solo { justify-self: end; }
|
||
.field.solo { grid-column: 1 / -1; }
|
||
/* in the window the chips fill their column, so every chip and chevron lines
|
||
up down the list and the model always sits in the same place */
|
||
body.window .field.main, body.window .field.solo { justify-self: stretch; }
|
||
body.window .field.solo { grid-column: auto; }
|
||
/* When a window is narrow (or zoomed in), the fixed-width setting columns
|
||
leave too little room for the agent names. Put them on the next line. */
|
||
@media (max-width: 600px) {
|
||
body.window .row.agent { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; }
|
||
body.window .row.agent > .ag-handle { grid-column: 1; grid-row: 1; }
|
||
body.window .row.agent > .who { grid-column: 2; grid-row: 1; width: 100%; }
|
||
body.window .row.agent > .fields { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; margin-left: 0; }
|
||
body.window #agents.extras .row.agent > .fields { grid-template-columns: minmax(0, 1fr) 124px var(--extras-w); }
|
||
}
|
||
.field:hover, .field.open { background: var(--pill-hover); }
|
||
.field.open { box-shadow: inset 0 0 0 1px var(--accent); }
|
||
.row .field .ic, body.window .row .field .ic { width: 14px; height: 14px; }
|
||
.field .effort-ic { color: var(--fg); }
|
||
.field .effort-ic svg { width: 100%; height: 100%; }
|
||
.field .k { color: var(--faint); font-size: 11.5px; flex: none; }
|
||
.field .v { min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; font-weight: 500; }
|
||
.field .chev { color: var(--faint); display: inline-flex; margin-left: auto; padding-left: 1px; }
|
||
.field:hover .chev, .field.open .chev { color: var(--muted); }
|
||
.field.flash { animation: flash 1.2s ease-out; }
|
||
@keyframes flash { 0%, 35% { box-shadow: inset 0 0 0 1px var(--green); background: var(--green-soft); } 100% {} }
|
||
|
||
/* ---- usage ---------------------------------------------------------------- */
|
||
.usage-head { display: flex; align-items: center; gap: 10px; height: 34px; margin: 4px 0 6px; flex: none; }
|
||
.subscription-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 7px; margin-bottom: 8px; flex: none; }
|
||
.subscription-card { padding: 10px 12px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); min-width: 0; }
|
||
.subscription-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
|
||
.subscription-head .ic { width: 17px; height: 17px; }
|
||
.subscription-head b { font-size: 12.5px; font-weight: 600; }
|
||
.subscription-account { display: flex; align-items: baseline; gap: 7px; margin: 0 0 6px; font-size: 11px; color: var(--fg-2); }
|
||
.subscription-card.several .quota-windows + .subscription-account,
|
||
.subscription-card.several .subscription-error + .subscription-account,
|
||
.subscription-card.several .quota-balance + .subscription-account,
|
||
.subscription-card.several .quota-read + .subscription-account { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
|
||
.subscription-account .user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.subscription-account .plan { margin-left: auto; flex: none; font-size: 10.5px; color: var(--muted); text-transform: capitalize; }
|
||
.subscription-head .plan { margin-left: auto; font-size: 10.5px; color: var(--muted); text-transform: capitalize; }
|
||
.quota-windows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
|
||
/* each window takes two of the grid's rows, its names and its bar, so
|
||
when one's count wraps under its name the bars beside it still line up;
|
||
its one column is the window's width, which a long count would
|
||
otherwise stretch past the card's edge */
|
||
.quota-windows .quota { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
|
||
.quota-windows .quota-track { align-self: start; }
|
||
/* a narrow card puts the count under the window's name rather than
|
||
squeezing the name a character a line and the count past the edge;
|
||
side by side they are at either end, and a count on a line of its own
|
||
starts at the left, under the name */
|
||
.quota-labels { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 6px; margin-bottom: 4px; font-size: 10.5px; color: var(--muted); }
|
||
.quota-labels > span { white-space: nowrap; }
|
||
.quota-labels .quota-n { max-width: 100%; padding: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); font-size: inherit; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||
.quota-labels .quota-n:hover { color: var(--fg); }
|
||
.quota-labels .quota-n > span { white-space: nowrap; }
|
||
/* stacked, a count too long for the window's width breaks at its · */
|
||
.quota-windows.stacked .quota-n { flex-basis: 100%; white-space: normal; }
|
||
.quota-reset { display: flex; flex-wrap: wrap; column-gap: 4px; margin-top: 4px; font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
|
||
.quota-reset > span { white-space: nowrap; }
|
||
.quota-track { height: 4px; border-radius: 2px; background: var(--pill); overflow: hidden; }
|
||
.quota-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
|
||
.subscription-error { font-size: 11px; color: var(--faint); }
|
||
.quota-resets { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
|
||
.quota-resets .text { margin-left: auto; flex: none; font-size: 11px; padding: 2px 7px; }
|
||
.subscription-card.several .quota-resets + .subscription-account { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
|
||
.reset-ask .reset-idle { color: var(--amber); }
|
||
.quota-balance { display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; color: var(--muted); }
|
||
.quota-windows + .quota-balance { margin-top: 9px; }
|
||
/* "Every model" at the end of the account's line, above its families */
|
||
.text.quota-every { flex: none; margin: -2px -7px -2px 0; padding: 1px 7px; font-size: 10.5px; }
|
||
.subscription-account .plan + .quota-every, .subscription-head .plan + .quota-every { margin-left: 4px; }
|
||
.subscription-account .user + .quota-every, .subscription-head .quota-every { margin-left: auto; }
|
||
.quota-balance b { margin-left: auto; font-size: 15px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
|
||
/* a balance field's several amounts (#420): a line each, the label quiet
|
||
at the left and the figure at the right, the first the larger; a
|
||
percent's meter under its line; when it was read under them all */
|
||
.quota-balance { flex-wrap: wrap; }
|
||
.quota-balance.parts { display: grid; gap: 7px; }
|
||
.bal-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; }
|
||
.bal-part > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.bal-part b { font-size: 12.5px; color: var(--fg-2); }
|
||
.bal-part.lead b { font-size: 15px; color: var(--fg); }
|
||
.bal-part .quota-track, .pq-card.bal .quota-track { grid-column: 1 / -1; margin-top: 4px; }
|
||
.quota-track.full i { background: var(--amber); }
|
||
.quota-read { flex-basis: 100%; margin-top: 2px; font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
|
||
.quota-windows + .quota-read, .quota-balance + .quota-read { margin-top: 8px; }
|
||
.quota-read.stale { color: var(--amber); }
|
||
.skeleton { display: block; border-radius: 5px; background: linear-gradient(90deg, var(--skel, var(--pill)) 25%, var(--skel-hi, var(--pill-hover)) 45%, var(--skel, var(--pill)) 65%); background-size: 240% 100%; animation: skeleton-shift 1.4s ease-in-out infinite; }
|
||
@keyframes skeleton-shift { from { background-position: 100% 0; } to { background-position: -100% 0; } }
|
||
.sk-cost { width: 72px; height: 15px; }
|
||
.skeleton-card { min-height: 78px; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
|
||
.sk-title { width: 38%; height: 12px; }
|
||
.sk-line { width: 100%; height: 5px; }
|
||
.sk-line.short { width: 64%; }
|
||
.loading-kpi { min-height: 67px; justify-content: center; gap: 7px; }
|
||
.loading-kpi .sk-number { width: 54%; height: 17px; }
|
||
.loading-kpi .sk-label { width: 36%; height: 8px; }
|
||
#view-usage.loading .opt { cursor: default; }
|
||
.usage-cost { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
|
||
.usage-cost b { font-size: 15px; font-weight: 600; color: var(--fg); }
|
||
/* a narrow window, three tabs and the periods beside it: the words after the
|
||
sum give way, never the page sideways */
|
||
.usage-cost span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
||
@media (max-width: 640px) {
|
||
.usage-head { gap: 7px; }
|
||
.usage-cost span:not(.skeleton) { display: none; }
|
||
.usage-cost b { font-size: 14px; }
|
||
/* and the refresh's picker is its figure alone; where the tabs, the periods and
|
||
these are more than a line, the sum goes on a line of its own, at the right */
|
||
.usage-head { flex-wrap: wrap; height: auto; min-height: 34px; row-gap: 2px; }
|
||
.usage-cost { margin-left: auto; }
|
||
.usage-refresh { margin-right: 0; }
|
||
.usage-refresh .icon { width: 22px; }
|
||
.usage-refresh .sess-pick { padding: 0 7px; }
|
||
.usage-refresh .sess-pick svg { display: none; }
|
||
}
|
||
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; flex: none; }
|
||
.stats.empty { display: block; background: var(--card); }
|
||
.stats .none { padding: 18px 16px; color: var(--muted); text-align: center; line-height: 1.5; }
|
||
.kpi { background: var(--card); padding: 12px 14px 11px; display: flex; flex-direction: column; min-width: 0; }
|
||
.kpi b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
|
||
.kpi span { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
|
||
.kpi small { font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.chart { position: relative; margin-top: 8px; padding: 12px 14px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; flex: none; }
|
||
.chart .peak { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; margin: 0 0 5px; }
|
||
.chart .bars { display: flex; align-items: flex-end; gap: 3px; height: 72px; border-bottom: 1px solid var(--line-2); }
|
||
.chart .bar { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 3px 3px 0 0; overflow: hidden; }
|
||
.chart .bar:hover { background: var(--pill); }
|
||
.chart .bar i { display: block; background: var(--accent); }
|
||
.chart .bar i.in { opacity: .38; }
|
||
.chart .labels { display: flex; gap: 3px; margin-top: 5px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||
.chart .labels span { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: visible; }
|
||
/* the last label can be wider than its bar's column: let it spill left, not off the card */
|
||
.chart .labels span:last-child { display: flex; justify-content: flex-end; }
|
||
.row.stat .who { flex: 0 0 180px; }
|
||
.row.stat .share { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--pill); overflow: hidden; margin: 0 6px; }
|
||
.row.stat .share i { display: block; height: 100%; border-radius: 2px; background: var(--accent); opacity: .7; }
|
||
.row.stat .num { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 64px; font-variant-numeric: tabular-nums; }
|
||
.row.stat .num b { font-weight: 600; }
|
||
.row.stat .num small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
|
||
.row.stat .cost { flex: none; min-width: 58px; text-align: right; color: var(--green); font-variant-numeric: tabular-nums; font-size: 12px; }
|
||
.usage-note { padding: 10px 4px 2px; font-size: 11px; color: var(--faint); user-select: text; -webkit-user-select: text; }
|
||
.usage-pane { display: flex; flex-direction: column; flex: none; }
|
||
.usage-pane[hidden] { display: none; }
|
||
|
||
/* ---- requests, a segment of usage: the ledger ------------------------------ */
|
||
#ledgerPane { min-width: 0; }
|
||
#ledgerPane .sess-tools .segs .opt { height: 22px; }
|
||
#ledExport { flex: none; font-size: 12px; }
|
||
/* the totals and the trend over the requests listed: a strip of four totals,
|
||
then a chart of them by the hour, day or week beside a ranking of who they
|
||
were of — by provider, agent or model — which is also the chart's legend */
|
||
.led-dash { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
|
||
.led-dash[hidden] { display: none; }
|
||
.led-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
|
||
.led-strip .blk { min-width: 0; padding: 11px 15px 10px; }
|
||
.led-strip .blk + .blk { border-left: 1px solid var(--line-2); }
|
||
.led-strip .k { display: block; font-size: 11px; color: var(--muted); }
|
||
.led-strip .v { display: block; margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
|
||
.led-strip .v.cost { color: var(--green); }
|
||
.led-strip .sub { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.led-strip .sub b { font-weight: 600; color: var(--fg-2); }
|
||
.led-strip .meter { height: 5px; margin-top: 8px; border-radius: 3px; background: var(--pill); overflow: hidden; }
|
||
.led-strip .meter i { display: block; height: 100%; border-radius: 3px; background: var(--green); }
|
||
.led-trend { padding: 10px 14px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
|
||
.led-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||
.led-bar .grow { flex: 1; }
|
||
.led-by { font-size: 11.5px; color: var(--muted); }
|
||
.led-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 18px; }
|
||
.led-chart { min-width: 0; }
|
||
.led-chart .plot { position: relative; height: 236px; }
|
||
.led-chart svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--font); font-variant-numeric: tabular-nums; }
|
||
.led-chart .grid { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
|
||
.led-chart .axis { fill: var(--muted); font-size: 10.5px; }
|
||
.led-chart .hot { fill: var(--pill); }
|
||
.led-chart rect.col { transition: opacity .12s; }
|
||
.led-chart .tip { position: absolute; top: 2px; z-index: 2; min-width: 172px; max-width: 260px; padding: 8px 10px 7px; background: var(--pop-bg); border-radius: 9px; box-shadow: var(--shadow); font-size: 11.5px; pointer-events: none; }
|
||
.led-chart .tip[hidden] { display: none; }
|
||
.led-chart .tip b { display: block; margin-bottom: 4px; font-weight: 600; }
|
||
.led-chart .tip div { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
|
||
.led-chart .tip div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.led-chart .tip i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
|
||
.led-chart .tip em { margin-left: auto; padding-left: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
|
||
.led-chart .tip .sum { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line-2); color: var(--muted); }
|
||
.led-chart .none { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); text-align: center; padding: 0 20px; }
|
||
.led-rank { min-width: 0; display: flex; flex-direction: column; gap: 1px; align-content: start; }
|
||
.led-rank .rk { display: block; width: 100%; padding: 6px 8px 7px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
|
||
.led-rank .rk:hover { background: var(--pill); }
|
||
.led-rank .rk.on { background: var(--accent-soft); }
|
||
.led-rank .rk.plain { cursor: default; }
|
||
.led-rank .rk.plain:hover { background: transparent; }
|
||
.led-rank .rk-a { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; }
|
||
.led-rank .rk-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
|
||
.led-rank .rk-a .ic { width: 13px; height: 13px; flex: none; }
|
||
.led-rank .rk-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
|
||
.led-rank .rk-val { margin-left: auto; padding-left: 8px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||
.led-rank .rk-bar { height: 4px; margin: 5px 0 4px 15px; border-radius: 2px; background: var(--pill); overflow: hidden; }
|
||
.led-rank .rk.on .rk-bar { background: var(--card); }
|
||
.led-rank .rk-bar i { display: block; height: 100%; border-radius: 2px; }
|
||
.led-rank .rk-b { margin-left: 15px; font-size: 10.5px; line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||
.led-rank .rk-b .rk-bad { color: var(--red); }
|
||
/* beside the chart, the ranking is as tall as the chart and scrolls in itself,
|
||
however many there are: the chart sizes the row, not the list. No scrollbar,
|
||
as the views have none: the edge with more beyond it fades out instead */
|
||
@media (min-width: 861px) {
|
||
.led-body > .led-rank { height: 0; min-height: 100%; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
|
||
.led-body > .led-rank::-webkit-scrollbar { width: 0; height: 0; }
|
||
.led-body > .led-rank.more-below { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
|
||
.led-body > .led-rank.more-above { -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
|
||
.led-body > .led-rank.more-above.more-below { -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent); }
|
||
/* where the ranking is scrolled to, and that there is more: a slim rail in
|
||
the card's margin beside it, its thumb dragged or the rail clicked */
|
||
.led-rail { position: absolute; right: -9px; width: 5px; border-radius: 3px; background: var(--pill); cursor: default; touch-action: none; }
|
||
.led-rail[hidden] { display: none; }
|
||
.led-rail i { position: absolute; left: 0; top: 0; width: 100%; min-height: 24px; border-radius: 3px; background: var(--faint); opacity: .7; transition: opacity .12s; }
|
||
.led-body:hover .led-rail i, .led-rail.drag i { opacity: 1; }
|
||
.led-rail.drag i, .led-rail i:hover { background: var(--muted); }
|
||
}
|
||
@media (max-width: 860px) {
|
||
.led-body { grid-template-columns: minmax(0, 1fr); gap: 8px; }
|
||
.led-rail { display: none; }
|
||
.led-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.led-strip .blk:nth-child(3) { border-left: 0; }
|
||
.led-strip .blk:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
|
||
}
|
||
.led-sum { margin: 0 2px 7px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||
/* the table scrolls sideways in its own box, never the page */
|
||
.led-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
|
||
.led-wrap.none { overflow: visible; }
|
||
.led-none { padding: 18px 16px; color: var(--muted); text-align: center; line-height: 1.5; }
|
||
.led-sk { padding: 11px 14px; }
|
||
.led-sk + .led-sk { border-top: 1px solid var(--line-2); }
|
||
.led { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
|
||
.led th { padding: 7px 9px 6px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; }
|
||
.led td { padding: 6px 9px; border-top: 1px solid var(--line-2); white-space: nowrap; color: var(--fg); user-select: text; -webkit-user-select: text; }
|
||
.led tbody tr:first-child td { border-top: 0; }
|
||
.led tbody tr:hover td { background: var(--card-2, var(--pill)); }
|
||
.led .n { text-align: right; }
|
||
.led .faint { color: var(--faint); }
|
||
.led .muted { color: var(--muted); }
|
||
.led th, .led .when, .led .model-value { color: var(--fg-2); }
|
||
.led .when .text { padding: 0; font: inherit; }
|
||
.led .when .led-route-link { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
|
||
.led .when .led-route-link:hover { text-decoration-style: solid; }
|
||
#ledRoute { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
|
||
#ledRoute[hidden] { display: none; }
|
||
#ledRouteClear { font-size: 18px; padding: 2px 6px; }
|
||
.led .model, .led .where { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
|
||
.led .where { color: var(--fg-2); }
|
||
.led .where-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.led .source-badges { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 4px; }
|
||
.led .price-reference { font-size: 10px; color: var(--muted); }
|
||
.led .cost { color: var(--green); }
|
||
.led .cost.faint { color: var(--faint); }
|
||
.led .who { display: inline-flex; align-items: center; gap: 6px; }
|
||
.led .who .ic { width: 14px; height: 14px; flex: none; }
|
||
.led .swap { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; color: var(--amber); background: var(--amber-soft); }
|
||
.led .st { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
|
||
.led .st .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
|
||
.led tr.bad .st { color: var(--red); font-weight: 600; }
|
||
.led tr.bad .st .dot { background: var(--red); }
|
||
/* Source chips use identity/channel colors; latency alone uses traffic lights.
|
||
Existing theme tokens keep these legible in both native color schemes. */
|
||
.led .source-badges .src { flex: none; }
|
||
.led .src { --badge-ink: var(--tk-v); --badge-bg: color-mix(in srgb, var(--badge-ink) 10%, var(--card)); display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 550; line-height: 16px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--badge-ink) 19%, transparent); border-radius: 5px; color: var(--badge-ink); background: var(--badge-bg); vertical-align: 1px; }
|
||
.led .src.official { --badge-ink: var(--tk-s); --badge-bg: color-mix(in srgb, var(--badge-ink) 7%, var(--card)); font-size: 9px; font-weight: 650; letter-spacing: .035em; }
|
||
.led .src.official::before { content: ""; width: 6px; height: 3.5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(-45deg); }
|
||
.led .src.access-api { --badge-ink: var(--tk-f); }
|
||
.led .src.access-subscription { --badge-ink: var(--tk-k); }
|
||
.led .duration { font-weight: 550; }
|
||
.led .duration-fast { color: var(--tk-s); }
|
||
.led .duration-slow { color: var(--amber); }
|
||
.led .duration-long { color: var(--red); }
|
||
.led .duration.faint { font-weight: 400; }
|
||
.led tr.led-row { cursor: pointer; }
|
||
.led tr.led-row:focus-visible { outline: 2px solid var(--accent, var(--fg-2)); outline-offset: -2px; }
|
||
.led tr.open td { background: var(--card-2, var(--pill)); }
|
||
.led tr.led-detail td { padding: 0; white-space: normal; background: var(--card-2, var(--pill)); }
|
||
.led-box { position: sticky; left: 0; box-sizing: border-box; width: min(100%, calc(var(--ledw, 720px) - 2px), 900px); padding: 8px 12px 11px; }
|
||
.led-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 11.5px; }
|
||
.led-dl dt { color: var(--muted); }
|
||
.led-dl dd { margin: 0; min-width: 0; color: var(--fg); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
|
||
.led-dl dd.bad { color: var(--red); font-weight: 600; }
|
||
.led-dl dd.said { color: var(--fg); white-space: pre-wrap; }
|
||
.led-dl dd.muted { color: var(--muted); }
|
||
/* what was said in a request, in its details */
|
||
.led-cx { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-2); }
|
||
.cx-sec + .cx-sec { margin-top: 10px; }
|
||
.cx-sec h4 { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
|
||
.cx-part { margin: 0 0 6px; }
|
||
.cx-h { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 10.5px; color: var(--muted); }
|
||
.cx-role { padding: 0 6px; border-radius: 5px; background: var(--pill); font-size: 10.5px; line-height: 16px; color: var(--fg-2); }
|
||
.cx-role.user { color: var(--accent); background: var(--accent-soft); }
|
||
.cx-role.assistant { color: var(--green); background: var(--green-soft); }
|
||
.cx-name { font: 11px var(--code); color: var(--fg-2); }
|
||
.cx-t { margin: 0; padding: 7px 9px; border-radius: 8px; background: var(--card); border: 1px solid var(--line-2); font: 11.5px/1.5 var(--code); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
|
||
.cx-cut { color: var(--muted); font-style: normal; }
|
||
.cx-part.clamp .cx-t { max-height: 176px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
|
||
.cx-more { margin-top: 2px; font-size: 11px; }
|
||
details.cx-part > summary { list-style: none; cursor: pointer; }
|
||
details.cx-part > summary::-webkit-details-marker { display: none; }
|
||
details.cx-part > summary .cx-h { margin-bottom: 0; }
|
||
details.cx-part > summary .cx-h::after { content: "▸"; margin-left: 2px; color: var(--faint); }
|
||
details.cx-part[open] > summary .cx-h::after { content: "▾"; }
|
||
details.cx-part[open] > summary .cx-h { margin-bottom: 2px; }
|
||
.cx-none { margin: 0; font-size: 11.5px; color: var(--muted); }
|
||
.cx-src { margin: 8px 0 0; font-size: 10.5px; color: var(--faint); }
|
||
.led-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||
.led-pager[hidden] { display: none; }
|
||
.led-pager .text { font-size: 12px; }
|
||
|
||
/* ---- sessions, a segment of usage ------------------------------------------ */
|
||
.sess-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex: none; }
|
||
.sess-tools .grow { flex: 1; }
|
||
.sess-filter { width: 220px; max-width: 100%; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 12px; outline: none; }
|
||
.sess-filter:focus { border-color: var(--accent); }
|
||
.sess-tools { flex-wrap: wrap; row-gap: 6px; }
|
||
.sess-pick { flex: none; display: inline-flex; align-items: center; gap: 4px; max-width: 180px; height: 26px; padding: 0 7px 0 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 12px; cursor: default; }
|
||
.sess-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.sess-pick svg { flex: none; opacity: .7; transition: transform .15s var(--ease); }
|
||
.sess-pick:hover { background: var(--pill); }
|
||
.sess-pick.set { color: var(--fg); border-color: var(--line-2); background: var(--pill); }
|
||
.sess-pick.open svg { transform: rotate(180deg); }
|
||
.pop.proto-menu.sess-menu { width: 300px; max-height: min(360px, 70vh); overflow-y: auto; overscroll-behavior: contain; }
|
||
.sess-menu .pm-name, .sess-menu .pm-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.pop.proto-menu.sess-menu { width: 340px; padding-top: 0; display: block; background: var(--card); }
|
||
.sess-menu .sc-top { position: sticky; top: 0; z-index: 1; padding: 4px 0 6px; background: var(--card); }
|
||
.sess-menu .sc-q { display: block; width: 100%; box-sizing: border-box; height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--pill); color: var(--fg); font: inherit; font-size: 12.5px; outline: none; }
|
||
.sess-menu .sc-q:focus { border-color: var(--accent, var(--fg)); }
|
||
.sess-menu .sc-list { display: grid; gap: 1px; }
|
||
.sess-menu .sc-none, .sess-menu .sc-more { padding: 8px 8px 6px; font-size: 11px; color: var(--muted); }
|
||
.sess-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -2px 0 8px; }
|
||
.sess-chart-head .label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
|
||
.sess-chart-head .grow { flex: 1; }
|
||
.sess-chart-head .segs { align-self: center; }
|
||
.sess-chart-head .segs .opt { height: 20px; padding: 0 9px; font-size: 11px; }
|
||
.chart .sess-chart-head .peak { margin: 0; align-self: flex-end; }
|
||
.sess-list { margin-top: 8px; }
|
||
/* the overview: six figures, the calendar, and four cards two by two */
|
||
.sess-pane { container-type: inline-size; }
|
||
.stats.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||
@container (max-width: 820px) { .stats.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||
@container (max-width: 420px) { .stats.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||
.kpi.stale, .sess-card.stale .sess-tops { opacity: .55; transition: opacity .2s; }
|
||
.l0 { background: var(--pill); }
|
||
.l1 { background: color-mix(in srgb, var(--accent) 22%, var(--pill)); }
|
||
.l2 { background: color-mix(in srgb, var(--accent) 45%, var(--pill)); }
|
||
.l3 { background: color-mix(in srgb, var(--accent) 70%, var(--pill)); }
|
||
.l4 { background: var(--accent); }
|
||
.sess-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--faint); }
|
||
.sess-legend i { width: 10px; height: 10px; border-radius: 2.5px; }
|
||
.sess-legend span:first-child { margin-right: 2px; }
|
||
.sess-legend span:last-child { margin-left: 2px; }
|
||
.sess-cal-wrap { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 4px; }
|
||
.sess-cal { flex: 1 1 auto; display: grid; grid-template-rows: auto repeat(7, auto); gap: 3px; min-width: 0; font-size: 10px; color: var(--muted); }
|
||
.sess-cal i { aspect-ratio: 1; border-radius: 3px; min-width: 0; }
|
||
.sess-cal s { aspect-ratio: 1; border-radius: 3px; min-width: 0; background: var(--pill); opacity: .45; }
|
||
.sess-cal i:hover { outline: 1px solid var(--fg-2); outline-offset: -1px; }
|
||
.sess-cal .wd { padding-right: 5px; line-height: 1; align-self: center; white-space: nowrap; }
|
||
.sess-cal .mo { white-space: nowrap; overflow: visible; line-height: 1.2; padding-bottom: 1px; }
|
||
.sess-cal-side { flex: none; display: flex; flex-direction: column; gap: 10px; min-width: 104px; padding-top: 14px; }
|
||
.sess-cal-side .fact { display: flex; flex-direction: column; }
|
||
.sess-cal-side b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
|
||
.sess-cal-side span { font-size: 10.5px; color: var(--muted); }
|
||
.sess-cal-side small { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
|
||
@container (max-width: 560px) { .sess-cal-wrap { flex-direction: column; gap: 10px; } .sess-cal-side { flex-direction: row; flex-wrap: wrap; gap: 16px; padding-top: 0; } }
|
||
.sess-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
|
||
.sess-grid[hidden] { display: none; }
|
||
.sess-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 10px; min-width: 0; display: flex; flex-direction: column; }
|
||
@container (max-width: 700px) { .sess-grid { grid-template-columns: minmax(0, 1fr); } }
|
||
.sess-card-head { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; min-height: 20px; }
|
||
.sess-card-head .label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
|
||
.sess-card-head .grow { flex: 1; }
|
||
.sess-card-head .segs .opt { height: 20px; padding: 0 9px; font-size: 11px; }
|
||
.sess-card-head .tz { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.sess-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--muted); }
|
||
.sess-card-foot .grow { flex: 1; }
|
||
.sess-none { color: var(--faint); font-size: 12px; padding: 18px 0; text-align: center; margin: auto 0; }
|
||
.sess-more { font-size: 11px; color: var(--faint); padding: 4px 2px 0; }
|
||
/* a card of bars is one grid: its names take the width the longest needs
|
||
and the bars what is left, every row's bar starting at the same place;
|
||
a window too narrow for that shortens the names, never a bar past 5em */
|
||
.sess-bars { display: grid; grid-template-columns: minmax(0, max-content) minmax(5em, 1fr) auto 4.2em; column-gap: 10px; row-gap: 1px; }
|
||
.sess-bars.tools { grid-template-columns: minmax(0, max-content) minmax(5em, 1fr) auto auto 2.8em; }
|
||
.sess-bars > * { grid-column: 1 / -1; }
|
||
.sess-bar { display: grid; grid-template-columns: subgrid; align-items: center; gap: 10px; height: 26px; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: 6px; background: none; color: var(--fg-2); font: inherit; font-size: 12px; text-align: left; cursor: default; }
|
||
.sess-bar:hover { background: var(--pill); }
|
||
.sess-bar.on { background: var(--pill); color: var(--fg); font-weight: 550; }
|
||
.sess-bar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.sess-bar .track { height: 6px; border-radius: 3px; background: var(--pill); overflow: hidden; }
|
||
.sess-bar.on .track, .sess-bar:hover .track { background: var(--card); }
|
||
.sess-bar .track i { display: block; height: 100%; border-radius: 3px; background: var(--accent); opacity: .75; }
|
||
.sess-bar .v { font-variant-numeric: tabular-nums; color: var(--fg-2); font-weight: 400; }
|
||
.sess-bar .c { font-variant-numeric: tabular-nums; color: var(--green); text-align: right; font-size: 11.5px; font-weight: 400; }
|
||
.sess-hours { display: grid; grid-template-columns: auto repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 10px; color: var(--muted); }
|
||
.sess-hours i { height: 14px; border-radius: 2.5px; min-width: 0; }
|
||
.sess-hours i:hover { outline: 1px solid var(--fg-2); outline-offset: -1px; }
|
||
.sess-hours .wd { padding-right: 6px; line-height: 14px; white-space: nowrap; }
|
||
.sess-hours .hr { line-height: 1.4; white-space: nowrap; overflow: visible; font-variant-numeric: tabular-nums; }
|
||
.sess-card.wide { grid-column: 1 / -1; }
|
||
.sess-card.stale .sess-shape, .sess-card.stale .sess-tools-cols, .sess-card.stale .sess-skills { opacity: .55; transition: opacity .2s; }
|
||
.sess-shape { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 150px; }
|
||
.sess-shape .col { display: flex; flex-direction: column; align-items: stretch; min-width: 0; gap: 4px; }
|
||
.sess-shape .plot { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--line); }
|
||
.sess-shape .plot b { font-size: 11px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; color: var(--fg-2); }
|
||
.sess-shape .plot b.zero { color: var(--faint); font-weight: 500; }
|
||
.sess-shape .plot i { display: block; margin: 0 14%; border-radius: 5px 5px 0 0; background: color-mix(in srgb, var(--accent) 55%, transparent); transition: height .25s ease, background .15s; }
|
||
.sess-shape .plot i.none { height: 2px; border-radius: 1px; background: var(--line); }
|
||
.sess-shape .col.peak .plot i, .sess-shape .col:hover .plot i:not(.none) { background: var(--accent); }
|
||
.sess-shape .col span { font-size: 10.5px; color: var(--muted); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
|
||
.sess-tools-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
|
||
@container (max-width: 700px) { .sess-tools-cols { grid-template-columns: minmax(0, 1fr); } }
|
||
.sess-bar.tool .n { display: flex; align-items: center; gap: 7px; }
|
||
.sess-bar.tool .n span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
||
.sess-bar.tool .track i { opacity: .85; }
|
||
.sess-bar.tool .s { font-size: 11px; color: var(--muted); white-space: nowrap; }
|
||
.sess-bar.tool .p { font-size: 11px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
|
||
.sess-card .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||
.sess-tools-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
|
||
.sess-mix { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-top: 6px; }
|
||
.sess-mix i { min-width: 3px; }
|
||
.sess-kinds { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--fg-2); }
|
||
.sess-kinds .kind { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||
.sess-kinds .kind b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); }
|
||
.sess-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
|
||
.sess-weeks { display: flex; align-items: flex-end; gap: 3px; height: 72px; }
|
||
.sess-weeks .bar { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
|
||
.sess-weeks .bar:hover { background: var(--pill); border-radius: 3px; }
|
||
.sess-weeks .stack { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 3px; overflow: hidden; }
|
||
.sess-weeks .stack i { min-height: 1px; }
|
||
.sess-weeks-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); }
|
||
.sess-skills { display: grid; grid-template-columns: minmax(0, max-content) minmax(5em, 1fr) auto; column-gap: 10px; row-gap: 2px; }
|
||
.sess-skills > * { grid-column: 1 / -1; }
|
||
.sess-skill { display: grid; grid-template-columns: subgrid; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; min-width: 0; }
|
||
.sess-skill:hover { background: var(--pill); }
|
||
.sess-skill .line, .sess-skill .sub { grid-column: 1 / -1; }
|
||
.sess-skill .line { display: grid; grid-template-columns: subgrid; align-items: center; gap: 10px; font-size: 12px; }
|
||
/* before subgrid (Safari 16) each row is a grid of its own, its name as
|
||
wide as it needs and its bar at least 5em */
|
||
@supports not (grid-template-columns: subgrid) {
|
||
.sess-bar { grid-template-columns: minmax(0, max-content) minmax(5em, 1fr) auto 4.2em; }
|
||
.sess-bar.tool { grid-template-columns: minmax(0, max-content) minmax(5em, 1fr) auto auto 2.8em; }
|
||
.sess-skill { display: block; }
|
||
.sess-skill .line { grid-template-columns: minmax(0, max-content) minmax(5em, 1fr) auto; }
|
||
}
|
||
.sess-skill .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 550; }
|
||
.sess-skill .track { height: 6px; border-radius: 3px; background: var(--pill); overflow: hidden; }
|
||
.sess-skill:hover .track { background: var(--card); }
|
||
.sess-skill .track i { display: block; height: 100%; border-radius: 3px; background: var(--accent); opacity: .75; }
|
||
.sess-skill .v { font-variant-numeric: tabular-nums; color: var(--fg-2); }
|
||
.sess-skill .sub { font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.sess-tops { display: flex; flex-direction: column; margin: 0 -14px -10px; min-height: 0; }
|
||
.row.sess.sess-top { min-height: 40px; gap: 10px; padding: 0 14px; }
|
||
.row.sess.sess-top .who { flex: 1 1 auto; min-width: 0; }
|
||
.row.sess.sess-top .name, .row.sess.sess-top .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.row.sess.sess-top .v { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; }
|
||
.sess-tops .sess-detail { padding-left: 42px; }
|
||
.sess-wait { color: var(--muted); }
|
||
.sess-sk { flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; min-height: 48px; }
|
||
.sess-item + .sess-item { border-top: 1px solid var(--line-2); }
|
||
.sess-item.open { background: color-mix(in srgb, var(--pill) 45%, transparent); }
|
||
.row.sess { cursor: default; min-height: 46px; }
|
||
.row.sess:hover { background: var(--pill); }
|
||
.row.sess .num { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 64px; font-variant-numeric: tabular-nums; }
|
||
.row.sess .num b { font-weight: 600; }
|
||
.row.sess .num small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
|
||
.row.sess .cost { flex: none; min-width: 58px; text-align: right; color: var(--green); font-variant-numeric: tabular-nums; font-size: 12px; }
|
||
.row.sess .cost.none { color: var(--faint); }
|
||
.sess-resume { flex: none; height: 24px; padding: 0 10px; border-radius: 7px; border: 0; background: var(--pill); color: var(--fg); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
|
||
.sess-resume:hover { background: var(--pill-hover); }
|
||
.sess-resume.done { background: var(--green-soft); color: var(--green); }
|
||
.sess-term { flex: none; }
|
||
.sess-detail { display: flex; flex-direction: column; gap: 5px; padding: 2px 12px 11px 38px; font-size: 11.5px; user-select: text; -webkit-user-select: text; }
|
||
.sess-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||
.sess-line .k { flex: 0 0 64px; color: var(--muted); }
|
||
.sess-line .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
|
||
.sess-line code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--code); font-size: 11px; padding: 2px 6px; border-radius: 5px; background: var(--pill); }
|
||
.sess-line .copy { flex: none; }
|
||
.sess-models { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; gap: 3px 12px; margin: 3px 0 2px 72px; font-variant-numeric: tabular-nums; }
|
||
.sess-models .model { font-family: var(--code); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.sess-models .n { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.sess-models .c { text-align: right; color: var(--green); }
|
||
.sess-models .c.none { color: var(--faint); }
|
||
@media (max-width: 560px) {
|
||
.row.sess .num small { display: none; }
|
||
.sess-filter { width: 150px; }
|
||
.sess-models { margin-left: 0; grid-template-columns: minmax(0, 1fr) auto; }
|
||
.sess-models .n { display: none; }
|
||
.sess-detail { padding-left: 12px; }
|
||
}
|
||
|
||
/* ---- the panel's tabs: agents, usage, profiles ---------------------------- */
|
||
/* outside the scrolling page, so they stay put under the header */
|
||
.ptabs { position: relative; display: flex; flex: none; gap: 2px; margin: 0 12px 8px; }
|
||
/* the view scrolls, so it clips at its own top: the card's edge is a ring
|
||
outside its box and needs the 2px the tabs give up to be drawn whole */
|
||
body.panel .view { padding-top: 2px; }
|
||
.ptabs > .thumb { top: 0; bottom: 0; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), var(--card-edge); }
|
||
.ptabs[hidden] { display: none; }
|
||
.ptabs button { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; border-radius: 7px; font-size: 12px; color: var(--muted); transition: color .15s, background-color .15s; }
|
||
.ptabs button:hover:not(.on) { color: var(--fg-2); }
|
||
.ptabs button.on { color: var(--fg); font-weight: 550; }
|
||
.ptabs button[hidden] { display: none; }
|
||
.ptabs em { font-style: normal; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
|
||
body.panel[data-ptab="usage"] :is(#agents, #panelRouting, #panelUsage),
|
||
body.panel[data-ptab="stats"] :is(#agents, #panelRouting, #panelQuota),
|
||
body.panel[data-ptab="routing"] :is(#agents, #panelQuota, #panelUsage),
|
||
body.panel[data-ptab="agents"] :is(#panelQuota, #panelRouting, #panelUsage) { display: none; }
|
||
|
||
/* ---- the panel's agents: one quiet line each, opened in place ------------ */
|
||
/* icon · name · model · effort · chevron, the last three in columns of their
|
||
own so the bars and chevrons line up down the list */
|
||
body.panel .row.agent { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: 36px; align-items: center; column-gap: 10px; row-gap: 0; min-height: 36px; padding: 0 12px; cursor: default; }
|
||
body.panel .row.agent .ag-handle { width: 20px; height: 20px; margin: 0; }
|
||
body.panel .row.agent .ic { width: 18px; height: 18px; }
|
||
body.panel .row.agent .who { display: flex; align-items: center; gap: 6px; min-width: 0; }
|
||
body.panel .row.agent { transition: background-color .3s ease; }
|
||
body.panel .row.agent.open { background: var(--card-2); }
|
||
.ag-sum { display: grid; grid-template-columns: auto 12px 10px; align-items: center; gap: 10px; min-width: 0; max-width: 100%; font-size: 12px; color: var(--muted); }
|
||
.ag-sum .v { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
|
||
.ag-sum .vt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
|
||
/* the logo comes in as its box opens from nothing to its own width (a
|
||
real width, --w, measured on the way in, which every engine lays out
|
||
frame by frame), the words easing aside on the row's spring; the logo
|
||
sits against them, fading and growing in a beat behind, and goes
|
||
first on the way out. The clip is padded past the discs' rings. */
|
||
.ag-sum .mi { display: flex; justify-content: flex-end; align-items: center; flex: none; width: 0; padding: 2px; margin: -2px -2px -2px -2px; overflow: hidden; transition: width .36s var(--row-spring), margin-right .36s var(--row-spring); }
|
||
.ag-sum .mi-in { display: flex; align-items: center; flex: none; width: max-content; opacity: 0; transform: scale(.6); transform-origin: 100% 50%; transition: opacity .14s ease, transform .3s var(--row-spring); }
|
||
.row.agent .ag-sum .mi .ic { width: 14px; height: 14px; }
|
||
.row.agent .ag-sum .mi .ic-stack .disc { width: 16px; height: 16px; }
|
||
.row.agent .ag-sum .mi .ic-stack .disc > .ic { width: 10px !important; height: 10px !important; }
|
||
.row.agent:hover .ag-sum .mi { width: calc(var(--w, 16px) + 4px); margin-right: 4px; transition: width .46s var(--row-spring), margin-right .46s var(--row-spring); }
|
||
.row.agent:hover .ag-sum .mi-in { opacity: 1; transform: none; transition: opacity .28s ease .08s, transform .52s var(--row-spring) .04s; }
|
||
@media (prefers-reduced-motion: reduce) { .ag-sum .mi, .ag-sum .mi-in, .row.agent:hover .ag-sum .mi, .row.agent:hover .ag-sum .mi-in { transition: none; } }
|
||
#addSheet { scroll-margin-top: 12px; }
|
||
.ag-sum .v.empty { color: var(--muted); }
|
||
.ag-sum .chev { display: inline-flex; width: 10px; color: var(--faint); transform: rotate(-90deg); transition: transform .4s var(--row-spring); }
|
||
.row.agent.open .ag-sum .chev { transition-duration: .48s; }
|
||
.row.agent.open .ag-sum .chev { transform: none; }
|
||
.eff { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
|
||
.eff i { width: 2.5px; border-radius: 1px; background: var(--faint); opacity: .45; }
|
||
.eff i:nth-child(1) { height: 4px; }
|
||
.eff i:nth-child(2) { height: 7px; }
|
||
.eff i:nth-child(3) { height: 10px; }
|
||
.eff[data-l="1"] i:nth-child(-n+1), .eff[data-l="2"] i:nth-child(-n+2), .eff[data-l="3"] i { background: var(--fg-2); opacity: 1; }
|
||
/* a row opens on a spring (ROW_OPEN / ROW_CLOSE in app.js, which the
|
||
panel's edge follows): the height sets off gently and settles, and what's
|
||
inside comes down a few px into place as it clears; closing, it lifts
|
||
and is gone before the height is, so nothing is left to smear */
|
||
body.panel { --row-spring: cubic-bezier(.25, .3, .1, 1); }
|
||
.ag-open { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--row-spring), visibility 0s .4s; }
|
||
.row.agent.open .ag-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .48s var(--row-spring); }
|
||
.ag-body { opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .4s var(--row-spring); }
|
||
.row.agent.open .ag-body { opacity: 1; transform: none; transition: opacity .3s ease .06s, transform .48s var(--row-spring); }
|
||
.ag-in { min-height: 0; overflow: hidden; }
|
||
/* the room over the lines is inside what opens: a shut row is 36px, no more */
|
||
.ag-body { display: flex; flex-direction: column; gap: 8px; padding: 9px 0 12px 30px; transform-origin: 50% 0; }
|
||
.ag-open .field { display: flex; justify-content: flex-start; width: 100%; height: 30px; gap: 8px; padding: 0 10px; border-radius: 8px; background: var(--card); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--pill-line); }
|
||
body.panel .ag-open .field:hover { background: var(--card); box-shadow: inset 0 0 0 1px var(--pill-line), var(--pill-shadow); }
|
||
body.panel .ag-open .field.open { box-shadow: inset 0 0 0 1px var(--accent); }
|
||
.ag-open .field .k { order: 0; width: 44px; font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.ag-open .field .v { order: 1; flex: 1 1 auto; font-weight: 400; text-align: left; }
|
||
.ag-open .field > .ic, .ag-open .field > .ic-stack { order: 2; flex: none; }
|
||
.row.agent .ag-open .field .ic { width: 14px; height: 14px; }
|
||
.ag-open .field .chev { order: 3; margin-left: 0; transform: none; }
|
||
.ag-open .effort-control { padding: 2px 4px 0; }
|
||
.eslide { --p: 0; position: relative; height: 20px; cursor: pointer; touch-action: none; outline: none; }
|
||
.eslide .rail { position: absolute; left: 8px; right: 8px; top: 8px; height: 4px; border-radius: 999px; background: var(--line); }
|
||
.eslide .fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--fg); transition: width .26s var(--ease); }
|
||
.eslide .knob { position: absolute; z-index: 4; top: 2px; left: calc(8px + var(--p) * (100% - 16px)); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .22); transition: left .26s var(--ease), transform .14s var(--ease); }
|
||
.eslide:hover .knob { transform: scale(1.08); }
|
||
.eslide.drag .knob { transform: scale(.94); }
|
||
.eslide.drag .knob, .eslide.drag .fill { transition-duration: .14s; }
|
||
.eslide:focus-visible .knob { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .22), 0 0 0 3px var(--accent-soft); }
|
||
@media (prefers-reduced-motion: reduce) { .eslide .knob, .eslide .fill, .ag-open, .ag-body { transition: none; } }
|
||
.ag-open .effort-head { margin-bottom: 4px; }
|
||
.ag-open .effort-head span { font-size: 11px; color: var(--faint); }
|
||
.ag-open .extras-cell { display: flex; justify-content: flex-start; gap: 6px; }
|
||
.ag-open .extras-cell .field { width: 30px; padding: 0; justify-content: center; }
|
||
body.panel .row.agent .ag-fix { left: 21px; top: 22px; }
|
||
body.panel .agent-fold-cap { padding-left: 12px; }
|
||
/* "Show 9 more", the list's last line, where the names start */
|
||
body.panel .agent-more { justify-content: flex-start; gap: 6px; padding: 9px 14px; }
|
||
|
||
/* ---- the panel's profiles: Profiles at the Agents tab's foot, left, opens
|
||
them over the list, upward from it ------------------------------------------ */
|
||
.prof-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: -7px; }
|
||
.prof-btn em { font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }
|
||
.prof-btn[aria-expanded="true"] { color: var(--fg); background: var(--pill-hover); }
|
||
body.panel:not([data-ptab="agents"]) .prof-btn { display: none; }
|
||
body.panel .foot .status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
body.panel .profiles { display: none; }
|
||
/* the chips a line of their own; a name field opened goes beside the button */
|
||
body.panel .profiles.open {
|
||
display: flex; position: fixed; z-index: 30; left: 8px; width: min(360px, calc(100vw - 16px)); min-height: 0;
|
||
flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px; padding: 10px; overflow-y: auto; overscroll-behavior: contain;
|
||
background: var(--pop-bg); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
|
||
border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow);
|
||
transform-origin: 24px bottom; --pop-dy: 6px;
|
||
animation: pop-fade .18s ease-out, pop-in .42s cubic-bezier(.16, 1, .3, 1);
|
||
}
|
||
@media (prefers-reduced-motion: reduce) { body.panel .profiles.open { animation: pop-fade .12s ease-out; } }
|
||
body.panel .profiles > .label { display: block; flex: 1 1 100%; padding: 0 2px; }
|
||
body.panel .profiles .chips { flex: 1 1 100%; flex-wrap: wrap; }
|
||
body.panel .profiles .chips .hint { white-space: normal; line-height: 1.4; padding: 0 4px; color: var(--muted); }
|
||
body.panel .profiles.naming .chips .hint { display: none; }
|
||
body.panel .profiles #save,
|
||
body.panel .profiles > .chip-input { margin: 0; }
|
||
body.panel .profiles #save { height: 25px; } /* the field's: the line keeps its height as it opens */
|
||
|
||
/* ---- the panel's usage tab: accounts under their vendor, windows as rings -- */
|
||
.panel-quota { flex: none; display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 6px; }
|
||
.pq-group { display: flex; flex-direction: column; gap: 8px; }
|
||
.pq-gh { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
|
||
.pq-gh .ic { width: 14px; height: 14px; flex: none; }
|
||
.pq-gn { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
/* how many accounts: a quiet count set by the name, on its cap height */
|
||
.pq-count { flex: none; min-width: 16px; height: 15px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--muted); font-size: 9.5px; font-weight: 600; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
|
||
.pq-gnote { flex: none; margin-left: auto; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
|
||
.pq-gnote.ends { color: var(--amber); }
|
||
/* used or left: a quiet pill at the right, over the rings; lit a moment
|
||
when it turns */
|
||
.pq-mode { flex: none; margin-left: auto; height: 15px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--muted); font-size: 9.5px; font-weight: 600; line-height: 15px; letter-spacing: .04em; text-transform: uppercase; transition: background .12s, color .12s; }
|
||
.pq-mode:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
|
||
.pq-gnote + .pq-mode { margin-left: 0; }
|
||
.pq-mode.flash { animation: pq-mode-flash .9s ease-out; }
|
||
@keyframes pq-mode-flash { 0%, 30% { background: var(--accent-soft); color: var(--accent); } }
|
||
@media (prefers-reduced-motion: reduce) { .pq-mode.flash { animation: none; } }
|
||
.pq-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); }
|
||
.pq-user { font-size: 12.5px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.pq-sub { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
|
||
.pq-sub.err { color: var(--muted); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
||
.pq-rings { grid-row: 1 / 3; grid-column: 2; display: flex; gap: 12px; }
|
||
.pq-ring { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
|
||
.pq-dial { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--fg-2) calc(var(--p) * 1%), color-mix(in srgb, var(--fg) 9%, transparent) 0); }
|
||
.pq-dial b { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: 9.5px; font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
|
||
.pq-ring.full .pq-dial { background: conic-gradient(var(--amber) calc(var(--p) * 1%), color-mix(in srgb, var(--amber) 18%, transparent) 0); }
|
||
.pq-ring.full b { color: var(--fg); }
|
||
.pq-rn { max-width: 44px; font-size: 9.5px; line-height: 1.2; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.pq-rn2 { display: flex; flex-direction: column; align-items: center; }
|
||
.pq-rn2 > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
|
||
/* a Codex account's rate-limit resets, under a hairline across the card */
|
||
.pq-resets { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 5px; padding-top: 7px; border-top: 1px solid var(--line-2); font-size: 11px; font-variant-numeric: tabular-nums; }
|
||
.resets-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.resets-n { color: var(--fg-2); }
|
||
.resets-until { color: var(--faint); }
|
||
.pq-use { margin-left: auto; flex: none; height: 20px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg-2); font-size: 11px; white-space: nowrap; transition: background .12s, color .12s; }
|
||
.pq-use:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }
|
||
/* spending a reset by itself, beside the button that spends one now */
|
||
.pq-use.pq-auto { margin-left: auto; }
|
||
.pq-auto + .pq-use { margin-left: 0; }
|
||
.pq-use.pq-auto.on, .quota-resets .auto-reset.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
|
||
.quota-resets .auto-reset + .text { margin-left: 0; }
|
||
.pq-bals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
|
||
.pq-card.bal { grid-template-columns: minmax(0, 1fr); }
|
||
.pq-bn { display: flex; align-items: center; gap: 6px; }
|
||
.pq-bn > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
||
.pq-bn .ic { width: 14px; height: 14px; flex: none; }
|
||
.pq-amt { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); font-variant-numeric: tabular-nums; }
|
||
/* a balance field's several amounts on a balance's card (#420) */
|
||
.pq-lead { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
|
||
.pq-lead > span { min-width: 0; font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.pq-bp { display: flex; align-items: baseline; gap: 6px; }
|
||
.pq-bp > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
||
.pq-bp > b { margin-left: auto; flex: none; font-weight: 600; color: var(--fg-2); }
|
||
.pq-card.bal .quota-track { margin-top: 0; }
|
||
.pq-asof { color: var(--amber); }
|
||
.pq-card .skeleton.sk-aq { width: 130px; height: 9px; border-radius: 4px; }
|
||
.pq-card .skeleton.sk-ring { width: 34px; height: 34px; border-radius: 50%; }
|
||
/* the panel's footer: a hairline over it, as much room above as below */
|
||
/* even to the eye: the rule above is a pixel of the top's space, and the
|
||
panel's rim takes about one off the bottom's, so 1+5 over, 7 under */
|
||
body.panel .foot { min-height: 0; padding: 5px 8px 7px 14px; border-top: 1px solid var(--line-2); }
|
||
.pq-age { font-size: 12px; color: var(--muted); white-space: nowrap; }
|
||
.pq-age:not([hidden]) + .status:empty { display: none; }
|
||
#view-agents.loading .panel-quota { visibility: hidden; }
|
||
|
||
/* ---- profiles ------------------------------------------------------------- */
|
||
.profiles { display: flex; align-items: center; gap: 10px; padding: 10px 4px 2px; min-height: 36px; flex: none; }
|
||
.profiles .label { flex: none; }
|
||
.profiles .chips { flex: 1 1 0; min-width: 0; padding: 0; min-height: 0; }
|
||
.profiles #save { margin-left: auto; flex: none; }
|
||
.profiles > .chip-input { margin-left: auto; flex: none; }
|
||
.profiles > .chip-input + #save { margin-left: 0; }
|
||
/* switching profile is what the panel is opened for: a target to hit, not a tag */
|
||
.profiles .chips { gap: 8px; }
|
||
.profiles .chip { height: 30px; padding: 0 6px 0 13px; font-size: 13px; }
|
||
.profiles .chip .x { width: 20px; height: 20px; font-size: 13px; }
|
||
.profiles .chips .hint { line-height: 30px; }
|
||
.row-head { display: flex; align-items: center; height: 26px; }
|
||
.label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
|
||
.text { font-size: 12px; color: var(--ctl-fg); padding: 3px 7px; border-radius: 6px; transition: background .12s, color .12s; white-space: nowrap; }
|
||
.text:hover { color: var(--fg); background: var(--pill); }
|
||
.text.action { height: 27px; padding: 0 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg-2); box-shadow: 0 1px 1px rgba(0, 0, 0, .04); display: inline-flex; align-items: center; justify-content: center; }
|
||
.text.action:hover { border-color: var(--muted); background: var(--card-2); color: var(--fg); }
|
||
.text.primary { color: var(--accent-fg); background: var(--accent); font-weight: 500; }
|
||
.text.primary:hover { filter: brightness(1.08); }
|
||
.text.danger:hover { color: var(--red); background: var(--red-soft); }
|
||
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px; min-height: 12px; }
|
||
.chip {
|
||
display: inline-flex; align-items: center; gap: 2px;
|
||
height: 25px; padding: 0 5px 0 10px;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--line);
|
||
background: var(--card);
|
||
font-size: 12px;
|
||
transition: border-color .12s, background .12s, color .12s;
|
||
}
|
||
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
|
||
.chip .lib { width: 5px; height: 5px; margin: 0 2px 0 4px; border-radius: 50%; background: var(--accent); opacity: .7; flex: none; }
|
||
.chip .x { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; opacity: 0; transition: opacity .12s; }
|
||
.chip:hover .x { opacity: .6; }
|
||
.chip .x:hover { opacity: 1; background: rgba(127, 127, 127, .2); }
|
||
.chip .x.arm { width: auto; padding: 0 7px; border-radius: 10px; font-size: 11.5px; opacity: 1; color: var(--red); background: var(--red-soft); white-space: nowrap; }
|
||
.chip .x.arm:hover { background: var(--red-soft); }
|
||
/* a profile's details: what it holds, by agent, and its Apply (#467) */
|
||
.profiles .chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
|
||
.prof-detail {
|
||
flex: 1 1 100%; min-width: 0; box-sizing: border-box; padding: 9px 12px 10px;
|
||
border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 12px;
|
||
}
|
||
.pd-head { display: flex; align-items: center; gap: 10px; }
|
||
.pd-head.pd-foot { margin-top: 10px; }
|
||
body.window .profiles.detailed { align-items: flex-start; }
|
||
body.window .profiles.detailed > .label { line-height: 30px; }
|
||
body.window .profiles.detailed > #save { margin-top: 4px; }
|
||
.pd-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.pd-apply { flex: none; height: 24px; padding: 0 12px; }
|
||
.pd-close { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
|
||
.pd-close:hover { color: var(--fg); background: rgba(127, 127, 127, .15); }
|
||
.pd-agent { margin-top: 9px; }
|
||
.pd-gh { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--fg-2); }
|
||
.pd-gh .ic { width: 14px; height: 14px; flex: none; }
|
||
.pd-gn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.pd-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 4px 0 0 20px; line-height: 1.5; }
|
||
.pd-fields dt { color: var(--muted); }
|
||
.pd-fields dd { margin: 0; min-width: 0; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.pd-fields dd.pd-default, .pd-fields dd.pd-hidden { color: var(--faint); }
|
||
.pd-none { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
|
||
/* its save, update or use on the way (profileAction) */
|
||
.chip.pending { opacity: .55; pointer-events: none; }
|
||
.chip-input {
|
||
height: 25px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--accent);
|
||
background: var(--card); outline: none; width: 140px; font-size: 12px;
|
||
}
|
||
/* its accent border is the focus: the page's focus ring over it doubled it,
|
||
and the panel's list, 2px under the tabs, cut its top off */
|
||
.chip-input:focus-visible { outline: none; }
|
||
.chips .hint { font-size: 11.5px; color: var(--muted); line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
|
||
/* ---- footer --------------------------------------------------------------- */
|
||
.foot { display: flex; align-items: center; gap: 2px; padding: 0 8px 6px 14px; min-height: 28px; flex: none; }
|
||
body.window .foot { padding-left: 18px; }
|
||
.status { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
|
||
.status.ok { color: var(--green); }
|
||
.status.err { color: var(--red); }
|
||
.status.warn { color: var(--amber); }
|
||
/* an outcome (Refresh, Test models…) stands out from the corner it is in:
|
||
a solid pill in its colour, over a window the desktop shows through */
|
||
.status.ok, .status.err, .status.warn { font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, currentColor 16%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); }
|
||
.status.lift { position: fixed; z-index: 21; font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, currentColor 16%, var(--card)); left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100vw - 32px); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent), 0 6px 20px rgba(0, 0, 0, .28); animation: fade-in .2s var(--ease); }
|
||
|
||
/* ---- picker popover ------------------------------------------------------- */
|
||
.pop {
|
||
position: fixed; z-index: 30; /* above the modal (20): a picker opened from the provider editor must show over it */
|
||
width: 320px; max-height: 340px;
|
||
display: flex; flex-direction: column;
|
||
background: var(--pop-bg);
|
||
-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
|
||
border-radius: 11px;
|
||
box-shadow: var(--shadow);
|
||
overflow: hidden;
|
||
/* it grows out of the button it drops from (--ox, its middle), quick to
|
||
answer and a long soft settle with no bounce, the way iOS's menus come;
|
||
it shows at once and fades out ahead of its motion on the way out */
|
||
transform-origin: var(--ox, 24px) top;
|
||
animation: pop-fade .18s ease-out, pop-in .42s cubic-bezier(.16, 1, .3, 1);
|
||
}
|
||
.pop.up { transform-origin: var(--ox, 24px) bottom; --pop-dy: 6px; }
|
||
@keyframes pop-fade { from { opacity: 0; } }
|
||
@keyframes pop-in { from { transform: translateY(var(--pop-dy, -6px)) scale(.94); } }
|
||
/* a closed picker's likeness going: it sinks back toward the button */
|
||
.pop.leaving { pointer-events: none; animation: pop-out .22s cubic-bezier(.4, 0, .7, .2) forwards; }
|
||
@keyframes pop-out { to { opacity: 0; transform: translateY(calc(var(--pop-dy, -6px) * .6)) scale(.96); } }
|
||
@media (prefers-reduced-motion: reduce) { .pop { animation: pop-fade .12s ease-out; } .pop.leaving { animation: none; } }
|
||
.pop .search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line-2); color: var(--faint); }
|
||
.pop input { flex: 1; background: none; border: 0; outline: none; height: 36px; font-size: 13px; }
|
||
.pop input::placeholder { color: var(--faint); }
|
||
.picker-body { display: flex; min-height: 0; flex: 1 1 auto; }
|
||
#pickerRail[hidden] { display: none; }
|
||
#pickerRail { position: relative; width: 43px; padding: 6px 5px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
|
||
/* it draws its own thumb (.rail-thumb) */
|
||
#pickerRail::-webkit-scrollbar { width: 0; height: 0; }
|
||
.rail-thumb { position: absolute; z-index: 0; top: 0; left: 5px; width: 31px; height: 31px; border-radius: 8px; opacity: 0; background: var(--sel); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, .06); pointer-events: none; transition: transform 260ms cubic-bezier(.22, 1, .36, 1), opacity 100ms ease-out; will-change: transform; }
|
||
.rail-item { position: relative; z-index: 1; width: 31px; height: 31px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; transition: color 150ms ease-out, transform 150ms cubic-bezier(.25, 1, .5, 1); }
|
||
.rail-item:hover { color: var(--fg); background: color-mix(in srgb, var(--pill) 68%, transparent); }
|
||
.rail-item:active { transform: scale(.94); }
|
||
.rail-item.on { color: var(--fg); background: transparent; }
|
||
.rail-item .ic { width: 16px; height: 16px; transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
|
||
.rail-item.on .ic { transform: scale(1.04); }
|
||
/* a rail icon's name, drawn beside it (renderPickerRail's showRailTip) */
|
||
.rail-tip { position: fixed; z-index: 31; top: 0; left: 0; transform: translate(-3px, -50%); padding: 3px 8px; border-radius: 6px; background: var(--fg); color: var(--bg); font-size: 11.5px; font-weight: 500; line-height: 16px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; visibility: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: opacity 90ms ease-out, transform 140ms cubic-bezier(.22, 1, .36, 1), visibility 0s 90ms; }
|
||
.rail-tip.left { transform: translate(3px, -50%); }
|
||
.rail-tip.on { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity 90ms ease-out, transform 140ms cubic-bezier(.22, 1, .36, 1); }
|
||
@media (prefers-reduced-motion: reduce) { .rail-tip, .rail-tip.on { transition: none; } }
|
||
.rail-sep { width: 24px; height: 1px; margin: 2px 0; background: var(--line-2); flex: none; }
|
||
.pop ul { list-style: none; overflow-y: auto; padding: 5px; min-width: 0; flex: 1 1 auto; contain: paint; }
|
||
.pop li {
|
||
display: flex; align-items: center; gap: 9px;
|
||
height: 30px; padding: 0 8px; border-radius: 7px;
|
||
white-space: nowrap; font-size: 12.5px;
|
||
}
|
||
.pop li .ic { width: 16px; height: 16px; }
|
||
.pop li .option-words { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; gap: 9px; }
|
||
.pop li .v { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
|
||
.pop li .badge.free, .pop li .badge.ctx { flex: none; margin-left: -4px; padding: 0 4px; font-size: 9px; line-height: 14px; align-self: center; }
|
||
.pop li .n { flex: 1 1 0; min-width: 0; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
|
||
.pop li .favorite { display: none; align-items: center; justify-content: center; color: var(--faint); width: 24px; height: 24px; border-radius: 6px; flex: none; }
|
||
.pop li:hover .favorite, .pop li .favorite.on { display: inline-flex; }
|
||
.pop li .favorite:hover { color: var(--amber); background: var(--pill-hover); }
|
||
.pop li .favorite.on { color: var(--amber); }
|
||
/* not a favourite: an outline star, on hover; a favourite: a filled one, always */
|
||
.pop li .favorite.on path { fill: currentColor; }
|
||
.pop.explained li { height: auto; padding: 7px 8px; white-space: normal; align-items: flex-start; }
|
||
.pop.explained li .option-words { flex-direction: column; align-items: flex-start; gap: 2px; }
|
||
.pop.explained li .n { flex: none; overflow: visible; line-height: 1.4; }
|
||
.pop.model-picker { max-height: 420px; border: 1px solid var(--line); }
|
||
.pop.model-picker .search { min-height: 39px; }
|
||
.pop.model-picker .search input { height: 38px; }
|
||
.pop.model-picker li:not(.group) { height: 34px; padding: 0 8px; }
|
||
.pop.model-picker li .option-words { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 9px; }
|
||
.pop.model-picker li .v { max-width: 62%; font-size: 12.5px; line-height: 18px; flex: 0 1 auto; }
|
||
.pop.model-picker li .n { width: auto; flex: 1 1 0; font-size: 10.5px; line-height: 18px; }
|
||
.pop.model-picker li.group { height: 24px; padding-top: 7px; }
|
||
/* the effort slider: a thin track filled in the text colour up to the
|
||
level, a dot at every stop, the ends named beneath it */
|
||
.pop.effort-picker { max-height: none; border-radius: 12px; }
|
||
.effort-control { padding: 12px 14px 11px; }
|
||
.effort-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 11.5px; }
|
||
.effort-head span { color: var(--muted); }
|
||
.effort-head b { margin-left: auto; color: var(--fg); font-size: 12.5px; font-weight: 600; }
|
||
.effort-track { --fill: 0%; position: relative; height: 20px; }
|
||
.effort-ticks { position: absolute; z-index: 3; left: 8px; right: 8px; top: 8.5px; height: 3px; pointer-events: none; }
|
||
.effort-ticks i { position: absolute; left: calc(var(--at) * 100%); width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--faint); transition: background-color 120ms ease-out; }
|
||
.effort-ticks i.on { background: var(--card); opacity: .7; }
|
||
.effort-ticks i.cur { opacity: 0; }
|
||
.effort-control input[type="range"] { --fill: 0%; position: relative; z-index: 2; display: block; width: 100%; height: 20px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; outline: none; cursor: pointer; }
|
||
.effort-control input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--fg) 0 var(--fill), var(--line) var(--fill) 100%); }
|
||
.effort-control input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; appearance: none; -webkit-appearance: none; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .22); transition: transform 140ms cubic-bezier(.25, 1, .5, 1); }
|
||
.effort-control input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
|
||
.effort-control input[type="range"]:active::-webkit-slider-thumb { transform: scale(.94); }
|
||
.effort-control input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .22), 0 0 0 3px var(--accent-soft); }
|
||
.effort-ends { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10.5px; color: var(--muted); opacity: .8; }
|
||
.pop li.sel { background: var(--sel); }
|
||
.pop li .check { color: var(--accent); display: none; margin-left: auto; flex: none; }
|
||
.pop li.cur .check { display: inline-flex; }
|
||
.pop li.group { height: 22px; padding: 6px 8px 0; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); pointer-events: none; }
|
||
.pop li.group:not(:first-child) { margin-top: 2px; }
|
||
.pop li.reset { margin-bottom: 3px; }
|
||
.pop li.reset .v { color: var(--fg); }
|
||
.pop li.reset .ic { opacity: .75; }
|
||
.pop li.custom .v { color: var(--fg); }
|
||
.pop li.custom .n { color: var(--muted); }
|
||
/* a model kept for routing groups, found by the filter: why it isn't
|
||
offered, and what to do, below the choices */
|
||
.pop li.kept, .pop.model-picker li.kept { height: auto; align-items: flex-start; padding: 8px; margin-top: 3px; border-top: 1px solid var(--line); border-radius: 0; white-space: normal; cursor: default; }
|
||
.pop li.kept .ic { margin-top: 1px; flex: none; }
|
||
.pop li.kept .kept-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
|
||
.pop li.kept .kept-words b { color: var(--fg); font-weight: 500; font-size: 12.5px; }
|
||
.pop li.kept .text.action { flex: none; align-self: center; height: 25px; }
|
||
.model-hint.warn { color: var(--amber); }
|
||
.model-hint .text { margin-left: 4px; }
|
||
.pop .none { padding: 10px 12px; color: var(--muted); font-size: 12px; white-space: normal; line-height: 1.45; }
|
||
.pop.keying .search { border-bottom-color: var(--accent); color: var(--accent); }
|
||
.pop .none b { color: var(--fg); font-weight: 500; }
|
||
|
||
/* ---- gateway page --------------------------------------------------------- */
|
||
/* Loading keeps the final geometry in place, so entering Gateway feels calm
|
||
even while provider discovery and account checks are still running. */
|
||
.pv-sk-row { min-height: 45px; }
|
||
.pv-sk-icon { width: 18px; height: 18px; border-radius: 5px; flex: none; }
|
||
.pv-sk-who { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
|
||
.pv-sk-name { width: 112px; height: 11px; }
|
||
.pv-sk-sub { width: min(260px, 64%); height: 8px; }
|
||
.pv-sk-key { width: 64px; height: 18px; border-radius: 9px; flex: none; }
|
||
#view-providers.loading .after-list { visibility: hidden; }
|
||
/* the agents' rows while they are first read: the icon, the name and the two setting columns */
|
||
.ag-sk-icon { width: 18px; height: 18px; border-radius: 5px; flex: none; }
|
||
body.window .ag-sk-icon { width: 22px; height: 22px; border-radius: 6px; }
|
||
.ag-sk-name { width: 92px; height: 11px; }
|
||
.ag-sk-field { height: 25px; border-radius: 6px; }
|
||
.ag-sk-row:nth-child(2n) .ag-sk-name { width: 64px; }
|
||
.ag-sk-row:nth-child(3n) .ag-sk-name { width: 78px; }
|
||
/* the panel's rows: what is set, as words at the right, then its bars and chevron */
|
||
.ag-sk-sum { display: flex; align-items: center; gap: 10px; }
|
||
.ag-sk-value { width: 96px; height: 10px; }
|
||
.ag-sk-row:nth-child(2n) .ag-sk-value { width: 124px; }
|
||
.ag-sk-row:nth-child(3n) .ag-sk-value { width: 72px; }
|
||
.ag-sk-bars { width: 13px; height: 12px; border-radius: 3px; margin-right: 20px; }
|
||
#view-agents.loading .profiles { visibility: hidden; }
|
||
.gw-sk-dot { width: 8px; height: 8px; margin: 0 7px; border-radius: 50%; flex: none; }
|
||
.gw-sk-who { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
|
||
.gw-sk-title { width: 118px; height: 12px; }
|
||
.gw-sk-sub { width: min(330px, 72%); height: 8px; }
|
||
.gw-sk-url { width: 154px; height: 24px; border-radius: 6px; flex: none; }
|
||
.gw-sk-label { width: 46px; height: 8px; align-self: center; justify-self: end; }
|
||
.gw-sk-field { min-height: 30px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
|
||
.gw-sk-field .skeleton { width: min(310px, 72%); height: 10px; }
|
||
.gw-sk-field .skeleton.short { width: min(210px, 48%); height: 7px; }
|
||
.gw-sk-row { pointer-events: none; }
|
||
.gw-sk-model { width: 190px; height: 10px; }
|
||
.gw-sk-provider { width: 82px; height: 9px; }
|
||
.gw-sk-call { cursor: default; pointer-events: none; }
|
||
.gw-sk-call .skeleton { height: 8px; }
|
||
.gw-sk-call .time { width: 54px; }
|
||
.gw-sk-call .agent { width: 62px; }
|
||
.gw-sk-call .model { width: 150px; }
|
||
.gw-sk-call .result { width: 68px; }
|
||
/* the status card: a dot where the logo would be, the URL as a pill */
|
||
.gwcard { margin: 4px 0 2px; }
|
||
.gw .dot { width: 8px; height: 8px; margin: 0 7px; border-radius: 50%; background: var(--amber); flex: none; box-shadow: 0 0 0 3px var(--amber-soft); }
|
||
.gw .dot.on { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
|
||
.gw .who { flex: 1 1 auto; }
|
||
.gw .name .state { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--green); }
|
||
.gw .dot:not(.on) ~ .who .state { color: var(--amber); }
|
||
.gw .url { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--pill); box-shadow: inset 0 0 0 1px var(--line-2); flex: none; transition: background .12s, box-shadow .12s; }
|
||
.gw .url:hover { background: var(--pill-hover); box-shadow: inset 0 0 0 1px var(--line); }
|
||
.gw .url code { color: var(--fg-2); font-size: 11px; }
|
||
.gw .url:hover code { color: var(--fg); }
|
||
#view-gateway .row-head, #view-usage .row-head { margin: 14px 0 6px; padding: 0 2px; }
|
||
#view-usage .row-head.quota-head { margin: 6px 0 6px; }
|
||
#view-gateway .row-head .note { font-size: 11px; color: var(--faint); }
|
||
/* providers switched off, folded below the ones on */
|
||
#view-providers .off-head { margin: 14px 0 6px; padding: 0 2px; flex: none; }
|
||
#view-providers .off-head .note { font-size: 11px; color: var(--faint); }
|
||
/* the Models head folds the list away: a chevron, the label, how many */
|
||
.fold { display: inline-flex; align-items: center; gap: 5px; margin-left: -4px; padding: 3px 6px 3px 4px; border-radius: 6px; color: var(--faint); transition: background .12s, color .12s; }
|
||
.fold:hover { background: var(--pill); color: var(--muted); }
|
||
.fold svg { flex: none; transform: rotate(90deg); transition: transform .15s ease-out; }
|
||
.fold[aria-expanded="false"] svg { transform: none; }
|
||
.fold .note { font-variant-numeric: tabular-nums; }
|
||
/* Connect folded: the base URL stays in its head, to copy */
|
||
#connectNote.brief { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
|
||
#connectNote.brief code { font-size: 11px; color: var(--fg-2); user-select: text; -webkit-user-select: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
#connectNote.brief .copy { width: 20px; height: 20px; }
|
||
|
||
/* the connect card: label column, then the value with a copy button */
|
||
.connect { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px 14px; align-items: start; padding: 12px 14px 14px; }
|
||
.connect > div { min-width: 0; }
|
||
.connect label { font-size: 12px; color: var(--muted); text-align: right; padding-top: 4px; }
|
||
.connect .hint { font-size: 11px; color: var(--faint); margin-top: 4px; line-height: 1.4; }
|
||
.connect .val { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 9px; border-radius: 7px; background: var(--pill); box-shadow: inset 0 0 0 1px var(--line-2); max-width: 100%; }
|
||
.connect .val code { font-size: 12px; color: var(--fg); user-select: text; -webkit-user-select: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.connect .val > .val { min-width: 0; height: auto; padding: 0; background: none; box-shadow: none; }
|
||
.connect .segs { margin-top: -1px; }
|
||
.connect .stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
|
||
@media (max-width: 520px) {
|
||
.connect { grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; padding-left: 10px; padding-right: 10px; }
|
||
}
|
||
.copy { width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; transition: background .12s, color .12s; }
|
||
.copy:hover { background: var(--pill-hover); color: var(--fg); }
|
||
.copy.done { color: var(--green); background: var(--green-soft); animation: copy-pop .36s var(--ease); }
|
||
@keyframes copy-pop { 0% { transform: scale(.55); } 55% { transform: scale(1.16); } 100% { transform: scale(1); } }
|
||
.snip-wrap { position: relative; min-width: 0; }
|
||
.snip { margin: 0; padding: 10px 40px 10px 12px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); overflow-x: auto; line-height: 1.55; }
|
||
.snip code { font-size: 11.5px; color: var(--fg); white-space: pre; user-select: text; -webkit-user-select: text; }
|
||
.snip-wrap > .copy { position: absolute; top: 6px; right: 6px; background: var(--card); }
|
||
.snip-wrap > .copy:hover { background: var(--pill-hover); }
|
||
.snip-wrap > .copy.done { background: var(--green-soft); }
|
||
.tk-s { color: var(--tk-s); } .tk-k { color: var(--tk-k); } .tk-f { color: var(--tk-f); } .tk-n { color: var(--tk-n); }
|
||
.tk-v { color: var(--tk-v); } .tk-o { color: var(--tk-o); } .tk-c { color: var(--tk-c); font-style: italic; }
|
||
.snip::-webkit-scrollbar { height: 0; }
|
||
|
||
/* the model list: id first, the human name and vendor under it */
|
||
.row.model { min-height: 40px; cursor: default; }
|
||
.row.model:hover { background: var(--card-2); }
|
||
.row.model.selected { background: var(--sel); }
|
||
.row.model .name { font: 12px var(--code); }
|
||
.row.model .copy { opacity: 0; }
|
||
.row.model:hover .copy, .row.model.selected .copy { opacity: 1; }
|
||
.row.model .copy.done { opacity: 1; }
|
||
|
||
/* recent calls */
|
||
.activity { padding: 5px 8px 6px; font-size: 11.5px; }
|
||
.activity .none { padding: 8px 6px; color: var(--muted); line-height: 1.45; }
|
||
.call-item + .call-item { border-top: 1px solid transparent; }
|
||
.call-item.open { margin: 2px 0 5px; border-radius: 8px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
|
||
.call { display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 6px; border-radius: 6px; white-space: nowrap; cursor: pointer; outline: none; }
|
||
.call:hover { background: var(--pill); }
|
||
.call:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px var(--accent-soft); }
|
||
.call-chev { width: 10px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); flex: none; transition: transform .15s ease-out, color .12s; }
|
||
.call:hover .call-chev { color: var(--muted); }
|
||
.call-item.open .call-chev { transform: rotate(90deg); }
|
||
.call .when { color: var(--faint); font-variant-numeric: tabular-nums; }
|
||
.call .a { color: var(--fg-2); flex: 0 0 auto; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
|
||
.call .m { font-family: var(--code); font-size: 11px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
|
||
.call .p { color: var(--muted); }
|
||
.call .st { color: var(--green); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
|
||
.call-item.bad .st { color: var(--red); }
|
||
.call-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; border-top: 1px solid var(--line-2); background: var(--line-2); }
|
||
.call-body { min-width: 0; background: var(--card); }
|
||
.call-body-head { height: 29px; padding: 0 8px 0 10px; display: flex; align-items: center; gap: 7px; color: var(--muted); }
|
||
.call-body-label { font-size: 10.5px; font-weight: 600; letter-spacing: .015em; }
|
||
.call-body-truncated { font-size: 9.5px; color: var(--amber); }
|
||
.call-body .copy { width: 20px; height: 20px; }
|
||
.call-body pre { margin: 0; padding: 9px 10px 11px; min-height: 54px; max-height: 280px; overflow: auto; border-top: 1px solid var(--line-2); background: var(--code-bg, var(--card-2)); }
|
||
.call-body code { display: block; font: 10.5px/1.5 var(--code); color: var(--fg-2); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; tab-size: 2; }
|
||
.call-body code.empty { color: var(--faint); font-family: var(--font); }
|
||
@media (max-width: 760px) { .call-details { grid-template-columns: 1fr; } }
|
||
/* a call the request archive kept: read back under the bodies, the whole width */
|
||
.call-archive { grid-column: 1 / -1; min-width: 0; background: var(--card); }
|
||
.call-archive-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px var(--code); color: var(--faint); }
|
||
.call-archive .call-body-head button.text { flex: none; }
|
||
.call-archive-err { padding: 0 10px 9px; font-size: 11px; color: var(--red); overflow-wrap: anywhere; }
|
||
.call-archive-big { margin: 0; padding: 9px 10px 11px; border-top: 1px solid var(--line-2); font-size: 11px; color: var(--muted); }
|
||
/* a request's row on the Usage page: its archive under what is known of it */
|
||
.led-archive { margin-top: 10px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
|
||
.led-archive .call-details { grid-template-columns: minmax(0, 1fr); }
|
||
#archiveList { margin-bottom: 8px; }
|
||
/* a streamed reply: read as its reply, its events or as it came */
|
||
.call-body-count { font-size: 9.5px; color: var(--faint); white-space: nowrap; }
|
||
.call-body-head .sse-views { align-self: center; padding: 1.5px; border-radius: 6px; }
|
||
.call-body-head .sse-views .opt { height: 19px; padding: 0 8px; font-size: 10.5px; }
|
||
.call-body-head .sse-views .thumb { top: 1.5px; bottom: 1.5px; }
|
||
.sse-ev { display: block; }
|
||
.sse-ev + .sse-ev { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-2); }
|
||
.sse-name { color: var(--muted); }
|
||
.call-body-foot { height: 27px; padding: 0 6px 0 10px; display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--line-2); font-size: 10.5px; color: var(--muted); }
|
||
.call-body-foot[hidden] { display: none; }
|
||
.call-body-foot .link { font-size: 11px; }
|
||
|
||
/* ---- providers page ------------------------------------------------------- */
|
||
.provider .chev { color: var(--faint); display: inline-flex; transition: transform .15s; }
|
||
.provider.selected .chev { transform: rotate(90deg); }
|
||
/* a provider row: logo, name, the agents on it, key status */
|
||
.provider .who { flex: 1 1 auto; }
|
||
.provider .name .badge { margin-left: 6px; }
|
||
.badge { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: var(--amber-soft); color: var(--amber); vertical-align: 1px; }
|
||
.provider.selected { background: var(--card-2); }
|
||
/* switched off (#163): kept, dimmed, and said so by its name */
|
||
.provider.off > .ic, .provider.off .who .sub, .provider.off .uses, .provider.off .key { opacity: .45; }
|
||
.provider.off .name { color: var(--muted); }
|
||
.badge.off { background: var(--pill); color: var(--muted); }
|
||
.badge.free { background: var(--green-soft); color: var(--green); }
|
||
/* a model's context, when it is a large one: grey, as it is a fact, not a warning */
|
||
.badge.ctx { background: var(--pill); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); letter-spacing: .02em; }
|
||
.mchip .badge { margin: 0 -3px 0 1px; padding: 0 4px; font-size: 9px; line-height: 14px; }
|
||
.row.model .name .badge { margin-left: 6px; padding: 0 4px; font: 600 9px/14px var(--font); }
|
||
.provider .pswitch { margin-left: 8px; }
|
||
.editor .off-note { grid-column: 1 / -1; }
|
||
.uses { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
|
||
.use {
|
||
width: 26px; height: 26px; border-radius: 8px;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
background: var(--pill); box-shadow: inset 0 0 0 1px var(--line-2);
|
||
transition: background .12s, box-shadow .12s, color .12s;
|
||
}
|
||
.use .ic { width: 16px; height: 16px; }
|
||
.use:hover, .use.open { background: var(--pill-hover); box-shadow: inset 0 0 0 1px var(--line); }
|
||
.use.open { box-shadow: inset 0 0 0 1px var(--accent); }
|
||
.use.add { background: none; box-shadow: none; border: 1px dashed var(--line); color: var(--faint); }
|
||
.use.add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
|
||
.key { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font: 11px var(--code); color: var(--muted); white-space: nowrap; flex: none; margin-left: 4px; width: 128px; overflow: hidden; font-variant-numeric: tabular-nums; }
|
||
.key::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
|
||
.key > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
|
||
.key.free { font-family: var(--font); color: var(--faint); }
|
||
.key.free::before { background: var(--faint); }
|
||
.key.none { font-family: var(--font); color: var(--amber); background: var(--amber-soft); }
|
||
.key.none::before { background: var(--amber); }
|
||
.key.acct { font-family: var(--font); }
|
||
.acct { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 12.5px; }
|
||
.acct .n { font-weight: 500; }
|
||
.acct .plan { color: var(--muted); font-size: 11.5px; padding: 1px 6px; border-radius: 5px; background: var(--pill-hover); }
|
||
/* a subscription's accounts: the one in use first, a way to add another */
|
||
.accts { display: grid; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
|
||
.acc { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 5px 8px 5px 11px; font-size: 12.5px; text-align: left; }
|
||
.acc + .acc, .accts .signing { border-top: 1px solid var(--line-2); }
|
||
.acc .n { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.acc .plan { color: var(--muted); font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--pill); white-space: nowrap; }
|
||
.acc .grow { flex: 1; }
|
||
.acc .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--faint); color: var(--muted); }
|
||
.acc.in-use .dot { background: var(--fg); box-shadow: none; color: var(--card); }
|
||
.acc .using { font-size: 11px; color: var(--fg-2); padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
|
||
.acc .text.quiet { opacity: 0; transition: opacity .15s; }
|
||
.acc:hover .text.quiet { opacity: 1; }
|
||
.acc .text.quiet:focus-visible { opacity: 1; }
|
||
.acc.new { animation: sub-in .5s cubic-bezier(.2, .8, .2, 1); }
|
||
.acc.new .dot { animation: copy-pop .45s cubic-bezier(.2, .8, .2, 1); }
|
||
@keyframes sub-in { from { opacity: 0; transform: translateY(-4px); background: var(--pill-hover); } }
|
||
.acc.add { width: 100%; color: var(--fg-2); background: none; border: 0 solid var(--line-2); cursor: default; }
|
||
.acc + .acc.add { border-top-width: 1px; }
|
||
.acc.add .dot { box-shadow: inset 0 0 0 1.5px var(--faint); border-radius: 50%; }
|
||
.acc.add .n { font-weight: 450; }
|
||
.acc.add:hover { background: var(--card-2); color: var(--fg); }
|
||
.acc.add:hover .dot { box-shadow: inset 0 0 0 1.5px var(--fg); color: var(--fg); }
|
||
|
||
.acc .rename { font: inherit; font-weight: 500; color: inherit; background: none; border: 0; padding: 0; cursor: text; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.acc .rename:hover { text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }
|
||
.acc .dot.tick { padding: 0; border: 0; background: none; cursor: default; transition: background .15s, box-shadow .15s; }
|
||
.acc .dot.tick:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
|
||
.acc.in-use .dot.tick { background: var(--fg); }
|
||
.acc.off .n, .acc.off .plan { opacity: .55; }
|
||
.acc .rename.mono { font-family: var(--code); font-size: 11.5px; font-weight: 450; }
|
||
.acc .rename-in { height: 24px; padding: 0 7px; font-size: 12.5px; max-width: 220px; }
|
||
.acc .plan.mono { font-family: var(--code); font-size: 10.5px; }
|
||
.acc.adding { display: grid; gap: 8px; padding: 10px 10px 8px 11px; background: var(--card-2); }
|
||
.acc.adding .kf { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px; }
|
||
.acc.adding .kb { display: flex; align-items: center; gap: 4px; }
|
||
.acc.adding .kb .grow { flex: 1; }
|
||
.acc + .acc.adding { border-top: 1px solid var(--line-2); }
|
||
@media (max-width: 520px) { .acc.adding .kf { grid-template-columns: 1fr; } }
|
||
.acc .proto { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 5px 0 7px; font: inherit; font-size: 11px; color: var(--muted); border: 0; border-radius: 5px; background: var(--pill); white-space: nowrap; cursor: default; transition: opacity .15s, background .12s, color .12s; }
|
||
.acc .proto svg { opacity: .7; transition: transform .15s var(--ease); }
|
||
.acc .proto.open svg { transform: rotate(180deg); }
|
||
.acc .proto:not(.set) { opacity: 0; background: none; box-shadow: inset 0 0 0 1px var(--line); }
|
||
.acc:hover .proto, .acc .proto.open, .acc.adding .proto { opacity: 1; }
|
||
.acc .proto:focus-visible { opacity: 1; }
|
||
.acc .proto.set { color: var(--fg-2); }
|
||
.acc .proto:hover, .acc .proto.open { color: var(--fg); background: var(--pill-hover); }
|
||
/* an account's or key's own models (#474): a badge like the key's protocol,
|
||
shown always once it keeps some only, and its picker under the row */
|
||
.acc .amodels { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; font: inherit; font-size: 11px; color: var(--muted); border: 0; border-radius: 5px; background: var(--pill); white-space: nowrap; cursor: default; transition: opacity .15s, background .12s, color .12s; }
|
||
.acc .amodels:not(.set) { opacity: 0; background: none; box-shadow: inset 0 0 0 1px var(--line); }
|
||
.acc:hover .amodels, .acc .amodels.open { opacity: 1; }
|
||
.acc .amodels:focus-visible { opacity: 1; }
|
||
.acc .amodels.set { color: var(--accent); background: var(--accent-soft); font-weight: 500; }
|
||
.acc .amodels:hover, .acc .amodels.open { color: var(--fg); background: var(--pill-hover); }
|
||
.accts .acc.with-am { flex-wrap: wrap; row-gap: 3px; }
|
||
.acc .acct-models { flex-basis: 100%; display: grid; gap: 7px; padding: 6px 0 2px 25px; cursor: auto; }
|
||
.acc .acct-models .acm-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||
.acc .acct-models .hint { font-size: 11px; color: var(--muted); line-height: 1.4; flex: 1 1 220px; }
|
||
.acc .acct-models .acm-foot .grow { flex: 0 0 0; }
|
||
.acc .n, .acc .rename { flex: 0 1 auto; }
|
||
.acc .plan { flex: none; }
|
||
#gatewayKeys .acc { min-width: 0; }
|
||
#gatewayKeys .acc .plan { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
||
/* the Settings row's picker: the key row's badge, always shown */
|
||
.row.pref .proto.pick { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 6px 0 9px; font: inherit; font-size: 12px; color: var(--fg-2); border: 0; border-radius: 7px; background: var(--pill); white-space: nowrap; cursor: default; transition: background .12s, color .12s; }
|
||
.row.pref .proto.pick svg { opacity: .7; transition: transform .15s var(--ease); }
|
||
.row.pref .proto.pick.open svg { transform: rotate(180deg); }
|
||
.row.pref .proto.pick:hover, .row.pref .proto.pick.open { color: var(--fg); background: var(--pill-hover); }
|
||
.row.pref .proto.pick.busy { opacity: .6; }
|
||
.pop.proto-menu { width: 262px; max-height: none; padding: 4px; border: 1px solid var(--line); display: grid; gap: 1px; }
|
||
.proto-menu .pm-head { padding: 6px 8px 5px; font-size: 11px; color: var(--muted); }
|
||
.proto-menu .pm-item { display: flex; align-items: flex-start; gap: 7px; width: 100%; padding: 6px 8px 7px; border: 0; border-radius: 7px; background: none; color: var(--fg); font: inherit; text-align: left; cursor: default; outline: none; }
|
||
.proto-menu .pm-item:hover, .proto-menu .pm-item:focus { background: var(--pill); }
|
||
.proto-menu .pm-tick { width: 14px; height: 16px; flex: none; display: grid; place-items: center; color: var(--fg); }
|
||
.proto-menu .pm-words { display: grid; gap: 1px; min-width: 0; }
|
||
.proto-menu .pm-name { font-size: 12.5px; font-weight: 500; line-height: 16px; }
|
||
.proto-menu .pm-note { font-size: 11px; color: var(--muted); line-height: 15px; }
|
||
/* a subscription's allowance, under its name */
|
||
.accts .acc.with-aq { flex-wrap: wrap; row-gap: 3px; padding-top: 7px; padding-bottom: 8px; }
|
||
.acc .aq { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-left: 25px; font-size: 10.5px; color: var(--muted); min-height: 14px; }
|
||
.acc .aq-w { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||
.acc .aq-track { width: 54px; height: 4px; border-radius: 2px; background: var(--pill); overflow: hidden; }
|
||
.acc .aq-track i { display: block; height: 100%; border-radius: inherit; background: var(--fg-2); }
|
||
.acc .aq-w b { color: var(--fg-2); font-weight: 600; font-variant-numeric: tabular-nums; }
|
||
.acc .aq-w.full b, .acc .aq-w.full .aq-r { color: var(--fg); }
|
||
.acc .aq-w.full .aq-track i { background: var(--fg); }
|
||
.acc .aq-r { color: var(--muted); }
|
||
.acc .aq-k { color: var(--muted); font-variant-numeric: tabular-nums; }
|
||
.acc .aq-none { color: var(--faint); }
|
||
.acc .skeleton.sk-aq { width: 110px; height: 8px; border-radius: 4px; }
|
||
.acc .dot.tick.fixed { cursor: default; }
|
||
.acc .dot.tick.fixed:hover { box-shadow: none; }
|
||
.acc.off .aq { opacity: .7; }
|
||
|
||
/* a sign-in under way, waiting on the browser */
|
||
.signing { display: flex; align-items: flex-start; gap: 11px; padding: 11px 10px 11px 12px; font-size: 12.5px; background: var(--card-2); animation: fade-in .2s; }
|
||
.sheet .signing { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; }
|
||
.signing .tt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; line-height: 1.35; }
|
||
.signing .n { font-weight: 500; }
|
||
.signing .s { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
|
||
.signing > .text { margin: -3px 0; }
|
||
.signing .acts { display: flex; gap: 2px; margin: 2px 0 0 -4px; }
|
||
.signing .acts .link { color: var(--fg-2); }
|
||
.signing .devcode { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; }
|
||
.signing .devcode code { font: 600 17px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .12em; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); user-select: all; }
|
||
/* the sign-in link, one line, selected whole with a click */
|
||
.signing .signlink { display: flex; align-items: center; gap: 4px; margin: 5px 0 1px; min-width: 0; }
|
||
.signing .signlink code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/1.3 var(--mono, ui-monospace, monospace); color: var(--fg-2); padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); user-select: all; -webkit-user-select: all; cursor: text; }
|
||
.signing .callback-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
|
||
.signing .callback-form input { flex: 1; min-width: 120px; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--fg); font-size: 12px; }
|
||
.signing .why { color: var(--red); }
|
||
/* a plugin's ways to sign in: the question keeps the row, the choices
|
||
wrap beneath it at whatever length the plugin names them */
|
||
.signing.plugin-ask { flex-wrap: wrap; }
|
||
.signing.plugin-ask .choices { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.signing.plugin-ask .choices button { height: auto; min-height: 26px; max-width: 100%; padding: 4px 10px; white-space: normal; text-align: left; line-height: 1.3; overflow-wrap: anywhere; }
|
||
/* an import: what is pasted is sign-ins, so it is masked */
|
||
.signing.import textarea { margin-top: 6px; width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; outline: none; -webkit-text-security: disc; }
|
||
.signing.import textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
|
||
.signing.import .acts { align-items: center; gap: 8px; margin-top: 4px; }
|
||
.signing.import .fname { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
|
||
.signing.import .why { color: var(--red); }
|
||
.signing.import .results { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
|
||
.signing.import .res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--fg); font-size: 12px; font-variant-numeric: normal; }
|
||
.signing.import .res .u { font-weight: 450; overflow-wrap: anywhere; }
|
||
.signing.import .res .st { color: var(--muted); font-size: 11.5px; }
|
||
.signing.import .res.added .st, .signing.import .res.updated .st { color: var(--green); }
|
||
.signing.import .res.failed .st { color: var(--red); }
|
||
.signing.import .res .why { flex-basis: 100%; font-size: 11.5px; overflow-wrap: anywhere; }
|
||
.signing .spinner { width: 16px; height: 16px; flex: none; margin-top: 1px; border-radius: 50%; border: 1.75px solid var(--line); border-top-color: var(--fg); animation: spin .8s linear infinite; }
|
||
.signing .mark { width: 16px; height: 16px; flex: none; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--card); font-size: 11px; font-weight: 700; }
|
||
.fallback { display: grid; gap: 6px; }
|
||
.fallback .fbl { display: grid; gap: 2px; }
|
||
.fbrow { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12.5px; }
|
||
.fbrow .i { width: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||
.fbrow .grow { flex: 1; }
|
||
.fallback .mchips:empty { display: none; }
|
||
.after-list { display: flex; align-items: center; gap: 8px; padding: 8px 4px 0; flex: none; }
|
||
/* the Providers page's add button stays at the view's foot over a long list */
|
||
#view-providers .after-list { position: sticky; bottom: -8px; z-index: 2; margin: 0 -12px -8px; padding: 14px 16px 12px; background: linear-gradient(to bottom, transparent, var(--bg) 12px); transition: opacity .18s ease, visibility .18s; }
|
||
#view-providers .after-list.away { opacity: 0; visibility: hidden; }
|
||
#movable { margin: 0 0 8px; }
|
||
#fileError { margin: 0 0 10px; }
|
||
#fileError .signing { border: 1px solid var(--line); border-radius: 10px; }
|
||
#fileError .signing .mark { background: var(--red); }
|
||
.movable { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; padding: 2px 14px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
|
||
.movable .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; margin-right: 4px; align-self: center; }
|
||
.movable .link { font-size: 11.5px; padding: 0 2px; }
|
||
.excluded { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px 2px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
|
||
.excluded .ic { width: 16px; height: 16px; margin-top: 1px; opacity: .7; }
|
||
.excluded b { font-weight: 500; color: var(--fg-2); }
|
||
|
||
/* the add sheet: presets as tiles, one key away */
|
||
.sheet { padding: 6px 0 8px; flex: none; }
|
||
.sheet .row-head { padding: 0 2px; gap: 6px; }
|
||
.sheet .find, #view-gateway .find { height: 24px; width: 160px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); font-size: 12px; outline: none; transition: border-color .12s; }
|
||
.sheet .find:focus, #view-gateway .find:focus { border-color: var(--accent); }
|
||
.sheet .find::placeholder, #view-gateway .find::placeholder { color: var(--faint); }
|
||
.sheet .kind { display: flex; align-items: baseline; gap: 8px; padding: 22px 8px 6px; font-size: 12px; }
|
||
.sheet .kind b { font-size: 13px; font-weight: 600; color: var(--fg); }
|
||
.sheet .kind span { color: var(--faint); }
|
||
.sheet .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px 12px; }
|
||
.sheet .none { padding: 14px 2px; color: var(--muted); font-size: 12px; }
|
||
#gwModels .none { padding: 16px; color: var(--muted); font-size: 12px; text-align: center; }
|
||
#view-gateway .row-head .find { margin-right: 8px; }
|
||
/* a row of the add sheet: an icon and a name, no frame; a row already
|
||
added has a small green dot after its name rather than fading */
|
||
.tile {
|
||
display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px;
|
||
border-radius: 8px; text-align: left; min-width: 0; transition: background .12s;
|
||
}
|
||
.tile:hover { background: var(--pill); }
|
||
.tile.on { background: var(--sel); }
|
||
.tile .ic { width: 18px; height: 18px; flex: none; }
|
||
.tile .nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; }
|
||
.tile .n { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.tile .nm .badge { flex: none; }
|
||
.tile .have { flex: none; width: 6px; height: 6px; border-radius: 3px; background: var(--green); }
|
||
.tile .cnt { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
|
||
.sheet .custom-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 2px 0; border-top: 1px solid var(--line-2); }
|
||
.sheet .custom-foot .custom { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 6px; border-radius: 8px; color: var(--accent); font-size: 13px; }
|
||
.sheet .custom-foot .custom:hover, .sheet .custom-foot .custom.on { background: var(--accent-soft); }
|
||
.sheet .custom-foot .hint { font-size: 12px; color: var(--muted); }
|
||
/* the provider editor, in a dialog */
|
||
.editor { padding: 16px 18px 14px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px 14px; align-items: start; }
|
||
.editor .ehead { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line-2); }
|
||
.editor .ehead .ic { width: 20px; height: 20px; }
|
||
.editor .icon-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||
.editor .icon-pick .icon-now { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; }
|
||
.editor .icon-pick .icon-now .ic { width: 20px; height: 20px; }
|
||
.editor .icon-pick .icon-grid { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; }
|
||
.editor .icon-pick .icon-grid button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; }
|
||
.editor .icon-pick .icon-grid button:hover { background: var(--card-2); }
|
||
.editor .icon-pick .icon-grid button.on { box-shadow: inset 0 0 0 1.5px var(--fg); }
|
||
.editor .icon-pick .icon-grid .ic { width: 18px; height: 18px; }
|
||
.editor .ehead b { font-weight: 600; }
|
||
.editor .ehead .note { font-size: 12px; color: var(--muted); }
|
||
.editor label { font-size: 12px; color: var(--muted); text-align: right; padding-top: 5px; }
|
||
.editor .hint { font-size: 11px; color: var(--faint); margin-top: 4px; }
|
||
/* a provider's own proxy (#237): the address beside the options, its room
|
||
kept while it is hidden so a pick never changes the dialog's height */
|
||
.editor .proxy-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||
.editor .proxy-row .proxy-mode { flex: none; }
|
||
.editor .proxy-row input.proxy-url { flex: 1 1 auto; width: auto; min-width: 0; }
|
||
.editor .proxy-row input.proxy-url.off { visibility: hidden; }
|
||
/* each of a subscription's accounts with a proxy of its own: its name
|
||
over the same row as the provider's, in a quiet card, no stripes */
|
||
.editor .acct-proxies { display: grid; gap: 8px; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
|
||
.editor .acct-proxy { display: grid; gap: 4px; min-width: 0; }
|
||
.editor .acct-proxy .who { font-size: 12px; font-weight: 500; color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.editor .acct-proxies > .hint { margin-top: 0; }
|
||
/* what a balance token's URL wants instead, and a balance checked in the form */
|
||
.editor .bal-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--muted); }
|
||
.editor .bal-fix:empty { display: none; }
|
||
.editor .bal-fix.warn { color: var(--amber); }
|
||
.editor .bal-fix .text.action { height: 24px; font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.editor .pair.wrap { flex-wrap: wrap; }
|
||
.editor .bal-res { flex-basis: 100%; font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
|
||
.editor .bal-res:empty { display: none; }
|
||
.editor .bal-res.ok { color: var(--green); }
|
||
.editor .bal-res.bad { color: var(--red); }
|
||
.editor .bal-res.wait { color: var(--faint); }
|
||
.stepplan .state { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
|
||
.stepplan .steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
|
||
.stepplan .steps .pair { margin-top: 2px; }
|
||
.stepplan .bookmarklet { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--fg); background: var(--pill); text-decoration: none; cursor: grab; white-space: nowrap; }
|
||
.editor input[type="text"], .editor input[type="password"], .editor input[type="url"], .acc .kf input, .acc input.rename-in {
|
||
height: 27px; padding: 0 9px; border-radius: 7px;
|
||
border: 1px solid var(--line); background: var(--card);
|
||
font-size: 12.5px; outline: none; width: 100%; min-width: 0;
|
||
transition: border-color .12s, box-shadow .12s;
|
||
}
|
||
.editor input:focus, .editor .headers textarea.json:focus, .acc input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
|
||
.editor input::placeholder, .acc input::placeholder { color: var(--faint); }
|
||
.editor .pair { display: flex; gap: 8px; align-items: center; }
|
||
.editor .pair input:first-child { flex: 1; }
|
||
.editor .side { display: flex; gap: 4px; align-items: center; flex: none; min-width: 52px; justify-content: flex-end; }
|
||
.editor .side .text { padding: 3px 6px; }
|
||
.editor .headers .pair .side .text { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 6px; }
|
||
.editor .stack { display: flex; flex-direction: column; gap: 6px; }
|
||
.editor .move { align-items: flex-start; font-size: 12px; line-height: 1.5; padding-top: 4px; }
|
||
.editor .move .hint { margin-top: 0; }
|
||
.editor .move .move-why { font-size: 11.5px; line-height: 1.45; color: var(--red); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
|
||
.editor .move .move-why[hidden] { display: none; }
|
||
.editor .move > button { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 27px; }
|
||
.editor .headers { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
|
||
.editor .headers .pair { width: 100%; }
|
||
.editor .headers .hadds { display: flex; flex-wrap: wrap; gap: 2px 12px; }
|
||
.editor .headers .pair input { flex: 1; min-width: 0; }
|
||
.editor .headers .pair input:first-child { flex: 4; }
|
||
.editor .headers .pair input:nth-child(2) { flex: 6; }
|
||
.editor .headers .pair .side { flex: none; }
|
||
.editor .headers .pair .side .text.on { color: var(--accent); }
|
||
.editor .headers .pair.col { flex-direction: column; align-items: stretch; }
|
||
.editor .headers .pair.col .hhead { display: flex; gap: 8px; align-items: center; width: 100%; }
|
||
.editor .headers .pair.col .hhead input { flex: 1; min-width: 0; }
|
||
.editor .headers .pair.col .side { flex: none; }
|
||
.editor .headers textarea.json { width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--fg); outline: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; resize: vertical; tab-size: 2; white-space: pre; overflow: auto; transition: border-color .12s, box-shadow .12s; }
|
||
.editor .headers textarea.json.bad { border-color: var(--danger, #d66); }
|
||
.segs { position: relative; display: inline-flex; padding: 2px; border-radius: 7px; background: var(--pill); align-self: flex-start; }
|
||
.opt { position: relative; z-index: 1; white-space: nowrap; height: 22px; padding: 0 10px; border-radius: 5px; font-size: 12px; color: var(--muted); transition: color .18s var(--ease), transform .14s var(--ease); }
|
||
.opt.on { color: var(--fg); }
|
||
/* how often magpie checks for updates, while it doesn't by itself */
|
||
.update-every-row.off .segs { opacity: .55; }
|
||
.opt:hover:not(.on) { color: var(--fg-2); }
|
||
.thumb {
|
||
position: absolute; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: 6px;
|
||
background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06);
|
||
transition: transform .28s var(--ease), width .28s var(--ease), opacity .15s;
|
||
pointer-events: none;
|
||
}
|
||
.segs .thumb { border-radius: 5px; }
|
||
.segs.regions { max-width: 100%; overflow-x: auto; }
|
||
/* no scrollbar-width here: Chromium (WebView2) then drops every
|
||
::-webkit-scrollbar rule and draws Windows' classic bar, arrows and all,
|
||
under the strip; the app's thin thumb instead, slimmer still */
|
||
:where(body:not(.mac)) .segs.regions::-webkit-scrollbar { height: 6px; }
|
||
:where(body:not(.mac)) .segs.regions::-webkit-scrollbar-thumb { border-width: 1px; }
|
||
.segs.regions .opt { flex: none; }
|
||
/* an installed list's order (#481): small, beside the list's heading */
|
||
.segs.sortby { align-self: center; flex: none; }
|
||
.segs.sortby .opt { height: 20px; padding: 0 8px; font-size: 11px; }
|
||
.thumb.still { transition: none; }
|
||
.link { font-size: 12px; color: var(--accent); padding: 3px 4px; white-space: nowrap; }
|
||
.link:hover { text-decoration: underline; text-underline-offset: 2px; }
|
||
.editor .more { grid-column: 1 / -1; }
|
||
.editor .more summary { font-size: 12px; color: var(--muted); list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; margin-left: 86px; }
|
||
.editor .more summary::-webkit-details-marker { display: none; }
|
||
.editor .more summary::before { content: "▸"; font-size: 10px; color: var(--faint); }
|
||
.editor .more[open] summary::before { content: "▾"; }
|
||
.editor .more summary:hover { color: var(--fg); }
|
||
.editor .more .inner { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px 14px; align-items: start; padding-top: 8px; }
|
||
.editor .warnbox { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--fg); background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: 8px; padding: 8px 10px; }
|
||
.editor .warnbox.soft { background: none; color: var(--amber); border: 0; padding: 0 0 0 86px; }
|
||
.editor.import .mchips .mchip { cursor: default; }
|
||
.editor .bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line-2); margin-top: 2px; }
|
||
.editor .bar .danger { margin-left: -7px; }
|
||
.editor .editor-error { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; color: var(--red); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
|
||
.editor .editor-error.warn { color: var(--amber); }
|
||
.busy { opacity: .55; pointer-events: none; }
|
||
|
||
/* agent chips: who is on this provider, click one to pick it a model */
|
||
.achips { display: flex; flex-wrap: wrap; gap: 5px; }
|
||
.achip {
|
||
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 6px; border-radius: 7px;
|
||
background: var(--card); border: 1px solid var(--line); font-size: 12px; color: var(--muted);
|
||
transition: background .12s, color .12s, border-color .12s;
|
||
}
|
||
.achip .ic { width: 15px; height: 15px; filter: grayscale(1); opacity: .55; transition: filter .12s, opacity .12s; }
|
||
.achip:hover { color: var(--fg); border-color: var(--muted); }
|
||
.achip:hover .ic, .achip.on .ic { filter: none; opacity: 1; }
|
||
.achip.on { color: var(--fg); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
|
||
.achip.open { border-color: var(--accent); }
|
||
.achip .m { font: 11px var(--code); color: var(--accent); }
|
||
|
||
/* endpoints, each with its own test result */
|
||
.eps { display: flex; flex-direction: column; gap: 3px; }
|
||
.ep { display: flex; align-items: center; gap: 8px; height: 24px; min-width: 0; }
|
||
.ep .pl { flex: none; width: 64px; font-size: 11.5px; color: var(--muted); }
|
||
.ep code { color: var(--fg-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; user-select: text; -webkit-user-select: text; cursor: text; }
|
||
.res { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-variant-numeric: tabular-nums; background: var(--pill); color: var(--muted); }
|
||
.res:empty { display: none; }
|
||
.res.wait { background: none; color: var(--faint); }
|
||
.res.ok { background: var(--green-soft); color: var(--green); }
|
||
.res.bad { background: var(--red-soft); color: var(--red); max-width: 60%; }
|
||
.res.bad span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.eps .text { align-self: flex-start; margin: 5px 0 0 72px; }
|
||
|
||
/* model chips: click to expose, click again to hide */
|
||
.models { display: flex; flex-direction: column; gap: 6px; }
|
||
.mbulk { display: flex; align-items: center; gap: 6px; }
|
||
.mbulk > input { max-width: 260px; flex: 1; }
|
||
/* a long list scrolls on its own, not the editor with it past its ends */
|
||
.mchips { display: flex; flex-wrap: wrap; gap: 4px; max-height: min(132px, 28vh); overflow-y: auto; overscroll-behavior: contain; padding: 1px; }
|
||
.mchips::-webkit-scrollbar { width: 0; }
|
||
/* In a short window the editor's body shows little more than the list, so
|
||
the pointer is nearly always over it; held at its ends, the wheel could
|
||
never take the body on to what lies below (悠悠哥 on Discord: a small
|
||
window's WorkBuddy editor stopped part way down its models). There a
|
||
list's ends pass the wheel on to the body, and the names' list is held
|
||
to a part of the window as the chips are. */
|
||
@media (max-height: 640px) {
|
||
.mchips { overscroll-behavior: auto; }
|
||
.mnames { max-height: min(240px, 40vh); }
|
||
}
|
||
.mchip {
|
||
display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
|
||
font-size: 11.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line);
|
||
transition: background .12s, color .12s, border-color .12s;
|
||
}
|
||
.mchip:hover { color: var(--fg); border-color: var(--muted); }
|
||
.mchip.on { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 500; }
|
||
.mchip.on::before { content: "✓"; font-size: 10px; }
|
||
.mchip.own.on::before { content: "＋"; }
|
||
/* an image model in the editor: listed, not picked */
|
||
.mchip.ro, .mchip.ro:hover { cursor: default; color: var(--muted); border-color: var(--line); }
|
||
.mchip.ro:active { transform: none; }
|
||
/* how a model answered Test models: a dot after its name */
|
||
.mchip .tdot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--faint); }
|
||
.mchip .tdot.ok { background: var(--green); }
|
||
.mchip .tdot.bad { background: var(--red); }
|
||
.mchip .tdot.wait { animation: tdot 1s ease-in-out infinite alternate; }
|
||
@keyframes tdot { to { opacity: .25; } }
|
||
.mchips .hint, .mfoot .hint { font-size: 11px; color: var(--faint); align-self: center; line-height: 27px; }
|
||
.mfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 27px; }
|
||
.mfoot .hint { white-space: nowrap; }
|
||
.mfoot > input { height: 27px; }
|
||
.mfoot .text.action { flex: none; }
|
||
.mfoot input { max-width: 200px; height: 27px !important; }
|
||
.mfoot .text { padding: 2px 7px; }
|
||
.mfoot .text.on { color: var(--fg); background: var(--card-2); }
|
||
|
||
/* the models' own names and reasoning levels, one row each */
|
||
.mnames { display: grid; gap: 4px; max-height: 240px; overflow-y: auto; padding: 1px; }
|
||
.mnames[hidden] { display: none; }
|
||
.mnames > .hint { font-size: 11px; color: var(--faint); }
|
||
.mname { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
|
||
.mname .mwho { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
|
||
.mname .mwho input { flex: 1; min-width: 0; max-width: 220px; height: 25px; }
|
||
.mname .mwho code { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
||
.mname .mlevels { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; }
|
||
.editor .mname label.tick { gap: 4px; }
|
||
.mname .text { flex: none; padding: 2px 7px; font-size: 11.5px; }
|
||
|
||
/* ---------- settings ---------- */
|
||
#view-settings .row-head { margin: 4px 0 6px; padding: 0 2px; }
|
||
#view-settings .row-head + .list { margin-bottom: 8px; }
|
||
/* the warm-ups and check-in: a tab per service where a heading would be,
|
||
in the headings' small capitals, the one picked darker on a soft pill,
|
||
the picked one's card alone under them */
|
||
.warm-tabs { display: flex; align-items: center; gap: 2px; margin-left: -7px; }
|
||
.warm-tabs button { height: 22px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); transition: color .12s, background-color .12s; }
|
||
.warm-tabs button:hover:not(.on) { color: var(--fg-2); }
|
||
.warm-tabs button.on { color: var(--fg); background: var(--pill); }
|
||
.warm-tabs button[hidden] { display: none; }
|
||
.warm-panes { margin-bottom: 8px; }
|
||
/* the page's parts (#471): a tab each at the top in the same look, a line
|
||
more when they don't fit across (a narrow window, a larger text size),
|
||
the part picked alone under them */
|
||
#view-settings .set-head { height: auto; min-height: 26px; flex: none; }
|
||
.set-tabs { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
|
||
.set-tabs button { flex: none; white-space: nowrap; }
|
||
.set-page { flex: none; }
|
||
.set-page[hidden] { display: none; }
|
||
.set-page > .list:not(:last-child) { margin-bottom: 8px; }
|
||
.row.pref { min-height: 50px; padding: 8px 12px 8px 14px; gap: 14px; }
|
||
.row.pref .who { flex: 1 1 auto; }
|
||
.row.pref .sub { margin-top: 2px; }
|
||
.session-terminal-select { flex: none; max-width: min(230px, 45%); min-width: 145px; height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--fg); font: inherit; font-size: 12px; }
|
||
.session-terminal-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||
.row.pref .segs { flex: none; margin-left: auto; }
|
||
.proxy-segs { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
|
||
.proxy-segs input.proxy, input.words { width: 180px; min-width: 0; height: 27px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); font-size: 12.5px; outline: none; transition: border-color .12s, box-shadow .12s; }
|
||
.proxy-segs input.proxy:focus, input.words:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
|
||
.proxy-segs input.proxy::placeholder, input.words::placeholder { color: var(--faint); }
|
||
input.words { width: 240px; max-width: 100%; }
|
||
/* the masking rules' add row: its words in full, then on a line of their
|
||
own a name, prefix or regex, the match taking the room left, Add */
|
||
.row.pref.rule-row { flex-wrap: wrap; row-gap: 8px; }
|
||
.row.pref.rule-row .who { flex: 1 1 100%; }
|
||
.row.pref.rule-row .sub { white-space: normal; }
|
||
.prefs .val.rule-add { flex: 1 1 100%; max-width: none; margin-left: 0; gap: 6px; }
|
||
input.words.rule-kind { flex: none; width: 110px; }
|
||
input.words.rule-match { flex: 1 1 auto; width: auto; min-width: 0; }
|
||
input.words.search-key, input.words.search-url { flex: 1 1 120px; width: auto; min-width: 0; }
|
||
.prefs .val.rule-add .segs { margin-left: 0; }
|
||
.row.pref .sub.err { color: var(--red); white-space: normal; }
|
||
.warm-at { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
|
||
.warm-at input.at { width: auto; height: 27px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; outline: none; transition: border-color .12s, box-shadow .12s; }
|
||
.warm-at input.at:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
|
||
.warm-at input.at::-webkit-calendar-picker-indicator { opacity: .55; }
|
||
/* a usage alert's share or amount: a short number field, its unit beside it */
|
||
.warm-at input.at.num { width: 64px; text-align: right; }
|
||
.warm-at .unit { color: var(--muted); font-size: 12.5px; margin-left: -4px; }
|
||
.row.pref .sub .warn { color: var(--amber); }
|
||
.row.pref .sub.wraps { white-space: normal; }
|
||
/* the field's clock and picker in the page's own palette */
|
||
:root[data-theme="dark"] .warm-at input.at { color-scheme: dark; }
|
||
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warm-at input.at { color-scheme: dark; } }
|
||
@media (max-width: 520px) { .proxy-segs { flex-wrap: wrap; justify-content: flex-end; } }
|
||
/* Settings → Plugins: what a plugin signs in to, or why it didn't load, said whole */
|
||
.row.pref.plugin-row .sub, .row.pref.plugin-add .sub { white-space: normal; }
|
||
.row.pref.plugin-row.off .name { color: var(--muted); }
|
||
.row.pref.plugin-add .val { flex-wrap: wrap; justify-content: flex-end; }
|
||
.prefs .val { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; max-width: 60%; flex: none; }
|
||
.prefs .val code { font-size: 12px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; -webkit-user-select: text; padding: 0 6px; }
|
||
.prefs .val .text { padding: 3px 6px; }
|
||
.row.pref.lan-address-row { position: relative; height: 50px; transition: height .28s var(--ease); }
|
||
.row.pref.lan-address-row .who { position: absolute; top: 16px; left: 14px; }
|
||
.prefs .lan-address-row .val { max-width: 64%; }
|
||
.lan-address-controls { position: absolute; inset: 0; pointer-events: none; }
|
||
.lan-address-controls > * { position: absolute; pointer-events: auto; }
|
||
.row.pref .proto.pick.lan-interface { top: 13px; right: 40px; width: 240px; max-width: calc(100% - 40px); margin-left: 0; font: 12px var(--code); transition: top .28s var(--ease), background .12s, color .12s; }
|
||
.lan-interface .lan-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.lan-address-controls .lan-address-text { top: 16px; right: 40px; width: 240px; max-width: calc(100% - 40px); font: 12px var(--code); transition: top .28s var(--ease); }
|
||
.lan-address-controls .segs { top: 12px; right: 286px; margin-left: 0; transition: right .28s var(--ease); }
|
||
.lan-copy { top: 14px; right: 12px; display: inline-flex; transition: top .28s var(--ease); }
|
||
.row.pref.lan-container .sub { white-space: normal; }
|
||
.pop.proto-menu.lan-address-menu { width: min(320px, calc(100vw - 16px)); max-height: min(360px, 70vh); overflow-y: auto; }
|
||
.lan-address-menu .pm-name { font: 12px var(--code); }
|
||
@media (max-width: 600px) {
|
||
.row.pref.lan-address-row { height: 76px; }
|
||
.lan-address-controls .segs { right: 12px; }
|
||
.row.pref .proto.pick.lan-interface { top: 44px; }
|
||
.lan-address-controls .lan-address-text { top: 47px; }
|
||
.lan-copy { top: 45px; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.row.pref.lan-address-row, .row.pref .proto.pick.lan-interface, .lan-address-controls .lan-address-text, .lan-address-controls .segs, .lan-copy { transition: none; }
|
||
}
|
||
/* the community row's way in: Discord's own colour, quiet until hovered */
|
||
.prefs .val .discord {
|
||
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: 999px;
|
||
font-size: 12px; font-weight: 560; white-space: nowrap; color: #5865f2;
|
||
background: color-mix(in srgb, #5865f2 11%, transparent);
|
||
box-shadow: inset 0 0 0 .5px color-mix(in srgb, #5865f2 35%, transparent);
|
||
transition: background .15s, color .15s, transform .12s var(--ease);
|
||
}
|
||
.prefs .val .discord:hover { background: #5865f2; color: #fff; }
|
||
.prefs .val .discord:active { transform: scale(.96); }
|
||
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prefs .val .discord:not(:hover) { color: #8b95ff; } }
|
||
:root[data-theme="dark"] .prefs .val .discord:not(:hover) { color: #8b95ff; }
|
||
.prefs .val .github {
|
||
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: 999px; margin-left: 6px;
|
||
font-size: 12px; font-weight: 560; white-space: nowrap; color: var(--fg);
|
||
background: color-mix(in srgb, var(--fg) 7%, transparent);
|
||
box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--fg) 22%, transparent);
|
||
transition: background .15s, color .15s, transform .12s var(--ease);
|
||
}
|
||
.prefs .val .github:hover { background: var(--fg); color: var(--bg); }
|
||
.prefs .val .github:active { transform: scale(.96); }
|
||
|
||
|
||
/* ---------- motion ----------
|
||
One easing everywhere (iOS-ish: quick start, soft landing), short
|
||
durations, small distances. Pressing gives a little, pages settle in,
|
||
dialogs lift. */
|
||
:root { --ease: cubic-bezier(.2, .8, .2, 1); }
|
||
.text, .icon, .tile, .achip, .mchip, .use, .link {
|
||
transition-property: background, background-color, color, border-color, box-shadow, filter, opacity, transform;
|
||
transition-duration: .16s; transition-timing-function: var(--ease);
|
||
}
|
||
.text:active, .tile:active, .achip:active, .mchip:active, .use:active, .opt:active, .seg button:active { transform: scale(.96); }
|
||
.icon:active { transform: scale(.9); }
|
||
.row.provider { transition: background .16s var(--ease); }
|
||
.row.provider:active { background: var(--card-2); }
|
||
.chips .chip { transition: background .16s var(--ease), color .16s var(--ease), transform .14s var(--ease); }
|
||
.chips .chip:active { transform: scale(.96); }
|
||
.status { transition: opacity .2s var(--ease); }
|
||
|
||
/* the theme crossfades instead of snapping */
|
||
html.theming, html.theming *, html.theming *::before, html.theming *::after {
|
||
transition: background-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease) !important;
|
||
}
|
||
|
||
/* ---------- modal ---------- */
|
||
.modal {
|
||
position: fixed; inset: 0; z-index: 20;
|
||
display: flex; align-items: center; justify-content: center; padding: 28px 24px;
|
||
background: rgba(0, 0, 0, .28);
|
||
-webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
|
||
}
|
||
/* opening and closing are animated from app.js (openModal, closeModal) */
|
||
.modal.out { pointer-events: none; }
|
||
.modal .dialog {
|
||
width: min(600px, 100%); min-width: 0; max-height: 100%; overflow-y: auto;
|
||
border-radius: 14px; background: var(--card);
|
||
box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .12);
|
||
}
|
||
.modal .dialog.swap { animation: content-in .22s var(--ease); }
|
||
.modal .dialog::-webkit-scrollbar { width: 0; }
|
||
/* In a dialog the editor's head and buttons stay put and only the fields
|
||
between them scroll; both bars are the same height, their contents
|
||
centred in it. */
|
||
.modal .dialog { display: flex; flex-direction: column; }
|
||
.modal .editor.framed { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0; overflow: hidden; }
|
||
.modal .editor.framed > .ebody {
|
||
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
|
||
display: grid; grid-template-columns: inherit; gap: 10px 14px; align-items: start; padding: 14px 18px;
|
||
}
|
||
.modal .editor.framed > .ebody::-webkit-scrollbar { width: 0; }
|
||
.modal .editor.framed > .ehead, .modal .editor.framed > .bar { flex: none; min-height: 48px; margin: 0; padding: 0 18px; }
|
||
.modal .editor.framed > .ehead { border-bottom: 1px solid var(--line-2); }
|
||
.modal .editor.framed > .bar { border-top: 1px solid var(--line-2); }
|
||
.modal .editor.framed > .editor-error { flex: none; padding: 8px 18px; border-top: 1px solid var(--line-2); }
|
||
/* what's new after an update: each release's notes, one under another,
|
||
divided by a hairline, the text selectable */
|
||
.modal .editor.whatsnew > .ebody { gap: 0; }
|
||
.whatsnew .wn-rel { grid-column: 1 / -1; min-width: 0; }
|
||
.whatsnew .wn-rel + .wn-rel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
|
||
.whatsnew .wn-ver { display: flex; align-items: center; gap: 8px; font-size: 13px; }
|
||
.whatsnew .wn-ver b { font-weight: 600; }
|
||
.whatsnew .wn-notes { font-size: 12.5px; line-height: 1.55; color: var(--fg-2); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
|
||
.whatsnew .wn-h { margin: 10px 0 2px; font-size: 12px; font-weight: 600; color: var(--fg); }
|
||
.whatsnew .wn-h1, .whatsnew .wn-h2 { font-size: 12.5px; }
|
||
.whatsnew .wn-notes ul { margin: 2px 0; padding-left: 18px; }
|
||
.whatsnew .wn-notes li + li { margin-top: 2px; }
|
||
.whatsnew .wn-notes p { margin: 4px 0; }
|
||
.whatsnew .wn-notes code { font: 11.5px/1.4 var(--mono, ui-monospace, monospace); padding: 0 4px; border-radius: 4px; background: var(--pill); }
|
||
.whatsnew .wn-link { color: var(--accent); text-decoration: none; }
|
||
.whatsnew .wn-link:hover { text-decoration: underline; }
|
||
/* Keep native window chrome outside the scrim and dialog. In particular, the
|
||
macOS traffic lights must never sit on top of modal content. */
|
||
body.window.mac .modal { top: calc(50px / var(--zoom, 1)); padding: 16px 24px 24px; }
|
||
body.window .modal { padding: 16px 24px 24px; }
|
||
body.panel .modal { padding: 16px 12px; }
|
||
@keyframes fade-in { from { opacity: 0; } }
|
||
@keyframes content-in { from { opacity: .5; transform: translateY(2px); } }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
|
||
.skeleton { animation: none !important; }
|
||
}
|
||
|
||
/* Import from other apps: a checklist per app */
|
||
.editor.importapps { grid-template-columns: minmax(0, 1fr); }
|
||
.editor.importapps .appnote { font-size: 12px; color: var(--muted); line-height: 1.5; }
|
||
.editor.importapps .applist { display: flex; flex-direction: column; gap: 14px; max-height: min(56vh, 460px); overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
|
||
.editor.importapps .apptabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--pill); overflow-x: auto; scrollbar-width: none; }
|
||
.editor.importapps .apptab { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
|
||
.editor.importapps .apptab:hover { color: var(--fg); }
|
||
.editor.importapps .apptab.on { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
|
||
.editor.importapps .apptab.missing .applogo { filter: grayscale(1); opacity: .5; }
|
||
.editor.importapps .apptab .count { min-width: 16px; padding: 0 5px; border-radius: 8px; font-size: 10.5px; line-height: 16px; text-align: center; color: var(--fg-2); background: var(--line); }
|
||
.editor.importapps .apptab.missing .count { background: none; color: var(--faint); }
|
||
.editor.importapps .apphead > .applogo, .editor.importapps .apphead > b { display: none; }
|
||
.editor.importapps .apphead { display: flex; align-items: baseline; gap: 8px; padding-bottom: 4px; }
|
||
.editor.importapps .apphead b { font-weight: 600; font-size: 13px; flex: none; }
|
||
.editor.importapps .apphead { align-items: center; }
|
||
.editor.importapps .applogo { width: 18px; height: 18px; flex: none; border-radius: 4px; }
|
||
.editor.importapps .appall { flex: none; display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 400; color: var(--muted); text-align: left; cursor: pointer; padding-right: 6px; }
|
||
.editor.importapps .appall input { margin: 0; accent-color: var(--fg); }
|
||
.editor.importapps .apphead code { flex: 1; min-width: 0; font: 11px var(--code); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.editor.importapps .appempty { font-size: 12px; color: var(--muted); padding: 2px 0 4px; }
|
||
.editor.importapps .approw { text-align: left; font-weight: 400; color: var(--fg); display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
|
||
.editor.importapps .approw:hover:not(.dim) { background: var(--pill); }
|
||
.editor.importapps .approw.dim { cursor: default; opacity: .55; }
|
||
.editor.importapps .approw input { margin: 3px 0 0; accent-color: var(--fg); flex: none; }
|
||
.editor.importapps .approw .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
|
||
.editor.importapps .approw .appwho { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
||
.editor.importapps .approw .name { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
|
||
.editor.importapps .approw .name .from { font-size: 11px; color: var(--muted); }
|
||
.editor.importapps .approw .sub { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
|
||
.editor.importapps .approw .segs { margin-top: 3px; max-width: 100%; overflow-x: auto; }
|
||
.editor.importapps .approw .segs .opt { white-space: nowrap; flex: none; }
|
||
.editor.importapps .apptag { flex: none; font-size: 11px; color: var(--fg-2); background: var(--pill); border-radius: 5px; padding: 1px 6px; margin-top: 1px; }
|
||
.editor.importapps .bar .note { font-size: 12px; color: var(--muted); }
|
||
|
||
/* sync and backup, on the Settings page */
|
||
.prefs .sub.bad { color: var(--red); }
|
||
.prefs .sync-note .who .sub + .sub { margin-top: 2px; }
|
||
.editor.sync-form { grid-template-columns: 86px minmax(0, 1fr); }
|
||
.editor label.tick { display: flex; align-items: center; gap: 7px; text-align: left; padding-top: 0; color: var(--fg-2); cursor: pointer; }
|
||
.editor label.tick input { margin: 0; }
|
||
.editor .fname { flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.editor.sync-form .done { grid-column: 1 / -1; font-size: 12.5px; color: var(--fg-2); user-select: text; -webkit-user-select: text; }
|
||
.editor.sync-form .bar { grid-column: 1 / -1; }
|
||
|
||
/* the usual context windows under the field, one click each (#120) */
|
||
.cxpicks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
|
||
.cxpick {
|
||
height: 22px; padding: 0 9px; border-radius: 999px;
|
||
border: 1px solid var(--line); background: var(--card); color: var(--muted);
|
||
font-size: 11.5px; font-variant-numeric: tabular-nums; cursor: pointer;
|
||
transition: border-color .12s, background .12s, color .12s;
|
||
}
|
||
.cxpick:hover { border-color: var(--accent); color: var(--accent); }
|
||
.cxpick.on { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 500; }
|
||
|
||
/* Account rows use the existing pointer sorter, without a visible handle. */
|
||
.accts > [data-account-id] { user-select: text; -webkit-user-select: text; }
|
||
.accts.reorderable > [data-account-id] { cursor: grab; touch-action: pan-y; }
|
||
.accts.reorderable > [data-account-id]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||
.accts.sorting > [data-account-id] { animation: none; transition: transform .16s cubic-bezier(.22, 1, .36, 1); }
|
||
.accts.sorting > .dragging { position: relative; z-index: 2; background: var(--card-2); box-shadow: 0 0 0 1px var(--line); cursor: grabbing; transition: none; will-change: transform; }
|
||
.accts[aria-busy=true] > [data-account-id] { cursor: progress; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.accts.sorting > [data-account-id], #agents.sorting > .row { transition: none; }
|
||
}
|
||
/* the show while the session files are indexed: the words on the left, a
|
||
field of dots that light up as the files land on the right, a hairline
|
||
along the foot. The hero holds its own layout (:has) whatever the class,
|
||
which another watch's stop may take off. */
|
||
.stats.indexing { display: block; background: var(--card); }
|
||
.sess-indexing { position: relative; display: grid; grid-template-columns: minmax(250px, 34%) 1fr; align-items: center; gap: 8px; min-height: 164px; padding: 0 0 0 26px; overflow: hidden; }
|
||
.si-words { position: relative; z-index: 1; display: grid; gap: 4px; min-width: 0; padding: 22px 0; }
|
||
.si-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--fg); }
|
||
.si-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.si-spin { width: 12px; height: 12px; border-radius: 50%; flex: none; background: conic-gradient(from 0deg, transparent 0 8%, var(--accent) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.75px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.75px), #000 calc(100% - 1.5px)); animation: si-spin .9s linear infinite; }
|
||
@keyframes si-spin { to { transform: rotate(1turn); } }
|
||
.sess-indexing.done .si-spin { animation: none; background: var(--accent); }
|
||
.si-pct { display: flex; align-items: baseline; gap: 2px; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1; }
|
||
.si-pct b { font-size: 38px; font-weight: 600; letter-spacing: -.035em; color: var(--fg); }
|
||
.si-pct span { font-size: 15px; font-weight: 500; color: var(--muted); }
|
||
.sess-indexing:not(.known) .si-pct { display: none; }
|
||
.si-line { margin-top: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.si-tip { font-size: 11.5px; color: var(--faint, var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.si-tip.in { animation: si-tip .6s ease-out; }
|
||
@keyframes si-tip { from { opacity: 0; transform: translateY(3px); } }
|
||
.si-field { position: relative; align-self: stretch; min-width: 0;
|
||
-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 94%, transparent);
|
||
mask-image: linear-gradient(90deg, transparent, #000 14%, #000 94%, transparent); }
|
||
.si-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||
.si-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
|
||
.si-bar i { position: absolute; inset: 0 auto 0 0; width: 22%; background: linear-gradient(90deg, transparent, var(--accent));
|
||
box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
|
||
animation: si-sweep 2.2s cubic-bezier(.5, 0, .3, 1) infinite; }
|
||
@keyframes si-sweep { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
|
||
.sess-indexing.known .si-bar i { animation: none; transform: none; transition: width .5s ease-out; background: var(--accent); }
|
||
@container (max-width: 560px) {
|
||
.sess-indexing { display: block; padding: 0 20px; }
|
||
.si-field { position: absolute; inset: 0; opacity: .4; -webkit-mask-image: none; mask-image: none; }
|
||
}
|
||
/* Safari before 16 (macOS 12's, #220) has no container queries: the window's width instead */
|
||
@supports not (container-type: inline-size) {
|
||
@media (max-width: 620px) {
|
||
.sess-indexing { display: block; padding: 0 20px; }
|
||
.si-field { position: absolute; inset: 0; opacity: .4; -webkit-mask-image: none; mask-image: none; }
|
||
}
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.si-spin, .si-tip.in, .si-bar i { animation: none; }
|
||
.si-spin { background: conic-gradient(var(--accent) 0 70%, color-mix(in srgb, var(--accent) 20%, transparent) 0); }
|
||
.sess-indexing:not(.known) .si-bar i { width: 100%; opacity: .35; }
|
||
}
|
||
/* Safari before 16.2 (macOS 12's, #220) has no color-mix(): a declaration
|
||
with one is dropped, and where nothing else is under it the page would go
|
||
clear. The panel's paint (which tintPanel hands the system), and the
|
||
floating status, take a plain colour there instead. */
|
||
@supports not (color: color-mix(in srgb, red 50%, blue)) {
|
||
.led .src, .led .src.official { --badge-bg: var(--card); border-color: var(--line); }
|
||
body.panel { --panel-tint: var(--bg); }
|
||
.status.ok, .status.err, .status.warn { background: var(--bg); }
|
||
.status.lift { background: var(--card); }
|
||
}
|
||
/* ---- the panel's Usage tab: the window's Requests, made small ---------------- */
|
||
.panel-usage { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; }
|
||
.pu-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; }
|
||
.pu-bar .grow { flex: 1; }
|
||
.pu-bar .segs .opt { height: 22px; padding: 0 9px; font-size: 11.5px; }
|
||
.pu-bar .sess-pick { min-width: 0; max-width: 150px; }
|
||
.pu-bar .text { flex: none; font-size: 12px; }
|
||
.pu-tot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); }
|
||
.pu-tot .blk { min-width: 0; padding: 8px 10px 8px; }
|
||
.pu-tot .blk + .blk { border-left: 1px solid var(--line-2); }
|
||
.pu-tot .k { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.pu-tot .v { display: block; margin-top: 1px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||
.pu-tot .v.cost { color: var(--green); }
|
||
.pu-tot .sub { display: block; margin-top: 1px; font-size: 10.5px; color: var(--muted); white-space: normal; overflow: visible; text-overflow: clip; }
|
||
.pu-tot .sub.bad { color: var(--red); }
|
||
.pu-card { padding: 8px 10px 6px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); }
|
||
.pu-card .led-bar { margin-bottom: 4px; }
|
||
.pu-card .led-bar .segs .opt { height: 20px; padding: 0 8px; font-size: 11px; }
|
||
.pu-card .led-chart .plot { height: 124px; }
|
||
.pu-card .led-rank { margin-top: 4px; }
|
||
.pu-none { margin: 0; padding: 12px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); font-size: 12px; line-height: 1.55; color: var(--muted); }
|
||
.pu-none b { display: block; color: var(--fg); font-weight: 550; }
|
||
.skeleton.pu-sk { height: 52px; border-radius: 11px; }
|
||
.panel-usage.pu-loading :is(.pu-tot, .pu-card) { opacity: .55; }
|
||
.panel-usage :is(.pu-tot, .pu-card) { transition: opacity .15s; }
|
||
@media (max-width: 400px) {
|
||
.pu-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.pu-tot .blk:nth-child(3) { border-left: 0; }
|
||
.pu-tot .blk:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
|
||
}
|
||
|
||
/* how often the Usage page reads its numbers again, and a way to read them now */
|
||
.usage-refresh { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; }
|
||
.usage-refresh .icon { width: 24px; height: 24px; }
|
||
.usage-refresh .icon.busy svg { animation: spin .8s linear infinite; }
|
||
.usage-refresh .sess-pick { height: 24px; }
|
||
.led-rank .rk .rk-b { overflow-wrap: anywhere; }
|
||
|
||
/* ---- an agent's model list ------------------------------------------------ */
|
||
/* the line under an agent's name: quiet words, a pill only on hover */
|
||
body.window .row.agent .who.with-models { flex-wrap: wrap; row-gap: 0; }
|
||
.ag-models-line { flex: 0 0 100%; min-width: 0; display: flex; }
|
||
.ag-models { min-width: 0; display: inline-flex; align-items: center; gap: 4px; height: 20px; margin: 1px 0 -2px -6px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 11.5px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
|
||
.ag-models b { font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
|
||
.ag-models .chev { display: inline-flex; color: var(--faint); transition: transform .2s var(--ease, ease); }
|
||
.ag-models:hover, .ag-models.open { background: var(--pill); color: var(--fg-2); }
|
||
.ag-models.open .chev { transform: rotate(90deg); }
|
||
.ag-models:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 1px; }
|
||
|
||
.pop.am-pop { overflow: visible; max-height: 560px; padding: 14px 6px 8px; border-radius: 14px; background: var(--pop-bg); }
|
||
/* the arrow at the line it grows from */
|
||
.pop.am-pop::before { content: ""; position: absolute; left: calc(var(--ox, 24px) - 6px); top: -5px; width: 12px; height: 12px; background: var(--pop-bg); transform: rotate(45deg); border-radius: 2px 0 0 0; box-shadow: -.5px -.5px 0 color-mix(in srgb, var(--fg) 10%, transparent); }
|
||
.pop.am-pop.up::before { top: auto; bottom: -5px; border-radius: 0 0 2px 0; box-shadow: .5px .5px 0 color-mix(in srgb, var(--fg) 10%, transparent); }
|
||
.am-head { padding: 0 12px; }
|
||
.am-t { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
|
||
.am-d { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted); }
|
||
.am-tools { display: flex; align-items: center; gap: 8px; margin: 12px 12px 6px; }
|
||
.am-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 8px; background: var(--pill); color: var(--faint); }
|
||
.pop.am-pop .am-search input { flex: 1; min-width: 0; height: 28px; border: 0; outline: none; background: none; color: var(--fg); font: inherit; font-size: 12.5px; }
|
||
.am-search:focus-within { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
|
||
.am-seg { display: inline-flex; flex: none; padding: 2px; border-radius: 8px; background: var(--seg-track); }
|
||
.am-seg button { height: 24px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--ctl-fg); font: inherit; font-size: 12px; cursor: pointer; transition: background-color .15s, color .15s; }
|
||
.am-seg button.on { background: var(--seg-thumb); color: var(--fg); box-shadow: var(--seg-edge); }
|
||
.am-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2px; }
|
||
.am-gh { display: flex; align-items: center; margin: 6px 2px 0; }
|
||
.am-fold { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
|
||
.am-fold > .ic, .am-fold > svg { width: 14px; height: 14px; flex: none; }
|
||
.am-fold .tw { display: inline-flex; width: 10px; color: var(--faint); }
|
||
.am-fold .tw svg { transition: transform .2s var(--ease, ease); }
|
||
.am-g.shut .am-fold .tw svg { transform: rotate(-90deg); }
|
||
.am-fold .gn { color: var(--fg-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.am-fold .c { font-variant-numeric: tabular-nums; }
|
||
.am-all { flex: none; height: 24px; margin-right: 6px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--accent); font: inherit; font-size: 11.5px; cursor: pointer; opacity: 0; transition: opacity .15s, background-color .15s; }
|
||
.am-gh:hover .am-all { opacity: 1; }
|
||
.am-all:focus-visible { opacity: 1; }
|
||
.am-all:hover { background: var(--accent-soft); }
|
||
@media (hover: none) { .am-all { opacity: 1; } }
|
||
.am-mr { display: flex; align-items: center; gap: 10px; width: calc(100% - 4px); height: 32px; margin: 0 2px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--fg); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background-color .12s; }
|
||
.am-mr:hover { background: var(--pill); }
|
||
/* under its group: the model's icon in the group icon's column, past the
|
||
twisty, so the rows read as the group's */
|
||
.am-rows .am-mr { padding-left: 28px; }
|
||
.am-mr:focus-visible { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
|
||
.am-mr .lg { flex: none; }
|
||
.am-mr .lg > svg { color: var(--muted); }
|
||
.am-mr.off .lg { opacity: .45; }
|
||
/* a routing group's providers, discs as in a picker's field, in one width of slot, so the
|
||
names still start in a column */
|
||
.am-g.routes .am-mr .lg { min-width: 56px; justify-content: flex-start; }
|
||
.am-mr .ic-stack .disc { width: 17px; height: 17px; }
|
||
.am-mr .ic-stack .disc > .ic { width: 11px !important; height: 11px !important; }
|
||
.am-mr .n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
|
||
.am-mr .x { flex: none; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
|
||
.am-mr .ck { flex: none; display: inline-flex; justify-content: center; width: 16px; color: var(--accent); }
|
||
.am-mr.off .n { color: var(--faint); }
|
||
.am-mr.lock { cursor: default; }
|
||
.am-mr.lock:hover { background: none; }
|
||
.am-mr.lock .ck { opacity: .45; }
|
||
.am-tag { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 500; }
|
||
.am-none { padding: 18px 12px; color: var(--muted); font-size: 12.5px; text-align: center; }
|
||
.am-foot { display: flex; align-items: center; gap: 8px; margin: 8px 8px 0; padding: 10px 6px 2px; border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--muted); }
|
||
.am-foot .sp { flex: 1; }
|
||
.am-reset { border: 0; background: none; padding: 2px 4px; border-radius: 5px; color: var(--fg-2); font: inherit; font-size: 11.5px; cursor: pointer; }
|
||
.am-reset:hover:not(:disabled) { color: var(--accent); }
|
||
.am-reset:disabled { color: var(--faint); cursor: default; }
|
||
.am-dot { color: var(--faint); }
|