v0.6.8
This commit is contained in:
Mateusz Gruszczyński
+130
@@ -632,3 +632,133 @@ html[data-theme='light'] .simulation-metrics > div, html[data-theme='light'] .si
|
||||
.standalone-settings-form { max-width:1100px; }
|
||||
|
||||
.copy-settings-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:end}.notification-provider{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.log-row{display:grid;grid-template-columns:5.5rem 7rem minmax(9rem,auto) 1fr;gap:.75rem;align-items:center;border-left:4px solid transparent}.log-row.error{border-left-color:var(--danger,#d9544d)}.log-row.warn{border-left-color:#c98a21}.log-row.info{border-left-color:var(--accent,#4d9c7d)}.log-category{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}.category-device .log-category:before{content:'▣ '}.category-zone .log-category:before{content:'◎ '}.category-automation .log-category:before{content:'⚙ '}.category-integration .log-category:before{content:'↔ '}.category-settings .log-category:before{content:'☷ '}.category-system .log-category:before{content:'• '}@media(max-width:720px){.copy-settings-row,.notification-provider{grid-template-columns:1fr}.log-row{grid-template-columns:4.5rem 1fr}.log-row .kind,.log-row .message{grid-column:2}.logs-toolbar{align-items:stretch}}
|
||||
|
||||
/* Group controls and standalone simulator */
|
||||
[hidden] { display:none !important; }
|
||||
.dashboard-group-panel { display:grid; gap:14px; margin-bottom:18px; }
|
||||
.dashboard-group-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
|
||||
.dashboard-group-head h3 { margin:3px 0 5px; }
|
||||
.dashboard-group-head p { margin:0; color:var(--muted); line-height:1.45; }
|
||||
.group-quick-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:12px; }
|
||||
.group-card { display:grid; gap:13px; }
|
||||
.group-card.group-off { opacity:.78; }
|
||||
.group-state-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
|
||||
.group-state-summary > div { padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-muted); }
|
||||
.group-state-summary small,.group-control-block > small { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
|
||||
.group-state-summary strong { display:block; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.group-control-block { display:grid; gap:6px; }
|
||||
.group-button-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
|
||||
.group-button-row button,.group-mode-row button,.group-preset-row button { min-height:36px; }
|
||||
.group-zone-choices { display:grid; gap:7px; max-height:300px; overflow:auto; }
|
||||
.group-zone-choice { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-muted); }
|
||||
.group-zone-choice input { width:18px; min-height:18px; accent-color:var(--accent); }
|
||||
.group-zone-choice strong,.group-zone-choice small { display:block; }
|
||||
.group-zone-choice small { margin-top:3px; color:var(--muted); font-size:10px; }
|
||||
.simulation-page-head { align-items:flex-start; }
|
||||
.simulation-head-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
|
||||
.simulation-scope-toolbar { display:flex; align-items:end; gap:12px; margin-bottom:16px; padding:14px; }
|
||||
.simulation-scope-toolbar label { min-width:min(260px,100%); }
|
||||
body.simulation-standalone .topbar,body.simulation-standalone .bottom-nav { display:none !important; }
|
||||
body.simulation-standalone main { width:100%; max-width:none; margin:0; padding:18px; }
|
||||
body.simulation-standalone [data-view="simulation"] { min-height:calc(100vh - 36px); }
|
||||
:fullscreen main { width:100%; max-width:none; padding:18px; }
|
||||
:fullscreen .topbar,:fullscreen .bottom-nav { display:none !important; }
|
||||
@media (max-width:720px) {
|
||||
.dashboard-group-head,.simulation-page-head { align-items:stretch; flex-direction:column; }
|
||||
.simulation-head-actions { justify-content:stretch; }
|
||||
.simulation-head-actions button { flex:1 1 180px; }
|
||||
.simulation-scope-toolbar { align-items:stretch; flex-direction:column; }
|
||||
.group-state-summary { grid-template-columns:1fr; }
|
||||
}
|
||||
|
||||
/* Dashboard hierarchy: compact global controls -> wrapped groups -> on-demand details. */
|
||||
[data-view="dashboard"] .hero { min-height:164px; padding:24px 28px; border-radius:24px; }
|
||||
[data-view="dashboard"] .hero h1 { margin-bottom:6px; }
|
||||
[data-view="dashboard"] .hero-temp { font-size:clamp(44px,8vw,68px); }
|
||||
[data-view="dashboard"] .metrics { gap:10px; margin:10px 0 20px; }
|
||||
[data-view="dashboard"] .metric { padding:14px 16px; border-radius:15px; }
|
||||
[data-view="dashboard"] .metric span { margin-bottom:5px; }
|
||||
[data-view="dashboard"] .metric strong { font-size:21px; }
|
||||
.dashboard-global-panel { display:grid; gap:14px; padding:16px 18px; margin:0 0 20px; }
|
||||
.dashboard-global-power { display:flex; align-items:center; justify-content:space-between; gap:16px; }
|
||||
.dashboard-global-power h3 { margin:2px 0 3px; font-size:18px; }
|
||||
.dashboard-global-power p { margin:0; max-width:680px; color:var(--muted); font-size:11px; line-height:1.4; }
|
||||
.dashboard-global-divider { height:1px; background:var(--line); }
|
||||
.dashboard-house-climate { margin:0; gap:12px; }
|
||||
.dashboard-house-climate .house-climate-head h3 { font-size:18px; }
|
||||
.dashboard-house-climate .house-climate-head p { font-size:11px; }
|
||||
.dashboard-house-climate .outside-pill { padding:8px 11px; }
|
||||
.dashboard-house-climate .house-mode-row button { min-height:38px; padding:8px 10px; }
|
||||
.dashboard-house-climate .house-preset-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; overflow:visible; padding:0; }
|
||||
.dashboard-house-climate .house-preset-row button { min-width:0; min-height:36px; padding:7px 8px; font-size:11px; }
|
||||
.dashboard-primary-section { margin-bottom:18px; }
|
||||
.dashboard-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 10px; }
|
||||
.dashboard-section-head h2 { margin:3px 0 4px; font-size:21px; }
|
||||
.dashboard-section-head p { margin:0; max-width:720px; color:var(--muted); font-size:11px; line-height:1.4; }
|
||||
.dashboard-section-actions { display:flex; align-items:center; flex:0 0 auto; gap:7px; }
|
||||
.dashboard-section-actions .badge { min-width:28px; justify-content:center; }
|
||||
.dashboard-section-actions button { min-height:36px; padding:8px 11px; }
|
||||
/* Groups wrap into rows. Horizontal scrolling is intentionally disabled on the dashboard. */
|
||||
.dashboard-group-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:10px; overflow:visible; padding:0; }
|
||||
.dashboard-group-strip .group-card { min-width:0; padding:13px; gap:8px; }
|
||||
.dashboard-group-strip .list-card-head { gap:9px; }
|
||||
.dashboard-group-strip .list-card-head h3 { font-size:16px; }
|
||||
.dashboard-group-strip .list-card-head p { display:-webkit-box; overflow:hidden; max-width:none; font-size:11px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; }
|
||||
.dashboard-group-strip .badge { padding:4px 7px; font-size:10px; }
|
||||
.dashboard-group-strip .group-control-block { gap:4px; }
|
||||
.dashboard-group-strip .group-control-block > small { margin-bottom:1px; font-size:9px; }
|
||||
.dashboard-group-strip .group-button-row { gap:5px; }
|
||||
.dashboard-group-strip .group-mode-row,
|
||||
.dashboard-group-strip .group-preset-row { display:grid; gap:5px; overflow:visible; padding:0; }
|
||||
.dashboard-group-strip .group-mode-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
|
||||
.dashboard-group-strip .group-preset-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
|
||||
.dashboard-group-strip .group-button-row button,
|
||||
.dashboard-group-strip .group-mode-row button,
|
||||
.dashboard-group-strip .group-preset-row button { min-width:0; min-height:32px; padding:6px 5px; font-size:10px; line-height:1.15; }
|
||||
.dashboard-secondary-stack { display:grid; gap:8px; margin-top:4px; }
|
||||
.dashboard-disclosure { overflow:hidden; padding:0; }
|
||||
.dashboard-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; cursor:pointer; list-style:none; user-select:none; }
|
||||
.dashboard-disclosure > summary::-webkit-details-marker { display:none; }
|
||||
.dashboard-disclosure > summary h3 { margin:2px 0 0; font-size:16px; }
|
||||
.dashboard-disclosure > summary .eyebrow { font-size:9px; }
|
||||
.dashboard-summary-side { display:flex; align-items:center; gap:10px; }
|
||||
.dashboard-summary-side .badge { min-width:28px; justify-content:center; }
|
||||
.dashboard-disclosure-chevron { display:inline-block; color:var(--muted); font-size:18px; line-height:1; transition:transform .18s ease; }
|
||||
.dashboard-disclosure[open] > summary { border-bottom:1px solid var(--line); }
|
||||
.dashboard-disclosure[open] .dashboard-disclosure-chevron { transform:rotate(180deg); }
|
||||
.dashboard-disclosure-body { padding:12px; }
|
||||
.dashboard-disclosure-body .automation-plan-grid,
|
||||
.dashboard-disclosure-body .dashboard-zones { margin-bottom:0; }
|
||||
.dashboard-disclosure-body .device-grid,
|
||||
.dashboard-disclosure-body .list-grid,
|
||||
.dashboard-disclosure-body .automation-plan-grid { gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
|
||||
#dashboardZones .list-card, #dashboardDevices .device-card { padding:15px; }
|
||||
#dashboardZones .preset-row,
|
||||
#dashboardZones .mode-row,
|
||||
#dashboardDevices .mode-row,
|
||||
#dashboardDevices .fan-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:5px; overflow:visible; padding:2px 0 6px; }
|
||||
#dashboardZones .preset-row button,
|
||||
#dashboardZones .mode-row button,
|
||||
#dashboardDevices .mode-row button,
|
||||
#dashboardDevices .fan-row button { min-width:0; min-height:32px; padding:6px 7px; font-size:10px; }
|
||||
#dashboardDevices .temperature-control { gap:16px; padding:18px 0 14px; }
|
||||
#dashboardDevices .target-temp { min-width:92px; font-size:40px; }
|
||||
#dashboardDevices .current-line { margin:-6px 0 13px; }
|
||||
#dashboardZones .thermostat-main { margin:12px 0 8px; }
|
||||
|
||||
@media (max-width: 700px) {
|
||||
[data-view="dashboard"] .hero { min-height:145px; padding:20px; }
|
||||
[data-view="dashboard"] .metrics { margin-bottom:16px; }
|
||||
[data-view="dashboard"] .metric { padding:12px; }
|
||||
.dashboard-global-panel { padding:14px; margin-bottom:18px; }
|
||||
.dashboard-global-power { align-items:stretch; flex-direction:column; }
|
||||
.dashboard-global-power .house-power-actions { display:grid; grid-template-columns:1fr 1fr; }
|
||||
.dashboard-house-climate .house-preset-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
.dashboard-section-head { align-items:stretch; flex-direction:column; gap:10px; }
|
||||
.dashboard-section-actions { justify-content:space-between; }
|
||||
.dashboard-section-actions button { flex:1; }
|
||||
.dashboard-group-strip { grid-template-columns:1fr; }
|
||||
.dashboard-group-strip .group-preset-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
.dashboard-disclosure > summary { padding:12px 13px; }
|
||||
.dashboard-disclosure-body { padding:10px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user