mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 10:26:35 +00:00
Easier theming and also apply theme to date picker (#1041)
* datepicker overlay backgrond * style vaadin more * cleanup diff * make styling easier * more vars * sidebar text * sidebar selected background backward compatible * indent commented theming var * fix sidebar text color incompatibility
This commit is contained in:
parent
961f43e4a5
commit
f40d64d68c
@ -32,7 +32,7 @@
|
||||
|
||||
/* Color the icon if unavailable */
|
||||
ha-state-icon[data-state=unavailable] {
|
||||
color: var(--disabled-text-color);
|
||||
color: var(--state-icon-unavailable);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -16,7 +16,7 @@
|
||||
<style include="iron-flex iron-flex-alignment iron-positioning">
|
||||
:host {
|
||||
--sidebar-text: {
|
||||
color: var(--primary-text-color);
|
||||
color: var(--sidebar-text-color);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
};
|
||||
@ -27,7 +27,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));
|
||||
background-color: var(--sidebar-background-color, var(--primary-background-color));
|
||||
}
|
||||
|
||||
app-toolbar {
|
||||
@ -47,20 +47,17 @@
|
||||
};
|
||||
|
||||
--paper-item-icon: {
|
||||
color: #000;
|
||||
opacity: var(--dark-secondary-opacity);
|
||||
};
|
||||
|
||||
--paper-item-selected: {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--paper-grey-200);
|
||||
opacity: 1;
|
||||
color: var(--sidebar-icon-color);
|
||||
};
|
||||
}
|
||||
|
||||
paper-icon-item.iron-selected {
|
||||
--paper-icon-item: {
|
||||
background-color: var(--sidebar-selected-background-color, var(--paper-grey-200));
|
||||
};
|
||||
|
||||
--paper-item-icon: {
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
color: var(--sidebar-selected-icon-color);
|
||||
};
|
||||
}
|
||||
|
||||
@ -68,7 +65,7 @@
|
||||
@apply --sidebar-text;
|
||||
}
|
||||
paper-icon-item.iron-selected .item-text {
|
||||
opacity: 1;
|
||||
color: var(--sidebar-selected-text-color);
|
||||
}
|
||||
|
||||
paper-icon-item.logout {
|
||||
@ -77,9 +74,8 @@
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
background-color: var(--divider-color);
|
||||
margin: 4px 0;
|
||||
opacity: var(--dark-divider-opacity)
|
||||
}
|
||||
|
||||
.setting {
|
||||
@ -92,8 +88,8 @@
|
||||
}
|
||||
|
||||
.dev-tools {
|
||||
color: var(--sidebar-icon-color);
|
||||
padding: 0 8px;
|
||||
opacity: var(--dark-secondary-opacity);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -53,6 +53,7 @@
|
||||
[part~="value"] {
|
||||
font-size: var(--paper-font-subhead_-_font-size);
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
@ -75,6 +76,7 @@
|
||||
cursor: pointer;
|
||||
min-height: var(--paper-item-min-height, 48px);
|
||||
padding: 0px 16px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[part~="button"]:focus {
|
||||
@ -86,8 +88,31 @@
|
||||
<dom-module id="ha-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay">
|
||||
<template>
|
||||
<style include="vaadin-date-picker-overlay-default-theme">
|
||||
:host {
|
||||
background-color: var(--paper-card-background-color, var(--primary-background-color));
|
||||
}
|
||||
|
||||
[part~="toolbar"] {
|
||||
padding: 0.3em;
|
||||
background-color: var(--secondary-background-color);
|
||||
}
|
||||
|
||||
[part="years"] {
|
||||
background-color: var(--paper-grey-200);
|
||||
}
|
||||
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
<dom-module id="ha-date-picker-month-styles" theme-for="vaadin-month-calendar">
|
||||
<template>
|
||||
<style include="vaadin-month-calendar-default-theme">
|
||||
:host([focused]) [part="date"][focused],
|
||||
[part="date"][selected] {
|
||||
background-color: var(--paper-grey-200);
|
||||
}
|
||||
[part="date"][today] {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
|
@ -14,41 +14,43 @@
|
||||
font-size: 14px;
|
||||
height: 100vh;
|
||||
|
||||
/* for paper-toggle-button */
|
||||
--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;
|
||||
/* text */
|
||||
--primary-text-color: #212121;
|
||||
--secondary-text-color: #727272;
|
||||
--text-primary-color: #ffffff;
|
||||
--disabled-text-color: #bdbdbd;
|
||||
|
||||
/* main interface colors */
|
||||
--primary-color: #03a9f4;
|
||||
--dark-primary-color: #0288d1;
|
||||
--light-primary-color: #b3e5fC;
|
||||
--accent-color: #ff9800;
|
||||
--divider-color: rgba(0, 0, 0, .12);
|
||||
|
||||
--table-row-background-color: transparent;
|
||||
--table-row-alternative-background-color: #eee;
|
||||
/* states and badges */
|
||||
--state-icon-color: #44739e;
|
||||
--state-icon-active-color: #FDD835;
|
||||
--state-icon-unavailable-color: var(--disabled-text-color);
|
||||
|
||||
--paper-toggle-button-checked-ink-color: var(--primary-color);
|
||||
--paper-toggle-button-checked-button-color: var(--primary-color);
|
||||
--paper-toggle-button-checked-bar-color: var(--primary-color);
|
||||
/* background and sidebar */
|
||||
--card-background-color: #ffffff;
|
||||
--primary-background-color: #fafafa;
|
||||
--secondary-background-color: #e5e5e5; /* behind the cards on state */
|
||||
|
||||
--paper-slider-knob-color: var(--primary-color);
|
||||
--paper-slider-knob-start-color: var(--primary-color);
|
||||
--paper-slider-pin-color: var(--primary-color);
|
||||
--paper-slider-active-color: var(--primary-color);
|
||||
--paper-slider-secondary-color: var(--light-primary-color);
|
||||
--paper-slider-container-color: var(--divider-color);
|
||||
/* sidebar menu */
|
||||
--sidebar-text-color: var(--primary-text-color);
|
||||
--sidebar-background-color: var(--paper-listbox-background-color); /* backward compatible with existing themes */
|
||||
--sidebar-icon-color: rgba(0, 0, 0, 0.5);
|
||||
--sidebar-selected-text-color: var(--primary-text-color);
|
||||
/* --sidebar-selected-background-color: rgba(30,30,30,0.1); */
|
||||
--sidebar-selected-icon-color: var(--primary-color);
|
||||
|
||||
--paper-card-background-color: #FFF;
|
||||
--paper-listbox-background-color: #FFF;
|
||||
/* controls */
|
||||
--toggle-button-color: var(--primary-color);
|
||||
/* --toggle-button-unchecked-color: var(--accent-color); */
|
||||
--slider-color: var(--primary-color);
|
||||
--slider-secondary-color: var(--light-primary-color);
|
||||
--slider-bar-color: var(--disabled-text-color);
|
||||
|
||||
/* for label-badge */
|
||||
--label-badge-background-color: white;
|
||||
@ -82,6 +84,32 @@
|
||||
--light-disabled-opacity: 0.3; /* or hint text or icon */
|
||||
--light-secondary-opacity: 0.7;
|
||||
--light-primary-opacity: 1.0;
|
||||
|
||||
/* derived colors, to keep existing themes mostly working */
|
||||
--paper-card-background-color: var(--card-background-color);
|
||||
--paper-listbox-background-color: var(--card-background-color);
|
||||
|
||||
--paper-item-icon-color: var(--state-icon-color);
|
||||
--paper-item-icon-active-color: var(--state-icon-active-color);
|
||||
|
||||
--table-row-background-color: var(--primary-background-color);
|
||||
--table-row-alternative-background-color: var(--secondary-background-color);
|
||||
|
||||
/* set our toggle style */
|
||||
--paper-toggle-button-checked-ink-color: var(--toggle-button-color);
|
||||
--paper-toggle-button-checked-button-color: var(--toggle-button-color);
|
||||
--paper-toggle-button-checked-bar-color: var(--toggle-button-color);
|
||||
--paper-toggle-button-unchecked-button-color: var(--toggle-button-unchecked-color, var(--paper-grey-50));
|
||||
--paper-toggle-button-unchecked-bar-color: var(--toggle-button-unchecked-color, #000000);
|
||||
/* set our slider style */
|
||||
--paper-slider-knob-color: var(--slider-color);
|
||||
--paper-slider-knob-start-color: var(--slider-color);
|
||||
--paper-slider-pin-color: var(--slider-color);
|
||||
--paper-slider-active-color: var(--slider-color);
|
||||
--paper-slider-secondary-color: var(--slider-secondary-color);
|
||||
--paper-slider-container-color: var(--slider-bar-color);
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user