gru/gree-controller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.4.4

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-08-24 00:23:47 +02:00
parent 6e3075fae5
commit 10bc9aa099
21 changed files with 1110 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/styles.css
+52 -4
View File
@@ -218,9 +218,6 @@ legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
.menu-list button { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 9px; background: transparent; text-align: left; }
.menu-list button:last-child { border-bottom: 0; }
.auth-dialog { width: min(420px, calc(100% - 30px)); }
#toast { position: fixed; z-index: 100; right: 18px; bottom: 92px; max-width: min(380px, calc(100% - 36px)); transform: translateY(15px); opacity: 0; pointer-events: none; padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); transition: .2s ease; font-size: 13px; }
#toast.show { transform: translateY(0); opacity: 1; }
#toast.error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); }
@media (min-width: 900px) {
.bottom-nav { top: 92px; right: auto; bottom: auto; left: max(16px, calc((100vw - 1380px)/2)); grid-template-columns: 1fr; width: 90px; border: 1px solid var(--line); border-radius: 22px; padding: 9px; background: var(--surface); }
.bottom-nav button { padding: 10px 4px; }
@@ -347,7 +344,7 @@ legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
.automation-hint strong { display: block; margin-bottom: 5px; }
.automation-hint p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
/* Rich climate history (v0.4.2+) using the classic rounded UI. */
/* Rich climate history (v0.4.4) using the classic rounded UI. */
.history-chart-card { margin-top: 14px; }
.chart-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chart-title-row h3 { margin: 0 0 4px; font-size: 17px; }
@@ -371,3 +368,54 @@ legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
.chart-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
.chart-toolbar button { grid-column: 1 / -1; }
}
/* History navigation, custom chart composer and linkable sub-pages. */
.history-tabs { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 14px; padding: 3px; scrollbar-width: none; }
.history-tabs::-webkit-scrollbar { display: none; }
.history-tabs button { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 12px; font-weight: 700; }
.history-tabs button.active { color: var(--accent-text); border-color: var(--accent); background: var(--accent); }
.history-toolbar-panel { margin-bottom: 14px; }
.history-context-controls { display: flex; flex: 1 1 260px; min-width: min(100%, 220px); }
.history-context-controls label { width: 100%; }
.history-context-hint { align-self: center; color: var(--muted); font-size: 12px; line-height: 1.4; }
.history-charts { display: grid; gap: 14px; }
.history-custom-builder { display: none; margin-bottom: 14px; }
.history-custom-builder.active { display: block; }
.custom-chart-panel { display: grid; gap: 13px; }
.custom-chart-add, .custom-chart-save { display: flex; gap: 8px; align-items: center; }
.custom-chart-add select, .custom-chart-save input { flex: 1; }
.custom-series-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 34px; align-items: center; }
.custom-series-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-muted); color: var(--text-soft); font-size: 11px; }
.custom-series-chip i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--chip-color, var(--accent)); }
.custom-series-chip button { width: 23px; height: 23px; padding: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 16px; line-height: 1; }
.saved-chart-list { display: grid; gap: 7px; padding-top: 3px; border-top: 1px solid var(--line); }
.saved-chart-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.saved-chart-row > button:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-muted); text-align: left; }
.saved-chart-row strong, .saved-chart-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-chart-row small { color: var(--muted); }
.saved-chart-row > .danger { width: 42px; padding: 0; border: 1px solid var(--line); background: var(--surface-muted); }
/* Toast stack: quiet success/error feedback that matches light and dark themes. */
.toast-stack { position: fixed; z-index: 120; right: 18px; bottom: 92px; display: grid; gap: 9px; width: min(390px, calc(100vw - 36px)); pointer-events: none; }
.toast-item { position: relative; display: grid; grid-template-columns: 34px 1fr 28px; gap: 10px; align-items: center; overflow: hidden; padding: 12px 11px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(16px); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .2s ease, transform .2s ease; pointer-events: auto; }
.toast-item.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-item.leaving { opacity: 0; transform: translateX(18px) scale(.98); }
.toast-item.success { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
.toast-item.error { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); }
.toast-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 15px; font-weight: 900; }
.toast-item.error .toast-icon { color: var(--danger); background: var(--danger-soft); }
.toast-copy { min-width: 0; }
.toast-copy strong, .toast-copy span { display: block; }
.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-item.error .toast-progress { background: var(--danger); animation-duration: 5.2s; }
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@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); }
}
.history-chart-card canvas { width: 100%; min-width: 720px; }