c0416fee6c
- Add security status card with arm/disarm dialog, DISARMED/LEARNING/ARMED/ALERT badge, learning progress bar (N of 7 days), and last-anomaly summary line - Add full-width alert banner with acknowledge button for armed-mode anomalies; acknowledged alerts disappear from banner but remain in history - Add anomaly timeline panel (24h) with severity scores and timeline navigation - Fix WS broadcast field names to match AnomalyEvent JSON/REST API: anomaly_type→type, timestamp_ms→RFC3339 timestamp so JS handles both WS pushes and polled history uniformly - Fix formatTimeAgo() to parse RFC3339 string timestamps in addition to Unix-ms - Fix fetchAnomalyCount() to use /api/anomalies?since=24h (structured response) instead of /api/anomalies/history (returns plain array) - Add security-card detail area styling to anomaly.css - Add BlobIdentityProvider wiring in zones API for people resolution in zone responses - Add linkweather diagnostic engine tests (Rules 1-5 + helpers) All go test ./... pass; go vet ./... clean. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1074 lines
23 KiB
CSS
1074 lines
23 KiB
CSS
/* Anomaly Detection UI - Alarm Overlay, Acknowledgement Flow, and Security Mode */
|
|
|
|
/* ── Anomaly Alarm Overlay ────────────────────────────────────────────────────── */
|
|
|
|
.anomaly-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--alert);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: anomaly-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
.anomaly-overlay.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes anomaly-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.anomaly-banner {
|
|
background: var(--bg-card);
|
|
border: 2px solid var(--alert);
|
|
border-radius: var(--radius-modal);
|
|
padding: var(--space-6);
|
|
max-width: 500px;
|
|
width: 90%;
|
|
box-shadow: 0 20px 60px var(--shadow-xl);
|
|
animation: anomaly-slide-up 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes anomaly-slide-up {
|
|
from { transform: translateY(50px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.anomaly-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 64px;
|
|
height: 64px;
|
|
background: var(--alert);
|
|
border-radius: 50%;
|
|
margin: auto;
|
|
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 var(--alert-muted); }
|
|
50% { transform: scale(1.1); box-shadow: 0 0 20px 0 transparent; }
|
|
}
|
|
|
|
.anomaly-icon svg {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.anomaly-content {
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.anomaly-title {
|
|
font-size: var(--text-lg);
|
|
font-weight: 700;
|
|
margin: var(--space-2);
|
|
color: var(--alert);
|
|
}
|
|
|
|
.anomaly-description {
|
|
font-size: var(--text-base);
|
|
margin-bottom: var(--space-3);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.anomaly-meta {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-5);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.anomaly-actions {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.anomaly-btn {
|
|
padding: 10px var(--space-5);
|
|
border-radius: var(--radius-control);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.anomaly-btn.ack {
|
|
background: var(--ok);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.anomaly-btn.ack:hover {
|
|
background: var(--ok);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.anomaly-btn.view {
|
|
background: var(--blue-9);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.anomaly-btn.view:hover {
|
|
background: var(--blue-9);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.anomaly-btn.dismiss {
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--slate-6);
|
|
}
|
|
|
|
.anomaly-btn.dismiss:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
/* ── Feedback Modal ───────────────────────────────────────────────────────────── */
|
|
|
|
.anomaly-feedback-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 2100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.anomaly-feedback-modal.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--overlay-strong);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal-content {
|
|
position: relative;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--slate-5);
|
|
border-radius: var(--radius-modal);
|
|
padding: var(--space-6);
|
|
max-width: 480px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
color: var(--text-secondary);
|
|
animation: modal-pop 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes modal-pop {
|
|
from { transform: scale(0.95); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
.modal-content h3 {
|
|
margin: var(--space-2);
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.feedback-anomaly-desc {
|
|
margin-bottom: var(--space-4);
|
|
color: var(--text-muted);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.feedback-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.feedback-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
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);
|
|
}
|
|
|
|
.feedback-btn.selected {
|
|
border-color: var(--blue-9);
|
|
background: var(--blue-muted);
|
|
}
|
|
|
|
.feedback-btn .icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
font-size: var(--text-xl);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.feedback-btn.expected .icon {
|
|
background: var(--ok-muted);
|
|
color: var(--ok);
|
|
}
|
|
|
|
.feedback-btn.intrusion .icon {
|
|
background: var(--warn-muted);
|
|
color: var(--warn);
|
|
}
|
|
|
|
.feedback-btn.false-alarm .icon {
|
|
background: var(--alert-muted);
|
|
color: var(--alert);
|
|
}
|
|
|
|
.feedback-btn .label {
|
|
font-weight: 600;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.feedback-btn .desc {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.feedback-notes {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
#feedback-notes-input {
|
|
width: 100%;
|
|
min-height: 80px;
|
|
padding: var(--space-250);
|
|
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(--blue-9);
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.modal-btn {
|
|
padding: 10px var(--space-5);
|
|
border-radius: var(--radius-control);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.modal-btn.cancel {
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.modal-btn.cancel:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.modal-btn.submit {
|
|
background: var(--blue-9);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.modal-btn.submit:hover:not(:disabled) {
|
|
background: var(--blue-9);
|
|
}
|
|
|
|
.modal-btn.submit:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ── Learning Banner ──────────────────────────────────────────────────────────── */
|
|
|
|
#anomaly-learning-banner {
|
|
position: fixed;
|
|
top: var(--space-16);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 500;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--slate-5);
|
|
border-radius: var(--radius-card);
|
|
padding: var(--space-3) var(--space-4);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
box-shadow: 0 4px 16px var(--shadow);
|
|
animation: learning-appear 0.3s ease-out;
|
|
}
|
|
|
|
#anomaly-learning-banner.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes learning-appear {
|
|
from { transform: translateX(-50%) translateY(-10px); opacity: 0; }
|
|
to { transform: translateX(-50%) translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.learning-icon {
|
|
color: var(--blue-10);
|
|
font-size: var(--text-xl);
|
|
}
|
|
|
|
.learning-text {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.learning-progress-bar {
|
|
width: 120px;
|
|
height: 6px;
|
|
background: var(--bg-input);
|
|
border-radius: var(--radius-control);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.learning-progress {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--blue-10), var(--ok));
|
|
transition: width 0.5s ease-out;
|
|
border-radius: var(--radius-control);
|
|
}
|
|
|
|
.days-remaining {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
margin-left: var(--space-2);
|
|
}
|
|
|
|
/* ── Security Mode Indicator ───────────────────────────────────────────────────── */
|
|
|
|
#security-mode-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-150);
|
|
padding: var(--space-1) 10px;
|
|
border-radius: var(--radius-modal);
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--slate-5);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.security-status-indicator.mode-disarmed {
|
|
background: var(--bg-card);
|
|
border-color: var(--slate-5);
|
|
}
|
|
|
|
.security-status-indicator.mode-armed {
|
|
background: var(--alert-muted);
|
|
border-color: var(--alert);
|
|
color: var(--alert);
|
|
}
|
|
|
|
.security-status-indicator.mode-alert {
|
|
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 var(--alert-muted); }
|
|
50% { box-shadow: 0 0 20px var(--alert); }
|
|
}
|
|
|
|
.security-status-indicator.mode-learning {
|
|
background: var(--blue-border);
|
|
border-color: var(--blue-10);
|
|
color: var(--blue-10);
|
|
}
|
|
|
|
.security-status-indicator.mode-ready {
|
|
background: var(--ok-muted);
|
|
border-color: var(--ok);
|
|
color: var(--ok);
|
|
}
|
|
|
|
.security-icon {
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.security-text {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.security-toggle-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: var(--space-half);
|
|
margin-left: var(--space-1);
|
|
border-radius: var(--radius-control);
|
|
color: inherit;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.security-toggle-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ── Security Card Detail Area ─────────────────────────────────────────────────────── */
|
|
|
|
.security-status-indicator {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: var(--space-1) 10px;
|
|
border-radius: var(--radius-modal);
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--slate-5);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.security-card-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-150);
|
|
}
|
|
|
|
.security-card-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.security-history-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: var(--space-half);
|
|
border-radius: var(--radius-control);
|
|
color: inherit;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
line-height: 0;
|
|
}
|
|
|
|
.security-history-btn:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.security-learning-inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-150);
|
|
}
|
|
|
|
.security-learning-inline.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.security-progress-wrap {
|
|
width: 56px;
|
|
height: 4px;
|
|
background: var(--border-strong);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.security-progress-fill {
|
|
height: 100%;
|
|
background: currentColor;
|
|
border-radius: 2px;
|
|
transition: width 0.5s;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.security-progress-label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.security-last-anomaly {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 220px;
|
|
}
|
|
|
|
.security-last-anomaly.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Anomaly Timeline Panel ──────────────────────────────────────────────────────── */
|
|
|
|
.anomaly-timeline-panel {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -380px;
|
|
width: 360px;
|
|
height: 100vh;
|
|
z-index: 1800;
|
|
transition: right 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.anomaly-timeline-panel.open {
|
|
right: 0;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.anomaly-timeline-inner {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg-card);
|
|
border-left: 1px solid var(--slate-5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: -4px 0 20px var(--shadow);
|
|
}
|
|
|
|
.anomaly-timeline-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-3) var(--space-4);
|
|
border-bottom: 1px solid var(--slate-5);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.anomaly-timeline-title {
|
|
font-size: var(--text-sm);
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.anomaly-timeline-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.anomaly-timeline-view-all {
|
|
font-size: var(--text-xs);
|
|
color: var(--blue-10);
|
|
background: none;
|
|
border: 1px solid var(--blue-10);
|
|
border-radius: var(--radius-control);
|
|
padding: 2px var(--space-2);
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.anomaly-timeline-view-all:hover {
|
|
background: var(--blue-border);
|
|
}
|
|
|
|
.anomaly-timeline-close {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: var(--text-lg);
|
|
color: var(--text-muted);
|
|
padding: 0 var(--space-1);
|
|
line-height: 1;
|
|
}
|
|
|
|
.anomaly-timeline-close:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.anomaly-timeline-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
.anomaly-timeline-loading,
|
|
.anomaly-timeline-empty {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: var(--text-sm);
|
|
padding: var(--space-6) var(--space-4);
|
|
}
|
|
|
|
.anomaly-history-item--acked {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.anomaly-history-view-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: var(--space-half);
|
|
border-radius: var(--radius-control);
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
line-height: 0;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.anomaly-history-view-btn:hover {
|
|
color: var(--blue-10);
|
|
}
|
|
|
|
/* ── Alert Banner ──────────────────────────────────────────────────────────────────── */
|
|
|
|
#alert-banner {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1900;
|
|
background: var(--alert);
|
|
color: var(--text-on-accent);
|
|
padding: var(--space-4) var(--space-5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
box-shadow: 0 4px 16px var(--shadow);
|
|
animation: alert-slide-down 0.3s ease-out;
|
|
}
|
|
|
|
#alert-banner.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes alert-slide-down {
|
|
from { transform: translateY(-100%); }
|
|
to { transform: translateY(0); }
|
|
}
|
|
|
|
.alert-banner-icon {
|
|
font-size: var(--text-3xl);
|
|
}
|
|
|
|
.alert-banner-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.alert-banner-title {
|
|
font-size: var(--text-base);
|
|
font-weight: 700;
|
|
margin: var(--space-1);
|
|
}
|
|
|
|
.alert-banner-description {
|
|
font-size: var(--text-sm);
|
|
opacity: 0.95;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.alert-banner-meta {
|
|
font-size: var(--text-xs);
|
|
opacity: 0.85;
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.alert-banner-actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.alert-banner-btn {
|
|
padding: var(--space-2) var(--space-4);
|
|
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: var(--border-strong);
|
|
}
|
|
|
|
/* ── Security Dialog ────────────────────────────────────────────────────────────── */
|
|
|
|
.security-dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--overlay-strong);
|
|
backdrop-filter: blur(4px);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: dialog-fade-in 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes dialog-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.security-dialog-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--slate-5);
|
|
border-radius: var(--radius-modal);
|
|
padding: var(--space-6);
|
|
max-width: 440px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
color: var(--text-secondary);
|
|
animation: dialog-pop 0.3s ease-out;
|
|
}
|
|
|
|
.security-dialog-card.arm {
|
|
border-color: var(--alert);
|
|
}
|
|
|
|
.security-dialog-card.disarm {
|
|
border-color: var(--ok);
|
|
}
|
|
|
|
@keyframes dialog-pop {
|
|
from { transform: scale(0.9); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
.security-dialog-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-4);
|
|
padding-bottom: var(--space-3);
|
|
border-bottom: 1px solid var(--slate-5);
|
|
}
|
|
|
|
.security-dialog-header h2 {
|
|
margin: 0;
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.security-dialog-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: var(--text-base);
|
|
cursor: pointer;
|
|
padding: var(--space-1);
|
|
line-height: 1;
|
|
border-radius: var(--radius-control);
|
|
}
|
|
|
|
.security-dialog-close:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.security-dialog-content {
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
.security-dialog-prompt {
|
|
font-size: var(--text-sm);
|
|
line-height: var(--lh-body);
|
|
margin-bottom: var(--space-4);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.security-dialog-warning {
|
|
background: var(--warn-bg);
|
|
border: 1px solid var(--warn-border);
|
|
border-radius: var(--radius-control);
|
|
padding: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.security-dialog-warning p {
|
|
margin: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
color: var(--warn);
|
|
}
|
|
|
|
.security-dialog-warning p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.security-dialog-stats {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.stat-item {
|
|
background: var(--bg-input);
|
|
border-radius: var(--radius-control);
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
.stat-item-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.stat-label {
|
|
display: block;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-1);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.stat-value {
|
|
display: block;
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.security-dialog-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.security-dialog-btn {
|
|
padding: 10px var(--space-6);
|
|
border-radius: var(--radius-control);
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.security-dialog-btn.cancel {
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.security-dialog-btn.cancel:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.security-dialog-btn.arm {
|
|
background: var(--alert);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.security-dialog-btn.arm:hover {
|
|
background: var(--alert);
|
|
}
|
|
|
|
.security-dialog-btn.disarm {
|
|
background: var(--ok);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.security-dialog-btn.disarm:hover {
|
|
background: var(--ok);
|
|
}
|
|
|
|
/* ── Anomaly History ─────────────────────────────────────────────────────────────── */
|
|
|
|
.anomaly-history-item {
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--slate-5);
|
|
border-radius: var(--radius-control);
|
|
margin-bottom: var(--space-2);
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
}
|
|
|
|
.anomaly-history-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.anomaly-history-icon.unusual-hour {
|
|
background: var(--warn-muted);
|
|
color: var(--warn);
|
|
}
|
|
|
|
.anomaly-history-icon.unknown-ble {
|
|
background: var(--blue-muted);
|
|
color: var(--blue-9);
|
|
}
|
|
|
|
.anomaly-history-icon.motion-during-away {
|
|
background: var(--alert-muted);
|
|
color: var(--alert);
|
|
}
|
|
|
|
.anomaly-history-icon.unusual-dwell {
|
|
background: var(--alert-muted);
|
|
color: var(--alert);
|
|
}
|
|
|
|
.anomaly-history-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomaly-history-title {
|
|
font-weight: 600;
|
|
font-size: var(--text-sm);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.anomaly-history-time {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.anomaly-history-score {
|
|
font-size: var(--text-xs);
|
|
padding: var(--space-half) var(--space-150);
|
|
border-radius: var(--radius-control);
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.anomaly-history-score.high {
|
|
background: var(--alert-muted);
|
|
color: var(--alert);
|
|
}
|
|
|
|
.anomaly-history-score.medium {
|
|
background: var(--warn-muted);
|
|
color: var(--warn);
|
|
}
|
|
|
|
.anomaly-history-score.low {
|
|
background: var(--warn-muted);
|
|
color: var(--warn);
|
|
}
|
|
|
|
.anomaly-history-feedback {
|
|
font-size: var(--text-xs);
|
|
padding: var(--space-half) var(--space-150);
|
|
border-radius: var(--radius-control);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.anomaly-history-feedback.expected {
|
|
background: var(--ok-muted);
|
|
color: var(--ok);
|
|
}
|
|
|
|
.anomaly-history-feedback.intrusion {
|
|
background: var(--alert-muted);
|
|
color: var(--alert);
|
|
}
|
|
|
|
.anomaly-history-feedback.false-alarm {
|
|
background: var(--alert-muted);
|
|
color: var(--alert);
|
|
}
|
|
|
|
/* ── Zone Pulsing for Active Anomalies (3D View) ─────────────────────────────────── */
|
|
|
|
.anomaly-zone-pulse {
|
|
animation: zone-pulse-red 2s infinite;
|
|
}
|
|
|
|
@keyframes zone-pulse-red {
|
|
0%, 100% {
|
|
box-shadow: 0 0 10px var(--alert-border);
|
|
border-color: var(--alert-muted);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 30px var(--alert-muted);
|
|
border-color: var(--alert);
|
|
}
|
|
}
|
|
|
|
/* ── Responsive ─────────────────────────────────────────────────────────────────── */
|
|
|
|
@media (max-width: 600px) {
|
|
.anomaly-banner {
|
|
padding: var(--space-5);
|
|
margin: var(--space-3);
|
|
}
|
|
|
|
.anomaly-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.anomaly-btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-content {
|
|
margin: var(--space-3);
|
|
max-width: calc(100% - 24px);
|
|
}
|
|
|
|
.security-dialog-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.security-dialog-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.security-dialog-btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|