diff --git a/public/admin.css b/public/admin.css index d08bca5..0db5a3b 100644 --- a/public/admin.css +++ b/public/admin.css @@ -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); diff --git a/public/admin.html b/public/admin.html index eaf997f..a8fefd9 100644 --- a/public/admin.html +++ b/public/admin.html @@ -23,14 +23,18 @@