Kaloyan DanchevandClaude Opus 4.6
86191ba5f3
Panel fixes: tall card row_span, room tab styling, vacuum card image+value, AC airflow labels, AC fan speed sections (auto 3-btn + manual 5-step slider), light subtitle fallback, curtain pane dividers, dimmable light presets, LED panel brightness + reorder. New assets: 34 ui-icons (climate modes, cover, effects, battery, led-strip, switch states), 3 logos, 90 app surface PNGs, design system specs (components, ux-mechanics, tokens). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
177 lines
7.5 KiB
CSS
177 lines
7.5 KiB
CSS
/* Generated from tokens.json. For the Lovelace cards (cards/*.js) and web previews; the native renderer reads tokens.json. */
|
|
:root {
|
|
--luma-screen-width: 1920px;
|
|
--luma-screen-height: 1080px;
|
|
--luma-screen-margin-x: 84px;
|
|
--luma-screen-top-nav-y: 36px;
|
|
--luma-screen-top-nav-height: 72px;
|
|
--luma-screen-room-tabs-y: 124px;
|
|
--luma-screen-room-tabs-height: 60px;
|
|
--luma-screen-hint-bar-x: 84px;
|
|
--luma-screen-hint-bar-bottom: 30px;
|
|
--luma-grid-x: 84px;
|
|
--luma-grid-y: 206px;
|
|
--luma-grid-width: 1752px;
|
|
--luma-grid-height: 756px;
|
|
--luma-grid-rows: 3;
|
|
--luma-grid-gap: 18px;
|
|
--luma-grid-four-columns-columns: 4;
|
|
--luma-grid-four-columns-cell-w: 424px;
|
|
--luma-grid-four-columns-cell-h: 240px;
|
|
--luma-grid-three-columns-columns: 3;
|
|
--luma-grid-three-columns-cell-w: 572px;
|
|
--luma-grid-three-columns-cell-h: 240px;
|
|
--luma-grid-tall-card-h: 498px;
|
|
--luma-color-background-wallpaper-fallback: linear-gradient(160deg, #6D7F99 0%, #45526A 42%, #2B313C 100%);
|
|
--luma-color-background-scrim: rgba(8, 11, 18, 0.80);
|
|
--luma-color-background-spec-board: #161A21;
|
|
--luma-color-card-fill: rgba(34, 38, 46, 0.88);
|
|
--luma-color-card-fill-focus: rgba(54, 60, 72, 0.96);
|
|
--luma-color-card-border: rgba(255, 255, 255, 0.10);
|
|
--luma-color-card-border-focus: rgba(255, 255, 255, 0.24);
|
|
--luma-color-card-icon-circle-off: rgba(255, 255, 255, 0.10);
|
|
--luma-color-card-icon-off: rgba(255, 255, 255, 0.80);
|
|
--luma-color-card-icon-on: #15181E;
|
|
--luma-color-card-value-off: rgba(255, 255, 255, 0.60);
|
|
--luma-color-card-glow-on: radial-gradient(circle at 42px 42px, <accent @ 38%>, transparent 72%);
|
|
--luma-color-card-bar-track: rgba(255, 255, 255, 0.14);
|
|
--luma-color-card-line-off: rgba(255, 255, 255, 0.45);
|
|
--luma-color-panel-fill: rgba(30, 34, 42, 0.98);
|
|
--luma-color-panel-control: rgba(255, 255, 255, 0.10);
|
|
--luma-color-panel-control-selected-fill: <accent @ 26%>;
|
|
--luma-color-panel-control-selected-edge: inset 3px <accent>;
|
|
--luma-color-panel-section-label: rgba(255, 255, 255, 0.72);
|
|
--luma-color-panel-rule: rgba(255, 255, 255, 0.08);
|
|
--luma-color-text-primary: #FFFFFF;
|
|
--luma-color-text-secondary: rgba(255, 255, 255, 0.78);
|
|
--luma-color-text-subtitle: rgba(255, 255, 255, 0.72);
|
|
--luma-color-text-tertiary: rgba(255, 255, 255, 0.60);
|
|
--luma-color-text-on-light: #15181E;
|
|
--luma-color-text-tab-active-ink: #1F2630;
|
|
--luma-color-focus-ring: rgba(255, 255, 255, 0.96);
|
|
--luma-color-focus-gap: rgba(8, 11, 18, 0.85);
|
|
--luma-color-focus-gap-in-panel: #1E222A;
|
|
--luma-color-nav-pill: rgba(36, 40, 48, 0.90);
|
|
--luma-color-nav-active-tab: rgba(240, 244, 247, 0.95);
|
|
--luma-color-nav-active-room: rgba(255, 255, 255, 0.20);
|
|
--luma-color-nav-inactive: rgba(255, 255, 255, 0.72);
|
|
--luma-color-accent-light: #F5B85A;
|
|
--luma-color-accent-light-warm-white: #F7C27A;
|
|
--luma-color-accent-heat: #F06A4A;
|
|
--luma-color-accent-cool: #4C9BF0;
|
|
--luma-color-accent-switch: #7EB8DA;
|
|
--luma-color-accent-lock: #60C090;
|
|
--luma-color-accent-curtain: #DCD2B4;
|
|
--luma-color-accent-led: #E07A5F;
|
|
--luma-color-accent-media: #9B7DDB;
|
|
--luma-color-accent-media-label: #B9A2EC;
|
|
--luma-color-accent-vacuum: #60C090;
|
|
--luma-color-accent-warning: #F2B84B;
|
|
--luma-color-accent-effect-playing: #FF8A75;
|
|
--luma-color-accent-aq-good: #3DDC97;
|
|
--luma-color-accent-aq-fair: #F2B84B;
|
|
--luma-color-accent-aq-poor: #FF6B5A;
|
|
--luma-color-swatches-colour-1: #FF5A40;
|
|
--luma-color-swatches-colour-2: #F0A050;
|
|
--luma-color-swatches-colour-3: #F2D04B;
|
|
--luma-color-swatches-colour-4: #3DDC97;
|
|
--luma-color-swatches-colour-5: #4C9BF0;
|
|
--luma-color-swatches-colour-6: #7B5BE0;
|
|
--luma-color-swatches-colour-7: #E45AD8;
|
|
--luma-color-swatches-colour-8: #FFFFFF;
|
|
--luma-color-swatches-white-2700k: #FFB46B;
|
|
--luma-color-swatches-white-3000k: #FFC98F;
|
|
--luma-color-swatches-white-4000k: #FFE2C0;
|
|
--luma-color-swatches-white-5000k: #FFF4E6;
|
|
--luma-color-swatches-white-6500k: #E3EEFF;
|
|
--luma-color-room-photo-gradient: linear-gradient(180deg, rgba(8,11,18,0.78) 0%, rgba(8,11,18,0) 32%, rgba(8,11,18,0) 40%, rgba(8,11,18,0.84) 66%, rgba(8,11,18,0.94) 100%);
|
|
--luma-color-room-photo-dark-filter: brightness(0.45) saturate(0.2);
|
|
--luma-color-room-photo-text-shadow: 0 1px 6px rgba(0,0,0,0.75);
|
|
--luma-type-family: Inter (fallback: system sans);
|
|
--luma-type-weights-regular: 400;
|
|
--luma-type-weights-medium: 500;
|
|
--luma-type-weights-semibold: 600;
|
|
--luma-type-weights-bold: 700;
|
|
--luma-type-size-clock: 20px;
|
|
--luma-type-size-top-nav: 20px;
|
|
--luma-type-size-room-tab: 17px;
|
|
--luma-type-size-card-name: 19px;
|
|
--luma-type-size-card-value: 20px;
|
|
--luma-type-size-card-subtitle: 14px;
|
|
--luma-type-size-card-fact: 14px;
|
|
--luma-type-size-card-fact-label: 12px;
|
|
--luma-type-size-panel-eyebrow: 16px;
|
|
--luma-type-size-panel-title: 34px;
|
|
--luma-type-size-panel-section: 19px;
|
|
--luma-type-size-panel-value: 19px;
|
|
--luma-type-size-hint: 14px;
|
|
--luma-type-size-hint-key: 11px;
|
|
--luma-type-size-media-title-small: 19px;
|
|
--luma-type-size-media-title-large: 24px;
|
|
--luma-type-size-media-artist-small: 15px;
|
|
--luma-type-size-media-artist-large: 17px;
|
|
--luma-type-size-media-status: 13px;
|
|
--luma-type-size-panel-state: 18px;
|
|
--luma-type-size-panel-help: 15px;
|
|
--luma-type-size-panel-slider-value: 28px;
|
|
--luma-type-size-panel-button: 20px;
|
|
--luma-type-text-scale-default: 1;
|
|
--luma-type-text-scale-min: 1;
|
|
--luma-type-text-scale-max: 1.6;
|
|
--luma-size-card-padding: 18px;
|
|
--luma-size-card-radius: 22px;
|
|
--luma-size-icon-circle: 48px;
|
|
--luma-size-icon: 24px;
|
|
--luma-size-card-inner-gap: 14px;
|
|
--luma-size-middle-band-margin: 12 0 10;
|
|
--luma-size-level-bar: 12px;
|
|
--luma-size-colour-strip: 34px;
|
|
--luma-size-spark-height: 64px;
|
|
--luma-size-panel-width: 620px;
|
|
--luma-size-panel-height: 1080px;
|
|
--luma-size-panel-radius: 28px;
|
|
--luma-size-panel-padding: 56 56 48;
|
|
--luma-size-panel-header-icon: 56px;
|
|
--luma-size-panel-header-icon-glyph: 30px;
|
|
--luma-size-panel-section-gap: 40px;
|
|
--luma-size-panel-label-to-control: 14px;
|
|
--luma-size-panel-slider-height: 72px;
|
|
--luma-size-panel-slider-radius: 18px;
|
|
--luma-size-panel-button-height: 64px;
|
|
--luma-size-panel-button-radius: 16px;
|
|
--luma-size-panel-button-gap: 12px;
|
|
--luma-size-panel-list-row-height: 54px;
|
|
--luma-size-panel-focus-ring-offset: 5px;
|
|
--luma-size-media-art-small: 84px;
|
|
--luma-size-media-art-large: 220px;
|
|
--luma-size-media-button-small: 52px;
|
|
--luma-size-media-button-play: 62px;
|
|
--luma-size-media-progress: 4px;
|
|
--luma-size-focus-ring-width: 4px;
|
|
--luma-size-focus-ring-offset: 4px;
|
|
--luma-size-focus-ring-card-scale: 1.04px;
|
|
--luma-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
|
|
--luma-shadow-card-focus: 0 16px 36px rgba(0, 0, 0, 0.50);
|
|
--luma-shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.50);
|
|
--luma-motion-focus: 120ms ease-out;
|
|
--luma-motion-panel-open: 200ms ease-out, slide from right;
|
|
--luma-motion-bubble-fade: 1000ms after release;
|
|
--luma-timing-hold-threshold-ms: 400ms;
|
|
--luma-timing-arrow-repeat-delay-ms: 400ms;
|
|
--luma-timing-arrow-repeat-ms: 150ms;
|
|
--luma-timing-step-double-after-ms: 2000ms;
|
|
--luma-timing-send-debounce-ms: 200ms;
|
|
--luma-timing-confirm-timeout-ms: 5000ms;
|
|
--luma-timing-error-hint-ms: 4000ms;
|
|
--luma-timing-volume-pill-ms: 1500ms;
|
|
--luma-timing-seek-step-ms: 300ms;
|
|
--luma-timing-seek-step-s: 10;
|
|
--luma-timing-seek-step-fast-s: 30;
|
|
--luma-timing-seek-fast-after-ms: 2000ms;
|
|
--luma-timing-previous-restart-after-s: 3;
|
|
--luma-timing-volume-step-pct: 2;
|
|
--luma-air-quality-metric: CO2 ppm;
|
|
--luma-air-quality-good-below: 800;
|
|
--luma-air-quality-poor-above: 1200;
|
|
}
|