1601 lines
32 KiB
CSS
1601 lines
32 KiB
CSS
@import "tailwindcss";
|
||
|
||
/*
|
||
* Design system — see DESIGN.md (source of truth). emdash-matched: flat near-black
|
||
* neutral ramp, hairline borders, system font, refined-blue accent (not emdash's
|
||
* jade). Dark is primary (:root); light is the supported override
|
||
* (:root[data-theme="light"]). The Zustand theme toggle sets data-theme on <html>.
|
||
*/
|
||
@theme inline {
|
||
--font-sans:
|
||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Helvetica Neue",
|
||
sans-serif;
|
||
/* Nerd Font stack (ported from yyork): the terminal reads --font-mono so
|
||
* agent TUIs get powerline separators and file-type icons. These are
|
||
* system-installed fonts — the app bundles none — and the browser picks the
|
||
* first one present, falling back to plain monospace (no icon glyphs) if a
|
||
* user has no Nerd Font. JetBrainsMono Nerd Font is the primary target. */
|
||
--font-mono:
|
||
"JetBrainsMono Nerd Font Mono", "JetBrainsMono Nerd Font", "FiraCode Nerd Font Mono", "FiraCode Nerd Font",
|
||
"MesloLGS NF", "CaskaydiaCove Nerd Font Mono", "CaskaydiaCove Nerd Font", "Hack Nerd Font Mono", "Hack Nerd Font",
|
||
"Symbols Nerd Font Mono", "Symbols Nerd Font", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||
"Liberation Mono", "Courier New", monospace;
|
||
|
||
/* Surfaces */
|
||
--color-background: var(--bg);
|
||
--color-foreground: var(--fg);
|
||
--color-surface: var(--bg-1);
|
||
--color-card: var(--bg-1);
|
||
--color-card-foreground: var(--fg);
|
||
--color-raised: var(--bg-2);
|
||
--color-overlay: var(--bg-3);
|
||
--color-popover: var(--bg-1);
|
||
--color-popover-foreground: var(--fg);
|
||
/* shadcn input border uses border-input; map to our hairline border */
|
||
--color-input: var(--border);
|
||
--color-sidebar: var(--sidebar-bg);
|
||
--color-sidebar-foreground: var(--fg-muted);
|
||
--color-sidebar-primary: var(--accent);
|
||
--color-sidebar-primary-foreground: var(--accent-fg);
|
||
--color-sidebar-accent: var(--bg-2);
|
||
--color-sidebar-accent-foreground: var(--fg);
|
||
--color-sidebar-border: var(--border);
|
||
--color-sidebar-ring: var(--accent);
|
||
--color-terminal: var(--term-bg);
|
||
|
||
/* Text */
|
||
--color-muted: var(--bg-2);
|
||
--color-muted-foreground: var(--fg-muted);
|
||
--color-passive: var(--fg-passive);
|
||
--color-secondary: var(--bg-2);
|
||
--color-secondary-foreground: var(--fg-muted);
|
||
|
||
/* Accent (refined blue) — primary buttons, active session, focus */
|
||
--color-primary: var(--accent);
|
||
--color-primary-foreground: var(--accent-fg);
|
||
--color-accent: var(--accent);
|
||
--color-accent-foreground: var(--accent-fg);
|
||
--color-accent-weak: var(--accent-weak);
|
||
--color-accent-dim: var(--accent-dim);
|
||
--color-ring: var(--accent);
|
||
|
||
/* Borders */
|
||
--color-border: var(--border);
|
||
--color-border-strong: var(--border-1);
|
||
|
||
/* Status — map 1:1 to the daemon's derived statuses (agent-orchestrator
|
||
* palette): working=orange, needs-you=amber, mergeable=green, fail=red. */
|
||
--color-working: var(--orange);
|
||
--color-success: var(--green);
|
||
--color-success-strong: var(--green-strong);
|
||
--color-warning: var(--amber);
|
||
--color-error: var(--red);
|
||
|
||
/* shadcn "destructive" → our error red (Button destructive, Alert, etc.) */
|
||
--color-destructive: var(--red);
|
||
--color-destructive-foreground: #ffffff;
|
||
|
||
/* Theme-adaptive interactive surfaces (sidebar hovers, tabs, kanban chrome) */
|
||
--color-interactive-hover: var(--interactive-hover);
|
||
--color-interactive-active: var(--interactive-active);
|
||
|
||
--radius-sm: 4px;
|
||
--radius-md: 6px;
|
||
--radius-lg: 8px;
|
||
--radius-xl: 12px;
|
||
|
||
--animate-status-pulse: status-pulse 1.8s ease-in-out infinite;
|
||
--animate-overlay-in: overlay-in 150ms ease-out;
|
||
--animate-modal-in: modal-in 150ms ease-out;
|
||
}
|
||
|
||
:root {
|
||
/* Dark — cloned from the agent-orchestrator web app (packages/web). #0a0b0d
|
||
* base, #15171b is the only bordered surface, hairline white-alpha lines,
|
||
* blue accent, orange=working / amber=needs-you / green=mergeable / red=fail. */
|
||
--bg: #0a0b0d;
|
||
--bg-1: #15171b;
|
||
--bg-2: #1b1d22;
|
||
--bg-3: #212329;
|
||
--fg: #f4f5f7;
|
||
--fg-muted: #9ba1aa;
|
||
--fg-passive: #646a73;
|
||
--border: rgb(255 255 255 / 0.06);
|
||
--border-1: rgb(255 255 255 / 0.1);
|
||
--accent: #4d8dff;
|
||
--accent-fg: #ffffff;
|
||
--accent-weak: rgb(77 141 255 / 0.16);
|
||
--accent-dim: #24406e;
|
||
--orange: #f59f4c;
|
||
--green: #74b98a;
|
||
--green-strong: #74b98a;
|
||
--amber: #e8c14a;
|
||
--red: #ef6b6b;
|
||
--purple: #a78bfa;
|
||
/* Terminal — dark palette (light override below). */
|
||
--term-bg: #15171b;
|
||
--term-fg: #d7d7d2;
|
||
--term-green: #74b98a;
|
||
--term-dim: #7c7c7c;
|
||
--term-blue: #4d8dff;
|
||
--term-amber: #e8c14a;
|
||
--shadow: 0 1px 0 rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
|
||
/* Sidebar surface sits a step below --bg (cloned #08090b). */
|
||
--sidebar-bg: #08090b;
|
||
--interactive-hover: rgb(255 255 255 / 0.04);
|
||
--interactive-active: rgb(255 255 255 / 0.07);
|
||
--kanban-column-bg: rgb(255 255 255 / 0.018);
|
||
--kanban-pending-glow: rgb(255 255 255 / 0.02);
|
||
}
|
||
|
||
:root[data-theme="light"] {
|
||
/* Light — supported, not primary. */
|
||
--bg: #fcfcfc;
|
||
--bg-1: #ffffff;
|
||
--bg-2: #ededee;
|
||
--bg-3: #e4e4e6;
|
||
--fg: #1a1a1a;
|
||
--fg-muted: #666666;
|
||
--fg-passive: #9a9a9a;
|
||
--border: #e3e3e5;
|
||
--border-1: #d4d4d6;
|
||
--accent: #2563eb;
|
||
--accent-fg: #ffffff;
|
||
--accent-weak: rgb(37 99 235 / 0.12);
|
||
--accent-dim: #bcd2f7;
|
||
--sidebar-bg: var(--bg);
|
||
--orange: #c2410c;
|
||
--green: #1a7f37;
|
||
--green-strong: #1a7f37;
|
||
--amber: #9a6b00;
|
||
--red: #c0392b;
|
||
--purple: #7c3aed;
|
||
--interactive-hover: rgb(0 0 0 / 0.04);
|
||
--interactive-active: rgb(0 0 0 / 0.07);
|
||
--kanban-column-bg: rgb(0 0 0 / 0.02);
|
||
--kanban-pending-glow: rgb(0 0 0 / 0.03);
|
||
--term-bg: #fafafa;
|
||
--term-fg: #24292f;
|
||
--term-green: #1a7f37;
|
||
--term-dim: #6b7280;
|
||
--term-blue: #2563eb;
|
||
--term-amber: #9a6b00;
|
||
--shadow: 0 1px 0 rgb(0 0 0 / 0.03), 0 12px 30px rgb(20 30 50 / 0.1);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#root {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
font-family: var(--font-sans);
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
button,
|
||
input,
|
||
textarea,
|
||
select {
|
||
font: inherit;
|
||
}
|
||
|
||
:is(
|
||
button,
|
||
a[href],
|
||
summary,
|
||
select,
|
||
[role="button"],
|
||
[data-slot="select-trigger"],
|
||
[data-slot="select-item"],
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-sidebar="menu-button"],
|
||
[data-sidebar="menu-sub-button"]
|
||
):not(:disabled):not([aria-disabled="true"]) {
|
||
cursor: pointer;
|
||
}
|
||
|
||
:is(
|
||
button,
|
||
select,
|
||
[role="button"],
|
||
[data-slot="select-trigger"],
|
||
[data-slot="select-item"],
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-sidebar="menu-button"],
|
||
[data-sidebar="menu-sub-button"]
|
||
):disabled,
|
||
:is(
|
||
button,
|
||
select,
|
||
[role="button"],
|
||
[data-slot="select-trigger"],
|
||
[data-slot="select-item"],
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-sidebar="menu-button"],
|
||
[data-sidebar="menu-sub-button"]
|
||
)[aria-disabled="true"] {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.xterm {
|
||
height: 100%;
|
||
}
|
||
|
||
.terminal-pane-frame:fullscreen {
|
||
background: var(--bg);
|
||
}
|
||
|
||
.terminal-toolbar {
|
||
display: flex;
|
||
height: 56px;
|
||
flex: 0 0 56px;
|
||
align-items: center;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg);
|
||
padding: 0 18px;
|
||
}
|
||
|
||
.terminal-toolbar__label {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.terminal-toolbar__eyebrow {
|
||
flex: 0 0 auto;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.09em;
|
||
color: var(--fg-muted);
|
||
}
|
||
|
||
.terminal-toolbar__session {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--fg-passive);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.terminal-toolbar__controls {
|
||
display: flex;
|
||
margin-left: auto;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-family: var(--font-mono);
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.terminal-toolbar__control {
|
||
display: inline-flex;
|
||
width: 24px;
|
||
height: 24px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 0;
|
||
border-radius: 5px;
|
||
background: transparent;
|
||
color: var(--fg-passive);
|
||
cursor: pointer;
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
line-height: 1;
|
||
transition:
|
||
background 120ms ease,
|
||
color 120ms ease,
|
||
opacity 120ms ease;
|
||
}
|
||
|
||
.terminal-toolbar__control:hover {
|
||
background: var(--interactive-hover);
|
||
color: var(--fg);
|
||
}
|
||
|
||
.terminal-toolbar__control:focus-visible {
|
||
outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.terminal-toolbar__control:disabled {
|
||
cursor: default;
|
||
opacity: 0.35;
|
||
}
|
||
|
||
.terminal-toolbar__control:disabled:hover {
|
||
background: transparent;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.terminal-toolbar__control--icon {
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.terminal-toolbar__font-size {
|
||
width: 42px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--fg-muted);
|
||
}
|
||
|
||
:root[data-theme="light"] .xterm .xterm-viewport::-webkit-scrollbar-thumb {
|
||
background: rgb(0 0 0 / 0.12);
|
||
}
|
||
|
||
:root[data-theme="light"] .xterm .xterm-viewport:hover::-webkit-scrollbar-thumb {
|
||
background: rgb(0 0 0 / 0.2);
|
||
}
|
||
|
||
@keyframes status-pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.35;
|
||
}
|
||
}
|
||
|
||
@keyframes overlay-in {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes modal-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate(-50%, -50%) scale(0.95);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
}
|
||
|
||
/* ── Resizable panel handles (sidebar + inspector) ──────────────────────── */
|
||
.resize-handle {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 7px;
|
||
z-index: 5;
|
||
cursor: col-resize;
|
||
background: transparent;
|
||
touch-action: none;
|
||
}
|
||
|
||
.resize-handle--right {
|
||
right: -3px;
|
||
}
|
||
|
||
.resize-handle--left {
|
||
left: -3px;
|
||
}
|
||
|
||
.resize-handle::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 50%;
|
||
width: 1px;
|
||
transform: translateX(-50%);
|
||
background: transparent;
|
||
transition: background 0.12s ease;
|
||
}
|
||
|
||
.resize-handle:hover::after,
|
||
body.is-resizing-x .resize-handle::after {
|
||
background: var(--border);
|
||
}
|
||
|
||
body.is-resizing-x {
|
||
cursor: col-resize;
|
||
user-select: none;
|
||
}
|
||
|
||
/* No width transition while actively dragging the sidebar resize handle
|
||
* (shadcn's sidebar animates width for collapse/expand). */
|
||
body.is-resizing-x [data-slot="sidebar-gap"],
|
||
body.is-resizing-x [data-slot="sidebar-container"] {
|
||
transition: none;
|
||
}
|
||
|
||
/* ── Shell topbar (agent-orchestrator .dashboard-app-header) ──────────────
|
||
* One header for every screen (rendered by the shell layout), so one padding:
|
||
* AO's session-topbar values. Upstream splits this into a 14px dashboard
|
||
* header and a 16/14px session override; with the bar hoisted there is a
|
||
* single frame and the crumb never shifts between views. The bar spans the
|
||
* full window width with the sidebar pinned below it (approved divergence
|
||
* 2026-06-12), so its bottom border runs edge-to-edge and the sidebar border
|
||
* stops at the header instead of crossing the traffic-light strip. */
|
||
.dashboard-app-header {
|
||
display: flex;
|
||
height: 56px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 13px;
|
||
padding: 0 16px 0 14px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg);
|
||
z-index: 10;
|
||
}
|
||
|
||
.dashboard-app-header__project {
|
||
font-size: 14.5px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
line-height: 1;
|
||
color: var(--fg);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.topbar-project-line {
|
||
display: inline-flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dashboard-app-header__spacer {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.dashboard-app-header__actions {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dashboard-app-header__icon-btn {
|
||
display: grid;
|
||
width: 34px;
|
||
height: 34px;
|
||
place-items: center;
|
||
border-radius: 7px;
|
||
color: var(--fg-muted);
|
||
transition:
|
||
background 0.12s ease,
|
||
color 0.12s ease;
|
||
}
|
||
|
||
.dashboard-app-header__icon-btn:hover {
|
||
background: var(--interactive-hover);
|
||
color: var(--fg);
|
||
}
|
||
|
||
.dashboard-app-header__kill-btn {
|
||
display: inline-flex;
|
||
height: 30px;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border-radius: 6px;
|
||
border: 1px solid color-mix(in srgb, var(--red) 58%, transparent);
|
||
background: color-mix(in srgb, var(--red) 5%, transparent);
|
||
padding: 0 10px;
|
||
font-size: 12px;
|
||
font-weight: 650;
|
||
line-height: 1;
|
||
color: var(--red);
|
||
transition:
|
||
background 0.12s ease,
|
||
color 0.12s ease;
|
||
}
|
||
|
||
.dashboard-app-header__kill-btn:hover {
|
||
background: color-mix(in srgb, var(--red) 12%, transparent);
|
||
border-color: color-mix(in srgb, var(--red) 75%, transparent);
|
||
}
|
||
|
||
.dashboard-app-header__kill-confirm {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dashboard-app-header__kill-confirm-btn {
|
||
display: inline-flex;
|
||
height: 34px;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border-radius: 7px;
|
||
border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
|
||
padding: 0 12px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
color: var(--red);
|
||
background: color-mix(in srgb, var(--red) 10%, transparent);
|
||
transition: background 0.12s ease;
|
||
}
|
||
|
||
.dashboard-app-header__kill-confirm-btn:hover {
|
||
background: color-mix(in srgb, var(--red) 16%, transparent);
|
||
}
|
||
|
||
.dashboard-app-header__kill-confirm-btn:disabled {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.dashboard-app-header__kill-cancel-btn {
|
||
display: inline-flex;
|
||
height: 34px;
|
||
align-items: center;
|
||
border-radius: 7px;
|
||
padding: 0 10px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
color: var(--fg-muted);
|
||
transition: color 0.12s ease;
|
||
}
|
||
|
||
.dashboard-app-header__kill-cancel-btn:hover {
|
||
color: var(--fg);
|
||
}
|
||
|
||
.dashboard-app-header__kill-error {
|
||
font-size: 11px;
|
||
color: var(--red);
|
||
}
|
||
|
||
.dashboard-app-header__primary-btn {
|
||
display: inline-flex;
|
||
height: 34px;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border-radius: 7px;
|
||
padding: 0 15px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
background: var(--accent);
|
||
color: var(--accent-fg);
|
||
transition: filter 0.12s ease;
|
||
}
|
||
|
||
.dashboard-app-header__primary-btn:hover {
|
||
filter: brightness(1.08);
|
||
}
|
||
|
||
.dashboard-app-header__primary-btn:disabled {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.dashboard-app-header__primary-btn--compact {
|
||
height: 32px;
|
||
border-radius: 7px;
|
||
padding: 0 14px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.dashboard-app-header__accent-btn {
|
||
display: inline-flex;
|
||
height: 34px;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border-radius: 7px;
|
||
border: 1px solid var(--border);
|
||
padding: 0 15px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
background: var(--raised);
|
||
color: var(--fg-muted);
|
||
transition: background 0.12s ease;
|
||
}
|
||
|
||
.dashboard-app-header__accent-btn:hover {
|
||
background: var(--surface);
|
||
color: var(--fg);
|
||
}
|
||
|
||
.session-topbar__lead {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 13px;
|
||
}
|
||
|
||
/* ── macOS titlebar cluster (TitlebarNav) ─────────────────────────────────
|
||
* Fixed beside the traffic lights so the toggle/history buttons occupy the
|
||
* exact same spot in both sidebar states. The 56px strip matches the
|
||
* .dashboard-app-header height so the buttons share the topbar's center line
|
||
* (y 28) with the project crumb / bell; the lights match via
|
||
* trafficLightPosition y:20 in main.ts. Lights span x=14–66; the cluster
|
||
* starts a 13px group gap after them (the .dashboard-app-header gap), so
|
||
* the toggle reads as its own group rather than a fourth light. */
|
||
.titlebar-nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 79px;
|
||
z-index: 20;
|
||
display: flex;
|
||
height: 56px;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
.titlebar-nav__btn {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
/* macOS: the full-width header starts its content past the lights + fixed
|
||
* cluster: cluster right edge 79 + 3×28 + 2×2 = 167px, + the header's 13px
|
||
* group gap = 180px. */
|
||
.dashboard-app-header.is-under-titlebar-nav {
|
||
padding-left: 180px;
|
||
}
|
||
|
||
.topbar-project-pills-group {
|
||
display: inline-flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.topbar-identity-sep {
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.session-detail-mode-badge {
|
||
display: inline-flex;
|
||
height: 24px;
|
||
align-items: center;
|
||
gap: 4px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
padding: 0 8px;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.session-detail-mode-badge--neutral {
|
||
background: var(--surface);
|
||
color: var(--fg-muted);
|
||
}
|
||
|
||
.session-topbar__identity {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 11px;
|
||
}
|
||
|
||
.session-topbar__branch {
|
||
display: inline-flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-family: var(--font-mono);
|
||
font-size: 10.5px;
|
||
line-height: 1;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
/* ── Session inspector rail (agent-orchestrator SessionInspector) ───────── */
|
||
.session-inspector {
|
||
container-type: inline-size;
|
||
display: flex;
|
||
height: 100%;
|
||
min-height: 0;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
}
|
||
|
||
.session-inspector__tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
height: 47px;
|
||
flex-shrink: 0;
|
||
padding: 0 11px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.session-inspector__tab {
|
||
flex: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
padding: 7px 6px;
|
||
border-radius: 7px;
|
||
font-size: 11.5px;
|
||
font-weight: 600;
|
||
color: var(--fg-passive);
|
||
cursor: pointer;
|
||
transition:
|
||
background 0.12s ease,
|
||
color 0.12s ease;
|
||
}
|
||
|
||
.session-inspector__tab:hover {
|
||
background: var(--interactive-hover);
|
||
color: var(--fg);
|
||
}
|
||
|
||
.session-inspector__tab.is-active {
|
||
background: var(--interactive-active);
|
||
color: var(--fg);
|
||
}
|
||
|
||
.session-inspector__tab-icon {
|
||
display: inline-flex;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.session-inspector__tab-icon svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.session-inspector__tab-label {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.session-inspector__body {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
padding: 18px 18px 40px;
|
||
}
|
||
|
||
/* Browser tab: the panel fills the rail edge-to-edge, so drop the body padding
|
||
and the panel's own border/radius so it sits flush against the resize handle. */
|
||
.session-inspector__body.session-inspector__body--browser {
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.session-inspector__body--browser .browser-panel {
|
||
border: 0;
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Inspector resize handle (shadcn resizable separator, AO visual): a 7px
|
||
* transparent grab strip whose centered 1px line lights accent on hover, drag
|
||
* (rrp sets data-separator="active"), and keyboard focus. */
|
||
.session-inspector__resize-handle {
|
||
width: 7px;
|
||
cursor: col-resize;
|
||
background: transparent;
|
||
touch-action: none;
|
||
}
|
||
|
||
.session-inspector__resize-handle::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 50%;
|
||
width: 1px;
|
||
transform: translateX(-50%);
|
||
background: var(--border-1);
|
||
transition: background 0.12s ease;
|
||
}
|
||
|
||
.session-inspector__resize-handle:hover::after,
|
||
.session-inspector__resize-handle:focus-visible::after,
|
||
.session-inspector__resize-handle[data-separator="active"]::after {
|
||
background: var(--border);
|
||
}
|
||
|
||
.reviewer-terminal-header {
|
||
display: flex;
|
||
height: 36px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--term-bg);
|
||
padding: 0 14px;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.reviewer-terminal-header__back {
|
||
display: inline-flex;
|
||
height: 24px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-1);
|
||
padding: 0 8px;
|
||
font-size: 11px;
|
||
color: var(--fg-muted);
|
||
transition:
|
||
background 0.12s ease,
|
||
color 0.12s ease;
|
||
}
|
||
|
||
.reviewer-terminal-header__back:hover {
|
||
background: var(--interactive-hover);
|
||
color: var(--fg);
|
||
}
|
||
|
||
.reviewer-terminal-header__back svg,
|
||
.reviewer-terminal-header__role svg {
|
||
width: 13px;
|
||
height: 13px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.reviewer-terminal-header__role {
|
||
display: inline-flex;
|
||
height: 24px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border-radius: 6px;
|
||
border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
|
||
background: color-mix(in srgb, var(--green) 9%, transparent);
|
||
padding: 0 9px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: #8bdc75;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
:root[data-theme="light"] .reviewer-terminal-header__role {
|
||
color: var(--green);
|
||
}
|
||
|
||
.reviewer-terminal-header__harness {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 13px;
|
||
font-weight: 650;
|
||
color: var(--fg);
|
||
}
|
||
|
||
/* Collapse/expand animation for the inspector panel: rrp v4 drives panel
|
||
* sizes via flex-grow, which is animatable. Suppress it while the separator
|
||
* is actively dragged so resizing tracks the pointer 1:1. */
|
||
.session-split #inspector[data-panel] {
|
||
transition: flex-grow 0.2s linear;
|
||
}
|
||
|
||
.session-split:has([data-separator="active"]) #inspector[data-panel] {
|
||
transition: none;
|
||
}
|
||
|
||
.inspector-section {
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
.inspector-section--separated {
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 18px;
|
||
}
|
||
|
||
.inspector-section__head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 11px;
|
||
font-size: 10.5px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.09em;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.inspector-section__link {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.inspector-section__link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.inspector-empty {
|
||
font-size: 12px;
|
||
color: var(--fg-muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.inspector-pr-summary {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.inspector-pr-summary__title {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 12.5px;
|
||
font-weight: 500;
|
||
color: var(--fg);
|
||
}
|
||
|
||
.inspector-pr-summary__state {
|
||
margin-left: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.reviewer-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.reviewer-kicker {
|
||
display: inline-flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
color: var(--fg);
|
||
}
|
||
|
||
.reviewer-kicker svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
flex-shrink: 0;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.reviewer-kicker span:first-of-type {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.reviewer-kicker span:last-child {
|
||
font-family: var(--font-sans);
|
||
font-size: 11.5px;
|
||
font-weight: 500;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.reviewer-error {
|
||
margin: 0;
|
||
border-radius: 6px;
|
||
border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
|
||
background: color-mix(in srgb, var(--red) 8%, transparent);
|
||
padding: 8px 10px;
|
||
font-size: 11.5px;
|
||
line-height: 1.45;
|
||
color: var(--red);
|
||
}
|
||
|
||
.reviewer-notice {
|
||
margin: 0;
|
||
border-radius: 6px;
|
||
border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
|
||
background: color-mix(in srgb, var(--green) 8%, transparent);
|
||
padding: 8px 10px;
|
||
font-size: 11.5px;
|
||
line-height: 1.45;
|
||
color: var(--green);
|
||
}
|
||
|
||
.reviewer-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-1);
|
||
padding: 12px;
|
||
}
|
||
|
||
.reviewer-card--success {
|
||
border-color: color-mix(in srgb, var(--green) 25%, var(--border));
|
||
}
|
||
|
||
.reviewer-card--danger {
|
||
border-color: color-mix(in srgb, var(--red) 22%, var(--border));
|
||
}
|
||
|
||
.reviewer-card__top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.reviewer-card__name {
|
||
display: inline-flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: var(--font-mono);
|
||
font-size: 12.5px;
|
||
font-weight: 600;
|
||
color: var(--fg);
|
||
}
|
||
|
||
.reviewer-card__name svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
flex-shrink: 0;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.reviewer-card__name span {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.reviewer-card__identity {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.reviewer-card__label {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 12px;
|
||
font-weight: 650;
|
||
color: var(--fg-muted);
|
||
}
|
||
|
||
.reviewer-status {
|
||
display: inline-flex;
|
||
height: 20px;
|
||
max-width: 58%;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 5px;
|
||
overflow: hidden;
|
||
border-radius: 6px;
|
||
padding: 0 8px;
|
||
font-size: 10.5px;
|
||
font-weight: 650;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.reviewer-status svg {
|
||
width: 13px;
|
||
height: 13px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.reviewer-status--neutral {
|
||
background: var(--bg-2);
|
||
color: var(--fg-muted);
|
||
}
|
||
|
||
.reviewer-status--running {
|
||
background: color-mix(in srgb, var(--orange) 12%, transparent);
|
||
color: var(--orange);
|
||
}
|
||
|
||
.reviewer-status--success {
|
||
background: color-mix(in srgb, var(--green) 14%, transparent);
|
||
color: var(--green);
|
||
}
|
||
|
||
.reviewer-status--danger {
|
||
background: color-mix(in srgb, var(--red) 14%, transparent);
|
||
color: var(--red);
|
||
}
|
||
|
||
.reviewer-card__actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.reviewer-card__actions:has(.reviewer-card__action:only-child) {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.reviewer-card__action {
|
||
display: inline-flex;
|
||
height: 38px;
|
||
min-width: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 7px;
|
||
overflow: hidden;
|
||
border-radius: 7px;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-2);
|
||
padding: 0 10px;
|
||
font-size: 12px;
|
||
font-weight: 650;
|
||
color: var(--fg-muted);
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
transition:
|
||
background 0.12s ease,
|
||
border-color 0.12s ease,
|
||
color 0.12s ease;
|
||
}
|
||
|
||
.reviewer-card__action svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.reviewer-card__action:hover:not(:disabled) {
|
||
background: var(--interactive-hover);
|
||
color: var(--fg);
|
||
}
|
||
|
||
.reviewer-card__action:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.reviewer-card__action--primary {
|
||
border-color: color-mix(in srgb, var(--green) 42%, transparent);
|
||
background: color-mix(in srgb, var(--green) 10%, transparent);
|
||
color: #8bdc75;
|
||
}
|
||
|
||
.reviewer-card__action--wide {
|
||
width: 100%;
|
||
}
|
||
|
||
.reviewer-summary-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
overflow: hidden;
|
||
border-radius: 7px;
|
||
border: 1px solid var(--border);
|
||
background: color-mix(in srgb, var(--bg-0) 35%, transparent);
|
||
}
|
||
|
||
.reviewer-row {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border-radius: 0;
|
||
border: 0;
|
||
border-bottom: 1px solid var(--border);
|
||
background: transparent;
|
||
padding: 11px 12px;
|
||
min-height: 52px;
|
||
}
|
||
|
||
.reviewer-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.reviewer-row--success {
|
||
border-color: var(--border);
|
||
}
|
||
|
||
.reviewer-row--danger {
|
||
border-color: var(--border);
|
||
}
|
||
|
||
.reviewer-row__main {
|
||
display: inline-flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 9px;
|
||
}
|
||
|
||
.reviewer-row__dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
flex-shrink: 0;
|
||
border-radius: 999px;
|
||
background: var(--fg-passive);
|
||
}
|
||
|
||
.reviewer-row__dot--running {
|
||
background: var(--orange);
|
||
}
|
||
|
||
.reviewer-row__dot--success {
|
||
background: var(--green);
|
||
}
|
||
|
||
.reviewer-row__dot--danger {
|
||
background: var(--red);
|
||
}
|
||
|
||
.reviewer-row__copy {
|
||
display: grid;
|
||
grid-template-columns: auto auto;
|
||
min-width: 0;
|
||
align-items: baseline;
|
||
column-gap: 6px;
|
||
row-gap: 2px;
|
||
font-size: 12px;
|
||
font-weight: 650;
|
||
color: var(--fg);
|
||
}
|
||
|
||
.reviewer-row__copy svg {
|
||
display: none;
|
||
width: 14px;
|
||
height: 14px;
|
||
flex-shrink: 0;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.reviewer-row__copy a {
|
||
grid-column: 1 / -1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.reviewer-row__copy a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.reviewer-row__number {
|
||
grid-column: 1;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.reviewer-row__verdict {
|
||
white-space: nowrap;
|
||
font-size: 11px;
|
||
font-weight: 650;
|
||
color: var(--fg-muted);
|
||
}
|
||
|
||
.reviewer-row__verdict--running {
|
||
color: var(--orange);
|
||
}
|
||
|
||
.reviewer-row__verdict--success {
|
||
color: var(--green);
|
||
}
|
||
|
||
.reviewer-row__verdict--danger {
|
||
color: var(--red);
|
||
}
|
||
|
||
@media (max-width: 680px) {
|
||
.reviewer-row {
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
}
|
||
}
|
||
|
||
:root[data-theme="light"] .reviewer-card__action--primary {
|
||
color: var(--green);
|
||
}
|
||
|
||
.inspector-empty--center {
|
||
padding: 24px 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.inspector-empty--browser {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 9px;
|
||
padding: 48px 18px;
|
||
text-align: center;
|
||
}
|
||
|
||
.inspector-empty--browser svg {
|
||
width: 30px;
|
||
height: 30px;
|
||
color: var(--fg-passive);
|
||
}
|
||
|
||
.inspector-empty--browser p {
|
||
font-size: 12.5px;
|
||
color: var(--fg-muted);
|
||
}
|
||
|
||
.inspector-empty--browser span {
|
||
font-size: 11.5px;
|
||
color: var(--fg-passive);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.inspector-kv {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
|
||
.inspector-kv__row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 6px 2px;
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
.inspector-kv__k {
|
||
width: 74px;
|
||
flex-shrink: 0;
|
||
color: var(--fg-muted);
|
||
}
|
||
|
||
.inspector-kv__v {
|
||
min-width: 0;
|
||
color: var(--fg);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.inspector-kv__v--mono {
|
||
font-family: var(--font-mono);
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
@container (max-width: 300px) {
|
||
.session-inspector__body {
|
||
padding-inline: 14px;
|
||
}
|
||
|
||
.inspector-pr-summary {
|
||
align-items: flex-start;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.inspector-pr-summary__state {
|
||
margin-left: 22px;
|
||
}
|
||
|
||
.inspector-kv__row {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.inspector-kv__k {
|
||
width: auto;
|
||
}
|
||
|
||
.inspector-kv__v {
|
||
width: 100%;
|
||
}
|
||
|
||
.reviewer-card {
|
||
gap: 12px;
|
||
padding: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.reviewer-card__top {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.reviewer-status {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.reviewer-card__actions {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.inspector-timeline {
|
||
position: relative;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.inspector-timeline::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 4px;
|
||
bottom: 6px;
|
||
width: 1px;
|
||
background: var(--border);
|
||
}
|
||
|
||
.inspector-timeline__ev {
|
||
position: relative;
|
||
padding: 0 0 15px;
|
||
}
|
||
|
||
.inspector-timeline__ev:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.inspector-timeline__node {
|
||
position: absolute;
|
||
left: -18px;
|
||
top: 3px;
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 50%;
|
||
background: var(--fg-passive);
|
||
box-shadow: 0 0 0 3px var(--bg);
|
||
}
|
||
|
||
.inspector-timeline__ev--now .inspector-timeline__node {
|
||
background: var(--orange);
|
||
box-shadow:
|
||
0 0 0 3px var(--bg),
|
||
0 0 8px var(--orange);
|
||
}
|
||
|
||
.inspector-timeline__ev--good .inspector-timeline__node {
|
||
background: var(--green);
|
||
}
|
||
|
||
.inspector-timeline__ev--warn .inspector-timeline__node {
|
||
background: var(--amber);
|
||
}
|
||
|
||
.inspector-timeline__ev--bad .inspector-timeline__node {
|
||
background: var(--red);
|
||
}
|
||
|
||
.inspector-timeline__et {
|
||
font-size: 12px;
|
||
color: var(--fg);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.inspector-timeline__et b {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.inspector-timeline__badge {
|
||
display: inline-flex;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.inspector-timeline__detail {
|
||
color: var(--fg-muted);
|
||
}
|
||
|
||
.inspector-timeline__ets {
|
||
font-size: 10.5px;
|
||
color: var(--fg-passive);
|
||
font-family: var(--font-mono);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.browser-panel {
|
||
display: flex;
|
||
height: 100%;
|
||
min-height: 320px;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--bg);
|
||
}
|
||
|
||
.browser-panel__toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
flex-shrink: 0;
|
||
min-width: 0;
|
||
padding: 7px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--surface);
|
||
}
|
||
|
||
.browser-panel__url {
|
||
position: relative;
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.browser-panel__url-icon {
|
||
position: absolute;
|
||
left: 9px;
|
||
top: 50%;
|
||
width: 14px;
|
||
height: 14px;
|
||
transform: translateY(-50%);
|
||
color: var(--fg-passive);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.browser-panel__url-input {
|
||
height: 29px;
|
||
padding-left: 29px;
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.browser-panel__content {
|
||
position: relative;
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
background: var(--bg);
|
||
}
|
||
|
||
.browser-panel__slot {
|
||
position: absolute;
|
||
inset: 0;
|
||
min-width: 1px;
|
||
min-height: 1px;
|
||
}
|
||
|
||
.browser-panel__overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 20px;
|
||
text-align: center;
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--fg-passive);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.browser-panel__error {
|
||
position: absolute;
|
||
left: 10px;
|
||
right: 10px;
|
||
bottom: 10px;
|
||
margin: 0;
|
||
padding: 8px 10px;
|
||
border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
|
||
border-radius: 7px;
|
||
background: color-mix(in srgb, var(--red) 8%, var(--bg));
|
||
color: var(--red);
|
||
font-size: 12px;
|
||
}
|