diff --git a/dashboard/ambient.html b/dashboard/ambient.html index 392ef6b..397269b 100644 --- a/dashboard/ambient.html +++ b/dashboard/ambient.html @@ -4,14 +4,17 @@ Spaxel Ambient Display + + - -
+
+ +
@@ -56,7 +59,8 @@
🔒
All secure
-
+ +
diff --git a/dashboard/css/ambient.css b/dashboard/css/ambient.css index 86b6368..42f5d70 100644 --- a/dashboard/css/ambient.css +++ b/dashboard/css/ambient.css @@ -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 ===== */ diff --git a/dashboard/css/anomaly.css b/dashboard/css/anomaly.css index 258c400..13e7927 100644 --- a/dashboard/css/anomaly.css +++ b/dashboard/css/anomaly.css @@ -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; -} diff --git a/dashboard/css/apdetection.css b/dashboard/css/apdetection.css index bfdb287..461865f 100644 --- a/dashboard/css/apdetection.css +++ b/dashboard/css/apdetection.css @@ -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; } diff --git a/dashboard/css/ble-panel.css b/dashboard/css/ble-panel.css index 8b76314..28ac833 100644 --- a/dashboard/css/ble-panel.css +++ b/dashboard/css/ble-panel.css @@ -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 { diff --git a/dashboard/css/briefing.css b/dashboard/css/briefing.css index 43d71db..80ff4ed 100644 --- a/dashboard/css/briefing.css +++ b/dashboard/css/briefing.css @@ -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; } diff --git a/dashboard/css/command-palette.css b/dashboard/css/command-palette.css index ebdf5fa..42b2be3 100644 --- a/dashboard/css/command-palette.css +++ b/dashboard/css/command-palette.css @@ -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; } } diff --git a/dashboard/css/expert.css b/dashboard/css/expert.css index 3f538df..ec0287d 100644 --- a/dashboard/css/expert.css +++ b/dashboard/css/expert.css @@ -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 */ diff --git a/dashboard/css/explainability.css b/dashboard/css/explainability.css index 15a0c1f..39448ee 100644 --- a/dashboard/css/explainability.css +++ b/dashboard/css/explainability.css @@ -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); } diff --git a/dashboard/css/fleet-page.css b/dashboard/css/fleet-page.css index 3624e04..f0279de 100644 --- a/dashboard/css/fleet-page.css +++ b/dashboard/css/fleet-page.css @@ -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 { diff --git a/dashboard/css/floorplan.css b/dashboard/css/floorplan.css index 06492d9..e65ea8f 100644 --- a/dashboard/css/floorplan.css +++ b/dashboard/css/floorplan.css @@ -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 */ diff --git a/dashboard/css/guided-help.css b/dashboard/css/guided-help.css index 9c2e889..9da1451 100644 --- a/dashboard/css/guided-help.css +++ b/dashboard/css/guided-help.css @@ -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; } diff --git a/dashboard/css/home.css b/dashboard/css/home.css index 6a68edf..717f264 100644 --- a/dashboard/css/home.css +++ b/dashboard/css/home.css @@ -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); } diff --git a/dashboard/css/layout.css b/dashboard/css/layout.css index 22c46d1..3d5075d 100644 --- a/dashboard/css/layout.css +++ b/dashboard/css/layout.css @@ -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); } diff --git a/dashboard/css/notifications.css b/dashboard/css/notifications.css index 23f1bcc..ea85f6b 100644 --- a/dashboard/css/notifications.css +++ b/dashboard/css/notifications.css @@ -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; diff --git a/dashboard/css/panels.css b/dashboard/css/panels.css index a4dc917..76f64fd 100644 --- a/dashboard/css/panels.css +++ b/dashboard/css/panels.css @@ -9,7 +9,7 @@ left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0); + background: transparent; z-index: 1000; transition: background 0.3s ease; pointer-events: none; @@ -17,7 +17,7 @@ } .panel-overlay-visible { - background: rgba(0, 0, 0, 0.5); + background: var(--shadow-xl); pointer-events: auto; } @@ -27,8 +27,8 @@ top: 0; bottom: 0; width: 360px; - background: #1e1e3a; - box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3); + background: var(--bg-card); + box-shadow: -4px 0 16px var(--shadow); z-index: 1001; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; @@ -58,14 +58,14 @@ align-items: center; justify-content: space-between; padding: 16px 20px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--border-default); } .panel-title { margin: 0; font-size: 18px; font-weight: 600; - color: #eee; + color: var(--slate-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -74,7 +74,7 @@ .panel-close { background: none; border: none; - color: #888; + color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; @@ -91,12 +91,12 @@ } .panel-close:hover { - background: rgba(255, 255, 255, 0.1); - color: #eee; + background: var(--bg-hover); + color: var(--slate-12); } .panel-close:active { - background: rgba(255, 255, 255, 0.15); + background: var(--bg-active); } /* Panel Content */ @@ -115,16 +115,16 @@ } .panel-content::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.05); + background: var(--bg-input); } .panel-content::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); + background: var(--border-strong); border-radius: 4px; } .panel-content::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.3); + background: var(--border-strong); } /* ----- Modal Dialog ----- */ @@ -134,7 +134,7 @@ left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0); + background: transparent; z-index: 2000; display: flex; align-items: center; @@ -144,14 +144,14 @@ } .modal-backdrop-visible { - background: rgba(0, 0, 0, 0.7); + background: var(--overlay-strong); pointer-events: auto; } .modal-container { - 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: 600px; max-width: 90vw; max-height: 90vh; @@ -174,20 +174,20 @@ align-items: center; justify-content: space-between; padding: 20px 24px 16px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--border-default); } .modal-title { margin: 0; - font-size: 20px; + font-size: var(--text-lg); font-weight: 600; - color: #eee; + color: var(--slate-12); } .modal-close { background: none; border: none; - color: #888; + color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; @@ -204,8 +204,8 @@ } .modal-close:hover { - background: rgba(255, 255, 255, 0.1); - color: #eee; + background: var(--border-default); + color: var(--slate-12); } /* Modal Content */ @@ -224,13 +224,13 @@ justify-content: flex-end; gap: 12px; padding: 16px 24px 20px; - border-top: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid var(--border-default); } .modal-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; @@ -242,22 +242,22 @@ } .modal-btn-cancel { - background: rgba(255, 255, 255, 0.1); - color: #ccc; + background: var(--border-default); + color: var(--slate-11); } .modal-btn-cancel:hover { - background: rgba(255, 255, 255, 0.15); - color: #eee; + background: var(--border-strong); + color: var(--slate-12); } .modal-btn-confirm { - background: #4fc3f7; - color: #1a1a2e; + background: var(--blue-10); + color: var(--bg-card); } .modal-btn-confirm:hover { - background: #29b6f6; + background: var(--blue-10); } /* ----- Toast Notifications ----- */ @@ -282,13 +282,13 @@ } .toast { - background: #2a2a4a; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 8px; + background: var(--bg-hover); + border: 1px solid var(--border-strong); + border-radius: var(--radius-card); padding: 12px 16px; min-width: 280px; max-width: 400px; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); + box-shadow: 0 4px 16px var(--shadow-lg); display: flex; align-items: center; gap: 12px; @@ -309,7 +309,7 @@ } .toast-icon { - font-size: 18px; + font-size: var(--text-lg); flex-shrink: 0; width: 24px; text-align: center; @@ -317,16 +317,16 @@ .toast-message { flex: 1; - font-size: 14px; - color: #eee; + font-size: var(--text-sm); + color: var(--slate-12); line-height: 1.4; } .toast-dismiss { background: none; border: none; - color: #888; - font-size: 18px; + color: var(--text-muted); + font-size: var(--text-lg); line-height: 1; cursor: pointer; padding: 0 4px; @@ -341,45 +341,45 @@ } .toast-dismiss:hover { - background: rgba(255, 255, 255, 0.1); - color: #eee; + background: var(--border-default); + color: var(--slate-12); } /* Toast Type Variants */ .toast-success { - border-color: rgba(102, 187, 106, 0.4); - background: linear-gradient(135deg, rgba(102, 187, 106, 0.2), rgba(76, 175, 80, 0.1)); + border-color: var(--ok-border); + background: linear-gradient(135deg, var(--ok-muted), var(--ok-bg)); } .toast-success .toast-icon { - color: #66bb6a; + color: var(--ok); } .toast-info { - border-color: rgba(79, 195, 247, 0.4); - background: linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(66, 165, 245, 0.1)); + border-color: var(--blue-border); + background: linear-gradient(135deg, var(--blue-muted), rgba(66, 165, 245, 0.1)); } .toast-info .toast-icon { - color: #4fc3f7; + color: var(--blue-10); } .toast-warning { - border-color: rgba(255, 167, 38, 0.4); - background: linear-gradient(135deg, rgba(255, 167, 38, 0.2), rgba(255, 152, 0, 0.1)); + border-color: var(--warn-border); + background: linear-gradient(135deg, var(--warn-muted), rgba(255, 152, 0, 0.1)); } .toast-warning .toast-icon { - color: #ffa726; + color: var(--warn); } .toast-error { - border-color: rgba(239, 83, 80, 0.4); - background: linear-gradient(135deg, rgba(239, 83, 80, 0.2), rgba(244, 67, 54, 0.1)); + border-color: var(--alert-border); + background: linear-gradient(135deg, var(--alert-muted), rgba(244, 67, 54, 0.1)); } .toast-error .toast-icon { - color: #ef5350; + color: var(--alert); } /* ----- Mode Toggle Bar ----- */ @@ -390,7 +390,7 @@ right: 0; height: 44px; background: rgba(0, 0, 0, 0.9); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; @@ -402,24 +402,24 @@ .mode-toggle-btn { background: transparent; border: none; - color: #888; - font-size: 13px; + color: var(--text-muted); + font-size: var(--text-xs); font-weight: 500; padding: 8px 16px; - border-radius: 6px; + border-radius: var(--radius-control); cursor: pointer; transition: background 0.2s, color 0.2s; position: relative; } .mode-toggle-btn:hover { - background: rgba(255, 255, 255, 0.08); - color: #ccc; + background: var(--bg-hover); + color: var(--slate-11); } .mode-toggle-btn.active { - background: rgba(79, 195, 247, 0.15); - color: #4fc3f7; + background: var(--blue-muted); + color: var(--blue-10); } .mode-toggle-btn.active::after { @@ -429,7 +429,7 @@ left: 16px; right: 16px; height: 2px; - background: #4fc3f7; + background: var(--blue-10); border-radius: 1px 1px 0 0; } @@ -443,7 +443,7 @@ .panel-form-group label { display: block; font-size: 13px; - color: #aaa; + color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; } @@ -457,11 +457,11 @@ .panel-form-group textarea { width: 100%; padding: 10px 12px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 6px; - color: #eee; - font-size: 14px; + background: var(--border-subtle); + border: 1px solid var(--border-strong); + border-radius: var(--radius-control); + color: var(--slate-12); + font-size: var(--text-sm); font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; @@ -471,13 +471,13 @@ .panel-form-group select:focus, .panel-form-group textarea:focus { outline: none; - border-color: #4fc3f7; - box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15); + border-color: var(--blue-10); + box-shadow: 0 0 0 3px var(--blue-muted); } .panel-form-group input::placeholder, .panel-form-group textarea::placeholder { - color: #555; + color: var(--slate-7); } .panel-form-group select { @@ -495,7 +495,7 @@ appearance: none; width: 100%; height: 6px; - background: rgba(255, 255, 255, 0.1); + background: var(--bg-hover); border-radius: 3px; outline: none; margin: 10px 0; @@ -506,7 +506,7 @@ appearance: none; width: 18px; height: 18px; - background: #4fc3f7; + background: var(--blue-10); border-radius: 50%; cursor: pointer; transition: transform 0.1s; @@ -519,7 +519,7 @@ .panel-form-group input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; - background: #4fc3f7; + background: var(--blue-10); border-radius: 50%; cursor: pointer; border: none; @@ -527,7 +527,7 @@ .panel-form-range-value { font-size: 13px; - color: #4fc3f7; + color: var(--blue-10); font-weight: 500; text-align: right; margin-top: -8px; @@ -546,7 +546,7 @@ .panel-form-checkbox input[type="checkbox"] { width: 18px; height: 18px; - accent-color: #4fc3f7; + accent-color: var(--blue-10); cursor: pointer; flex-shrink: 0; } @@ -563,20 +563,20 @@ } .panel-section-header { - font-size: 12px; + font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; - color: #888; + color: var(--text-muted); margin-bottom: 12px; padding-bottom: 6px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--bg-hover); } /* Buttons */ .panel-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; @@ -592,33 +592,33 @@ } .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: #ccc; - border: 1px solid rgba(255, 255, 255, 0.2); + background: var(--bg-hover); + color: var(--slate-11); + border: 1px solid var(--border-strong); } .panel-btn-secondary:hover { - background: rgba(255, 255, 255, 0.15); - color: #eee; + background: var(--border-strong); + color: var(--slate-12); } .panel-btn-danger { - background: rgba(244, 67, 54, 0.2); - color: #ef5350; - border: 1px solid rgba(244, 67, 54, 0.3); + background: var(--alert-muted); + color: var(--alert); + border: 1px solid var(--alert-border); } .panel-btn-danger:hover { - background: rgba(244, 67, 54, 0.3); + background: var(--alert-border); } .panel-btn-full { @@ -633,7 +633,7 @@ /* Info Cards */ .panel-info-card { - background: rgba(255, 255, 255, 0.05); + background: var(--border-subtle); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; @@ -642,26 +642,26 @@ .panel-info-card-title { font-size: 13px; font-weight: 600; - color: #eee; + color: var(--slate-12); margin-bottom: 4px; } .panel-info-card-value { - font-size: 20px; + font-size: var(--text-lg); font-weight: 600; - color: #4fc3f7; + color: var(--blue-10); } .panel-info-card-subtitle { font-size: 11px; - color: #888; + color: var(--text-muted); margin-top: 4px; } /* Divider */ .panel-divider { border: none; - border-top: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid var(--bg-hover); margin: 20px 0; } @@ -671,14 +671,14 @@ align-items: center; justify-content: center; padding: 40px; - color: #888; + color: var(--text-muted); } .panel-loading-spinner { width: 32px; height: 32px; - border: 3px solid rgba(79, 195, 247, 0.2); - border-top-color: #4fc3f7; + border: 3px solid var(--blue-muted); + border-top-color: var(--blue-10); border-radius: 50%; animation: panel-spin 0.8s linear infinite; margin-right: 12px; @@ -692,7 +692,7 @@ .panel-empty { text-align: center; padding: 40px 20px; - color: #666; + color: var(--text-muted); } .panel-empty-icon { @@ -702,7 +702,7 @@ } .panel-empty-text { - font-size: 14px; + font-size: var(--text-sm); } /* ----- Security Panel Components ----- */ @@ -721,34 +721,34 @@ } #security-status-indicator:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--border-default); } .security-status-dot { width: 8px; height: 8px; border-radius: 50%; - background: #666; + background: var(--text-muted); box-shadow: 0 0 8px currentColor; } .security-status-indicator.mode-disarmed .security-status-dot { - background: #888; + background: var(--text-muted); box-shadow: 0 0 8px rgba(136, 136, 136, 0.5); } .security-status-indicator.mode-learning .security-status-dot { - background: #ffa726; + background: var(--warn); box-shadow: 0 0 8px rgba(255, 167, 38, 0.5); } .security-status-indicator.mode-armed .security-status-dot { - background: #66bb6a; + background: var(--ok); box-shadow: 0 0 8px rgba(102, 187, 106, 0.5); } .security-status-indicator.mode-alert .security-status-dot { - background: #ef5350; + background: var(--alert); box-shadow: 0 0 8px rgba(239, 83, 80, 0.5); animation: security-pulse 1s ease-in-out infinite; } @@ -759,11 +759,11 @@ } .security-status-text { - color: #ccc; + color: var(--slate-11); } .security-status-indicator.mode-alert .security-status-text { - color: #ef5350; + color: var(--alert); } /* Security Dialog Overlay */ @@ -773,7 +773,7 @@ left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0); + background: transparent; z-index: 2000; display: flex; align-items: center; @@ -783,14 +783,14 @@ } #security-dialog-overlay.visible { - background: rgba(0, 0, 0, 0.7); + background: var(--overlay-strong); pointer-events: auto; } #security-dialog { - 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; padding: 24px; @@ -806,26 +806,26 @@ #security-dialog h2 { margin: 0 0 16px; - font-size: 20px; + font-size: var(--text-lg); font-weight: 600; - color: #eee; + color: var(--slate-12); } #security-dialog p { margin: 0 0 20px; - font-size: 14px; - color: #ccc; + font-size: var(--text-sm); + color: var(--slate-11); line-height: 1.5; } #security-dialog .learning-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; font-size: 13px; - color: #ffa726; + color: var(--warn); display: flex; align-items: center; gap: 10px; @@ -856,7 +856,7 @@ align-items: center; justify-content: space-between; gap: 20px; - box-shadow: 0 4px 20px rgba(239, 83, 80, 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); } @@ -888,7 +888,7 @@ } .alert-banner-title { - font-size: 16px; + font-size: var(--text-base); font-weight: 600; margin-bottom: 4px; } @@ -905,7 +905,7 @@ .alert-banner-btn { padding: 10px 16px; - border-radius: 6px; + border-radius: var(--radius-control); font-size: 13px; font-weight: 500; cursor: pointer; @@ -914,17 +914,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: #ef5350; + color: var(--alert); } .alert-banner-btn-view:hover { @@ -944,9 +944,9 @@ } .security-card-title { - font-size: 14px; + font-size: var(--text-sm); font-weight: 600; - color: #888; + color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } @@ -956,7 +956,7 @@ align-items: center; gap: 12px; padding: 16px; - background: rgba(255, 255, 255, 0.05); + background: var(--border-subtle); border-radius: 8px; margin-bottom: 16px; } @@ -966,21 +966,21 @@ } .security-status-badge-label { - font-size: 12px; - color: #888; + font-size: var(--text-xs); + color: var(--text-muted); margin-bottom: 4px; } .security-status-badge-value { font-size: 18px; font-weight: 600; - color: #eee; + color: var(--slate-12); } -.security-status-badge.value-disarmed { color: #888; } -.security-status-badge.value-learning { color: #ffa726; } -.security-status-badge.value-armed { color: #66bb6a; } -.security-status-badge.value-alert { color: #ef5350; } +.security-status-badge.value-disarmed { color: var(--text-muted); } +.security-status-badge.value-learning { color: var(--warn); } +.security-status-badge.value-armed { color: var(--ok); } +.security-status-badge.value-alert { color: var(--alert); } .security-status-icon { font-size: 32px; @@ -999,26 +999,26 @@ } .learning-progress-text { - font-size: 12px; - color: #888; + font-size: var(--text-xs); + color: var(--text-muted); } .learning-progress-percent { font-size: 13px; font-weight: 600; - color: #ffa726; + color: var(--warn); } .learning-progress-bar { height: 8px; - background: rgba(255, 255, 255, 0.1); + background: var(--bg-hover); border-radius: 4px; overflow: hidden; } .learning-progress-fill { height: 100%; - background: linear-gradient(90deg, #ffa726, #ff9800); + background: linear-gradient(90deg, var(--warn), var(--warn)); border-radius: 4px; transition: width 0.5s ease; width: 0%; @@ -1029,11 +1029,11 @@ align-items: center; gap: 6px; padding: 4px 10px; - background: rgba(102, 187, 106, 0.2); + background: var(--ok-muted); border-radius: 12px; font-size: 11px; font-weight: 600; - color: #66bb6a; + color: var(--ok); margin-top: 8px; } @@ -1046,7 +1046,7 @@ } .security-stat-card { - background: rgba(255, 255, 255, 0.05); + background: var(--border-subtle); border-radius: 8px; padding: 12px; text-align: center; @@ -1055,36 +1055,36 @@ .security-stat-value { font-size: 24px; font-weight: 600; - color: #4fc3f7; + color: var(--blue-10); } .security-stat-label { font-size: 11px; - color: #888; + color: var(--text-muted); margin-top: 4px; text-transform: uppercase; } .security-last-event { - background: rgba(255, 255, 255, 0.05); + background: var(--border-subtle); border-radius: 8px; padding: 12px; } .security-last-event-label { font-size: 11px; - color: #888; + color: var(--text-muted); margin-bottom: 4px; } .security-last-event-value { font-size: 13px; - color: #ccc; + color: var(--slate-11); } .security-last-event-time { font-size: 11px; - color: #888; + color: var(--text-muted); margin-top: 4px; } @@ -1105,23 +1105,23 @@ } .security-arm-btn.disarmed { - background: rgba(102, 187, 106, 0.2); - color: #66bb6a; - border: 1px solid rgba(102, 187, 106, 0.3); + background: var(--ok-muted); + color: var(--ok); + border: 1px solid var(--ok-border); } .security-arm-btn.disarmed:hover { - background: rgba(102, 187, 106, 0.3); + background: var(--ok-border); } .security-arm-btn.armed { - background: rgba(244, 67, 54, 0.2); - color: #ef5350; - border: 1px solid rgba(244, 67, 54, 0.3); + background: var(--alert-muted); + color: var(--alert); + border: 1px solid var(--alert-border); } .security-arm-btn.armed:hover { - background: rgba(244, 67, 54, 0.3); + background: var(--alert-border); } .security-arm-btn:disabled { @@ -1139,23 +1139,23 @@ .anomaly-timeline-filter { flex: 1; padding: 8px 12px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 6px; - color: #ccc; + background: var(--border-subtle); + border: 1px solid var(--border-strong); + border-radius: var(--radius-control); + color: var(--slate-11); font-size: 13px; cursor: pointer; transition: all 0.2s; } .anomaly-timeline-filter:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--border-default); } .anomaly-timeline-filter.active { - background: rgba(79, 195, 247, 0.2); - border-color: rgba(79, 195, 247, 0.4); - color: #4fc3f7; + background: var(--blue-muted); + border-color: var(--blue-border); + color: var(--blue-10); } .anomaly-timeline-list { @@ -1165,7 +1165,7 @@ } .anomaly-timeline-item { - background: rgba(255, 255, 255, 0.05); + background: var(--border-subtle); border-radius: 8px; padding: 12px; border-left: 3px solid transparent; @@ -1174,13 +1174,13 @@ } .anomaly-timeline-item:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--border-default); } -.anomaly-timeline-item.type-unusual_hour { border-left-color: #ffa726; } -.anomaly-timeline-item.type-unknown_ble { border-left-color: #ab47bc; } -.anomaly-timeline-item.type-motion_during_away { border-left-color: #ef5350; } -.anomaly-timeline-item.type-unusual_dwell { border-left-color: #29b6f6; } +.anomaly-timeline-item.type-unusual_hour { border-left-color: var(--warn); } +.anomaly-timeline-item.type-unknown_ble { border-left-color: var(--blue-9); } +.anomaly-timeline-item.type-motion_during_away { border-left-color: var(--alert); } +.anomaly-timeline-item.type-unusual_dwell { border-left-color: var(--blue-10); } .anomaly-item-header { display: flex; @@ -1192,43 +1192,43 @@ .anomaly-item-type { font-size: 13px; font-weight: 600; - color: #eee; + color: var(--slate-12); } .anomaly-item-time { font-size: 11px; - color: #888; + color: var(--text-muted); } .anomaly-item-details { - font-size: 12px; - color: #ccc; + font-size: var(--text-xs); + color: var(--slate-11); line-height: 1.4; } .anomaly-item-status { display: inline-block; padding: 2px 8px; - border-radius: 10px; + border-radius: var(--radius-card); font-size: 10px; font-weight: 600; margin-top: 6px; } .anomaly-item-status.active { - background: rgba(239, 83, 80, 0.2); - color: #ef5350; + background: var(--alert-muted); + color: var(--alert); } .anomaly-item-status.acknowledged { - background: rgba(102, 187, 106, 0.2); - color: #66bb6a; + background: var(--ok-muted); + color: var(--ok); } .anomaly-timeline-empty { text-align: center; padding: 32px 20px; - color: #666; + color: var(--text-muted); } .anomaly-timeline-empty-icon { @@ -1333,7 +1333,7 @@ left: 0; right: 0; bottom: 0; - background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); + background: linear-gradient(135deg, var(--bg-card) 0%, var(--blue-3) 100%); z-index: 10000; display: flex; align-items: center; @@ -1342,9 +1342,9 @@ } .auth-modal { - background: #1e1e3a; - border-radius: 16px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); + background: var(--bg-card); + border-radius: var(--radius-modal); + box-shadow: 0 20px 60px var(--shadow-xl); width: 100%; max-width: 440px; padding: 40px; @@ -1353,15 +1353,15 @@ .auth-header h1 { margin: 0 0 8px; - font-size: 28px; + font-size: var(--text-2xl); font-weight: 600; - color: #eee; + color: var(--slate-12); } .auth-header p { margin: 0 0 32px; font-size: 15px; - color: #aaa; + color: var(--text-secondary); } .auth-body { @@ -1372,24 +1372,24 @@ } .auth-instruction { - font-size: 14px; - color: #ccc; + font-size: var(--text-sm); + color: var(--slate-11); margin: 0 0 16px; } .auth-hint { - font-size: 12px; - color: #666; + font-size: var(--text-xs); + color: var(--text-muted); margin: 0; } .auth-error { - background: rgba(239, 83, 80, 0.15); - 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); padding: 10px 16px; font-size: 13px; - color: #ef5350; + color: var(--alert); margin: 0; } @@ -1402,10 +1402,10 @@ .pin-digit { width: 44px; height: 56px; - background: rgba(255, 255, 255, 0.05); - border: 2px solid rgba(255, 255, 255, 0.15); + background: var(--border-subtle); + border: 2px solid var(--border-strong); border-radius: 8px; - color: #eee; + color: var(--slate-12); font-size: 24px; font-weight: 600; text-align: center; @@ -1414,13 +1414,13 @@ .pin-digit:focus { outline: none; - border-color: #4fc3f7; - box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15); - background: rgba(255, 255, 255, 0.08); + border-color: var(--blue-10); + box-shadow: 0 0 0 3px var(--blue-muted); + background: var(--border-default); } .pin-digit::placeholder { - color: #444; + color: var(--slate-6); } .auth-button { @@ -1440,25 +1440,25 @@ } .auth-button.primary { - background: #4fc3f7; - color: #1a1a2e; + background: var(--blue-10); + color: var(--bg-card); } .auth-button.primary:hover:not(:disabled) { - background: #29b6f6; + background: var(--blue-10); transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(79, 195, 247, 0.3); + box-shadow: 0 4px 12px var(--blue-border); } .auth-button.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); } .auth-button.secondary:hover { - background: rgba(255, 255, 255, 0.15); - color: #eee; + background: var(--border-strong); + color: var(--slate-12); } /* Responsive adjustments */ @@ -1474,7 +1474,7 @@ .pin-digit { width: 38px; height: 48px; - font-size: 20px; + font-size: var(--text-lg); } .auth-button { @@ -1494,7 +1494,7 @@ justify-content: center; padding: 40px; gap: 12px; - color: #888; + color: var(--text-muted); } .explainability-loading .panel-loading-spinner { @@ -1507,7 +1507,7 @@ align-items: center; gap: 16px; padding: 16px; - background: rgba(255, 255, 255, 0.05); + background: var(--border-subtle); border-radius: 8px; margin-bottom: 20px; } @@ -1527,13 +1527,13 @@ .confidence-ring-bg { fill: none; - stroke: rgba(255, 255, 255, 0.1); + stroke: var(--bg-hover); stroke-width: 3; } .confidence-ring-fill { fill: none; - stroke: #66bb6a; + stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; @@ -1545,14 +1545,14 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - font-size: 16px; + font-size: var(--text-base); font-weight: 600; - color: #eee; + color: var(--slate-12); } .confidence-label { font-size: 13px; - color: #aaa; + color: var(--text-secondary); } /* Section Styles */ @@ -1561,28 +1561,28 @@ } .section-title { - font-size: 14px; + font-size: var(--text-sm); font-weight: 600; - color: #eee; + color: var(--slate-12); margin-bottom: 12px; } .section-header { - font-size: 14px; + font-size: var(--text-sm); font-weight: 600; - color: #888; + color: var(--text-muted); cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--bg-hover); } .toggle-icon { - font-size: 12px; - color: #888; + font-size: var(--text-xs); + color: var(--text-muted); transition: transform 0.2s ease; } @@ -1598,15 +1598,15 @@ .links-table { width: 100%; border-collapse: collapse; - font-size: 12px; + font-size: var(--text-xs); } .links-table th { text-align: left; padding: 8px 10px; - color: #888; + color: var(--text-muted); font-weight: 500; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--bg-hover); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; @@ -1614,7 +1614,7 @@ .links-table td { padding: 8px 10px; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); + border-bottom: 1px solid var(--border-subtle); } .links-table tr:last-child td { @@ -1627,17 +1627,17 @@ } .link-cell { - font-family: monospace; + font-family: var(--font-mono); } .link-id { - color: #4fc3f7; + color: var(--blue-10); font-size: 11px; } .deltarms-cell { - font-family: monospace; - color: #ccc; + font-family: var(--font-mono); + color: var(--slate-11); } .zone-cell { @@ -1650,18 +1650,18 @@ border-radius: 3px; font-size: 10px; font-weight: 600; - color: #1a1a2e; + color: var(--bg-card); } .weight-cell { - font-family: monospace; - color: #aaa; + font-family: var(--font-mono); + color: var(--text-secondary); text-align: right; } .contribution-cell { - font-family: monospace; - color: #888; + font-family: var(--font-mono); + color: var(--text-muted); text-align: right; } @@ -1675,13 +1675,13 @@ border-radius: 3px; font-size: 11px; font-weight: 600; - background: rgba(102, 187, 106, 0.3); - color: #66bb6a; + background: var(--ok-border); + color: var(--ok); } .contributing-badge.contributing-no { background: rgba(136, 136, 136, 0.2); - color: #888; + color: var(--text-muted); } .links-table-detailed tr.contributing-yes { @@ -1694,7 +1694,7 @@ /* BLE Match Card */ .ble-match-card { - background: rgba(255, 255, 255, 0.05); + background: var(--border-subtle); border-radius: 8px; padding: 12px; } @@ -1717,7 +1717,7 @@ flex: 1; font-size: 15px; font-weight: 600; - color: #eee; + color: var(--slate-12); } .ble-match-confidence { @@ -1725,8 +1725,8 @@ font-weight: 600; padding: 3px 8px; border-radius: 4px; - background: rgba(79, 195, 247, 0.2); - color: #4fc3f7; + background: var(--blue-muted); + color: var(--blue-10); } .ble-match-details { @@ -1739,35 +1739,35 @@ display: flex; align-items: center; gap: 8px; - font-size: 12px; + font-size: var(--text-xs); } .ble-match-detail .detail-label { - color: #888; + color: var(--text-muted); min-width: 70px; } .ble-match-detail .detail-value { - color: #ccc; - font-family: monospace; + color: var(--slate-11); + font-family: var(--font-mono); } /* Footer */ .explainability-footer { padding-top: 16px; - border-top: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid var(--bg-hover); } /* Blob Context Menu */ .blob-context-menu { position: fixed; - background: rgba(30, 30, 58, 0.98); - border: 1px solid rgba(255, 255, 255, 0.15); + background: var(--bg-card); + border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 0; min-width: 200px; z-index: 10000; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); + box-shadow: 0 8px 32px var(--shadow-xl); animation: context-menu-fade-in 0.15s ease-out; } @@ -1789,13 +1789,13 @@ align-items: center; gap: 10px; font-size: 13px; - color: #ccc; + color: var(--slate-11); transition: background 0.2s, color 0.2s; } .blob-context-menu-item:hover { - background: rgba(79, 195, 247, 0.15); - color: #4fc3f7; + background: var(--blue-muted); + color: var(--blue-10); } .blob-context-menu-item:first-child { @@ -1808,19 +1808,19 @@ .blob-context-menu-divider { height: 1px; - background: rgba(255, 255, 255, 0.1); + background: var(--bg-hover); margin: 4px 0; } .blob-context-menu-icon { - font-size: 16px; + font-size: var(--text-base); width: 20px; text-align: center; } /* Explainability Sidebar Specific */ #explainability-sidebar { - background: #1e1e3a; + background: var(--bg-card); } /* Responsive */ @@ -1856,7 +1856,7 @@ align-items: center; justify-content: space-between; padding: 12px 0; - border-bottom: 1px solid rgba(255,255,255,0.08); + border-bottom: 1px solid var(--border-default); margin-bottom: 12px; } @@ -1874,24 +1874,24 @@ .volume-tools button { padding: 4px 10px; - font-size: 12px; - border: 1px solid rgba(255,255,255,0.15); + font-size: var(--text-xs); + border: 1px solid var(--border-strong); border-radius: 4px; background: rgba(255,255,255,0.05); - color: #ccc; + color: var(--slate-11); cursor: pointer; transition: background 0.15s; } .volume-tools button:hover { - background: rgba(255,255,255,0.12); - color: #fff; + background: var(--bg-active); + color: var(--text-on-accent); } .trigger-card { - background: rgba(255,255,255,0.04); - border: 1px solid rgba(255,255,255,0.08); - border-radius: 6px; + background: var(--border-subtle); + border: 1px solid var(--border-default); + border-radius: var(--radius-control); padding: 10px 12px; margin-bottom: 8px; transition: border-color 0.15s; @@ -1921,7 +1921,7 @@ .trigger-card-meta { font-size: 11px; - color: #888; + color: var(--text-muted); margin-top: 4px; } @@ -1940,8 +1940,8 @@ font-size: 10px; font-weight: 600; border-radius: 3px; - background: rgba(255,80,80,0.18); - color: #ff6b6b; + background: var(--alert-bg); + color: var(--alert); text-transform: uppercase; letter-spacing: 0.3px; } @@ -1955,7 +1955,7 @@ font-weight: 600; border-radius: 3px; background: rgba(255,180,50,0.18); - color: #ffb432; + color: var(--warn); text-transform: uppercase; letter-spacing: 0.3px; } @@ -1969,7 +1969,7 @@ font-weight: 600; border-radius: 3px; background: rgba(255,200,50,0.15); - color: #e6c84c; + color: var(--warn); text-transform: uppercase; letter-spacing: 0.3px; } @@ -1979,20 +1979,20 @@ align-items: center; justify-content: center; padding: 5px 12px; - font-size: 12px; + font-size: var(--text-xs); font-weight: 500; - border: 1px solid rgba(255,255,255,0.12); + border: 1px solid var(--bg-active); border-radius: 4px; - background: rgba(255,255,255,0.06); - color: #ccc; + background: var(--border-subtle); + color: var(--slate-11); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .btn:hover { - background: rgba(255,255,255,0.12); - color: #fff; + background: var(--bg-active); + color: var(--text-on-accent); } .btn-sm { @@ -2001,45 +2001,45 @@ } .btn-primary { - background: rgba(80,140,255,0.25); - border-color: rgba(80,140,255,0.35); - color: #7db4ff; + background: var(--blue-muted); + border-color: var(--blue-border); + color: var(--blue-11); } .btn-primary:hover { - background: rgba(80,140,255,0.35); - color: #a5ccff; + background: var(--blue-border); + color: var(--blue-12); } .btn-secondary { - background: rgba(255,255,255,0.06); - border-color: rgba(255,255,255,0.12); - color: #aaa; + background: var(--border-subtle); + border-color: var(--bg-active); + color: var(--text-secondary); } .btn-secondary:hover { - background: rgba(255,255,255,0.12); - color: #fff; + background: var(--bg-active); + color: var(--text-on-accent); } .btn-danger { background: rgba(255,80,80,0.15); - border-color: rgba(255,80,80,0.25); - color: #ff6b6b; + border-color: var(--alert-border); + color: var(--alert); } .btn-danger:hover { - background: rgba(255,80,80,0.25); + background: var(--alert-border); } .btn-warning { background: rgba(255,180,50,0.15); - border-color: rgba(255,180,50,0.25); - color: #ffb432; + border-color: var(--warn-border); + color: var(--warn); } .btn-warning:hover { - background: rgba(255,180,50,0.25); + background: var(--warn-border); } .toggle-switch { @@ -2060,8 +2060,8 @@ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(255,255,255,0.12); - border-radius: 10px; + background: var(--bg-active); + border-radius: var(--radius-card); transition: background 0.2s; } @@ -2072,18 +2072,18 @@ height: 16px; left: 2px; bottom: 2px; - background: #ccc; + background: var(--slate-11); border-radius: 50%; transition: transform 0.2s, background 0.2s; } .toggle-switch input:checked + .slider { - background: rgba(80,140,255,0.4); + background: var(--blue-border); } .toggle-switch input:checked + .slider:before { transform: translateX(16px); - background: #7db4ff; + background: var(--blue-11); } .action-item { @@ -2092,21 +2092,21 @@ gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.03); - border: 1px solid rgba(255,255,255,0.06); + border: 1px solid var(--border-subtle); border-radius: 4px; - font-size: 12px; + font-size: var(--text-xs); margin-bottom: 6px; } .action-item .action-type { font-weight: 500; - color: #7db4ff; + color: var(--blue-11); min-width: 55px; } .action-item .action-detail { flex: 1; - color: #aaa; + color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -2114,34 +2114,34 @@ .action-item .action-remove { cursor: pointer; - color: #666; - font-size: 14px; + color: var(--text-muted); + font-size: var(--text-sm); padding: 0 2px; } .action-item .action-remove:hover { - color: #ff6b6b; + color: var(--alert); } .form-control { width: 100%; padding: 6px 10px; font-size: 13px; - background: rgba(255,255,255,0.06); - border: 1px solid rgba(255,255,255,0.12); + background: var(--border-subtle); + border: 1px solid var(--bg-active); border-radius: 4px; - color: #ddd; + color: var(--text-secondary); box-sizing: border-box; transition: border-color 0.15s; } .form-control:focus { outline: none; - border-color: rgba(80,140,255,0.5); + border-color: var(--blue-9); } .form-control::placeholder { - color: #666; + color: var(--text-muted); } .form-group { @@ -2150,24 +2150,24 @@ .form-group label { display: block; - font-size: 12px; + font-size: var(--text-xs); font-weight: 500; - color: #aaa; + color: var(--text-secondary); margin-bottom: 4px; } .text-muted { - color: #666; + color: var(--text-muted); font-size: 11px; } .volume-shape-info { padding: 6px 8px; - background: rgba(255,255,255,0.04); + background: var(--border-subtle); border: 1px dashed rgba(255,255,255,0.1); border-radius: 4px; - font-size: 12px; - color: #888; + font-size: var(--text-xs); + color: var(--text-muted); } .trigger-log { @@ -2182,7 +2182,7 @@ gap: 8px; padding: 4px 0; font-size: 11px; - border-bottom: 1px solid rgba(255,255,255,0.04); + border-bottom: 1px solid var(--border-subtle); } .trigger-log-entry .log-status { @@ -2191,11 +2191,11 @@ } .trigger-log-entry .log-status.ok { - color: #6c6; + color: var(--ok); } .trigger-log-entry .log-status.err { - color: #f66; + color: var(--alert); } .trigger-log-entry .log-url { @@ -2203,11 +2203,11 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: #888; + color: var(--text-muted); } .trigger-log-entry .log-time { - color: #555; + color: var(--slate-7); font-size: 10px; flex-shrink: 0; } @@ -2222,7 +2222,7 @@ left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.7); + background: var(--overlay-strong); z-index: 2000; display: flex; align-items: center; @@ -2240,9 +2240,9 @@ } .panel-modal { - 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: 400px; max-width: 90vw; max-height: 90vh; @@ -2268,20 +2268,20 @@ align-items: center; justify-content: space-between; padding: 20px 24px 16px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--bg-hover); } .panel-modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; - color: #eee; + color: var(--slate-12); } .panel-modal-close { background: none; border: none; - color: #888; + color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; @@ -2297,8 +2297,8 @@ } .panel-modal-close:hover { - background: rgba(255, 255, 255, 0.1); - color: #eee; + background: var(--bg-hover); + color: var(--slate-12); } .panel-modal-body { @@ -2310,11 +2310,11 @@ .panel-input { width: 100%; padding: 10px 12px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 6px; - color: #eee; - font-size: 14px; + background: var(--border-subtle); + border: 1px solid var(--border-strong); + border-radius: var(--radius-control); + color: var(--slate-12); + font-size: var(--text-sm); font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; @@ -2322,12 +2322,12 @@ .panel-input:focus { outline: none; - border-color: #4fc3f7; - box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15); + border-color: var(--blue-10); + box-shadow: 0 0 0 3px var(--blue-muted); } .panel-input::placeholder { - color: #555; + color: var(--slate-7); } .panel-modal-actions { @@ -2337,16 +2337,16 @@ justify-content: flex-end; gap: 12px; padding: 16px 24px 20px; - border-top: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid var(--bg-hover); } .panel-error { - background: rgba(239, 83, 80, 0.15); - 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); padding: 10px 16px; font-size: 13px; - color: #ef5350; + color: var(--alert); margin-bottom: 16px; } @@ -2386,8 +2386,8 @@ right: 0; bottom: 0; width: 360px; - background: #1e1e3a; - box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3); + background: var(--bg-card); + box-shadow: -4px 0 16px var(--shadow); z-index: 100; display: flex; flex-direction: column; @@ -2399,21 +2399,21 @@ align-items: center; justify-content: space-between; padding: 16px 20px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--bg-hover); flex-shrink: 0; } .simulator-header h2 { margin: 0; - font-size: 16px; + font-size: var(--text-base); font-weight: 600; - color: #eee; + color: var(--slate-12); } .sim-close-btn { background: none; border: none; - color: #888; + color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 4px; @@ -2427,8 +2427,8 @@ } .sim-close-btn:hover { - background: rgba(255, 255, 255, 0.1); - color: #eee; + background: var(--bg-hover); + color: var(--slate-12); } .simulator-content { @@ -2440,7 +2440,7 @@ .sim-section { margin-bottom: 20px; padding-bottom: 16px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--bg-hover); } .sim-section:last-child { @@ -2452,7 +2452,7 @@ font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; - color: #888; + color: var(--text-muted); } /* Space Controls */ @@ -2468,16 +2468,16 @@ align-items: center; justify-content: space-between; font-size: 13px; - color: #ccc; + color: var(--slate-11); } .sim-space-controls input[type="number"] { width: 80px; padding: 6px 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; text-align: right; } @@ -2492,10 +2492,10 @@ .sim-tool-btn { flex: 1; padding: 10px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 6px; - color: #ccc; + background: var(--border-subtle); + border: 1px solid var(--border-strong); + border-radius: var(--radius-control); + color: var(--slate-11); cursor: pointer; transition: all 0.2s; display: flex; @@ -2504,23 +2504,23 @@ } .sim-tool-btn:hover { - background: rgba(255, 255, 255, 0.1); - color: #eee; + background: var(--bg-hover); + color: var(--slate-12); } .sim-tool-btn.active { - background: rgba(79, 195, 247, 0.2); - border-color: rgba(79, 195, 247, 0.4); - color: #4fc3f7; + background: var(--blue-muted); + border-color: var(--blue-border); + color: var(--blue-10); } /* General Buttons */ .sim-btn { padding: 8px 16px; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 6px; - color: #ccc; + background: var(--bg-hover); + border: 1px solid var(--border-strong); + border-radius: var(--radius-control); + color: var(--slate-11); font-size: 13px; font-weight: 500; cursor: pointer; @@ -2528,8 +2528,8 @@ } .sim-btn:hover { - background: rgba(255, 255, 255, 0.15); - color: #eee; + background: var(--border-strong); + color: var(--slate-12); } .sim-btn:disabled { @@ -2538,23 +2538,23 @@ } .sim-btn-primary { - background: rgba(79, 195, 247, 0.2); - border-color: rgba(79, 195, 247, 0.3); - color: #4fc3f7; + background: var(--blue-muted); + border-color: var(--blue-border); + color: var(--blue-10); } .sim-btn-primary:hover:not(:disabled) { - background: rgba(79, 195, 247, 0.3); + background: var(--blue-border); } .sim-btn-danger { - background: rgba(244, 67, 54, 0.15); - border-color: rgba(244, 67, 54, 0.25); - color: #ef5350; + background: var(--alert-bg); + border-color: var(--alert-border); + color: var(--alert); } .sim-btn-danger:hover { - background: rgba(244, 67, 54, 0.25); + background: var(--alert-border); } /* Node List */ @@ -2580,10 +2580,10 @@ flex: 1; min-width: 120px; padding: 8px 12px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 6px; - color: #eee; + background: var(--border-subtle); + border: 1px solid var(--border-strong); + border-radius: var(--radius-control); + color: var(--slate-12); font-size: 13px; cursor: pointer; } @@ -2603,36 +2603,36 @@ align-items: center; gap: 8px; padding: 8px 12px; - background: rgba(255, 255, 255, 0.05); - border-radius: 6px; + background: var(--border-subtle); + border-radius: var(--radius-control); margin-bottom: 6px; } .sim-item-name { flex: 1; font-size: 13px; - color: #eee; + color: var(--slate-12); } .sim-item-position { font-size: 11px; - color: #888; - font-family: monospace; + color: var(--text-muted); + font-family: var(--font-mono); } .sim-item-delete { padding: 4px 8px; - background: rgba(244, 67, 54, 0.15); + background: var(--alert-bg); border: none; border-radius: 4px; - color: #ef5350; + color: var(--alert); font-size: 11px; cursor: pointer; transition: background 0.2s; } .sim-item-delete:hover { - background: rgba(244, 67, 54, 0.25); + background: var(--alert-border); } /* GDOP Controls */ @@ -2647,14 +2647,14 @@ align-items: center; gap: 6px; font-size: 13px; - color: #ccc; + color: var(--slate-11); cursor: pointer; } .sim-gdop-controls input[type="checkbox"] { width: 16px; height: 16px; - accent-color: #4fc3f7; + accent-color: var(--blue-10); cursor: pointer; } @@ -2676,21 +2676,21 @@ .sim-progress > span:first-child { display: block; - font-size: 12px; - color: #888; + font-size: var(--text-xs); + color: var(--text-muted); margin-bottom: 6px; } .sim-progress-bar { height: 8px; - background: rgba(255, 255, 255, 0.1); + background: var(--bg-hover); border-radius: 4px; overflow: hidden; } .sim-progress-fill { height: 100%; - background: linear-gradient(90deg, #4fc3f7, #29b6f6); + background: linear-gradient(90deg, var(--blue-10), var(--blue-10)); border-radius: 4px; transition: width 0.3s ease; } @@ -2707,19 +2707,19 @@ justify-content: space-between; align-items: center; padding: 8px 12px; - background: rgba(255, 255, 255, 0.05); - border-radius: 6px; + background: var(--border-subtle); + border-radius: var(--radius-control); } .sim-result-label { font-size: 13px; - color: #ccc; + color: var(--slate-11); } .sim-result-value { - font-size: 14px; + font-size: var(--text-sm); font-weight: 600; - color: #4fc3f7; + color: var(--blue-10); } /* Recommendations */ @@ -2734,8 +2734,8 @@ align-items: flex-start; gap: 10px; padding: 10px 12px; - background: rgba(255, 255, 255, 0.05); - border-radius: 6px; + background: var(--border-subtle); + border-radius: var(--radius-control); border-left: 3px solid transparent; } @@ -2749,23 +2749,23 @@ } .sim-rec-priority.high { - background: rgba(244, 67, 54, 0.2); - color: #ef5350; + background: var(--alert-muted); + color: var(--alert); } .sim-rec-priority.medium { - background: rgba(255, 167, 38, 0.2); - color: #ffa726; + background: var(--warn-muted); + color: var(--warn); } .sim-rec-priority.low { - background: rgba(102, 187, 106, 0.2); - color: #66bb6a; + background: var(--ok-muted); + color: var(--ok); } .sim-rec-text { font-size: 13px; - color: #ccc; + color: var(--slate-11); line-height: 1.4; } @@ -2781,18 +2781,18 @@ justify-content: space-between; align-items: center; padding: 8px 12px; - background: rgba(255, 255, 255, 0.05); - border-radius: 6px; + background: var(--border-subtle); + border-radius: var(--radius-control); } .sim-shopping-item span { font-size: 13px; - color: #ccc; + color: var(--slate-11); } .sim-shopping-item strong { - font-size: 14px; - color: #4fc3f7; + font-size: var(--text-sm); + color: var(--blue-10); } /* Scrollbar */ @@ -2803,18 +2803,18 @@ .simulator-content::-webkit-scrollbar-track, .sim-items-list::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.05); + background: var(--border-subtle); } .simulator-content::-webkit-scrollbar-thumb, .sim-items-list::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); + background: var(--border-strong); border-radius: 3px; } .simulator-content::-webkit-scrollbar-thumb:hover, .sim-items-list::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.3); + background: var(--slate-7); } /* Responsive */ @@ -2846,7 +2846,7 @@ left: 0; right: 0; bottom: 0; - background: #1a1a2e; + background: var(--bg-card); z-index: 2000; display: flex; flex-direction: column; @@ -2858,7 +2858,7 @@ align-items: center; justify-content: space-between; padding: 16px 20px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--bg-hover); background: rgba(0, 0, 0, 0.2); } @@ -2866,13 +2866,13 @@ margin: 0; font-size: 18px; font-weight: 600; - color: #eee; + color: var(--slate-12); } .sim-close-btn { background: none; border: none; - color: #888; + color: var(--text-muted); font-size: 24px; cursor: pointer; padding: 0; @@ -2886,8 +2886,8 @@ } .sim-close-btn:hover { - background: rgba(255, 255, 255, 0.1); - color: #eee; + background: var(--bg-hover); + color: var(--slate-12); } /* Simulator Content */ @@ -2899,7 +2899,7 @@ /* Simulator Sections */ .sim-section { - background: rgba(255, 255, 255, 0.03); + background: var(--border-subtle); border-radius: 8px; padding: 16px; margin-bottom: 16px; @@ -2907,9 +2907,9 @@ .sim-section h3 { margin: 0 0 12px 0; - font-size: 14px; + font-size: var(--text-sm); font-weight: 600; - color: #4fc3f7; + color: var(--blue-10); text-transform: uppercase; letter-spacing: 0.5px; } @@ -2925,23 +2925,23 @@ .sim-space-controls label { display: flex; flex-direction: column; - font-size: 12px; - color: #888; + font-size: var(--text-xs); + color: var(--text-muted); } .sim-space-controls input { margin-top: 4px; padding: 6px 8px; - background: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--shadow); + border: 1px solid var(--bg-hover); border-radius: 4px; - color: #eee; + color: var(--slate-12); font-size: 13px; } .sim-space-controls input:focus { outline: none; - border-color: #4fc3f7; + border-color: var(--blue-10); } /* Tool Buttons */ @@ -2954,10 +2954,10 @@ .sim-tool-btn { flex: 1; padding: 8px 12px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 6px; - color: #888; + background: var(--border-subtle); + border: 1px solid var(--bg-hover); + border-radius: var(--radius-control); + color: var(--text-muted); cursor: pointer; transition: all 0.2s; display: flex; @@ -2966,14 +2966,14 @@ } .sim-tool-btn:hover { - background: rgba(255, 255, 255, 0.1); - color: #eee; + background: var(--bg-hover); + color: var(--slate-12); } .sim-tool-btn.active { - background: rgba(79, 195, 247, 0.2); - border-color: rgba(79, 195, 247, 0.5); - color: #4fc3f7; + background: var(--blue-muted); + border-color: var(--blue-border); + color: var(--blue-10); } .sim-tool-btn svg { @@ -3007,28 +3007,28 @@ .sim-item-name { flex: 1; font-size: 13px; - color: #eee; + color: var(--slate-12); } .sim-item-position { font-size: 11px; - color: #888; + color: var(--text-muted); margin-right: 8px; } .sim-item-delete { padding: 4px 8px; - 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: 3px; - color: #ef5350; + color: var(--alert); font-size: 11px; cursor: pointer; transition: all 0.2s; } .sim-item-delete:hover { - background: rgba(244, 67, 54, 0.3); + background: var(--alert-border); } /* GDOP Controls */ @@ -3043,7 +3043,7 @@ display: flex; align-items: center; font-size: 13px; - color: #888; + color: var(--text-muted); gap: 6px; } @@ -3070,31 +3070,31 @@ .sim-progress-bar { flex: 1; height: 4px; - background: rgba(255, 255, 255, 0.1); + background: var(--bg-hover); border-radius: 2px; overflow: hidden; } .sim-progress-fill { height: 100%; - background: linear-gradient(90deg, #4fc3f7, #29b6f6); + background: linear-gradient(90deg, var(--blue-10), var(--blue-10)); transition: width 0.1s linear; } /* Simulator Buttons */ .sim-btn { padding: 8px 16px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 6px; - color: #eee; + background: var(--border-subtle); + border: 1px solid var(--bg-hover); + border-radius: var(--radius-control); + color: var(--slate-12); font-size: 13px; cursor: pointer; transition: all 0.2s; } .sim-btn:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.1); + background: var(--bg-hover); } .sim-btn:disabled { @@ -3103,23 +3103,23 @@ } .sim-btn-primary { - background: rgba(79, 195, 247, 0.2); - border-color: rgba(79, 195, 247, 0.3); - color: #4fc3f7; + background: var(--blue-muted); + border-color: var(--blue-border); + color: var(--blue-10); } .sim-btn-primary:hover:not(:disabled) { - background: rgba(79, 195, 247, 0.3); + background: var(--blue-border); } .sim-btn-danger { - background: rgba(244, 67, 54, 0.2); - border-color: rgba(244, 67, 54, 0.3); - color: #ef5350; + background: var(--alert-muted); + border-color: var(--alert-border); + color: var(--alert); } .sim-btn-danger:hover:not(:disabled) { - background: rgba(244, 67, 54, 0.3); + background: var(--alert-border); } /* Results Section */ @@ -3140,13 +3140,13 @@ .sim-result-label { font-size: 13px; - color: #888; + color: var(--text-muted); } .sim-result-value { - font-size: 16px; + font-size: var(--text-base); font-weight: 600; - color: #4fc3f7; + color: var(--blue-10); } /* Recommendations */ @@ -3166,15 +3166,15 @@ } .sim-recommendation.high { - border-left-color: #f44336; + border-left-color: var(--alert); } .sim-recommendation.medium { - border-left-color: #ff9800; + border-left-color: var(--warn); } .sim-recommendation.low { - border-left-color: #4caf50; + border-left-color: var(--ok); } .sim-rec-priority { @@ -3186,24 +3186,24 @@ } .sim-recommendation.high .sim-rec-priority { - background: rgba(244, 67, 54, 0.2); - color: #f44336; + background: var(--alert-muted); + color: var(--alert); } .sim-recommendation.medium .sim-rec-priority { - background: rgba(255, 152, 0, 0.2); - color: #ff9800; + background: var(--warn-muted); + color: var(--warn); } .sim-recommendation.low .sim-rec-priority { - background: rgba(76, 175, 80, 0.2); - color: #4caf50; + background: var(--ok-muted); + color: var(--ok); } .sim-rec-text { flex: 1; font-size: 13px; - color: #eee; + color: var(--slate-12); } /* Shopping List */ @@ -3221,11 +3221,11 @@ background: rgba(0, 0, 0, 0.2); border-radius: 4px; font-size: 13px; - color: #eee; + color: var(--slate-12); } .sim-shopping-item strong { - color: #4fc3f7; + color: var(--blue-10); } /* ============================================ @@ -3235,8 +3235,8 @@ .sim-gdop-legend { margin-top: 15px; padding: 12px; - background: rgba(0, 0, 0, 0.3); - border-radius: 6px; + background: var(--shadow); + border-radius: var(--radius-control); } .gdop-legend-item { @@ -3244,7 +3244,7 @@ align-items: center; margin-bottom: 8px; font-size: 13px; - color: #ddd; + color: var(--text-secondary); } .gdop-legend-item:last-child { @@ -3257,18 +3257,18 @@ border-radius: 3px; margin-right: 10px; flex-shrink: 0; - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid var(--border-strong); } .gdop-legend-label { flex: 1; - color: #ccc; + color: var(--slate-11); } .gdop-stats { margin-top: 12px; padding-top: 12px; - border-top: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid var(--bg-hover); display: flex; justify-content: space-between; flex-wrap: wrap; @@ -3277,10 +3277,10 @@ .gdop-stat-item { font-size: 13px; - color: #aaa; + color: var(--text-secondary); } .gdop-stat-item strong { - color: #4fc3f7; + color: var(--blue-10); font-weight: 600; } diff --git a/dashboard/css/quick-actions.css b/dashboard/css/quick-actions.css index 264d990..9268cbb 100644 --- a/dashboard/css/quick-actions.css +++ b/dashboard/css/quick-actions.css @@ -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); - } -} diff --git a/dashboard/css/replay.css b/dashboard/css/replay.css index f4111f0..84baec4 100644 --- a/dashboard/css/replay.css +++ b/dashboard/css/replay.css @@ -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; diff --git a/dashboard/css/security.css b/dashboard/css/security.css index 5071026..9348cc7 100644 --- a/dashboard/css/security.css +++ b/dashboard/css/security.css @@ -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; } diff --git a/dashboard/css/simple.css b/dashboard/css/simple.css index 205cdee..b50dfea 100644 --- a/dashboard/css/simple.css +++ b/dashboard/css/simple.css @@ -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, diff --git a/dashboard/css/simulator.css b/dashboard/css/simulator.css index 44718ae..591d225 100644 --- a/dashboard/css/simulator.css +++ b/dashboard/css/simulator.css @@ -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; diff --git a/dashboard/css/sleep.css b/dashboard/css/sleep.css index 1fc3740..33e2adf 100644 --- a/dashboard/css/sleep.css +++ b/dashboard/css/sleep.css @@ -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; } diff --git a/dashboard/css/timeline.css b/dashboard/css/timeline.css index ff45bfd..3366745 100644 --- a/dashboard/css/timeline.css +++ b/dashboard/css/timeline.css @@ -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; } diff --git a/dashboard/css/tokens.css b/dashboard/css/tokens.css index 50916a5..4000454 100644 --- a/dashboard/css/tokens.css +++ b/dashboard/css/tokens.css @@ -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); } diff --git a/dashboard/css/troubleshoot.css b/dashboard/css/troubleshoot.css index 91eb6ce..22c5bc3 100644 --- a/dashboard/css/troubleshoot.css +++ b/dashboard/css/troubleshoot.css @@ -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; diff --git a/dashboard/fleet.html b/dashboard/fleet.html index e66c3e7..343c7af 100644 --- a/dashboard/fleet.html +++ b/dashboard/fleet.html @@ -4,28 +4,32 @@ Spaxel Fleet Status + + - + - - -