mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 10:56:34 +00:00
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:
parent
347ef95d39
commit
4af688a226
@ -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) {
|
||||
|
@ -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) {
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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 */
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
app-header-layout {
|
||||
background-color: #E5E5E5;
|
||||
background-color: var(--secondary-background-color, #E5E5E5);
|
||||
}
|
||||
|
||||
paper-tabs {
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user