This commit is contained in:
Mateusz Gruszczyński
2026-08-29 22:07:54 +02:00
parent 930cb7b1e1
commit 2383526a83
16 changed files with 296 additions and 79 deletions
+32 -3
View File
@@ -82,14 +82,15 @@ body { margin: 0; min-height: 100vh; color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; padding: 12px max(18px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--nav-bg) 94%, transparent); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 1rem; min-height: 72px; padding: 12px max(18px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--nav-bg) 94%, transparent); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; justify-self:start; min-width: 0; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.brand.large { margin-bottom: 1rem; }
.brand.large strong { font-size: 21px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; justify-self:end; gap: 7px; }
.toolbar-runtime-status { justify-self:center; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--text-soft); background:var(--surface-muted); font-size:11px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.toolbar-select { width: auto; min-width: 58px; min-height: 40px; padding: 7px 28px 7px 10px; border-radius: 11px; }
.theme-select { min-width: 94px; }
button { border: 0; border-radius: 13px; padding: 11px 15px; color: var(--text); background: var(--surface-2); transition: transform .15s ease, background .15s ease, opacity .15s ease; }
@@ -122,6 +123,7 @@ h3 { margin-bottom: 10px; }
.metric span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.metric strong { font-size: 24px; letter-spacing: -.03em; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 8px 0 18px; }
.section-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.device-grid, .list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.device-card, .panel, .list-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.device-card { overflow: hidden; padding: 20px; }
@@ -829,6 +831,33 @@ body.simulation-standalone [data-view="simulation"] { min-height:calc(100vh - 36
.temporary-active-summary .danger { width:100%; white-space:normal; }
}
/* Dashboard sections: horizontal tabs, one vertically scrollable panel at a time. */
.dashboard-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 12px; padding:6px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
.dashboard-tabs button { min-width:0; min-height:40px; padding:8px 10px; border:1px solid transparent; border-radius:12px; color:var(--muted); background:transparent; font-size:12px; font-weight:750; }
.dashboard-tabs button.active { border-color:var(--accent-border); color:var(--accent); background:var(--accent-soft); }
.dashboard-tab-panel[hidden] { display:none !important; }
.dashboard-tab-panel.active { display:block; animation:reveal .18s ease; }
.dashboard-section-panel { margin-bottom:18px; }
.dashboard-section-head.compact-head { align-items:center; margin-bottom:12px; }
.dashboard-section-head.compact-head h2 { font-size:19px; }
.dashboard-section-panel > .device-grid,
.dashboard-section-panel > .list-grid,
.dashboard-section-panel > .automation-plan-grid { margin-bottom:0; }
.notification-alert-types { display:grid; gap:10px; }
.notification-alert-types > .field-note { margin:0; }
.notification-alert-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; }
.notification-alert-grid .check { min-height:36px; }
@media (max-width:700px) {
.topbar { gap:7px; padding-inline:10px; }
.toolbar-runtime-status { padding:6px 8px; font-size:10px; }
.section-heading { align-items:stretch; flex-direction:column; }
.section-heading-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
.dashboard-tabs { gap:5px; padding:5px; }
.dashboard-tabs button { min-height:42px; padding:6px 5px; font-size:10px; line-height:1.15; }
.notification-alert-grid { grid-template-columns:1fr; }
}
/* 0.6.9 dashboard density and fit fixes */
[data-view="dashboard"] .dashboard-summary-card {
min-height:0;