MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: turn status items into mini clickable cards with pill-shaped status LEDs
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-21 18:13:21 +02:00
parent 4cb0e89e92
commit 995a397b2e
3 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
style.css
View File

@@ -915,23 +915,36 @@ main {
========================================================================== */
.services-status-board {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px 14px;
margin-top: 8px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px 12px;
margin-top: 10px;
padding: 2px 0;
}
.status-board-item {
display: flex;
flex-direction: column;
gap: 5px;
cursor: help;
gap: 8px;
padding: 10px 12px;
background: rgba(17, 22, 36, 0.6);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: inherit;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
cursor: pointer;
}
.status-board-item:hover {
background: rgba(23, 29, 45, 0.85);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.status-board-item h4 {
margin: 0;
font-size: 0.78rem;
font-weight: 500;
font-size: 0.82rem;
font-weight: 600;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
@@ -940,14 +953,14 @@ main {
}
.status-board-item:hover h4 {
color: var(--text);
color: #fff;
}
.status-board-item-bar {
height: 4px;
height: 6px;
width: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
border-radius: 999px;
overflow: hidden;
}
@@ -973,8 +986,13 @@ main {
@media (max-width: 620px) {
.services-status-board {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px 10px;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 8px 8px;
}
.status-board-item {
padding: 8px 10px;
gap: 6px;
}
}