This commit is contained in:
Mateusz Gruszczyński
2026-08-24 14:05:43 +02:00
parent eb02f66056
commit 04fc91b9f4
30 changed files with 2257 additions and 175 deletions
+43 -1
View File
@@ -158,6 +158,10 @@ h3 { margin-bottom: 10px; }
.list-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 99px; color: var(--muted); background: var(--surface-muted); font-size: 11px; }
.badge.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.zone-enable-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--surface-muted); font-size: 11px; }
.zone-enable-toggle.active { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.zone-enable-toggle span { font-size: 12px; font-weight: 900; }
.zone-thermostat.zone-disabled .thermostat-main, .zone-thermostat.zone-disabled .preset-row, .zone-thermostat.zone-disabled .zone-mode-row, .zone-thermostat.zone-disabled .zone-state-line { opacity: .5; }
.card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 16px; }
.card-stat { padding: 10px; border-radius: 12px; background: var(--surface-muted); text-align: center; }
.card-stat small, .card-stat strong { display: block; }
@@ -184,6 +188,10 @@ input:focus, select:focus { border-color: var(--accent); outline: 2px solid colo
.check { display: flex; grid-auto-flow: column; justify-content: start; align-items: center; gap: 9px; min-height: 44px; }
.check input { width: 19px; min-height: 19px; accent-color: var(--accent); }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 6px; }
.influx-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-muted); }
.influx-fields[hidden] { display: none; }
.influx-fields label:last-child:nth-child(odd) { grid-column: 1/-1; }
.backup-actions { align-items: center; }
.system-panel { margin-top: 14px; color: var(--muted); line-height: 1.7; }
.system-panel strong { color: var(--text); }
.log-list { display: grid; gap: 2px; padding: 8px; }
@@ -296,6 +304,23 @@ legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
.outside-pill small, .outside-pill strong { display: block; }
.outside-pill small { color: var(--muted); font-size: 10px; }
.outside-pill strong { margin-top: 3px; font-size: 18px; }
.automation-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 12px; margin-bottom: 34px; }
.plan-card { display: grid; align-content: start; gap: 11px; min-height: 190px; padding: 17px; }
.plan-card.disabled { opacity: .65; }
.plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plan-card-head h3 { margin: 2px 0 0; font-size: 19px; }
.plan-card > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.plan-temp { display: flex; align-items: baseline; gap: 9px; }
.plan-temp > span { color: var(--muted); font-size: 20px; }
.plan-temp > b { color: var(--muted); font-weight: 500; }
.plan-temp > strong { font-size: 28px; letter-spacing: -.04em; }
.plan-temp small { margin-left: 2px; color: var(--muted); font-size: 11px; }
.plan-events { display: grid; gap: 6px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; }
.plan-events li { display: grid; grid-template-columns: 82px 1fr; gap: 8px; color: var(--text-soft); font-size: 11px; line-height: 1.35; }
.plan-events time { color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-events .muted { display: block; color: var(--muted); }
.plan-house { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.plan-loading { grid-column: 1/-1; padding: 18px; color: var(--muted); }
.house-mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.house-mode-row button { min-height: 44px; color: var(--muted); background: var(--surface-muted); }
.house-mode-row button.active { color: var(--accent-text); background: var(--accent); font-weight: 800; }
@@ -409,13 +434,30 @@ legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
.toast-copy strong { margin-bottom: 2px; font-size: 12px; }
.toast-copy span { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.35; }
.toast-close { width: 28px; height: 28px; padding: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 19px; }
.toast-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--accent); transform-origin: left; animation: toast-progress 3.6s linear forwards; }
.toast-progress { position: absolute; right: 11px; bottom: 3px; left: 11px; height: 2px; border-radius: 99px; background: var(--accent); transform-origin: left; animation: toast-progress 3.6s linear forwards; }
.toast-item.error .toast-progress { background: var(--danger); animation-duration: 5.2s; }
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.debug-overlay { position: fixed; z-index: 110; right: 18px; bottom: 92px; width: min(680px, calc(100vw - 36px)); max-height: min(46vh, 440px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 18px 60px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.debug-overlay[hidden] { display: none; }
.debug-overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.debug-overlay-head > div { display: grid; gap: 2px; }
.debug-overlay-head strong { font-size: 12px; }
.debug-overlay-head small { color: var(--muted); font-size: 10px; }
.debug-overlay-head button { padding: 6px 9px; color: var(--muted); background: var(--surface-muted); font-size: 10px; }
.debug-overlay-lines { max-height: min(38vh, 360px); overflow: auto; padding: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.debug-line { display: grid; grid-template-columns: 70px 46px 1fr; gap: 8px; padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); font-size: 10px; line-height: 1.35; }
.debug-line time, .debug-line b { color: var(--muted); font-weight: 600; }
.debug-line span { overflow-wrap: anywhere; white-space: pre-wrap; }
.debug-empty { padding: 18px; color: var(--muted); text-align: center; font-size: 11px; }
@media (max-width: 620px) {
.custom-chart-add, .custom-chart-save { align-items: stretch; flex-direction: column; }
.toast-stack { right: 12px; bottom: 88px; width: calc(100vw - 24px); }
.debug-overlay { right: 12px; bottom: 88px; width: calc(100vw - 24px); }
.debug-line { grid-template-columns: 58px 38px 1fr; }
.influx-fields { grid-template-columns: 1fr; }
.influx-fields label:last-child:nth-child(odd) { grid-column: auto; }
}
.history-chart-card canvas { width: 100%; min-width: 720px; }