Home/ClimatController
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

patch : v1.2.1 виджет стал более "горизонтальным"

Browse Source
This commit is contained in:
Fedorov Dmitriy
2026-09-20 11:29:48 +03:00
parent 83d2eb619c
commit 05539d91ed
9 changed files with 379 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/panel.css
+85 -12
View File
@@ -266,7 +266,8 @@ body::after {
.co2-card > p { height: 1rem; margin: .2rem 0 .55rem; color: var(--panel-muted); font-size: .58rem; overflow: hidden; }
.meter { height: .82rem; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; background: rgba(91,145,181,.18); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #08a350, #36dc83); box-shadow: 0 0 18px rgba(18,199,104,.58), inset 0 1px 0 rgba(255,255,255,.64); transition: width .35s ease; }
.meter-labels { display: flex; justify-content: space-between; margin-top: .25rem; color: var(--panel-muted); font-size: .55rem; }
.meter-labels { display: flex; justify-content: space-between; margin-top: .27rem; color: rgba(22,69,108,.78); font-size: .6rem; font-weight: 650; text-shadow: 0 1px 0 rgba(255,255,255,.48); }
:root[data-theme="dark"] .meter-labels { color: rgba(211,235,248,.76); text-shadow: 0 1px 2px rgba(0,0,0,.58); }
.filter-line { display: flex; align-items: center; gap: .45rem; margin-top: 1rem; }
.filter-meter { flex: 1; }
.filter-meter i { background: linear-gradient(90deg, #176dec, #36c1ff); box-shadow: 0 0 18px rgba(31,144,247,.55), inset 0 1px 0 rgba(255,255,255,.58); }
@@ -375,27 +376,33 @@ body::after {
}
body {
background-color: #b7d5e3;
background-image: none;
}
:root[data-theme="dark"] body {
background-color: #091722;
background-image: none;
}
body::before {
inset: -1.25rem;
background-image:
linear-gradient(118deg, rgba(180,220,239,.16), rgba(238,247,251,.04) 45%, rgba(247,226,204,.1)),
linear-gradient(118deg, rgba(180,220,239,.15), rgba(238,247,251,.025) 45%, rgba(247,226,204,.09)),
url("../assets/mountain-lake-light.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: blur(6px) saturate(108%);
transform: scale(1.025);
opacity: 1;
pointer-events: none;
}
:root[data-theme="dark"] body {
background-color: #091722;
:root[data-theme="dark"] body::before {
background-image:
linear-gradient(118deg, rgba(2,15,25,.66), rgba(8,27,40,.57) 48%, rgba(20,25,29,.64)),
url("../assets/mountain-lake-dark.jpg");
background-position: center;
background-size: cover;
}
body::before {
inset: 0;
background: linear-gradient(110deg, rgba(214,242,253,.16), transparent 35%, rgba(255,240,218,.1) 76%, transparent);
filter: none;
transform: none;
opacity: .75;
filter: blur(7px) saturate(106%);
opacity: 1;
}
body::after {
background:
@@ -405,7 +412,6 @@ body::after {
filter: blur(11px);
opacity: .5;
}
:root[data-theme="dark"] body::before { background: linear-gradient(115deg, rgba(29,104,142,.1), transparent 40%, rgba(110,76,42,.08)); opacity: .7; }
:root[data-theme="dark"] body::after { opacity: .26; }
.ambient::before { opacity: .14; filter: blur(76px); }
.ambient::after { opacity: .11; filter: blur(82px); }
@@ -797,3 +803,70 @@ body::after {
.editor-status { width: 100%; }
.schedule-edit-button span { display: none; }
}
/* CO2 state drives both the label and the meter, so the visual state cannot
disagree with the air-quality text returned by airQuality(). */
.co2-card {
--air-color: #7896ac;
--air-glow: rgba(93, 140, 171, .22);
--air-track: rgba(181, 203, 200, .28);
}
.co2-card[data-air-tone="good"] {
--air-color: #1fbd69;
--air-glow: rgba(18, 199, 104, .34);
}
.co2-card[data-air-tone="warn"] {
--air-color: #efa12b;
--air-glow: rgba(244, 161, 42, .35);
}
.co2-card[data-air-tone="bad"] {
--air-color: #e8495c;
--air-glow: rgba(235, 74, 83, .36);
}
.co2-card .co2-meter {
height: .84rem;
border-color: rgba(255,255,255,.82);
background-color: var(--air-track);
background-image: linear-gradient(180deg, rgba(255,255,255,.15), transparent 52%, rgba(0,20,36,.045));
box-shadow: inset 0 1px 3px rgba(20,61,78,.14), 0 1px 4px rgba(8,43,72,.07);
transition: background-color .65s ease;
}
.co2-card .co2-meter i {
background-color: var(--air-color);
background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.045) 48%, rgba(0,35,20,.1));
box-shadow: 0 0 8px var(--air-glow), inset 0 1px 0 rgba(255,255,255,.58), inset 0 -1px 2px rgba(0,34,19,.1);
transition: width .35s ease, background-color .65s ease, box-shadow .65s ease;
}
:root[data-theme="dark"] .co2-card .co2-meter { border-color: rgba(205,235,248,.3); box-shadow: inset 0 1px 4px rgba(0,0,0,.27), 0 1px 5px rgba(0,0,0,.12); }
.co2-card .quality-chip.muted {
color: var(--panel-muted);
border-color: var(--tile-line-soft);
background: rgba(199,222,235,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.co2-card .quality-chip.good {
color: #076d3d;
border-color: rgba(109,237,167,.65);
background: linear-gradient(145deg, rgba(179,255,214,.58), rgba(92,218,151,.39));
box-shadow: 0 0 9px rgba(33,203,116,.12), inset 0 1px 0 rgba(255,255,255,.82);
}
.co2-card .quality-chip.warn {
color: #9c5513;
border-color: rgba(244,183,106,.67);
background: linear-gradient(145deg, rgba(255,232,188,.56), rgba(239,168,80,.34));
box-shadow: 0 0 9px rgba(235,153,53,.11), inset 0 1px 0 rgba(255,255,255,.8);
}
.co2-card .quality-chip.bad {
color: #a62f3d;
border-color: rgba(242,135,147,.62);
background: linear-gradient(145deg, rgba(255,209,216,.53), rgba(225,105,120,.3));
box-shadow: 0 0 9px rgba(224,83,101,.12), inset 0 1px 0 rgba(255,255,255,.78);
}
:root[data-theme="dark"] .co2-card { --air-track: rgba(8,28,39,.38); }
:root[data-theme="dark"] .co2-card[data-air-tone="good"] { --air-glow: rgba(30,224,128,.3); }
:root[data-theme="dark"] .co2-card[data-air-tone="warn"] { --air-glow: rgba(255,176,49,.3); }
:root[data-theme="dark"] .co2-card[data-air-tone="bad"] { --air-glow: rgba(255,82,102,.32); }
:root[data-theme="dark"] .co2-card .quality-chip.good { color: #b9ffda; background: linear-gradient(145deg, rgba(45,186,113,.35), rgba(11,101,60,.3)); }
:root[data-theme="dark"] .co2-card .quality-chip.warn { color: #ffd59e; background: linear-gradient(145deg, rgba(176,115,30,.34), rgba(91,58,15,.3)); }
:root[data-theme="dark"] .co2-card .quality-chip.bad { color: #ffc0c8; background: linear-gradient(145deg, rgba(174,58,75,.34), rgba(91,25,37,.31)); }
:root[data-theme="dark"] .co2-card .quality-chip.muted { color: var(--panel-muted); background: rgba(42,70,88,.25); }