From 92ea8fa03c5b3b842e846fb81b307a9c7aa4b3d0 Mon Sep 17 00:00:00 2001 From: Matysh Date: Sat, 1 Aug 2026 10:27:34 +0300 Subject: [PATCH] device satellites: the size multiplier scales the value plate and labels too MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Owner report (2026-08-01, screenshot): a device scaled up via marker.size kept its value badge at the default size — an enlarged icon next to a tiny '26.6°'. Same bug class as the v1.51.3 glyph fix (3456706): satellite metrics were pinned to the base --icon-size, so --dev-scale grew the box but nothing that belongs to it visually. All .dev satellites now derive from var(--dev-size, var(--icon-size, 2.5cqw)) — which equals icon-size * dev-scale — keeping the exact same coefficients, so at size=1 nothing changes pixel-wise: - .valonly plate padding (0.16) and .valtext font (0.45) - .tval/.hval plates: margin (0.1), radius (0.18), padding (0.14), line-height (0.68) — font was already dev-size, the plate was not - .lqi label: margin (0.05), font (0.38) - .newdot: offsets (-0.12), diameter (0.34) - .alarm ring inset (-0.35) smoke_icon_scale extended: value badge and temp plate must double at size=2 (getBoundingClientRect + computed font-size, 1.8-2.2 tolerance) and keep the exact old defaults at size=1; verified failing on the pre-fix build. space-card renders bare icons only, unaffected. --- .../houseplan/frontend/houseplan-card.js | 38 ++++++------ demo/smoke_icon_scale.mjs | 58 ++++++++++++++++++- demo/srv/assets/houseplan-card.js | 38 ++++++------ dist/houseplan-card.js | 38 ++++++------ src/styles.ts | 38 ++++++------ 5 files changed, 141 insertions(+), 69 deletions(-) diff --git a/custom_components/houseplan/frontend/houseplan-card.js b/custom_components/houseplan/frontend/houseplan-card.js index 2bc9d2fb..f049748d 100755 --- a/custom_components/houseplan/frontend/houseplan-card.js +++ b/custom_components/houseplan/frontend/houseplan-card.js @@ -869,12 +869,16 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow width: 130px; } .dev.valonly { + /* all satellite metrics from --dev-size, not --icon-size: the per-device + size multiplier must scale the value plate with its marker — same bug + class as the v1.51.3 glyph fix (pinned to base size, the multiplier + grew nothing). */ width: auto; min-width: var(--dev-size, var(--icon-size, 2.5cqw)); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.16); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.16); } .dev.valonly .valtext { - font-size: calc(var(--icon-size, 2.5cqw) * 0.45); + font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; white-space: nowrap; } @@ -886,7 +890,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow .dev.alarm::after { content: ''; position: absolute; - inset: calc(var(--icon-size, 2.5cqw) * -0.35); + inset: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.35); border: 3px solid #f25a4a; border-radius: 50%; animation: hp-alarm 1s ease-out infinite; @@ -901,10 +905,10 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow } .dev .newdot { position: absolute; - top: calc(var(--icon-size, 2.5cqw) * -0.12); - right: calc(var(--icon-size, 2.5cqw) * -0.12); - width: calc(var(--icon-size, 2.5cqw) * 0.34); - height: calc(var(--icon-size, 2.5cqw) * 0.34); + top: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.12); + right: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.12); + width: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.34); + height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.34); border-radius: 50%; background: #f0301f; border: 2px solid var(--card-background-color, var(--hp-bg)); @@ -996,14 +1000,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow left: 100%; top: 50%; transform: translateY(-50%); - margin-left: calc(var(--icon-size, 2.5cqw) * 0.1); + margin-left: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.1); background: var(--card-background-color, var(--hp-bg)); border: 1px solid var(--hp-accent); - border-radius: calc(var(--icon-size, 2.5cqw) * 0.18); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14); + border-radius: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.18); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.14); font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; - line-height: calc(var(--icon-size, 2.5cqw) * 0.68); + line-height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.68); color: var(--hp-txt); white-space: nowrap; pointer-events: none; @@ -1013,14 +1017,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow left: 100%; top: 50%; transform: translateY(-50%); - margin-left: calc(var(--icon-size, 2.5cqw) * 0.1); + margin-left: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.1); background: var(--card-background-color, var(--hp-bg)); border: 1px solid #4fc3f7; - border-radius: calc(var(--icon-size, 2.5cqw) * 0.18); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14); + border-radius: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.18); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.14); font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; - line-height: calc(var(--icon-size, 2.5cqw) * 0.68); + line-height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.68); color: var(--hp-txt); white-space: nowrap; pointer-events: none; @@ -1030,8 +1034,8 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow top: 100%; left: 50%; transform: translateX(-50%); - margin-top: calc(var(--icon-size, 2.5cqw) * 0.05); - font-size: calc(var(--icon-size, 2.5cqw) * 0.38); + margin-top: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.05); + font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.38); font-weight: 700; line-height: 1; text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9); diff --git a/demo/smoke_icon_scale.mjs b/demo/smoke_icon_scale.mjs index e2a5f17c..2110d9e2 100644 --- a/demo/smoke_icon_scale.mjs +++ b/demo/smoke_icon_scale.mjs @@ -35,4 +35,60 @@ const out = await page.evaluate(async () => { c._cfgEpoch++; c._regSignature = ''; c._maybeRebuildDevices(); return o; }); -await finish(browser, checkAll(out)); +checkAll(out); + +// Тот же класс бага для СПУТНИКОВ значка (репорт владельца, 2026-08-01): +// бейдж значения (display:value) и temp-плашка считались от базового +// --icon-size и оставались маленькими при size=2. Всё, что визуально +// принадлежит устройству, обязано расти вместе с --dev-scale. +const out2 = await page.evaluate(async () => { + const o = {}; + const c = window.__card; + const sr = () => c.shadowRoot || c.renderRoot; + const devEl = () => { + const idx = c._devices.filter((x) => x.space === c._space).findIndex((x) => x.id === 'd_temp'); + return sr().querySelectorAll('.dev')[idx]; + }; + const setMarker = async (extra) => { + c._serverCfg.markers = (c._serverCfg.markers || []).filter((m) => m.id !== 'd_temp'); + c._serverCfg.markers.push({ id: 'd_temp', binding: 'device:d_temp', ...extra }); + c._cfgEpoch++; c._regSignature = ''; + c._maybeRebuildDevices(); c.requestUpdate(); await c.updateComplete; + await new Promise((r) => setTimeout(r, 80)); + }; + const fs = (el) => parseFloat(getComputedStyle(el).fontSize); + // базовый --icon-size в px: ширина немасштабированного бейджа минус рамка 1px×2 + const plain = [...sr().querySelectorAll('.dev')].find( + (e) => !e.classList.contains('ghost') && !e.classList.contains('valonly') && !(e.getAttribute('style') || '').includes('--dev-scale')); + const iconPx = plain.getBoundingClientRect().width - 2; + + // --- бейдж значения (valonly) --- + await setMarker({ display: 'value', size: 1 }); + const v1 = devEl().getBoundingClientRect(); + const vf1 = fs(devEl().querySelector('.valtext')); + // при size=1 дефолт не изменился: шрифт ровно прежние 0.45 * icon-size + o.valDefaultKept = Math.abs(vf1 - iconPx * 0.45) < 0.75; + await setMarker({ display: 'value', size: 2 }); + const v2 = devEl().getBoundingClientRect(); + const vf2 = fs(devEl().querySelector('.valtext')); + o.valFontScales = vf2 / vf1 > 1.8 && vf2 / vf1 < 2.2; + o.valPlateScales = (v2.height - 2) / (v1.height - 2) > 1.8 && (v2.height - 2) / (v1.height - 2) < 2.2 + && v2.width / v1.width > 1.6 && v2.width / v1.width < 2.4; + + // --- temp-плашка (.tval) рядом со значком --- + await setMarker({ size: 1 }); + const t1 = devEl().querySelector('.tval').getBoundingClientRect(); + const tf1 = fs(devEl().querySelector('.tval')); + // дефолт: line-height 0.68 * icon-size + рамка 1px×2 + o.tvalDefaultKept = Math.abs(t1.height - (iconPx * 0.68 + 2)) < 1; + await setMarker({ size: 2 }); + const t2 = devEl().querySelector('.tval').getBoundingClientRect(); + const tf2 = fs(devEl().querySelector('.tval')); + o.tvalScales = (t2.height - 2) / (t1.height - 2) > 1.8 && (t2.height - 2) / (t1.height - 2) < 2.2 + && tf2 / tf1 > 1.8 && tf2 / tf1 < 2.2; + + c._serverCfg.markers = c._serverCfg.markers.filter((m) => m.id !== 'd_temp'); + c._cfgEpoch++; c._regSignature = ''; c._maybeRebuildDevices(); + return o; +}); +await finish(browser, checkAll(out2)); diff --git a/demo/srv/assets/houseplan-card.js b/demo/srv/assets/houseplan-card.js index 2bc9d2fb..f049748d 100755 --- a/demo/srv/assets/houseplan-card.js +++ b/demo/srv/assets/houseplan-card.js @@ -869,12 +869,16 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow width: 130px; } .dev.valonly { + /* all satellite metrics from --dev-size, not --icon-size: the per-device + size multiplier must scale the value plate with its marker — same bug + class as the v1.51.3 glyph fix (pinned to base size, the multiplier + grew nothing). */ width: auto; min-width: var(--dev-size, var(--icon-size, 2.5cqw)); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.16); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.16); } .dev.valonly .valtext { - font-size: calc(var(--icon-size, 2.5cqw) * 0.45); + font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; white-space: nowrap; } @@ -886,7 +890,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow .dev.alarm::after { content: ''; position: absolute; - inset: calc(var(--icon-size, 2.5cqw) * -0.35); + inset: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.35); border: 3px solid #f25a4a; border-radius: 50%; animation: hp-alarm 1s ease-out infinite; @@ -901,10 +905,10 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow } .dev .newdot { position: absolute; - top: calc(var(--icon-size, 2.5cqw) * -0.12); - right: calc(var(--icon-size, 2.5cqw) * -0.12); - width: calc(var(--icon-size, 2.5cqw) * 0.34); - height: calc(var(--icon-size, 2.5cqw) * 0.34); + top: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.12); + right: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.12); + width: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.34); + height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.34); border-radius: 50%; background: #f0301f; border: 2px solid var(--card-background-color, var(--hp-bg)); @@ -996,14 +1000,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow left: 100%; top: 50%; transform: translateY(-50%); - margin-left: calc(var(--icon-size, 2.5cqw) * 0.1); + margin-left: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.1); background: var(--card-background-color, var(--hp-bg)); border: 1px solid var(--hp-accent); - border-radius: calc(var(--icon-size, 2.5cqw) * 0.18); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14); + border-radius: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.18); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.14); font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; - line-height: calc(var(--icon-size, 2.5cqw) * 0.68); + line-height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.68); color: var(--hp-txt); white-space: nowrap; pointer-events: none; @@ -1013,14 +1017,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow left: 100%; top: 50%; transform: translateY(-50%); - margin-left: calc(var(--icon-size, 2.5cqw) * 0.1); + margin-left: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.1); background: var(--card-background-color, var(--hp-bg)); border: 1px solid #4fc3f7; - border-radius: calc(var(--icon-size, 2.5cqw) * 0.18); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14); + border-radius: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.18); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.14); font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; - line-height: calc(var(--icon-size, 2.5cqw) * 0.68); + line-height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.68); color: var(--hp-txt); white-space: nowrap; pointer-events: none; @@ -1030,8 +1034,8 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow top: 100%; left: 50%; transform: translateX(-50%); - margin-top: calc(var(--icon-size, 2.5cqw) * 0.05); - font-size: calc(var(--icon-size, 2.5cqw) * 0.38); + margin-top: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.05); + font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.38); font-weight: 700; line-height: 1; text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9); diff --git a/dist/houseplan-card.js b/dist/houseplan-card.js index 2bc9d2fb..f049748d 100755 --- a/dist/houseplan-card.js +++ b/dist/houseplan-card.js @@ -869,12 +869,16 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow width: 130px; } .dev.valonly { + /* all satellite metrics from --dev-size, not --icon-size: the per-device + size multiplier must scale the value plate with its marker — same bug + class as the v1.51.3 glyph fix (pinned to base size, the multiplier + grew nothing). */ width: auto; min-width: var(--dev-size, var(--icon-size, 2.5cqw)); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.16); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.16); } .dev.valonly .valtext { - font-size: calc(var(--icon-size, 2.5cqw) * 0.45); + font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; white-space: nowrap; } @@ -886,7 +890,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow .dev.alarm::after { content: ''; position: absolute; - inset: calc(var(--icon-size, 2.5cqw) * -0.35); + inset: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.35); border: 3px solid #f25a4a; border-radius: 50%; animation: hp-alarm 1s ease-out infinite; @@ -901,10 +905,10 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow } .dev .newdot { position: absolute; - top: calc(var(--icon-size, 2.5cqw) * -0.12); - right: calc(var(--icon-size, 2.5cqw) * -0.12); - width: calc(var(--icon-size, 2.5cqw) * 0.34); - height: calc(var(--icon-size, 2.5cqw) * 0.34); + top: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.12); + right: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.12); + width: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.34); + height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.34); border-radius: 50%; background: #f0301f; border: 2px solid var(--card-background-color, var(--hp-bg)); @@ -996,14 +1000,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow left: 100%; top: 50%; transform: translateY(-50%); - margin-left: calc(var(--icon-size, 2.5cqw) * 0.1); + margin-left: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.1); background: var(--card-background-color, var(--hp-bg)); border: 1px solid var(--hp-accent); - border-radius: calc(var(--icon-size, 2.5cqw) * 0.18); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14); + border-radius: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.18); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.14); font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; - line-height: calc(var(--icon-size, 2.5cqw) * 0.68); + line-height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.68); color: var(--hp-txt); white-space: nowrap; pointer-events: none; @@ -1013,14 +1017,14 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow left: 100%; top: 50%; transform: translateY(-50%); - margin-left: calc(var(--icon-size, 2.5cqw) * 0.1); + margin-left: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.1); background: var(--card-background-color, var(--hp-bg)); border: 1px solid #4fc3f7; - border-radius: calc(var(--icon-size, 2.5cqw) * 0.18); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14); + border-radius: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.18); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.14); font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; - line-height: calc(var(--icon-size, 2.5cqw) * 0.68); + line-height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.68); color: var(--hp-txt); white-space: nowrap; pointer-events: none; @@ -1030,8 +1034,8 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow top: 100%; left: 50%; transform: translateX(-50%); - margin-top: calc(var(--icon-size, 2.5cqw) * 0.05); - font-size: calc(var(--icon-size, 2.5cqw) * 0.38); + margin-top: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.05); + font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.38); font-weight: 700; line-height: 1; text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9); diff --git a/src/styles.ts b/src/styles.ts index 22fe5968..09ca5833 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -866,12 +866,16 @@ export const cardStyles = css` width: 130px; } .dev.valonly { + /* all satellite metrics from --dev-size, not --icon-size: the per-device + size multiplier must scale the value plate with its marker — same bug + class as the v1.51.3 glyph fix (pinned to base size, the multiplier + grew nothing). */ width: auto; min-width: var(--dev-size, var(--icon-size, 2.5cqw)); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.16); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.16); } .dev.valonly .valtext { - font-size: calc(var(--icon-size, 2.5cqw) * 0.45); + font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; white-space: nowrap; } @@ -883,7 +887,7 @@ export const cardStyles = css` .dev.alarm::after { content: ''; position: absolute; - inset: calc(var(--icon-size, 2.5cqw) * -0.35); + inset: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.35); border: 3px solid #f25a4a; border-radius: 50%; animation: hp-alarm 1s ease-out infinite; @@ -898,10 +902,10 @@ export const cardStyles = css` } .dev .newdot { position: absolute; - top: calc(var(--icon-size, 2.5cqw) * -0.12); - right: calc(var(--icon-size, 2.5cqw) * -0.12); - width: calc(var(--icon-size, 2.5cqw) * 0.34); - height: calc(var(--icon-size, 2.5cqw) * 0.34); + top: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.12); + right: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * -0.12); + width: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.34); + height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.34); border-radius: 50%; background: #f0301f; border: 2px solid var(--card-background-color, var(--hp-bg)); @@ -993,14 +997,14 @@ export const cardStyles = css` left: 100%; top: 50%; transform: translateY(-50%); - margin-left: calc(var(--icon-size, 2.5cqw) * 0.1); + margin-left: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.1); background: var(--card-background-color, var(--hp-bg)); border: 1px solid var(--hp-accent); - border-radius: calc(var(--icon-size, 2.5cqw) * 0.18); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14); + border-radius: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.18); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.14); font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; - line-height: calc(var(--icon-size, 2.5cqw) * 0.68); + line-height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.68); color: var(--hp-txt); white-space: nowrap; pointer-events: none; @@ -1010,14 +1014,14 @@ export const cardStyles = css` left: 100%; top: 50%; transform: translateY(-50%); - margin-left: calc(var(--icon-size, 2.5cqw) * 0.1); + margin-left: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.1); background: var(--card-background-color, var(--hp-bg)); border: 1px solid #4fc3f7; - border-radius: calc(var(--icon-size, 2.5cqw) * 0.18); - padding: 0 calc(var(--icon-size, 2.5cqw) * 0.14); + border-radius: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.18); + padding: 0 calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.14); font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.45); font-weight: 700; - line-height: calc(var(--icon-size, 2.5cqw) * 0.68); + line-height: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.68); color: var(--hp-txt); white-space: nowrap; pointer-events: none; @@ -1027,8 +1031,8 @@ export const cardStyles = css` top: 100%; left: 50%; transform: translateX(-50%); - margin-top: calc(var(--icon-size, 2.5cqw) * 0.05); - font-size: calc(var(--icon-size, 2.5cqw) * 0.38); + margin-top: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.05); + font-size: calc(var(--dev-size, var(--icon-size, 2.5cqw)) * 0.38); font-weight: 700; line-height: 1; text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);