Redetzke/GHOSTWIRE
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Health card: public addresses up top, checks as tiles

Browse Source 
The public IPv4 and IPv6 addresses, with their uplink, lead the card.
Every other check is a tile with a plain-word status, the raw setting
and, when it fails, what is wrong. The header counts passing or failing
checks.
This commit is contained in:
Daniel Redetzke
2026-10-05 09:09:44 +03:00
parent 38a3804b8a
commit 74cbcfe15f
2 changed files with 86 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.css
+22 -4
View File
@@ -173,10 +173,28 @@ fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-d
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* checks */
.chk { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.chk:last-child { border-bottom: 0; }
.chk b { font-weight: 500; min-width: 160px; }
/* health: public addresses, then one tile per check */
.hchead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hchead > span { font-size: 13px; color: var(--ink-2); }
.hchead > span.bad { color: var(--bad-ink); font-weight: 500; }
.hcaddrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.hcaddr { background: var(--ground); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.hcaddr .l { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.hcaddr .v { margin-top: 4px; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.hcaddr .v.mono { font-size: 20px; }
.hcaddr .n { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--ink-2); }
.hcaddr.bad { background: #fdf6f5; box-shadow: inset 0 0 0 1px #e6b3b0; }
.hcaddr.bad .v { color: var(--bad-ink); }
.hctiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.hctile { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hctile .l { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.hctile .l > span:first-child { flex: 1; min-width: 0; }
.hctile .s { font-size: 15px; font-weight: 500; }
.hctile .r { font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.hctile .p { font-size: 12.5px; color: var(--bad-ink); overflow-wrap: anywhere; }
.hctile.bad { border-color: #e6b3b0; background: #fdf6f5; }
.hctile.bad .s { color: var(--bad-ink); }
@media (max-width: 640px) { .hctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* activity */
.ev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }