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

fix: polish dashboard view toggle styling
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-21 23:52:15 +02:00
parent 9572b6116a
commit 14505c2296
6 changed files with 60 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
style.css
View File

@@ -176,8 +176,8 @@ main {
top: 0;
z-index: 10;
display: grid;
grid-template-columns: minmax(220px, 340px) 1fr auto;
gap: 12px;
grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
gap: 10px 12px;
align-items: center;
padding: 12px 0;
backdrop-filter: blur(16px);
@@ -214,8 +214,7 @@ main {
box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
}
.segments,
.view-toggle {
.segments {
display: flex;
justify-content: flex-end;
gap: 6px;
@@ -223,13 +222,23 @@ main {
scrollbar-width: none;
}
.segments::-webkit-scrollbar,
.view-toggle::-webkit-scrollbar {
.view-toggle {
grid-column: 1 / -1;
justify-self: start;
display: inline-grid;
grid-template-columns: repeat(3, minmax(86px, auto));
gap: 3px;
padding: 4px;
background: rgba(17, 22, 36, 0.78);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.segments::-webkit-scrollbar {
display: none;
}
.segment,
.view-option {
.segment {
min-width: max-content;
height: 36px;
padding: 0 13px;
@@ -240,13 +249,39 @@ main {
cursor: pointer;
}
.segment.is-active,
.view-option.is-active {
.view-option {
min-width: 86px;
height: 30px;
padding: 0 12px;
color: var(--muted);
background: transparent;
border: 1px solid transparent;
border-radius: calc(var(--radius) - 2px);
cursor: pointer;
font-size: 0.82rem;
font-weight: 650;
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.segment.is-active {
color: #061014;
background: #67e8f9;
border-color: #67e8f9;
}
.view-option:hover,
.view-option:focus-visible {
color: #fff;
background: rgba(255, 255, 255, 0.04);
outline: none;
}
.view-option.is-active {
color: #07111a;
background: #67e8f9;
border-color: #67e8f9;
}
.section {
margin-top: 18px;
}
@@ -941,6 +976,15 @@ main {
justify-content: flex-start;
}
.view-toggle {
width: 100%;
grid-template-columns: repeat(3, 1fr);
}
.view-option {
min-width: 0;
}
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}