diff --git a/gallery/src/pages/components/ha-control-button.ts b/gallery/src/pages/components/ha-control-button.ts index 908ca808d4..2c5cfd2e21 100644 --- a/gallery/src/pages/components/ha-control-button.ts +++ b/gallery/src/pages/components/ha-control-button.ts @@ -162,7 +162,7 @@ export class DemoHaBarButton extends LitElement { } .custom-group { --control-button-group-thickness: 100px; - --control-button-group-border-radius: 18px; + --control-button-group-border-radius: 36px; --control-button-group-spacing: 20px; } .custom-group ha-control-button { diff --git a/gallery/src/pages/components/ha-control-number-buttons.ts b/gallery/src/pages/components/ha-control-number-buttons.ts index d8770dd4a1..9b9dcc6804 100644 --- a/gallery/src/pages/components/ha-control-number-buttons.ts +++ b/gallery/src/pages/components/ha-control-number-buttons.ts @@ -94,7 +94,7 @@ export class DemoHarControlNumberButtons extends LitElement { --control-number-buttons-background-color: #2196f3; --control-number-buttons-background-opacity: 0.1; --control-number-buttons-thickness: 100px; - --control-number-buttons-border-radius: 24px; + --control-number-buttons-border-radius: 36px; } `; } diff --git a/gallery/src/pages/components/ha-control-select.ts b/gallery/src/pages/components/ha-control-select.ts index e0d1e0e345..1b18d0e5ab 100644 --- a/gallery/src/pages/components/ha-control-select.ts +++ b/gallery/src/pages/components/ha-control-select.ts @@ -186,8 +186,8 @@ export class DemoHaControlSelect extends LitElement { .custom { --mdc-icon-size: 24px; --control-select-color: var(--state-fan-active-color); - --control-select-thickness: 100px; - --control-select-border-radius: 24px; + --control-select-thickness: 130px; + --control-select-border-radius: 48px; } .vertical-selects { height: 300px; diff --git a/gallery/src/pages/components/ha-control-slider.ts b/gallery/src/pages/components/ha-control-slider.ts index bb46f7ff72..1b14a666cc 100644 --- a/gallery/src/pages/components/ha-control-slider.ts +++ b/gallery/src/pages/components/ha-control-slider.ts @@ -150,8 +150,8 @@ export class DemoHaBarSlider extends LitElement { --control-slider-color: #ffcf4c; --control-slider-background: #ffcf4c; --control-slider-background-opacity: 0.2; - --control-slider-thickness: 100px; - --control-slider-border-radius: 24px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 48px; } .vertical-sliders { height: 300px; diff --git a/gallery/src/pages/components/ha-control-switch.ts b/gallery/src/pages/components/ha-control-switch.ts index 128a23773f..662c9d1342 100644 --- a/gallery/src/pages/components/ha-control-switch.ts +++ b/gallery/src/pages/components/ha-control-switch.ts @@ -117,8 +117,8 @@ export class DemoHaControlSwitch extends LitElement { .custom { --control-switch-on-color: var(--green-color); --control-switch-off-color: var(--red-color); - --control-switch-thickness: 100px; - --control-switch-border-radius: 24px; + --control-switch-thickness: 130px; + --control-switch-border-radius: 48px; --control-switch-padding: 6px; --mdc-icon-size: 24px; } diff --git a/src/components/ha-control-slider.ts b/src/components/ha-control-slider.ts index 45de3c4c0f..23014308d0 100644 --- a/src/components/ha-control-slider.ts +++ b/src/components/ha-control-slider.ts @@ -529,7 +529,7 @@ export class HaControlSlider extends LitElement { 0, 0 ); - border-radius: 0 var(--border-radius) var(--border-radius) 0; + border-radius: 0 8px 8px 0; } .slider .slider-track-bar:after { top: 0; @@ -546,7 +546,7 @@ export class HaControlSlider extends LitElement { 0, 0 ); - border-radius: var(--border-radius) 0 0 var(--border-radius); + border-radius: 8px 0 0 8px; } .slider .slider-track-bar.end::after { right: initial; @@ -561,7 +561,7 @@ export class HaControlSlider extends LitElement { calc((1 - var(--value, 0)) * var(--slider-size)), 0 ); - border-radius: var(--border-radius) var(--border-radius) 0 0; + border-radius: 8px 8px 0 0; } :host([vertical]) .slider .slider-track-bar:after { top: var(--handle-margin); @@ -579,7 +579,7 @@ export class HaControlSlider extends LitElement { calc((0 - var(--value, 0)) * var(--slider-size)), 0 ); - border-radius: 0 0 var(--border-radius) var(--border-radius); + border-radius: 0 0 8px 8px; } :host([vertical]) .slider .slider-track-bar.end::after { top: initial; diff --git a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts index 817653e894..78d71f6cbd 100644 --- a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts +++ b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts @@ -189,8 +189,8 @@ class LightColorTempPicker extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-slider-thickness: 100px; - --control-slider-border-radius: 24px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 48px; --control-slider-color: var(--primary-color); --control-slider-background: -webkit-linear-gradient( top, diff --git a/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts b/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts index 647795f46a..10d5b46563 100644 --- a/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts +++ b/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts @@ -128,8 +128,8 @@ export class HaStateControlAlarmControlPanelModes extends LitElement { height: 45vh; max-height: max(320px, var(--modes-count, 1) * 80px); min-height: max(200px, var(--modes-count, 1) * 80px); - --control-select-thickness: 100px; - --control-select-border-radius: 24px; + --control-select-thickness: 130px; + --control-select-border-radius: 48px; --control-select-color: var(--primary-color); --control-select-background: var(--disabled-color); --control-select-background-opacity: 0.2; diff --git a/src/state-control/cover/ha-state-control-cover-buttons.ts b/src/state-control/cover/ha-state-control-cover-buttons.ts index 1d49f33d9a..092189a463 100644 --- a/src/state-control/cover/ha-state-control-cover-buttons.ts +++ b/src/state-control/cover/ha-state-control-cover-buttons.ts @@ -254,7 +254,7 @@ export class HaStateControlCoverButtons extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-button-group-spacing: 6px; + --control-button-group-spacing: 10px; --control-button-group-thickness: 100px; } .cross-container { @@ -262,7 +262,7 @@ export class HaStateControlCoverButtons extends LitElement { max-height: 320px; min-height: 200px; display: grid; - grid-gap: 10px; + gap: 10px; grid-template-columns: repeat(3, min(100px, 25vw, 15vh)); grid-template-rows: repeat(3, min(100px, 25vw, 15vh)); grid-template-areas: ". open ." "close-tilt stop open-tilt" ". close ."; @@ -287,7 +287,7 @@ export class HaStateControlCoverButtons extends LitElement { grid-area: stop; } ha-control-button { - --control-button-border-radius: 18px; + --control-button-border-radius: 36px; --mdc-icon-size: 24px; } `; diff --git a/src/state-control/cover/ha-state-control-cover-position.ts b/src/state-control/cover/ha-state-control-cover-position.ts index 6f5fecfbd2..9f64c4b017 100644 --- a/src/state-control/cover/ha-state-control-cover-position.ts +++ b/src/state-control/cover/ha-state-control-cover-position.ts @@ -74,8 +74,8 @@ export class HaStateControlCoverPosition extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-slider-thickness: 100px; - --control-slider-border-radius: 24px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 48px; --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; diff --git a/src/state-control/cover/ha-state-control-cover-tilt-position.ts b/src/state-control/cover/ha-state-control-cover-tilt-position.ts index 97fc188269..a3dccdf363 100644 --- a/src/state-control/cover/ha-state-control-cover-tilt-position.ts +++ b/src/state-control/cover/ha-state-control-cover-tilt-position.ts @@ -111,8 +111,8 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-slider-thickness: 100px; - --control-slider-border-radius: 24px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 48px; --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; diff --git a/src/state-control/cover/ha-state-control-cover-toggle.ts b/src/state-control/cover/ha-state-control-cover-toggle.ts index b47a7b62a1..f743f774cd 100644 --- a/src/state-control/cover/ha-state-control-cover-toggle.ts +++ b/src/state-control/cover/ha-state-control-cover-toggle.ts @@ -141,15 +141,15 @@ export class HaStateControlCoverToggle extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-switch-thickness: 100px; - --control-switch-border-radius: 24px; + --control-switch-thickness: 130px; + --control-switch-border-radius: 48px; --control-switch-padding: 6px; --mdc-icon-size: 24px; } .buttons { display: flex; flex-direction: column; - width: 100px; + width: 130px; height: 45vh; max-height: 320px; min-height: 200px; @@ -159,7 +159,7 @@ export class HaStateControlCoverToggle extends LitElement { ha-control-button { flex: 1; width: 100%; - --control-button-border-radius: 18px; + --control-button-border-radius: 48px; --mdc-icon-size: 24px; } ha-control-button.active { diff --git a/src/state-control/fan/ha-state-control-fan-speed.ts b/src/state-control/fan/ha-state-control-fan-speed.ts index 3437fc888c..f6bbb286b5 100644 --- a/src/state-control/fan/ha-state-control-fan-speed.ts +++ b/src/state-control/fan/ha-state-control-fan-speed.ts @@ -141,8 +141,8 @@ export class HaStateControlFanSpeed extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-slider-thickness: 100px; - --control-slider-border-radius: 24px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 48px; --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; @@ -152,8 +152,8 @@ export class HaStateControlFanSpeed extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-select-thickness: 100px; - --control-select-border-radius: 24px; + --control-select-thickness: 130px; + --control-select-border-radius: 48px; --control-select-color: var(--primary-color); --control-select-background: var(--disabled-color); --control-select-background-opacity: 0.2; diff --git a/src/state-control/ha-state-control-toggle.ts b/src/state-control/ha-state-control-toggle.ts index b0cfa8b3ad..8614f1d505 100644 --- a/src/state-control/ha-state-control-toggle.ts +++ b/src/state-control/ha-state-control-toggle.ts @@ -132,15 +132,15 @@ export class HaStateControlToggle extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-switch-thickness: 100px; - --control-switch-border-radius: 24px; + --control-switch-thickness: 130px; + --control-switch-border-radius: 48px; --control-switch-padding: 6px; --mdc-icon-size: 24px; } .buttons { display: flex; flex-direction: column; - width: 100px; + width: 130px; height: 45vh; max-height: 320px; min-height: 200px; @@ -150,7 +150,7 @@ export class HaStateControlToggle extends LitElement { ha-control-button { flex: 1; width: 100%; - --control-button-border-radius: 18px; + --control-button-border-radius: 48px; --mdc-icon-size: 24px; } ha-control-button.active { diff --git a/src/state-control/light/ha-state-control-light-brightness.ts b/src/state-control/light/ha-state-control-light-brightness.ts index d233c244ff..444dd1d7f0 100644 --- a/src/state-control/light/ha-state-control-light-brightness.ts +++ b/src/state-control/light/ha-state-control-light-brightness.ts @@ -84,11 +84,12 @@ export class HaStateControlLightBrightness extends LitElement { static get styles(): CSSResultGroup { return css` ha-control-slider { + position: relative; height: 45vh; max-height: 320px; min-height: 200px; - --control-slider-thickness: 100px; - --control-slider-border-radius: 24px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 48px; --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; diff --git a/src/state-control/lock/ha-state-control-lock-toggle.ts b/src/state-control/lock/ha-state-control-lock-toggle.ts index 06e975ee59..d39c0ec574 100644 --- a/src/state-control/lock/ha-state-control-lock-toggle.ts +++ b/src/state-control/lock/ha-state-control-lock-toggle.ts @@ -158,8 +158,8 @@ export class HaStateControlLockToggle extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-switch-thickness: 100px; - --control-switch-border-radius: 24px; + --control-switch-thickness: 130px; + --control-switch-border-radius: 48px; --control-switch-padding: 6px; --mdc-icon-size: 24px; } @@ -169,7 +169,7 @@ export class HaStateControlLockToggle extends LitElement { .buttons { display: flex; flex-direction: column; - width: 100px; + width: 130px; height: 45vh; max-height: 320px; min-height: 200px; @@ -179,7 +179,7 @@ export class HaStateControlLockToggle extends LitElement { ha-control-button { flex: 1; width: 100%; - --control-button-border-radius: 18px; + --control-button-border-radius: 48px; --mdc-icon-size: 24px; } ha-control-button.active { diff --git a/src/state-control/valve/ha-state-control-valve-buttons.ts b/src/state-control/valve/ha-state-control-valve-buttons.ts index 5421741087..899ab0865d 100644 --- a/src/state-control/valve/ha-state-control-valve-buttons.ts +++ b/src/state-control/valve/ha-state-control-valve-buttons.ts @@ -127,11 +127,11 @@ export class HaStateControlValveButtons extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-button-group-spacing: 6px; + --control-button-group-spacing: 10px; --control-button-group-thickness: 100px; } ha-control-button { - --control-button-border-radius: 18px; + --control-button-border-radius: 36px; --mdc-icon-size: 24px; } `; diff --git a/src/state-control/valve/ha-state-control-valve-position.ts b/src/state-control/valve/ha-state-control-valve-position.ts index 992c960561..af7a356f41 100644 --- a/src/state-control/valve/ha-state-control-valve-position.ts +++ b/src/state-control/valve/ha-state-control-valve-position.ts @@ -70,8 +70,8 @@ export class HaStateControlValvePosition extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-slider-thickness: 100px; - --control-slider-border-radius: 24px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 48px; --control-slider-color: var(--primary-color); --control-slider-background: var(--disabled-color); --control-slider-background-opacity: 0.2; diff --git a/src/state-control/valve/ha-state-control-valve-toggle.ts b/src/state-control/valve/ha-state-control-valve-toggle.ts index b543b539d8..cc74e52170 100644 --- a/src/state-control/valve/ha-state-control-valve-toggle.ts +++ b/src/state-control/valve/ha-state-control-valve-toggle.ts @@ -141,15 +141,15 @@ export class HaStateControlValveToggle extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - --control-switch-thickness: 100px; - --control-switch-border-radius: 24px; + --control-switch-thickness: 130px; + --control-switch-border-radius: 48px; --control-switch-padding: 6px; --mdc-icon-size: 24px; } .buttons { display: flex; flex-direction: column; - width: 100px; + width: 130px; height: 45vh; max-height: 320px; min-height: 200px; @@ -159,7 +159,7 @@ export class HaStateControlValveToggle extends LitElement { ha-control-button { flex: 1; width: 100%; - --control-button-border-radius: 18px; + --control-button-border-radius: 48px; --mdc-icon-size: 24px; } ha-control-button.active {