steve/restic-manager
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity

ui: alerts list page + alert row partial + nav badge

Browse Source
This commit is contained in:
Steve Cliff
2026-05-04 20:15:01 +01:00
parent 5d8350132c
commit 35dee98cf9
8 changed files with 320 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/styles/input.css
+33
View File
@@ -278,6 +278,39 @@
}
.snap-row.head:hover { background: transparent; }
/* ---------- alert rows (/alerts list) ---------- */
.alert-row {
display: grid; align-items: center;
grid-template-columns: 18px 110px 130px 1fr 130px 110px 180px;
column-gap: 16px;
padding: 12px 16px; font-size: 13px;
border-bottom: 1px solid var(--line-soft);
border-left: 3px solid transparent;
transition: background 100ms ease;
}
.alert-row:hover { background: var(--panel-hi); }
.alert-row:last-child { border-bottom: 0; }
.alert-row.head {
cursor: default; padding-top: 9px; padding-bottom: 9px;
font-size: 11px; color: var(--ink-fade);
text-transform: uppercase; letter-spacing: 0.08em;
border-left-color: transparent;
}
.alert-row.head:hover { background: transparent; }
.alert-row.severity-warn { border-left-color: color-mix(in oklch, var(--warn), transparent 50%); }
.alert-row.severity-critical { border-left-color: color-mix(in oklch, var(--bad), transparent 30%); }
.alert-row.resolved { opacity: 0.55; }
/* status-dot aliases for alert severity */
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn), transparent 80%); }
.dot-critical { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in oklch, var(--bad), transparent 80%); }
.dot-resolved { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok), transparent 80%); }
/* tag colour variants for alerts */
.tag-warn { color: var(--warn); border-color: color-mix(in oklch, var(--warn), transparent 60%); background: color-mix(in oklch, var(--warn), transparent 92%); }
.tag-critical { color: var(--bad); border-color: color-mix(in oklch, var(--bad), transparent 60%); background: color-mix(in oklch, var(--bad), transparent 92%); }
.tag-info { color: var(--ink-mid); }
/* ---------- schedule rows (Schedules tab) ---------- */
.schd-row {
display: grid; align-items: center;