Fixes: #1902 - Thermostat/Light Background (#1931)

* Thermostat theme fixes

* Might as well put the light card in there
This commit is contained in:
Zack Arnett 2018-10-31 04:38:56 -04:00 committed by Paulus Schoutsen
parent 094eb632f2
commit 4ea83b8bd5
2 changed files with 41 additions and 21 deletions

View File

@ -154,6 +154,15 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
ha-card {
position: relative;
overflow: hidden;
--brightness-font-color: white;
--brightness-font-text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
--name-font-size: 1.2rem;
--brightness-font-size: 1.2rem;
--rail-border-color: transparent;
}
#tooltip {
position: absolute;
@ -183,12 +192,12 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
background-color: var(--primary-color);
}
#light .rs-path-color {
background-color: #d6d6d6;
background-color: var(--disabled-text-color);
}
#light .rs-handle {
background-color: #FFF;
background-color: var(--paper-card-background-color, white);
padding: 7px;
border: 2px solid #d6d6d6;
border: 2px solid var(--disabled-text-color);
}
#light .rs-handle.rs-focus {
border-color:var(--primary-color);
@ -198,7 +207,11 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
background-color: var(--primary-color);
}
#light .rs-border {
border-color: transparent;
border-color: var(--rail-border-color);
}
#light .rs-inner.rs-bg-color.rs-border,
#light .rs-overlay.rs-transition.rs-bg-color {
background-color: var(--paper-card-background-color, white);
}
ha-icon {
margin: auto;
@ -215,10 +228,10 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
}
.name {
padding-top: 40px;
font-size: 1.2rem;
font-size: var(--name-font-size);
}
.brightness {
font-size: 1.2rem;
font-size: var(--brightness-font-size);
position: absolute;
margin: 0 auto;
left: 50%;
@ -229,12 +242,8 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
cursor: pointer;
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
color: var(--brightness-font-color);
text-shadow: var(--brightness-font-text-shadow)
}
.show_brightness {
opacity: 1;

View File

@ -182,25 +182,31 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
}
ha-card {
overflow: hidden;
--rail-border-color: transparent;
--auto-color: green;
--cool-color: #2b9af9;
--heat-color: #FF8100;
--off-color: #8a8a8a;
--unknown-color: #bac;
}
#root {
position: relative;
overflow: hidden;
}
.auto {
--mode-color: green;
--mode-color: var(--auto-color);
}
.cool {
--mode-color: #2b9af9;
--mode-color: var(--cool-color);
}
.heat {
--mode-color: #FF8100;
--mode-color: var(--heat-color);
}
.off {
--mode-color: #8a8a8a;
--mode-color: var(--off-color);
}
.unknown-mode {
--mode-color: #bac;
--mode-color: var(--unknown-color);
}
.no-title {
--title-margin-top: 33% !important;
@ -245,12 +251,12 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
background-color: var(--mode-color, var(--disabled-text-color));
}
#thermostat .rs-path-color {
background-color: #d6d6d6;
background-color: var(--disabled-text-color);
}
#thermostat .rs-handle {
background-color: #FFF;
background-color: var(--paper-card-background-color, white);
padding: 7px;
border: 2px solid #d6d6d6;
border: 2px solid var(--disabled-text-color);
}
#thermostat .rs-handle.rs-focus {
border-color: var(--mode-color, var(--disabled-text-color));
@ -260,11 +266,15 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
background-color: var(--mode-color, var(--disabled-text-color));
}
#thermostat .rs-border {
border-color: transparent;
border-color: var(--rail-border-color);
}
#thermostat .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
z-index: 20 !important;
}
#thermostat .rs-inner.rs-bg-color.rs-border,
#thermostat .rs-overlay.rs-transition.rs-bg-color {
background-color: var(--paper-card-background-color, white);
}
#tooltip {
position: absolute;
top: 0;
@ -273,6 +283,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
height: 100%;
text-align: center;
z-index: 15;
color: var(--primary-text-color);
}
#set-temperature {
font-size: var(--set-temperature-font-size);