jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/panels/lovelace/cards/hui-light-card.ts
View File

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

29
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

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