Adapt more info control height for small screen (#15647)

* Adapt more info control height for small screen

* Fix light picker sliders
This commit is contained in:
Paul Bottein 2023-03-01 12:15:12 +01:00 committed by GitHub
parent ccf670465b
commit 0d869d53e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 6 deletions

View File

@ -128,7 +128,9 @@ export class HaMoreInfoToggle extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
ha-control-switch { ha-control-switch {
height: 320px; height: 45vh;
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 100px; --control-switch-thickness: 100px;
--control-switch-border-radius: 24px; --control-switch-border-radius: 24px;
--control-switch-padding: 6px; --control-switch-padding: 6px;
@ -138,7 +140,9 @@ export class HaMoreInfoToggle extends LitElement {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100px; width: 100px;
height: 320px; height: 45vh;
max-height: 320px;
min-height: 200px;
padding: 6px; padding: 6px;
box-sizing: border-box; box-sizing: border-box;
} }

View File

@ -84,7 +84,9 @@ export class HaMoreInfoLightBrightness extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
ha-control-slider { ha-control-slider {
height: 320px; height: 45vh;
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 100px; --control-slider-thickness: 100px;
--control-slider-border-radius: 24px; --control-slider-border-radius: 24px;
--control-slider-color: var(--primary-color); --control-slider-color: var(--primary-color);

View File

@ -535,8 +535,12 @@ class MoreInfoViewLightColorPicker extends LitElement {
} }
ha-control-slider { ha-control-slider {
height: 320px; height: 45vh;
max-height: 320px;
min-height: 200px;
margin: 20px 0; margin: 20px 0;
--control-slider-thickness: 100px;
--control-slider-border-radius: 24px;
} }
ha-labeled-slider { ha-labeled-slider {
@ -554,8 +558,6 @@ class MoreInfoViewLightColorPicker extends LitElement {
} }
.color-temp { .color-temp {
--control-slider-thickness: 100px;
--control-slider-border-radius: 24px;
--control-slider-background: -webkit-linear-gradient( --control-slider-background: -webkit-linear-gradient(
top, top,
rgb(166, 209, 255) 0%, rgb(166, 209, 255) 0%,