Hassio, use CSS vars to avoid conflicts with themes (#918)

* Hassio, use CSS vars to avoid conflicts with themes

* More
This commit is contained in:
c727 2018-02-24 00:07:09 +01:00 committed by Paulus Schoutsen
parent b47c5beacf
commit cdd4cabb4b
7 changed files with 21 additions and 11 deletions

View File

@ -1,7 +1,6 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
@ -26,8 +25,6 @@
iron-autogrow-textarea {
width: 100%;
font-family: monospace;
background-color: var(--primary-text-color);
color: var(--text-primary-color);
}
.syntaxerror {
color: var(--google-red-500);

View File

@ -7,6 +7,7 @@
<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
<link rel='import' href='../../src/components/ha-markdown.html'>
<link rel='import' href='../../src/resources/ha-style.html'>
<dom-module id="hassio-addon-info">
<template>

View File

@ -2,9 +2,11 @@
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel='import' href='../../src/resources/ha-style.html'>
<dom-module id="hassio-addon-logs">
<template>
<style include="iron-flex ha-style">
<style include="ha-style">
:host,
paper-card {
display: block;

View File

@ -3,6 +3,7 @@
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel='import' href='../../src/util/hass-mixins.html'>
<link rel='import' href='../../src/resources/ha-style.html'>
<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">

View File

@ -16,16 +16,20 @@
<dom-module id="hassio-addon-view">
<template>
<style include="iron-flex ha-style">
hassio-addon-info,
hassio-addon-network,
hassio-addon-config {
margin-bottom: 24px;
}
:host {
color: var(--primary-text-color);
--paper-card-header-color: var(--primary-text-color);
}
.content {
padding: 24px 0 32px;
max-width: 600px;
margin: 0 auto;
}
hassio-addon-info,
hassio-addon-network,
hassio-addon-config {
margin-bottom: 24px;
}
</style>
<app-route
route='[[route]]'

View File

@ -17,6 +17,10 @@
<dom-module id='hassio-pages-with-tabs'>
<template>
<style include='iron-flex iron-positioning ha-style'>
:host {
color: var(--primary-text-color);
--paper-card-header-color: var(--primary-text-color);
}
paper-tabs {
margin-left: 12px;
--paper-tabs-selection-bar-color: #FFF;

View File

@ -22,9 +22,10 @@
}
iron-icon.hassupdate,
iron-icon.snapshot {
color: var(--primary-color);
color: var(--paper-item-icon-color);
}
.title {
color: var(--primary-text-color);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@ -56,7 +57,7 @@
</dom-module>
<script>
class HassioCardContent extends window.hassMixins.EventsMixin(Polymer.Element) {
class HassioCardContent extends Polymer.Element {
static get is() { return 'hassio-card-content'; }
static get properties() {