2129 lines
53 KiB
CSS
2129 lines
53 KiB
CSS
|
|
/* Theme definitions according to A29 Design System "Крона" */
|
|
:root {
|
|
/* Common variables */
|
|
--status-healthy: #72C943;
|
|
--status-warning: #E1A62B;
|
|
--status-error: #E45C4F;
|
|
--status-info: #4C8DD8;
|
|
--status-disabled: #708078;
|
|
|
|
--prov-antigravity: #74A9FF;
|
|
--prov-codex: #46BE8A;
|
|
--prov-opencode: #F39A50;
|
|
--prov-claude: #DF9C63;
|
|
--prov-grok: #3B82F6;
|
|
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
|
|
--font-ui: 'Inter', "Segoe UI", -apple-system, sans-serif;
|
|
--font-title: "Cinzel", "Cinzel Decorative", "Segoe UI", serif;
|
|
--font-mono: "Consolas", "Courier New", monospace;
|
|
|
|
--header-height: 58px;
|
|
--sidebar-width: 230px;
|
|
}
|
|
|
|
/* Default DARK theme */
|
|
:root, body[data-theme="dark"] {
|
|
--bg-base: #101510;
|
|
--bg-sidebar: #0D120D;
|
|
--bg-header: #0D120D;
|
|
--bg-statusbar: #0D120D;
|
|
--bg-modal-backdrop: rgba(16, 21, 16, 0.85);
|
|
|
|
--surface: #1A2A1F;
|
|
--surface-hover: #2F4A36;
|
|
--surface-active: #3C5C44;
|
|
--surface-selected: #28402F;
|
|
--surface-muted: #152219;
|
|
|
|
--border: #36513B;
|
|
--border-subtle: #203A2D;
|
|
--border-accent: #CDAA64;
|
|
--border-hover: #537456;
|
|
|
|
--text-primary: #F7F1E3;
|
|
--text-secondary: #B0B8B2;
|
|
--text-muted: #8FA395;
|
|
--text-accent: #CDAA64;
|
|
|
|
--accent: #CDAA64;
|
|
--accent-hover: #E0B84E;
|
|
--accent-pressed: #A9781E;
|
|
--accent-dim: rgba(205, 170, 100, 0.15);
|
|
}
|
|
|
|
/* MEDIUM theme (cream cards on green canvas) */
|
|
body[data-theme="medium"] {
|
|
--bg-base: #1A2A1F;
|
|
--bg-sidebar: #152219;
|
|
--bg-header: #152219;
|
|
--bg-statusbar: #152219;
|
|
--bg-modal-backdrop: rgba(26, 42, 31, 0.85);
|
|
|
|
--surface: #F7F1E3;
|
|
--surface-hover: #F0EAD6;
|
|
--surface-active: #E6DFCB;
|
|
--surface-selected: #EAE3CF;
|
|
--surface-muted: #2F4A36;
|
|
|
|
--border: #D1C7AE;
|
|
--border-subtle: #E0D7BF;
|
|
--border-accent: #CDAA64;
|
|
--border-hover: #B7A88D;
|
|
|
|
--text-primary: #101510;
|
|
--text-secondary: #2F4A36;
|
|
--text-muted: #537456;
|
|
--text-accent: #B78525;
|
|
|
|
--accent: #B78525;
|
|
--accent-hover: #CDAA64;
|
|
--accent-pressed: #9A6F1D;
|
|
--accent-dim: rgba(183, 133, 37, 0.15);
|
|
}
|
|
|
|
/* LIGHT theme */
|
|
body[data-theme="light"] {
|
|
--bg-base: #F7F1E3;
|
|
--bg-sidebar: #F0EAD6;
|
|
--bg-header: #F0EAD6;
|
|
--bg-statusbar: #E6DFCB;
|
|
--bg-modal-backdrop: rgba(247, 241, 227, 0.85);
|
|
|
|
--surface: #FFFFFF;
|
|
--surface-hover: #FDFBF7;
|
|
--surface-active: #F4EEDF;
|
|
--surface-selected: #FAF7F0;
|
|
--surface-muted: #F0EAD6;
|
|
|
|
--border: #D1C7AE;
|
|
--border-subtle: #EAE3CF;
|
|
--border-accent: #CDAA64;
|
|
--border-hover: #C5BAA1;
|
|
|
|
--text-primary: #101510;
|
|
--text-secondary: #2F4A36;
|
|
--text-muted: #537456;
|
|
--text-accent: #B78525;
|
|
|
|
--accent: #B78525;
|
|
--accent-hover: #CDAA64;
|
|
--accent-pressed: #9A6F1D;
|
|
--accent-dim: rgba(183, 133, 37, 0.15);
|
|
}
|
|
/* Hermes Hub Web Client — Dark Theme & Cockpit Design System */
|
|
|
|
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-ui);
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
user-select: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ── Typography & Utilities ── */
|
|
.text-healthy { color: var(--status-healthy); }
|
|
.text-warning { color: var(--status-warning); }
|
|
.text-error { color: var(--status-error); }
|
|
.text-info { color: var(--status-info); }
|
|
.text-accent { color: var(--text-accent); }
|
|
.text-muted { color: var(--text-muted); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
|
|
/* ── App Layout ── */
|
|
.app-layout {
|
|
display: flex;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Sidebar ── */
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
min-width: var(--sidebar-width);
|
|
background-color: var(--bg-sidebar);
|
|
border-right: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.brand {
|
|
padding: 16px 18px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.brand-logo {
|
|
font-size: 22px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.brand-title {
|
|
display: block;
|
|
font-family: var(--font-title);
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
letter-spacing: 1px;
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.brand-subtitle {
|
|
display: block;
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.nav-menu {
|
|
flex: 1;
|
|
padding: 12px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 12px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-ui);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background-color: var(--surface-selected);
|
|
color: var(--text-accent);
|
|
border-color: var(--border-accent);
|
|
}
|
|
|
|
.nav-icon {
|
|
font-size: 15px;
|
|
display: inline-flex;
|
|
width: 18px;
|
|
}
|
|
|
|
.nav-label {
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-badge {
|
|
background-color: var(--surface-muted);
|
|
color: var(--text-muted);
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.source-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: var(--status-disabled);
|
|
display: inline-block;
|
|
}
|
|
|
|
.status-dot.healthy { background-color: var(--status-healthy); box-shadow: 0 0 6px var(--status-healthy); }
|
|
.status-dot.warning { background-color: var(--status-warning); }
|
|
.status-dot.error { background-color: var(--status-error); }
|
|
|
|
.version-tag {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ── Main Area ── */
|
|
.main-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: var(--bg-base);
|
|
}
|
|
|
|
/* ── Top Header ── */
|
|
.top-header {
|
|
height: var(--header-height);
|
|
background-color: var(--bg-header);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 0 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.header-readiness-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background-color: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.header-update-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background-color: rgba(225, 166, 43, 0.15);
|
|
border: 1px solid var(--status-warning);
|
|
color: var(--status-warning);
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.header-update-badge:hover {
|
|
background-color: rgba(225, 166, 43, 0.28);
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* ── Buttons ── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 7px 14px;
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-ui);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--accent);
|
|
color: #061916;
|
|
border-color: var(--border-accent);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--accent-hover);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: var(--surface);
|
|
color: var(--text-primary);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: var(--surface-hover);
|
|
border-color: var(--border-hover);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 4px 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ── Content Scroll Area ── */
|
|
.content-scroll {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px 24px;
|
|
}
|
|
|
|
.view-pane {
|
|
display: none;
|
|
}
|
|
|
|
.view-pane.active {
|
|
display: block;
|
|
}
|
|
|
|
.view-header-note {
|
|
background-color: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
padding: 10px 14px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* ── Toolbar & Filters ── */
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 6px 12px;
|
|
width: 340px;
|
|
}
|
|
|
|
.search-icon {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.search-box input {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
font-family: var(--font-ui);
|
|
font-size: 12px;
|
|
width: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
.search-box input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.filters-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.select-filter {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-ui);
|
|
font-size: 12px;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.select-filter:focus {
|
|
border-color: var(--border-accent);
|
|
}
|
|
|
|
.toolbar-stats {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── Provider Group & Account Cards Grid ── */
|
|
.provider-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.provider-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
padding: 8px 14px;
|
|
border-radius: var(--radius-sm);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.provider-group-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.provider-group-count {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.accounts-empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 48px 24px;
|
|
text-align: center;
|
|
background-color: var(--surface);
|
|
border: 1px dashed var(--border);
|
|
border-radius: var(--radius-md);
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.accounts-empty-state .empty-state-icon {
|
|
font-size: 40px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.accounts-empty-state h3 {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.accounts-empty-state p {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 18px;
|
|
max-width: 440px;
|
|
}
|
|
|
|
.accounts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
/* ── Compact Account Card (164px Fixed Height) ── */
|
|
.account-card {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
height: 164px;
|
|
padding: 10px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.account-card:hover {
|
|
background-color: var(--surface-hover);
|
|
border-color: var(--border-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.account-card.main-account {
|
|
border-color: var(--border-accent);
|
|
}
|
|
|
|
.account-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.account-provider-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.account-badges {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.badge-plan {
|
|
background-color: var(--accent-dim);
|
|
color: var(--text-accent);
|
|
border: 1px solid var(--border-accent);
|
|
}
|
|
|
|
.badge-status {
|
|
background-color: var(--surface-muted);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.badge-status.healthy { color: var(--status-healthy); }
|
|
.badge-status.warning { color: var(--status-warning); }
|
|
.badge-status.quota_exhausted { color: var(--status-error); }
|
|
.badge-status.auth_required { color: var(--status-warning); }
|
|
.badge-status.disabled { color: var(--status-disabled); }
|
|
|
|
.badge-unassigned {
|
|
background-color: var(--surface-muted);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.account-eligibility-warning {
|
|
margin-top: 6px;
|
|
padding: 6px 8px;
|
|
background: rgba(230, 162, 60, 0.12);
|
|
border-left: 3px solid var(--status-warning);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
color: var(--status-warning);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.role-answering-status {
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
margin: 6px 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.role-answering-status.healthy {
|
|
background-color: rgba(114, 201, 67, 0.1);
|
|
color: var(--status-healthy);
|
|
border: 1px solid rgba(114, 201, 67, 0.25);
|
|
}
|
|
|
|
.role-answering-status.warning {
|
|
background-color: rgba(225, 166, 43, 0.1);
|
|
color: var(--status-warning);
|
|
border: 1px solid rgba(225, 166, 43, 0.25);
|
|
}
|
|
|
|
.routing-toolbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
padding: 8px 12px;
|
|
background-color: var(--surface-muted);
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.account-identity-row {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.account-email {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.account-meta {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* ── Quota Cells Grid (Up to 4 pools) ── */
|
|
.account-quota-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4px 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.account-quota-grid.single-cell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.quota-cell {
|
|
background-color: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
padding: 4px 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.quota-cell-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.quota-cell-title {
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100px;
|
|
}
|
|
|
|
.quota-cell-value {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.quota-bar-track {
|
|
height: 4px;
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
margin: 3px 0 2px;
|
|
}
|
|
|
|
.quota-bar-fill {
|
|
height: 100%;
|
|
border-radius: 2px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.quota-cell-reset {
|
|
font-size: 9px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* ── Overview KPI Grid ── */
|
|
.overview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.kpi-card {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px;
|
|
}
|
|
|
|
.kpi-label {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.kpi-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.kpi-sub {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ── Section Cards ── */
|
|
.section-card {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 18px 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.section-card-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.section-card-subtitle {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ── Route Diagram ── */
|
|
.route-diagram-container {
|
|
display: flex;
|
|
gap: 16px;
|
|
overflow-x: auto;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.diagram-column {
|
|
flex: 1;
|
|
min-width: 220px;
|
|
background-color: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
padding: 12px;
|
|
}
|
|
|
|
.diagram-column-header {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--text-accent);
|
|
margin-bottom: 10px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.diagram-node {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 8px 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.diagram-node.active {
|
|
border-color: var(--status-healthy);
|
|
box-shadow: 0 0 8px rgba(114, 201, 67, 0.2);
|
|
}
|
|
|
|
/* ── Providers Grid ── */
|
|
.providers-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.provider-summary-card {
|
|
background-color: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
padding: 14px;
|
|
}
|
|
|
|
.provider-summary-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.provider-summary-stats {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.provider-models-tag {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
background-color: var(--bg-base);
|
|
padding: 6px 8px;
|
|
border-radius: var(--radius-sm);
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* ── Routing Pipelines List (Main Control Center) ── */
|
|
.routing-pipelines-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.pipeline-card {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.pipeline-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.pipeline-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.pipeline-desc {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.badge-quota {
|
|
background-color: rgba(64, 158, 255, 0.15);
|
|
color: var(--accent);
|
|
border: 1px solid rgba(64, 158, 255, 0.3);
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.badge-quota.warning {
|
|
background-color: rgba(230, 162, 60, 0.15);
|
|
color: var(--status-warning);
|
|
border-color: rgba(230, 162, 60, 0.3);
|
|
}
|
|
|
|
.badge-quota.error {
|
|
background-color: rgba(245, 108, 108, 0.15);
|
|
color: var(--status-error);
|
|
border-color: rgba(245, 108, 108, 0.3);
|
|
}
|
|
|
|
.badge-affinity {
|
|
background-color: var(--surface-muted);
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border-subtle);
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.pipeline-chain-flow {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
min-height: 100px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
/* ── Draggable Node Chip (HTML5 DND) ── */
|
|
.pipeline-node-chip {
|
|
background-color: var(--surface-muted);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 220px;
|
|
max-width: 280px;
|
|
cursor: grab;
|
|
user-select: none;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.pipeline-node-chip[draggable]:hover {
|
|
border-color: var(--accent);
|
|
background-color: var(--surface-hover);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.pipeline-node-chip.active {
|
|
border-color: var(--status-healthy);
|
|
background-color: var(--surface-hover);
|
|
box-shadow: 0 0 6px rgba(103, 194, 58, 0.2);
|
|
}
|
|
|
|
.pipeline-node-chip.dragging {
|
|
opacity: 0.45;
|
|
cursor: grabbing;
|
|
transform: scale(0.96);
|
|
border-style: dashed;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.pipeline-node-chip.drop-target {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 14px rgba(64, 158, 255, 0.5);
|
|
transform: scale(1.03);
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.node-top-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.node-rank {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.btn-node-remove {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
line-height: 1;
|
|
border-radius: var(--radius-xs);
|
|
transition: color 0.15s ease, background 0.15s ease;
|
|
}
|
|
|
|
.btn-node-remove:hover {
|
|
color: var(--status-error);
|
|
background: rgba(245, 108, 108, 0.15);
|
|
}
|
|
|
|
.node-identity {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.node-meta {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.mono-tag {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.node-model-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 6px;
|
|
padding-top: 6px;
|
|
border-top: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.node-model-label {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.node-model-select,
|
|
.diagram-model-select,
|
|
.diagram-account-select {
|
|
flex: 1;
|
|
background-color: var(--bg-base);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-xs);
|
|
color: var(--text-primary);
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
padding: 3px 6px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.diagram-account-select {
|
|
margin-bottom: 4px;
|
|
width: 100%;
|
|
font-family: var(--font-sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.node-model-select:focus,
|
|
.diagram-model-select:focus,
|
|
.diagram-account-select:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.node-model-refresh-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
}
|
|
|
|
.node-model-text {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.node-failover-warning {
|
|
font-size: 10px;
|
|
color: var(--status-warning);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.btn-xs {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.pipeline-arrow {
|
|
color: var(--accent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ── Settings Card ── */
|
|
.settings-card {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.settings-group-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.setting-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
gap: 16px;
|
|
}
|
|
|
|
.setting-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.setting-desc {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.input-text {
|
|
background-color: var(--surface-muted);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-ui);
|
|
font-size: 12px;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
outline: none;
|
|
width: 260px;
|
|
}
|
|
|
|
.input-text:focus {
|
|
border-color: var(--border-accent);
|
|
}
|
|
|
|
.settings-actions {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* ── Modal Layer ── */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--bg-modal-backdrop);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal-backdrop.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.modal-card {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border-accent);
|
|
border-radius: var(--radius-lg);
|
|
width: 680px;
|
|
max-width: 90vw;
|
|
max-height: 85vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
|
|
animation: modalAppear 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes modalAppear {
|
|
from { opacity: 0; transform: scale(0.96); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-close {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 14px 20px;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.modal-feedback {
|
|
padding: 8px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.modal-feedback.error {
|
|
background-color: rgba(228, 92, 79, 0.15);
|
|
border: 1px solid var(--status-error);
|
|
color: #FFD8D2;
|
|
}
|
|
|
|
.modal-feedback.success {
|
|
background-color: rgba(114, 201, 67, 0.15);
|
|
border: 1px solid var(--status-healthy);
|
|
color: #E2F8D5;
|
|
}
|
|
|
|
.modal-feedback.info {
|
|
background-color: rgba(76, 141, 216, 0.15);
|
|
border: 1px solid var(--status-info);
|
|
color: #D2E5FA;
|
|
}
|
|
|
|
/* ── Toast Notifications ── */
|
|
.toast-container {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
z-index: 10000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast {
|
|
background-color: var(--surface-hover);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
padding: 10px 16px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
animation: toastSlideIn 0.2s ease-out;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.toast.success { border-color: var(--status-healthy); }
|
|
.toast.error { border-color: var(--status-error); }
|
|
.toast.warning { border-color: var(--status-warning); }
|
|
|
|
@keyframes toastSlideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ── Scrollbars ── */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--border-hover);
|
|
}
|
|
|
|
/* ── Data Tables (Analytics) ── */
|
|
.table-responsive {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.data-table th {
|
|
background-color: var(--surface-muted);
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
text-transform: uppercase;
|
|
font-size: 10px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.data-table td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.data-table tr:hover td {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.cell-bar-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.cell-bar-track {
|
|
flex: 1;
|
|
height: 6px;
|
|
background: var(--surface-muted);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cell-bar-fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ── Readiness Banner (Health) ── */
|
|
.readiness-banner {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 18px 20px;
|
|
margin-bottom: 16px;
|
|
border-left: 4px solid var(--status-healthy);
|
|
}
|
|
|
|
.readiness-banner.degraded {
|
|
border-left-color: var(--status-warning);
|
|
}
|
|
|
|
.readiness-banner.critical {
|
|
border-left-color: var(--status-error);
|
|
}
|
|
|
|
.readiness-banner.limited {
|
|
border-left-color: var(--status-info);
|
|
}
|
|
|
|
.readiness-banner-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.readiness-banner-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.readiness-banner-summary {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.readiness-banner-stats {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.readiness-banner-stats strong {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ── Host Resources Grid (Health) ── */
|
|
.host-resources-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.host-resource-card {
|
|
background-color: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
padding: 14px;
|
|
}
|
|
|
|
.host-resource-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.host-resource-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.host-resource-value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.host-resource-bar {
|
|
height: 6px;
|
|
background: var(--surface);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.host-resource-fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.host-resource-sub {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── Warnings List (Health) ── */
|
|
.warnings-list {
|
|
padding: 14px;
|
|
}
|
|
|
|
.warning-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
background-color: rgba(225, 166, 43, 0.08);
|
|
border: 1px solid var(--status-warning);
|
|
border-radius: var(--radius-sm);
|
|
padding: 10px 14px;
|
|
margin-bottom: 8px;
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.warning-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.warning-icon {
|
|
font-size: 14px;
|
|
color: var(--status-warning);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* ── Logs Feed (Events) ── */
|
|
.logs-container {
|
|
max-height: 620px;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
}
|
|
|
|
.log-entry {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.log-entry:hover {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.log-timestamp {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
min-width: 65px;
|
|
}
|
|
|
|
.log-badge {
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
min-width: 54px;
|
|
text-align: center;
|
|
}
|
|
|
|
.log-badge.info { background: rgba(76, 141, 216, 0.2); color: var(--status-info); border: 1px solid var(--status-info); }
|
|
.log-badge.success { background: rgba(114, 201, 67, 0.2); color: var(--status-healthy); border: 1px solid var(--status-healthy); }
|
|
.log-badge.warning { background: rgba(225, 166, 43, 0.2); color: var(--status-warning); border: 1px solid var(--status-warning); }
|
|
.log-badge.error { background: rgba(228, 92, 79, 0.2); color: var(--status-error); border: 1px solid var(--status-error); }
|
|
|
|
.log-category {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
background: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.log-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.log-message {
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.log-details {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
font-family: var(--font-mono);
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* ── Settings View ── */
|
|
.mono-path {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
background: var(--surface-muted);
|
|
padding: 4px 8px;
|
|
border-radius: 3px;
|
|
border: 1px solid var(--border-subtle);
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
background: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.badge.healthy {
|
|
background: rgba(114, 201, 67, 0.15);
|
|
border-color: var(--status-healthy);
|
|
color: var(--status-healthy);
|
|
}
|
|
|
|
/* ── Light Theme Override ── */
|
|
|
|
|
|
/* Drag and Drop Styles */
|
|
.draggable-item {
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
.draggable-item:active {
|
|
cursor: grabbing;
|
|
}
|
|
.drop-zone {
|
|
min-height: 40px;
|
|
border: 1px dashed var(--border);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
transition: all 0.2s;
|
|
margin-top: 8px;
|
|
}
|
|
.drop-zone.drag-over {
|
|
border-color: var(--accent);
|
|
background-color: var(--accent-dim);
|
|
color: var(--accent);
|
|
}
|
|
.role-section {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.role-header {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.role-header h4 {
|
|
font-family: var(--font-title);
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.role-badge {
|
|
font-size: 10px;
|
|
background-color: var(--accent-dim);
|
|
color: var(--accent);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: var(--font-ui);
|
|
}
|
|
.account-row {
|
|
display: grid;
|
|
grid-template-columns: 24px 20px 200px 120px 120px 150px 80px 80px 24px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
background-color: var(--surface);
|
|
font-size: 12px;
|
|
}
|
|
.account-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.account-row.drag-over {
|
|
border-top: 2px solid var(--accent);
|
|
}
|
|
.drag-handle {
|
|
color: var(--text-muted);
|
|
cursor: grab;
|
|
text-align: center;
|
|
}
|
|
.provider-logo-sm {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
}
|
|
.available-account-card {
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
cursor: grab;
|
|
}
|
|
.available-account-card:hover {
|
|
border-color: var(--border);
|
|
background-color: var(--surface-hover);
|
|
}
|
|
.grid-header {
|
|
display: grid;
|
|
grid-template-columns: 24px 20px 200px 120px 120px 150px 80px 80px 24px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
background-color: var(--surface-muted);
|
|
}
|
|
|
|
/* A48 — Крона workspace. Surface and chrome have separate ink tokens so
|
|
cream cards remain legible against the medium theme's green workspace. */
|
|
:root, body[data-theme="dark"] {
|
|
--bg-base:#07120f; --bg-sidebar:#06110e; --bg-header:#07120f;
|
|
--surface:#0d1b16; --surface-muted:#10231c; --surface-hover:#172e23;
|
|
--surface-active:#253b27; --surface-selected:#182e20;
|
|
--border:#3d3924; --border-subtle:#2d3423; --border-accent:#9f7938;
|
|
--text-primary:#f2eedf; --text-secondary:#c5cbbb; --text-muted:#a3b0a0;
|
|
--accent:#dab568; --text-accent:#dab568; --chrome-ink:#f2eedf;
|
|
--chrome-muted:#b5bca9; --canvas-bg:#081811; --canvas-ink:#d8d4b6;
|
|
--surface-card:var(--surface); --accent-ink:#211c0e;
|
|
--sidebar-width:244px; --header-height:76px;
|
|
}
|
|
body[data-theme="medium"] {
|
|
--bg-base:#1a2a1f; --bg-sidebar:#102219; --bg-header:#15271c;
|
|
--surface:#f7f1e3; --surface-muted:#eee6d3; --surface-hover:#e8dec6;
|
|
--surface-active:#e4d7b8; --surface-selected:#eae0c8;
|
|
--border:#c9bea4; --border-subtle:#dbcfb5; --border-accent:#9b7429;
|
|
--text-primary:#1c2b20; --text-secondary:#3a4d3d; --text-muted:#57624e;
|
|
--accent:#89631d; --text-accent:#89631d; --chrome-ink:#f7f1e3;
|
|
--chrome-muted:#c3cbb9; --canvas-bg:#1a2a1f; --canvas-ink:#e5d2a6;
|
|
--status-healthy:#42732c; --status-warning:#86580e; --status-error:#a93428;
|
|
--status-info:#396ba0; --accent-ink:#fff9e9;
|
|
}
|
|
body[data-theme="light"] {
|
|
--bg-base:#f7f1e3; --bg-sidebar:#f3ecdb; --bg-header:#f7f1e3;
|
|
--surface:#fcf8ee; --surface-muted:#f0e8d7; --surface-hover:#eee3ca;
|
|
--surface-active:#e7d7b2; --surface-selected:#f0e4cb;
|
|
--border:#d4c5a5; --border-subtle:#e3d7be; --border-accent:#a67b2e;
|
|
--text-primary:#202b21; --text-secondary:#414e3e; --text-muted:#606951;
|
|
--accent:#8b631c; --text-accent:#8b631c; --chrome-ink:#202b21;
|
|
--chrome-muted:#606951; --canvas-bg:#f5eedb; --canvas-ink:#5c593e;
|
|
--status-healthy:#42732c; --status-warning:#86580e; --status-error:#a93428;
|
|
--status-info:#396ba0; --accent-ink:#fff9e9;
|
|
}
|
|
body { font-size:13px; font-variant-numeric:tabular-nums; user-select:text; }
|
|
button,input,select,textarea { font:inherit; }
|
|
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
|
|
button:disabled { opacity:.5; cursor:not-allowed; }
|
|
.brand { min-height:104px; padding:16px 12px; gap:6px; border:0; }
|
|
.brand-logo { width:68px; height:68px; object-fit:contain; flex-shrink:0; }
|
|
.brand-title { font-size:18px; font-weight:500; letter-spacing:.6px; }
|
|
.brand-subtitle { font-size:9px; letter-spacing:0; color:var(--chrome-muted); }
|
|
.nav-menu { padding:8px 12px; gap:5px; flex:0 1 auto; }
|
|
.nav-item { min-height:45px; padding:10px 12px; gap:14px; color:var(--chrome-ink); border-radius:6px; }
|
|
.nav-item.active { border-color:var(--border-accent); background:var(--surface-selected); color:var(--text-accent); }
|
|
.nav-icon { width:23px; height:23px; fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
|
|
body[data-theme="medium"] .nav-icon { stroke:var(--canvas-ink); }
|
|
.brand-panel { margin:auto 14px 18px; padding:20px 10px; border:1px solid var(--border-accent); border-radius:7px; text-align:center; color:var(--chrome-ink); }
|
|
.brand-panel img { width:110px; height:110px; object-fit:contain; }
|
|
.brand-panel p { font-size:12px; line-height:1.8; margin:12px 0; }
|
|
.brand-panel span { color:var(--chrome-muted); font-size:11px; }
|
|
.sidebar-footer { padding:14px 16px; border-color:var(--border-accent); }
|
|
.sidebar-footer .source-text,.sidebar-footer .version-tag { color:var(--chrome-muted); }
|
|
.main-wrapper { min-width:0; }
|
|
.top-header { min-height:var(--header-height); height:auto; flex-wrap:wrap; padding:14px 20px; gap:10px 18px; border-color:var(--border-accent); }
|
|
.header-left { flex:1; min-width:220px; gap:12px; flex-wrap:wrap; }
|
|
.header-title { color:var(--chrome-ink); font-size:20px; font-weight:600; }
|
|
.header-readiness-badge { font-weight:400; color:var(--text-secondary); background:var(--surface); }
|
|
.header-actions { gap:12px; }
|
|
.header-page-actions { display:flex; gap:10px; }
|
|
.header-search { min-width:178px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 12px; border:1px solid var(--border-accent); border-radius:6px; background:transparent; color:var(--chrome-muted); cursor:pointer; }
|
|
.header-search kbd { font-size:10px; }
|
|
.header-icon { width:32px; height:34px; background:transparent; border:0; font-size:23px; color:var(--chrome-muted); cursor:pointer; }
|
|
.hub-user { display:flex; align-items:center; gap:9px; color:var(--chrome-ink); font-size:12px; }
|
|
.hub-user>span { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--border-accent); border-radius:50%; color:var(--chrome-muted); }
|
|
.hub-user small { display:block; font-size:9px; color:var(--chrome-muted); }
|
|
.content-area { padding:18px 20px; }
|
|
.btn { min-height:34px; box-shadow:none; transition:background-color .15s,border-color .15s; }
|
|
.btn-primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
|
|
.btn-secondary { background:var(--surface); color:var(--text-accent); border-color:var(--border-accent); }
|
|
.status-dot.healthy { box-shadow:none; }
|
|
.view-header-note { color:var(--chrome-muted); background:transparent; border:0; padding:0 0 16px; line-height:1.6; }
|
|
.toolbar { gap:12px; flex-wrap:wrap; margin-bottom:16px; }
|
|
.search-box { min-width:220px; background:var(--surface); border-color:var(--border); }
|
|
.filters-row { flex-wrap:wrap; }
|
|
.section-card,.settings-card,.kpi-card,.account-card,.resource-card { background:var(--surface); border:1px solid var(--border); border-radius:7px; box-shadow:none; }
|
|
.section-card { padding:16px; margin-bottom:14px; min-width:0; }
|
|
.section-card-title,.settings-group-title { font-family:var(--font-ui); font-weight:500; color:var(--text-accent); font-size:13px; text-transform:uppercase; letter-spacing:.03em; }
|
|
.section-card-subtitle { margin-top:6px; color:var(--text-muted); line-height:1.5; }
|
|
.account-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; border:1px solid var(--border); background:var(--surface); border-radius:7px; margin-bottom:16px; }
|
|
.account-summary>div { padding:16px; border-right:1px solid var(--border-subtle); }
|
|
.account-summary strong { display:block; font-size:24px; font-weight:500; margin:6px 0; }
|
|
.account-summary span,.account-summary small { color:var(--text-muted); font-size:11px; }
|
|
.accounts-groups-container { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
|
|
.provider-group { grid-column:1 / -1; min-width:0; }
|
|
.provider-group-header { display:flex; justify-content:space-between; align-items:center; margin:12px 0; }
|
|
.accounts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:12px; }
|
|
.account-card { min-width:0; padding:16px; height:auto; min-height:164px; gap:10px; }
|
|
.account-card-header { flex-wrap:wrap; }
|
|
.account-badges { min-width:0; flex-wrap:wrap; }
|
|
.account-card .badge-status { white-space:normal; overflow-wrap:anywhere; }
|
|
.badge-status.unhealthy { color:var(--status-error); }
|
|
.account-card-header { gap:8px; }
|
|
.account-provider-tag { display:flex; align-items:center; gap:10px; }
|
|
.account-provider-tag img { width:30px; height:30px; object-fit:contain; }
|
|
.account-email,.account-meta { overflow-wrap:anywhere; white-space:normal; }
|
|
.account-quota-grid { gap:6px; }
|
|
.quota-cell { background:var(--surface-muted); border:1px solid var(--border-subtle); padding:10px; }
|
|
.quota-bar-track { height:5px; box-shadow:none; background:var(--border-subtle); }
|
|
.routing-grid { display:grid!important; grid-template-columns:minmax(0,2.15fr) minmax(280px,1fr); gap:16px!important; height:calc(100vh - 212px)!important; }
|
|
.routing-left-col { min-width:0; }
|
|
.routing-right-col { min-width:0; background:var(--surface)!important; }
|
|
.role-section { background:var(--surface); padding:12px; margin-bottom:14px; border:1px solid var(--border); border-radius:7px; overflow:auto; }
|
|
.role-header { gap:10px; }
|
|
.role-header h4 { font:600 14px var(--font-ui); }
|
|
.grid-header,.account-row { grid-template-columns:20px 56px minmax(120px,1.2fr) minmax(126px,1fr) minmax(100px,1fr) 88px 82px 26px; gap:8px; min-width:690px; }
|
|
.grid-header { font-size:10px; padding:10px 8px; }
|
|
.account-row { padding:10px 8px; border:1px solid var(--border-subtle); border-radius:5px; margin:4px 0; }
|
|
.account-row>div { min-width:0; overflow-wrap:anywhere; }
|
|
.account-row select { width:100%; background:var(--surface-muted); color:var(--text-primary); border:1px solid var(--border); padding:5px; border-radius:4px; }
|
|
.available-account-card { background:var(--surface); border:1px solid var(--border-subtle); padding:12px; }
|
|
.drop-zone { padding:12px; border:1px dashed var(--border-accent); color:var(--text-accent); }
|
|
.drag-over { outline:2px solid var(--accent); outline-offset:-2px; background:var(--surface-selected); }
|
|
.route-priority { font-size:9px; color:var(--text-accent); }
|
|
.route-quota { font-size:10px; color:var(--text-muted); margin-bottom:5px; }
|
|
.route-remove { color:var(--text-accent); background:transparent; border:0; cursor:pointer; padding:5px; }
|
|
.overview-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
|
|
.kpi-card { padding:18px; }
|
|
.kpi-value { font-size:28px; font-weight:500; }
|
|
.analytics-workspace { display:grid; grid-template-columns:1.25fr 1fr .8fr; gap:14px; }
|
|
.analytics-tables { display:grid; grid-template-columns:1.1fr 1fr; gap:14px; }
|
|
.metric-chart { min-height:230px; display:flex; flex-direction:column; justify-content:center; gap:12px; color:var(--text-muted); }
|
|
.metric-bar { display:grid; grid-template-columns:minmax(80px,1fr) 2fr auto; gap:10px; align-items:center; font-size:11px; }
|
|
.metric-bar meter { width:100%; height:10px; accent-color:var(--status-healthy); }
|
|
.data-table th { color:var(--text-accent); background:var(--surface); font-weight:500; }
|
|
.data-table td { padding:13px 10px; border-color:var(--border-subtle); }
|
|
.data-table tr:hover { background:var(--surface-hover); }
|
|
.host-resources-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
|
|
.resource-card { padding:16px; }
|
|
.resource-value { font-size:24px; }
|
|
.logs-layout { display:grid; grid-template-columns:minmax(0,2.4fr) minmax(250px,1fr); gap:16px; }
|
|
.logs-container { min-width:0; overflow:auto; max-height:65vh; }
|
|
.log-detail { background:var(--surface-muted); border:1px solid var(--border); border-radius:6px; padding:18px; overflow-wrap:anywhere; }
|
|
.log-detail h2 { font-size:13px; font-weight:500; color:var(--text-accent); text-transform:uppercase; margin-bottom:20px; }
|
|
.log-detail pre { white-space:pre-wrap; font-size:11px; margin-top:16px; }
|
|
.log-detail p { margin:10px 0; color:var(--text-secondary); }
|
|
#view-settings.active { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
|
|
#view-settings>.settings-card { margin:0!important; min-width:0; }
|
|
.setting-row { padding:14px 0; gap:12px; align-items:start; }
|
|
.setting-control { min-width:0; max-width:55%; }
|
|
.setting-control input,.setting-control select { max-width:100%; }
|
|
.command-results { display:flex; flex-direction:column; gap:8px; padding-top:12px; }
|
|
.command-results button { text-align:left; }
|
|
@media(min-width:1700px) { #view-settings.active { grid-template-columns:repeat(3,minmax(0,1fr)); } }
|
|
@media(max-width:1250px) { :root { --sidebar-width:210px; }.hub-user { display:none; }.accounts-groups-container { grid-template-columns:repeat(2,minmax(0,1fr)); }.routing-grid { grid-template-columns:minmax(0,1.6fr) 280px; }.brand-title { font-size:15px; }.brand-logo { width:50px;height:50px; } }
|
|
@media(max-width:950px) { :root { --sidebar-width:180px; }.analytics-workspace,.analytics-tables,.logs-layout { grid-template-columns:1fr; }#view-settings.active { grid-template-columns:1fr; }.host-resources-grid,.account-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.brand-panel { display:none; }.sidebar-footer { margin-top:auto; }.routing-grid { height:auto!important; grid-template-columns:1fr; }.routing-right-col { max-height:400px; } }
|
|
@media(max-width:650px) { :root { --sidebar-width:64px; }.brand { padding:8px; min-height:70px; }.brand-text,.nav-label,.nav-badge,.sidebar-footer { display:none; }.nav-menu { padding:6px; }.nav-item { padding:10px; }.content-area { padding:12px; }.header-title { font-size:17px; }.header-search { min-width:120px; }.header-page-actions { flex-wrap:wrap; }.accounts-groups-container,.overview-grid { grid-template-columns:1fr; }.setting-row { flex-direction:column; }.setting-control { max-width:100%; }.top-header { padding:12px; } }
|
|
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
|
|
/* Keep navigation reachable on shorter desktop windows. */
|
|
.brand,.sidebar-footer { flex-shrink:0; }
|
|
.nav-menu { flex:0 0 auto; overflow:visible; }
|
|
.brand-panel { min-height:0; }
|
|
.content-scroll { padding:18px 20px; min-height:0; }
|
|
.setting-control { display:flex; flex-wrap:wrap; gap:8px; flex:0 1 48%; }
|
|
.setting-control input { min-width:0; width:100%!important; }
|
|
.setting-info { min-width:0; flex:1; }
|
|
.setting-control select { width:100%; }
|
|
.header-left { flex-basis:260px; }
|
|
.header-title { white-space:nowrap; font-size:18px; }
|
|
@media(max-height:850px) { .brand-panel { display:none; }.sidebar-footer { margin-top:auto; } }
|
|
@media(max-width:1350px) { .hub-user { display:none; }.header-search { min-width:150px; } }
|
|
@media(max-width:650px) { .content-scroll { padding:12px; }.setting-control { flex-basis:auto; width:100%; } }
|
|
.health-workspace { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:14px; }
|
|
.health-workspace .section-card { margin:0; }
|
|
.health-workspace p { font-size:12px; color:var(--text-muted); line-height:1.6; margin:10px 0; }
|
|
@media(max-width:1100px) { .health-workspace { grid-template-columns:1fr; } }
|
|
.routing-right-col input,.routing-right-col select { min-width:0; padding:8px 10px; color:var(--text-primary); background:var(--surface-muted); border:1px solid var(--border); border-radius:4px; font:11px var(--font-ui); }
|
|
body[data-theme="medium"] .brand-title { color:var(--canvas-ink); }
|
|
body[data-theme="medium"] .nav-item.active .nav-icon { stroke:var(--text-accent); }
|
|
.header-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; }
|
|
.header-update-badge { color:var(--chrome-ink); background:transparent; }
|
|
@media(min-width:1051px) {
|
|
.top-header { min-height:84px; padding-top:8px; padding-bottom:8px; }
|
|
.header-left { display:flex; flex-wrap:wrap; gap:6px; min-width:200px; }
|
|
.header-title { width:100%; }
|
|
.header-readiness-badge,.header-update-badge { margin:0; font-size:9px; padding:4px 6px; }
|
|
}
|
|
.readiness-banner.not-ready { border-left-color:var(--status-error); }
|
|
.status-dot.not-ready { background:var(--status-error); }
|
|
.status-dot.ready { background:var(--status-healthy); }
|
|
.resource-value { font-size:clamp(18px,1.7vw,26px); }
|
|
|
|
/* ── Skills View & Cards ── */
|
|
.skills-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
|
gap: 16px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.skill-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.skill-card:hover {
|
|
border-color: var(--border-accent);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.skill-card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.skill-card-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.skill-card-desc {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
}
|
|
|
|
.skill-card-meta {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.skill-card-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.skill-tag {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
background: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.skill-card-assigned {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.skill-agent-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
background: rgba(33, 150, 243, 0.12);
|
|
border: 1px solid rgba(33, 150, 243, 0.3);
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
color: #90caf9;
|
|
}
|
|
|
|
.skill-agent-badge .remove-btn {
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.skill-agent-badge .remove-btn:hover {
|
|
opacity: 1;
|
|
color: var(--status-error);
|
|
}
|
|
|
|
.skill-card-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
border-top: 1px solid var(--border-subtle);
|
|
padding-top: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.doctor-report-body {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.doctor-report-body h2 {
|
|
font-size: 14px;
|
|
margin: 14px 0 6px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.doctor-report-body h3 {
|
|
font-size: 13px;
|
|
margin: 10px 0 4px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.doctor-report-body ul, .doctor-report-body ol {
|
|
margin: 0 0 10px 18px;
|
|
padding: 0;
|
|
}
|
|
|
|
.doctor-report-body pre {
|
|
background: var(--surface-muted);
|
|
border: 1px solid var(--border-subtle);
|
|
padding: 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Brand marks are local assets, separate for a provider and the model it hosts. */
|
|
.brand-logo,.account-provider-tag img,.available-account-card>img { width:24px; height:24px; object-fit:contain; padding:3px; border-radius:4px; background:#fff; flex:none; }
|
|
.model-brand { display:inline-flex; align-items:center; gap:6px; min-width:0; }
|
|
.model-brand>span { overflow-wrap:anywhere; }
|
|
.account-models { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; font-size:11px; }
|
|
.account-models:empty { display:none; }
|
|
.route-model-with-logo { display:flex; align-items:center; gap:6px; min-width:0; }
|
|
.route-model-with-logo select { min-width:0; }
|
|
.agent-node-icon .brand-logo { width:27px; height:27px; }
|
|
|
|
.account-check { font-size:12px; line-height:1.5; color:var(--text-secondary); overflow-wrap:anywhere; }
|
|
.badge-status.checking { color:var(--text-accent); }
|