602 lines
32 KiB
CSS
602 lines
32 KiB
CSS
:root {
|
|
--widget-ink: #08265d;
|
|
--widget-muted: #315d91;
|
|
--widget-glass: rgba(200, 228, 244, 0.21);
|
|
--widget-edge: rgba(255, 255, 255, 0.9);
|
|
--tile: rgba(104, 126, 139, 0.16);
|
|
--tile-strong: rgba(214, 226, 232, 0.2);
|
|
--tile-edge: rgba(255, 255, 255, 0.82);
|
|
--tile-edge-soft: rgba(189, 211, 221, 0.38);
|
|
--tile-shadow: 0 10px 25px rgba(24, 72, 105, 0.12), inset 0 1px 0 rgba(255,255,255,.78), inset 1px 0 0 rgba(255,255,255,.24);
|
|
--blue-halo: rgba(23, 137, 248, 0.16);
|
|
--green-halo: rgba(28, 196, 113, 0.16);
|
|
--orange-halo: rgba(246, 126, 50, 0.14);
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--widget-ink: #edf8ff;
|
|
--widget-muted: #9fc5df;
|
|
--widget-glass: rgba(7, 22, 33, 0.49);
|
|
--widget-edge: rgba(187, 225, 244, 0.3);
|
|
--tile: rgba(16, 37, 51, 0.3);
|
|
--tile-strong: rgba(52, 78, 96, 0.33);
|
|
--tile-edge: rgba(203, 234, 248, 0.25);
|
|
--tile-edge-soft: rgba(114, 176, 207, 0.16);
|
|
--tile-shadow: 0 13px 29px rgba(0,0,0,.26), inset 0 1px 0 rgba(226,246,255,.11), inset 1px 0 0 rgba(186,226,245,.055);
|
|
--blue-halo: rgba(29, 153, 245, 0.22);
|
|
--green-halo: rgba(27, 210, 121, 0.19);
|
|
--orange-halo: rgba(246, 125, 46, 0.18);
|
|
}
|
|
|
|
html { min-width: 280px; }
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: clamp(.5rem, 2.2vw, 1rem);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
color: var(--widget-ink);
|
|
background-color: #b7d5e3;
|
|
overflow-x: hidden;
|
|
isolation: isolate;
|
|
}
|
|
|
|
:root[data-theme="dark"] body {
|
|
background-color: #091722;
|
|
}
|
|
|
|
body::before,
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body::before {
|
|
inset: -1.25rem;
|
|
z-index: -2;
|
|
background-image:
|
|
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);
|
|
}
|
|
|
|
body::after {
|
|
inset: 0;
|
|
z-index: -1;
|
|
background:
|
|
radial-gradient(circle at 11% 18%, rgba(255,255,255,.32) 0 .5%, transparent 5%),
|
|
radial-gradient(circle at 64% 23%, rgba(255,244,218,.27) 0 .6%, transparent 6%),
|
|
radial-gradient(circle at 91% 79%, rgba(225,250,237,.21) 0 .8%, transparent 7%);
|
|
filter: blur(11px);
|
|
opacity: .5;
|
|
}
|
|
|
|
: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");
|
|
filter: blur(7px) saturate(106%);
|
|
}
|
|
:root[data-theme="dark"] body::after { opacity: .25; }
|
|
|
|
.ambient::before { width: 32rem; height: 32rem; left: -13rem; top: -14rem; background: #c9f2ff; opacity: .14; filter: blur(76px); }
|
|
.ambient::after { width: 34rem; height: 34rem; right: -14rem; bottom: -16rem; background: #ebd5a7; opacity: .11; filter: blur(82px); }
|
|
:root[data-theme="dark"] .ambient::before { background: #147db5; opacity: .12; }
|
|
:root[data-theme="dark"] .ambient::after { background: #846630; opacity: .08; }
|
|
|
|
.widget {
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: min(100%, 31.5rem);
|
|
display: grid;
|
|
gap: .65rem;
|
|
padding: clamp(.65rem, 2.2vw, .9rem);
|
|
overflow: hidden;
|
|
border: 1px solid var(--widget-edge);
|
|
outline: 1px solid rgba(255,255,255,.48);
|
|
outline-offset: -5px;
|
|
border-radius: 1.55rem;
|
|
background:
|
|
linear-gradient(125deg, rgba(255,255,255,.22), transparent 31%, rgba(255,255,255,.055) 69%, rgba(196,224,240,.1)),
|
|
var(--widget-glass);
|
|
box-shadow: 0 27px 68px rgba(22,66,95,.24), 0 2px 8px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(113,163,192,.17);
|
|
backdrop-filter: blur(13px) saturate(124%);
|
|
-webkit-backdrop-filter: blur(13px) saturate(124%);
|
|
}
|
|
|
|
.widget::before,
|
|
.widget::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.widget::before {
|
|
background:
|
|
linear-gradient(112deg, rgba(255,255,255,.25), rgba(255,255,255,.035) 18%, transparent 39%),
|
|
radial-gradient(ellipse at 50% -20%, rgba(255,255,255,.25), transparent 47%);
|
|
}
|
|
|
|
.widget::after {
|
|
opacity: .1;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
|
|
mix-blend-mode: soft-light;
|
|
}
|
|
|
|
.widget > * { position: relative; z-index: 1; }
|
|
:root[data-theme="dark"] .widget { outline-color: rgba(203,235,250,.11); box-shadow: 0 33px 78px rgba(0,0,0,.43), 0 0 28px rgba(19,112,158,.06), inset 0 1px 0 rgba(221,243,252,.17), inset 0 -1px 0 rgba(0,0,0,.28); }
|
|
:root[data-theme="dark"] .widget::before { background: linear-gradient(112deg, rgba(203,238,253,.1), transparent 24%, transparent 72%, rgba(71,163,202,.035)); }
|
|
|
|
.widget-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: .55rem .7rem;
|
|
padding: .15rem .25rem .05rem;
|
|
}
|
|
|
|
.identity { min-width: 0; display: flex; align-items: center; gap: .7rem; }
|
|
.brand-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 2.9rem;
|
|
height: 2.9rem;
|
|
flex: 0 0 auto;
|
|
border: 1px solid rgba(255,255,255,.82);
|
|
border-radius: 1rem;
|
|
color: #147bd5;
|
|
background:
|
|
radial-gradient(circle at 25% 2%, rgba(255,255,255,.62), transparent 43%),
|
|
linear-gradient(145deg, rgba(217,242,255,.58), rgba(73,159,222,.2));
|
|
box-shadow: 0 8px 19px rgba(19,101,160,.13), inset 0 1px 0 rgba(255,255,255,.88);
|
|
}
|
|
.brand-icon svg { width: 1.75rem; height: 1.75rem; filter: drop-shadow(0 0 5px rgba(20,123,213,.18)); }
|
|
.identity-copy { min-width: 0; display: block; }
|
|
.title-row { display: flex; align-items: center; gap: .55rem; min-width: 0; }
|
|
.identity h1 { margin: 0; font-size: 1.62rem; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
|
|
.identity-copy > small { display: block; margin-top: .28rem; color: var(--widget-muted); font-size: .7rem; }
|
|
.widget .pill { min-height: 1.75rem; padding: .27rem .58rem; border-color: rgba(255,255,255,.56); font-size: .59rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 5px 14px rgba(26,75,108,.08); backdrop-filter: blur(12px); }
|
|
.widget .pill::before { width: .36rem; height: .36rem; box-shadow: 0 0 7px currentColor; }
|
|
|
|
.theme-button,
|
|
.open-section {
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--tile-edge);
|
|
color: var(--widget-ink);
|
|
background: linear-gradient(145deg, var(--tile-strong), var(--tile));
|
|
box-shadow: var(--tile-shadow);
|
|
cursor: pointer;
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
transition: transform .15s ease, filter .15s ease;
|
|
}
|
|
.theme-button { width: 2.55rem; height: 2.55rem; border-radius: .9rem; }
|
|
.theme-button svg { width: 1.18rem; height: 1.18rem; }
|
|
.theme-button:hover, .open-section:hover { transform: translateY(-1px); filter: brightness(1.07); }
|
|
.theme-button:active, .open-section:active { transform: scale(.97); }
|
|
.status-row { grid-column: 1 / -1; display: flex; align-items: center; gap: .55rem; min-width: 0; }
|
|
.mode-detail { min-width: 0; color: var(--widget-muted); font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.widget-tile {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
border: 1px solid var(--tile-edge);
|
|
outline: 1px solid var(--tile-edge-soft);
|
|
outline-offset: -3px;
|
|
border-radius: 1.15rem;
|
|
background:
|
|
linear-gradient(132deg, rgba(244,248,250,.22), rgba(159,178,188,.055) 38%, transparent 66%),
|
|
linear-gradient(145deg, var(--tile-strong), var(--tile));
|
|
box-shadow: var(--tile-shadow);
|
|
backdrop-filter: blur(14px) saturate(116%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(116%);
|
|
}
|
|
|
|
.widget-tile::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
opacity: .62;
|
|
background: linear-gradient(115deg, rgba(255,255,255,.35), transparent 25%, transparent 72%, rgba(255,255,255,.08));
|
|
}
|
|
.widget-tile > * { position: relative; z-index: 1; }
|
|
:root[data-theme="dark"] .widget-tile { background: linear-gradient(132deg, rgba(213,240,252,.075), rgba(255,255,255,.012) 38%, transparent 65%), linear-gradient(145deg, var(--tile-strong), var(--tile)); backdrop-filter: blur(16px) saturate(127%); -webkit-backdrop-filter: blur(16px) saturate(127%); }
|
|
|
|
.control-card { min-height: 11.4rem; padding: .9rem 1rem .85rem; display: flex; flex-direction: column; }
|
|
.control-card::after,
|
|
.switch-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 0;
|
|
width: 12rem;
|
|
height: 12rem;
|
|
right: -5rem;
|
|
bottom: -7rem;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
filter: blur(42px);
|
|
opacity: .18;
|
|
}
|
|
.speed-card::after { background: var(--blue-halo); }
|
|
.temperature-card::after { width: 17rem; background: linear-gradient(90deg, var(--blue-halo), var(--orange-halo)); }
|
|
.power-card::after, .heater-card::after { background: var(--green-halo); opacity: .16; }
|
|
|
|
.card-title { display: flex; align-items: flex-start; gap: .65rem; }
|
|
.card-title h2, .switch-title h2, .section-title h2 { margin: 0; font-size: .96rem; line-height: 1.2; letter-spacing: -.015em; }
|
|
.card-title p { margin: .16rem 0 0; color: var(--widget-muted); font-size: .66rem; }
|
|
.ui-icon { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
|
.feature-icon { width: 1.95rem; height: 1.95rem; flex: 0 0 auto; padding: .06rem; color: #1389f4; filter: drop-shadow(0 0 5px rgba(20,139,244,.2)); }
|
|
|
|
.hero-control { display: grid; grid-template-columns: 3.45rem 1fr 3.45rem; align-items: center; gap: .8rem; margin: 1rem 0 .72rem; }
|
|
.hero-value { text-align: center; font-size: 3rem; line-height: 1; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
|
|
.hero-step {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 3.45rem;
|
|
height: 3.45rem;
|
|
padding: 0;
|
|
border: 1.5px solid rgba(255,255,255,.84);
|
|
border-radius: .95rem;
|
|
color: #176dbb;
|
|
background:
|
|
radial-gradient(circle at 24% 5%, rgba(255,255,255,.48), transparent 40%),
|
|
linear-gradient(145deg, rgba(245,252,255,.4), rgba(191,224,244,.18));
|
|
box-shadow: 0 8px 19px rgba(35,92,132,.13), inset 0 1px 0 rgba(255,255,255,.88), 0 0 0 1px rgba(185,226,248,.2);
|
|
cursor: pointer;
|
|
font-size: 1.8rem;
|
|
line-height: 1;
|
|
transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
|
|
}
|
|
.hero-step.primary {
|
|
color: white;
|
|
background:
|
|
radial-gradient(circle at 24% 5%, rgba(255,255,255,.55), transparent 38%),
|
|
linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%, rgba(0,73,170,.1)),
|
|
linear-gradient(145deg, #55b4ff, #1479e8 72%);
|
|
box-shadow: 0 8px 18px rgba(15,92,183,.18), 0 0 7px rgba(48,151,239,.1), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -3px 7px rgba(0,67,156,.16);
|
|
}
|
|
.hero-step:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 10px 21px rgba(20,101,190,.2), 0 0 9px rgba(48,151,239,.12), inset 0 1px 0 rgba(255,255,255,.88); }
|
|
.hero-step:active { transform: scale(.97); }
|
|
|
|
.speed-segments { display: grid; grid-template-columns: repeat(6, 1fr); gap: .18rem; }
|
|
.speed-segments button {
|
|
height: .9rem;
|
|
padding: 0;
|
|
border: 1px solid rgba(255,255,255,.82);
|
|
border-radius: .5rem;
|
|
background: linear-gradient(180deg, rgba(173,207,229,.3), rgba(98,151,190,.18));
|
|
box-shadow: inset 0 1px 2px rgba(27,70,105,.07), 0 2px 5px rgba(32,86,126,.07);
|
|
cursor: pointer;
|
|
transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
|
|
}
|
|
.speed-segments button:hover { transform: translateY(-1px); }
|
|
.speed-segments button.active {
|
|
background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 48%), linear-gradient(90deg, #1685ec, #35afff);
|
|
box-shadow: 0 0 5px rgba(25,143,247,.19), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 4px rgba(0,84,182,.13);
|
|
}
|
|
.scale-labels, .temperature-labels { display: flex; justify-content: space-between; margin-top: .34rem; padding: 0 .3rem; color: var(--widget-muted); font-size: .62rem; }
|
|
|
|
.temperature-range { width: 100%; height: 1.45rem; margin: 0; appearance: none; background: transparent; cursor: pointer; }
|
|
.temperature-range::-webkit-slider-runnable-track { height: .68rem; border: 1px solid rgba(255,255,255,.88); border-radius: 999px; background: linear-gradient(90deg, #0878ed, #53c7f5 38%, #f3c26e 72%, #ff6b31); box-shadow: 0 0 8px rgba(37,153,239,.15), 0 0 7px rgba(255,114,41,.09), inset 0 1px 2px rgba(255,255,255,.46); }
|
|
.temperature-range::-moz-range-track { height: .68rem; border: 1px solid rgba(255,255,255,.88); border-radius: 999px; background: linear-gradient(90deg, #0878ed, #53c7f5 38%, #f3c26e 72%, #ff6b31); }
|
|
.temperature-range::-moz-range-progress { background: transparent; }
|
|
.temperature-range::-webkit-slider-thumb { width: 1.6rem; height: 1.6rem; margin-top: -.49rem; appearance: none; border: .25rem solid rgba(244,252,255,.9); border-radius: 50%; background: #238feb; box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 0 11px rgba(29,139,241,.31), 0 4px 9px rgba(17,79,143,.22); }
|
|
.temperature-range::-moz-range-thumb { width: 1.08rem; height: 1.08rem; border: .25rem solid rgba(244,252,255,.9); border-radius: 50%; background: #238feb; box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 0 11px rgba(29,139,241,.31), 0 4px 9px rgba(17,79,143,.22); }
|
|
|
|
.switch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
|
|
.switch-card { min-width: 0; min-height: 8.15rem; padding: .82rem; display: flex; flex-direction: column; gap: .72rem; }
|
|
.switch-title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
|
|
.switch-title > span { min-width: 0; }
|
|
.switch-title small { display: block; margin-top: .12rem; color: var(--widget-muted); font-size: .58rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.switch-icon { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; }
|
|
.switch-icon.green { color: #08a95a; filter: drop-shadow(0 0 5px rgba(20,190,104,.23)); }
|
|
.switch-icon.orange { color: #f06419; filter: drop-shadow(0 0 5px rgba(244,105,31,.2)); }
|
|
.glass-switch {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
min-height: 3.35rem;
|
|
margin-top: auto;
|
|
border: 1.5px solid rgba(255,255,255,.86);
|
|
border-radius: .95rem;
|
|
color: var(--widget-ink);
|
|
background: rgba(199,222,235,.24);
|
|
box-shadow: var(--tile-shadow);
|
|
cursor: pointer;
|
|
font-size: 1.25rem;
|
|
font-weight: 850;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.3);
|
|
transition: transform .15s ease, background .2s ease, box-shadow .2s ease, filter .2s ease;
|
|
}
|
|
.glass-switch:hover { transform: translateY(-1px); filter: brightness(1.06); }
|
|
.glass-switch:active { transform: scale(.98); }
|
|
.glass-switch[aria-pressed="true"].green,
|
|
.glass-switch[aria-pressed="true"].orange {
|
|
background:
|
|
radial-gradient(circle at 25% -8%, rgba(255,255,255,.67), transparent 42%),
|
|
linear-gradient(132deg, rgba(255,255,255,.15), transparent 40%, rgba(0,125,62,.06)),
|
|
linear-gradient(145deg, rgba(139,244,190,.67), rgba(55,194,122,.43));
|
|
border-color: rgba(218,255,235,.84);
|
|
box-shadow: 0 8px 19px rgba(18,143,80,.14), 0 0 8px rgba(38,199,116,.09), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -4px 9px rgba(0,114,57,.08);
|
|
}
|
|
|
|
.info-card { padding: .82rem; }
|
|
.section-title { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
|
|
.section-title > span { display: flex; align-items: center; gap: .5rem; }
|
|
.section-icon { width: 1.75rem; height: 1.75rem; color: #207bcc; filter: drop-shadow(0 0 5px rgba(26,124,210,.17)); }
|
|
.section-icon.leaf { color: #069c51; transform: rotate(-18deg); filter: drop-shadow(0 0 5px rgba(8,160,81,.2)); }
|
|
.open-section { width: 2rem; height: 2rem; padding: 0; border-radius: .7rem; color: #147bd5; font-size: .96rem; }
|
|
|
|
.co2-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin: .8rem .1rem .52rem; }
|
|
.co2-label { color: var(--widget-muted); font-size: .74rem; font-weight: 750; }
|
|
.co2-summary strong { text-align: center; font-size: 2rem; line-height: 1; letter-spacing: -.045em; }
|
|
.co2-summary strong small { color: var(--widget-muted); font-size: .62rem; font-weight: 650; letter-spacing: 0; }
|
|
.quality-chip { display: inline-flex; justify-content: center; padding: .32rem .62rem; border: 1px solid var(--tile-edge-soft); border-radius: 999px; background: rgba(199,222,235,.2); color: var(--widget-muted); font-size: .6rem; font-weight: 750; white-space: nowrap; }
|
|
.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); }
|
|
.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)); }
|
|
.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)); }
|
|
:root[data-theme="dark"] .quality-chip.good { color: #b9ffda; }
|
|
:root[data-theme="dark"] .quality-chip.warn { color: #ffd59e; }
|
|
:root[data-theme="dark"] .quality-chip.bad { color: #ffc0c8; }
|
|
|
|
.air-card {
|
|
--air-color: #7896ac;
|
|
--air-glow: rgba(93, 140, 171, .2);
|
|
--air-track: rgba(181, 203, 200, .28);
|
|
}
|
|
.air-card[data-air-tone="good"] {
|
|
--air-color: #1fbd69;
|
|
--air-glow: rgba(18, 199, 104, .34);
|
|
}
|
|
.air-card[data-air-tone="warn"] {
|
|
--air-color: #efa12b;
|
|
--air-glow: rgba(244, 161, 42, .35);
|
|
}
|
|
.air-card[data-air-tone="bad"] {
|
|
--air-color: #e8495c;
|
|
--air-glow: rgba(235, 74, 83, .36);
|
|
}
|
|
.co2-meter { height: .72rem; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; 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); overflow: hidden; transition: background-color .65s ease; }
|
|
.co2-meter i { display: block; width: 0; height: 100%; border-radius: inherit; 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; }
|
|
.meter-labels { display: flex; justify-content: space-between; margin-top: .27rem; padding: 0 .2rem; color: rgba(22,69,108,.78); font-size: .58rem; 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); }
|
|
.mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .52rem; margin-top: .68rem; }
|
|
.mini-metric { min-width: 0; min-height: 4.35rem; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .62rem .5rem; border: 1px solid var(--tile-edge-soft); border-radius: .9rem; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(107,151,177,.055)); box-shadow: inset 0 1px 0 rgba(255,255,255,.33); text-align: center; }
|
|
.metric-icon { width: 1.55rem; height: 1.55rem; flex: 0 0 auto; color: #137edc; filter: drop-shadow(0 0 4px rgba(20,124,221,.15)); }
|
|
.mini-metric span { min-width: 0; }
|
|
.mini-metric small { display: block; color: var(--widget-muted); font-size: .58rem; }
|
|
.mini-metric strong { display: block; margin-top: .2rem; font-size: 1.35rem; line-height: 1; letter-spacing: -.035em; }
|
|
|
|
.schedule-times { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: .7rem; margin-top: .75rem; padding: .15rem .25rem .25rem; }
|
|
.schedule-times > span { display: grid; justify-items: center; gap: .18rem; text-align: center; }
|
|
.schedule-times small { color: var(--widget-muted); font-size: .6rem; }
|
|
.schedule-times strong { font-size: 1.35rem; letter-spacing: -.035em; }
|
|
.schedule-times > i { width: 1px; height: 2.75rem; background: var(--tile-edge-soft); }
|
|
|
|
.open-panel {
|
|
min-height: 3.25rem;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: .65rem;
|
|
padding: .65rem .9rem;
|
|
border: 1px solid rgba(194,232,255,.84);
|
|
border-radius: 1rem;
|
|
color: white;
|
|
background:
|
|
radial-gradient(circle at 18% -35%, rgba(255,255,255,.52), transparent 47%),
|
|
linear-gradient(135deg, rgba(255,255,255,.13), transparent 43%),
|
|
linear-gradient(145deg, rgba(60,174,239,.92), rgba(17,113,194,.88));
|
|
box-shadow: 0 9px 20px rgba(15,92,183,.2), 0 0 9px rgba(48,151,239,.11), inset 0 1px 0 rgba(255,255,255,.84), inset 0 -3px 7px rgba(0,67,156,.15);
|
|
cursor: pointer;
|
|
font-size: .78rem;
|
|
font-weight: 760;
|
|
transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
|
|
}
|
|
.open-panel svg { width: 1.45rem; height: 1.45rem; }
|
|
.open-panel b { font-size: 1rem; }
|
|
.open-panel:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 11px 23px rgba(20,101,190,.23), 0 0 11px rgba(48,151,239,.13), inset 0 1px 0 rgba(255,255,255,.86); }
|
|
.open-panel:active { transform: scale(.99); }
|
|
.demo-note { color: var(--widget-muted); text-align: center; font-size: .58rem; }
|
|
|
|
:root[data-theme="dark"] .brand-icon { border-color: rgba(193,228,245,.25); background: radial-gradient(circle at 25% 2%, rgba(208,243,255,.16), transparent 43%), linear-gradient(145deg, rgba(38,125,187,.27), rgba(15,61,91,.26)); }
|
|
:root[data-theme="dark"] .hero-step { color: #76c7fa; border-color: rgba(192,226,244,.25); background: radial-gradient(circle at 24% 5%, rgba(213,240,252,.11), transparent 40%), linear-gradient(145deg, rgba(77,112,133,.23), rgba(20,44,59,.28)); box-shadow: 0 9px 21px rgba(0,0,0,.23), inset 0 1px 0 rgba(226,246,255,.12); }
|
|
:root[data-theme="dark"] .hero-step.primary { color: white; background: radial-gradient(circle at 24% 5%, rgba(214,246,255,.32), transparent 38%), linear-gradient(135deg, rgba(255,255,255,.08), transparent 42%, rgba(0,32,95,.17)), linear-gradient(145deg, #33aaf4, #0869d0 74%); box-shadow: 0 10px 24px rgba(0,53,119,.38), 0 0 11px rgba(41,162,244,.19), inset 0 1px 0 rgba(220,248,255,.4), inset 0 -3px 7px rgba(0,27,91,.27); }
|
|
:root[data-theme="dark"] .speed-segments button { border-color: rgba(192,226,244,.25); background: linear-gradient(180deg, rgba(91,136,162,.23), rgba(24,55,74,.28)); }
|
|
:root[data-theme="dark"] .speed-segments button.active { border-color: rgba(117,207,255,.48); background: linear-gradient(180deg, rgba(216,246,255,.19), transparent 48%), linear-gradient(90deg, #0877df, #20b7ff); box-shadow: 0 0 7px rgba(24,156,255,.27), inset 0 1px 0 rgba(223,248,255,.34); }
|
|
:root[data-theme="dark"] .glass-switch { color: #ddecf4; border-color: rgba(193,228,245,.25); background: linear-gradient(145deg, rgba(77,112,133,.23), rgba(20,44,59,.28)); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
|
|
:root[data-theme="dark"] .glass-switch[aria-pressed="true"].green,
|
|
:root[data-theme="dark"] .glass-switch[aria-pressed="true"].orange { color: #effff6; border-color: rgba(127,242,182,.4); background: radial-gradient(circle at 25% -8%, rgba(218,255,236,.3), transparent 42%), linear-gradient(132deg, rgba(255,255,255,.07), transparent 40%, rgba(0,45,23,.12)), linear-gradient(145deg, rgba(51,190,119,.52), rgba(9,102,59,.49)); box-shadow: 0 9px 21px rgba(0,0,0,.22), 0 0 9px rgba(37,207,121,.1), inset 0 1px 0 rgba(218,255,236,.32), inset 0 -3px 8px rgba(0,31,16,.16); }
|
|
:root[data-theme="dark"] .air-card { --air-track: rgba(8,28,39,.38); }
|
|
:root[data-theme="dark"] .air-card[data-air-tone="good"] { --air-glow: rgba(30, 224, 128, .3); }
|
|
:root[data-theme="dark"] .air-card[data-air-tone="warn"] { --air-glow: rgba(255, 176, 49, .3); }
|
|
:root[data-theme="dark"] .air-card[data-air-tone="bad"] { --air-glow: rgba(255, 82, 102, .32); }
|
|
:root[data-theme="dark"] .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); }
|
|
:root[data-theme="dark"] .mini-metric { background: linear-gradient(145deg, rgba(196,231,247,.055), rgba(3,24,37,.08)); box-shadow: inset 0 1px 0 rgba(224,246,255,.07); }
|
|
|
|
/* Wide monitor layout. The same markup stays vertical on narrow screens, so
|
|
controls and API behaviour cannot drift between two widget versions. */
|
|
:root[data-widget-layout="horizontal"] body {
|
|
padding: .36rem;
|
|
}
|
|
|
|
:root[data-widget-layout="horizontal"] .widget {
|
|
width: min(100%, 76rem);
|
|
max-width: none;
|
|
gap: .48rem;
|
|
padding: .58rem;
|
|
border-radius: 1.35rem;
|
|
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr);
|
|
grid-template-areas:
|
|
"header header header header"
|
|
"speed temperature power heater"
|
|
"air air schedule schedule"
|
|
"open open open open"
|
|
"demo demo demo demo";
|
|
align-items: stretch;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .widget-header {
|
|
grid-area: header;
|
|
min-height: 2.6rem;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
gap: .35rem .55rem;
|
|
padding: 0 .12rem;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .widget-header .identity { grid-column: 1; grid-row: 1; }
|
|
:root[data-widget-layout="horizontal"] .widget-header .status-row { grid-column: 2; grid-row: 1; }
|
|
:root[data-widget-layout="horizontal"] .widget-header .theme-button { grid-column: 3; grid-row: 1; }
|
|
:root[data-widget-layout="horizontal"] .identity { gap: .55rem; }
|
|
:root[data-widget-layout="horizontal"] .brand-icon { width: 2.45rem; height: 2.45rem; border-radius: .82rem; }
|
|
:root[data-widget-layout="horizontal"] .brand-icon svg { width: 1.48rem; height: 1.48rem; }
|
|
:root[data-widget-layout="horizontal"] .identity h1 { font-size: 1.42rem; }
|
|
:root[data-widget-layout="horizontal"] .identity-copy > small { margin-top: .18rem; font-size: .61rem; }
|
|
:root[data-widget-layout="horizontal"] .title-row { gap: .42rem; }
|
|
:root[data-widget-layout="horizontal"] .widget .pill { min-height: 1.52rem; padding: .2rem .5rem; font-size: .54rem; }
|
|
:root[data-widget-layout="horizontal"] .mode-detail { font-size: .59rem; }
|
|
:root[data-widget-layout="horizontal"] .theme-button { width: 2.2rem; height: 2.2rem; border-radius: .75rem; }
|
|
:root[data-widget-layout="horizontal"] .speed-card { grid-area: speed; }
|
|
:root[data-widget-layout="horizontal"] .temperature-card { grid-area: temperature; }
|
|
:root[data-widget-layout="horizontal"] .control-card {
|
|
min-height: 8.75rem;
|
|
padding: .66rem .78rem .58rem;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .card-title { gap: .5rem; }
|
|
:root[data-widget-layout="horizontal"] .card-title h2,
|
|
:root[data-widget-layout="horizontal"] .switch-title h2,
|
|
:root[data-widget-layout="horizontal"] .section-title h2 { font-size: .86rem; }
|
|
:root[data-widget-layout="horizontal"] .card-title p { margin-top: .1rem; font-size: .58rem; }
|
|
:root[data-widget-layout="horizontal"] .feature-icon { width: 1.65rem; height: 1.65rem; }
|
|
:root[data-widget-layout="horizontal"] .hero-control {
|
|
grid-template-columns: 2.75rem 1fr 2.75rem;
|
|
gap: .55rem;
|
|
margin: .46rem 0 .34rem;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .hero-step { width: 2.75rem; height: 2.75rem; border-radius: .78rem; font-size: 1.5rem; }
|
|
:root[data-widget-layout="horizontal"] .hero-value { font-size: 2.4rem; }
|
|
:root[data-widget-layout="horizontal"] .speed-segments button { height: .68rem; }
|
|
:root[data-widget-layout="horizontal"] .scale-labels,
|
|
:root[data-widget-layout="horizontal"] .temperature-labels { margin-top: .2rem; font-size: .52rem; }
|
|
:root[data-widget-layout="horizontal"] .temperature-range { height: 1.05rem; }
|
|
:root[data-widget-layout="horizontal"] .temperature-range::-webkit-slider-runnable-track { height: .55rem; }
|
|
:root[data-widget-layout="horizontal"] .temperature-range::-moz-range-track { height: .55rem; }
|
|
:root[data-widget-layout="horizontal"] .temperature-range::-webkit-slider-thumb { width: 1.32rem; height: 1.32rem; margin-top: -.4rem; border-width: .21rem; }
|
|
:root[data-widget-layout="horizontal"] .temperature-range::-moz-range-thumb { width: .9rem; height: .9rem; border-width: .21rem; }
|
|
:root[data-widget-layout="horizontal"] .switch-grid { display: contents; }
|
|
:root[data-widget-layout="horizontal"] .switch-grid > * { z-index: 1; }
|
|
:root[data-widget-layout="horizontal"] .power-card { grid-area: power; }
|
|
:root[data-widget-layout="horizontal"] .heater-card { grid-area: heater; }
|
|
:root[data-widget-layout="horizontal"] .switch-card {
|
|
min-height: 8.75rem;
|
|
gap: .45rem;
|
|
padding: .66rem .68rem .58rem;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .switch-title { gap: .4rem; }
|
|
:root[data-widget-layout="horizontal"] .switch-title small { font-size: .52rem; }
|
|
:root[data-widget-layout="horizontal"] .switch-icon { width: 1.5rem; height: 1.5rem; }
|
|
:root[data-widget-layout="horizontal"] .glass-switch { min-height: 2.7rem; border-radius: .78rem; font-size: 1.05rem; }
|
|
:root[data-widget-layout="horizontal"] .info-card { padding: .62rem .68rem; }
|
|
:root[data-widget-layout="horizontal"] .section-icon { width: 1.5rem; height: 1.5rem; }
|
|
:root[data-widget-layout="horizontal"] .open-section { width: 1.75rem; height: 1.75rem; border-radius: .58rem; font-size: .82rem; }
|
|
:root[data-widget-layout="horizontal"] .air-card {
|
|
grid-area: air;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.55fr) minmax(10.8rem, .82fr);
|
|
grid-template-rows: auto auto auto auto;
|
|
column-gap: .72rem;
|
|
align-content: start;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .air-card .section-title { grid-column: 1 / -1; grid-row: 1; }
|
|
:root[data-widget-layout="horizontal"] .air-card .co2-summary {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
margin: .42rem .05rem .3rem;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .air-card .co2-meter { grid-column: 1; grid-row: 3; }
|
|
:root[data-widget-layout="horizontal"] .air-card .meter-labels { grid-column: 1; grid-row: 4; }
|
|
:root[data-widget-layout="horizontal"] .air-card .mini-metrics {
|
|
grid-column: 2;
|
|
grid-row: 2 / 5;
|
|
align-self: stretch;
|
|
gap: .38rem;
|
|
margin-top: .4rem;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .air-card .mini-metric {
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
gap: .14rem;
|
|
padding: .35rem .25rem;
|
|
border-radius: .72rem;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .air-card .metric-icon { width: 1.25rem; height: 1.25rem; }
|
|
:root[data-widget-layout="horizontal"] .air-card .mini-metric small { font-size: .51rem; }
|
|
:root[data-widget-layout="horizontal"] .air-card .mini-metric strong { margin-top: .1rem; font-size: 1.08rem; }
|
|
:root[data-widget-layout="horizontal"] .air-card .co2-summary strong { font-size: 1.65rem; }
|
|
:root[data-widget-layout="horizontal"] .air-card .quality-chip { padding: .25rem .48rem; font-size: .54rem; }
|
|
:root[data-widget-layout="horizontal"] .co2-meter { height: .62rem; }
|
|
:root[data-widget-layout="horizontal"] .schedule-card { grid-area: schedule; }
|
|
:root[data-widget-layout="horizontal"] .air-card,
|
|
:root[data-widget-layout="horizontal"] .schedule-card { min-height: 6.9rem; }
|
|
:root[data-widget-layout="horizontal"] .schedule-times {
|
|
gap: .5rem;
|
|
margin-top: .42rem;
|
|
padding: .08rem .18rem .12rem;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .schedule-times small { font-size: .53rem; }
|
|
:root[data-widget-layout="horizontal"] .schedule-times strong { font-size: 1.18rem; }
|
|
:root[data-widget-layout="horizontal"] .schedule-times > i { height: 2.2rem; }
|
|
:root[data-widget-layout="horizontal"] .open-panel {
|
|
grid-area: open;
|
|
min-height: 2.45rem;
|
|
gap: .5rem;
|
|
padding: .38rem .75rem;
|
|
border-radius: .82rem;
|
|
font-size: .68rem;
|
|
}
|
|
:root[data-widget-layout="horizontal"] .open-panel svg { width: 1.15rem; height: 1.15rem; }
|
|
:root[data-widget-layout="horizontal"] .open-panel b { font-size: .85rem; }
|
|
:root[data-widget-layout="horizontal"] .demo-note { grid-area: demo; }
|
|
|
|
button:disabled { opacity: .58; cursor: default; transform: none !important; }
|
|
|
|
@media (min-width: 560px) and (min-height: 900px) {
|
|
html { font-size: 17px; }
|
|
:root[data-widget-layout="vertical"] .widget { width: min(100%, 33rem); }
|
|
}
|
|
|
|
@media (max-width: 380px) {
|
|
body { padding: .36rem; }
|
|
.widget { padding: .55rem; gap: .52rem; border-radius: 1.2rem; }
|
|
.brand-icon { width: 2.55rem; height: 2.55rem; }
|
|
.identity h1 { font-size: 1.38rem; }
|
|
.title-row { gap: .38rem; }
|
|
.widget .pill { padding-inline: .46rem; font-size: .54rem; }
|
|
.hero-control { grid-template-columns: 3.15rem 1fr 3.15rem; gap: .55rem; }
|
|
.hero-step { width: 3.15rem; height: 3.15rem; }
|
|
.hero-value { font-size: 2.65rem; }
|
|
.switch-grid { gap: .5rem; }
|
|
.switch-card { padding: .7rem; }
|
|
.switch-title { align-items: flex-start; }
|
|
.switch-title small { display: none; }
|
|
.co2-summary { grid-template-columns: auto 1fr; }
|
|
.co2-summary .quality-chip { grid-column: 1 / -1; justify-self: center; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-step:hover, .theme-button:hover, .open-section:hover, .glass-switch:hover, .open-panel:hover { transform: none; }
|
|
}
|