github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Update control slider color (#20124) 

* Increase control slider thickness and border radius

* Increase control switch, select thickness and border radius

* Update assumed state toggle buttons
This commit is contained in:
Paul Bottein 2024-03-25 15:54:37 +01:00 committed by GitHub
parent 10cc3bdd3f
commit 447932eedb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 50 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gallery/src/pages/components/ha-control-button.ts
View File

@ -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 {

2
gallery/src/pages/components/ha-control-number-buttons.ts
View File

@ -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;
}
`;
}

4
gallery/src/pages/components/ha-control-select.ts
View File

@ -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;

4
gallery/src/pages/components/ha-control-slider.ts
View File

@ -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;

4
gallery/src/pages/components/ha-control-switch.ts
View File

@ -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;
}

8
src/components/ha-control-slider.ts
View File

@ -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;

4
src/dialogs/more-info/components/lights/light-color-temp-picker.ts
View File

@ -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,

4
src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts
View File

@ -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;

6
src/state-control/cover/ha-state-control-cover-buttons.ts
View File

@ -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;
}
`;

4
src/state-control/cover/ha-state-control-cover-position.ts
View File

@ -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;

4
src/state-control/cover/ha-state-control-cover-tilt-position.ts
View File

@ -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;

8
src/state-control/cover/ha-state-control-cover-toggle.ts
View File

@ -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 {

8
src/state-control/fan/ha-state-control-fan-speed.ts
View File

@ -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;

8
src/state-control/ha-state-control-toggle.ts
View File

@ -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 {

5
src/state-control/light/ha-state-control-light-brightness.ts
View File

@ -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;

8
src/state-control/lock/ha-state-control-lock-toggle.ts
View File

@ -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 {

4
src/state-control/valve/ha-state-control-valve-buttons.ts
View File

@ -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;
}
`;

4
src/state-control/valve/ha-state-control-valve-position.ts
View File

@ -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;

8
src/state-control/valve/ha-state-control-valve-toggle.ts
View File

@ -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 {