rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact admin sidebar controls

Browse Source
This commit is contained in:
rajchales-monito
2026-07-24 13:46:50 +02:00
parent b936aede71
commit 8f5779133f
2 changed files with 79 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+68 -7
View File
@@ -69,21 +69,67 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
border-right: 1px solid var(--line);
background: var(--panel);
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr);
min-height: 0;
overflow: hidden;
}
.brand, .sitebar {
.brand {
height: var(--topbar-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--line);
}
.brand h1 { margin: 0; font-size: 20px; }
.brand button, .sitebar button { background: #edf3ef; color: var(--ink); }
.brand-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.brand button { background: #edf3ef; color: var(--ink); }
.icon-button {
width: 32px;
height: 32px;
padding: 0;
display: grid;
place-items: center;
}
.icon-button svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.logout-compact {
height: 32px;
padding: 0 10px;
font-size: 12px;
}
.online-dot-toggle {
width: 28px;
height: 32px;
display: grid;
place-items: center;
cursor: pointer;
}
.online-dot-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.online-dot-toggle span {
width: 11px;
height: 11px;
border-radius: 50%;
background: #c9d4ce;
box-shadow: 0 0 0 4px rgb(201 212 206 / 25%);
}
.online-dot-toggle input:checked + span {
background: #2f9e44;
box-shadow: 0 0 0 4px rgb(47 158 68 / 16%);
}
.switch { display: flex; align-items: center; gap: 8px; }
.switch input { width: auto; }
.setting-switch {
@@ -399,15 +445,30 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.visitor-detail-popover {
position: absolute;
z-index: 20;
top: calc(100% + 8px);
right: 0;
width: min(520px, calc(100vw - 420px));
top: calc(100% + 10px);
right: -8px;
width: min(520px, 64vw);
max-width: calc(100vw - 380px);
max-height: calc(100vh - 118px);
overflow: auto;
padding: 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: white;
box-shadow: 0 14px 32px rgb(0 0 0 / 13%);
}
.visitor-detail-popover:before {
position: absolute;
top: -6px;
right: 12px;
width: 10px;
height: 10px;
transform: rotate(45deg);
border-left: 1px solid var(--line);
border-top: 1px solid var(--line);
background: white;
content: "";
}
.visitor-detail-grid {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);