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

Variable colours (cards, backgrounds, sidebar, ...) (#361)

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

6
panels/dev-service/ha-panel-dev-service.html
View File

@ -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) {

6
panels/dev-state/ha-panel-dev-state.html
View File

@ -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) {

2
src/cards/ha-media_player-card.html
View File

@ -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 {

16
src/components/entity/ha-state-label-badge.html
View File

@ -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);
}
</style>

4
src/components/entity/state-badge.html
View File

@ -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 */

2
src/components/ha-card.html
View File

@ -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);

4
src/components/ha-label-badge.html
View File

@ -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;
}

1
src/components/ha-sidebar.html
View File

@ -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 {

5
src/layouts/home-assistant-main.html
View File

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

2
src/layouts/partial-cards.html
View File

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

16
src/resources/ha-style.html
View File

@ -9,17 +9,24 @@
--paper-grey-50: #fafafa;
--paper-grey-200: #eeeeee;
--paper-item-icon-color: #44739e;
--paper-item-icon-active-color: #FDD835;
--dark-primary-color: #0288D1;
--primary-color: #03A9F4;
--light-primary-color: #B3E5FC;
--text-primary-color: #ffffff;
--accent-color: #FF9800;
--primary-background-color: var(--paper-grey-50);
--secondary-background-color: #E5E5E5;
--primary-text-color: #212121;
--secondary-text-color: #727272;
--disabled-text-color: #bdbdbd;
--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-button-color: #039be5;
--paper-toggle-button-checked-bar-color: #039be5;
@ -34,6 +41,15 @@
--paper-card-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 */
/* for paper-spinner */
--google-red-500: #db4437;