From 4af688a226de010185c32ffe074552aeb0ba449c Mon Sep 17 00:00:00 2001 From: AHS Date: Tue, 1 Aug 2017 08:09:06 +0200 Subject: [PATCH] Variable colours (cards, backgrounds, sidebar, ...) (#361) * Update partial-cards.html * Update ha-card.html * Update ha-card.html * Update ha-style.html * Update partial-cards.html * Update ha-sidebar.html * Update ha-panel-dev-service.html * Update ha-media_player-card.html * Update ha-media_player-card.html * Update partial-cards.html * Update ha-style.html * Update ha-style.html * Update ha-state-label-badge.html * Update ha-style.html * Update ha-panel-dev-service.html * Update ha-media_player-card.html * Update ha-state-label-badge.html * Update ha-card.html * Update ha-style.html * Update ha-style.html * Update partial-cards.html * Update ha-style.html * Update ha-style.html * Update ha-panel-dev-service.html * Update ha-panel-dev-state.html * Update state-badge.html * Update ha-label-badge.html * Update home-assistant-main.html * Update ha-style.html * Update ha-label-badge.html * Update ha-label-badge.html * Update ha-style.html * Update ha-panel-dev-state.html --- panels/dev-service/ha-panel-dev-service.html | 6 +++++- panels/dev-state/ha-panel-dev-state.html | 6 +++++- src/cards/ha-media_player-card.html | 2 +- src/components/entity/ha-state-label-badge.html | 16 ++++++++++++---- src/components/entity/state-badge.html | 4 ++-- src/components/ha-card.html | 2 +- src/components/ha-label-badge.html | 4 ++-- src/components/ha-sidebar.html | 1 + src/layouts/home-assistant-main.html | 5 +++++ src/layouts/partial-cards.html | 2 +- src/resources/ha-style.html | 16 ++++++++++++++++ 11 files changed, 51 insertions(+), 13 deletions(-) diff --git a/panels/dev-service/ha-panel-dev-service.html b/panels/dev-service/ha-panel-dev-service.html index 81d7b31223..b550046487 100644 --- a/panels/dev-service/ha-panel-dev-service.html +++ b/panels/dev-service/ha-panel-dev-service.html @@ -48,8 +48,12 @@ vertical-align: top; } + .attributes tr:nth-child(odd) { + background-color: var(--table-row-background-color,#eee) + } + .attributes tr:nth-child(even) { - background-color: #eee; + background-color: var(--table-row-alternative-background-color,#eee) } .attributes td:nth-child(3) { diff --git a/panels/dev-state/ha-panel-dev-state.html b/panels/dev-state/ha-panel-dev-state.html index 144fae2d7c..5c4054add7 100644 --- a/panels/dev-state/ha-panel-dev-state.html +++ b/panels/dev-state/ha-panel-dev-state.html @@ -33,8 +33,12 @@ vertical-align: top; } + .entities tr:nth-child(odd) { + background-color: var(--table-row-background-color, #fff) + } + .entities tr:nth-child(even) { - background-color: #eee; + background-color: var(--table-row-alternative-background-color, #eee) } .entities td:nth-child(3) { diff --git a/src/cards/ha-media_player-card.html b/src/cards/ha-media_player-card.html index fd61badd23..bba2a677e3 100644 --- a/src/cards/ha-media_player-card.html +++ b/src/cards/ha-media_player-card.html @@ -112,7 +112,7 @@ padding: 8px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; - background-color: white; + background-color: var(--paper-card-background-color, white); } .controls paper-icon-button { diff --git a/src/components/entity/ha-state-label-badge.html b/src/components/entity/ha-state-label-badge.html index 38e8e939be..18f9d8a01c 100644 --- a/src/components/entity/ha-state-label-badge.html +++ b/src/components/entity/ha-state-label-badge.html @@ -10,19 +10,27 @@ } ha-label-badge { - --ha-label-badge-color: rgb(223, 76, 30); + --ha-label-badge-color: var(--label-badge-red, #DF4C1E); + } + + .red { + --ha-label-badge-color: var(--label-badge-red, #DF4C1E); } .blue { - --ha-label-badge-color: #039be5; + --ha-label-badge-color: var(--label-badge-blue, #039be5); } .green { - --ha-label-badge-color: #0DA035; + --ha-label-badge-color: var(--label-badge-green, #0DA035); + } + + .yellow { + --ha-label-badge-color: var(--label-badge-yellow, #f4b400); } .grey { - --ha-label-badge-color: var(--paper-grey-500); + --ha-label-badge-color: var(--label-badge-grey, --paper-grey-500); } diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html index 69671ef017..a2327a459d 100644 --- a/src/components/entity/state-badge.html +++ b/src/components/entity/state-badge.html @@ -9,7 +9,7 @@ position: relative; display: inline-block; width: 40px; - color: #44739E; + color: var(--paper-item-icon-color, #44739e); border-radius: 50%; height: 40px; text-align: center; @@ -26,7 +26,7 @@ ha-state-icon[data-domain=switch][data-state=on], ha-state-icon[data-domain=binary_sensor][data-state=on], ha-state-icon[data-domain=sun][data-state=above_horizon] { - color: #FDD835; + color: var(--paper-item-icon-active-color, #FDD835); } /* Color the icon if unavailable */ diff --git a/src/components/ha-card.html b/src/components/ha-card.html index 5c0d71c2b2..dabbd598f2 100644 --- a/src/components/ha-card.html +++ b/src/components/ha-card.html @@ -9,7 +9,7 @@ border-radius: 2px; transition: all 0.30s ease-out; - background-color: white; + background-color: var(--paper-card-background-color, white); } .header { @apply(--paper-font-headline); diff --git a/src/components/ha-label-badge.html b/src/components/ha-label-badge.html index 0d7e4f6d46..18beeb1753 100644 --- a/src/components/ha-label-badge.html +++ b/src/components/ha-label-badge.html @@ -20,10 +20,10 @@ font-size: var(--ha-label-badge-font-size, 1.5em); border-radius: 50%; border: 0.1em solid var(--ha-label-badge-color, --primary-color); - color: rgb(76, 76, 76); + color: var(--label-badge-text-color, rgb(76, 76, 76)); white-space: nowrap; - background-color: white; + background-color: var(--label-badge-background-color, white); background-size: cover; transition: border .3s ease-in-out; } diff --git a/src/components/ha-sidebar.html b/src/components/ha-sidebar.html index ad2abe25af..edb24d593c 100644 --- a/src/components/ha-sidebar.html +++ b/src/components/ha-sidebar.html @@ -25,6 +25,7 @@ -webkit-user-select: none; -moz-user-select: none; border-right: 1px solid var(--divider-color); + background: var(--paper-listbox-background-color,var(--primary-background-color)); } app-toolbar { diff --git a/src/layouts/home-assistant-main.html b/src/layouts/home-assistant-main.html index 9f7f1c0e34..c97611972a 100644 --- a/src/layouts/home-assistant-main.html +++ b/src/layouts/home-assistant-main.html @@ -18,6 +18,11 @@