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
This commit is contained in:
AHS 2017-08-01 08:09:06 +02:00 committed by Paulus Schoutsen
parent 347ef95d39
commit 4af688a226
11 changed files with 51 additions and 13 deletions

View File

@ -48,8 +48,12 @@
vertical-align: top; vertical-align: top;
} }
.attributes tr:nth-child(odd) {
background-color: var(--table-row-background-color,#eee)
}
.attributes tr:nth-child(even) { .attributes tr:nth-child(even) {
background-color: #eee; background-color: var(--table-row-alternative-background-color,#eee)
} }
.attributes td:nth-child(3) { .attributes td:nth-child(3) {

View File

@ -33,8 +33,12 @@
vertical-align: top; vertical-align: top;
} }
.entities tr:nth-child(odd) {
background-color: var(--table-row-background-color, #fff)
}
.entities tr:nth-child(even) { .entities tr:nth-child(even) {
background-color: #eee; background-color: var(--table-row-alternative-background-color, #eee)
} }
.entities td:nth-child(3) { .entities td:nth-child(3) {

View File

@ -112,7 +112,7 @@
padding: 8px; padding: 8px;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
background-color: white; background-color: var(--paper-card-background-color, white);
} }
.controls paper-icon-button { .controls paper-icon-button {

View File

@ -10,19 +10,27 @@
} }
ha-label-badge { 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 { .blue {
--ha-label-badge-color: #039be5; --ha-label-badge-color: var(--label-badge-blue, #039be5);
} }
.green { .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 { .grey {
--ha-label-badge-color: var(--paper-grey-500); --ha-label-badge-color: var(--label-badge-grey, --paper-grey-500);
} }
</style> </style>

View File

@ -9,7 +9,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 40px; width: 40px;
color: #44739E; color: var(--paper-item-icon-color, #44739e);
border-radius: 50%; border-radius: 50%;
height: 40px; height: 40px;
text-align: center; text-align: center;
@ -26,7 +26,7 @@
ha-state-icon[data-domain=switch][data-state=on], ha-state-icon[data-domain=switch][data-state=on],
ha-state-icon[data-domain=binary_sensor][data-state=on], ha-state-icon[data-domain=binary_sensor][data-state=on],
ha-state-icon[data-domain=sun][data-state=above_horizon] { 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 */ /* Color the icon if unavailable */

View File

@ -9,7 +9,7 @@
border-radius: 2px; border-radius: 2px;
transition: all 0.30s ease-out; transition: all 0.30s ease-out;
background-color: white; background-color: var(--paper-card-background-color, white);
} }
.header { .header {
@apply(--paper-font-headline); @apply(--paper-font-headline);

View File

@ -20,10 +20,10 @@
font-size: var(--ha-label-badge-font-size, 1.5em); font-size: var(--ha-label-badge-font-size, 1.5em);
border-radius: 50%; border-radius: 50%;
border: 0.1em solid var(--ha-label-badge-color, --primary-color); 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; white-space: nowrap;
background-color: white; background-color: var(--label-badge-background-color, white);
background-size: cover; background-size: cover;
transition: border .3s ease-in-out; transition: border .3s ease-in-out;
} }

View File

@ -25,6 +25,7 @@
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
border-right: 1px solid var(--divider-color); border-right: 1px solid var(--divider-color);
background: var(--paper-listbox-background-color,var(--primary-background-color));
} }
app-toolbar { app-toolbar {

View File

@ -18,6 +18,11 @@
<dom-module id='home-assistant-main'> <dom-module id='home-assistant-main'>
<template> <template>
<style>
:host {
color: var(--primary-text-color);
}
</style>
<more-info-dialog hass='[[hass]]'></more-info-dialog> <more-info-dialog hass='[[hass]]'></more-info-dialog>
<ha-url-sync hass='[[hass]]'></ha-url-sync> <ha-url-sync hass='[[hass]]'></ha-url-sync>
<app-location route="{{route}}"></app-location> <app-location route="{{route}}"></app-location>

View File

@ -27,7 +27,7 @@
} }
app-header-layout { app-header-layout {
background-color: #E5E5E5; background-color: var(--secondary-background-color, #E5E5E5);
} }
paper-tabs { paper-tabs {

View File

@ -9,17 +9,24 @@
--paper-grey-50: #fafafa; --paper-grey-50: #fafafa;
--paper-grey-200: #eeeeee; --paper-grey-200: #eeeeee;
--paper-item-icon-color: #44739e;
--paper-item-icon-active-color: #FDD835;
--dark-primary-color: #0288D1; --dark-primary-color: #0288D1;
--primary-color: #03A9F4; --primary-color: #03A9F4;
--light-primary-color: #B3E5FC; --light-primary-color: #B3E5FC;
--text-primary-color: #ffffff; --text-primary-color: #ffffff;
--accent-color: #FF9800; --accent-color: #FF9800;
--primary-background-color: var(--paper-grey-50); --primary-background-color: var(--paper-grey-50);
--secondary-background-color: #E5E5E5;
--primary-text-color: #212121; --primary-text-color: #212121;
--secondary-text-color: #727272; --secondary-text-color: #727272;
--disabled-text-color: #bdbdbd; --disabled-text-color: #bdbdbd;
--divider-color: rgba(0, 0, 0, .12); --divider-color: rgba(0, 0, 0, .12);
--table-row-background-color: transparant;
--table-row-alternative-background-color: #eee;
--paper-toggle-button-checked-ink-color: #039be5; --paper-toggle-button-checked-ink-color: #039be5;
--paper-toggle-button-checked-button-color: #039be5; --paper-toggle-button-checked-button-color: #039be5;
--paper-toggle-button-checked-bar-color: #039be5; --paper-toggle-button-checked-bar-color: #039be5;
@ -34,6 +41,15 @@
--paper-card-background-color: #FFF; --paper-card-background-color: #FFF;
--paper-listbox-background-color: #FFF; --paper-listbox-background-color: #FFF;
/* for label-badge */
--label-badge-background-color: white;
--label-badge-text-color: rgb(76, 76, 76);
--label-badge-red: #DF4C1E;
--label-badge-blue: #039be5;
--label-badge-green: #0DA035;
--label-badge-yellow: #f4b400;
--label-badge-grey: var(--paper-grey-500);
/* Taken from paper-styles/color.html */ /* Taken from paper-styles/color.html */
/* for paper-spinner */ /* for paper-spinner */
--google-red-500: #db4437; --google-red-500: #db4437;