diff --git a/dashboard/style.css b/dashboard/style.css deleted file mode 100644 index 989d57e..0000000 --- a/dashboard/style.css +++ /dev/null @@ -1,472 +0,0 @@ -/* ========================================================================== - SIEM Threat Console — stylesheet - Visual identity: a night-ops monitoring console. Deep indigo-black field, - a hairline signal grid, and severity colour used as literal information - (red/orange/yellow/blue map 1:1 to critical/high/medium/low everywhere). - ========================================================================== */ - -@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); - -:root { - --bg: #080B10; - --bg-grid: #0D121A; - --panel: #10161F; - --panel-raised: #141C27; - --border: #212D3D; - --border-soft: #1A2432; - --text: #E7EDF4; - --text-dim: #8592A3; - --text-faint: #4E5A6B; - - --critical: #FF3B4E; - --critical-dim: #4A1620; - --high: #FF8C42; - --high-dim: #45280F; - --medium: #FFD23F; - --medium-dim: #453B10; - --low: #3FA7FF; - --low-dim: #10293F; - --ok: #35D48A; - - --font-display: 'JetBrains Mono', monospace; - --font-body: 'Inter', sans-serif; - --font-mono: 'JetBrains Mono', monospace; - - --radius: 6px; -} - -* { box-sizing: border-box; } - -html, body { - margin: 0; - padding: 0; - background: var(--bg); - color: var(--text); - font-family: var(--font-body); - -webkit-font-smoothing: antialiased; -} - -body { - background-image: - linear-gradient(var(--bg-grid) 1px, transparent 1px), - linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); - background-size: 34px 34px; - min-height: 100vh; -} - -::selection { background: var(--critical); color: #fff; } - -a { color: var(--low); } - -/* ---------- layout shell ---------- */ - -.console { - max-width: 1320px; - margin: 0 auto; - padding: 22px 24px 60px; -} - -/* ---------- header ---------- */ - -.console-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 24px; - padding-bottom: 18px; - border-bottom: 1px solid var(--border); - margin-bottom: 22px; - flex-wrap: wrap; -} - -.brand { - display: flex; - align-items: center; - gap: 14px; -} - -.brand-mark { - width: 40px; - height: 40px; - border-radius: 8px; - border: 1px solid var(--border); - background: var(--panel-raised); - display: flex; - align-items: center; - justify-content: center; - position: relative; - flex: none; -} - -.brand-mark svg { width: 22px; height: 22px; } - -.brand-text .eyebrow { - font-family: var(--font-mono); - font-size: 11px; - letter-spacing: 0.16em; - text-transform: uppercase; - color: var(--text-faint); - margin: 0 0 2px; -} - -.brand-text h1 { - margin: 0; - font-family: var(--font-display); - font-size: 20px; - font-weight: 600; - letter-spacing: 0.01em; -} - -.brand-text h1 .slash { color: var(--text-faint); font-weight: 400; margin: 0 6px; } - -.header-status { - display: flex; - align-items: center; - gap: 22px; - font-family: var(--font-mono); - font-size: 12px; - color: var(--text-dim); -} - -.status-item { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } -.status-item .value { color: var(--text); font-size: 13px; } - -.live-dot { - display: inline-flex; - align-items: center; - gap: 7px; - color: var(--ok); - font-weight: 600; -} -.live-dot::before { - content: ""; - width: 7px; - height: 7px; - border-radius: 50%; - background: var(--ok); - box-shadow: 0 0 0 0 rgba(53, 212, 138, 0.6); - animation: pulse 1.8s infinite; -} -@keyframes pulse { - 0% { box-shadow: 0 0 0 0 rgba(53, 212, 138, 0.55); } - 70% { box-shadow: 0 0 0 7px rgba(53, 212, 138, 0); } - 100% { box-shadow: 0 0 0 0 rgba(53, 212, 138, 0); } -} - -.btn { - font-family: var(--font-mono); - font-size: 12px; - color: var(--text); - background: var(--panel-raised); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 8px 14px; - cursor: pointer; - transition: border-color .15s ease, transform .1s ease; -} -.btn:hover { border-color: var(--low); color: var(--low); } -.btn:active { transform: translateY(1px); } - -/* ---------- stat cards ---------- */ - -.stat-grid { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: 12px; - margin-bottom: 22px; -} - -.stat-card { - background: var(--panel); - border: 1px solid var(--border); - border-top: 2px solid var(--border-soft); - border-radius: var(--radius); - padding: 14px 16px; - position: relative; - overflow: hidden; -} -.stat-card.crit { border-top-color: var(--critical); } -.stat-card.high { border-top-color: var(--high); } -.stat-card.med { border-top-color: var(--medium); } -.stat-card.low { border-top-color: var(--low); } -.stat-card.neutral { border-top-color: var(--text-faint); } - -.stat-card .label { - font-family: var(--font-mono); - font-size: 10.5px; - letter-spacing: 0.09em; - text-transform: uppercase; - color: var(--text-dim); - margin: 0 0 8px; -} -.stat-card .num { - font-family: var(--font-display); - font-size: 28px; - font-weight: 700; - line-height: 1; -} -.stat-card.crit .num { color: var(--critical); } -.stat-card.high .num { color: var(--high); } -.stat-card.med .num { color: var(--medium); } -.stat-card.low .num { color: var(--low); } - -/* ---------- panel grid ---------- */ - -.panel-row { - display: grid; - grid-template-columns: 1.1fr 1.4fr; - gap: 14px; - margin-bottom: 14px; - align-items: stretch; -} - -.panel { - background: var(--panel); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 16px 18px 18px; - display: flex; - flex-direction: column; - min-width: 0; -} - -.panel-title { - display: flex; - align-items: baseline; - justify-content: space-between; - margin-bottom: 12px; -} -.panel-title h2 { - font-family: var(--font-mono); - font-size: 12.5px; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--text-dim); - margin: 0; - font-weight: 600; -} -.panel-title .hint { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); } - -/* ---------- radar ---------- */ - -.radar-sweep { - transform-origin: 150px 150px; - animation: radar-spin 6s linear infinite; -} -@keyframes radar-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} -.radar-ping { - animation: radar-ping 1.8s ease-out infinite; - transform-origin: center; -} -@keyframes radar-ping { - 0% { r: 4.5; opacity: 0.9; } - 100% { r: 13; opacity: 0; } -} - -.radar-wrap { display: flex; align-items: center; justify-content: center; padding: 6px 0 2px; } -.radar-legend { - display: flex; gap: 14px; justify-content: center; margin-top: 8px; - font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); -} -.radar-legend span { display: inline-flex; align-items: center; gap: 5px; } -.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } - -/* ---------- severity meter ---------- */ - -.sev-meter { margin-top: auto; } -.sev-meter-bar { - display: flex; - height: 22px; - border-radius: 4px; - overflow: hidden; - border: 1px solid var(--border-soft); -} -.sev-meter-bar .seg { transition: flex-grow .4s ease; } -.sev-meter-bar .seg.crit { background: var(--critical); } -.sev-meter-bar .seg.high { background: var(--high); } -.sev-meter-bar .seg.med { background: var(--medium); } -.sev-meter-bar .seg.low { background: var(--low); } -.sev-meter-bar .seg.none { background: var(--border-soft); flex-grow: 1; } - -.sev-meter-labels { - display: flex; - justify-content: space-between; - margin-top: 8px; - font-family: var(--font-mono); - font-size: 11px; - color: var(--text-dim); -} -.sev-meter-labels span { display: flex; align-items: center; gap: 6px; } - -/* ---------- top IP list ---------- */ - -.ip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } -.ip-row { - display: grid; - grid-template-columns: 22px 130px 1fr 46px; - align-items: center; - gap: 10px; - font-family: var(--font-mono); - font-size: 12px; -} -.ip-rank { color: var(--text-faint); text-align: right; } -.ip-addr { color: var(--text); font-weight: 600; } -.ip-bar-track { height: 8px; background: var(--border-soft); border-radius: 4px; overflow: hidden; } -.ip-bar-fill { height: 100%; border-radius: 4px; } -.ip-score { text-align: right; color: var(--text-dim); } - -/* ---------- filter bar ---------- */ - -.filter-bar { - display: flex; - gap: 10px; - flex-wrap: wrap; - margin-bottom: 14px; -} -.filter-bar input[type="text"], -.filter-bar select { - background: var(--panel-raised); - border: 1px solid var(--border); - color: var(--text); - font-family: var(--font-mono); - font-size: 12.5px; - border-radius: var(--radius); - padding: 9px 12px; -} -.filter-bar input[type="text"] { flex: 1; min-width: 200px; } -.filter-bar input::placeholder { color: var(--text-faint); } -.filter-bar select { cursor: pointer; } -.filter-bar input:focus, .filter-bar select:focus, -button:focus-visible, .btn:focus-visible { - outline: 2px solid var(--low); - outline-offset: 1px; -} - -/* ---------- alerts table ---------- */ - -.alerts-panel { padding: 16px 0 4px; } -.alerts-panel .panel-title { padding: 0 18px; } -.table-scroll { overflow-x: auto; } - -table.alerts { - width: 100%; - border-collapse: collapse; - font-size: 12.5px; -} -table.alerts th { - text-align: left; - font-family: var(--font-mono); - font-size: 10.5px; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-faint); - padding: 8px 10px; - border-bottom: 1px solid var(--border); - white-space: nowrap; - position: sticky; - top: 0; - background: var(--panel); -} -table.alerts td { - padding: 10px 10px; - border-bottom: 1px solid var(--border-soft); - vertical-align: top; -} -table.alerts tbody tr { cursor: pointer; transition: background .12s ease; } -table.alerts tbody tr:hover { background: var(--panel-raised); } -table.alerts tbody tr.expanded { background: var(--panel-raised); } - -td.ts, td.ip { font-family: var(--font-mono); color: var(--text-dim); white-space: nowrap; } -td.ip { color: var(--text); } -td.endpoint { color: var(--text-dim); white-space: nowrap; } -td.desc { color: var(--text); line-height: 1.4; } - -.badge { - display: inline-block; - font-family: var(--font-mono); - font-size: 10.5px; - font-weight: 700; - letter-spacing: 0.04em; - padding: 3px 8px; - border-radius: 3px; - text-transform: uppercase; - white-space: nowrap; -} -.badge.critical { background: var(--critical-dim); color: var(--critical); } -.badge.high { background: var(--high-dim); color: var(--high); } -.badge.medium { background: var(--medium-dim); color: var(--medium); } -.badge.low { background: var(--low-dim); color: var(--low); } - -.type-tag { - font-family: var(--font-mono); - font-size: 10.5px; - color: var(--text-dim); - background: var(--panel-raised); - border: 1px solid var(--border-soft); - border-radius: 3px; - padding: 2px 6px; - white-space: nowrap; -} - -.evidence-row td { - padding: 0 10px 14px 10px; - border-bottom: 1px solid var(--border-soft); -} -.evidence-box { - background: var(--bg); - border: 1px solid var(--border-soft); - border-left: 3px solid var(--low); - border-radius: 4px; - padding: 10px 12px; - font-family: var(--font-mono); - font-size: 11.5px; - color: var(--text-dim); - white-space: pre-wrap; - word-break: break-all; - max-height: 160px; - overflow-y: auto; -} - -.empty-row td { - text-align: center; - color: var(--text-faint); - font-family: var(--font-mono); - padding: 36px 0; -} - -/* ---------- footer ---------- */ - -.console-footer { - margin-top: 24px; - padding-top: 14px; - border-top: 1px solid var(--border); - display: flex; - justify-content: space-between; - align-items: center; - font-family: var(--font-mono); - font-size: 11px; - color: var(--text-faint); - flex-wrap: wrap; - gap: 8px; -} - -/* ---------- responsive ---------- */ - -@media (max-width: 980px) { - .panel-row { grid-template-columns: 1fr; } - .stat-grid { grid-template-columns: repeat(3, 1fr); } -} - -@media (max-width: 620px) { - .stat-grid { grid-template-columns: repeat(2, 1fr); } - .header-status { display: none; } - .ip-row { grid-template-columns: 18px 96px 1fr 40px; } -} - -@media (prefers-reduced-motion: reduce) { - .live-dot::before { animation: none; } - * { transition: none !important; animation-duration: 0.001s !important; } -}