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

Easier theming and also apply theme to date picker (#1041)

Browse Source 
* 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:
NovapaX 2018-04-14 03:32:20 +02:00 committed by Paulus Schoutsen
parent 961f43e4a5
commit f40d64d68c
4 changed files with 93 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

25
src/resources/ha-date-picker-style.html
View File

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

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

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