mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-16 05:46:35 +00:00
Setting used paper-colors in ha-style (#1091)
* setting default paper-colors clean up some whitespace/indentation * better indentation
This commit is contained in:
NovapaX
c727
parent
027165c8ac
commit
1335a74605
@ -2,116 +2,121 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
|
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
|
||||||
|
|
||||||
<custom-style>
|
<custom-style>
|
||||||
<style is="custom-style">/* remove is= on Polymer 2 */
|
<style is="custom-style">/* remove is= on Polymer 2 */
|
||||||
/*
|
/*
|
||||||
Home Assistant default styles.
|
Home Assistant default styles.
|
||||||
|
|
||||||
In Polymer 2.0, default styles should to be set on the html selector.
|
In Polymer 2.0, default styles should to be set on the html selector.
|
||||||
(Setting all default styles only on body breaks shadyCSS polyfill.)
|
(Setting all default styles only on body breaks shadyCSS polyfill.)
|
||||||
See: https://github.com/home-assistant/home-assistant-polymer/pull/901
|
See: https://github.com/home-assistant/home-assistant-polymer/pull/901
|
||||||
*/
|
*/
|
||||||
html {
|
html {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
||||||
/* text */
|
/* text */
|
||||||
--primary-text-color: #212121;
|
--primary-text-color: #212121;
|
||||||
--secondary-text-color: #727272;
|
--secondary-text-color: #727272;
|
||||||
--text-primary-color: #ffffff;
|
--text-primary-color: #ffffff;
|
||||||
--disabled-text-color: #bdbdbd;
|
--disabled-text-color: #bdbdbd;
|
||||||
|
|
||||||
/* main interface colors */
|
/* main interface colors */
|
||||||
--primary-color: #03a9f4;
|
--primary-color: #03a9f4;
|
||||||
--dark-primary-color: #0288d1;
|
--dark-primary-color: #0288d1;
|
||||||
--light-primary-color: #b3e5fC;
|
--light-primary-color: #b3e5fC;
|
||||||
--accent-color: #ff9800;
|
--accent-color: #ff9800;
|
||||||
--divider-color: rgba(0, 0, 0, .12);
|
--divider-color: rgba(0, 0, 0, .12);
|
||||||
|
|
||||||
/* states and badges */
|
/* states and badges */
|
||||||
--state-icon-color: #44739e;
|
--state-icon-color: #44739e;
|
||||||
--state-icon-active-color: #FDD835;
|
--state-icon-active-color: #FDD835;
|
||||||
--state-icon-unavailable-color: var(--disabled-text-color);
|
--state-icon-unavailable-color: var(--disabled-text-color);
|
||||||
|
|
||||||
/* background and sidebar */
|
/* background and sidebar */
|
||||||
--card-background-color: #ffffff;
|
--card-background-color: #ffffff;
|
||||||
--primary-background-color: #fafafa;
|
--primary-background-color: #fafafa;
|
||||||
--secondary-background-color: #e5e5e5; /* behind the cards on state */
|
--secondary-background-color: #e5e5e5; /* behind the cards on state */
|
||||||
|
|
||||||
/* sidebar menu */
|
/* sidebar menu */
|
||||||
--sidebar-text-color: var(--primary-text-color);
|
--sidebar-text-color: var(--primary-text-color);
|
||||||
--sidebar-background-color: var(--paper-listbox-background-color); /* backward compatible with existing themes */
|
--sidebar-background-color: var(--paper-listbox-background-color); /* backward compatible with existing themes */
|
||||||
--sidebar-icon-color: rgba(0, 0, 0, 0.5);
|
--sidebar-icon-color: rgba(0, 0, 0, 0.5);
|
||||||
--sidebar-selected-text-color: var(--primary-text-color);
|
--sidebar-selected-text-color: var(--primary-text-color);
|
||||||
/* --sidebar-selected-background-color: rgba(30,30,30,0.1); */
|
/* --sidebar-selected-background-color: rgba(30,30,30,0.1); */
|
||||||
--sidebar-selected-icon-color: var(--primary-color);
|
--sidebar-selected-icon-color: var(--primary-color);
|
||||||
|
|
||||||
/* controls */
|
/* controls */
|
||||||
--toggle-button-color: var(--primary-color);
|
--toggle-button-color: var(--primary-color);
|
||||||
/* --toggle-button-unchecked-color: var(--accent-color); */
|
/* --toggle-button-unchecked-color: var(--accent-color); */
|
||||||
--slider-color: var(--primary-color);
|
--slider-color: var(--primary-color);
|
||||||
--slider-secondary-color: var(--light-primary-color);
|
--slider-secondary-color: var(--light-primary-color);
|
||||||
--slider-bar-color: var(--disabled-text-color);
|
--slider-bar-color: var(--disabled-text-color);
|
||||||
|
|
||||||
/* for label-badge */
|
/* for label-badge */
|
||||||
--label-badge-background-color: white;
|
--label-badge-background-color: white;
|
||||||
--label-badge-text-color: rgb(76, 76, 76);
|
--label-badge-text-color: rgb(76, 76, 76);
|
||||||
--label-badge-red: #DF4C1E;
|
--label-badge-red: #DF4C1E;
|
||||||
--label-badge-blue: #039be5;
|
--label-badge-blue: #039be5;
|
||||||
--label-badge-green: #0DA035;
|
--label-badge-green: #0DA035;
|
||||||
--label-badge-yellow: #f4b400;
|
--label-badge-yellow: #f4b400;
|
||||||
--label-badge-grey: var(--paper-grey-500);
|
--label-badge-grey: var(--paper-grey-500);
|
||||||
|
|
||||||
/* Taken from paper-styles/color.html */
|
/*
|
||||||
/* for paper-spinner */
|
Paper-styles color.html depency is stripped on build.
|
||||||
--google-red-500: #db4437;
|
When a default paper-style color is used, it needs to be copied
|
||||||
--google-blue-500: #4285f4;
|
from paper-styles/color.html to here.
|
||||||
--google-green-500: #0f9d58;
|
*/
|
||||||
--google-yellow-500: #f4b400;
|
|
||||||
|
|
||||||
/* for paper-slider */
|
--paper-grey-50: #fafafa; /* default for: --paper-toggle-button-unchecked-button-color */
|
||||||
--paper-green-400: #66bb6a;
|
--paper-grey-200: #eeeeee; /* for ha-date-picker-style */
|
||||||
--paper-blue-400: #42a5f5;
|
--paper-grey-500: #9e9e9e; /* --label-badge-grey */
|
||||||
--paper-orange-400: #ffa726;
|
|
||||||
|
|
||||||
/* opacity for dark text on a light background */
|
/* for paper-spinner */
|
||||||
--dark-divider-opacity: 0.12;
|
--google-red-500: #db4437;
|
||||||
--dark-disabled-opacity: 0.38; /* or hint text or icon */
|
--google-blue-500: #4285f4;
|
||||||
--dark-secondary-opacity: 0.54;
|
--google-green-500: #0f9d58;
|
||||||
--dark-primary-opacity: 0.87;
|
--google-yellow-500: #f4b400;
|
||||||
|
|
||||||
/* opacity for light text on a dark background */
|
/* for paper-slider */
|
||||||
--light-divider-opacity: 0.12;
|
--paper-green-400: #66bb6a;
|
||||||
--light-disabled-opacity: 0.3; /* or hint text or icon */
|
--paper-blue-400: #42a5f5;
|
||||||
--light-secondary-opacity: 0.7;
|
--paper-orange-400: #ffa726;
|
||||||
--light-primary-opacity: 1.0;
|
|
||||||
|
|
||||||
/* derived colors, to keep existing themes mostly working */
|
/* opacity for dark text on a light background */
|
||||||
--paper-card-background-color: var(--card-background-color);
|
--dark-divider-opacity: 0.12;
|
||||||
--paper-listbox-background-color: var(--card-background-color);
|
--dark-disabled-opacity: 0.38; /* or hint text or icon */
|
||||||
|
--dark-secondary-opacity: 0.54;
|
||||||
|
--dark-primary-opacity: 0.87;
|
||||||
|
|
||||||
--paper-item-icon-color: var(--state-icon-color);
|
/* opacity for light text on a dark background */
|
||||||
--paper-item-icon-active-color: var(--state-icon-active-color);
|
--light-divider-opacity: 0.12;
|
||||||
|
--light-disabled-opacity: 0.3; /* or hint text or icon */
|
||||||
|
--light-secondary-opacity: 0.7;
|
||||||
|
--light-primary-opacity: 1.0;
|
||||||
|
|
||||||
--table-row-background-color: var(--primary-background-color);
|
/* derived colors, to keep existing themes mostly working */
|
||||||
--table-row-alternative-background-color: var(--secondary-background-color);
|
--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 */
|
/* set our toggle style */
|
||||||
--paper-toggle-button-checked-ink-color: var(--toggle-button-color);
|
--paper-toggle-button-checked-ink-color: var(--toggle-button-color);
|
||||||
--paper-toggle-button-checked-button-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-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-button-color: var(--toggle-button-unchecked-color, var(--paper-grey-50));
|
||||||
--paper-toggle-button-unchecked-bar-color: var(--toggle-button-unchecked-color, #000000);
|
--paper-toggle-button-unchecked-bar-color: var(--toggle-button-unchecked-color, #000000);
|
||||||
/* set our slider style */
|
/* set our slider style */
|
||||||
--paper-slider-knob-color: var(--slider-color);
|
--paper-slider-knob-color: var(--slider-color);
|
||||||
--paper-slider-knob-start-color: var(--slider-color);
|
--paper-slider-knob-start-color: var(--slider-color);
|
||||||
--paper-slider-pin-color: var(--slider-color);
|
--paper-slider-pin-color: var(--slider-color);
|
||||||
--paper-slider-active-color: var(--slider-color);
|
--paper-slider-active-color: var(--slider-color);
|
||||||
--paper-slider-secondary-color: var(--slider-secondary-color);
|
--paper-slider-secondary-color: var(--slider-secondary-color);
|
||||||
--paper-slider-container-color: var(--slider-bar-color);
|
--paper-slider-container-color: var(--slider-bar-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style shady-unscoped>
|
<style shady-unscoped>
|
||||||
/*
|
/*
|
||||||
@ -123,11 +128,11 @@
|
|||||||
paper-dialog-scrollable:not(.can-scroll) > .scrollable {
|
paper-dialog-scrollable:not(.can-scroll) > .scrollable {
|
||||||
-webkit-overflow-scrolling: auto !important;
|
-webkit-overflow-scrolling: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-dialog-scrollable.can-scroll > .scrollable {
|
paper-dialog-scrollable.can-scroll > .scrollable {
|
||||||
-webkit-overflow-scrolling: touch !important;
|
-webkit-overflow-scrolling: touch !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</custom-style>
|
</custom-style>
|
||||||
|
|
||||||
<dom-module id='ha-style'>
|
<dom-module id='ha-style'>
|
||||||
@ -188,7 +193,6 @@
|
|||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
||||||
|
|
||||||
<dom-module id='ha-style-dialog'>
|
<dom-module id='ha-style-dialog'>
|
||||||
<template>
|
<template>
|
||||||
<style>
|
<style>
|
||||||
@ -221,6 +225,7 @@
|
|||||||
-webkit-overflow-scrolling: auto;
|
-webkit-overflow-scrolling: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* force smooth scrolling for iOS 10 */
|
/* force smooth scrolling for iOS 10 */
|
||||||
paper-dialog-scrollable.can-scroll {
|
paper-dialog-scrollable.can-scroll {
|
||||||
--paper-dialog-scrollable: {
|
--paper-dialog-scrollable: {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user