diff --git a/src/components/ha-control-select-menu.ts b/src/components/ha-control-select-menu.ts index a275e3e4f5..40ce91d979 100644 --- a/src/components/ha-control-select-menu.ts +++ b/src/components/ha-control-select-menu.ts @@ -238,6 +238,11 @@ export class HaControlSelectMenu extends SelectBase { opacity: var(--control-select-menu-background-opacity); } + .select-disabled .select-anchor { + cursor: not-allowed; + color: var(--disabled-color); + } + mwc-menu { --mdc-shape-medium: 8px; } diff --git a/src/components/ha-icon-button-toggle.ts b/src/components/ha-icon-button-toggle.ts index 56d0b37c82..684a9f4dfe 100644 --- a/src/components/ha-icon-button-toggle.ts +++ b/src/components/ha-icon-button-toggle.ts @@ -38,7 +38,7 @@ export class HaIconButtonToggle extends HaIconButton { :host([selected]) mwc-icon-button { color: var(--primary-background-color); } - :host([selected]) mwc-icon-button::before { + :host([selected]:not([disabled])) mwc-icon-button::before { opacity: 1; } `; diff --git a/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts b/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts index 95be20ac85..372c7dae20 100644 --- a/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts +++ b/src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts @@ -16,6 +16,7 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../../data/climate"; import { UNAVAILABLE } from "../../../../data/entity"; import { computeCssVariable } from "../../../../resources/css-variables"; import { HomeAssistant } from "../../../../types"; +import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style"; @customElement("ha-more-info-climate-humidity") export class HaMoreInfoClimateHumidity extends LitElement { @@ -78,8 +79,16 @@ export class HaMoreInfoClimateHumidity extends LitElement { } private _renderLabel() { + if (this.stateObj.state === UNAVAILABLE) { + return html` +

+ ${this.hass.formatEntityState(this.stateObj, UNAVAILABLE)} +

+ `; + } + return html` -

+

${this.hass.localize( "ui.dialogs.more_info_control.climate.humidity_target" )} @@ -131,7 +140,7 @@ export class HaMoreInfoClimateHumidity extends LitElement { const active = stateActive(this.stateObj); // Use humidifier state color - const mainColor = computeCssVariable( + const stateColor = computeCssVariable( domainStateColorProperties( "humidifier", this.stateObj, @@ -142,12 +151,16 @@ export class HaMoreInfoClimateHumidity extends LitElement { const targetHumidity = this._targetHumidity; const currentHumidity = this.stateObj.attributes.current_humidity; - if (supportsTargetHumidity && targetHumidity != null) { + if ( + supportsTargetHumidity && + targetHumidity != null && + this.stateObj.state !== UNAVAILABLE + ) { return html`

-
${this._renderLabel()}
+
${this._renderLabel()}
${this._renderTarget(targetHumidity)}
@@ -175,152 +187,40 @@ export class HaMoreInfoClimateHumidity extends LitElement { return html`
+
+
${this._renderLabel()}
+
`; } static get styles(): CSSResultGroup { - return css` - /* Layout */ - .container { - position: relative; - } - .info { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - pointer-events: none; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.1px; - } - .info * { - margin: 0; - pointer-events: auto; - } - /* Elements */ - .target-container { - margin-bottom: 30px; - } - .target .value { - font-size: 56px; - line-height: 1; - letter-spacing: -0.25px; - } - .target .value .unit { - font-size: 0.4em; - line-height: 1; - margin-left: 2px; - } - .action-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 200px; - height: 48px; - margin-bottom: 6px; - } - .action { - font-weight: 500; - text-align: center; - color: var(--action-color, inherit); - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - .dual { - display: flex; - flex-direction: row; - gap: 24px; - margin-bottom: 40px; - } - - .dual button { - outline: none; - background: none; - color: inherit; - font-family: inherit; - -webkit-tap-highlight-color: transparent; - border: none; - opacity: 0.5; - padding: 0; - transition: - opacity 180ms ease-in-out, - transform 180ms ease-in-out; - cursor: pointer; - } - .dual button:focus-visible { - transform: scale(1.1); - } - .dual button.selected { - opacity: 1; - } - .buttons { - position: absolute; - bottom: 10px; - left: 0; - right: 0; - margin: 0 auto; - width: 120px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - } - .buttons ha-outlined-icon-button { - --md-outlined-icon-button-container-size: 48px; - --md-outlined-icon-button-icon-size: 24px; - } - /* Accessibility */ - .visually-hidden { - position: absolute; - overflow: hidden; - clip: rect(0 0 0 0); - height: 1px; - width: 1px; - margin: -1px; - padding: 0; - border: 0; - } - /* Slider */ - ha-control-circular-slider { - --control-circular-slider-color: var( - --main-color, - var(--disabled-color) - ); - } - ha-control-circular-slider::after { - display: block; - content: ""; - position: absolute; - top: -10%; - left: -10%; - right: -10%; - bottom: -10%; - background: radial-gradient( - 50% 50% at 50% 50%, - var(--action-color, transparent) 0%, - transparent 100% - ); - opacity: 0.15; - pointer-events: none; - } - `; + return [ + moreInfoControlCircularSliderStyle, + css` + /* Elements */ + .target-container { + margin-bottom: 30px; + } + .target .value { + font-size: 58px; + line-height: 1; + letter-spacing: -0.25px; + } + .target .value .unit { + font-size: 0.4em; + line-height: 1; + margin-left: 2px; + } + `, + ]; } } diff --git a/src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts b/src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts index 9f33ba5e34..e9ddb81c11 100644 --- a/src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts +++ b/src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts @@ -27,6 +27,7 @@ import { } from "../../../../data/climate"; import { UNAVAILABLE } from "../../../../data/entity"; import { HomeAssistant } from "../../../../types"; +import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style"; type Target = "value" | "low" | "high"; @@ -137,7 +138,15 @@ export class HaMoreInfoClimateTemperature extends LitElement { this._selectTargetTemperature = target; } - private _renderHvacAction() { + private _renderLabel() { + if (this.stateObj.state === UNAVAILABLE) { + return html` +

+ ${this.hass.formatEntityState(this.stateObj, UNAVAILABLE)} +

+ `; + } + const action = this.stateObj.attributes.hvac_action; const actionLabel = computeAttributeValueDisplay( @@ -150,7 +159,7 @@ export class HaMoreInfoClimateTemperature extends LitElement { ) as string; return html` -

+

${action && ["preheating", "heating", "cooling"].includes(action) ? this.hass.localize( "ui.dialogs.more_info_control.climate.target_label", @@ -246,7 +255,7 @@ export class HaMoreInfoClimateTemperature extends LitElement { const action = this.stateObj.attributes.hvac_action; const active = stateActive(this.stateObj); - const mainColor = stateColorCss(this.stateObj); + const stateColor = stateColorCss(this.stateObj); const lowColor = stateColorCss(this.stateObj, active ? "heat" : "off"); const highColor = stateColorCss(this.stateObj, active ? "cool" : "off"); @@ -260,7 +269,11 @@ export class HaMoreInfoClimateTemperature extends LitElement { const hvacModes = this.stateObj.attributes.hvac_modes; - if (supportsTargetTemperature && this._targetTemperature.value != null) { + if ( + supportsTargetTemperature && + this._targetTemperature.value != null && + this.stateObj.state !== UNAVAILABLE + ) { const hasOnlyCoolMode = hvacModes.length === 2 && hvacModes.includes("cool") && @@ -269,7 +282,7 @@ export class HaMoreInfoClimateTemperature extends LitElement {

@@ -280,13 +293,12 @@ export class HaMoreInfoClimateTemperature extends LitElement { .max=${this._max} .step=${this._step} .current=${this.stateObj.attributes.current_temperature} - .disabled=${this.stateObj!.state === UNAVAILABLE} @value-changed=${this._valueChanged} @value-changing=${this._valueChanging} >
-
${this._renderHvacAction()}
+
${this._renderLabel()}
${this._renderTargetTemperature(this._targetTemperature.value)}
@@ -299,7 +311,8 @@ export class HaMoreInfoClimateTemperature extends LitElement { if ( supportsTargetTemperatureRange && this._targetTemperature.low != null && - this._targetTemperature.high != null + this._targetTemperature.high != null && + this.stateObj.state !== UNAVAILABLE ) { return html`
-
${this._renderHvacAction()}
+
${this._renderLabel()}
`; } static get styles(): CSSResultGroup { - return css` - /* Layout */ - .container { - position: relative; - } - .info { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - pointer-events: none; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.1px; - } - .info * { - margin: 0; - pointer-events: auto; - } - /* Elements */ - .temperature-container { - margin-bottom: 30px; - } - .temperature { - display: inline-flex; - font-size: 58px; - line-height: 64px; - letter-spacing: -0.25px; - margin: 0; - } - .temperature span { - display: inline-flex; - } - .temperature .unit { - font-size: 24px; - line-height: 40px; - } - .temperature .decimal { - font-size: 24px; - line-height: 40px; - align-self: flex-end; - margin-right: -18px; - } - .action-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 200px; - height: 48px; - margin-bottom: 6px; - } - .action { - font-weight: 500; - text-align: center; - color: var(--action-color, inherit); - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - .dual { - display: flex; - flex-direction: row; - gap: 24px; - margin-bottom: 40px; - } + return [ + moreInfoControlCircularSliderStyle, + css` + /* Elements */ + .temperature-container { + margin-bottom: 30px; + } + .temperature { + display: inline-flex; + font-size: 58px; + line-height: 64px; + letter-spacing: -0.25px; + margin: 0; + } + .temperature span { + display: inline-flex; + } + .temperature .decimal { + font-size: 24px; + line-height: 32px; + align-self: flex-end; + width: 20px; + margin-bottom: 4px; + } + .temperature .unit { + font-size: 20px; + line-height: 24px; + align-self: flex-start; + margin-left: -20px; + width: 20px; + margin-top: 4px; + } - .dual button { - outline: none; - background: none; - color: inherit; - font-family: inherit; - -webkit-tap-highlight-color: transparent; - border: none; - opacity: 0.5; - padding: 0; - transition: - opacity 180ms ease-in-out, - transform 180ms ease-in-out; - cursor: pointer; - } - .dual button:focus-visible { - transform: scale(1.1); - } - .dual button.selected { - opacity: 1; - } - .buttons { - position: absolute; - bottom: 10px; - left: 0; - right: 0; - margin: 0 auto; - width: 120px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - } - .buttons ha-outlined-icon-button { - --md-outlined-icon-button-container-size: 48px; - --md-outlined-icon-button-icon-size: 24px; - } - /* Accessibility */ - .visually-hidden { - position: absolute; - overflow: hidden; - clip: rect(0 0 0 0); - height: 1px; - width: 1px; - margin: -1px; - padding: 0; - border: 0; - } - /* Slider */ - ha-control-circular-slider { - --control-circular-slider-color: var( - --main-color, - var(--disabled-color) - ); - --control-circular-slider-low-color: var( - --low-color, - var(--disabled-color) - ); - --control-circular-slider-high-color: var( - --high-color, - var(--disabled-color) - ); - } - ha-control-circular-slider::after { - display: block; - content: ""; - position: absolute; - top: -10%; - left: -10%; - right: -10%; - bottom: -10%; - background: radial-gradient( - 50% 50% at 50% 50%, - var(--action-color, transparent) 0%, - transparent 100% - ); - opacity: 0.15; - pointer-events: none; - } - `; + .dual { + display: flex; + flex-direction: row; + gap: 24px; + margin-bottom: 40px; + } + + .dual button { + outline: none; + background: none; + color: inherit; + font-family: inherit; + -webkit-tap-highlight-color: transparent; + border: none; + opacity: 0.5; + padding: 0; + transition: + opacity 180ms ease-in-out, + transform 180ms ease-in-out; + cursor: pointer; + } + .dual button:focus-visible { + transform: scale(1.1); + } + .dual button.selected { + opacity: 1; + } + /* Slider */ + ha-control-circular-slider { + --control-circular-slider-low-color: var( + --low-color, + var(--disabled-color) + ); + --control-circular-slider-high-color: var( + --high-color, + var(--disabled-color) + ); + } + `, + ]; } } diff --git a/src/dialogs/more-info/components/ha-more-info-control-circular-slider-style.ts b/src/dialogs/more-info/components/ha-more-info-control-circular-slider-style.ts new file mode 100644 index 0000000000..0e9d64c2d0 --- /dev/null +++ b/src/dialogs/more-info/components/ha-more-info-control-circular-slider-style.ts @@ -0,0 +1,97 @@ +import { css } from "lit"; + +export const moreInfoControlCircularSliderStyle = css` + /* Layout elements */ + .container { + position: relative; + } + .info { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + pointer-events: none; + font-size: 16px; + line-height: 24px; + letter-spacing: 0.1px; + } + .info * { + margin: 0; + pointer-events: auto; + } + /* Info elements */ + .label-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 200px; + height: 48px; + margin-bottom: 6px; + } + .label { + font-weight: 500; + text-align: center; + color: var(--action-color, inherit); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + .label.disabled { + color: var(--secondary-text-color); + } + + .buttons { + position: absolute; + bottom: 10px; + left: 0; + right: 0; + margin: 0 auto; + width: 120px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + .buttons ha-outlined-icon-button { + --md-outlined-icon-button-container-size: 48px; + --md-outlined-icon-button-icon-size: 24px; + } + /* Accessibility */ + .visually-hidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + height: 1px; + width: 1px; + margin: -1px; + padding: 0; + border: 0; + } + /* Slider */ + ha-control-circular-slider { + --control-circular-slider-color: var(--state-color, var(--disabled-color)); + } + ha-control-circular-slider::after { + display: block; + content: ""; + position: absolute; + top: -10%; + left: -10%; + right: -10%; + bottom: -10%; + background: radial-gradient( + 50% 50% at 50% 50%, + var(--action-color, transparent) 0%, + transparent 100% + ); + opacity: 0.15; + pointer-events: none; + } +`; diff --git a/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts b/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts index 3f9bfaefb7..53ea757fa5 100644 --- a/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts +++ b/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts @@ -19,6 +19,7 @@ import { HumidifierEntityDeviceClass, } from "../../../../data/humidifier"; import { HomeAssistant } from "../../../../types"; +import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style"; @customElement("ha-more-info-humidifier-humidity") export class HaMoreInfoHumidifierHumidity extends LitElement { @@ -80,7 +81,15 @@ export class HaMoreInfoHumidifierHumidity extends LitElement { this._debouncedCallService(); } - private _renderAction() { + private _renderLabel() { + if (this.stateObj.state === UNAVAILABLE) { + return html` +

+ ${this.hass.formatEntityState(this.stateObj, UNAVAILABLE)} +

+ `; + } + const action = this.stateObj.attributes.action; const actionLabel = computeAttributeValueDisplay( @@ -93,7 +102,7 @@ export class HaMoreInfoHumidifierHumidity extends LitElement { ) as string; return html` -

+

${action && ["drying", "humidifying"].includes(action) ? this.hass.localize( "ui.dialogs.more_info_control.humidifier.target_label", @@ -145,7 +154,7 @@ export class HaMoreInfoHumidifierHumidity extends LitElement { } protected render() { - const mainColor = stateColorCss(this.stateObj); + const stateColor = stateColorCss(this.stateObj); const active = stateActive(this.stateObj); const action = this.stateObj.attributes.action; @@ -161,7 +170,7 @@ export class HaMoreInfoHumidifierHumidity extends LitElement { const targetHumidity = this._targetHumidity; const currentHumidity = this.stateObj.attributes.current_humidity; - if (targetHumidity != null) { + if (targetHumidity != null && this.stateObj.state !== UNAVAILABLE) { const inverted = this.stateObj.attributes.device_class === HumidifierEntityDeviceClass.DEHUMIDIFIER; @@ -170,7 +179,7 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {

@@ -181,13 +190,12 @@ export class HaMoreInfoHumidifierHumidity extends LitElement { .max=${this._max} .step=${this._step} .current=${currentHumidity} - .disabled=${this.stateObj.state === UNAVAILABLE} @value-changed=${this._valueChanged} @value-changing=${this._valueChanging} >
-
${this._renderAction()}
+
${this._renderLabel()}
${this._renderTarget(targetHumidity)}
@@ -212,118 +220,33 @@ export class HaMoreInfoHumidifierHumidity extends LitElement { disabled > +
+
${this._renderLabel()}
+
`; } static get styles(): CSSResultGroup { - return css` - /* Layout */ - .container { - position: relative; - } - .info { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - pointer-events: none; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.1px; - } - .info * { - margin: 0; - pointer-events: auto; - } - /* Elements */ - .target-container { - margin-bottom: 30px; - } - .target .value { - font-size: 56px; - line-height: 1; - letter-spacing: -0.25px; - } - .target .value .unit { - font-size: 0.4em; - line-height: 1; - margin-left: 2px; - } - .action-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 200px; - height: 48px; - margin-bottom: 6px; - } - .action { - font-weight: 500; - text-align: center; - color: var(--action-color, inherit); - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - .buttons { - position: absolute; - bottom: 10px; - left: 0; - right: 0; - margin: 0 auto; - width: 120px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - } - .buttons ha-outlined-icon-button { - --md-outlined-icon-button-container-size: 48px; - --md-outlined-icon-button-icon-size: 24px; - } - /* Accessibility */ - .visually-hidden { - position: absolute; - overflow: hidden; - clip: rect(0 0 0 0); - height: 1px; - width: 1px; - margin: -1px; - padding: 0; - border: 0; - } - /* Slider */ - ha-control-circular-slider { - --control-circular-slider-color: var( - --main-color, - var(--disabled-color) - ); - } - ha-control-circular-slider::after { - display: block; - content: ""; - position: absolute; - top: -10%; - left: -10%; - right: -10%; - bottom: -10%; - background: radial-gradient( - 50% 50% at 50% 50%, - var(--action-color, transparent) 0%, - transparent 100% - ); - opacity: 0.15; - pointer-events: none; - } - `; + return [ + moreInfoControlCircularSliderStyle, + css` + /* Elements */ + .target-container { + margin-bottom: 30px; + } + .target .value { + font-size: 58px; + line-height: 1; + letter-spacing: -0.25px; + } + .target .value .unit { + font-size: 0.4em; + line-height: 1; + margin-left: 2px; + } + `, + ]; } } diff --git a/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts b/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts index 29a40a23f4..a23d89fc79 100644 --- a/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts +++ b/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts @@ -23,6 +23,7 @@ import { WaterHeaterEntityFeature, } from "../../../../data/water_heater"; import { HomeAssistant } from "../../../../types"; +import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style"; @customElement("ha-more-info-water_heater-temperature") export class HaMoreInfoWaterHeaterTemperature extends LitElement { @@ -88,8 +89,16 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement { } private _renderLabel() { + if (this.stateObj.state === UNAVAILABLE) { + return html` +

+ ${this.hass.formatEntityState(this.stateObj, UNAVAILABLE)} +

+ `; + } + return html` -

+

${this.hass.localize( "ui.dialogs.more_info_control.water_heater.target" )} @@ -153,14 +162,18 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement { WaterHeaterEntityFeature.TARGET_TEMPERATURE ); - const mainColor = stateColorCss(this.stateObj); + const stateColor = stateColorCss(this.stateObj); - if (supportsTargetTemperature && this._targetTemperature != null) { + if ( + supportsTargetTemperature && + this._targetTemperature != null && + this.stateObj.state !== UNAVAILABLE + ) { return html`

-
${this._renderLabel()}
+
${this._renderLabel()}
${this._renderTargetTemperature(this._targetTemperature)}
@@ -195,128 +207,48 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement { disabled > +
+
${this._renderLabel()}
+
`; } static get styles(): CSSResultGroup { - return css` - /* Layout */ - .container { - position: relative; - } - .info { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - pointer-events: none; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.1px; - } - .info * { - margin: 0; - pointer-events: auto; - } - /* Elements */ - .temperature-container { - margin-bottom: 30px; - } - .temperature { - display: inline-flex; - font-size: 58px; - line-height: 64px; - letter-spacing: -0.25px; - margin: 0; - } - .temperature span { - display: inline-flex; - } - .temperature .unit { - font-size: 24px; - line-height: 40px; - } - .temperature .decimal { - font-size: 24px; - line-height: 40px; - align-self: flex-end; - margin-right: -18px; - } - .action-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 200px; - height: 48px; - margin-bottom: 6px; - } - .action { - font-weight: 500; - text-align: center; - color: var(--action-color, inherit); - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - .buttons { - position: absolute; - bottom: 10px; - left: 0; - right: 0; - margin: 0 auto; - width: 120px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - } - .buttons ha-outlined-icon-button { - --md-outlined-icon-button-container-size: 48px; - --md-outlined-icon-button-icon-size: 24px; - } - /* Accessibility */ - .visually-hidden { - position: absolute; - overflow: hidden; - clip: rect(0 0 0 0); - height: 1px; - width: 1px; - margin: -1px; - padding: 0; - border: 0; - } - /* Slider */ - ha-control-circular-slider { - --control-circular-slider-color: var( - --main-color, - var(--disabled-color) - ); - } - ha-control-circular-slider::after { - display: block; - content: ""; - position: absolute; - top: -10%; - left: -10%; - right: -10%; - bottom: -10%; - background: radial-gradient( - 50% 50% at 50% 50%, - var(--action-color, transparent) 0%, - transparent 100% - ); - opacity: 0.15; - pointer-events: none; - } - `; + return [ + moreInfoControlCircularSliderStyle, + css` + /* Elements */ + .temperature-container { + margin-bottom: 30px; + } + .temperature { + display: inline-flex; + font-size: 58px; + line-height: 64px; + letter-spacing: -0.25px; + margin: 0; + } + .temperature span { + display: inline-flex; + } + .temperature .decimal { + font-size: 24px; + line-height: 32px; + align-self: flex-end; + width: 20px; + margin-bottom: 4px; + } + .temperature .unit { + font-size: 20px; + line-height: 24px; + align-self: flex-start; + margin-left: -20px; + width: 20px; + margin-top: 4px; + } + `, + ]; } } diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts index 05323b45c8..9be1110210 100644 --- a/src/dialogs/more-info/controls/more-info-climate.ts +++ b/src/dialogs/more-info/controls/more-info-climate.ts @@ -170,6 +170,7 @@ class MoreInfoClimate extends LitElement { - + - + - + ${this.hass.localize("state.default.on")} - + - + ${computeStateDisplay( this.hass.localize, this.stateObj, @@ -110,8 +113,8 @@ class MoreInfoHumidifier extends LitElement { this.hass.entities, "off" )} - - + + ${computeStateDisplay( this.hass.localize, this.stateObj, @@ -120,7 +123,7 @@ class MoreInfoHumidifier extends LitElement { this.hass.entities, "on" )} - + ${supportModes @@ -128,6 +131,7 @@ class MoreInfoHumidifier extends LitElement { - + ${this.hass.localize("state.default.on")} - +