v0.12.1
This commit is contained in:
Mateusz Gruszczyński
+20
-14
@@ -270,10 +270,10 @@
|
||||
</select></label><label><span data-i18n="simulation.show">Show</span><select
|
||||
id="simulationTarget"></select></label></div>
|
||||
<div class="simulation-summary-grid" id="simulationSummary"></div>
|
||||
<div class="panel simulation-flow-shell">
|
||||
<div class="simulation-flow-head">
|
||||
<section class="panel simulation-section-panel" aria-labelledby="simulationFlowTitle">
|
||||
<div class="simulation-panel-head">
|
||||
<div><span class="eyebrow" data-i18n="simulation.flowEyebrow">Live flow</span>
|
||||
<h2 data-i18n="simulation.flowTitle">Automation flow board</h2>
|
||||
<h2 id="simulationFlowTitle" data-i18n="simulation.flowTitle">Automation flow board</h2>
|
||||
</div>
|
||||
<div class="flow-legend"><span><i class="flow-legend-dot input"></i><b
|
||||
data-i18n="simulation.legendInput">Input</b></span><span><i class="flow-legend-dot logic"></i><b
|
||||
@@ -283,21 +283,27 @@
|
||||
<div class="simulation-flow-scroll">
|
||||
<div class="simulation-flow-board" id="simulationFlowBoard"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel simulation-timeline-panel">
|
||||
<div class="simulation-section-head">
|
||||
</section>
|
||||
<section class="panel simulation-section-panel" aria-labelledby="simulationTimelineTitle">
|
||||
<div class="simulation-panel-head">
|
||||
<div><span class="eyebrow" data-i18n="simulation.timelineEyebrow">Timeline</span>
|
||||
<h2 data-i18n="simulation.timelineTitle">What will happen next</h2>
|
||||
<h2 id="simulationTimelineTitle" data-i18n="simulation.timelineTitle">What will happen next</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simulation-timeline" id="simulationTimeline"></div>
|
||||
</div>
|
||||
<div class="simulation-section-head">
|
||||
<div><span class="eyebrow" data-i18n="simulation.rulesEyebrow">Rules</span>
|
||||
<h2 data-i18n="simulation.rulesTitle">Automation rules</h2>
|
||||
<div class="simulation-panel-body">
|
||||
<div class="simulation-timeline" id="simulationTimeline"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simulation-rules-grid" id="simulationRules"></div>
|
||||
</section>
|
||||
<section class="panel simulation-section-panel" aria-labelledby="simulationRulesTitle">
|
||||
<div class="simulation-panel-head">
|
||||
<div><span class="eyebrow" data-i18n="simulation.rulesEyebrow">Rules</span>
|
||||
<h2 id="simulationRulesTitle" data-i18n="simulation.rulesTitle">Automation rules</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simulation-panel-body">
|
||||
<div class="simulation-rules-grid" id="simulationRules"></div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="view" data-view="history">
|
||||
|
||||
@@ -10,6 +10,14 @@ document.addEventListener('DOMContentLoaded',()=>{
|
||||
document.querySelector('#houseClimate').innerHTML='<div class="house-climate-head"><div><h3>Tryb domu</h3><p>Wspólne ustawienia dla stref.</p></div><span class="outside-pill">Na zewnątrz 12.8°C</span></div><div class="house-mode-row"><button class="active">Grzanie</button><button>Chłodzenie</button></div><div class="house-preset-row"><button>Auto</button><button class="active">Komfort</button><button>Sen</button><button>Poza domem</button></div>';
|
||||
document.querySelector('#controlPlan').innerHTML='<article class="list-card"><div class="list-card-head"><div><h3>Salon</h3><p>Utrzymuj 21.5°C do 22:30</p></div><span class="badge">Aktywne</span></div></article><article class="list-card"><div class="list-card-head"><div><h3>Sypialnia</h3><p>Tryb nocny od 22:30</p></div><span class="badge">za 2h</span></div></article>';
|
||||
}
|
||||
if(view==='simulation'){
|
||||
document.querySelector('#simulationTarget').innerHTML='<option>Cały dom</option><option>Salon</option><option>Sypialnia</option>';
|
||||
document.querySelector('#simulationSummary').innerHTML='<article class="panel simulation-summary-card"><small>Tryb domu</small><strong>Grzanie</strong><span>Strategia: temperatura zadana</span></article><article class="panel simulation-summary-card"><small>Tryb nocny</small><strong>Wyłączony</strong><span>22:00 → 06:00</span></article><article class="panel simulation-summary-card"><small>Na zewnątrz</small><strong>12.8°C</strong><span>Aktualizacja 08:30</span></article><article class="panel simulation-summary-card"><small>Aktywne strefy</small><strong>2</strong><span>1 strefa zgłasza zapotrzebowanie</span></article>';
|
||||
const board=document.querySelector('#simulationFlowBoard'); board.style.width='1325px'; board.style.height='390px';
|
||||
board.innerHTML='<div class="flow-lane-label" style="top:128px"><strong>Salon</strong><span>GREE Salon</span></div><article class="flow-node input" style="left:45px;top:155px;width:190px;min-height:106px"><div class="flow-node-top"><span>Temperatura</span><b class="flow-node-badge active">●</b></div><h3>Salon</h3><strong>20.8°C</strong><p>Home Assistant</p></article><article class="flow-node logic" style="left:305px;top:155px;width:190px;min-height:106px"><div class="flow-node-top"><span>Termostat</span></div><h3>Salon</h3><strong>21.5°C</strong><p>Komfort</p></article><article class="flow-node logic decision demand" style="left:565px;top:155px;width:190px;min-height:106px"><div class="flow-node-top"><span>Decyzja</span><b class="flow-node-badge active">▶</b></div><h3>Grzanie</h3><strong>Potrzeba ciepła</strong><p>Poniżej celu</p></article><article class="flow-node action" style="left:825px;top:155px;width:190px;min-height:106px"><div class="flow-node-top"><span>Polecenie</span></div><h3>GREE Salon</h3><strong>22.0°C · Auto</strong><p>Quiet: wył.</p></article>';
|
||||
document.querySelector('#simulationTimeline').innerHTML='<article class="simulation-timeline-item"><time>08:45</time><div><strong>Salon</strong><p>Komfort · 21.5°C · GREE Salon</p></div></article><article class="simulation-timeline-item"><time>22:00</time><div><strong>Cały dom</strong><p>Tryb nocny</p></div></article><article class="simulation-timeline-item"><time>06:00 jutro</time><div><strong>Sypialnia</strong><p>Komfort · 20.5°C · GREE Sypialnia</p></div></article>';
|
||||
document.querySelector('#simulationRules').innerHTML='<article class="simulation-rule-card"><div class="simulation-rule-head"><div><span class="eyebrow">Automatyzacja</span><h3>Otwarte okno</h3></div><span class="badge active">Stan</span></div><p>Urządzenie: GREE Salon</p><div class="simulation-rule-action">Wyłącz termostat, gdy okno pozostaje otwarte.</div><div class="simulation-rule-meta"><small>Ostatnio: 07:12</small><small>Gotowa: teraz</small></div></article><article class="simulation-rule-card"><div class="simulation-rule-head"><div><span class="eyebrow">Automatyzacja</span><h3>Tani prąd</h3></div><span class="badge active">Próg</span></div><p>Urządzenie: GREE Sypialnia</p><div class="simulation-rule-action">Podnieś temperaturę docelową o 0.5°C.</div><div class="simulation-rule-meta"><small>Ostatnio: wczoraj</small><small>Gotowa: teraz</small></div></article>';
|
||||
}
|
||||
if(view==='flows'){
|
||||
document.querySelector('#flowListCount').textContent='3 flow';
|
||||
document.querySelector('#flowList').innerHTML=`<article class="list-card flow-card"><div class="list-card-head"><div><h3>Okno w salonie</h3><p>Wyłącza grzanie, gdy okno jest otwarte.</p></div><button class="zone-enable-toggle active"><span>✓</span>Włączone</button></div><div class="card-stats"><div class="card-stat"><small>Bloki</small><strong>5</strong></div><div class="card-stat"><small>Harmonogramy</small><strong>0</strong></div><div class="card-stat"><small>Automatyzacje</small><strong>1</strong></div></div><div class="card-footer"><small>1 automatyzacja</small><div class="card-menu"><button>Otwórz edytor</button><button class="danger">Usuń</button></div></div></article><article class="list-card flow-card is-disabled"><div class="list-card-head"><div><h3>Tani prąd</h3><p>Podbija temperaturę przy niskiej cenie energii.</p></div><button class="zone-enable-toggle"><span>○</span>Wyłączone</button></div><div class="card-stats"><div class="card-stat"><small>Bloki</small><strong>7</strong></div><div class="card-stat"><small>Harmonogramy</small><strong>1</strong></div><div class="card-stat"><small>Automatyzacje</small><strong>2</strong></div></div><div class="card-footer"><small>1 harmonogram · 2 automatyzacje</small><div class="card-menu"><button>Otwórz edytor</button><button class="danger">Usuń</button></div></div></article>`;
|
||||
|
||||
+60
-457
@@ -176,18 +176,6 @@ button:disabled {
|
||||
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;
|
||||
@@ -638,16 +626,6 @@ h3 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.device-network-info {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.device-network-error {
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.card-menu {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
@@ -867,30 +845,6 @@ h3 {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.dot.target {
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.form-grid h3,
|
||||
.form-grid hr,
|
||||
.form-grid .wide {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.form-grid hr,
|
||||
.dialog-form hr {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
@@ -1389,16 +1343,6 @@ legend {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-grid h3,
|
||||
.form-grid hr,
|
||||
.form-grid .wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.log-row {
|
||||
grid-template-columns: 62px 1fr;
|
||||
}
|
||||
@@ -1407,9 +1351,6 @@ legend {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
min-width: 86px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 410px) {
|
||||
@@ -1435,13 +1376,6 @@ legend {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.toolbar-select {
|
||||
min-width: 54px;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
min-width: 82px;
|
||||
}
|
||||
}
|
||||
|
||||
.token-manager {
|
||||
@@ -1502,17 +1436,6 @@ legend {
|
||||
}
|
||||
}
|
||||
|
||||
/* Zone quick controls */
|
||||
.zone-quick-control {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin-top: 10px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.temperature-control.compact {
|
||||
padding: 4px 0 7px;
|
||||
gap: 16px;
|
||||
@@ -1528,10 +1451,6 @@ legend {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.zone-quick-control .mode-row {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.discovery-name-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
@@ -1760,27 +1679,6 @@ legend {
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.house-power-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin: -15px 0 12px;
|
||||
}
|
||||
|
||||
.house-power-panel h3 {
|
||||
margin: 2px 0 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.house-power-panel p {
|
||||
margin: 0;
|
||||
max-width: 650px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.house-power-actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
@@ -1935,9 +1833,6 @@ legend {
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.house-power-panel {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.house-climate-head {
|
||||
align-items: flex-start;
|
||||
@@ -1947,11 +1842,6 @@ legend {
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.house-power-panel {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.house-power-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -2663,18 +2553,19 @@ legend {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.simulation-summary-card {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 16px;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.simulation-summary-card small {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.simulation-summary-card strong {
|
||||
@@ -2688,74 +2579,81 @@ legend {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.simulation-section-head {
|
||||
.simulation-section-panel {
|
||||
margin-bottom: 18px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.simulation-panel-head {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 24px 0 12px;
|
||||
gap: 16px;
|
||||
padding: 15px 18px 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: color-mix(in srgb, var(--surface-muted) 52%, var(--surface));
|
||||
}
|
||||
|
||||
.simulation-section-head h2 {
|
||||
margin: 4px 0 0;
|
||||
.simulation-panel-head > div:first-child {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.simulation-timeline-panel {
|
||||
padding: 16px;
|
||||
margin-bottom: 22px;
|
||||
.simulation-panel-head .eyebrow {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.simulation-panel-head h2 {
|
||||
margin: 3px 0 0;
|
||||
font-size: 19px;
|
||||
letter-spacing: -.025em;
|
||||
}
|
||||
|
||||
.simulation-panel-body {
|
||||
padding: 16px 18px 18px;
|
||||
}
|
||||
|
||||
.simulation-timeline {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.simulation-timeline-item {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 1fr;
|
||||
grid-template-columns: 110px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.simulation-timeline-item:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.simulation-timeline-item:last-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.simulation-timeline-item time {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.simulation-timeline-item strong {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.simulation-timeline-item p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.simulation-zone-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.simulation-zone-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.simulation-zone-card.disabled {
|
||||
opacity: .68;
|
||||
}
|
||||
|
||||
.simulation-zone-head,
|
||||
.simulation-rule-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -2763,140 +2661,62 @@ legend {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.simulation-zone-head h3,
|
||||
.simulation-rule-head h3 {
|
||||
margin: 3px 0 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.simulation-zone-head p,
|
||||
.simulation-rule-head p {
|
||||
margin: 6px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.simulation-flow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.simulation-step {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, .02);
|
||||
min-height: 112px;
|
||||
}
|
||||
|
||||
html[data-theme='light'] .simulation-step {
|
||||
background: rgba(0, 0, 0, .02);
|
||||
}
|
||||
|
||||
.simulation-step.accent {
|
||||
box-shadow: inset 0 0 0 1px rgba(101, 163, 255, .28);
|
||||
}
|
||||
|
||||
.simulation-step small,
|
||||
.simulation-metrics small,
|
||||
.simulation-rule-meta small {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.simulation-step strong {
|
||||
font-size: 15px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.simulation-step span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.simulation-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.simulation-metrics>div,
|
||||
.simulation-rule-action {
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, .02);
|
||||
}
|
||||
|
||||
html[data-theme='light'] .simulation-metrics>div,
|
||||
html[data-theme='light'] .simulation-rule-action {
|
||||
background: rgba(0, 0, 0, .02);
|
||||
}
|
||||
|
||||
.simulation-metrics strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.simulation-events {
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.simulation-rules-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
|
||||
gap: 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.simulation-rule-card {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
min-width: 0;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.simulation-rule-card>p {
|
||||
.simulation-rule-card > p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.simulation-rule-action {
|
||||
font-size: 14px;
|
||||
padding: 11px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: var(--surface);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.simulation-rule-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
gap: 6px 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
.simulation-flow,
|
||||
.simulation-metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.simulation-timeline-item {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.simulation-flow,
|
||||
.simulation-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Compact connection state: a colored dot replaces the Connected/Disconnected label. */
|
||||
.brand-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -3050,25 +2870,6 @@ html[data-theme='light'] .simulation-rule-action {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.settings-subhead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.settings-subhead strong,
|
||||
.settings-subhead small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.settings-subhead small {
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.settings-save-bar {
|
||||
position: sticky;
|
||||
bottom: 18px;
|
||||
@@ -3157,25 +2958,6 @@ html[data-theme='light'] .simulation-rule-action {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.simulation-flow-shell {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.simulation-flow-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 18px 18px 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.simulation-flow-head h2 {
|
||||
margin: 3px 0 0;
|
||||
}
|
||||
|
||||
.flow-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -3465,7 +3247,7 @@ html[data-theme='light'] .simulation-rule-action {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.simulation-flow-head {
|
||||
.simulation-panel-head {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -3642,29 +3424,6 @@ html[data-theme='light'] .simulation-rule-action {
|
||||
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));
|
||||
@@ -3859,7 +3618,6 @@ body.simulation-standalone [data-view="simulation"] {
|
||||
|
||||
@media (max-width:720px) {
|
||||
|
||||
.dashboard-group-head,
|
||||
.simulation-page-head {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
@@ -4105,84 +3863,6 @@ body.simulation-standalone [data-view="simulation"] {
|
||||
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));
|
||||
}
|
||||
|
||||
/* Dashboard quick controls share one compact visual language. */
|
||||
.quick-control-card {
|
||||
--quick-control-height: 28px;
|
||||
@@ -4197,10 +3877,6 @@ body.simulation-standalone [data-view="simulation"] {
|
||||
padding: 2px 0 5px;
|
||||
}
|
||||
|
||||
.quick-control-card .quick-control-row-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.quick-control-card .quick-control-row-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
@@ -4449,14 +4125,6 @@ body.simulation-standalone [data-view="simulation"] {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.dashboard-disclosure>summary {
|
||||
padding: 12px 13px;
|
||||
}
|
||||
|
||||
.dashboard-disclosure-body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.quick-thermostat-control .list-card-head {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -5157,57 +4825,6 @@ body.simulation-standalone [data-view="simulation"] {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.language-picker {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 58px;
|
||||
height: 40px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 11px;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-soft);
|
||||
transition: border-color .15s ease, background .15s ease, transform .15s ease;
|
||||
}
|
||||
|
||||
.language-picker:hover {
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.language-picker:active {
|
||||
transform: scale(.97);
|
||||
}
|
||||
|
||||
.language-label {
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
letter-spacing: .06em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.language-chevron {
|
||||
margin-top: -2px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.language-select {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-icon-control {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
@@ -5232,8 +4849,7 @@ body.simulation-standalone [data-view="simulation"] {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
.language-picker:focus-within {
|
||||
button:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -5338,12 +4954,6 @@ button:focus-visible,
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.language-picker {
|
||||
width: 50px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.toolbar-icon-control {
|
||||
flex-basis: 38px;
|
||||
width: 38px;
|
||||
@@ -5352,9 +4962,6 @@ button:focus-visible,
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.language-chevron {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
@@ -6004,7 +5611,6 @@ textarea[aria-invalid="true"] {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/* v0.9.1: global compressor queue overview. */
|
||||
.queue-overview-button {
|
||||
display: inline-flex;
|
||||
@@ -6450,7 +6056,6 @@ body.flow-editor-open { overflow:hidden; }
|
||||
.flow-template-preview-node-time, .flow-template-preview-node-timeop { border-top:3px solid var(--blue); }
|
||||
.flow-template-preview-node-haaction { border-top:3px solid var(--accent); }
|
||||
|
||||
|
||||
/* Compact Flow state control and mobile action entry point. */
|
||||
.flow-enabled { white-space:nowrap; }
|
||||
.flow-enabled input { width:16px; min-height:16px; accent-color:var(--accent); }
|
||||
@@ -6730,8 +6335,7 @@ textarea:focus { border-color:var(--accent); outline:2px solid color-mix(in srgb
|
||||
.flow-generated-card { border-left:3px solid var(--accent-border); }
|
||||
.flow-generated-card .card-footer > small { color:var(--accent); }
|
||||
|
||||
|
||||
/* 0.12.0 production layout guards and in-app chart preview. */
|
||||
/* 0.12.x production layout guards and in-app chart preview. */
|
||||
html,body { max-width:100%; overflow-x:clip; }
|
||||
main,.view { min-width:0; max-width:100%; }
|
||||
.flow-info-panel,.flow-info-panel > div { min-width:0; }
|
||||
@@ -7112,8 +6716,7 @@ body.chart-fullscreen-open::before { content:""; position:fixed; inset:0; z-inde
|
||||
.ping-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
|
||||
/* 0.12.0 diagnostics, manual-control safety and technical connection checks. */
|
||||
/* 0.12.x diagnostics, manual-control safety and technical connection checks. */
|
||||
.manual-device-problem {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
|
||||
Reference in New Issue
Block a user