Tweak colors

This commit is contained in:
Paulus Schoutsen 2017-02-13 23:32:33 -08:00
parent e9224d9062
commit 267c0d51e1
8 changed files with 20 additions and 18 deletions

View File

@ -11,10 +11,6 @@
<dom-module id="ha-panel-config">
<template>
<style include="iron-flex ha-style">
app-header-layout {
background-color: #fafafa;
}
.content {
padding-bottom: 32px;
}

View File

@ -20,11 +20,11 @@
<style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
<style>
:host {
background-color: white;
-ms-user-select: initial;
-webkit-user-select: initial;
-moz-user-select: initial;
}
.content {
@apply(--paper-font-body1);
padding: 16px;

View File

@ -13,7 +13,6 @@
<template>
<style include="iron-positioning ha-style">
:host {
background-color: white;
-ms-user-select: initial;
-webkit-user-select: initial;
-moz-user-select: initial;

View File

@ -17,7 +17,6 @@
<template>
<style include='ha-style'>
:host {
background-color: white;
-ms-user-select: initial;
-webkit-user-select: initial;
-moz-user-select: initial;

View File

@ -16,7 +16,6 @@
<template>
<style include="ha-style">
:host {
background-color: white;
-ms-user-select: initial;
-webkit-user-select: initial;
-moz-user-select: initial;

View File

@ -15,7 +15,6 @@
<style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
<style>
:host {
background-color: white;
-ms-user-select: initial;
-webkit-user-select: initial;
-moz-user-select: initial;

View File

@ -15,7 +15,7 @@
<style include="iron-flex iron-flex-alignment iron-positioning">
:host {
--sidebar-text: {
opacity: var(--dark-primary-opacity);
color: var(--primary-text-color);
font-weight: 500;
font-size: 14px;
};
@ -24,12 +24,14 @@
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
border-right: 1px solid var(--divider-color);
}
app-toolbar {
font-weight: 400;
opacity: var(--dark-primary-opacity);
border-bottom: 1px solid #e0e0e0;
color: var(--primary-text-color);
border-bottom: 1px solid var(--divider-color);
background-color: var(--primary-background-color);
}
paper-menu {
@ -48,7 +50,7 @@
--paper-item-selected: {
color: var(--default-primary-color);
background-color: #e8e8e8;
background-color: var(--paper-grey-200);
opacity: 1;
};
}

View File

@ -4,17 +4,21 @@
html {
font-size: 14px;
/* for paper-toggle-button */
--paper-grey-50: #fafafa;
--paper-grey-200: #eeeeee;
--dark-primary-color: #0288D1;
--default-primary-color: #03A9F4;
--primary-color: #03A9F4;
--light-primary-color: #B3E5FC;
--text-primary-color: #ffffff;
--accent-color: #FF9800;
--primary-background-color: #ffffff;
--primary-background-color: var(--paper-grey-50);
--primary-text-color: #212121;
--secondary-text-color: #727272;
--disabled-text-color: #bdbdbd;
--divider-color: #B6B6B6;
--divider-color: rgba(0, 0, 0, .12);
--paper-toggle-button-checked-ink-color: #039be5;
--paper-toggle-button-checked-button-color: #039be5;
@ -27,6 +31,9 @@
--paper-slider-secondary-color: var(--light-primary-color);
--paper-slider-container-color: var(--divider-color);
--paper-card-background-color: #FFF;
--paper-menu-background-color: #FFF;
/* Taken from paper-styles/color.html */
/* for paper-spinner */
--google-red-500: #db4437;
@ -34,9 +41,6 @@
--google-green-500: #0f9d58;
--google-yellow-500: #f4b400;
/* for paper-toggle-button */
--paper-grey-50: #fafafa;
/* for paper-slider */
--paper-green-400: #66bb6a;
--paper-blue-400: #42a5f5;
@ -63,6 +67,10 @@
@apply(--paper-font-body1);
}
app-header-layout {
background-color: var(--primary-background-color);
}
app-header, app-toolbar {
background-color: var(--primary-color);
font-weight: 400;