feat(dashboard): tokenize CSS to design system tokens and fix home page styling
Convert hardcoded rgba colors across all dashboard CSS files to use --ok-bg, --warn-bg, --alert-bg tokens from tokens.css per §8e design system. Home page status banner and card tags now use proper semantic tokens. Add layout.css import to live.html for shared nav structure. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
jedarden
parent
0a070ecc54
commit
bd3e89f2e5
30 changed files with 2975 additions and 3655 deletions
|
|
@ -4,14 +4,17 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title>Spaxel Ambient Display</title>
|
||||
<link rel="stylesheet" href="css/tokens.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/ambient.css">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="theme-color" content="#1a1a2e">
|
||||
</head>
|
||||
<body class="ambient-mode">
|
||||
<!-- Ambient Container -->
|
||||
<div class="ambient-container" id="ambient-container">
|
||||
<div class="app-shell app-shell--full">
|
||||
<!-- Main content (full viewport ambient display) -->
|
||||
<main class="app-main ambient-container" id="ambient-container">
|
||||
<!-- Floor Plan Canvas -->
|
||||
<div class="ambient-floorplan">
|
||||
<canvas id="ambient-canvas" class="ambient-canvas"></canvas>
|
||||
|
|
@ -56,7 +59,8 @@
|
|||
<div class="ambient-secure-icon">🔒</div>
|
||||
<div class="ambient-secure-text">All secure</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div><!-- /.app-shell -->
|
||||
|
||||
<!-- Ambient Mode -->
|
||||
<script src="js/ambient_renderer.js"></script>
|
||||
|
|
|
|||
|
|
@ -7,32 +7,32 @@
|
|||
|
||||
/* ===== Ambient Mode Layout ===== */
|
||||
.ambient-mode {
|
||||
--ambient-bg-morning: #f0f4f8;
|
||||
--ambient-bg-day: #ffffff;
|
||||
--ambient-bg-evening: #fef3e7;
|
||||
--ambient-bg-night: #1a1a2e;
|
||||
--ambient-bg-morning: var(--slate-2);
|
||||
--ambient-bg-day: var(--slate-2);
|
||||
--ambient-bg-evening: var(--slate-3);
|
||||
--ambient-bg-night: var(--slate-1);
|
||||
|
||||
--ambient-text-morning: #1a365d;
|
||||
--ambient-text-day: #1d1d1f;
|
||||
--ambient-text-evening: #7c2d12;
|
||||
--ambient-text-night: #e0e0e0;
|
||||
--ambient-text-morning: var(--text-primary);
|
||||
--ambient-text-day: var(--text-primary);
|
||||
--ambient-text-evening: var(--text-primary);
|
||||
--ambient-text-night: var(--text-secondary);
|
||||
|
||||
--ambient-accent-morning: #4299e1;
|
||||
--ambient-accent-day: #0066cc;
|
||||
--ambient-accent-evening: #ed8936;
|
||||
--ambient-accent-night: #4fc3f7;
|
||||
--ambient-accent-morning: var(--blue-9);
|
||||
--ambient-accent-day: var(--blue-9);
|
||||
--ambient-accent-evening: var(--warn);
|
||||
--ambient-accent-night: var(--slate-5);
|
||||
|
||||
--ambient-person-bg-morning: rgba(66, 153, 225, 0.2);
|
||||
--ambient-person-bg-day: rgba(0, 102, 204, 0.2);
|
||||
--ambient-person-bg-evening: rgba(237, 137, 54, 0.2);
|
||||
--ambient-person-bg-night: rgba(79, 195, 247, 0.2);
|
||||
--ambient-person-bg-morning: var(--blue-muted);
|
||||
--ambient-person-bg-day: var(--blue-muted);
|
||||
--ambient-person-bg-evening: var(--warn-muted);
|
||||
--ambient-person-bg-night: rgba(62, 150, 232, 0.08);
|
||||
}
|
||||
|
||||
body.ambient-mode {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: var(--font-body);
|
||||
background: var(--ambient-bg-day);
|
||||
color: var(--ambient-text-day);
|
||||
transition: background 1s ease, color 1s ease;
|
||||
|
|
@ -92,9 +92,9 @@ body.ambient-mode {
|
|||
}
|
||||
|
||||
.ambient-canvas {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-modal);
|
||||
box-shadow: var(--shadow);
|
||||
display: block;
|
||||
/* Fix iOS Safari passive event listener warnings */
|
||||
touch-action: none;
|
||||
|
|
@ -109,7 +109,7 @@ body.ambient-mode {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--ambient-text-day);
|
||||
opacity: 0.7;
|
||||
transition: color 1s ease, opacity 0.5s ease;
|
||||
|
|
@ -129,13 +129,13 @@ body.ambient-mode {
|
|||
}
|
||||
|
||||
.ambient-status-dot.online {
|
||||
background: #34c759;
|
||||
box-shadow: 0 0 8px #34c759;
|
||||
background: var(--ok);
|
||||
box-shadow: 0 0 8px var(--ok);
|
||||
}
|
||||
|
||||
.ambient-status-dot.alert {
|
||||
background: #ff3b30;
|
||||
box-shadow: 0 0 8px #ff3b30;
|
||||
background: var(--alert);
|
||||
box-shadow: 0 0 8px var(--alert);
|
||||
animation: pulse-dot 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
|
|
@ -214,7 +214,7 @@ body.ambient-mode {
|
|||
}
|
||||
|
||||
.ambient-mode.time-night .ambient-canvas {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* ===== Ambient Person Indicators ===== */
|
||||
|
|
@ -226,7 +226,7 @@ body.ambient-mode {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
transition: all 0.5s ease;
|
||||
|
|
@ -247,30 +247,30 @@ body.ambient-mode {
|
|||
}
|
||||
|
||||
/* Person colors - consistent per person */
|
||||
.ambient-person[data-person-index="0"] { background: #e74c3c; }
|
||||
.ambient-person[data-person-index="1"] { background: #3498db; }
|
||||
.ambient-person[data-person-index="2"] { background: #2ecc71; }
|
||||
.ambient-person[data-person-index="3"] { background: #f39c12; }
|
||||
.ambient-person[data-person-index="4"] { background: #9b59b6; }
|
||||
.ambient-person[data-person-index="5"] { background: #1abc9c; }
|
||||
.ambient-person[data-person-index="6"] { background: #e67e22; }
|
||||
.ambient-person[data-person-index="7"] { background: #34495e; }
|
||||
.ambient-person[data-person-index="0"] { background: var(--alert); }
|
||||
.ambient-person[data-person-index="1"] { background: var(--blue-9); }
|
||||
.ambient-person[data-person-index="2"] { background: var(--ok); }
|
||||
.ambient-person[data-person-index="3"] { background: var(--warn); }
|
||||
.ambient-person[data-person-index="4"] { background: var(--blue-9); }
|
||||
.ambient-person[data-person-index="5"] { background: var(--ok); }
|
||||
.ambient-person[data-person-index="6"] { background: var(--warn); }
|
||||
.ambient-person[data-person-index="7"] { background: var(--slate-6); }
|
||||
|
||||
/* Unknown person */
|
||||
.ambient-person.unknown {
|
||||
background: #95a5a6;
|
||||
background: var(--slate-10);
|
||||
}
|
||||
|
||||
/* ===== Ambient Zone Labels ===== */
|
||||
.ambient-zone-label {
|
||||
position: absolute;
|
||||
padding: 6px 12px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: var(--slate-4);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 2px 8px var(--shadow);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -281,7 +281,7 @@ body.ambient-mode {
|
|||
|
||||
.ambient-zone-label.empty {
|
||||
background: rgba(200, 200, 200, 0.8);
|
||||
color: #555;
|
||||
color: var(--slate-7);
|
||||
}
|
||||
|
||||
.ambient-zone-label .zone-name {
|
||||
|
|
@ -301,7 +301,7 @@ body.ambient-mode {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(239, 68, 68, 0.95);
|
||||
background: var(--alert);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -365,7 +365,7 @@ body.ambient-mode {
|
|||
.ambient-alert-btn {
|
||||
padding: 14px 28px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
|
@ -377,14 +377,14 @@ body.ambient-mode {
|
|||
}
|
||||
|
||||
.ambient-alert-btn.primary {
|
||||
background: white;
|
||||
color: #b91c1c;
|
||||
background: var(--text-on-accent);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.ambient-alert-btn.secondary {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--border-strong);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid var(--border-strong);
|
||||
}
|
||||
|
||||
/* ===== Morning Briefing Overlay ===== */
|
||||
|
|
@ -394,7 +394,7 @@ body.ambient-mode {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
background: linear-gradient(135deg, var(--blue-7), var(--blue-9));
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -424,13 +424,13 @@ body.ambient-mode {
|
|||
}
|
||||
|
||||
.ambient-briefing-greeting {
|
||||
font-size: 28px;
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ambient-briefing-section {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
|
@ -446,25 +446,25 @@ body.ambient-mode {
|
|||
}
|
||||
|
||||
.ambient-briefing-section-value {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ambient-briefing-dismiss {
|
||||
margin-top: 24px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--border-strong);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.ambient-briefing-dismiss:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ===== "All Secure" State ===== */
|
||||
|
|
@ -497,7 +497,7 @@ body.ambient-mode {
|
|||
.ambient-person {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.ambient-zone-label {
|
||||
|
|
@ -510,7 +510,7 @@ body.ambient-mode {
|
|||
}
|
||||
|
||||
.ambient-alert-message {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.ambient-alert-actions {
|
||||
|
|
@ -533,15 +533,13 @@ body.ambient-mode {
|
|||
}
|
||||
|
||||
/* ===== OLED-Safe Mode ===== */
|
||||
@media (display-mode: dark) or (prefers-color-scheme: dark) {
|
||||
.ambient-mode.time-night {
|
||||
background: #000000;
|
||||
color: #333333;
|
||||
}
|
||||
.ambient-mode.time-night {
|
||||
background: var(--slate-1);
|
||||
color: var(--slate-5);
|
||||
}
|
||||
|
||||
.ambient-mode.time-night .ambient-status {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.ambient-mode.time-night .ambient-status {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* ===== Accessibility ===== */
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(220, 38, 38, 0.95);
|
||||
background: var(--alert);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -26,13 +26,13 @@
|
|||
}
|
||||
|
||||
.anomaly-banner {
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border: 2px solid var(--color-danger, #dc2626);
|
||||
border-radius: 16px;
|
||||
background: var(--bg-card);
|
||||
border: 2px solid var(--alert);
|
||||
border-radius: var(--radius-modal);
|
||||
padding: 24px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 20px 60px var(--shadow-xl);
|
||||
animation: anomaly-slide-up 0.3s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -47,16 +47,16 @@
|
|||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: var(--color-danger, #dc2626);
|
||||
background: var(--alert);
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 16px;
|
||||
color: white;
|
||||
color: var(--text-on-accent);
|
||||
animation: anomaly-pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes anomaly-pulse {
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
|
||||
50% { transform: scale(1.1); box-shadow: 0 0 20px 0 rgba(220, 38, 38, 0); }
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--alert-muted); }
|
||||
50% { transform: scale(1.1); box-shadow: 0 0 20px 0 transparent; }
|
||||
}
|
||||
|
||||
.anomaly-icon svg {
|
||||
|
|
@ -66,27 +66,27 @@
|
|||
|
||||
.anomaly-content {
|
||||
text-align: center;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.anomaly-title {
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--color-danger, #dc2626);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.anomaly-description {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.anomaly-meta {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
font-family: monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.anomaly-actions {
|
||||
|
|
@ -98,8 +98,8 @@
|
|||
|
||||
.anomaly-btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
|
@ -107,33 +107,33 @@
|
|||
}
|
||||
|
||||
.anomaly-btn.ack {
|
||||
background: var(--color-success, #22c55e);
|
||||
color: white;
|
||||
background: var(--ok);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.anomaly-btn.ack:hover {
|
||||
background: #16a34a;
|
||||
background: var(--ok);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.anomaly-btn.view {
|
||||
background: var(--color-primary, #3b82f6);
|
||||
color: white;
|
||||
background: var(--blue-9);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.anomaly-btn.view:hover {
|
||||
background: #2563eb;
|
||||
background: var(--blue-9);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.anomaly-btn.dismiss {
|
||||
background: var(--bg-card, #2a2a3e);
|
||||
color: var(--text-color, #e0e0e0);
|
||||
border: 1px solid var(--border-color, #444);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--slate-6);
|
||||
}
|
||||
|
||||
.anomaly-btn.dismiss:hover {
|
||||
background: var(--bg-hover, #3a3a4e);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* ── Feedback Modal ───────────────────────────────────────────────────────────── */
|
||||
|
|
@ -160,21 +160,21 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: var(--overlay-strong);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border: 1px solid var(--border-color, #333);
|
||||
border-radius: 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: var(--radius-modal);
|
||||
padding: 24px;
|
||||
max-width: 480px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
color: var(--text-secondary);
|
||||
animation: modal-pop 0.2s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -185,14 +185,14 @@
|
|||
|
||||
.modal-content h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 18px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.feedback-anomaly-desc {
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.feedback-options {
|
||||
|
|
@ -207,21 +207,21 @@
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border: 2px solid var(--border-color, #444);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
border: 2px solid var(--slate-6);
|
||||
border-radius: var(--radius-control);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.feedback-btn:hover {
|
||||
background: var(--bg-hover, #2a2a3e);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.feedback-btn.selected {
|
||||
border-color: var(--color-primary, #3b82f6);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--blue-9);
|
||||
background: var(--blue-muted);
|
||||
}
|
||||
|
||||
.feedback-btn .icon {
|
||||
|
|
@ -236,28 +236,28 @@
|
|||
}
|
||||
|
||||
.feedback-btn.expected .icon {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
background: var(--ok-muted);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.feedback-btn.intrusion .icon {
|
||||
background: rgba(251, 146, 60, 0.2);
|
||||
color: #fb923c;
|
||||
background: var(--warn-muted);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.feedback-btn.false-alarm .icon {
|
||||
background: rgba(248, 113, 113, 0.2);
|
||||
color: #f87171;
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.feedback-btn .label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.feedback-btn .desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.feedback-notes {
|
||||
|
|
@ -268,18 +268,18 @@
|
|||
width: 100%;
|
||||
min-height: 80px;
|
||||
padding: 10px;
|
||||
background: var(--bg-input, #2a2a3e);
|
||||
border: 1px solid var(--border-color, #444);
|
||||
border-radius: 8px;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
font-size: 14px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--slate-6);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
#feedback-notes-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary, #3b82f6);
|
||||
border-color: var(--blue-9);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
|
|
@ -290,8 +290,8 @@
|
|||
|
||||
.modal-btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
|
@ -299,21 +299,21 @@
|
|||
}
|
||||
|
||||
.modal-btn.cancel {
|
||||
background: var(--bg-card, #2a2a3e);
|
||||
color: var(--text-color, #e0e0e0);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.modal-btn.cancel:hover {
|
||||
background: var(--bg-hover, #3a3a4e);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.modal-btn.submit {
|
||||
background: var(--color-primary, #3b82f6);
|
||||
color: white;
|
||||
background: var(--blue-9);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.modal-btn.submit:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
background: var(--blue-9);
|
||||
}
|
||||
|
||||
.modal-btn.submit:disabled {
|
||||
|
|
@ -329,14 +329,14 @@
|
|||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 500;
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border: 1px solid var(--border-color, #333);
|
||||
border-radius: 12px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 4px 16px var(--shadow);
|
||||
animation: learning-appear 0.3s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -350,33 +350,33 @@
|
|||
}
|
||||
|
||||
.learning-icon {
|
||||
color: #a78bfa;
|
||||
color: var(--blue-10);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.learning-text {
|
||||
font-size: 13px;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.learning-progress-bar {
|
||||
width: 120px;
|
||||
height: 6px;
|
||||
background: var(--bg-input, #2a2a3e);
|
||||
background: var(--bg-input);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.learning-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #a78bfa, #22c55e);
|
||||
background: linear-gradient(90deg, var(--blue-10), var(--ok));
|
||||
transition: width 0.5s ease-out;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.days-remaining {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -388,50 +388,50 @@
|
|||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border: 1px solid var(--border-color, #333);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--slate-5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-disarmed {
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border-color: var(--border-color, #333);
|
||||
background: var(--bg-card);
|
||||
border-color: var(--slate-5);
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-armed {
|
||||
background: rgba(220, 38, 38, 0.2);
|
||||
border-color: var(--color-danger, #dc2626);
|
||||
color: var(--color-danger, #dc2626);
|
||||
background: var(--alert-muted);
|
||||
border-color: var(--alert);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-alert {
|
||||
background: rgba(220, 38, 38, 0.2);
|
||||
border-color: var(--color-danger, #dc2626);
|
||||
color: var(--color-danger, #dc2626);
|
||||
background: var(--alert-muted);
|
||||
border-color: var(--alert);
|
||||
color: var(--alert);
|
||||
animation: security-pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes security-pulse {
|
||||
0%, 100% { box-shadow: 0 0 5px rgba(220, 38, 38, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.8); }
|
||||
0%, 100% { box-shadow: 0 0 5px var(--alert-muted); }
|
||||
50% { box-shadow: 0 0 20px var(--alert); }
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-learning {
|
||||
background: rgba(167, 139, 250, 0.2);
|
||||
border-color: var(--color-secondary, #a78bfa);
|
||||
color: var(--color-secondary, #a78bfa);
|
||||
background: var(--blue-border);
|
||||
border-color: var(--blue-10);
|
||||
color: var(--blue-10);
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-ready {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
border-color: var(--color-success, #22c55e);
|
||||
color: var(--color-success, #22c55e);
|
||||
background: var(--ok-muted);
|
||||
border-color: var(--ok);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.security-icon {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.security-text {
|
||||
|
|
@ -462,14 +462,14 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1900;
|
||||
background: var(--color-danger, #dc2626);
|
||||
color: white;
|
||||
background: var(--alert);
|
||||
color: var(--text-on-accent);
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 4px 16px var(--shadow);
|
||||
animation: alert-slide-down 0.3s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -492,19 +492,19 @@
|
|||
}
|
||||
|
||||
.alert-banner-title {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.alert-banner-description {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
opacity: 0.95;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.alert-banner-meta {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
opacity: 0.85;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
|
@ -517,18 +517,18 @@
|
|||
|
||||
.alert-banner-btn {
|
||||
padding: 8px 16px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
background: var(--border-strong);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-on-accent);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.alert-banner-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ── Security Dialog ────────────────────────────────────────────────────────────── */
|
||||
|
|
@ -539,7 +539,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: var(--overlay-strong);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
|
|
@ -554,24 +554,24 @@
|
|||
}
|
||||
|
||||
.security-dialog-card {
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border: 1px solid var(--border-color, #333);
|
||||
border-radius: 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: var(--radius-modal);
|
||||
padding: 24px;
|
||||
max-width: 440px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
color: var(--text-secondary);
|
||||
animation: dialog-pop 0.3s ease-out;
|
||||
}
|
||||
|
||||
.security-dialog-card.arm {
|
||||
border-color: var(--color-danger, #dc2626);
|
||||
border-color: var(--alert);
|
||||
}
|
||||
|
||||
.security-dialog-card.disarm {
|
||||
border-color: var(--color-success, #22c55e);
|
||||
border-color: var(--ok);
|
||||
}
|
||||
|
||||
@keyframes dialog-pop {
|
||||
|
|
@ -585,20 +585,20 @@
|
|||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border-color, #333);
|
||||
border-bottom: 1px solid var(--slate-5);
|
||||
}
|
||||
|
||||
.security-dialog-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.security-dialog-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: 20px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-base);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
line-height: 1;
|
||||
|
|
@ -606,8 +606,8 @@
|
|||
}
|
||||
|
||||
.security-dialog-close:hover {
|
||||
background: var(--bg-hover, #333);
|
||||
color: var(--text-color, #e0e0e0);
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.security-dialog-content {
|
||||
|
|
@ -615,24 +615,24 @@
|
|||
}
|
||||
|
||||
.security-dialog-prompt {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.security-dialog-warning {
|
||||
background: rgba(251, 146, 60, 0.1);
|
||||
border: 1px solid rgba(251, 146, 60, 0.3);
|
||||
border-radius: 8px;
|
||||
background: var(--warn-bg);
|
||||
border: 1px solid var(--warn-border);
|
||||
border-radius: var(--radius-control);
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.security-dialog-warning p {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 13px;
|
||||
color: #fb923c;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.security-dialog-warning p:last-child {
|
||||
|
|
@ -647,8 +647,8 @@
|
|||
}
|
||||
|
||||
.stat-item {
|
||||
background: var(--bg-input, #2a2a3e);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-input);
|
||||
border-radius: var(--radius-control);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -658,8 +658,8 @@
|
|||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -667,7 +667,7 @@
|
|||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -679,8 +679,8 @@
|
|||
|
||||
.security-dialog-btn {
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
|
@ -688,39 +688,39 @@
|
|||
}
|
||||
|
||||
.security-dialog-btn.cancel {
|
||||
background: var(--bg-card, #2a2a3e);
|
||||
color: var(--text-color, #e0e0e0);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.security-dialog-btn.cancel:hover {
|
||||
background: var(--bg-hover, #3a3a4e);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.security-dialog-btn.arm {
|
||||
background: var(--color-danger, #dc2626);
|
||||
color: white;
|
||||
background: var(--alert);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.security-dialog-btn.arm:hover {
|
||||
background: #b91c1c;
|
||||
background: var(--alert);
|
||||
}
|
||||
|
||||
.security-dialog-btn.disarm {
|
||||
background: var(--color-success, #22c55e);
|
||||
color: white;
|
||||
background: var(--ok);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.security-dialog-btn.disarm:hover {
|
||||
background: #16a34a;
|
||||
background: var(--ok);
|
||||
}
|
||||
|
||||
/* ── Anomaly History ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.anomaly-history-item {
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border: 1px solid var(--border-color, #333);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: var(--radius-control);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
|
@ -738,23 +738,23 @@
|
|||
}
|
||||
|
||||
.anomaly-history-icon.unusual-hour {
|
||||
background: rgba(251, 146, 60, 0.2);
|
||||
color: #fb923c;
|
||||
background: var(--warn-muted);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.anomaly-history-icon.unknown-ble {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #3b82f6;
|
||||
background: var(--blue-muted);
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
.anomaly-history-icon.motion-during-away {
|
||||
background: rgba(220, 38, 38, 0.2);
|
||||
color: #dc2626;
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.anomaly-history-icon.unusual-dwell {
|
||||
background: rgba(248, 113, 113, 0.2);
|
||||
color: #f87171;
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.anomaly-history-content {
|
||||
|
|
@ -764,17 +764,17 @@
|
|||
|
||||
.anomaly-history-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.anomaly-history-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.anomaly-history-score {
|
||||
font-size: 11px;
|
||||
font-size: var(--text-xs);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
|
|
@ -782,40 +782,40 @@
|
|||
}
|
||||
|
||||
.anomaly-history-score.high {
|
||||
background: rgba(220, 38, 38, 0.2);
|
||||
color: #dc2626;
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.anomaly-history-score.medium {
|
||||
background: rgba(251, 146, 60, 0.2);
|
||||
color: #fb923c;
|
||||
background: var(--warn-muted);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.anomaly-history-score.low {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
background: var(--warn-muted);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.anomaly-history-feedback {
|
||||
font-size: 11px;
|
||||
font-size: var(--text-xs);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.anomaly-history-feedback.expected {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #22c55e;
|
||||
background: var(--ok-muted);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.anomaly-history-feedback.intrusion {
|
||||
background: rgba(220, 38, 38, 0.2);
|
||||
color: #dc2626;
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.anomaly-history-feedback.false-alarm {
|
||||
background: rgba(248, 113, 113, 0.2);
|
||||
color: #f87171;
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
/* ── Zone Pulsing for Active Anomalies (3D View) ─────────────────────────────────── */
|
||||
|
|
@ -826,12 +826,12 @@
|
|||
|
||||
@keyframes zone-pulse-red {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 10px rgba(220, 38, 38, 0.3);
|
||||
border-color: rgba(220, 38, 38, 0.5);
|
||||
box-shadow: 0 0 10px var(--alert-border);
|
||||
border-color: var(--alert-muted);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 30px rgba(220, 38, 38, 0.6);
|
||||
border-color: rgba(220, 38, 38, 0.8);
|
||||
box-shadow: 0 0 30px var(--alert-muted);
|
||||
border-color: var(--alert);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -869,19 +869,3 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* ── Dark Theme Variables (fallback) ───────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
--bg-card: #1e1e2e;
|
||||
--bg-panel: #1a1a2e;
|
||||
--bg-hover: #2a2a3e;
|
||||
--bg-active: #3a3a4e;
|
||||
--bg-input: #2a2a3e;
|
||||
--text-color: #e0e0e0;
|
||||
--text-muted: #888;
|
||||
--border-color: #333;
|
||||
--color-primary: #3b82f6;
|
||||
--color-success: #22c55e;
|
||||
--color-danger: #dc2626;
|
||||
--color-secondary: #a78bfa;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
background: linear-gradient(135deg, var(--blue-7) 0%, var(--blue-9) 100%);
|
||||
box-shadow: 0 4px 20px var(--shadow);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
.ap-detection-icon {
|
||||
font-size: 28px;
|
||||
font-size: var(--text-2xl);
|
||||
margin-right: 16px;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
}
|
||||
|
||||
.ap-detection-subtitle {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
content: "•";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #667eea;
|
||||
color: var(--blue-7);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -104,12 +104,12 @@
|
|||
}
|
||||
|
||||
.ap-placement-tip {
|
||||
background: #f0f4ff;
|
||||
border-left: 4px solid #667eea;
|
||||
background: var(--bg-input);
|
||||
border-left: 4px solid var(--blue-7);
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--slate-6);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -153,8 +153,8 @@
|
|||
.ap-btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -162,23 +162,23 @@
|
|||
|
||||
.ap-btn-primary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
color: var(--blue-7);
|
||||
}
|
||||
|
||||
.ap-btn-primary:hover {
|
||||
background: #f0f0f0;
|
||||
background: var(--bg-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.ap-btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--border-strong);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid var(--slate-7);
|
||||
}
|
||||
|
||||
.ap-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--slate-7);
|
||||
}
|
||||
|
||||
.ap-btn:active {
|
||||
|
|
@ -191,8 +191,8 @@
|
|||
|
||||
/* Distinct router icon for virtual AP nodes in 3D view */
|
||||
.virtual-node-router {
|
||||
fill: #667eea;
|
||||
stroke: #764ba2;
|
||||
fill: var(--blue-7);
|
||||
stroke: var(--blue-9);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
============================================ */
|
||||
|
||||
.ble-panel {
|
||||
background: #1e1e3a;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
|
|
@ -18,17 +18,17 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Error State */
|
||||
.ble-error {
|
||||
background: rgba(239, 83, 80, 0.1);
|
||||
border: 1px solid rgba(239, 83, 80, 0.3);
|
||||
background: var(--alert-bg);
|
||||
border: 1px solid var(--alert-border);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
color: #ef5350;
|
||||
color: var(--alert);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -36,24 +36,24 @@
|
|||
.ble-error button {
|
||||
margin-top: 12px;
|
||||
padding: 6px 12px;
|
||||
background: rgba(239, 83, 80, 0.2);
|
||||
border: 1px solid rgba(239, 83, 80, 0.4);
|
||||
background: var(--alert-muted);
|
||||
border: 1px solid var(--alert-border);
|
||||
border-radius: 4px;
|
||||
color: #ef5350;
|
||||
font-size: 12px;
|
||||
color: var(--alert);
|
||||
font-size: var(--text-xs);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.ble-error button:hover {
|
||||
background: rgba(239, 83, 80, 0.3);
|
||||
background: var(--alert-border);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.ble-empty {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -63,10 +63,10 @@
|
|||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
margin: 20px 0 12px 0;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
.ble-section-header:first-child {
|
||||
|
|
@ -88,22 +88,22 @@
|
|||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 6px;
|
||||
background: var(--border-subtle);
|
||||
border-radius: var(--radius-control);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.ble-device:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--border-default);
|
||||
}
|
||||
|
||||
.ble-device-person {
|
||||
border-left: 3px solid #ab47bc;
|
||||
border-left: 3px solid var(--blue-9);
|
||||
}
|
||||
|
||||
.ble-device-unregistered {
|
||||
border-left: 3px solid #666;
|
||||
border-left: 3px solid var(--text-muted);
|
||||
}
|
||||
|
||||
/* Device Icon */
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
.ble-device-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -127,8 +127,8 @@
|
|||
/* Device RSSI */
|
||||
.ble-device-rssi {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
font-family: monospace;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.1s;
|
||||
display: flex;
|
||||
|
|
@ -149,22 +149,22 @@
|
|||
}
|
||||
|
||||
.ble-device-add {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #66bb6a;
|
||||
background: var(--ok-muted);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.ble-device-add:hover {
|
||||
background: rgba(76, 175, 80, 0.3);
|
||||
background: var(--ok-border);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.ble-device-expand {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #888;
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.ble-device-expand:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -177,14 +177,14 @@
|
|||
|
||||
.ble-edit-form h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 16px;
|
||||
color: #eee;
|
||||
font-size: var(--text-base);
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
.ble-hint {
|
||||
margin: 0 0 16px;
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
|
@ -194,8 +194,8 @@
|
|||
|
||||
.ble-form-group label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -204,10 +204,10 @@
|
|||
.ble-form-group select {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-subtle);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 4px;
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -221,7 +221,7 @@
|
|||
.ble-form-group input:focus,
|
||||
.ble-form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #ab47bc;
|
||||
border-color: var(--blue-9);
|
||||
box-shadow: 0 0 0 2px rgba(171, 71, 188, 0.15);
|
||||
}
|
||||
|
||||
|
|
@ -234,25 +234,25 @@
|
|||
|
||||
.btn-cancel {
|
||||
padding: 8px 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 8px 16px;
|
||||
background: #ab47bc;
|
||||
background: var(--blue-9);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
|
@ -260,38 +260,38 @@
|
|||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #9c4cb3;
|
||||
background: var(--blue-9);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 8px 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #eee;
|
||||
background: var(--border-strong);
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
padding: 8px 16px;
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
border: 1px solid rgba(244, 67, 54, 0.3);
|
||||
background: var(--alert-muted);
|
||||
border: 1px solid var(--alert-border);
|
||||
border-radius: 4px;
|
||||
color: #ef5350;
|
||||
color: var(--alert);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: rgba(244, 67, 54, 0.3);
|
||||
background: var(--alert-border);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -310,18 +310,18 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.ble-detail-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.ble-detail-value {
|
||||
font-size: 13px;
|
||||
color: #eee;
|
||||
font-family: monospace;
|
||||
color: var(--slate-12);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.ble-details-actions {
|
||||
|
|
@ -352,23 +352,23 @@
|
|||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: var(--border-subtle);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.ble-history-time {
|
||||
color: #888;
|
||||
font-family: monospace;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.ble-history-rssi {
|
||||
color: #4fc3f7;
|
||||
font-family: monospace;
|
||||
color: var(--blue-10);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.ble-history-node {
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -379,11 +379,11 @@
|
|||
.ble-privacy-notice {
|
||||
background: rgba(171, 71, 188, 0.1);
|
||||
border: 1px solid rgba(171, 71, 188, 0.2);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 11px;
|
||||
color: #ba68c8;
|
||||
color: var(--blue-10);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
|
@ -410,7 +410,7 @@
|
|||
}
|
||||
|
||||
.ble-device-name {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.ble-details-actions {
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@
|
|||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
background: rgba(26, 26, 46, 0.95);
|
||||
background: rgba(30, 32, 36, 0.95);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
z-index: 200;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px var(--shadow-xl);
|
||||
border: 1px solid var(--border-default);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
|
|
@ -31,34 +31,34 @@
|
|||
}
|
||||
|
||||
#briefing-card .briefing-title {
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
color: #4fc3f7;
|
||||
color: var(--blue-10);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-date {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 20px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-lg);
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
#briefing-card .briefing-close:hover {
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-content {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #ddd;
|
||||
color: var(--slate-11);
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
|
|
@ -66,42 +66,42 @@
|
|||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: var(--border-subtle);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-section.alert {
|
||||
background: rgba(239, 83, 80, 0.1);
|
||||
border-left: 3px solid #ef5350;
|
||||
background: var(--alert-bg);
|
||||
border-left: 3px solid var(--alert);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-section.sleep {
|
||||
background: rgba(102, 187, 106, 0.1);
|
||||
border-left: 3px solid #66bb6a;
|
||||
border-left: 3px solid var(--ok);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-section.people {
|
||||
background: rgba(33, 150, 243, 0.1);
|
||||
border-left: 3px solid #2196f3;
|
||||
border-left: 3px solid var(--blue-9);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-section.anomaly {
|
||||
background: rgba(255, 193, 7, 0.1);
|
||||
border-left: 3px solid #ffc107;
|
||||
border-left: 3px solid var(--warn);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-section.health {
|
||||
background: rgba(158, 158, 158, 0.1);
|
||||
border-left: 3px solid #9e9e9e;
|
||||
border-left: 3px solid var(--slate-10);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-section.prediction {
|
||||
background: rgba(156, 39, 176, 0.1);
|
||||
border-left: 3px solid #9c27b0;
|
||||
border-left: 3px solid var(--blue-8);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-section.learning {
|
||||
background: rgba(255, 112, 67, 0.1);
|
||||
border-left: 3px solid #ff6f43;
|
||||
border-left: 3px solid var(--warn);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-actions {
|
||||
|
|
@ -114,43 +114,43 @@
|
|||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
#briefing-card .briefing-btn.primary {
|
||||
background: #4fc3f7;
|
||||
color: #1a1a2e;
|
||||
background: var(--blue-10);
|
||||
color: var(--bg-card);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-btn.primary:hover {
|
||||
background: #29b6f6;
|
||||
background: var(--blue-10);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-btn.secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ddd;
|
||||
background: var(--bg-hover);
|
||||
color: var(--slate-11);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-btn.secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#briefing-card .briefing-spinner {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: #4fc3f7;
|
||||
border: 3px solid var(--bg-hover);
|
||||
border-top-color: var(--blue-10);
|
||||
border-radius: 50%;
|
||||
animation: briefing-spin 1s linear infinite;
|
||||
}
|
||||
|
|
@ -172,13 +172,13 @@
|
|||
|
||||
/* Ambient mode briefing */
|
||||
.ambient-mode #briefing-card {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background: var(--overlay-strong);
|
||||
backdrop-filter: blur(10px);
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.ambient-mode #briefing-card .briefing-content {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* Briefing indicator in status bar */
|
||||
|
|
@ -190,8 +190,8 @@
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(79, 195, 247, 0.2);
|
||||
border: 2px solid #4fc3f7;
|
||||
background: var(--blue-muted);
|
||||
border: 2px solid var(--blue-10);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -206,13 +206,13 @@
|
|||
}
|
||||
|
||||
#briefing-indicator:hover {
|
||||
background: rgba(79, 195, 247, 0.3);
|
||||
background: var(--blue-border);
|
||||
}
|
||||
|
||||
#briefing-indicator svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: #4fc3f7;
|
||||
fill: var(--blue-10);
|
||||
}
|
||||
|
||||
/* Briefing settings panel */
|
||||
|
|
@ -221,13 +221,13 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(26, 26, 46, 0.98);
|
||||
background: rgba(30, 32, 36, 0.98);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
z-index: 300;
|
||||
min-width: 400px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 8px 32px var(--shadow-xl);
|
||||
border: 1px solid var(--bg-hover);
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
|
||||
#briefing-settings h3 {
|
||||
font-size: 18px;
|
||||
color: #4fc3f7;
|
||||
color: var(--blue-10);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -249,31 +249,31 @@
|
|||
}
|
||||
|
||||
#briefing-settings .setting-label {
|
||||
font-size: 14px;
|
||||
color: #ddd;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--slate-11);
|
||||
}
|
||||
|
||||
#briefing-settings .setting-input {
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ddd;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-control);
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--border-subtle);
|
||||
color: var(--slate-11);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
#briefing-settings .setting-toggle {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
#briefing-settings .setting-toggle.active {
|
||||
background: #4fc3f7;
|
||||
background: var(--blue-10);
|
||||
}
|
||||
|
||||
#briefing-settings .setting-toggle::after {
|
||||
|
|
@ -283,7 +283,7 @@
|
|||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #fff;
|
||||
background: var(--text-on-accent);
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,516 +1,219 @@
|
|||
/**
|
||||
* Spaxel Dashboard - Command Palette Styles
|
||||
* Spaxel Dashboard — Command Palette Styles (Component 34)
|
||||
*
|
||||
* Ctrl+K / Cmd+K universal search and command interface.
|
||||
* Activated by Ctrl+K / Cmd+K in expert mode only.
|
||||
*/
|
||||
|
||||
/* ===== Command Palette Container ===== */
|
||||
.command-palette {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
/* ===== Overlay backdrop ===== */
|
||||
.cp-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
.command-palette.visible {
|
||||
.cp-overlay.cp-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.command-backdrop {
|
||||
.cp-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
inset: 0;
|
||||
background: var(--shadow-xl);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
animation: cp-fade-in 0.12s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@keyframes cp-fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ===== Command Container ===== */
|
||||
.command-container {
|
||||
/* ===== Container ===== */
|
||||
.cp-container {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 70vh;
|
||||
background: var(--command-bg, #1e1e1e);
|
||||
background: var(--slate-3);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
box-shadow: 0 24px 64px var(--overlay-strong), 0 0 0 1px var(--border-subtle);
|
||||
overflow: hidden;
|
||||
animation: cp-slide-in 0.14s ease-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: slideUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
@keyframes cp-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 20px);
|
||||
transform: translate(-50%, calc(-50% - 12px));
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Command Header ===== */
|
||||
.command-header {
|
||||
/* ===== Search row ===== */
|
||||
.cp-search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.command-icon {
|
||||
font-size: 20px;
|
||||
.cp-search-icon {
|
||||
font-size: var(--text-base);
|
||||
flex-shrink: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.command-input {
|
||||
.cp-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--command-text, #eee);
|
||||
font-size: 16px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
color: var(--slate-12);
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.command-input::placeholder {
|
||||
color: var(--command-placeholder, #666);
|
||||
.cp-input::placeholder {
|
||||
color: var(--slate-9);
|
||||
}
|
||||
|
||||
.command-hint {
|
||||
.cp-esc-hint {
|
||||
font-size: 11px;
|
||||
color: var(--command-hint, #666);
|
||||
white-space: nowrap;
|
||||
color: var(--slate-7);
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-radius: 4px;
|
||||
padding: 2px 7px;
|
||||
flex-shrink: 0;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ===== Command Body ===== */
|
||||
.command-body {
|
||||
flex: 1;
|
||||
/* ===== Results list ===== */
|
||||
.cp-results {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
max-height: 360px; /* ~8 items */
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.command-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
.cp-results::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.command-body::-webkit-scrollbar-track {
|
||||
.cp-results::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.command-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
.cp-results::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-active);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.command-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* ===== Command Results ===== */
|
||||
.command-results {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* Category Headers */
|
||||
.command-category-header {
|
||||
padding: 8px 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
/* Group header */
|
||||
.cp-group-header {
|
||||
padding: 6px 16px 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--command-header, #666);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--command-bg, #1e1e1e);
|
||||
z-index: 1;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--slate-7);
|
||||
}
|
||||
|
||||
/* Command Items */
|
||||
.command-item {
|
||||
/* Empty state */
|
||||
.cp-empty {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: var(--slate-7);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Result item */
|
||||
.cp-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
gap: 10px;
|
||||
padding: 9px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
border-left: 2px solid transparent;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.command-item:hover {
|
||||
background: var(--command-hover, rgba(255, 255, 255, 0.05));
|
||||
.cp-item:hover {
|
||||
background: var(--border-subtle);
|
||||
}
|
||||
|
||||
.command-item.selected {
|
||||
background: var(--command-selected, rgba(79, 195, 247, 0.15));
|
||||
border-left-color: var(--command-accent, #4fc3f7);
|
||||
.cp-item-selected {
|
||||
background: rgba(59, 130, 246, 0.18) !important; /* var(--blue-9) at 18% */
|
||||
}
|
||||
|
||||
.command-item-icon {
|
||||
font-size: 18px;
|
||||
.cp-item-icon {
|
||||
font-size: var(--text-base);
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.command-item-content {
|
||||
.cp-item-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.command-item-title {
|
||||
font-size: 14px;
|
||||
.cp-item-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--command-text, #eee);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.command-item-description {
|
||||
font-size: 12px;
|
||||
color: var(--command-description, #888);
|
||||
color: var(--slate-12);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.command-item-shortcut {
|
||||
font-size: 11px;
|
||||
font-family: monospace;
|
||||
color: var(--command-shortcut, #666);
|
||||
background: var(--command-shortcut-bg, rgba(255, 255, 255, 0.1));
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Highlight matches in search results */
|
||||
.command-item-title mark,
|
||||
.command-item-description mark {
|
||||
background: var(--command-mark-bg, rgba(79, 195, 247, 0.3));
|
||||
color: var(--command-mark-text, #4fc3f7);
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ===== Empty State ===== */
|
||||
.command-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--command-empty, #666);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ===== Command Footer ===== */
|
||||
.command-footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
background: var(--command-footer-bg, rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.footer-hints {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 11px;
|
||||
color: var(--command-hint, #666);
|
||||
}
|
||||
|
||||
.hint-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.hint-item kbd {
|
||||
background: var(--command-kbd-bg, rgba(255, 255, 255, 0.1));
|
||||
border: 1px solid var(--command-kbd-border, rgba(255, 255, 255, 0.2));
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
color: var(--command-kbd, #999);
|
||||
}
|
||||
|
||||
/* ===== Help Modal ===== */
|
||||
.command-help-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1001;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.command-help-modal.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.help-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.help-container {
|
||||
position: relative;
|
||||
background: var(--command-bg, #1e1e1e);
|
||||
border-radius: 12px;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
margin: 10vh auto;
|
||||
border: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.cp-item-secondary {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--slate-9);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.help-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--command-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.help-header h3 {
|
||||
.cp-item-arrow {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--command-text, #eee);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.help-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--command-close, #888);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
color: var(--slate-7);
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.help-close:hover {
|
||||
color: var(--command-text, #eee);
|
||||
.cp-item-selected .cp-item-arrow {
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
.help-content {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
max-height: calc(80vh - 80px);
|
||||
}
|
||||
|
||||
.help-content h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--command-text, #eee);
|
||||
margin-top: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.help-content h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.help-content p {
|
||||
font-size: 14px;
|
||||
color: var(--command-description, #aaa);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.help-content ul {
|
||||
margin: 0 0 12px 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.help-content li {
|
||||
font-size: 14px;
|
||||
color: var(--command-description, #aaa);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.help-content strong {
|
||||
color: var(--command-text, #eee);
|
||||
}
|
||||
|
||||
.help-content kbd {
|
||||
background: var(--command-kbd-bg, rgba(255, 255, 255, 0.1));
|
||||
border: 1px solid var(--command-kbd-border, rgba(255, 255, 255, 0.2));
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: var(--command-kbd, #999);
|
||||
}
|
||||
|
||||
/* ===== Responsive Design ===== */
|
||||
@media (max-width: 600px) {
|
||||
.command-container {
|
||||
width: 95%;
|
||||
top: 10%;
|
||||
max-height: 75vh;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.footer-hints {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.help-container {
|
||||
margin: 5vh auto;
|
||||
max-height: 85vh;
|
||||
/* ===== Responsive ===== */
|
||||
@media (max-width: 640px) {
|
||||
.cp-container {
|
||||
width: 96%;
|
||||
top: 12%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Accessibility ===== */
|
||||
.command-item:focus-visible {
|
||||
outline: 2px solid var(--command-accent, #4fc3f7);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.command-input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ===== Reduced Motion ===== */
|
||||
/* ===== Reduced motion ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.command-palette * {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Keyboard Shortcut Hint ===== */
|
||||
.command-shortcut-hint {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
background: rgba(30, 30, 30, 0.95);
|
||||
border: 1px solid rgba(79, 195, 247, 0.4);
|
||||
border-radius: 8px;
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.command-shortcut-hint.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.hint-text kbd {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
color: #4fc3f7;
|
||||
}
|
||||
|
||||
.hint-dismiss {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.hint-dismiss:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* ===== Dark/Light Mode Support ===== */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.command-palette {
|
||||
--command-bg: #ffffff;
|
||||
--command-text: #1d1d1f;
|
||||
--command-border: rgba(0, 0, 0, 0.1);
|
||||
--command-hover: rgba(0, 0, 0, 0.05);
|
||||
--command-selected: rgba(0, 122, 255, 0.1);
|
||||
--command-accent: #007aff;
|
||||
--command-placeholder: #999;
|
||||
--command-description: #666;
|
||||
--command-header: #999;
|
||||
--command-hint: #666;
|
||||
--command-empty: #999;
|
||||
--command-shortcut: #666;
|
||||
--command-shortcut-bg: rgba(0, 0, 0, 0.05);
|
||||
--command-kbd-bg: rgba(0, 0, 0, 0.05);
|
||||
--command-kbd-border: rgba(0, 0, 0, 0.1);
|
||||
--command-kbd: #666;
|
||||
--command-mark-bg: rgba(0, 122, 255, 0.2);
|
||||
--command-mark-text: #007aff;
|
||||
--command-footer-bg: rgba(0, 0, 0, 0.03);
|
||||
--command-close: #999;
|
||||
.cp-backdrop,
|
||||
.cp-container {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
|
||||
.panel-form-group input[type="range"]::-webkit-slider-runnable-track {
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
border-radius: 3px;
|
||||
margin: 19px 0; /* Center track within 44px height */
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
appearance: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #4fc3f7;
|
||||
background: var(--blue-10);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
margin-top: -13px; /* Center thumb on track */
|
||||
|
|
@ -92,14 +92,14 @@
|
|||
|
||||
.panel-form-group input[type="range"]::-moz-range-track {
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.panel-form-group input[type="range"]::-moz-range-thumb {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #4fc3f7;
|
||||
background: var(--blue-10);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Small buttons: expand with padding while keeping appearance compact */
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding: 12px 8px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Sim item delete button */
|
||||
|
|
@ -295,7 +295,7 @@ body.simple-mode #scene-container {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Adjust scene container when status bar is visible */
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.panel-loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid rgba(76, 195, 247, 0.2);
|
||||
border-top-color: #4fc3f7;
|
||||
border-top-color: var(--blue-10);
|
||||
border-radius: 50%;
|
||||
animation: explainability-spin 1s linear infinite;
|
||||
margin-bottom: 12px;
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.panel-empty-icon {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
.panel-empty-text {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* ----- Confidence Gauge ----- */
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
align-items: center;
|
||||
padding: 24px 0;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
.confidence-gauge {
|
||||
|
|
@ -71,13 +71,13 @@
|
|||
|
||||
.confidence-ring-bg {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.1);
|
||||
stroke: var(--bg-hover);
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.confidence-ring-fill {
|
||||
fill: none;
|
||||
stroke: #4fc3f7;
|
||||
stroke: var(--blue-10);
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
transform-origin: 50% 50%;
|
||||
|
|
@ -91,12 +91,12 @@
|
|||
transform: translate(-50%, -50%);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #4fc3f7;
|
||||
color: var(--blue-10);
|
||||
}
|
||||
|
||||
.confidence-label {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ----- Sections ----- */
|
||||
|
|
@ -109,9 +109,9 @@
|
|||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
|
|
@ -120,20 +120,20 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 6px;
|
||||
background: var(--border-subtle);
|
||||
border-radius: var(--radius-control);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.section-header:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--border-default);
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
|
|
@ -152,12 +152,12 @@
|
|||
.links-table td {
|
||||
padding: 8px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.links-table th {
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
}
|
||||
|
||||
.links-table-detailed {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.links-table-detailed th,
|
||||
|
|
@ -183,12 +183,12 @@
|
|||
}
|
||||
|
||||
.link-id {
|
||||
color: #4fc3f7;
|
||||
color: var(--blue-10);
|
||||
}
|
||||
|
||||
.deltarms-cell {
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
|
||||
color: #a5d6a7;
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.zone-cell {
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
|
||||
.weight-cell {
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
|
||||
color: #ffcc80;
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.contributing-cell {
|
||||
|
|
@ -220,27 +220,27 @@
|
|||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.contributing-yes .contributing-badge {
|
||||
background: #22c55e;
|
||||
background: var(--ok);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contributing-no .contributing-badge {
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.contribution-cell {
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
|
||||
color: #90caf9;
|
||||
color: var(--blue-9);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ----- BLE Match Card ----- */
|
||||
.ble-match-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
|
@ -262,13 +262,13 @@
|
|||
.ble-match-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
.ble-match-confidence {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.ble-match-details {
|
||||
|
|
@ -279,16 +279,16 @@
|
|||
|
||||
.ble-match-detail {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
|
|
@ -296,7 +296,7 @@
|
|||
.explainability-footer {
|
||||
padding-top: 16px;
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid var(--bg-hover);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -304,8 +304,8 @@
|
|||
.panel-btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.1s;
|
||||
|
|
@ -316,44 +316,44 @@
|
|||
}
|
||||
|
||||
.panel-btn-primary {
|
||||
background: #4fc3f7;
|
||||
color: #1a1a2e;
|
||||
background: var(--blue-10);
|
||||
color: var(--bg-card);
|
||||
}
|
||||
|
||||
.panel-btn-primary:hover {
|
||||
background: #29b6f6;
|
||||
background: var(--blue-10);
|
||||
}
|
||||
|
||||
.panel-btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #eee;
|
||||
background: var(--bg-hover);
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
.panel-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ----- Confidence Color Variants ----- */
|
||||
.confidence-ring-fill.high {
|
||||
stroke: #22c55e;
|
||||
stroke: var(--ok);
|
||||
}
|
||||
|
||||
.confidence-value.high {
|
||||
color: #22c55e;
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.confidence-ring-fill.medium {
|
||||
stroke: #ff9800;
|
||||
stroke: var(--warn);
|
||||
}
|
||||
|
||||
.confidence-value.medium {
|
||||
color: #ff9800;
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.confidence-ring-fill.low {
|
||||
stroke: #f44336;
|
||||
stroke: var(--alert);
|
||||
}
|
||||
|
||||
.confidence-value.low {
|
||||
color: #f44336;
|
||||
color: var(--alert);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,24 +2,6 @@
|
|||
Spaxel Fleet Status Page Styles
|
||||
============================================ */
|
||||
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
--bg-primary: #1a1a2e;
|
||||
--bg-secondary: #16213e;
|
||||
--bg-tertiary: #0f0f23;
|
||||
--text-primary: #eee;
|
||||
--text-secondary: #aaa;
|
||||
--text-muted: #666;
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--accent-primary: #4fc3f7;
|
||||
--accent-secondary: #29b6f6;
|
||||
--success: #66bb6a;
|
||||
--warning: #ffa726;
|
||||
--danger: #ef5350;
|
||||
--offline: #9e9e9e;
|
||||
--updating: #ffca28;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -28,8 +10,8 @@
|
|||
}
|
||||
|
||||
body.fleet-page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
font-family: var(--font-body);
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
|
|
@ -39,8 +21,8 @@ body.fleet-page {
|
|||
Navigation
|
||||
============================================ */
|
||||
.fleet-nav {
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
padding: 0 24px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
|
|
@ -71,7 +53,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
|
@ -87,8 +69,8 @@ body.fleet-page {
|
|||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
|
|
@ -97,21 +79,21 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: var(--border-subtle);
|
||||
color: var(--text-primary);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.nav-btn .icon {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Page Header
|
||||
============================================ */
|
||||
.fleet-header {
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -129,7 +111,7 @@ body.fleet-page {
|
|||
.fleet-summary {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
|
|
@ -147,7 +129,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.summary-value.online {
|
||||
color: var(--success);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
|
|
@ -163,7 +145,7 @@ body.fleet-page {
|
|||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
|
@ -173,46 +155,46 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.btn .icon {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: var(--bg-primary);
|
||||
background: var(--blue-9);
|
||||
color: var(--bg-page);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-secondary);
|
||||
background: var(--blue-10);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--border-default);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
background: var(--bg-active);
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
background: rgba(102, 187, 106, 0.2);
|
||||
color: var(--success);
|
||||
border: 1px solid rgba(102, 187, 106, 0.4);
|
||||
background: var(--ok-muted);
|
||||
color: var(--ok);
|
||||
border: 1px solid var(--ok-border);
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
background: rgba(102, 187, 106, 0.3);
|
||||
background: var(--ok-border);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(239, 83, 80, 0.2);
|
||||
color: var(--danger);
|
||||
border: 1px solid rgba(239, 83, 80, 0.4);
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
border: 1px solid var(--alert-border);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: rgba(239, 83, 80, 0.3);
|
||||
background: var(--alert-border);
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
|
|
@ -235,8 +217,8 @@ body.fleet-page {
|
|||
Toolbar
|
||||
============================================ */
|
||||
.fleet-toolbar {
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--bg-hover);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
|
|
@ -256,8 +238,8 @@ body.fleet-page {
|
|||
|
||||
.search-input, .filter-select {
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
font-size: 13px;
|
||||
|
|
@ -269,7 +251,7 @@ body.fleet-page {
|
|||
|
||||
.search-input:focus, .filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
border-color: var(--blue-9);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
|
|
@ -287,16 +269,16 @@ body.fleet-page {
|
|||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(79, 195, 247, 0.15);
|
||||
border: 1px solid rgba(79, 195, 247, 0.3);
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
color: var(--accent-primary);
|
||||
background: var(--blue-muted);
|
||||
border: 1px solid var(--blue-border);
|
||||
border-radius: var(--radius-modal);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
.filter-chip .filter-dismiss {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
|
@ -308,8 +290,8 @@ body.fleet-page {
|
|||
Bulk Actions Bar
|
||||
============================================ */
|
||||
.bulk-actions-bar {
|
||||
background: rgba(79, 195, 247, 0.1);
|
||||
border-bottom: 1px solid rgba(79, 195, 247, 0.3);
|
||||
background: var(--blue-muted);
|
||||
border-bottom: 1px solid var(--blue-border);
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
|
|
@ -322,7 +304,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.bulk-count {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -356,7 +338,7 @@ body.fleet-page {
|
|||
.fleet-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--bg-secondary);
|
||||
background: var(--bg-card);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
|
@ -368,7 +350,7 @@ body.fleet-page {
|
|||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
border-bottom: 2px solid var(--border-default);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -378,7 +360,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.fleet-table th.sortable:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: var(--border-subtle);
|
||||
}
|
||||
|
||||
.fleet-table th.sortable::after {
|
||||
|
|
@ -390,18 +372,18 @@ body.fleet-page {
|
|||
.fleet-table th.sort-asc::after {
|
||||
content: ' ▲';
|
||||
opacity: 1;
|
||||
color: var(--accent-primary);
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
.fleet-table th.sort-desc::after {
|
||||
content: ' ▼';
|
||||
opacity: 1;
|
||||
color: var(--accent-primary);
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
.fleet-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.fleet-table tbody tr {
|
||||
|
|
@ -409,15 +391,15 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.fleet-table tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: var(--border-subtle);
|
||||
}
|
||||
|
||||
.fleet-table tbody tr.selected {
|
||||
background: rgba(79, 195, 247, 0.1);
|
||||
background: var(--blue-muted);
|
||||
}
|
||||
|
||||
.fleet-table tbody tr.selected:hover {
|
||||
background: rgba(79, 195, 247, 0.15);
|
||||
background: var(--blue-muted);
|
||||
}
|
||||
|
||||
/* Column widths */
|
||||
|
|
@ -432,7 +414,7 @@ body.fleet-page {
|
|||
|
||||
.col-mac {
|
||||
min-width: 140px;
|
||||
font-family: monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.col-status {
|
||||
|
|
@ -441,13 +423,13 @@ body.fleet-page {
|
|||
|
||||
.col-firmware {
|
||||
min-width: 120px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.col-uptime {
|
||||
min-width: 100px;
|
||||
font-family: monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.col-role {
|
||||
|
|
@ -476,7 +458,7 @@ body.fleet-page {
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent-primary);
|
||||
accent-color: var(--blue-9);
|
||||
}
|
||||
|
||||
/* Label (editable) */
|
||||
|
|
@ -489,13 +471,13 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.node-label:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--border-subtle);
|
||||
border-color: var(--bg-hover);
|
||||
}
|
||||
|
||||
.node-label.editing {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--bg-card);
|
||||
border-color: var(--blue-9);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -506,8 +488,8 @@ body.fleet-page {
|
|||
|
||||
/* MAC Address */
|
||||
.mac-address {
|
||||
font-family: monospace;
|
||||
color: var(--accent-primary);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
.mac-full {
|
||||
|
|
@ -515,7 +497,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.mac-truncated {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.mac-tooltip {
|
||||
|
|
@ -530,7 +512,7 @@ body.fleet-page {
|
|||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -541,31 +523,31 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.status-badge.online .status-dot {
|
||||
background: var(--success);
|
||||
background: var(--ok);
|
||||
}
|
||||
|
||||
.status-badge.online {
|
||||
background: rgba(102, 187, 106, 0.15);
|
||||
color: var(--success);
|
||||
background: var(--ok-bg);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.status-badge.offline .status-dot {
|
||||
background: var(--offline);
|
||||
background: var(--slate-8);
|
||||
}
|
||||
|
||||
.status-badge.offline {
|
||||
background: rgba(158, 158, 158, 0.15);
|
||||
color: var(--offline);
|
||||
background: var(--bg-active);
|
||||
color: var(--slate-8);
|
||||
}
|
||||
|
||||
.status-badge.updating .status-dot {
|
||||
background: var(--updating);
|
||||
background: var(--warn);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.status-badge.updating {
|
||||
background: rgba(255, 202, 40, 0.15);
|
||||
color: var(--updating);
|
||||
background: var(--warn-bg);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
|
@ -585,7 +567,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.firmware-outdated {
|
||||
color: var(--warning);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.firmware-indicator {
|
||||
|
|
@ -593,13 +575,13 @@ body.fleet-page {
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 6px;
|
||||
background: rgba(255, 167, 38, 0.15);
|
||||
background: var(--warn-bg);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.firmware-arrow {
|
||||
color: var(--warning);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
/* Role Badge */
|
||||
|
|
@ -613,23 +595,23 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.role-badge.tx {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #ef5350;
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.role-badge.rx {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #3f81f6;
|
||||
background: rgba(62, 150, 232, 0.2);
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
.role-badge.tx_rx {
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
color: #a855f7;
|
||||
background: var(--bg-active);
|
||||
color: var(--slate-11);
|
||||
}
|
||||
|
||||
.role-badge.passive {
|
||||
background: rgba(158, 158, 158, 0.2);
|
||||
color: #9e9e9e;
|
||||
background: var(--bg-active);
|
||||
color: var(--slate-9);
|
||||
}
|
||||
|
||||
/* Health Bar */
|
||||
|
|
@ -642,7 +624,7 @@ body.fleet-page {
|
|||
.health-bar {
|
||||
width: 60px;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -653,15 +635,15 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.health-bar-fill.good {
|
||||
background: linear-gradient(90deg, #66bb6a, #43a047);
|
||||
background: linear-gradient(90deg, var(--ok), var(--blue-9));
|
||||
}
|
||||
|
||||
.health-bar-fill.fair {
|
||||
background: linear-gradient(90deg, #ffa726, #fb8c00);
|
||||
background: linear-gradient(90deg, var(--warn), var(--blue-8));
|
||||
}
|
||||
|
||||
.health-bar-fill.poor {
|
||||
background: linear-gradient(90deg, #ef5350, #c62828);
|
||||
background: linear-gradient(90deg, var(--alert), var(--alert));
|
||||
}
|
||||
|
||||
.health-value {
|
||||
|
|
@ -673,31 +655,31 @@ body.fleet-page {
|
|||
|
||||
/* Packet Rate */
|
||||
.packet-rate {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.packet-rate.good {
|
||||
color: var(--success);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.packet-rate.fair {
|
||||
color: var(--warning);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.packet-rate.poor {
|
||||
color: var(--danger);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
/* Temperature */
|
||||
.temperature {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.temperature.alert {
|
||||
color: var(--danger);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
|
|
@ -713,14 +695,14 @@ body.fleet-page {
|
|||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: var(--accent-primary);
|
||||
background: rgba(79, 195, 247, 0.1);
|
||||
color: var(--blue-9);
|
||||
background: var(--blue-muted);
|
||||
}
|
||||
|
||||
.action-btn.disabled {
|
||||
|
|
@ -737,10 +719,10 @@ body.fleet-page {
|
|||
right: 0;
|
||||
top: 100%;
|
||||
margin-top: 4px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-control);
|
||||
box-shadow: 0 4px 12px var(--shadow-lg);
|
||||
z-index: 100;
|
||||
min-width: 180px;
|
||||
display: none;
|
||||
|
|
@ -766,26 +748,26 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--border-default);
|
||||
}
|
||||
|
||||
.dropdown-item.dropdown-divider {
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
background: var(--border-default);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dropdown-item.dropdown-danger {
|
||||
color: var(--danger);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.dropdown-item.dropdown-danger:hover {
|
||||
background: rgba(239, 83, 80, 0.1);
|
||||
background: var(--alert-bg);
|
||||
}
|
||||
|
||||
.dropdown-item .dropdown-icon {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -800,8 +782,8 @@ body.fleet-page {
|
|||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: var(--accent-primary);
|
||||
border: 2px solid var(--bg-hover);
|
||||
border-top-color: var(--blue-9);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-right: 12px;
|
||||
|
|
@ -825,7 +807,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -843,7 +825,7 @@ body.fleet-page {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: var(--overlay-strong);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -852,14 +834,14 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-secondary);
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 85vh;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 8px 32px var(--shadow-xl);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
@ -867,7 +849,7 @@ body.fleet-page {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
|
|
@ -891,7 +873,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
|
@ -906,7 +888,7 @@ body.fleet-page {
|
|||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-top: 1px solid var(--border-default);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
|
@ -915,7 +897,7 @@ body.fleet-page {
|
|||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
|
|
@ -937,7 +919,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.version-latest {
|
||||
color: var(--accent-primary);
|
||||
color: var(--blue-9);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -955,23 +937,23 @@ body.fleet-page {
|
|||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.role-option:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: var(--shadow);
|
||||
}
|
||||
|
||||
.role-option input[type="radio"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--accent-primary);
|
||||
accent-color: var(--blue-9);
|
||||
}
|
||||
|
||||
.role-desc {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
|
|
@ -979,9 +961,9 @@ body.fleet-page {
|
|||
.remove-warning {
|
||||
margin: 16px 0;
|
||||
padding: 12px;
|
||||
background: rgba(239, 83, 80, 0.1);
|
||||
border: 1px solid rgba(239, 83, 80, 0.3);
|
||||
border-radius: 6px;
|
||||
background: var(--alert-bg);
|
||||
border: 1px solid var(--alert-border);
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
|
||||
.remove-warning ul {
|
||||
|
|
@ -990,7 +972,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.remove-warning-text {
|
||||
color: var(--danger);
|
||||
color: var(--alert);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
|
@ -1009,10 +991,10 @@ body.fleet-page {
|
|||
|
||||
.toast {
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-control);
|
||||
box-shadow: 0 4px 12px var(--shadow);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
|
@ -1032,29 +1014,29 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.toast.success {
|
||||
border-left: 4px solid var(--success);
|
||||
border-left: 4px solid var(--ok);
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
border-left: 4px solid var(--danger);
|
||||
border-left: 4px solid var(--alert);
|
||||
}
|
||||
|
||||
.toast.warning {
|
||||
border-left: 4px solid var(--warning);
|
||||
border-left: 4px solid var(--warn);
|
||||
}
|
||||
|
||||
.toast.info {
|
||||
border-left: 4px solid var(--accent-primary);
|
||||
border-left: 4px solid var(--blue-9);
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.toast.success .toast-icon { color: var(--success); }
|
||||
.toast.error .toast-icon { color: var(--danger); }
|
||||
.toast.warning .toast-icon { color: var(--warning); }
|
||||
.toast.info .toast-icon { color: var(--accent-primary); }
|
||||
.toast.success .toast-icon { color: var(--ok); }
|
||||
.toast.error .toast-icon { color: var(--alert); }
|
||||
.toast.warning .toast-icon { color: var(--warn); }
|
||||
.toast.info .toast-icon { color: var(--blue-9); }
|
||||
|
||||
.toast-message {
|
||||
flex: 1;
|
||||
|
|
@ -1066,7 +1048,7 @@ body.fleet-page {
|
|||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -1128,7 +1110,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.fleet-table {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.fleet-table th,
|
||||
|
|
@ -1144,7 +1126,7 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.nav-btn .label {
|
||||
|
|
@ -1166,13 +1148,13 @@ body.fleet-page {
|
|||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.fleet-summary {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
.floorplan-header h3 {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
.floorplan-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
.floorplan-close:hover {
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
.floorplan-content {
|
||||
|
|
@ -55,13 +55,13 @@
|
|||
|
||||
.floorplan-section h4 {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.floorplan-hint {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
.floorplan-btn {
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
border: none;
|
||||
|
|
@ -85,12 +85,12 @@
|
|||
}
|
||||
|
||||
.floorplan-btn-primary {
|
||||
background: #4fc3f7;
|
||||
color: #1a1a2e;
|
||||
background: var(--blue-10);
|
||||
color: var(--bg-card);
|
||||
}
|
||||
|
||||
.floorplan-btn-primary:hover:not(:disabled) {
|
||||
background: #29b6f6;
|
||||
background: var(--blue-10);
|
||||
}
|
||||
|
||||
.floorplan-btn-primary:disabled {
|
||||
|
|
@ -99,22 +99,22 @@
|
|||
}
|
||||
|
||||
.floorplan-btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: var(--bg-hover);
|
||||
color: var(--slate-11);
|
||||
border: 1px solid var(--border-strong);
|
||||
}
|
||||
|
||||
.floorplan-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
.floorplan-icon {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.floorplan-file-name {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
max-width: 100%;
|
||||
max-height: 200px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Calibration */
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
.floorplan-image-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid var(--bg-hover);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -158,15 +158,15 @@
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
color: var(--text-on-accent);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
||||
text-shadow: 0 1px 3px var(--overlay-strong);
|
||||
}
|
||||
|
||||
.floorplan-controls {
|
||||
|
|
@ -174,16 +174,16 @@
|
|||
}
|
||||
|
||||
.floorplan-instructions {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
background: var(--border-subtle);
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.floorplan-points-info {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: var(--shadow);
|
||||
border-radius: 4px;
|
||||
padding: 8px 10px;
|
||||
margin-top: 8px;
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
}
|
||||
|
||||
.point-label {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.floorplan-distance-input {
|
||||
|
|
@ -207,25 +207,25 @@
|
|||
.floorplan-distance-input label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.floorplan-distance-input input {
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-default);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 4px;
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.floorplan-distance-input input:focus {
|
||||
outline: none;
|
||||
border-color: #4fc3f7;
|
||||
box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
|
||||
border-color: var(--blue-10);
|
||||
box-shadow: 0 0 0 2px var(--blue-muted);
|
||||
}
|
||||
|
||||
.floorplan-actions {
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
}
|
||||
|
||||
.status-label {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@
|
|||
|
||||
/* ===== Help Panel ===== */
|
||||
.guided-help-panel {
|
||||
background: rgba(30, 30, 58, 0.98);
|
||||
border: 1px solid rgba(79, 195, 247, 0.3);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--blue-border);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(79, 195, 247, 0.1);
|
||||
box-shadow: 0 8px 32px var(--shadow-xl), 0 0 0 1px var(--blue-muted);
|
||||
width: 380px;
|
||||
max-width: calc(100vw - 40px);
|
||||
overflow: hidden;
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(135deg, rgba(79, 195, 247, 0.15), rgba(41, 182, 246, 0.1));
|
||||
border-bottom: 1px solid rgba(79, 195, 247, 0.2);
|
||||
background: linear-gradient(135deg, var(--blue-muted), rgba(41, 182, 246, 0.1));
|
||||
border-bottom: 1px solid var(--blue-muted);
|
||||
}
|
||||
|
||||
.help-title {
|
||||
|
|
@ -55,16 +55,16 @@
|
|||
}
|
||||
|
||||
.help-title h3 {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.help-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
|
|
@ -79,8 +79,8 @@
|
|||
}
|
||||
|
||||
.help-close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
background: var(--bg-hover);
|
||||
color: var(--slate-11);
|
||||
}
|
||||
|
||||
/* ===== Content ===== */
|
||||
|
|
@ -100,18 +100,18 @@
|
|||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.help-progress-dot.active {
|
||||
background: #4fc3f7;
|
||||
box-shadow: 0 0 8px rgba(79, 195, 247, 0.6);
|
||||
background: var(--blue-10);
|
||||
box-shadow: 0 0 8px var(--blue-9);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.help-progress-dot.completed {
|
||||
background: #66bb6a;
|
||||
background: var(--ok);
|
||||
}
|
||||
|
||||
/* Step Content */
|
||||
|
|
@ -122,13 +122,13 @@
|
|||
.step-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #4fc3f7;
|
||||
color: var(--blue-10);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--slate-11);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -137,15 +137,15 @@
|
|||
.help-dismiss-hint {
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
.help-dismiss-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
.help-dismiss-checkbox input[type="checkbox"] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
accent-color: #4fc3f7;
|
||||
accent-color: var(--blue-10);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -166,13 +166,13 @@
|
|||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: var(--shadow);
|
||||
border-top: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
|
@ -189,33 +189,33 @@
|
|||
}
|
||||
|
||||
.help-btn-primary {
|
||||
background: #4fc3f7;
|
||||
color: #1a1a2e;
|
||||
background: var(--blue-10);
|
||||
color: var(--bg-card);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.help-btn-primary:hover {
|
||||
background: #29b6f6;
|
||||
background: var(--blue-10);
|
||||
}
|
||||
|
||||
.help-btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: var(--bg-hover);
|
||||
color: var(--slate-11);
|
||||
border: 1px solid var(--border-strong);
|
||||
}
|
||||
|
||||
.help-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
.help-btn-action {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #66bb6a;
|
||||
border: 1px solid rgba(76, 175, 80, 0.4);
|
||||
background: var(--ok-muted);
|
||||
color: var(--ok);
|
||||
border: 1px solid var(--ok-border);
|
||||
}
|
||||
|
||||
.help-btn-action:hover {
|
||||
background: rgba(76, 175, 80, 0.3);
|
||||
background: var(--ok-border);
|
||||
}
|
||||
|
||||
/* ===== Context Help Button ===== */
|
||||
|
|
@ -223,10 +223,10 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(79, 195, 247, 0.2);
|
||||
border: 1px solid rgba(79, 195, 247, 0.4);
|
||||
color: #4fc3f7;
|
||||
font-size: 12px;
|
||||
background: var(--blue-muted);
|
||||
border: 1px solid var(--blue-border);
|
||||
color: var(--blue-10);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
|
|
@ -237,8 +237,8 @@
|
|||
}
|
||||
|
||||
.context-help-btn:hover {
|
||||
background: rgba(79, 195, 247, 0.3);
|
||||
border-color: rgba(79, 195, 247, 0.6);
|
||||
background: var(--blue-border);
|
||||
border-color: var(--blue-9);
|
||||
}
|
||||
|
||||
/* ===== Animation ===== */
|
||||
|
|
@ -255,10 +255,10 @@
|
|||
|
||||
@keyframes helpPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(79, 195, 247, 0.1);
|
||||
box-shadow: 0 8px 32px var(--shadow-xl), 0 0 0 1px var(--blue-muted);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(79, 195, 247, 0.3);
|
||||
box-shadow: 0 8px 32px var(--shadow-xl), 0 0 0 2px var(--blue-border);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -293,7 +293,7 @@
|
|||
.help-btn:focus-visible,
|
||||
.help-close-btn:focus-visible,
|
||||
.context-help-btn:focus-visible {
|
||||
outline: 2px solid #4fc3f7;
|
||||
outline: 2px solid var(--blue-10);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,17 +28,17 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
.home-status__banner--ok {
|
||||
background: rgba(70, 167, 88, 0.15);
|
||||
background: var(--ok-bg);
|
||||
color: var(--ok);
|
||||
border: 1px solid rgba(70, 167, 88, 0.25);
|
||||
}
|
||||
.home-status__banner--warn {
|
||||
background: rgba(229, 160, 13, 0.15);
|
||||
background: var(--warn-bg);
|
||||
color: var(--warn);
|
||||
border: 1px solid rgba(229, 160, 13, 0.25);
|
||||
}
|
||||
.home-status__banner--alert {
|
||||
background: rgba(229, 72, 77, 0.15);
|
||||
background: var(--alert-bg);
|
||||
color: var(--alert);
|
||||
border: 1px solid rgba(229, 72, 77, 0.25);
|
||||
}
|
||||
|
|
@ -112,15 +112,15 @@
|
|||
color: var(--text-secondary);
|
||||
}
|
||||
.home-card__tag--ok {
|
||||
background: rgba(70, 167, 88, 0.15);
|
||||
background: var(--ok-bg);
|
||||
color: var(--ok);
|
||||
}
|
||||
.home-card__tag--warn {
|
||||
background: rgba(229, 160, 13, 0.15);
|
||||
background: var(--warn-bg);
|
||||
color: var(--warn);
|
||||
}
|
||||
.home-card__tag--alert {
|
||||
background: rgba(229, 72, 77, 0.15);
|
||||
background: var(--alert-bg);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -223,11 +223,11 @@ dialog.app-dialog {
|
|||
width: 92%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 8px 32px var(--shadow-xl);
|
||||
}
|
||||
|
||||
dialog.app-dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: var(--overlay-strong);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
|
||||
.notification-settings h2 {
|
||||
margin-bottom: 30px;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
background: #1e1e2e;
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
.settings-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #4fc3f7;
|
||||
color: var(--blue-10);
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -38,8 +38,8 @@
|
|||
}
|
||||
|
||||
.channel-card {
|
||||
background: #252538;
|
||||
border: 1px solid #3a3a4a;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
.channel-type {
|
||||
font-weight: 600;
|
||||
color: #81c784;
|
||||
color: var(--ok);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
|
@ -64,21 +64,21 @@
|
|||
}
|
||||
|
||||
.channel-details {
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.channel-url {
|
||||
color: #888;
|
||||
font-family: monospace;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
|
|
@ -87,21 +87,21 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #4fc3f7;
|
||||
color: #000;
|
||||
background: var(--blue-10);
|
||||
color: var(--slate-1);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #29b6f6;
|
||||
background: var(--blue-10);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #3a3a4a;
|
||||
color: #fff;
|
||||
background: var(--slate-5);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #4a4a5a;
|
||||
background: var(--slate-6);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -151,17 +151,17 @@
|
|||
}
|
||||
|
||||
.time-field label {
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.time-field input {
|
||||
padding: 8px 12px;
|
||||
background: #2a2a3a;
|
||||
border: 1px solid #3a3a4a;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
color: var(--text-on-accent);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.days-selector {
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
|
@ -206,18 +206,18 @@
|
|||
|
||||
.batch-window label,
|
||||
.max-batch-size label {
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.batch-window input,
|
||||
.max-batch-size input {
|
||||
padding: 8px 12px;
|
||||
background: #2a2a3a;
|
||||
border: 1px solid #3a3a4a;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
color: var(--text-on-accent);
|
||||
font-size: var(--text-sm);
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
|
|
@ -233,8 +233,8 @@
|
|||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 10px;
|
||||
background: #252538;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-hover);
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
|
||||
.event-type-info {
|
||||
|
|
@ -243,12 +243,12 @@
|
|||
}
|
||||
|
||||
.event-type-label {
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.event-type-desc {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
|
|
@ -273,7 +273,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #3a3a4a;
|
||||
background-color: var(--slate-5);
|
||||
transition: 0.3s;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
|
@ -285,13 +285,13 @@
|
|||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: #fff;
|
||||
background-color: var(--text-on-accent);
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider {
|
||||
background-color: #4fc3f7;
|
||||
background-color: var(--blue-10);
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider:before {
|
||||
|
|
@ -305,7 +305,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: var(--overlay-strong);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -317,7 +317,7 @@
|
|||
}
|
||||
|
||||
.modal-content {
|
||||
background: #1e1e2e;
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
|
|
@ -330,18 +330,18 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #3a3a4a;
|
||||
border-bottom: 1px solid var(--slate-5);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
|
|
@ -349,7 +349,7 @@
|
|||
}
|
||||
|
||||
.close-modal:hover {
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
@ -363,7 +363,7 @@
|
|||
|
||||
.form-group label {
|
||||
display: block;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -372,11 +372,11 @@
|
|||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: #2a2a3a;
|
||||
border: 1px solid #3a3a4a;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-on-accent);
|
||||
font-size: var(--text-sm);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -395,7 +395,7 @@
|
|||
|
||||
.event-types-selector label {
|
||||
display: block;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -420,18 +420,18 @@
|
|||
right: 20px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
color: var(--text-on-accent);
|
||||
font-size: var(--text-sm);
|
||||
z-index: 2000;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background: #43a047;
|
||||
background: var(--ok);
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background: #e53935;
|
||||
background: var(--alert);
|
||||
}
|
||||
|
||||
.toast-hiding {
|
||||
|
|
@ -458,7 +458,7 @@
|
|||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
padding: 40px 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -496,7 +496,7 @@
|
|||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #3a3a4a;
|
||||
border-bottom: 1px solid var(--slate-5);
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
|
|
@ -504,56 +504,56 @@
|
|||
padding: 12px 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.settings-tab:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-on-accent);
|
||||
background: var(--border-subtle);
|
||||
}
|
||||
|
||||
.settings-tab.active {
|
||||
color: #4fc3f7;
|
||||
border-bottom-color: #4fc3f7;
|
||||
color: var(--blue-10);
|
||||
border-bottom-color: var(--blue-10);
|
||||
}
|
||||
|
||||
/* Panel-specific notification settings styles */
|
||||
.panel-select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: #2a2a3a;
|
||||
border: 1px solid #3a3a4a;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-on-accent);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.panel-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: #2a2a3a;
|
||||
border: 1px solid #3a3a4a;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-5);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-on-accent);
|
||||
font-size: var(--text-sm);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.panel-input:focus,
|
||||
.panel-select:focus {
|
||||
outline: none;
|
||||
border-color: #4fc3f7;
|
||||
border-color: var(--blue-10);
|
||||
}
|
||||
|
||||
.channel-config-group {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #252538;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-hover);
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
|
||||
.panel-time-range {
|
||||
|
|
@ -567,7 +567,7 @@
|
|||
|
||||
.panel-time-field label {
|
||||
display: block;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -583,7 +583,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
|
@ -599,8 +599,8 @@
|
|||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 10px;
|
||||
background: #252538;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-hover);
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
|
||||
.panel-event-type-info {
|
||||
|
|
@ -609,12 +609,12 @@
|
|||
}
|
||||
|
||||
.panel-event-type-label {
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.panel-event-type-desc {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
|
|
@ -638,7 +638,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #3a3a4a;
|
||||
background-color: var(--slate-5);
|
||||
transition: 0.3s;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
|
@ -650,13 +650,13 @@
|
|||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: #fff;
|
||||
background-color: var(--text-on-accent);
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.panel-toggle-switch input:checked + .panel-toggle-slider {
|
||||
background-color: #4fc3f7;
|
||||
background-color: var(--blue-10);
|
||||
}
|
||||
|
||||
.panel-toggle-switch input:checked + .panel-toggle-slider:before {
|
||||
|
|
@ -664,7 +664,7 @@
|
|||
}
|
||||
|
||||
.panel-form-hint {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85em;
|
||||
margin-top: -8px;
|
||||
margin-bottom: 12px;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -26,7 +26,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: var(--shadow-lg);
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
animation: fadeIn 0.15s ease-out;
|
||||
|
|
@ -64,10 +64,10 @@
|
|||
position: absolute;
|
||||
min-width: 280px;
|
||||
max-width: 340px;
|
||||
background: var(--context-bg, #1e1e1e);
|
||||
background: var(--context-bg, var(--bg-card));
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid var(--context-border, rgba(255, 255, 255, 0.1));
|
||||
box-shadow: 0 8px 32px var(--shadow-xl);
|
||||
border: 1px solid var(--context-border, var(--bg-hover));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
|
@ -91,8 +91,8 @@
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--context-border, rgba(255, 255, 255, 0.1));
|
||||
background: var(--context-header-bg, rgba(255, 255, 255, 0.03));
|
||||
border-bottom: 1px solid var(--context-border, var(--bg-hover));
|
||||
background: var(--context-header-bg, var(--border-subtle));
|
||||
}
|
||||
|
||||
.context-icon {
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--context-icon-bg, rgba(79, 195, 247, 0.15));
|
||||
background: var(--context-icon-bg, var(--blue-muted));
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--context-text, #eee);
|
||||
color: var(--context-text, var(--slate-12));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -133,12 +133,12 @@
|
|||
}
|
||||
|
||||
.context-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--border-strong);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.context-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--slate-7);
|
||||
}
|
||||
|
||||
/* ===== Context Items ===== */
|
||||
|
|
@ -153,11 +153,11 @@
|
|||
}
|
||||
|
||||
.context-item:hover {
|
||||
background: var(--context-hover, rgba(255, 255, 255, 0.05));
|
||||
background: var(--context-hover, var(--border-subtle));
|
||||
}
|
||||
|
||||
.context-item:active {
|
||||
background: var(--context-active, rgba(255, 255, 255, 0.08));
|
||||
background: var(--context-active, var(--border-default));
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
|
|
@ -174,15 +174,15 @@
|
|||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--context-text, #eee);
|
||||
color: var(--context-text, var(--slate-12));
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 12px;
|
||||
color: var(--context-description, #888);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--context-description, var(--text-muted));
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
|
|
@ -190,38 +190,38 @@
|
|||
|
||||
/* Blob/Person context */
|
||||
.context-menu[data-target="blob"] .context-icon {
|
||||
background: rgba(79, 195, 247, 0.15);
|
||||
color: #4fc3f7;
|
||||
background: var(--blue-muted);
|
||||
color: var(--blue-10);
|
||||
}
|
||||
|
||||
/* Node context */
|
||||
.context-menu[data-target="node"] .context-icon {
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
color: #4caf50;
|
||||
background: var(--ok-bg);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
/* Zone context */
|
||||
.context-menu[data-target="zone"] .context-icon {
|
||||
background: rgba(255, 152, 0, 0.15);
|
||||
color: #ff9800;
|
||||
background: var(--warn-bg);
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
/* Empty space context */
|
||||
.context-menu[data-target="empty"] .context-icon {
|
||||
background: rgba(158, 158, 158, 0.15);
|
||||
color: #9e9e9e;
|
||||
background: var(--bg-active);
|
||||
color: var(--slate-10);
|
||||
}
|
||||
|
||||
/* Portal context */
|
||||
.context-menu[data-target="portal"] .context-icon {
|
||||
background: rgba(156, 39, 176, 0.15);
|
||||
color: #9c27b0;
|
||||
color: var(--blue-8);
|
||||
}
|
||||
|
||||
/* Trigger context */
|
||||
.context-menu[data-target="trigger"] .context-icon {
|
||||
background: rgba(244, 67, 54, 0.15);
|
||||
color: #f44336;
|
||||
background: var(--alert-bg);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
/* ===== Follow Mode Indicator ===== */
|
||||
|
|
@ -230,11 +230,11 @@
|
|||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(79, 195, 247, 0.9);
|
||||
background: var(--blue-10);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
|
||||
/* ===== Accessibility ===== */
|
||||
.context-item:focus-visible {
|
||||
outline: 2px solid var(--context-accent, #4fc3f7);
|
||||
outline: 2px solid var(--context-accent, var(--blue-10));
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
|
|
@ -292,15 +292,3 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* ===== Dark/Light Mode Support ===== */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.context-menu {
|
||||
--context-bg: #ffffff;
|
||||
--context-text: #1d1d1f;
|
||||
--context-border: rgba(0, 0, 0, 0.1);
|
||||
--context-hover: rgba(0, 0, 0, 0.05);
|
||||
--context-active: rgba(0, 0, 0, 0.08);
|
||||
--context-description: #666;
|
||||
--context-header-bg: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(180deg, rgba(30, 30, 58, 0.98) 0%, rgba(20, 20, 40, 0.95) 100%);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card) 100%);
|
||||
border-bottom: 1px solid var(--bg-hover);
|
||||
box-shadow: 0 4px 20px var(--shadow-lg);
|
||||
z-index: 100;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
|
|
@ -28,8 +28,8 @@
|
|||
}
|
||||
|
||||
.replay-btn {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-default);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 8px;
|
||||
color: var(--slate-12);
|
||||
width: 36px;
|
||||
|
|
@ -43,13 +43,13 @@
|
|||
}
|
||||
|
||||
.replay-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--border-strong);
|
||||
border-color: var(--border-strong);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.replay-btn:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
}
|
||||
|
||||
.replay-timestamp {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
color: var(--blue-10);
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
}
|
||||
|
||||
.replay-range {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
||||
}
|
||||
|
|
@ -86,9 +86,9 @@
|
|||
}
|
||||
|
||||
.replay-speed {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
background: var(--border-subtle);
|
||||
border: 1px solid var(--bg-hover);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--slate-11);
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
|
|
@ -97,8 +97,8 @@
|
|||
}
|
||||
|
||||
.replay-speed:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.replay-speed:focus {
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
.replay-scrubber {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -129,12 +129,12 @@
|
|||
border-radius: 50%;
|
||||
cursor: grab;
|
||||
transition: all 0.15s ease;
|
||||
box-shadow: 0 2px 6px rgba(79, 195, 247, 0.4);
|
||||
box-shadow: 0 2px 6px var(--blue-border);
|
||||
}
|
||||
|
||||
.replay-scrubber::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
box-shadow: 0 2px 10px rgba(79, 195, 247, 0.6);
|
||||
box-shadow: 0 2px 10px var(--blue-9);
|
||||
}
|
||||
|
||||
.replay-scrubber::-webkit-slider-thumb:active {
|
||||
|
|
@ -150,12 +150,12 @@
|
|||
border-radius: 50%;
|
||||
cursor: grab;
|
||||
transition: all 0.15s ease;
|
||||
box-shadow: 0 2px 6px rgba(79, 195, 247, 0.4);
|
||||
box-shadow: 0 2px 6px var(--blue-border);
|
||||
}
|
||||
|
||||
.replay-scrubber::-moz-range-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
box-shadow: 0 2px 10px rgba(79, 195, 247, 0.6);
|
||||
box-shadow: 0 2px 10px var(--blue-9);
|
||||
}
|
||||
|
||||
.replay-scrubber::-moz-range-thumb:active {
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
}
|
||||
|
||||
.replay-scrubber::-moz-range-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
border-radius: 3px;
|
||||
height: 6px;
|
||||
}
|
||||
|
|
@ -174,8 +174,8 @@
|
|||
}
|
||||
|
||||
.replay-tune-btn {
|
||||
background: rgba(76, 175, 80, 0.15);
|
||||
border: 1px solid rgba(76, 175, 80, 0.3);
|
||||
background: var(--ok-bg);
|
||||
border: 1px solid var(--ok-border);
|
||||
border-radius: 8px;
|
||||
color: var(--ok);
|
||||
padding: 8px 14px;
|
||||
|
|
@ -189,8 +189,8 @@
|
|||
}
|
||||
|
||||
.replay-tune-btn:hover {
|
||||
background: rgba(76, 175, 80, 0.25);
|
||||
border-color: rgba(76, 175, 80, 0.5);
|
||||
background: var(--ok-border);
|
||||
border-color: var(--ok);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: var(--overlay-strong);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
|
|
@ -221,15 +221,15 @@
|
|||
|
||||
.replay-tuning-content {
|
||||
background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-page) 100%);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--radius-modal);
|
||||
box-shadow: 0 20px 60px var(--shadow-xl);
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
.replay-tuning-header {
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--bg-hover);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -266,7 +266,7 @@
|
|||
}
|
||||
|
||||
.replay-tuning-close:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
|
|
@ -295,7 +295,7 @@
|
|||
.tuning-param input[type="range"] {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -310,7 +310,7 @@
|
|||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
box-shadow: 0 2px 6px rgba(79, 195, 247, 0.4);
|
||||
box-shadow: 0 2px 6px var(--blue-border);
|
||||
}
|
||||
|
||||
.tuning-param input[type="range"]::-webkit-slider-thumb:hover {
|
||||
|
|
@ -325,7 +325,7 @@
|
|||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
box-shadow: 0 2px 6px rgba(79, 195, 247, 0.4);
|
||||
box-shadow: 0 2px 6px var(--blue-border);
|
||||
}
|
||||
|
||||
.tuning-param input[type="range"]::-moz-range-thumb:hover {
|
||||
|
|
@ -333,7 +333,7 @@
|
|||
}
|
||||
|
||||
.tuning-param input[type="range"]::-moz-range-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-hover);
|
||||
border-radius: 3px;
|
||||
height: 6px;
|
||||
}
|
||||
|
|
@ -356,7 +356,7 @@
|
|||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -369,7 +369,7 @@
|
|||
|
||||
.tuning-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(79, 195, 247, 0.4);
|
||||
box-shadow: 0 4px 12px var(--blue-border);
|
||||
}
|
||||
|
||||
.tuning-btn:active {
|
||||
|
|
@ -377,14 +377,14 @@
|
|||
}
|
||||
|
||||
.tuning-btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--border-default);
|
||||
color: var(--slate-11);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
.tuning-btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: var(--bg-active);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ----- Responsive Adjustments ----- */
|
||||
|
|
@ -419,14 +419,14 @@
|
|||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(79, 195, 247, 0.9);
|
||||
background: var(--blue-10);
|
||||
color: var(--slate-1);
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
z-index: 99;
|
||||
box-shadow: 0 2px 10px rgba(79, 195, 247, 0.4);
|
||||
box-shadow: 0 2px 10px var(--blue-border);
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -451,7 +451,7 @@
|
|||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border: 2px solid var(--border-strong);
|
||||
border-top-color: var(--blue-10);
|
||||
border-radius: 50%;
|
||||
animation: replaySpin 0.8s linear infinite;
|
||||
|
|
|
|||
|
|
@ -17,33 +17,33 @@
|
|||
}
|
||||
|
||||
.security-status-indicator:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--border-default);
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-disarmed {
|
||||
background: rgba(136, 136, 136, 0.15);
|
||||
background: var(--bg-active);
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-learning {
|
||||
background: rgba(255, 167, 38, 0.15);
|
||||
background: var(--warn-bg);
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-ready {
|
||||
background: rgba(102, 187, 106, 0.15);
|
||||
background: var(--ok-bg);
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-armed {
|
||||
background: rgba(244, 67, 54, 0.15);
|
||||
background: var(--alert-bg);
|
||||
}
|
||||
|
||||
.security-status-indicator.mode-alert {
|
||||
background: rgba(239, 83, 80, 0.2);
|
||||
background: var(--alert-muted);
|
||||
animation: alert-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes alert-pulse {
|
||||
0%, 100% { box-shadow: 0 0 8px rgba(239, 83, 80, 0.4); }
|
||||
50% { box-shadow: 0 0 16px rgba(239, 83, 80, 0.8); }
|
||||
0%, 100% { box-shadow: 0 0 8px var(--alert-border); }
|
||||
50% { box-shadow: 0 0 16px var(--alert); }
|
||||
}
|
||||
|
||||
.security-toggle-btn {
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
background: transparent;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: var(--overlay-strong);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
|
@ -102,9 +102,9 @@
|
|||
}
|
||||
|
||||
.security-dialog-card {
|
||||
background: #1e1e3a;
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 8px 32px var(--shadow-xl);
|
||||
width: 480px;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
|
|
@ -124,11 +124,11 @@
|
|||
}
|
||||
|
||||
.security-dialog-card.arm {
|
||||
border-top: 4px solid #66bb6a;
|
||||
border-top: 4px solid var(--ok);
|
||||
}
|
||||
|
||||
.security-dialog-card.disarm {
|
||||
border-top: 4px solid #ef5350;
|
||||
border-top: 4px solid var(--alert);
|
||||
}
|
||||
|
||||
.security-dialog-header {
|
||||
|
|
@ -140,15 +140,15 @@
|
|||
|
||||
.security-dialog-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
.security-dialog-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
|
@ -163,8 +163,8 @@
|
|||
}
|
||||
|
||||
.security-dialog-close:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #eee;
|
||||
background: var(--bg-hover);
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
.security-dialog-content {
|
||||
|
|
@ -174,13 +174,13 @@
|
|||
.security-dialog-prompt {
|
||||
margin: 0 0 20px;
|
||||
font-size: 15px;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.security-dialog-warning {
|
||||
background: rgba(255, 167, 38, 0.15);
|
||||
border: 1px solid rgba(255, 167, 38, 0.3);
|
||||
background: var(--warn-bg);
|
||||
border: 1px solid var(--warn-border);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
.security-dialog-warning p {
|
||||
margin: 0 0 8px;
|
||||
font-size: 13px;
|
||||
color: #ffa726;
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.security-dialog-warning p:last-child {
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
}
|
||||
|
||||
.stat-item {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
.stat-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
.stat-item-full {
|
||||
|
|
@ -238,8 +238,8 @@
|
|||
|
||||
.security-dialog-btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
|
@ -251,31 +251,31 @@
|
|||
}
|
||||
|
||||
.security-dialog-btn.cancel {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
background: var(--bg-hover);
|
||||
color: var(--slate-11);
|
||||
}
|
||||
|
||||
.security-dialog-btn.cancel:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #eee;
|
||||
background: var(--border-strong);
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
.security-dialog-btn.arm {
|
||||
background: rgba(102, 187, 106, 0.2);
|
||||
color: #66bb6a;
|
||||
background: var(--ok-muted);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.security-dialog-btn.arm:hover {
|
||||
background: rgba(102, 187, 106, 0.3);
|
||||
background: var(--ok-border);
|
||||
}
|
||||
|
||||
.security-dialog-btn.disarm {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
color: #ef5350;
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.security-dialog-btn.disarm:hover {
|
||||
background: rgba(244, 67, 54, 0.3);
|
||||
background: var(--alert-border);
|
||||
}
|
||||
|
||||
/* ── Alert Banner ──────────────────────────────────────────────────────────────────── */
|
||||
|
|
@ -285,7 +285,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(135deg, rgba(185, 28, 28, 0.98), rgba(239, 68, 68, 0.95));
|
||||
background: linear-gradient(135deg, var(--alert), var(--alert));
|
||||
color: white;
|
||||
padding: 16px 20px;
|
||||
z-index: 5000;
|
||||
|
|
@ -293,7 +293,7 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
box-shadow: 0 4px 20px rgba(185, 28, 28, 0.4);
|
||||
box-shadow: 0 4px 20px var(--alert-border);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
}
|
||||
|
||||
.alert-banner-icon {
|
||||
font-size: 28px;
|
||||
font-size: var(--text-2xl);
|
||||
animation: alert-shake 0.5s ease-in-out infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -320,13 +320,13 @@
|
|||
}
|
||||
|
||||
.alert-banner-title {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.alert-banner-description {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
opacity: 0.95;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
@ -335,12 +335,12 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.alert-banner-zone {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
|
|
@ -354,7 +354,7 @@
|
|||
|
||||
.alert-banner-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
|
@ -368,17 +368,17 @@
|
|||
}
|
||||
|
||||
.alert-banner-btn.acknowledge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--border-strong);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.alert-banner-btn.acknowledge:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--slate-7);
|
||||
}
|
||||
|
||||
.alert-banner-btn.view {
|
||||
background: white;
|
||||
color: #b91c1c;
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
.alert-banner-btn.view:hover {
|
||||
|
|
@ -391,11 +391,11 @@
|
|||
position: fixed;
|
||||
top: 45px;
|
||||
right: 20px;
|
||||
background: rgba(239, 68, 68, 0.9);
|
||||
color: #fff;
|
||||
background: var(--alert);
|
||||
color: var(--text-on-accent);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
z-index: 150;
|
||||
|
|
@ -408,8 +408,8 @@
|
|||
}
|
||||
|
||||
@keyframes security-pulse {
|
||||
0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
|
||||
50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.8); }
|
||||
0%, 100% { box-shadow: 0 0 8px var(--alert-muted); }
|
||||
50% { box-shadow: 0 0 16px var(--alert); }
|
||||
}
|
||||
|
||||
/* ── Responsive Design ───────────────────────────────────────────────────────────── */
|
||||
|
|
@ -461,16 +461,16 @@
|
|||
top: 45px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(100, 181, 246, 0.9));
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--blue-10), var(--blue-10));
|
||||
color: var(--text-on-accent);
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 13px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
z-index: 150;
|
||||
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
|
||||
box-shadow: 0 4px 12px var(--blue-border);
|
||||
}
|
||||
|
||||
#anomaly-learning-banner.visible {
|
||||
|
|
@ -480,14 +480,14 @@
|
|||
#anomaly-learning-banner .progress-bar {
|
||||
width: 80px;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--slate-7);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#anomaly-learning-banner .learning-progress {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: var(--text-on-accent);
|
||||
border-radius: 3px;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,21 +7,21 @@
|
|||
|
||||
/* ===== Simple Mode Layout ===== */
|
||||
.simple-mode {
|
||||
--simple-bg: #f5f5f7;
|
||||
--simple-card-bg: #ffffff;
|
||||
--simple-text-primary: #1d1d1f;
|
||||
--simple-text-secondary: #86868b;
|
||||
--simple-accent-blue: #007aff;
|
||||
--simple-accent-green: #34c759;
|
||||
--simple-accent-orange: #ff9500;
|
||||
--simple-accent-red: #ff3b30;
|
||||
--simple-border: #e5e5ea;
|
||||
--simple-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
--simple-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
--simple-bg: var(--bg-page);
|
||||
--simple-card-bg: var(--bg-card);
|
||||
--simple-text-primary: var(--text-primary);
|
||||
--simple-text-secondary: var(--text-secondary);
|
||||
--simple-accent-blue: var(--blue-9);
|
||||
--simple-accent-green: var(--ok);
|
||||
--simple-accent-orange: var(--warn);
|
||||
--simple-accent-red: var(--alert);
|
||||
--simple-border: var(--border-default);
|
||||
--simple-shadow: var(--shadow);
|
||||
--simple-shadow-hover: var(--shadow-lg);
|
||||
}
|
||||
|
||||
body.simple-mode {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: var(--font-body);
|
||||
background: var(--simple-bg);
|
||||
color: var(--simple-text-primary);
|
||||
overflow-y: auto;
|
||||
|
|
@ -46,7 +46,7 @@ body.simple-mode {
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--simple-border);
|
||||
|
|
@ -57,7 +57,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-mode-header h1 {
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--simple-text-primary);
|
||||
|
|
@ -76,7 +76,7 @@ body.simple-mode {
|
|||
background: transparent;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--simple-text-secondary);
|
||||
|
|
@ -87,7 +87,7 @@ body.simple-mode {
|
|||
.simple-mode-header .mode-toggle-btn.active {
|
||||
background: var(--simple-card-bg);
|
||||
color: var(--simple-text-primary);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 4px var(--border-subtle);
|
||||
}
|
||||
|
||||
.simple-mode-header .mode-toggle-btn:hover:not(.active) {
|
||||
|
|
@ -104,7 +104,7 @@ body.simple-mode {
|
|||
|
||||
/* ===== Alert Banner ===== */
|
||||
.simple-alert-banner {
|
||||
background: linear-gradient(135deg, var(--simple-accent-red), #ff6b6b);
|
||||
background: linear-gradient(135deg, var(--simple-accent-red), var(--alert));
|
||||
color: white;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
|
|
@ -142,17 +142,17 @@ body.simple-mode {
|
|||
|
||||
.simple-alert-banner .alert-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.simple-alert-banner .alert-message {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.simple-alert-banner .alert-dismiss {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--border-strong);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 28px;
|
||||
|
|
@ -167,15 +167,15 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-alert-banner .alert-dismiss:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ===== Morning Briefing Card ===== */
|
||||
.simple-morning-briefing {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
background: linear-gradient(135deg, var(--blue-7), var(--blue-9));
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-modal);
|
||||
margin-bottom: 16px;
|
||||
box-shadow: var(--simple-shadow);
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
|
|
@ -216,9 +216,9 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-morning-briefing .briefing-section {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.simple-morning-briefing .section-label {
|
||||
|
|
@ -237,7 +237,7 @@ body.simple-mode {
|
|||
.simple-morning-briefing .section-metric {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.simple-morning-briefing .metric-label {
|
||||
|
|
@ -250,19 +250,19 @@ body.simple-mode {
|
|||
|
||||
.simple-morning-briefing .briefing-dismiss {
|
||||
margin-top: 8px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--border-strong);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.simple-morning-briefing .briefing-dismiss:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ===== Room Cards ===== */
|
||||
|
|
@ -275,7 +275,7 @@ body.simple-mode {
|
|||
|
||||
.simple-room-card {
|
||||
background: var(--simple-card-bg);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-modal);
|
||||
padding: 16px;
|
||||
box-shadow: var(--simple-shadow);
|
||||
transition: all 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
|
@ -288,15 +288,15 @@ body.simple-mode {
|
|||
@keyframes occupancyPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 2px 8px var(--border-subtle);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 4px 20px rgba(0, 122, 255, 0.3);
|
||||
box-shadow: 0 4px 20px var(--blue-border);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 2px 8px var(--border-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -356,17 +356,17 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-room-card .room-status.empty {
|
||||
background: rgba(52, 199, 89, 0.1);
|
||||
background: var(--ok-bg);
|
||||
color: var(--simple-accent-green);
|
||||
}
|
||||
|
||||
.simple-room-card .room-status.occupied {
|
||||
background: rgba(0, 122, 255, 0.1);
|
||||
background: var(--blue-muted);
|
||||
color: var(--simple-accent-blue);
|
||||
}
|
||||
|
||||
.simple-room-card .room-status.alert {
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
background: var(--alert-bg);
|
||||
color: var(--simple-accent-red);
|
||||
}
|
||||
|
||||
|
|
@ -384,7 +384,7 @@ body.simple-mode {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -396,7 +396,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-room-card .room-timestamp {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--simple-text-secondary);
|
||||
}
|
||||
|
||||
|
|
@ -406,14 +406,14 @@ body.simple-mode {
|
|||
justify-content: center;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--simple-text-secondary);
|
||||
}
|
||||
|
||||
/* ===== Activity Feed ===== */
|
||||
.simple-activity-feed {
|
||||
background: var(--simple-card-bg);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-modal);
|
||||
padding: 16px;
|
||||
box-shadow: var(--simple-shadow);
|
||||
}
|
||||
|
|
@ -490,34 +490,34 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-activity-feed .activity-item:hover {
|
||||
background: #ebebeb;
|
||||
background: var(--border-default);
|
||||
}
|
||||
|
||||
.simple-activity-feed .activity-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.simple-activity-feed .activity-icon.presence {
|
||||
background: rgba(0, 122, 255, 0.1);
|
||||
background: var(--blue-muted);
|
||||
}
|
||||
|
||||
.simple-activity-feed .activity-icon.alert {
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
background: var(--alert-bg);
|
||||
}
|
||||
|
||||
.simple-activity-feed .activity-icon.system {
|
||||
background: rgba(134, 134, 139, 0.1);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.simple-activity-feed .activity-icon.sleep {
|
||||
background: rgba(175, 82, 222, 0.1);
|
||||
background: var(--blue-muted);
|
||||
}
|
||||
|
||||
.simple-activity-feed .activity-content {
|
||||
|
|
@ -526,7 +526,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-activity-feed .activity-title {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--simple-text-primary);
|
||||
margin-bottom: 2px;
|
||||
|
|
@ -542,7 +542,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-activity-feed .activity-time {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--simple-text-secondary);
|
||||
}
|
||||
|
||||
|
|
@ -556,8 +556,8 @@ body.simple-mode {
|
|||
background: transparent;
|
||||
border: 1px solid var(--simple-border);
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
border-radius: var(--radius-control);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--simple-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
|
@ -574,7 +574,7 @@ body.simple-mode {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-top: 1px solid var(--simple-border);
|
||||
|
|
@ -599,7 +599,7 @@ body.simple-mode {
|
|||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-card);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
min-width: 60px;
|
||||
|
|
@ -610,7 +610,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-quick-actions .quick-action-btn.active {
|
||||
background: rgba(0, 122, 255, 0.1);
|
||||
background: var(--blue-muted);
|
||||
}
|
||||
|
||||
.simple-quick-actions .action-icon {
|
||||
|
|
@ -633,17 +633,17 @@ body.simple-mode {
|
|||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-card);
|
||||
min-width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== Sleep Summary Card ===== */
|
||||
.simple-sleep-summary {
|
||||
background: linear-gradient(135deg, #af52de, #9c27b0);
|
||||
background: linear-gradient(135deg, var(--blue-10), var(--blue-8));
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-modal);
|
||||
margin-bottom: 16px;
|
||||
box-shadow: var(--simple-shadow);
|
||||
}
|
||||
|
|
@ -675,9 +675,9 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-sleep-summary .sleep-metric {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.simple-sleep-summary .metric-label {
|
||||
|
|
@ -689,7 +689,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-sleep-summary .metric-value {
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -701,32 +701,32 @@ body.simple-mode {
|
|||
|
||||
.simple-sleep-summary .sleep-quality {
|
||||
grid-column: 1 / -1;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--border-strong);
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-card);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.simple-sleep-summary .quality-label {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.simple-sleep-summary .quality-value {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.simple-sleep-summary .sleep-details-btn {
|
||||
margin-top: 12px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--border-strong);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
|
@ -734,7 +734,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-sleep-summary .sleep-details-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ===== Room Detail Modal ===== */
|
||||
|
|
@ -744,7 +744,7 @@ body.simple-mode {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: var(--overlay);
|
||||
z-index: 200;
|
||||
display: none;
|
||||
align-items: center;
|
||||
|
|
@ -764,7 +764,7 @@ body.simple-mode {
|
|||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--shadow-xl);
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -788,7 +788,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-room-modal .modal-title {
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
color: var(--simple-text-primary);
|
||||
}
|
||||
|
|
@ -800,7 +800,7 @@ body.simple-mode {
|
|||
height: 32px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
color: var(--simple-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -809,7 +809,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-room-modal .modal-close:hover {
|
||||
background: #e5e5e7;
|
||||
background: var(--border-default);
|
||||
}
|
||||
|
||||
.simple-room-modal .modal-body {
|
||||
|
|
@ -831,7 +831,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-room-modal .stat-label {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--simple-text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
@ -847,7 +847,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-room-modal .history-title {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: var(--simple-text-primary);
|
||||
|
|
@ -865,8 +865,8 @@ body.simple-mode {
|
|||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
background: var(--simple-bg);
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
border-radius: var(--radius-card);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.simple-room-modal .history-time {
|
||||
|
|
@ -882,7 +882,7 @@ body.simple-mode {
|
|||
/* ===== Security Mode Toggle ===== */
|
||||
.simple-security-toggle {
|
||||
background: var(--simple-card-bg);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--radius-modal);
|
||||
padding: 16px;
|
||||
box-shadow: var(--simple-shadow);
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -896,7 +896,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-security-toggle .security-title {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -904,7 +904,7 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-security-toggle .security-description {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--simple-text-secondary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
|
@ -913,7 +913,7 @@ body.simple-mode {
|
|||
width: 100%;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
|
@ -986,11 +986,11 @@ body.simple-mode {
|
|||
}
|
||||
|
||||
.simple-quick-actions .action-icon {
|
||||
font-size: 28px;
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
.simple-quick-actions .action-label {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1019,57 +1019,32 @@ body.simple-mode {
|
|||
}
|
||||
}
|
||||
|
||||
/* ===== Dark Mode Support ===== */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body.simple-mode {
|
||||
--simple-bg: #1c1c1e;
|
||||
--simple-card-bg: #2c2c2e;
|
||||
--simple-text-primary: #ffffff;
|
||||
--simple-text-secondary: #98989d;
|
||||
--simple-border: #38383a;
|
||||
--simple-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--simple-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.simple-mode-header {
|
||||
background: rgba(44, 44, 46, 0.95);
|
||||
}
|
||||
|
||||
.simple-room-card .room-expand-hint {
|
||||
color: var(--simple-text-secondary);
|
||||
}
|
||||
|
||||
.simple-quick-actions {
|
||||
background: rgba(44, 44, 46, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== OLED Night Mode (True Black) ===== */
|
||||
body.simple-mode.night-mode.oled-night {
|
||||
--simple-bg: #000000;
|
||||
--simple-card-bg: #0a0a0a;
|
||||
--simple-text-primary: #ffffff;
|
||||
--simple-text-secondary: #98989d;
|
||||
--simple-border: #1a1a1a;
|
||||
--simple-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||
--simple-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
--simple-bg: var(--slate-1);
|
||||
--simple-card-bg: var(--slate-1);
|
||||
--simple-text-primary: var(--text-on-accent);
|
||||
--simple-text-secondary: var(--text-secondary);
|
||||
--simple-border: var(--bg-page);
|
||||
--simple-shadow: var(--shadow-xl);
|
||||
--simple-shadow-hover: 0 4px 16px var(--overlay-strong);
|
||||
}
|
||||
|
||||
body.simple-mode.night-mode.oled-night .simple-mode-header {
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
body.simple-mode.night-mode.oled-night .simple-quick-actions {
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
body.simple-mode.night-mode.oled-night .simple-room-card {
|
||||
background: #0a0a0a;
|
||||
background: var(--slate-1);
|
||||
}
|
||||
|
||||
body.simple-mode.night-mode.oled-night .simple-activity-feed,
|
||||
body.simple-mode.night-mode.oled-night .simple-security-toggle {
|
||||
background: #0a0a0a;
|
||||
background: var(--slate-1);
|
||||
}
|
||||
|
||||
/* Zone color accents remain vibrant in night mode */
|
||||
|
|
@ -1107,7 +1082,7 @@ body.simple-mode.night-mode.oled-night {
|
|||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
body.simple-mode {
|
||||
--simple-border: #000000;
|
||||
--simple-border: var(--slate-1);
|
||||
}
|
||||
|
||||
.simple-room-card,
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@
|
|||
right: 0;
|
||||
width: 380px;
|
||||
max-height: calc(100vh - 44px);
|
||||
background: #1a1a1a;
|
||||
border-left: 1px solid #333;
|
||||
background: var(--bg-page);
|
||||
border-left: 1px solid var(--slate-5);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 100;
|
||||
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: -2px 0 10px var(--shadow);
|
||||
}
|
||||
|
||||
.simulator-panel::-webkit-scrollbar {
|
||||
|
|
@ -26,16 +26,16 @@
|
|||
}
|
||||
|
||||
.simulator-panel::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
.simulator-panel::-webkit-scrollbar-thumb {
|
||||
background: #444;
|
||||
background: var(--slate-6);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.simulator-panel::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
background: var(--slate-7);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -46,8 +46,8 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #333;
|
||||
background: #1a1a1a;
|
||||
border-bottom: 1px solid var(--slate-5);
|
||||
background: var(--bg-page);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
|
@ -57,13 +57,13 @@
|
|||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.sim-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -74,8 +74,8 @@
|
|||
}
|
||||
|
||||
.sim-close-btn:hover {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
background: var(--slate-5);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
============================================ */
|
||||
.sim-section {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
border-bottom: 1px solid var(--bg-hover);
|
||||
}
|
||||
|
||||
.sim-section:last-child {
|
||||
|
|
@ -92,9 +92,9 @@
|
|||
|
||||
.sim-section h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
|
@ -114,22 +114,22 @@
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
}
|
||||
|
||||
.sim-space-controls input[type="number"] {
|
||||
width: 60px;
|
||||
padding: 4px 8px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #444;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-6);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sim-space-controls input[type="number"]:focus {
|
||||
outline: none;
|
||||
border-color: #45b7d1;
|
||||
border-color: var(--blue-9);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -142,8 +142,8 @@
|
|||
}
|
||||
|
||||
.sim-tool-btn {
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #444;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-6);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
|
|
@ -154,23 +154,23 @@
|
|||
}
|
||||
|
||||
.sim-tool-btn:hover {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
background: var(--slate-5);
|
||||
border-color: var(--slate-7);
|
||||
}
|
||||
|
||||
.sim-tool-btn.active {
|
||||
background: #45b7d1;
|
||||
border-color: #45b7d1;
|
||||
background: var(--blue-9);
|
||||
border-color: var(--blue-9);
|
||||
}
|
||||
|
||||
.sim-tool-btn.active svg {
|
||||
stroke: #fff;
|
||||
stroke: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.sim-tool-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke: #888;
|
||||
stroke: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -178,41 +178,41 @@
|
|||
============================================ */
|
||||
.sim-btn {
|
||||
padding: 8px 12px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #444;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-6);
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.sim-btn:hover {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
color: #fff;
|
||||
background: var(--slate-5);
|
||||
border-color: var(--slate-7);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.sim-btn-primary {
|
||||
background: #45b7d1;
|
||||
border-color: #45b7d1;
|
||||
color: #fff;
|
||||
background: var(--blue-9);
|
||||
border-color: var(--blue-9);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.sim-btn-primary:hover {
|
||||
background: #3aa6c3;
|
||||
border-color: #3aa6c3;
|
||||
background: var(--blue-8);
|
||||
border-color: var(--blue-8);
|
||||
}
|
||||
|
||||
.sim-btn-danger {
|
||||
background: #dc3545;
|
||||
border-color: #dc3545;
|
||||
color: #fff;
|
||||
background: var(--alert);
|
||||
border-color: var(--alert);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.sim-btn-danger:hover {
|
||||
background: #c82333;
|
||||
border-color: #c82333;
|
||||
background: var(--alert);
|
||||
border-color: var(--alert);
|
||||
}
|
||||
|
||||
.sim-btn:disabled {
|
||||
|
|
@ -221,8 +221,8 @@
|
|||
}
|
||||
|
||||
.sim-btn:disabled:hover {
|
||||
background: #2a2a2a;
|
||||
border-color: #444;
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--slate-6);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -239,26 +239,26 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-hover);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sim-item-name {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.sim-item-position {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.sim-item-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #dc3545;
|
||||
color: var(--alert);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
}
|
||||
|
||||
.sim-item-delete:hover {
|
||||
background: rgba(220, 53, 69, 0.1);
|
||||
background: var(--alert-bg);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -283,10 +283,10 @@
|
|||
.sim-walker-controls select {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #444;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--slate-6);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
|
@ -296,7 +296,7 @@
|
|||
.sim-gdop-legend {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-hover);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -318,8 +318,8 @@
|
|||
}
|
||||
|
||||
.gdop-legend-label {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--slate-11);
|
||||
}
|
||||
|
||||
.gdop-stats {
|
||||
|
|
@ -328,16 +328,16 @@
|
|||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #444;
|
||||
border-top: 1px solid var(--slate-6);
|
||||
}
|
||||
|
||||
.gdop-stat-item {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.gdop-stat-item strong {
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -362,8 +362,8 @@
|
|||
}
|
||||
|
||||
.sim-progress #sim-time {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -371,14 +371,14 @@
|
|||
.sim-progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-hover);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sim-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #45b7d1, #4ecdc4);
|
||||
background: linear-gradient(90deg, var(--blue-9), var(--blue-9));
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
|
|
@ -395,18 +395,18 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-hover);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sim-result-label {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
}
|
||||
|
||||
.sim-result-value {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -424,26 +424,26 @@
|
|||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-hover);
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #555;
|
||||
border-left: 3px solid var(--slate-7);
|
||||
}
|
||||
|
||||
.sim-rec-priority.high {
|
||||
border-left-color: #dc3545;
|
||||
border-left-color: var(--alert);
|
||||
}
|
||||
|
||||
.sim-rec-priority.medium {
|
||||
border-left-color: #ffc107;
|
||||
border-left-color: var(--warn);
|
||||
}
|
||||
|
||||
.sim-rec-priority.low {
|
||||
border-left-color: #22c65e;
|
||||
border-left-color: var(--ok);
|
||||
}
|
||||
|
||||
.sim-rec-text {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
@ -460,17 +460,17 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
background: #2a2a2a;
|
||||
background: var(--bg-hover);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sim-shopping-item span {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
color: var(--slate-11);
|
||||
}
|
||||
|
||||
.sim-shopping-item strong {
|
||||
color: #45b7d1;
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -479,7 +479,7 @@
|
|||
.sim-empty-state {
|
||||
text-align: center;
|
||||
padding: 32px 16px;
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sim-empty-state svg {
|
||||
|
|
@ -490,7 +490,7 @@
|
|||
}
|
||||
|
||||
.sim-empty-state p {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -549,7 +549,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sim-loading::after {
|
||||
|
|
@ -557,7 +557,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
border: 2px solid #45b7d1;
|
||||
border: 2px solid var(--blue-9);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@
|
|||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 1000;
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border: 1px solid var(--border-color, #333);
|
||||
background: var(--bg-card, var(--bg-card));
|
||||
border: 1px solid var(--border-color, var(--slate-5));
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
max-width: 380px;
|
||||
width: 100%;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 8px 32px var(--shadow-lg);
|
||||
animation: sleep-slide-in 0.3s ease-out;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
color: var(--text-color, var(--slate-11));
|
||||
}
|
||||
|
||||
@keyframes sleep-slide-in {
|
||||
|
|
@ -33,25 +33,25 @@
|
|||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border-color, #333);
|
||||
border-bottom: 1px solid var(--border-color, var(--slate-5));
|
||||
}
|
||||
|
||||
.sleep-summary-icon {
|
||||
color: #a78bfa;
|
||||
color: var(--blue-10);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sleep-summary-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sleep-summary-dismiss {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted, #888);
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
|
|
@ -60,8 +60,8 @@
|
|||
}
|
||||
|
||||
.sleep-summary-dismiss:hover {
|
||||
background: var(--bg-hover, #333);
|
||||
color: var(--text-color, #e0e0e0);
|
||||
background: var(--bg-hover, var(--slate-5));
|
||||
color: var(--text-color, var(--slate-11));
|
||||
}
|
||||
|
||||
.sleep-summary-body {
|
||||
|
|
@ -90,29 +90,29 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sleep-efficiency-dot.green { background: #4ade80; }
|
||||
.sleep-efficiency-dot.amber { background: #fbbf24; }
|
||||
.sleep-efficiency-dot.red { background: #f87171; }
|
||||
.sleep-efficiency-dot.green { background: var(--ok); }
|
||||
.sleep-efficiency-dot.amber { background: var(--warn); }
|
||||
.sleep-efficiency-dot.red { background: var(--alert); }
|
||||
|
||||
.sleep-anomaly-warning {
|
||||
color: #fbbf24;
|
||||
color: var(--warn);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sleep-summary-details-btn {
|
||||
margin-top: 8px;
|
||||
padding: 6px 12px;
|
||||
background: var(--bg-hover, #2a2a3e);
|
||||
border: 1px solid var(--border-color, #444);
|
||||
border-radius: 6px;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
font-size: 12px;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border-color, var(--slate-6));
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-color, var(--slate-11));
|
||||
font-size: var(--text-xs);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sleep-summary-details-btn:hover {
|
||||
background: var(--bg-active, #3a3a4e);
|
||||
background: var(--bg-active);
|
||||
}
|
||||
|
||||
.sleep-summary-details-btn.hidden {
|
||||
|
|
@ -131,14 +131,14 @@
|
|||
right: 0;
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
background: var(--bg-panel, #1a1a2e);
|
||||
border-left: 1px solid var(--border-color, #333);
|
||||
background: var(--bg-panel, var(--bg-card));
|
||||
border-left: 1px solid var(--border-color, var(--slate-5));
|
||||
z-index: 900;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: -4px 0 24px var(--shadow);
|
||||
overflow: hidden;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
color: var(--text-color, var(--slate-11));
|
||||
}
|
||||
|
||||
.sleep-panel.hidden {
|
||||
|
|
@ -150,29 +150,29 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--border-color, #333);
|
||||
border-bottom: 1px solid var(--border-color, var(--slate-5));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sleep-panel-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sleep-panel-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: 20px;
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
font-size: var(--text-lg);
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sleep-panel-close:hover {
|
||||
background: var(--bg-hover, #333);
|
||||
color: var(--text-color, #e0e0e0);
|
||||
background: var(--bg-hover, var(--slate-5));
|
||||
color: var(--text-color, var(--slate-11));
|
||||
}
|
||||
|
||||
.sleep-panel-content {
|
||||
|
|
@ -190,7 +190,7 @@
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-muted, #888);
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
|
|
@ -209,8 +209,8 @@
|
|||
}
|
||||
|
||||
.sleep-trend-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
min-width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
}
|
||||
|
||||
.sleep-trend-value {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
|
|
@ -234,12 +234,12 @@
|
|||
}
|
||||
|
||||
.sleep-week-comparison {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-card, var(--bg-card));
|
||||
border-radius: var(--radius-control);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
@ -252,7 +252,7 @@
|
|||
|
||||
.sleep-stat {
|
||||
flex: 1;
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
background: var(--bg-card, var(--bg-card));
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
|
|
@ -261,15 +261,15 @@
|
|||
.sleep-stat-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted, #888);
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sleep-stat-value {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 700;
|
||||
color: #4a9eff;
|
||||
color: var(--blue-9);
|
||||
}
|
||||
|
||||
/* ── History ──────────────────────────────────────────────────────────────── */
|
||||
|
|
@ -285,14 +285,14 @@
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 10px;
|
||||
background: var(--bg-card, #1e1e2e);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-card, var(--bg-card));
|
||||
border-radius: var(--radius-control);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sleep-history-date {
|
||||
min-width: 90px;
|
||||
color: var(--text-muted, #888);
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
}
|
||||
|
||||
.sleep-history-duration {
|
||||
|
|
@ -301,13 +301,13 @@
|
|||
}
|
||||
|
||||
.sleep-history-breathing {
|
||||
color: #4a9eff;
|
||||
font-size: 12px;
|
||||
color: var(--blue-9);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.sleep-history-empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted, #888);
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
font-size: 13px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, var(--slate-11));
|
||||
margin: 0;
|
||||
|
|
@ -119,10 +119,10 @@
|
|||
padding: 6px 10px;
|
||||
background: var(--bg-primary, var(--bg-page));
|
||||
border: 1px solid var(--border-color, var(--bg-hover));
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary, var(--text-secondary));
|
||||
}
|
||||
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
|
||||
.timeline-category-checkbox:has(input:checked) {
|
||||
border-color: var(--accent-color, var(--blue-9));
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
background: var(--blue-muted);
|
||||
color: var(--text-primary, var(--slate-11));
|
||||
}
|
||||
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
}
|
||||
|
||||
.timeline-category-icon {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Filter Controls */
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
.timeline-filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color, var(--blue-9));
|
||||
box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
|
||||
box-shadow: 0 0 0 2px var(--blue-border);
|
||||
}
|
||||
|
||||
.timeline-search {
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
.timeline-search:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color, var(--blue-9));
|
||||
box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
|
||||
box-shadow: 0 0 0 2px var(--blue-border);
|
||||
}
|
||||
|
||||
.timeline-search::placeholder {
|
||||
|
|
@ -274,7 +274,7 @@
|
|||
.timeline-event:hover {
|
||||
border-color: var(--accent-color, var(--blue-9));
|
||||
transform: translateX(2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 2px 8px var(--shadow);
|
||||
}
|
||||
|
||||
.timeline-event.severity-critical {
|
||||
|
|
@ -305,8 +305,8 @@
|
|||
flex-shrink: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
background: var(--event-color-bg, rgba(74, 158, 255, 0.15));
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--event-color-bg, var(--blue-muted));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -324,7 +324,7 @@
|
|||
}
|
||||
|
||||
.timeline-event-title {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--text-primary, var(--slate-11));
|
||||
margin: 0 0 2px 0;
|
||||
|
|
@ -336,7 +336,7 @@
|
|||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
}
|
||||
|
||||
|
|
@ -413,19 +413,19 @@
|
|||
}
|
||||
|
||||
.timeline-feedback-btn.active {
|
||||
background: var(--event-color-bg, rgba(74, 158, 255, 0.15));
|
||||
background: var(--event-color-bg, var(--blue-muted));
|
||||
border-color: var(--event-color, var(--blue-9));
|
||||
color: var(--event-color, var(--blue-9));
|
||||
}
|
||||
|
||||
.timeline-feedback-btn.active.positive {
|
||||
background: rgba(46, 213, 115, 0.15);
|
||||
background: var(--ok-bg);
|
||||
border-color: var(--color-success, var(--ok));
|
||||
color: var(--color-success, var(--ok));
|
||||
}
|
||||
|
||||
.timeline-feedback-btn.active.negative {
|
||||
background: rgba(255, 71, 87, 0.15);
|
||||
background: var(--alert-bg);
|
||||
border-color: var(--color-critical, var(--alert));
|
||||
color: var(--color-critical, var(--alert));
|
||||
}
|
||||
|
|
@ -446,7 +446,7 @@
|
|||
}
|
||||
|
||||
.timeline-seek-btn:hover {
|
||||
background: rgba(74, 158, 255, 0.15);
|
||||
background: var(--blue-muted);
|
||||
border-color: var(--accent-color, var(--blue-9));
|
||||
}
|
||||
|
||||
|
|
@ -458,62 +458,62 @@
|
|||
/* Event Type Colors */
|
||||
.timeline-event[data-type="zone_entry"] {
|
||||
--event-color: var(--ok);
|
||||
--event-color-bg: rgba(46, 213, 115, 0.15);
|
||||
--event-color-bg: var(--ok-bg);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="zone_exit"] {
|
||||
--event-color: var(--alert);
|
||||
--event-color-bg: rgba(255, 107, 107, 0.15);
|
||||
--event-color-bg: var(--alert-bg);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="ZoneTransition"] {
|
||||
--event-color: var(--warn);
|
||||
--event-color-bg: rgba(255, 167, 38, 0.15);
|
||||
--event-color-bg: var(--warn-bg);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="portal_crossing"] {
|
||||
--event-color: var(--blue-9);
|
||||
--event-color-bg: rgba(74, 158, 255, 0.15);
|
||||
--event-color-bg: var(--blue-muted);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="anomaly"] {
|
||||
--event-color: var(--alert);
|
||||
--event-color-bg: rgba(255, 71, 87, 0.15);
|
||||
--event-color-bg: var(--alert-bg);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="AnomalyDetected"] {
|
||||
--event-color: var(--alert);
|
||||
--event-color-bg: rgba(255, 71, 87, 0.15);
|
||||
--event-color-bg: var(--alert-bg);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="anomaly_detected"] {
|
||||
--event-color: var(--alert);
|
||||
--event-color-bg: rgba(255, 71, 87, 0.15);
|
||||
--event-color-bg: var(--alert-bg);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="FallDetected"] {
|
||||
--event-color: var(--alert);
|
||||
--event-color-bg: rgba(244, 67, 54, 0.15);
|
||||
--event-color-bg: var(--alert-bg);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="security_alert"] {
|
||||
--event-color: var(--warn);
|
||||
--event-color-bg: rgba(255, 165, 2, 0.15);
|
||||
--event-color-bg: var(--warn-bg);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="learning_milestone"] {
|
||||
--event-color: var(--blue-10);
|
||||
--event-color-bg: rgba(165, 94, 234, 0.15);
|
||||
--event-color-bg: var(--blue-muted);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="system_event"] {
|
||||
--event-color: var(--slate-9);
|
||||
--event-color-bg: rgba(116, 125, 140, 0.15);
|
||||
--event-color-bg: var(--bg-active);
|
||||
}
|
||||
|
||||
.timeline-event[data-type="sleep_session_end"] {
|
||||
--event-color: var(--blue-10);
|
||||
--event-color-bg: rgba(79, 195, 247, 0.15);
|
||||
--event-color-bg: var(--blue-muted);
|
||||
}
|
||||
|
||||
/* Loading States */
|
||||
|
|
@ -523,7 +523,7 @@
|
|||
justify-content: center;
|
||||
padding: 24px;
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -561,7 +561,7 @@
|
|||
}
|
||||
|
||||
.timeline-empty h3 {
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--text-secondary, var(--text-secondary));
|
||||
}
|
||||
|
|
@ -584,7 +584,7 @@
|
|||
.timeline-load-more-btn {
|
||||
background: var(--bg-secondary, var(--bg-card));
|
||||
border: 1px solid var(--border-color, var(--bg-hover));
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
padding: 8px 16px;
|
||||
color: var(--text-secondary, var(--text-secondary));
|
||||
font-size: 13px;
|
||||
|
|
@ -610,7 +610,7 @@
|
|||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--radius-card);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -635,10 +635,10 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-success, var(--ok));
|
||||
padding: 4px 8px;
|
||||
background: rgba(46, 213, 115, 0.1);
|
||||
background: var(--ok-bg);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -675,7 +675,7 @@
|
|||
.timeline-event.secondary .timeline-event-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.timeline-event.secondary .timeline-event-title {
|
||||
|
|
@ -745,7 +745,7 @@
|
|||
border-radius: 4px;
|
||||
color: var(--text-primary, var(--slate-11));
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-family: inherit;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -757,7 +757,7 @@
|
|||
|
||||
.timeline-date-separator {
|
||||
color: var(--text-muted, var(--text-muted));
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
|
|
@ -767,7 +767,7 @@
|
|||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
|
@ -795,7 +795,7 @@
|
|||
flex-direction: column;
|
||||
z-index: 60;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: -4px 0 20px var(--shadow);
|
||||
}
|
||||
|
||||
.sidebar-panel.collapsed {
|
||||
|
|
@ -819,7 +819,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, var(--slate-11));
|
||||
}
|
||||
|
|
@ -887,7 +887,7 @@
|
|||
.sidebar-timeline-event {
|
||||
background: var(--bg-primary, var(--bg-page));
|
||||
border: 1px solid var(--border-color, var(--bg-hover));
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-control);
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -911,7 +911,7 @@
|
|||
.sidebar-timeline-event:hover {
|
||||
border-color: var(--accent-color, var(--blue-9));
|
||||
transform: translateX(-2px);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 2px 6px var(--shadow);
|
||||
}
|
||||
|
||||
.sidebar-timeline-event.severity-critical {
|
||||
|
|
@ -948,13 +948,13 @@
|
|||
/* Event Icon */
|
||||
.sidebar-timeline-event-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
font-size: var(--text-base);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
background: var(--blue-muted);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -1012,7 +1012,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
|
@ -1023,12 +1023,12 @@
|
|||
}
|
||||
|
||||
.sidebar-timeline-action-btn.feedback-positive:hover {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
background: var(--ok-muted);
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.sidebar-timeline-action-btn.feedback-negative:hover {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
background: var(--alert-muted);
|
||||
color: var(--alert);
|
||||
}
|
||||
|
||||
|
|
@ -1084,13 +1084,13 @@
|
|||
}
|
||||
|
||||
.sidebar-timeline-empty h3 {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary, var(--text-secondary));
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.sidebar-timeline-empty p {
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,10 +45,13 @@
|
|||
--color-primary-hover: var(--blue-10);
|
||||
|
||||
/* ── State with opacity (for badges, backgrounds) ── */
|
||||
--ok-bg: rgba(70, 167, 88, 0.15);
|
||||
--ok-muted: rgba(70, 167, 88, 0.2);
|
||||
--ok-border: rgba(70, 167, 88, 0.3);
|
||||
--warn-bg: rgba(229, 160, 13, 0.15);
|
||||
--warn-muted: rgba(229, 160, 13, 0.2);
|
||||
--warn-border: rgba(229, 160, 13, 0.3);
|
||||
--alert-bg: rgba(229, 72, 77, 0.15);
|
||||
--alert-muted: rgba(229, 72, 77, 0.2);
|
||||
--alert-border: rgba(229, 72, 77, 0.3);
|
||||
--blue-muted: rgba(62, 150, 232, 0.15);
|
||||
|
|
@ -105,7 +108,43 @@
|
|||
--radius-card: 10px;
|
||||
--radius-modal: 16px;
|
||||
|
||||
/* ── Shadows (flat elevation, no drop shadows per §8e) ── */
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* ── Overlays ── */
|
||||
--overlay: rgba(0, 0, 0, 0.5);
|
||||
--overlay-strong: rgba(0, 0, 0, 0.7);
|
||||
|
||||
/* ── Transitions ── */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-base: 200ms ease;
|
||||
|
||||
/* ── Section tints (briefing, guided-help) ── */
|
||||
--section-sleep-bg: rgba(70, 167, 88, 0.1);
|
||||
--section-people-bg: rgba(62, 150, 232, 0.1);
|
||||
--section-anomaly-bg: rgba(229, 160, 13, 0.1);
|
||||
--section-health-bg: rgba(155, 157, 170, 0.1);
|
||||
--section-predict-bg: rgba(62, 150, 232, 0.1);
|
||||
--section-learn-bg: rgba(229, 160, 13, 0.1);
|
||||
--section-portal-bg: rgba(62, 150, 232, 0.15);
|
||||
--section-privacy-bg: rgba(62, 150, 232, 0.1);
|
||||
--section-privacy-border: rgba(62, 150, 232, 0.2);
|
||||
|
||||
/* ── Spinner track ── */
|
||||
--spinner-track: rgba(62, 150, 232, 0.2);
|
||||
|
||||
/* ── Subtle highlight (replaces rgba(255,255,255,0.07)) ── */
|
||||
--highlight-subtle: rgba(255, 255, 255, 0.07);
|
||||
|
||||
/* ── Dark overlay panels (replaces rgba(0,0,0,0.9)) ── */
|
||||
--overlay-panel: rgba(0, 0, 0, 0.9);
|
||||
|
||||
/* ── Card frosted bg (replaces rgba(30,32,36,0.95)) ── */
|
||||
--bg-frosted: rgba(30, 32, 36, 0.95);
|
||||
--bg-frosted-strong: rgba(30, 32, 36, 0.98);
|
||||
|
||||
/* ── Selected row highlight ── */
|
||||
--row-selected: rgba(62, 150, 232, 0.18);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@
|
|||
/* Troubleshoot section inside node panel */
|
||||
#troubleshoot-section {
|
||||
margin-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid var(--bg-hover);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
/* Offline troubleshooting card */
|
||||
.troubleshoot-card {
|
||||
background: rgba(255, 167, 38, 0.08);
|
||||
border: 1px solid rgba(255, 167, 38, 0.25);
|
||||
border-radius: 6px;
|
||||
background: var(--warn-bg);
|
||||
border: 1px solid var(--warn-border);
|
||||
border-radius: var(--radius-control);
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-xs);
|
||||
animation: troubleshoot-fade-in 0.3s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -30,20 +30,20 @@
|
|||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
color: #ffa726;
|
||||
color: var(--warn);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.troubleshoot-card-icon {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.troubleshoot-dismiss {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-base);
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
.troubleshoot-dismiss:hover {
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
/* Timeline steps */
|
||||
|
|
@ -72,8 +72,8 @@
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 167, 38, 0.2);
|
||||
color: #ffa726;
|
||||
background: var(--warn-muted);
|
||||
color: var(--warn);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
|
|
@ -84,12 +84,12 @@
|
|||
}
|
||||
|
||||
.troubleshoot-step-text {
|
||||
color: #bbb;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.troubleshoot-step-text strong {
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
/* More options expander */
|
||||
|
|
@ -98,14 +98,14 @@
|
|||
}
|
||||
|
||||
.troubleshoot-more summary {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.troubleshoot-more summary:hover {
|
||||
color: #bbb;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.troubleshoot-more[open] .troubleshoot-step {
|
||||
|
|
@ -114,9 +114,9 @@
|
|||
|
||||
/* Reset button inside card */
|
||||
.troubleshoot-reset-btn {
|
||||
background: rgba(244, 67, 54, 0.15);
|
||||
border: 1px solid rgba(244, 67, 54, 0.3);
|
||||
color: #ef5350;
|
||||
background: var(--alert-bg);
|
||||
border: 1px solid var(--alert-border);
|
||||
color: var(--alert);
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
}
|
||||
|
||||
.troubleshoot-reset-btn:hover {
|
||||
background: rgba(244, 67, 54, 0.25);
|
||||
background: var(--alert-border);
|
||||
}
|
||||
|
||||
/* Quality banner (fixed at top, below status bar) */
|
||||
|
|
@ -133,15 +133,15 @@
|
|||
top: 44px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255, 167, 38, 0.15);
|
||||
border: 1px solid rgba(255, 167, 38, 0.3);
|
||||
border-radius: 6px;
|
||||
background: var(--warn-bg);
|
||||
border: 1px solid var(--warn-border);
|
||||
border-radius: var(--radius-control);
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #ffa726;
|
||||
color: var(--warn);
|
||||
z-index: 150;
|
||||
max-width: 600px;
|
||||
animation: troubleshoot-slide-down 0.3s ease-out;
|
||||
|
|
@ -154,16 +154,16 @@
|
|||
}
|
||||
|
||||
.troubleshoot-quality-icon {
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.troubleshoot-quality-banner .troubleshoot-dismiss {
|
||||
color: #ffa726;
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.troubleshoot-quality-banner .troubleshoot-dismiss:hover {
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
/* Factory reset modal */
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: var(--overlay-strong);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -181,22 +181,22 @@
|
|||
}
|
||||
|
||||
.troubleshoot-modal {
|
||||
background: #1e1e3a;
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
padding: 24px 28px;
|
||||
max-width: 480px;
|
||||
width: 90%;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 8px 32px var(--shadow-xl);
|
||||
}
|
||||
|
||||
.troubleshoot-modal h3 {
|
||||
font-size: 16px;
|
||||
color: #eee;
|
||||
font-size: var(--text-base);
|
||||
color: var(--slate-12);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.troubleshoot-list {
|
||||
color: #bbb;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
padding-left: 20px;
|
||||
|
|
@ -218,12 +218,12 @@
|
|||
.spaxel-tooltip {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
background: rgba(30, 30, 58, 0.95);
|
||||
border: 1px solid rgba(79, 195, 247, 0.4);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--blue-border);
|
||||
border-radius: var(--radius-control);
|
||||
padding: 8px 12px;
|
||||
max-width: 260px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 4px 16px var(--shadow-lg);
|
||||
animation: spaxel-tooltip-appear 0.3s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -234,7 +234,7 @@
|
|||
}
|
||||
|
||||
.spaxel-tooltip-text {
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
|
@ -252,7 +252,7 @@
|
|||
transform: translateX(-50%);
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid rgba(79, 195, 247, 0.4);
|
||||
border-top: 6px solid var(--blue-border);
|
||||
}
|
||||
|
||||
.spaxel-tooltip-arrow-bottom {
|
||||
|
|
@ -261,7 +261,7 @@
|
|||
transform: translateX(-50%);
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid rgba(79, 195, 247, 0.4);
|
||||
border-bottom: 6px solid var(--blue-border);
|
||||
}
|
||||
|
||||
.spaxel-tooltip-arrow-left {
|
||||
|
|
@ -270,7 +270,7 @@
|
|||
transform: translateY(-50%);
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 6px solid rgba(79, 195, 247, 0.4);
|
||||
border-left: 6px solid var(--blue-border);
|
||||
}
|
||||
|
||||
.spaxel-tooltip-arrow-right {
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
transform: translateY(-50%);
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 6px solid rgba(79, 195, 247, 0.4);
|
||||
border-right: 6px solid var(--blue-border);
|
||||
}
|
||||
|
||||
/* Dismiss all button */
|
||||
|
|
@ -288,10 +288,10 @@
|
|||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border-strong);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
padding: 6px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -300,8 +300,8 @@
|
|||
}
|
||||
|
||||
.spaxel-dismiss-all:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #eee;
|
||||
background: var(--border-strong);
|
||||
color: var(--slate-12);
|
||||
}
|
||||
|
||||
/* Safe area support for dismiss button */
|
||||
|
|
@ -327,19 +327,19 @@
|
|||
|
||||
.post-cal-card h3 {
|
||||
font-size: 18px;
|
||||
color: #eee;
|
||||
color: var(--slate-12);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.post-cal-summary {
|
||||
color: #66bb6a !important;
|
||||
font-size: 14px;
|
||||
color: var(--ok) !important;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.post-cal-expect {
|
||||
color: #bbb;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
|
|
|
|||
|
|
@ -4,28 +4,32 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title>Spaxel Fleet Status</title>
|
||||
<link rel="stylesheet" href="css/tokens.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/fleet-page.css">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="theme-color" content="#1a1a2e">
|
||||
<meta name="theme-color" content="#18191b">
|
||||
</head>
|
||||
<body class="fleet-page">
|
||||
<!-- Navigation -->
|
||||
<nav class="fleet-nav">
|
||||
<body class="fleet-page has-mobile-nav">
|
||||
<div class="app-shell app-shell--full">
|
||||
|
||||
<!-- Navigation (grid header) -->
|
||||
<nav class="app-header fleet-nav">
|
||||
<div class="nav-content">
|
||||
<a href="/" class="nav-logo" title="Back to 3D View">
|
||||
<a href="/" class="nav-logo" title="Spaxel Home">
|
||||
<span class="logo-icon">⛶</span>
|
||||
<span class="logo-text">Spaxel</span>
|
||||
</a>
|
||||
<div class="nav-title">Fleet Status</div>
|
||||
<div class="nav-actions">
|
||||
<a href="/" class="nav-btn" title="Back to 3D View">
|
||||
<a href="/live" class="nav-btn" title="Live 3D View">
|
||||
<span class="icon">⛶</span>
|
||||
<span class="label">3D View</span>
|
||||
<span class="label">Live</span>
|
||||
</a>
|
||||
<a href="/simple" class="nav-btn" title="Simple Mode">
|
||||
<span class="icon">☰</span>
|
||||
<span class="label">Simple</span>
|
||||
<a href="/" class="nav-btn" title="Home">
|
||||
<span class="icon">🏠</span>
|
||||
<span class="label">Home</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -102,7 +106,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Fleet Table -->
|
||||
<main class="fleet-main">
|
||||
<main class="app-main fleet-main">
|
||||
<div class="table-container">
|
||||
<table class="fleet-table" id="fleet-table">
|
||||
<thead>
|
||||
|
|
@ -252,6 +256,34 @@
|
|||
<!-- Toast Notifications -->
|
||||
<div class="toast-container" id="toast-container"></div>
|
||||
|
||||
</div><!-- /.app-shell -->
|
||||
|
||||
<!-- Mobile bottom nav -->
|
||||
<nav class="app-mobile-nav" aria-label="Main navigation">
|
||||
<ul class="app-mobile-nav__list">
|
||||
<li class="app-mobile-nav__item">
|
||||
<a href="/" class="app-mobile-nav__link">
|
||||
<span>🏠</span> Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="app-mobile-nav__item">
|
||||
<a href="/live" class="app-mobile-nav__link">
|
||||
<span>⛶</span> Live
|
||||
</a>
|
||||
</li>
|
||||
<li class="app-mobile-nav__item">
|
||||
<a href="/fleet" class="app-mobile-nav__link app-mobile-nav__link--active">
|
||||
<span>📡</span> Fleet
|
||||
</a>
|
||||
</li>
|
||||
<li class="app-mobile-nav__item">
|
||||
<a href="/setup" class="app-mobile-nav__link">
|
||||
<span>⚙</span> Setup
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Fleet Page JavaScript -->
|
||||
<script src="js/fleet-page.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,135 +4,123 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Integrations - Spaxel Dashboard</title>
|
||||
<link rel="stylesheet" href="css/panels.css">
|
||||
<link rel="stylesheet" href="css/integrations.css">
|
||||
<link rel="stylesheet" href="css/tokens.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<meta name="theme-color" content="#18191b">
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #1a1a2e;
|
||||
color: #eee;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.integrations-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.integrations-header {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.integrations-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px 0;
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: var(--fw-heading);
|
||||
margin: 0 0 var(--space-2) 0;
|
||||
}
|
||||
|
||||
.integrations-header p {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.integration-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-card);
|
||||
padding: var(--space-6);
|
||||
margin-bottom: var(--space-5);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.integration-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.integration-card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--fw-heading);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.integration-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: var(--space-2);
|
||||
height: var(--space-2);
|
||||
border-radius: 50%;
|
||||
background: #666;
|
||||
background: var(--slate-7);
|
||||
}
|
||||
|
||||
.status-dot.connected {
|
||||
background: #4caf50;
|
||||
box-shadow: 0 0 8px #4caf50;
|
||||
background: var(--ok);
|
||||
box-shadow: 0 0 var(--space-2) var(--ok);
|
||||
}
|
||||
|
||||
.status-dot.disconnected {
|
||||
background: #f44336;
|
||||
background: var(--alert);
|
||||
}
|
||||
|
||||
.integration-description {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-5);
|
||||
line-height: var(--lh-body);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
color: #ccc;
|
||||
margin-bottom: var(--space-1);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="password"],
|
||||
.form-group input[type="url"] {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
color: #eee;
|
||||
font-size: 14px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-control);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-sm);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #4a90d9;
|
||||
border-color: var(--blue-9);
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: #666;
|
||||
color: var(--slate-7);
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--slate-7);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
|
|
@ -147,13 +135,13 @@
|
|||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
padding: var(--space-2) var(--space-5);
|
||||
border-radius: var(--radius-control);
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
transition: background var(--transition-base);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
|
|
@ -162,21 +150,21 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #4a90d9;
|
||||
color: white;
|
||||
background: var(--blue-9);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #357abd;
|
||||
background: var(--blue-10);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #eee;
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--bg-active);
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
|
|
@ -185,8 +173,8 @@
|
|||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.button-group .btn {
|
||||
|
|
@ -213,8 +201,8 @@
|
|||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: #4a90d9;
|
||||
border: 3px solid var(--slate-5);
|
||||
border-top-color: var(--blue-9);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
|
@ -225,12 +213,12 @@
|
|||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 6px;
|
||||
bottom: var(--space-5);
|
||||
right: var(--space-5);
|
||||
background: var(--slate-4);
|
||||
color: var(--text-primary);
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border-radius: var(--radius-control);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
display: none;
|
||||
z-index: 1001;
|
||||
|
|
@ -242,11 +230,11 @@
|
|||
}
|
||||
|
||||
.toast.success {
|
||||
background: #4caf50;
|
||||
background: var(--ok);
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background: #f44336;
|
||||
background: var(--alert);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
|
|
@ -263,11 +251,11 @@
|
|||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #4a90d9;
|
||||
gap: var(--space-2);
|
||||
color: var(--blue-9);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
|
|
@ -275,8 +263,23 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="integrations-container">
|
||||
<body class="has-mobile-nav">
|
||||
<div class="app-shell app-shell--full">
|
||||
|
||||
<!-- ── Top nav ── -->
|
||||
<nav class="app-header">
|
||||
<a href="/" class="app-header__logo">⛶ Spaxel</a>
|
||||
<div class="app-header__links">
|
||||
<a href="/" class="app-header__link">Home</a>
|
||||
<a href="/live" class="app-header__link">Live View</a>
|
||||
<a href="/fleet" class="app-header__link">Fleet</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ── Main content ── -->
|
||||
<main class="app-main">
|
||||
<div style="max-width:800px;margin:0 auto;padding:var(--space-5);">
|
||||
|
||||
<a href="index.html" class="back-link">← Back to Dashboard</a>
|
||||
|
||||
<div class="integrations-header">
|
||||
|
|
@ -379,14 +382,19 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div class="loading-overlay" id="loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<!-- ── Mobile bottom nav ── -->
|
||||
<nav class="app-mobile-nav">
|
||||
<ul class="app-mobile-nav__list">
|
||||
<li class="app-mobile-nav__item"><a href="/" class="app-mobile-nav__link">Home</a></li>
|
||||
<li class="app-mobile-nav__item"><a href="/live" class="app-mobile-nav__link">Live</a></li>
|
||||
<li class="app-mobile-nav__item"><a href="/fleet" class="app-mobile-nav__link">Fleet</a></li>
|
||||
<li class="app-mobile-nav__item"><a href="/integrations" class="app-mobile-nav__link app-mobile-nav__link--active">Integrations</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Toast Notification -->
|
||||
<div class="toast" id="toast"></div>
|
||||
</div><!-- /.app-shell -->
|
||||
|
||||
<script src="js/integrations.js"></script>
|
||||
<script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -7,6 +7,7 @@
|
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<title>Spaxel Dashboard</title>
|
||||
<link rel="stylesheet" href="css/tokens.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/troubleshoot.css">
|
||||
<link rel="stylesheet" href="css/panels.css">
|
||||
<link rel="stylesheet" href="css/timeline.css">
|
||||
|
|
|
|||
|
|
@ -4,52 +4,55 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title>Spaxel - Simple Mode</title>
|
||||
<link rel="stylesheet" href="css/tokens.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/simple.css">
|
||||
<link rel="stylesheet" href="css/notifications.css">
|
||||
<style>
|
||||
#wizard-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000}
|
||||
#wizard-card{background:#1e1e3a;border-radius:12px;padding:28px 32px 20px;max-width:560px;width:92%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.5)}
|
||||
#wizard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
|
||||
#wizard-header h1{font-size:20px;font-weight:600;color:#eee}
|
||||
.wizard-close{background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
|
||||
.wizard-close:hover{color:#eee}
|
||||
#wizard-steps{display:flex;align-items:center;justify-content:center;margin-bottom:24px;gap:0}
|
||||
.wizard-step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;background:#333;color:#666;transition:all .3s;flex-shrink:0}
|
||||
.wizard-step-dot.active{background:#4fc3f7;color:#fff;box-shadow:0 0 12px rgba(79,195,247,.5)}
|
||||
.wizard-step-dot.completed{background:#4caf50;color:#fff}
|
||||
.wizard-step-line{width:20px;height:2px;background:#333;flex-shrink:0}
|
||||
.wizard-step-line.completed{background:#4caf50}
|
||||
#wizard-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-strong);display:flex;align-items:center;justify-content:center;z-index:1000}
|
||||
#wizard-card{background:var(--bg-card);border-radius:var(--radius-modal);padding:28px 32px 20px;max-width:560px;width:92%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl)}
|
||||
#wizard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5)}
|
||||
#wizard-header h1{font-size:var(--text-lg);font-weight:var(--fw-heading);color:var(--text-primary)}
|
||||
.wizard-close{background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
|
||||
.wizard-close:hover{color:var(--text-primary)}
|
||||
#wizard-steps{display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-6);gap:0}
|
||||
.wizard-step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:var(--fw-heading);background:var(--bg-active);color:var(--slate-7);transition:all .3s;flex-shrink:0}
|
||||
.wizard-step-dot.active{background:var(--color-primary);color:var(--text-on-accent);box-shadow:0 0 12px rgba(62,150,232,.5)}
|
||||
.wizard-step-dot.completed{background:var(--ok);color:var(--text-on-accent)}
|
||||
.wizard-step-line{width:20px;height:2px;background:var(--bg-active);flex-shrink:0}
|
||||
.wizard-step-line.completed{background:var(--ok)}
|
||||
#wizard-content{min-height:180px}
|
||||
.wizard-step-content{text-align:center}
|
||||
.wizard-step-content h2{font-size:18px;margin-bottom:8px;color:#eee}
|
||||
.wizard-step-content p{color:#bbb;font-size:14px;line-height:1.5;margin-bottom:12px}
|
||||
.wizard-muted{color:#777!important;font-size:13px!important}
|
||||
.wizard-center-msg{padding:24px 0;text-align:center}
|
||||
.wizard-center-msg p{color:#888;margin-top:12px}
|
||||
.wizard-error{color:#ef5350;font-size:13px;padding:10px;background:rgba(239,83,80,.1);border-radius:4px;text-align:left;margin-top:8px}
|
||||
.wizard-success{color:#66bb6a;font-size:14px;font-weight:500}
|
||||
.wizard-icon-large{font-size:48px;margin-bottom:12px}
|
||||
.wizard-list{text-align:left;color:#bbb;font-size:13px;line-height:1.8;margin:12px 0;padding-left:20px}
|
||||
.spinner{display:inline-block;width:32px;height:32px;border:3px solid rgba(79,195,247,.2);border-top-color:#4fc3f7;border-radius:50%;animation:wizard-spin .8s linear infinite}
|
||||
.wizard-step-content h2{font-size:18px;margin-bottom:var(--space-2);color:var(--text-primary)}
|
||||
.wizard-step-content p{color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--lh-body);margin-bottom:var(--space-3)}
|
||||
.wizard-muted{color:var(--text-muted)!important;font-size:13px!important}
|
||||
.wizard-center-msg{padding:var(--space-6) 0;text-align:center}
|
||||
.wizard-center-msg p{color:var(--text-muted);margin-top:var(--space-3)}
|
||||
.wizard-error{color:var(--alert);font-size:13px;padding:10px;background:var(--alert-bg);border-radius:var(--radius-control);text-align:left;margin-top:var(--space-2)}
|
||||
.wizard-success{color:var(--ok);font-size:var(--text-sm);font-weight:500}
|
||||
.wizard-icon-large{font-size:48px;margin-bottom:var(--space-3)}
|
||||
.wizard-list{text-align:left;color:var(--text-secondary);font-size:13px;line-height:1.8;margin:var(--space-3) 0;padding-left:20px}
|
||||
.spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--blue-border);border-top-color:var(--color-primary);border-radius:50%;animation:wizard-spin .8s linear infinite}
|
||||
@keyframes wizard-spin{to{transform:rotate(360deg)}}
|
||||
.wizard-progress{margin:16px 0}
|
||||
.progress-bar{width:100%;height:8px;background:#333;border-radius:4px;overflow:hidden}
|
||||
.progress-fill{height:100%;background:linear-gradient(90deg,#4fc3f7,#29b6f6);border-radius:4px;transition:width .3s;width:0%}
|
||||
.wizard-progress p{font-size:12px;color:#888;margin-top:6px;text-align:center}
|
||||
.wizard-btn{padding:10px 24px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:background .2s,opacity .2s}
|
||||
.wizard-progress{margin:var(--space-4) 0}
|
||||
.progress-bar{width:100%;height:8px;background:var(--bg-active);border-radius:4px;overflow:hidden}
|
||||
.progress-fill{height:100%;background:linear-gradient(90deg,var(--blue-9),var(--blue-10));border-radius:4px;transition:width .3s;width:0%}
|
||||
.wizard-progress p{font-size:var(--text-xs);color:var(--text-muted);margin-top:6px;text-align:center}
|
||||
.wizard-btn{padding:10px 24px;border-radius:var(--radius-control);font-size:var(--text-sm);font-weight:500;cursor:pointer;border:none;transition:background .2s,opacity .2s}
|
||||
.wizard-btn:disabled{opacity:.5;cursor:not-allowed}
|
||||
.wizard-btn-primary{background:#4fc3f7;color:#1a1a2e}
|
||||
.wizard-btn-primary:hover:not(:disabled){background:#29b6f6}
|
||||
.wizard-btn-secondary{background:rgba(255,255,255,.1);color:#ccc;border:1px solid rgba(255,255,255,.2)}
|
||||
.wizard-btn-secondary:hover:not(:disabled){background:rgba(255,255,255,.15)}
|
||||
#wizard-nav{display:flex;justify-content:space-between;margin-top:20px;gap:12px}
|
||||
.wizard-btn-primary{background:var(--color-primary);color:var(--slate-1)}
|
||||
.wizard-btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}
|
||||
.wizard-btn-secondary{background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border-strong)}
|
||||
.wizard-btn-secondary:hover:not(:disabled){background:var(--bg-active)}
|
||||
#wizard-nav{display:flex;justify-content:space-between;margin-top:var(--space-5);gap:var(--space-3)}
|
||||
</style>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="theme-color" content="#f5f5f7">
|
||||
</head>
|
||||
<body class="simple-mode">
|
||||
<!-- Simple Mode Header -->
|
||||
<body class="simple-mode has-mobile-nav">
|
||||
<div class="app-shell app-shell--full">
|
||||
<!-- Header (grid header area) -->
|
||||
<header id="simple-mode-header" class="simple-mode-header">
|
||||
<h1>🏠 Spaxel</h1>
|
||||
<div class="mode-toggle">
|
||||
|
|
@ -58,40 +61,40 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Simple Mode Content -->
|
||||
<main id="simple-mode-content" class="simple-mode-content">
|
||||
<!-- Main content (grid main area) -->
|
||||
<main id="simple-mode-content" class="simple-mode-content app-main">
|
||||
<!-- Loading State -->
|
||||
<div class="simple-loading">
|
||||
<div class="simple-loading-spinner"></div>
|
||||
<div class="simple-loading-text">Loading your home...</div>
|
||||
</div>
|
||||
</main>
|
||||
</div><!-- /.app-shell -->
|
||||
|
||||
<!-- Quick Actions Bottom Navigation -->
|
||||
<nav id="simple-quick-actions" class="simple-quick-actions">
|
||||
<div class="actions-container">
|
||||
<button class="quick-action-btn active" data-action="home" data-tab="home">
|
||||
<span class="action-icon">🏠</span>
|
||||
<span class="action-label">Home</span>
|
||||
</button>
|
||||
<button class="quick-action-btn" data-action="activity" data-tab="activity">
|
||||
<span class="action-icon">⏰</span>
|
||||
<span class="action-label">Activity</span>
|
||||
</button>
|
||||
<button class="quick-action-btn" data-action="alerts" data-tab="alerts">
|
||||
<span class="action-icon">🔔</span>
|
||||
<span class="action-label">Alerts</span>
|
||||
<span class="action-badge hidden" id="alert-badge">0</span>
|
||||
</button>
|
||||
<button class="quick-action-btn" data-action="add-node" onclick="window.SpaxelOnboard && window.SpaxelOnboard.start()">
|
||||
<span class="action-icon">➕</span>
|
||||
<span class="action-label">Add Node</span>
|
||||
</button>
|
||||
<button class="quick-action-btn" data-action="settings" data-tab="settings">
|
||||
<span class="action-icon">⚙</span>
|
||||
<span class="action-label">Settings</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Mobile bottom nav (outside grid, fixed at bottom) -->
|
||||
<nav class="app-mobile-nav" aria-label="Main navigation">
|
||||
<ul class="app-mobile-nav__list">
|
||||
<li class="app-mobile-nav__item">
|
||||
<a href="/" class="app-mobile-nav__link">
|
||||
<span>🏠</span> Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="app-mobile-nav__item">
|
||||
<a href="/live" class="app-mobile-nav__link">
|
||||
<span>⛶</span> Live
|
||||
</a>
|
||||
</li>
|
||||
<li class="app-mobile-nav__item">
|
||||
<a href="/fleet" class="app-mobile-nav__link">
|
||||
<span>📡</span> Fleet
|
||||
</a>
|
||||
</li>
|
||||
<li class="app-mobile-nav__item">
|
||||
<a href="/setup" class="app-mobile-nav__link">
|
||||
<span>⚙</span> Setup
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Room Detail Modal -->
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue