Merge commit 'd803bfe2b1fe7f5e219e50ac20d6801a0a58ac75' as 'vendor/ruvector'
This commit is contained in:
ruv
855
vendor/ruvector/examples/rvf/dashboard/src/styles/main.css
vendored
Normal file
855
vendor/ruvector/examples/rvf/dashboard/src/styles/main.css
vendored
Normal file
@@ -0,0 +1,855 @@
|
||||
/* Causal Atlas Dashboard - Scientific Instrument Theme */
|
||||
|
||||
:root {
|
||||
--bg: #0B0F14;
|
||||
--bg-panel: #11161C;
|
||||
--bg-surface: #151B23;
|
||||
--text-primary: #E6EDF3;
|
||||
--text-secondary: #8B949E;
|
||||
--text-muted: #484F58;
|
||||
--accent: #00E5FF;
|
||||
--accent-dim: rgba(0, 229, 255, 0.08);
|
||||
--accent-border: rgba(0, 229, 255, 0.2);
|
||||
--warning: #FFB020;
|
||||
--warning-dim: rgba(255, 176, 32, 0.1);
|
||||
--critical: #FF4D4D;
|
||||
--critical-dim: rgba(255, 77, 77, 0.1);
|
||||
--success: #2ECC71;
|
||||
--success-dim: rgba(46, 204, 113, 0.1);
|
||||
--border: #1E2630;
|
||||
--border-subtle: #161C24;
|
||||
--radius: 6px;
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
/* ---- Layout ---- */
|
||||
|
||||
.view-container {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.view-with-sidebar {
|
||||
grid-template-columns: 280px 1fr;
|
||||
}
|
||||
|
||||
.view-split {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.view-full {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* 12-column grid for dashboards */
|
||||
.grid-12 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.col-3 { grid-column: span 3; }
|
||||
.col-4 { grid-column: span 4; }
|
||||
.col-6 { grid-column: span 6; }
|
||||
.col-8 { grid-column: span 8; }
|
||||
.col-12 { grid-column: span 12; }
|
||||
|
||||
/* ---- Metric Cards ---- */
|
||||
|
||||
.metric-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.metric-card .metric-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.metric-card .metric-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.metric-card .metric-value.accent { color: var(--accent); }
|
||||
.metric-card .metric-value.warning { color: var(--warning); }
|
||||
.metric-card .metric-value.critical { color: var(--critical); }
|
||||
.metric-card .metric-value.success { color: var(--success); }
|
||||
|
||||
.metric-card .metric-sub {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.metric-card .metric-sub .trend-up { color: var(--success); }
|
||||
.metric-card .metric-sub .trend-down { color: var(--critical); }
|
||||
|
||||
.metric-card .sparkline {
|
||||
margin-top: 8px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.metric-card .sparkline canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ---- Panels ---- */
|
||||
|
||||
.panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 12px 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* ---- Sidebar ---- */
|
||||
|
||||
.sidebar {
|
||||
background: var(--bg-panel);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.sidebar-search {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text-primary);
|
||||
font-size: 12px;
|
||||
font-family: var(--font-sans);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-search::placeholder { color: var(--text-muted); }
|
||||
.sidebar-search:focus { border-bottom-color: var(--accent); }
|
||||
|
||||
.sidebar-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.sidebar-item:hover { background: rgba(255, 255, 255, 0.02); }
|
||||
|
||||
.sidebar-item.selected {
|
||||
background: var(--accent-dim);
|
||||
border-left: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-item-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.sidebar-item-secondary {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ---- Canvas / Three.js ---- */
|
||||
|
||||
.three-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.three-container canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Scale selector overlay */
|
||||
.scale-selector {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scale-btn {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.scale-btn:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
.scale-btn.active {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
/* ---- Charts ---- */
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chart-container h3 {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
/* ---- Tables ---- */
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.data-table th:hover { color: var(--text-primary); }
|
||||
|
||||
.data-table td {
|
||||
padding: 8px 14px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.data-table tr:hover td {
|
||||
background: rgba(255, 255, 255, 0.015);
|
||||
}
|
||||
|
||||
.data-table tr.selected td {
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
/* ---- Progress bars ---- */
|
||||
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background: var(--bg);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.progress-fill.accent { background: var(--accent); }
|
||||
.progress-fill.success { background: var(--success); }
|
||||
.progress-fill.warning { background: var(--warning); }
|
||||
.progress-fill.critical { background: var(--critical); }
|
||||
.progress-fill.info { background: var(--accent); }
|
||||
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ---- Gauges ---- */
|
||||
|
||||
.gauge-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.gauge-ring {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 6px;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.gauge-value {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ---- Color legend ---- */
|
||||
|
||||
.color-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.color-legend-bar {
|
||||
width: 100px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(to right, var(--accent), var(--critical));
|
||||
}
|
||||
|
||||
/* ---- Time scrubber ---- */
|
||||
|
||||
.time-scrubber {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.time-scrubber-title {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.time-scrubber-range {
|
||||
flex: 1;
|
||||
accent-color: var(--accent);
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.time-scrubber-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ---- Timeline strip ---- */
|
||||
|
||||
.timeline-strip {
|
||||
background: var(--bg-panel);
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 12px 20px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.timeline-strip .timeline-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.timeline-strip canvas {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ---- Witness log ---- */
|
||||
|
||||
.witness-log {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.witness-log-header {
|
||||
padding: 10px 14px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.witness-log-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.witness-log-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 14px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.witness-log-entry:hover {
|
||||
background: rgba(255, 255, 255, 0.015);
|
||||
}
|
||||
|
||||
.witness-ts {
|
||||
color: var(--text-muted);
|
||||
min-width: 80px;
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.witness-step {
|
||||
color: var(--text-primary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.witness-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
min-width: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.witness-badge-commit { background: rgba(0, 229, 255, 0.1); color: var(--accent); }
|
||||
.witness-badge-verify { background: var(--success-dim); color: var(--success); }
|
||||
.witness-badge-seal { background: var(--critical-dim); color: var(--critical); }
|
||||
.witness-badge-merge { background: var(--warning-dim); color: var(--warning); }
|
||||
|
||||
.witness-hash {
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* ---- Pipeline stages ---- */
|
||||
|
||||
.pipeline-stages {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pipeline-stage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 48px;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.pipeline-stage.active {
|
||||
background: var(--success-dim);
|
||||
color: var(--success);
|
||||
border-color: rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
.pipeline-stage.pending {
|
||||
background: var(--warning-dim);
|
||||
color: var(--warning);
|
||||
border-color: rgba(255, 176, 32, 0.3);
|
||||
}
|
||||
|
||||
.pipeline-arrow {
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* ---- Toolbar ---- */
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
background: var(--bg-panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.toolbar button {
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.toolbar button:hover {
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.toolbar button.active {
|
||||
background: var(--accent-dim);
|
||||
color: var(--accent);
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
|
||||
/* ---- Split panel layout ---- */
|
||||
|
||||
.split-layout {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid var(--border);
|
||||
width: 50%;
|
||||
min-width: 0;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.left-panel .table-area {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.left-panel .chart-area {
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
overflow: auto;
|
||||
width: 50%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ---- Detail floating panel ---- */
|
||||
|
||||
.detail-panel {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.detail-panel h4 {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.detail-row:last-child { border-bottom: none; }
|
||||
|
||||
.detail-key {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.detail-val {
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ---- Score badge ---- */
|
||||
|
||||
.score-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.score-high { background: var(--success-dim); color: var(--success); }
|
||||
.score-medium { background: var(--warning-dim); color: var(--warning); }
|
||||
.score-low { background: var(--critical-dim); color: var(--critical); }
|
||||
|
||||
/* ---- Dashboard grid layouts ---- */
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dashboard-grid .full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: min-content;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.status-grid .full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* ---- Boundary tick marks ---- */
|
||||
|
||||
.boundary-tick {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
background: var(--warning);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ---- Alert item ---- */
|
||||
|
||||
.alert-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.alert-item:last-child { border-bottom: none; }
|
||||
|
||||
.alert-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.alert-dot.warning { background: var(--warning); }
|
||||
.alert-dot.critical { background: var(--critical); }
|
||||
.alert-dot.success { background: var(--success); }
|
||||
|
||||
.alert-msg {
|
||||
flex: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-sector {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ---- Empty / loading states ---- */
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ---- Scrollbar ---- */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(11, 15, 20, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 229, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(0, 229, 255, 0.08);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 229, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 229, 255, 0.2) rgba(11, 15, 20, 0.5);
|
||||
}
|
||||
|
||||
/* ---- Responsive ---- */
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.view-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
|
||||
.split-layout { flex-direction: column; }
|
||||
.left-panel, .right-panel { width: 100%; }
|
||||
.left-panel { border-right: none; border-bottom: 1px solid var(--border); }
|
||||
.col-3 { grid-column: span 6; }
|
||||
.col-4 { grid-column: span 6; }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.view-with-sidebar { grid-template-columns: 1fr; }
|
||||
.sidebar { max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
|
||||
.dashboard-grid, .status-grid { grid-template-columns: 1fr; }
|
||||
.col-3, .col-4, .col-6 { grid-column: span 12; }
|
||||
}
|
||||
Reference in New Issue
Block a user