diff --git a/gallery/src/pages/components/ha-control-select.ts b/gallery/src/pages/components/ha-control-select.ts
index 1b18d0e5ab..8ab5f0ea89 100644
--- a/gallery/src/pages/components/ha-control-select.ts
+++ b/gallery/src/pages/components/ha-control-select.ts
@@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement {
--mdc-icon-size: 24px;
--control-select-color: var(--state-fan-active-color);
--control-select-thickness: 130px;
- --control-select-border-radius: 48px;
+ --control-select-border-radius: 36px;
}
.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 1b14a666cc..ee1ef8a662 100644
--- a/gallery/src/pages/components/ha-control-slider.ts
+++ b/gallery/src/pages/components/ha-control-slider.ts
@@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement {
--control-slider-background: #ffcf4c;
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 130px;
- --control-slider-border-radius: 48px;
+ --control-slider-border-radius: 36px;
}
.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 662c9d1342..dc154b725d 100644
--- a/gallery/src/pages/components/ha-control-switch.ts
+++ b/gallery/src/pages/components/ha-control-switch.ts
@@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement {
--control-switch-on-color: var(--green-color);
--control-switch-off-color: var(--red-color);
--control-switch-thickness: 130px;
- --control-switch-border-radius: 48px;
+ --control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
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 78d71f6cbd..a1f5726cac 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
@@ -190,7 +190,7 @@ class LightColorTempPicker extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
- --control-slider-border-radius: 48px;
+ --control-slider-border-radius: 36px;
--control-slider-color: var(--primary-color);
--control-slider-background: -webkit-linear-gradient(
top,
diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
index 312c0f2c0d..3a28b4f4b7 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
@@ -1,9 +1,8 @@
-import { mdiShieldOff } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { stateColorCss } from "../../../common/entity/state_color";
-import "../../../components/ha-outlined-button";
+import "../../../components/ha-control-button";
import "../../../components/ha-state-icon";
import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
import "../../../state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes";
@@ -57,15 +56,10 @@ class MoreInfoAlarmControlPanel extends LitElement {
${["triggered", "arming", "pending"].includes(this.stateObj.state)
? html`
-
-
- ${this.hass.localize("ui.card.alarm_control_panel.disarm")}
-
-
+ ${["triggered", "arming", "pending"].includes(this.stateObj.state)
+ ? html`
+
+ ${this.hass.localize("ui.card.alarm_control_panel.disarm")}
+
+ `
+ : nothing}
+
`;
}
@@ -127,8 +129,12 @@ class MoreInfoAlarmControlPanel extends LitElement {
transition: background-color 180ms ease-in-out;
opacity: 0.2;
}
- .status ha-outlined-button {
- margin-top: 32px;
+ ha-control-button.disarm {
+ height: 60px;
+ min-width: 130px;
+ max-width: 200px;
+ margin: 0 auto;
+ --control-button-border-radius: 24px;
}
`,
];
diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts
index fccc841c90..ac0f45e43a 100644
--- a/src/dialogs/more-info/controls/more-info-lock.ts
+++ b/src/dialogs/more-info/controls/more-info-lock.ts
@@ -170,7 +170,7 @@ class MoreInfoLock extends LitElement {
--control-button-border-radius: 24px;
}
.open-button {
- width: 100px;
+ width: 130px;
--control-button-background-color: var(--state-color);
}
.open-button.confirm {
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 10d5b46563..585d14d9ca 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
@@ -129,7 +129,7 @@ export class HaStateControlAlarmControlPanelModes extends LitElement {
max-height: max(320px, var(--modes-count, 1) * 80px);
min-height: max(200px, var(--modes-count, 1) * 80px);
--control-select-thickness: 130px;
- --control-select-border-radius: 48px;
+ --control-select-border-radius: 36px;
--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-position.ts b/src/state-control/cover/ha-state-control-cover-position.ts
index 9f64c4b017..0f5652004e 100644
--- a/src/state-control/cover/ha-state-control-cover-position.ts
+++ b/src/state-control/cover/ha-state-control-cover-position.ts
@@ -75,7 +75,7 @@ export class HaStateControlCoverPosition extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
- --control-slider-border-radius: 48px;
+ --control-slider-border-radius: 36px;
--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 a3dccdf363..30d7160531 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
@@ -112,7 +112,7 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
- --control-slider-border-radius: 48px;
+ --control-slider-border-radius: 36px;
--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 f743f774cd..328a56352b 100644
--- a/src/state-control/cover/ha-state-control-cover-toggle.ts
+++ b/src/state-control/cover/ha-state-control-cover-toggle.ts
@@ -142,7 +142,7 @@ export class HaStateControlCoverToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
- --control-switch-border-radius: 48px;
+ --control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@@ -159,7 +159,7 @@ export class HaStateControlCoverToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
- --control-button-border-radius: 48px;
+ --control-button-border-radius: 36px;
--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 f6bbb286b5..16e6d3a30a 100644
--- a/src/state-control/fan/ha-state-control-fan-speed.ts
+++ b/src/state-control/fan/ha-state-control-fan-speed.ts
@@ -142,7 +142,7 @@ export class HaStateControlFanSpeed extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
- --control-slider-border-radius: 48px;
+ --control-slider-border-radius: 36px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;
@@ -153,7 +153,7 @@ export class HaStateControlFanSpeed extends LitElement {
max-height: 320px;
min-height: 200px;
--control-select-thickness: 130px;
- --control-select-border-radius: 48px;
+ --control-select-border-radius: 36px;
--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 8614f1d505..7d6c697189 100644
--- a/src/state-control/ha-state-control-toggle.ts
+++ b/src/state-control/ha-state-control-toggle.ts
@@ -133,7 +133,7 @@ export class HaStateControlToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
- --control-switch-border-radius: 48px;
+ --control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@@ -150,7 +150,7 @@ export class HaStateControlToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
- --control-button-border-radius: 48px;
+ --control-button-border-radius: 36px;
--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 444dd1d7f0..0205514cfa 100644
--- a/src/state-control/light/ha-state-control-light-brightness.ts
+++ b/src/state-control/light/ha-state-control-light-brightness.ts
@@ -89,7 +89,7 @@ export class HaStateControlLightBrightness extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
- --control-slider-border-radius: 48px;
+ --control-slider-border-radius: 36px;
--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 d05eb393e2..bbc7c42ff0 100644
--- a/src/state-control/lock/ha-state-control-lock-toggle.ts
+++ b/src/state-control/lock/ha-state-control-lock-toggle.ts
@@ -167,7 +167,7 @@ export class HaStateControlLockToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
- --control-switch-border-radius: 48px;
+ --control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@@ -187,7 +187,7 @@ export class HaStateControlLockToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
- --control-button-border-radius: 48px;
+ --control-button-border-radius: 36px;
--mdc-icon-size: 24px;
}
ha-control-button.active {
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 af7a356f41..a9b9714ca9 100644
--- a/src/state-control/valve/ha-state-control-valve-position.ts
+++ b/src/state-control/valve/ha-state-control-valve-position.ts
@@ -71,7 +71,7 @@ export class HaStateControlValvePosition extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
- --control-slider-border-radius: 48px;
+ --control-slider-border-radius: 36px;
--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 cc74e52170..907a86e6f4 100644
--- a/src/state-control/valve/ha-state-control-valve-toggle.ts
+++ b/src/state-control/valve/ha-state-control-valve-toggle.ts
@@ -142,7 +142,7 @@ export class HaStateControlValveToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
- --control-switch-border-radius: 48px;
+ --control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@@ -159,7 +159,7 @@ export class HaStateControlValveToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
- --control-button-border-radius: 48px;
+ --control-button-border-radius: 36px;
--mdc-icon-size: 24px;
}
ha-control-button.active {