849dd27119
Some checks failed
plugin-tests / test (push) Failing after 6s
Header now shows ↗ BTE button next to the profile status pill. Click invokes window.SvrntyBTE.open() to surface the BTE overlay, satisfying the "Adwright pulls content from BTE panel" integration goal at the UX level. Asset-URL-level integration follows automatically once cycles contain BTE-rendered asset references (post Phase 8). Themed via existing CSS vars (--accent, --border2, --accent-bg, etc) — zero hardcoded colors. CONNECTION-MAP regenerated. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
477 lines
12 KiB
CSS
477 lines
12 KiB
CSS
/* ============================================================================
|
|
Adwright tool panel — injected into hermes-webui as a sibling to #mainChat.
|
|
Per ADWRIGHT-PANEL-PRD §7: ZERO hardcoded colors, all selectors prefixed
|
|
.svrnty-aw-*, themed via WebUI CSS vars so light/dark token-flips for free.
|
|
============================================================================ */
|
|
|
|
/* ── Layout — 60/40 panel/chat split inside <main class="main"> ──────────── */
|
|
/* When the Adwright panel is mounted, force main into a row flex so the
|
|
panel sits at 60% and #mainChat (existing) sits at 40%. We only override
|
|
when our wrapper is present so we don't break other views. */
|
|
main.main:has(> .svrnty-aw-panel) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
}
|
|
main.main:has(> .svrnty-aw-panel) > .svrnty-aw-panel {
|
|
flex: 0 0 60%;
|
|
max-width: 60%;
|
|
}
|
|
main.main:has(> .svrnty-aw-panel) > #mainChat {
|
|
flex: 0 0 40%;
|
|
max-width: 40%;
|
|
}
|
|
|
|
.svrnty-aw-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-ui);
|
|
border-right: 1px solid var(--border2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Header ─────────────────────────────────────────────────────────────── */
|
|
.svrnty-aw-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--border2);
|
|
background: var(--surface);
|
|
flex: 0 0 auto;
|
|
}
|
|
.svrnty-aw-title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.svrnty-aw-status {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.svrnty-aw-status-dot {
|
|
width: 7px; height: 7px;
|
|
border-radius: var(--radius-pill, 9999px);
|
|
background: var(--muted);
|
|
flex-shrink: 0;
|
|
}
|
|
.svrnty-aw-status-dot.svrnty-aw-active { background: var(--success); }
|
|
.svrnty-aw-status-dot.svrnty-aw-inactive { background: var(--muted); }
|
|
|
|
/* ── Body — left nav + content ─────────────────────────────────────────── */
|
|
.svrnty-aw-body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.svrnty-aw-nav {
|
|
flex: 0 0 140px;
|
|
border-right: 1px solid var(--border2);
|
|
background: var(--sidebar, var(--surface));
|
|
padding: 8px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.svrnty-aw-nav-item {
|
|
appearance: none;
|
|
background: transparent;
|
|
border: 0;
|
|
border-left: 2px solid transparent;
|
|
color: var(--muted);
|
|
text-align: left;
|
|
padding: 8px 14px;
|
|
font-family: var(--font-ui);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: background 0.1s, color 0.1s, border-color 0.1s;
|
|
}
|
|
.svrnty-aw-nav-item:hover {
|
|
background: var(--hover-bg);
|
|
color: var(--text);
|
|
}
|
|
.svrnty-aw-nav-item.svrnty-aw-nav-active {
|
|
color: var(--accent-text, var(--accent));
|
|
border-left-color: var(--accent);
|
|
background: var(--accent-bg);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.svrnty-aw-content {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
min-width: 0;
|
|
}
|
|
.svrnty-aw-disabled-banner {
|
|
margin: 0 0 12px 0;
|
|
padding: 10px 12px;
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-md);
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ── Tab pane visibility ─────────────────────────────────────────────────── */
|
|
.svrnty-aw-tab { display: none; }
|
|
.svrnty-aw-tab.svrnty-aw-tab-active { display: block; }
|
|
|
|
.svrnty-aw-tab-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 14px;
|
|
gap: 12px;
|
|
}
|
|
.svrnty-aw-tab-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────────────────────── */
|
|
.svrnty-aw-btn {
|
|
appearance: none;
|
|
background: transparent;
|
|
border: 1px solid var(--border2);
|
|
color: var(--text);
|
|
font-family: var(--font-ui);
|
|
font-size: 12px;
|
|
padding: 5px 12px;
|
|
border-radius: var(--radius-sm, 8px);
|
|
cursor: pointer;
|
|
transition: background 0.1s, border-color 0.1s, color 0.1s;
|
|
}
|
|
.svrnty-aw-btn:hover {
|
|
background: var(--hover-bg);
|
|
border-color: var(--accent);
|
|
color: var(--accent-text, var(--accent));
|
|
}
|
|
.svrnty-aw-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.svrnty-aw-btn-primary {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--bg);
|
|
}
|
|
.svrnty-aw-btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
border-color: var(--accent-hover);
|
|
color: var(--bg);
|
|
}
|
|
|
|
/* ── KPI cards (Overview) ────────────────────────────────────────────────── */
|
|
.svrnty-aw-kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.svrnty-aw-kpi {
|
|
padding: 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.svrnty-aw-kpi-label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.svrnty-aw-kpi-value {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-top: 4px;
|
|
color: var(--strong, var(--text));
|
|
}
|
|
.svrnty-aw-kpi-delta {
|
|
font-size: 11px;
|
|
margin-top: 2px;
|
|
}
|
|
.svrnty-aw-kpi-delta-up { color: var(--success); }
|
|
.svrnty-aw-kpi-delta-down { color: var(--error); }
|
|
|
|
.svrnty-aw-spend-bar {
|
|
height: 10px;
|
|
background: var(--code-bg);
|
|
border-radius: var(--radius-pill, 9999px);
|
|
overflow: hidden;
|
|
margin-top: 6px;
|
|
border: 1px solid var(--border2);
|
|
}
|
|
.svrnty-aw-spend-bar-fill {
|
|
height: 100%;
|
|
background: var(--accent);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* ── Timeline (last-flow on Overview) ─────────────────────────────────── */
|
|
.svrnty-aw-section {
|
|
margin-top: 18px;
|
|
}
|
|
.svrnty-aw-section-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 8px;
|
|
}
|
|
.svrnty-aw-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.svrnty-aw-timeline-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-sm, 8px);
|
|
}
|
|
.svrnty-aw-timeline-time {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
flex: 0 0 80px;
|
|
}
|
|
.svrnty-aw-timeline-text {
|
|
font-size: 12px;
|
|
flex: 1 1 auto;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── List rows (Cycles, Audience) ────────────────────────────────────────── */
|
|
.svrnty-aw-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.svrnty-aw-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: border-color 0.1s, background 0.1s;
|
|
}
|
|
.svrnty-aw-row:hover {
|
|
border-color: var(--accent);
|
|
background: var(--hover-bg);
|
|
}
|
|
.svrnty-aw-row-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
.svrnty-aw-row-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
.svrnty-aw-row-sub {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
.svrnty-aw-row-meta {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
text-align: right;
|
|
flex: 0 0 auto;
|
|
}
|
|
.svrnty-aw-row-expanded {
|
|
margin-top: 6px;
|
|
padding: 10px 12px;
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-sm, 8px);
|
|
font-size: 12px;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── Targeting matrix ────────────────────────────────────────────────────── */
|
|
.svrnty-aw-matrix {
|
|
display: grid;
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
}
|
|
.svrnty-aw-matrix-cell {
|
|
padding: 8px 10px;
|
|
border-right: 1px solid var(--border2);
|
|
border-bottom: 1px solid var(--border2);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
text-align: center;
|
|
}
|
|
.svrnty-aw-matrix-head {
|
|
background: var(--code-bg);
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
font-size: 10px;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.svrnty-aw-matrix-row-label {
|
|
background: var(--code-bg);
|
|
text-align: left;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── Connections (status + provisioning form) ────────────────────────────── */
|
|
.svrnty-aw-conn-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.svrnty-aw-conn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.svrnty-aw-conn-name {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.svrnty-aw-conn-pill {
|
|
font-size: 11px;
|
|
padding: 3px 10px;
|
|
border-radius: var(--radius-pill, 9999px);
|
|
background: var(--code-bg);
|
|
color: var(--muted);
|
|
border: 1px solid var(--border2);
|
|
}
|
|
.svrnty-aw-conn-pill.svrnty-aw-ok { color: var(--success); border-color: var(--success); }
|
|
.svrnty-aw-conn-pill.svrnty-aw-fail { color: var(--error); border-color: var(--error); }
|
|
|
|
.svrnty-aw-form {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 14px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-md);
|
|
margin-top: 8px;
|
|
}
|
|
.svrnty-aw-form.svrnty-aw-open { display: flex; }
|
|
.svrnty-aw-form-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.svrnty-aw-form-row label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.svrnty-aw-form-row input {
|
|
font-family: var(--font-ui);
|
|
font-size: 13px;
|
|
padding: 7px 10px;
|
|
background: var(--input-bg);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-sm, 8px);
|
|
color: var(--text);
|
|
}
|
|
.svrnty-aw-form-row input:focus {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: -1px;
|
|
border-color: var(--accent);
|
|
}
|
|
.svrnty-aw-form-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
margin-top: 4px;
|
|
}
|
|
.svrnty-aw-form-note {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
background: var(--code-bg);
|
|
padding: 8px 10px;
|
|
border-radius: var(--radius-sm, 8px);
|
|
border: 1px solid var(--border2);
|
|
}
|
|
|
|
/* ── Empty + loading states ─────────────────────────────────────────────── */
|
|
.svrnty-aw-empty,
|
|
.svrnty-aw-loading {
|
|
padding: 24px 12px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ── Toast (action feedback) ────────────────────────────────────────────── */
|
|
.svrnty-aw-toast {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
padding: 10px 14px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-md);
|
|
font-size: 12px;
|
|
color: var(--text);
|
|
z-index: 9999;
|
|
box-shadow: 0 4px 12px var(--focus-glow);
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
pointer-events: none;
|
|
}
|
|
.svrnty-aw-toast.svrnty-aw-toast-show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.svrnty-aw-toast.svrnty-aw-toast-error { border-color: var(--error); color: var(--error); }
|
|
.svrnty-aw-toast.svrnty-aw-toast-success { border-color: var(--success); color: var(--success); }
|
|
|
|
/* Cross-panel link button (Adwright header → BTE overlay) */
|
|
.svrnty-aw-bte-link {
|
|
margin-left: 12px;
|
|
padding: 4px 10px;
|
|
background: transparent;
|
|
border: 1px solid var(--border2);
|
|
border-radius: var(--radius-md);
|
|
font-size: 12px;
|
|
font-family: var(--font-ui);
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
transition: background 0.15s, border-color 0.15s;
|
|
}
|
|
.svrnty-aw-bte-link:hover {
|
|
background: var(--accent-bg);
|
|
border-color: var(--accent);
|
|
}
|