mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Move style into templates
This commit is contained in:
Paulus Schoutsen
parent
43940d067a
commit
406c382a3f
@ -3,8 +3,6 @@
|
|||||||
<link rel='import' href='../components/entity/ha-state-label-badge.html'>
|
<link rel='import' href='../components/entity/ha-state-label-badge.html'>
|
||||||
|
|
||||||
<dom-module id='ha-badges-card'>
|
<dom-module id='ha-badges-card'>
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
<template is='dom-repeat' items='[[states]]'>
|
<template is='dom-repeat' items='[[states]]'>
|
||||||
<ha-state-label-badge hass='[[hass]]' state='[[item]]'></ha-state-label-badge>
|
<ha-state-label-badge hass='[[hass]]' state='[[item]]'></ha-state-label-badge>
|
||||||
|
|||||||
@ -2,40 +2,41 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
|
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
|
||||||
|
|
||||||
<dom-module id='ha-camera-card'>
|
<dom-module id='ha-camera-card'>
|
||||||
<style include="paper-material">
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
font-size: 0px;
|
|
||||||
border-radius: 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 48px;
|
|
||||||
}
|
|
||||||
.camera-feed {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.caption {
|
|
||||||
@apply(--paper-font-common-nowrap);
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
border-bottom-left-radius: 2px;
|
|
||||||
border-bottom-right-radius: 2px;
|
|
||||||
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
text-transform: capitalize;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 16px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style include="paper-material">
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0px;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
min-height: 48px;
|
||||||
|
}
|
||||||
|
.camera-feed {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.caption {
|
||||||
|
@apply(--paper-font-common-nowrap);
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
border-bottom-left-radius: 2px;
|
||||||
|
border-bottom-right-radius: 2px;
|
||||||
|
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<img src='[[cameraFeedSrc]]' class='camera-feed' hidden='[[!imageLoaded]]'
|
<img src='[[cameraFeedSrc]]' class='camera-feed' hidden='[[!imageLoaded]]'
|
||||||
on-load='imageLoadSuccess' on-error='imageLoadFail' alt='[[stateObj.entityDisplay]]'>
|
on-load='imageLoadSuccess' on-error='imageLoadFail' alt='[[stateObj.entityDisplay]]'>
|
||||||
<div class='caption'>
|
<div class='caption'>
|
||||||
|
|||||||
@ -5,35 +5,36 @@
|
|||||||
<link rel='import' href='../state-summary/state-card-content.html'>
|
<link rel='import' href='../state-summary/state-card-content.html'>
|
||||||
|
|
||||||
<dom-module id='ha-entities-card'>
|
<dom-module id='ha-entities-card'>
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
|
||||||
<style>
|
|
||||||
.states {
|
|
||||||
padding-bottom: 16px;
|
|
||||||
}
|
|
||||||
.state {
|
|
||||||
padding: 4px 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
@apply(--paper-font-headline);
|
|
||||||
/* overwriting line-height +8 because entity-toggle can be 40px height,
|
|
||||||
compensating this with reduced padding */
|
|
||||||
line-height: 40px;
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
padding: 20px 16px 12px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
.header .name {
|
|
||||||
@apply(--paper-font-common-nowrap);
|
|
||||||
}
|
|
||||||
ha-entity-toggle {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
.header-more-info {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex"></style>
|
||||||
|
<style>
|
||||||
|
.states {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
.state {
|
||||||
|
padding: 4px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
@apply(--paper-font-headline);
|
||||||
|
/* overwriting line-height +8 because entity-toggle can be 40px height,
|
||||||
|
compensating this with reduced padding */
|
||||||
|
line-height: 40px;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
padding: 20px 16px 12px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
.header .name {
|
||||||
|
@apply(--paper-font-common-nowrap);
|
||||||
|
}
|
||||||
|
ha-entity-toggle {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
.header-more-info {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<ha-card>
|
<ha-card>
|
||||||
<div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
|
<div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
|
||||||
<div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
|
<div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
|
||||||
|
|||||||
@ -3,31 +3,32 @@
|
|||||||
<link rel='import' href='../components/ha-card.html'>
|
<link rel='import' href='../components/ha-card.html'>
|
||||||
|
|
||||||
<dom-module id='ha-introduction-card'>
|
<dom-module id='ha-introduction-card'>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
@apply(--paper-font-body1)
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: var(--dark-primary-color);
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
margin: 8px;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
padding: 0 16px 16px;
|
|
||||||
}
|
|
||||||
.install {
|
|
||||||
display: block;
|
|
||||||
line-height: 1.5em;
|
|
||||||
margin-top: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
@apply(--paper-font-body1)
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--dark-primary-color);
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: 8px;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 0 16px 16px;
|
||||||
|
}
|
||||||
|
.install {
|
||||||
|
display: block;
|
||||||
|
line-height: 1.5em;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<ha-card header="Welcome Home!">
|
<ha-card header="Welcome Home!">
|
||||||
<div class='content'>
|
<div class='content'>
|
||||||
<template is='dom-if' if='[[hass.demo]]'>
|
<template is='dom-if' if='[[hass.demo]]'>
|
||||||
|
|||||||
@ -3,132 +3,133 @@
|
|||||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||||
|
|
||||||
<dom-module id='ha-media_player-card'>
|
<dom-module id='ha-media_player-card'>
|
||||||
<style include="paper-material iron-flex iron-flex-alignment iron-positioning">
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
font-size: 0px;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
background-position: center center;
|
|
||||||
background-image: url(/static/images/card_media_player_bg.png);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
|
|
||||||
border-top-left-radius: 2px;
|
|
||||||
border-top-right-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner:before {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
width: 100%;
|
|
||||||
/* removed .25% from 16:9 ratio to fix YT black bars */
|
|
||||||
padding-top: 56%;
|
|
||||||
transition: padding-top .8s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner.no-cover:before {
|
|
||||||
padding-top: 91px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner > .cover {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
border-top-left-radius: 2px;
|
|
||||||
border-top-right-radius: 2px;
|
|
||||||
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
transition: opacity .8s;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner.is-off > .cover {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner > .caption {
|
|
||||||
@apply(--paper-font-caption);
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
background-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
|
|
||||||
|
|
||||||
padding: 8px 16px;
|
|
||||||
|
|
||||||
text-transform: capitalize;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
transition: background-color .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner.is-off > .caption {
|
|
||||||
background-color: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.banner > .caption .title {
|
|
||||||
@apply(--paper-font-common-nowrap);
|
|
||||||
font-size: 1.2em;
|
|
||||||
margin: 8px 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
padding: 8px;
|
|
||||||
border-bottom-left-radius: 2px;
|
|
||||||
border-bottom-right-radius: 2px;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls paper-icon-button {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-icon-button {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-icon-button[disabled] {
|
|
||||||
color: var(--paper-grey-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-icon-button.primary {
|
|
||||||
width: 56px !important;
|
|
||||||
height: 56px !important;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 8px;
|
|
||||||
transition: background-color .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-icon-button.primary[disabled] {
|
|
||||||
background-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
[invisible] {
|
|
||||||
visibility: hidden !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style include="paper-material iron-flex iron-flex-alignment iron-positioning">
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0px;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background-position: center center;
|
||||||
|
background-image: url(/static/images/card_media_player_bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner:before {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
/* removed .25% from 16:9 ratio to fix YT black bars */
|
||||||
|
padding-top: 56%;
|
||||||
|
transition: padding-top .8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner.no-cover:before {
|
||||||
|
padding-top: 91px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner > .cover {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
|
|
||||||
|
background-position: center center;
|
||||||
|
background-size: cover;
|
||||||
|
transition: opacity .8s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner.is-off > .cover {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner > .caption {
|
||||||
|
@apply(--paper-font-caption);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
background-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
|
||||||
|
|
||||||
|
padding: 8px 16px;
|
||||||
|
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
transition: background-color .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner.is-off > .caption {
|
||||||
|
background-color: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.banner > .caption .title {
|
||||||
|
@apply(--paper-font-common-nowrap);
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin: 8px 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
@apply(--paper-font-body1);
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom-left-radius: 2px;
|
||||||
|
border-bottom-right-radius: 2px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls paper-icon-button {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-icon-button {
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-icon-button[disabled] {
|
||||||
|
color: var(--paper-grey-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-icon-button.primary {
|
||||||
|
width: 56px !important;
|
||||||
|
height: 56px !important;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 8px;
|
||||||
|
transition: background-color .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-icon-button.primary[disabled] {
|
||||||
|
background-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
[invisible] {
|
||||||
|
visibility: hidden !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class$='[[computeBannerClasses(playerObj)]]'>
|
<div class$='[[computeBannerClasses(playerObj)]]'>
|
||||||
<div class='cover' id='cover'></div>
|
<div class='cover' id='cover'></div>
|
||||||
|
|
||||||
|
|||||||
@ -4,19 +4,20 @@
|
|||||||
<link rel='import' href='../components/ha-card.html'>
|
<link rel='import' href='../components/ha-card.html'>
|
||||||
|
|
||||||
<dom-module id='ha-persistent_notification-card'>
|
<dom-module id='ha-persistent_notification-card'>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
padding: 0 16px 16px;
|
|
||||||
}
|
|
||||||
paper-button {
|
|
||||||
margin: 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
@apply(--paper-font-body1);
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 0 16px 16px;
|
||||||
|
}
|
||||||
|
paper-button {
|
||||||
|
margin: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<ha-card header="[[computeTitle(stateObj)]]">
|
<ha-card header="[[computeTitle(stateObj)]]">
|
||||||
<div class='content'>[[stateObj.state]]</div>
|
<div class='content'>[[stateObj.state]]</div>
|
||||||
<paper-button on-tap='dismissTap'>DISMISS</paper-button>
|
<paper-button on-tap='dismissTap'>DISMISS</paper-button>
|
||||||
|
|||||||
@ -3,24 +3,25 @@
|
|||||||
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
|
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||||
|
|
||||||
<dom-module id="ha-entity-toggle">
|
<dom-module id="ha-entity-toggle">
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
paper-icon-button {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
transition: color .5s;
|
|
||||||
}
|
|
||||||
paper-icon-button[state-active] {
|
|
||||||
color: var(--default-primary-color);
|
|
||||||
}
|
|
||||||
paper-toggle-button {
|
|
||||||
cursor: pointer;
|
|
||||||
--paper-toggle-button-label-spacing: 0;
|
|
||||||
padding: 9px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
paper-icon-button {
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
transition: color .5s;
|
||||||
|
}
|
||||||
|
paper-icon-button[state-active] {
|
||||||
|
color: var(--default-primary-color);
|
||||||
|
}
|
||||||
|
paper-toggle-button {
|
||||||
|
cursor: pointer;
|
||||||
|
--paper-toggle-button-label-spacing: 0;
|
||||||
|
padding: 9px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<template is='dom-if' if='[[stateObj.attributes.assumed_state]]'>
|
<template is='dom-if' if='[[stateObj.attributes.assumed_state]]'>
|
||||||
<paper-icon-button icon="mdi:flash-off" on-tap="turnOff" state-active$='[[!isOn]]'></paper-icon-button>
|
<paper-icon-button icon="mdi:flash-off" on-tap="turnOff" state-active$='[[!isOn]]'></paper-icon-button>
|
||||||
<paper-icon-button icon="mdi:flash" on-tap="turnOn" state-active$='[[isOn]]'></paper-icon-button>
|
<paper-icon-button icon="mdi:flash" on-tap="turnOn" state-active$='[[isOn]]'></paper-icon-button>
|
||||||
|
|||||||
@ -3,28 +3,29 @@
|
|||||||
<link rel='import' href='../ha-label-badge.html'>
|
<link rel='import' href='../ha-label-badge.html'>
|
||||||
|
|
||||||
<dom-module id='ha-state-label-badge'>
|
<dom-module id='ha-state-label-badge'>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
ha-label-badge {
|
|
||||||
--ha-label-badge-color: rgb(223, 76, 30);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue {
|
|
||||||
--ha-label-badge-color: #039be5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green {
|
|
||||||
--ha-label-badge-color: #0DA035;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grey {
|
|
||||||
--ha-label-badge-color: var(--paper-grey-500);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
ha-label-badge {
|
||||||
|
--ha-label-badge-color: rgb(223, 76, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
--ha-label-badge-color: #039be5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
--ha-label-badge-color: #0DA035;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grey {
|
||||||
|
--ha-label-badge-color: var(--paper-grey-500);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<ha-label-badge class$='[[computeClasses(state)]]'
|
<ha-label-badge class$='[[computeClasses(state)]]'
|
||||||
value='[[computeValue(state)]]'
|
value='[[computeValue(state)]]'
|
||||||
icon='[[computeIcon(state)]]'
|
icon='[[computeIcon(state)]]'
|
||||||
|
|||||||
@ -3,41 +3,44 @@
|
|||||||
<link rel='import' href='./ha-state-icon.html'>
|
<link rel='import' href='./ha-state-icon.html'>
|
||||||
|
|
||||||
<dom-module id='state-badge'>
|
<dom-module id='state-badge'>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 40px;
|
|
||||||
color: #44739E;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
background-size: cover;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ha-state-icon {
|
|
||||||
transition: color .3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Color the icon if light or sun is on */
|
|
||||||
ha-state-icon[data-domain=light][data-state=on],
|
|
||||||
ha-state-icon[data-domain=switch][data-state=on],
|
|
||||||
ha-state-icon[data-domain=binary_sensor][data-state=on],
|
|
||||||
ha-state-icon[data-domain=sun][data-state=above_horizon] {
|
|
||||||
color: #DCC91F;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Color the icon if unavailable */
|
|
||||||
ha-state-icon[data-state=unavailable] {
|
|
||||||
color: var(--disabled-text-color);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ha-state-icon id='icon' state-obj='[[stateObj]]'
|
<style>
|
||||||
data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
|
:host {
|
||||||
</ha-state-icon>
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 40px;
|
||||||
|
color: #44739E;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
background-size: cover;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ha-state-icon {
|
||||||
|
transition: color .3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color the icon if light or sun is on */
|
||||||
|
ha-state-icon[data-domain=light][data-state=on],
|
||||||
|
ha-state-icon[data-domain=switch][data-state=on],
|
||||||
|
ha-state-icon[data-domain=binary_sensor][data-state=on],
|
||||||
|
ha-state-icon[data-domain=sun][data-state=above_horizon] {
|
||||||
|
color: #DCC91F;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color the icon if unavailable */
|
||||||
|
ha-state-icon[data-state=unavailable] {
|
||||||
|
color: var(--disabled-text-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<ha-state-icon
|
||||||
|
id='icon'
|
||||||
|
state-obj='[[stateObj]]'
|
||||||
|
data-domain$='[[stateObj.domain]]'
|
||||||
|
data-state$='[[stateObj.state]]'
|
||||||
|
></ha-state-icon>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
||||||
|
|||||||
@ -2,23 +2,24 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
|
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
|
||||||
|
|
||||||
<dom-module id='ha-card'>
|
<dom-module id='ha-card'>
|
||||||
<style include="paper-material">
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: all 0.30s ease-out;
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
@apply(--paper-font-headline);
|
|
||||||
@apply(--paper-font-common-expensive-kerning);
|
|
||||||
opacity: var(--dark-primary-opacity);
|
|
||||||
padding: 24px 16px 16px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style include="paper-material">
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: all 0.30s ease-out;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
@apply(--paper-font-headline);
|
||||||
|
@apply(--paper-font-common-expensive-kerning);
|
||||||
|
opacity: var(--dark-primary-opacity);
|
||||||
|
padding: 24px 16px 16px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<template is='dom-if' if='[[header]]'>
|
<template is='dom-if' if='[[header]]'>
|
||||||
<div class='header'>[[header]]</div>
|
<div class='header'>[[header]]</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -5,52 +5,52 @@
|
|||||||
<link rel="import" href="../cards/ha-card-chooser.html">
|
<link rel="import" href="../cards/ha-card-chooser.html">
|
||||||
|
|
||||||
<dom-module id="ha-cards">
|
<dom-module id="ha-cards">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-factors"></style>
|
<template>
|
||||||
<style>
|
<style is="custom-style" include="iron-flex iron-flex-factors"></style>
|
||||||
:host {
|
<style>
|
||||||
display: block;
|
|
||||||
padding-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-badges {
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badges {
|
|
||||||
margin-top: 16px;
|
|
||||||
font-size: 85%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column {
|
|
||||||
max-width: 500px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zone-card {
|
|
||||||
margin-left: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
:host {
|
:host {
|
||||||
padding-right: 0;
|
display: block;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-badges {
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badges {
|
||||||
|
margin-top: 16px;
|
||||||
|
font-size: 85%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
max-width: 500px;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zone-card {
|
.zone-card {
|
||||||
margin-left: 0;
|
margin-left: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 599px) {
|
@media (max-width: 500px) {
|
||||||
.column {
|
:host {
|
||||||
max-width: 600px;
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zone-card {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
@media (max-width: 599px) {
|
||||||
|
.column {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class='main'>
|
<div class='main'>
|
||||||
<template is='dom-if' if='[[cards.badges]]'>
|
<template is='dom-if' if='[[cards.badges]]'>
|
||||||
<div class='badges'>
|
<div class='badges'>
|
||||||
|
|||||||
@ -1,12 +1,13 @@
|
|||||||
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
||||||
|
|
||||||
<dom-module id='ha-color-picker'>
|
<dom-module id='ha-color-picker'>
|
||||||
<style>
|
|
||||||
canvas {
|
|
||||||
cursor: crosshair;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
canvas {
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<canvas width='[[width]]' height='[[height]]'></canvas>
|
<canvas width='[[width]]' height='[[height]]'></canvas>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|||||||
@ -3,12 +3,13 @@
|
|||||||
<link rel='import' href='./ha-label-badge.html'>
|
<link rel='import' href='./ha-label-badge.html'>
|
||||||
|
|
||||||
<dom-module id='ha-demo-badge'>
|
<dom-module id='ha-demo-badge'>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--ha-label-badge-color: #dac90d;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
--ha-label-badge-color: #dac90d;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
icon='mdi:emoticon'
|
icon='mdi:emoticon'
|
||||||
label='Demo'
|
label='Demo'
|
||||||
|
|||||||
@ -2,75 +2,76 @@
|
|||||||
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
|
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
|
||||||
|
|
||||||
<dom-module id='ha-label-badge'>
|
<dom-module id='ha-label-badge'>
|
||||||
<style>
|
|
||||||
.badge-container {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: top;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.label-badge {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 2.5em;
|
|
||||||
text-align: center;
|
|
||||||
height: 2.5em;
|
|
||||||
line-height: 2.5em;
|
|
||||||
font-size: 1.5em;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 0.1em solid var(--ha-label-badge-color, --default-primary-color);
|
|
||||||
color: rgb(76, 76, 76);
|
|
||||||
|
|
||||||
white-space: nowrap;
|
|
||||||
background-color: white;
|
|
||||||
background-size: cover;
|
|
||||||
transition: border .3s ease-in-out;
|
|
||||||
}
|
|
||||||
.label-badge .value {
|
|
||||||
font-size: 90%;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.label-badge .value.big {
|
|
||||||
font-size: 70%;
|
|
||||||
}
|
|
||||||
.label-badge .label {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -1em;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
line-height: 1em;
|
|
||||||
|
|
||||||
font-size: 0.5em;
|
|
||||||
}
|
|
||||||
.label-badge .label span {
|
|
||||||
max-width: 80%;
|
|
||||||
display: inline-block;
|
|
||||||
background-color: var(--ha-label-badge-color, --default-primary-color);
|
|
||||||
color: white;
|
|
||||||
border-radius: 1em;
|
|
||||||
padding: 4px 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
transition: background-color .3s ease-in-out;
|
|
||||||
}
|
|
||||||
.badge-container .title {
|
|
||||||
margin-top: 1em;
|
|
||||||
font-size: .9em;
|
|
||||||
width: 5em;
|
|
||||||
font-weight: 300;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
iron-image {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
.badge-container {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.label-badge {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 2.5em;
|
||||||
|
text-align: center;
|
||||||
|
height: 2.5em;
|
||||||
|
line-height: 2.5em;
|
||||||
|
font-size: 1.5em;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.1em solid var(--ha-label-badge-color, --default-primary-color);
|
||||||
|
color: rgb(76, 76, 76);
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: white;
|
||||||
|
background-size: cover;
|
||||||
|
transition: border .3s ease-in-out;
|
||||||
|
}
|
||||||
|
.label-badge .value {
|
||||||
|
font-size: 90%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.label-badge .value.big {
|
||||||
|
font-size: 70%;
|
||||||
|
}
|
||||||
|
.label-badge .label {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1em;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
line-height: 1em;
|
||||||
|
|
||||||
|
font-size: 0.5em;
|
||||||
|
}
|
||||||
|
.label-badge .label span {
|
||||||
|
max-width: 80%;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--ha-label-badge-color, --default-primary-color);
|
||||||
|
color: white;
|
||||||
|
border-radius: 1em;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
transition: background-color .3s ease-in-out;
|
||||||
|
}
|
||||||
|
.badge-container .title {
|
||||||
|
margin-top: 1em;
|
||||||
|
font-size: .9em;
|
||||||
|
width: 5em;
|
||||||
|
font-weight: 300;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
iron-image {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='badge-container'>
|
<div class='badge-container'>
|
||||||
<div class='label-badge' id='badge'>
|
<div class='label-badge' id='badge'>
|
||||||
<div class$='[[computeClasses(value)]]'>
|
<div class$='[[computeClasses(value)]]'>
|
||||||
|
|||||||
@ -3,28 +3,29 @@
|
|||||||
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
||||||
|
|
||||||
<dom-module id='ha-labeled-slider'>
|
<dom-module id='ha-labeled-slider'>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
opacity: var(--dark-primary-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
iron-icon {
|
|
||||||
float: left;
|
|
||||||
margin-top: 4px;
|
|
||||||
opacity: var(--dark-secondary-opacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-container {
|
|
||||||
margin-left: 24px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
opacity: var(--dark-primary-opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
iron-icon {
|
||||||
|
float: left;
|
||||||
|
margin-top: 4px;
|
||||||
|
opacity: var(--dark-secondary-opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-container {
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='title'>[[caption]]</div>
|
<div class='title'>[[caption]]</div>
|
||||||
<iron-icon icon='[[icon]]'></iron-icon>
|
<iron-icon icon='[[icon]]'></iron-icon>
|
||||||
<div class='slider-container'>
|
<div class='slider-container'>
|
||||||
|
|||||||
@ -10,95 +10,95 @@
|
|||||||
<link rel='import' href='../components/stream-status.html'>
|
<link rel='import' href='../components/stream-status.html'>
|
||||||
|
|
||||||
<dom-module id='ha-sidebar'>
|
<dom-module id='ha-sidebar'>
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--sidebar-text: {
|
|
||||||
opacity: var(--dark-primary-opacity);
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav {
|
|
||||||
-ms-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-toolbar {
|
|
||||||
--paper-toolbar-title: {
|
|
||||||
text-align: left;
|
|
||||||
margin-left: 0px !important;
|
|
||||||
};
|
|
||||||
|
|
||||||
--paper-toolbar-background: #fff;
|
|
||||||
--paper-toolbar-color: #000;
|
|
||||||
opacity: var(--dark-primary-opacity);
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-menu {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-icon-item {
|
|
||||||
--paper-icon-item: {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
--paper-item-icon: {
|
|
||||||
color: #000;
|
|
||||||
opacity: var(--dark-secondary-opacity);
|
|
||||||
};
|
|
||||||
|
|
||||||
--paper-item-selected: {
|
|
||||||
color: var(--default-primary-color);
|
|
||||||
background-color: #e8e8e8;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
paper-icon-item.iron-selected {
|
|
||||||
--paper-item-icon: {
|
|
||||||
color: var(--default-primary-color);
|
|
||||||
opacity: 1;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-icon-item .item-text {
|
|
||||||
@apply(--sidebar-text);
|
|
||||||
}
|
|
||||||
paper-icon-item.iron-selected .item-text {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-icon-item.logout {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
height: 1px;
|
|
||||||
background-color: #000;
|
|
||||||
margin: 4px 0;
|
|
||||||
opacity: var(--dark-divider-opacity)
|
|
||||||
}
|
|
||||||
|
|
||||||
.streaming {
|
|
||||||
@apply(--sidebar-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.subheader {
|
|
||||||
@apply(--sidebar-text);
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dev-tools {
|
|
||||||
padding: 0 8px;
|
|
||||||
opacity: var(--dark-secondary-opacity);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
--sidebar-text: {
|
||||||
|
opacity: var(--dark-primary-opacity);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav {
|
||||||
|
-ms-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toolbar {
|
||||||
|
--paper-toolbar-title: {
|
||||||
|
text-align: left;
|
||||||
|
margin-left: 0px !important;
|
||||||
|
};
|
||||||
|
|
||||||
|
--paper-toolbar-background: #fff;
|
||||||
|
--paper-toolbar-color: #000;
|
||||||
|
opacity: var(--dark-primary-opacity);
|
||||||
|
border-bottom: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-menu {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-icon-item {
|
||||||
|
--paper-icon-item: {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
--paper-item-icon: {
|
||||||
|
color: #000;
|
||||||
|
opacity: var(--dark-secondary-opacity);
|
||||||
|
};
|
||||||
|
|
||||||
|
--paper-item-selected: {
|
||||||
|
color: var(--default-primary-color);
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
paper-icon-item.iron-selected {
|
||||||
|
--paper-item-icon: {
|
||||||
|
color: var(--default-primary-color);
|
||||||
|
opacity: 1;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-icon-item .item-text {
|
||||||
|
@apply(--sidebar-text);
|
||||||
|
}
|
||||||
|
paper-icon-item.iron-selected .item-text {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-icon-item.logout {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
background-color: #000;
|
||||||
|
margin: 4px 0;
|
||||||
|
opacity: var(--dark-divider-opacity)
|
||||||
|
}
|
||||||
|
|
||||||
|
.streaming {
|
||||||
|
@apply(--sidebar-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subheader {
|
||||||
|
@apply(--sidebar-text);
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-tools {
|
||||||
|
padding: 0 8px;
|
||||||
|
opacity: var(--dark-secondary-opacity);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<paper-header-panel mode='scroll' class='sidenav fit'>
|
<paper-header-panel mode='scroll' class='sidenav fit'>
|
||||||
<paper-toolbar>
|
<paper-toolbar>
|
||||||
<div class="title">Home Assistant</div>
|
<div class="title">Home Assistant</div>
|
||||||
|
|||||||
@ -1,17 +1,22 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
|
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
|
||||||
|
|
||||||
<dom-module id="ha-view-tabs">
|
<dom-module id="ha-view-tabs">
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
--paper-tabs-selection-bar-color: #FFF;
|
|
||||||
}
|
|
||||||
paper-tab {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
<paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
|
<style>
|
||||||
on-iron-select='viewSelected' scrollable=''>
|
:host {
|
||||||
|
--paper-tabs-selection-bar-color: #FFF;
|
||||||
|
}
|
||||||
|
paper-tab {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<paper-tabs
|
||||||
|
selected='[[currentView]]'
|
||||||
|
attr-for-selected='data-entity'
|
||||||
|
on-iron-select='viewSelected'
|
||||||
|
scrollable=''
|
||||||
|
>
|
||||||
<paper-tab data-entity='' on-tap='viewTapped'>[[locationName]]</paper-tab>
|
<paper-tab data-entity='' on-tap='viewTapped'>[[locationName]]</paper-tab>
|
||||||
<template is='dom-repeat' items='[[views]]'>
|
<template is='dom-repeat' items='[[views]]'>
|
||||||
<paper-tab data-entity$='[[item.entityId]]' on-tap='viewTapped'>
|
<paper-tab data-entity$='[[item.entityId]]' on-tap='viewTapped'>
|
||||||
|
|||||||
@ -2,16 +2,17 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
||||||
|
|
||||||
<dom-module id="loading-box">
|
<dom-module id="loading-box">
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
|
||||||
<style>
|
|
||||||
.text {
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 28px;
|
|
||||||
vertical-align: top;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex"></style>
|
||||||
|
<style>
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 28px;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='layout horizontal'>
|
<div class='layout horizontal'>
|
||||||
<paper-spinner active="true"></paper-spinner>
|
<paper-spinner active="true"></paper-spinner>
|
||||||
<div class='text'><content></content>…</div>
|
<div class='text'><content></content>…</div>
|
||||||
|
|||||||
@ -1,11 +1,5 @@
|
|||||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||||
|
|
||||||
<dom-module id="relative-ha-datetime">
|
|
||||||
<template>
|
|
||||||
<span>[[relativeTime]]</span>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Polymer({
|
Polymer({
|
||||||
is: 'relative-ha-datetime',
|
is: 'relative-ha-datetime',
|
||||||
@ -24,11 +18,6 @@ Polymer({
|
|||||||
parsedDateTime: {
|
parsedDateTime: {
|
||||||
type: Object,
|
type: Object,
|
||||||
},
|
},
|
||||||
|
|
||||||
relativeTime: {
|
|
||||||
type: String,
|
|
||||||
value: 'not set',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
created: function () {
|
created: function () {
|
||||||
@ -57,7 +46,8 @@ Polymer({
|
|||||||
},
|
},
|
||||||
|
|
||||||
updateRelative: function () {
|
updateRelative: function () {
|
||||||
this.relativeTime = this.parsedDateTime ?
|
var root = Polymer.dom(this);
|
||||||
|
root.innerHTML = this.parsedDateTime ?
|
||||||
window.moment(this.parsedDateTime).fromNow() : '';
|
window.moment(this.parsedDateTime).fromNow() : '';
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -7,22 +7,23 @@
|
|||||||
<link rel="import" href="./state-history-chart-line.html">
|
<link rel="import" href="./state-history-chart-line.html">
|
||||||
|
|
||||||
<dom-module id="state-history-charts">
|
<dom-module id="state-history-charts">
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-container {
|
|
||||||
text-align: center;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
height: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-container {
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
height: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader>
|
<google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader>
|
||||||
|
|
||||||
<div hidden$="[[!isLoading]]" class='loading-container'>
|
<div hidden$="[[!isLoading]]" class='loading-container'>
|
||||||
|
|||||||
@ -4,38 +4,38 @@
|
|||||||
<link rel="import" href="relative-ha-datetime.html">
|
<link rel="import" href="relative-ha-datetime.html">
|
||||||
|
|
||||||
<dom-module id="state-info">
|
<dom-module id="state-info">
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
min-width: 150px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
state-badge {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
margin-left: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
@apply(--paper-font-common-nowrap);
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name[in-dialog] {
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-ago {
|
|
||||||
@apply(--paper-font-common-nowrap);
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
@apply(--paper-font-body1);
|
||||||
|
min-width: 150px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
state-badge {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
margin-left: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
@apply(--paper-font-common-nowrap);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name[in-dialog] {
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-ago {
|
||||||
|
@apply(--paper-font-common-nowrap);
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<state-badge state-obj='[[stateObj]]'></state-badge>
|
<state-badge state-obj='[[stateObj]]'></state-badge>
|
||||||
|
|
||||||
|
|||||||
@ -4,23 +4,29 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
|
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
|
||||||
|
|
||||||
<dom-module id="stream-status">
|
<dom-module id="stream-status">
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: inline-block;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-toggle-button {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
iron-icon {
|
|
||||||
opacity: var(--dark-primary-opacity);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: inline-block;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toggle-button {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
iron-icon {
|
||||||
|
opacity: var(--dark-primary-opacity);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<iron-icon icon="mdi:alert" hidden$="[[!hasError]]"></iron-icon>
|
<iron-icon icon="mdi:alert" hidden$="[[!hasError]]"></iron-icon>
|
||||||
<paper-toggle-button id="toggle" on-change='toggleChanged' checked$='[[isStreaming]]' hidden$="[[hasError]]"></paper-toggle-button>
|
<paper-toggle-button
|
||||||
|
id="toggle"
|
||||||
|
on-change='toggleChanged'
|
||||||
|
checked$='[[isStreaming]]'
|
||||||
|
hidden$="[[hasError]]"
|
||||||
|
></paper-toggle-button>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
||||||
|
|||||||
@ -6,46 +6,46 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
||||||
|
|
||||||
<dom-module id="ha-voice-command-dialog">
|
<dom-module id="ha-voice-command-dialog">
|
||||||
<style>
|
|
||||||
iron-icon {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
width: 300px;
|
|
||||||
min-height: 80px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
margin-left: 48px;
|
|
||||||
margin-right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interimTranscript {
|
|
||||||
color: darkgrey;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 450px) {
|
|
||||||
paper-dialog {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
max-height: calc(100% - 64px);
|
|
||||||
|
|
||||||
position: fixed !important;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
iron-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 300px;
|
||||||
|
min-height: 80px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-left: 48px;
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interimTranscript {
|
||||||
|
color: darkgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 450px) {
|
||||||
|
paper-dialog {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-height: calc(100% - 64px);
|
||||||
|
|
||||||
|
position: fixed !important;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
|
<paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
|
||||||
<div class='content'>
|
<div class='content'>
|
||||||
<div class='icon'>
|
<div class='icon'>
|
||||||
|
|||||||
@ -10,36 +10,37 @@
|
|||||||
<link rel="import" href="../more-infos/more-info-content.html">
|
<link rel="import" href="../more-infos/more-info-content.html">
|
||||||
|
|
||||||
<dom-module id="more-info-dialog">
|
<dom-module id="more-info-dialog">
|
||||||
<style>
|
|
||||||
paper-dialog {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
state-history-charts {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
state-card-content {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (max-width: 450px) {
|
|
||||||
paper-dialog {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
max-height: calc(100% - 64px);
|
|
||||||
|
|
||||||
position: fixed !important;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
paper-dialog {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
state-history-charts {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
state-card-content {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 450px) {
|
||||||
|
paper-dialog {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-height: calc(100% - 64px);
|
||||||
|
|
||||||
|
position: fixed !important;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
|
<!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
|
||||||
<paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
|
<paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
|
||||||
<h2>
|
<h2>
|
||||||
|
|||||||
@ -15,15 +15,6 @@
|
|||||||
<link rel='import' href='./resources/panel-imports.html'>
|
<link rel='import' href='./resources/panel-imports.html'>
|
||||||
|
|
||||||
<dom-module id='home-assistant'>
|
<dom-module id='home-assistant'>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
font-family: 'Roboto', 'Noto', sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<home-assistant-main hass='[[hass]]' hidden$='[[!loaded]]'></home-assistant-main>
|
<home-assistant-main hass='[[hass]]' hidden$='[[!loaded]]'></home-assistant-main>
|
||||||
|
|
||||||
|
|||||||
@ -8,40 +8,40 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
||||||
|
|
||||||
<dom-module id="login-form">
|
<dom-module id="login-form">
|
||||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
#passwordDecorator {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-checkbox {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-button {
|
|
||||||
margin-left: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interact {
|
|
||||||
height: 125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#validatebox {
|
|
||||||
margin-top: 16px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.validatemessage {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#passwordDecorator {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-checkbox {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-button {
|
||||||
|
margin-left: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interact {
|
||||||
|
height: 125px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#validatebox {
|
||||||
|
margin-top: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.validatemessage {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class="layout vertical center center-center fit">
|
<div class="layout vertical center center-center fit">
|
||||||
<img src="/static/icons/favicon-192x192.png" height="192" />
|
<img src="/static/icons/favicon-192x192.png" height="192" />
|
||||||
<a href="#" id="hideKeyboardOnFocus"></a>
|
<a href="#" id="hideKeyboardOnFocus"></a>
|
||||||
|
|||||||
@ -6,19 +6,20 @@
|
|||||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||||
|
|
||||||
<dom-module id='partial-base'>
|
<dom-module id='partial-base'>
|
||||||
<style is="custom-style" include="iron-positioning"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
-ms-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-icon {
|
|
||||||
margin-right: 24px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-positioning"></style>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
-ms-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<paper-scroll-header-panel class='fit'>
|
<paper-scroll-header-panel class='fit'>
|
||||||
<paper-toolbar>
|
<paper-toolbar>
|
||||||
<paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
|
<paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
|
||||||
|
|||||||
@ -3,12 +3,13 @@
|
|||||||
<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
|
<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
|
||||||
|
|
||||||
<dom-module id="notification-manager">
|
<dom-module id="notification-manager">
|
||||||
<style>
|
|
||||||
paper-toast {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
paper-toast {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<paper-toast id="toast" text='{{text}}' no-cancel-on-outside-click='[[neg]]'></paper-toast>
|
<paper-toast id="toast" text='{{text}}' no-cancel-on-outside-click='[[neg]]'></paper-toast>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|||||||
@ -4,16 +4,17 @@
|
|||||||
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
|
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
|
||||||
|
|
||||||
<dom-module id='more-info-alarm_control_panel'>
|
<dom-module id='more-info-alarm_control_panel'>
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
|
||||||
<template>
|
<template>
|
||||||
<div class='layout horizontal'>
|
<style is="custom-style" include="iron-flex"></style>
|
||||||
<paper-input label='code' value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' hidden='[[!codeInputVisible]]' disabled='[[!codeInputEnabled]]'></paper-input>
|
|
||||||
</div>
|
<div class='layout horizontal'>
|
||||||
<div class='layout horizontal'>
|
<paper-input label='code' value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' hidden='[[!codeInputVisible]]' disabled='[[!codeInputEnabled]]'></paper-input>
|
||||||
<paper-button on-tap='handleDisarmTap' hidden='[[!disarmButtonVisible]]' disabled='[[!codeValid]]'>Disarm</paper-button>
|
</div>
|
||||||
<paper-button on-tap='handleHomeTap' hidden='[[!armHomeButtonVisible]]' disabled=[[!codeValid]]>Arm Home</paper-button>
|
<div class='layout horizontal'>
|
||||||
<paper-button on-tap='handleAwayTap' hidden='[[!armAwayButtonVisible]]' disabled='[[!codeValid]]'>Arm Away</paper-button>
|
<paper-button on-tap='handleDisarmTap' hidden='[[!disarmButtonVisible]]' disabled='[[!codeValid]]'>Disarm</paper-button>
|
||||||
</div>
|
<paper-button on-tap='handleHomeTap' hidden='[[!armHomeButtonVisible]]' disabled=[[!codeValid]]>Arm Home</paper-button>
|
||||||
|
<paper-button on-tap='handleAwayTap' hidden='[[!armAwayButtonVisible]]' disabled='[[!codeValid]]'>Arm Away</paper-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||||
|
|
||||||
<dom-module id='more-info-camera'>
|
<dom-module id='more-info-camera'>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
max-width:640px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.camera-image {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
max-width:640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.camera-image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<img class='camera-image' src="[[computeCameraImageUrl(hass, stateObj)]]"
|
<img class='camera-image' src="[[computeCameraImageUrl(hass, stateObj)]]"
|
||||||
on-load='imageLoaded' alt='[[stateObj.entityDisplay]]' />
|
on-load='imageLoaded' alt='[[stateObj.entityDisplay]]' />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -14,14 +14,6 @@
|
|||||||
<link rel='import' href='more-info-lock.html'>
|
<link rel='import' href='more-info-lock.html'>
|
||||||
<link rel='import' href='more-info-hvac.html'>
|
<link rel='import' href='more-info-hvac.html'>
|
||||||
|
|
||||||
<dom-module id='more-info-content'>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Polymer({
|
Polymer({
|
||||||
is: 'more-info-content',
|
is: 'more-info-content',
|
||||||
@ -37,6 +29,10 @@ Polymer({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
created: function () {
|
||||||
|
this.style.display = 'block';
|
||||||
|
},
|
||||||
|
|
||||||
stateObjChanged: function (stateObj) {
|
stateObjChanged: function (stateObj) {
|
||||||
if (!stateObj) return;
|
if (!stateObj) return;
|
||||||
|
|
||||||
|
|||||||
@ -1,13 +1,14 @@
|
|||||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||||
|
|
||||||
<dom-module id="more-info-default">
|
<dom-module id="more-info-default">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
.data-entry .value {
|
|
||||||
max-width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
.data-entry .value {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='layout vertical'>
|
<div class='layout vertical'>
|
||||||
<template is='dom-repeat' items="[[computeDisplayAttributes(stateObj)]]" as="attribute">
|
<template is='dom-repeat' items="[[computeDisplayAttributes(stateObj)]]" as="attribute">
|
||||||
<div class='data-entry layout justified horizontal'>
|
<div class='data-entry layout justified horizontal'>
|
||||||
|
|||||||
@ -2,18 +2,18 @@
|
|||||||
|
|
||||||
<link rel="import" href="../state-summary/state-card-content.html">
|
<link rel="import" href="../state-summary/state-card-content.html">
|
||||||
|
|
||||||
|
|
||||||
<dom-module id="more-info-group">
|
<dom-module id="more-info-group">
|
||||||
<style>
|
|
||||||
.child-card {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.child-card:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
.child-card {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.child-card:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div id="groupedControlDetails"></div>
|
<div id="groupedControlDetails"></div>
|
||||||
<template is='dom-repeat' items="[[states]]" as='state'>
|
<template is='dom-repeat' items="[[states]]" as='state'>
|
||||||
<div class='child-card'>
|
<div class='child-card'>
|
||||||
|
|||||||
@ -5,33 +5,34 @@
|
|||||||
<link rel='import' href='../components/ha-color-picker.html'>
|
<link rel='import' href='../components/ha-color-picker.html'>
|
||||||
|
|
||||||
<dom-module id='more-info-light'>
|
<dom-module id='more-info-light'>
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
|
||||||
<style>
|
|
||||||
.brightness, .color_temp {
|
|
||||||
max-height: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height .5s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
ha-color-picker {
|
|
||||||
display: block;
|
|
||||||
width: 250px;
|
|
||||||
|
|
||||||
max-height: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height .2s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-brightness .brightness,
|
|
||||||
.has-color_temp .color_temp {
|
|
||||||
max-height: 84px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-rgb_color ha-color-picker {
|
|
||||||
max-height: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex"></style>
|
||||||
|
<style>
|
||||||
|
.brightness, .color_temp {
|
||||||
|
max-height: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height .5s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
ha-color-picker {
|
||||||
|
display: block;
|
||||||
|
width: 250px;
|
||||||
|
|
||||||
|
max-height: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height .2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-brightness .brightness,
|
||||||
|
.has-color_temp .color_temp {
|
||||||
|
max-height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-rgb_color ha-color-picker {
|
||||||
|
max-height: 200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class$='[[computeClassNames(stateObj)]]'>
|
<div class$='[[computeClassNames(stateObj)]]'>
|
||||||
|
|
||||||
<div class='brightness'>
|
<div class='brightness'>
|
||||||
|
|||||||
@ -4,12 +4,13 @@
|
|||||||
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
|
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
|
||||||
|
|
||||||
<dom-module id='more-info-lock'>
|
<dom-module id='more-info-lock'>
|
||||||
<style>
|
|
||||||
paper-input {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
paper-input {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div hidden='[[!stateObj.attributes.code_format]]'>
|
<div hidden='[[!stateObj.attributes.code_format]]'>
|
||||||
<paper-input label='code' value='{{enteredCode}}' pattern='[[stateObj.attributes.code_format]]' type='password'></paper-input>
|
<paper-input label='code' value='{{enteredCode}}' pattern='[[stateObj.attributes.code_format]]' type='password'></paper-input>
|
||||||
<paper-button on-tap='handleUnlockTap' hidden$='[[!isLocked]]'>Unlock</paper-button>
|
<paper-button on-tap='handleUnlockTap' hidden$='[[!isLocked]]'>Unlock</paper-button>
|
||||||
|
|||||||
@ -3,38 +3,39 @@
|
|||||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||||
|
|
||||||
<dom-module id='more-info-media_player'>
|
<dom-module id='more-info-media_player'>
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
|
||||||
<style>
|
|
||||||
.media-state {
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-icon-button[highlight] {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
|
|
||||||
max-height: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height .5s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-volume_level .volume {
|
|
||||||
max-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
iron-icon.source-input {
|
|
||||||
padding: 7px;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-dropdown-menu.source-input {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex"></style>
|
||||||
|
<style>
|
||||||
|
.media-state {
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-icon-button[highlight] {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
max-height: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height .5s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-volume_level .volume {
|
||||||
|
max-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
iron-icon.source-input {
|
||||||
|
padding: 7px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-dropdown-menu.source-input {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class$='[[computeClassNames(stateObj)]]'>
|
<div class$='[[computeClassNames(stateObj)]]'>
|
||||||
<div class='layout horizontal'>
|
<div class='layout horizontal'>
|
||||||
<div class='flex'>
|
<div class='flex'>
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
||||||
|
|
||||||
<dom-module id='more-info-script'>
|
<dom-module id='more-info-script'>
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
|
||||||
<div class='layout vertical'>
|
<div class='layout vertical'>
|
||||||
<div class='data-entry layout justified horizontal'>
|
<div class='data-entry layout justified horizontal'>
|
||||||
<div class='key'>Last Action</div>
|
<div class='key'>Last Action</div>
|
||||||
|
|||||||
@ -3,8 +3,9 @@
|
|||||||
<link rel="import" href="../components/relative-ha-datetime.html">
|
<link rel="import" href="../components/relative-ha-datetime.html">
|
||||||
|
|
||||||
<dom-module id="more-info-sun">
|
<dom-module id="more-info-sun">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
|
||||||
<template is='dom-repeat' items='[[computeOrder(risingDate, settingDate)]]'>
|
<template is='dom-repeat' items='[[computeOrder(risingDate, settingDate)]]'>
|
||||||
<div class='data-entry layout justified horizontal'>
|
<div class='data-entry layout justified horizontal'>
|
||||||
<div class='key'>
|
<div class='key'>
|
||||||
|
|||||||
@ -3,22 +3,23 @@
|
|||||||
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
||||||
|
|
||||||
<dom-module id='more-info-thermostat'>
|
<dom-module id='more-info-thermostat'>
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
|
||||||
<style>
|
|
||||||
paper-slider {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.away-mode-toggle {
|
|
||||||
display: none;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-away_mode .away-mode-toggle {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex"></style>
|
||||||
|
<style>
|
||||||
|
paper-slider {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.away-mode-toggle {
|
||||||
|
display: none;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-away_mode .away-mode-toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class$='[[computeClassNames(stateObj)]]'>
|
<div class$='[[computeClassNames(stateObj)]]'>
|
||||||
<div>
|
<div>
|
||||||
<div>Target Temperature</div>
|
<div>Target Temperature</div>
|
||||||
|
|||||||
@ -1,13 +1,14 @@
|
|||||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||||
|
|
||||||
<dom-module id="more-info-updater">
|
<dom-module id="more-info-updater">
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
|
||||||
<style>
|
|
||||||
.link {
|
|
||||||
color: #03A9F4;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex"></style>
|
||||||
|
<style>
|
||||||
|
.link {
|
||||||
|
color: #03A9F4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='layout vertical'>
|
<div class='layout vertical'>
|
||||||
|
|
||||||
<a class='link' href='https://home-assistant.io/getting-started/#updating' target='_blank'>Update Instructions</a>
|
<a class='link' href='https://home-assistant.io/getting-started/#updating' target='_blank'>Update Instructions</a>
|
||||||
|
|||||||
@ -1,6 +1,13 @@
|
|||||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||||
|
|
||||||
<style is="custom-style">
|
<style is="custom-style">
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', 'Noto', sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--dark-primary-color: #0288D1;
|
--dark-primary-color: #0288D1;
|
||||||
--default-primary-color: #03A9F4;
|
--default-primary-color: #03A9F4;
|
||||||
|
|||||||
@ -4,17 +4,17 @@
|
|||||||
<link rel="import" href="../components/state-info.html">
|
<link rel="import" href="../components/state-info.html">
|
||||||
|
|
||||||
<dom-module id='state-card-configurator'>
|
<dom-module id='state-card-configurator'>
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
paper-button {
|
|
||||||
color: var(--default-primary-color);
|
|
||||||
font-weight: 500;
|
|
||||||
top: 3px;
|
|
||||||
height: 37px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
paper-button {
|
||||||
|
color: var(--default-primary-color);
|
||||||
|
font-weight: 500;
|
||||||
|
top: 3px;
|
||||||
|
height: 37px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<paper-button hidden$='[[inDialog]]'>[[stateObj.state]]</paper-button>
|
<paper-button hidden$='[[inDialog]]'>[[stateObj.state]]</paper-button>
|
||||||
|
|||||||
@ -3,19 +3,19 @@
|
|||||||
<link rel="import" href="../components/state-info.html">
|
<link rel="import" href="../components/state-info.html">
|
||||||
|
|
||||||
<dom-module id="state-card-display">
|
<dom-module id="state-card-display">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
.state {
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
|
|
||||||
margin-left: 16px;
|
|
||||||
text-align: right;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
.state {
|
||||||
|
@apply(--paper-font-body1);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
|
||||||
|
margin-left: 16px;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<div class='state'>[[stateObj.stateDisplay]]</div>
|
<div class='state'>[[stateObj.stateDisplay]]</div>
|
||||||
|
|||||||
@ -3,20 +3,20 @@
|
|||||||
<link rel="import" href="../components/state-info.html">
|
<link rel="import" href="../components/state-info.html">
|
||||||
|
|
||||||
<dom-module id="state-card-hvac">
|
<dom-module id="state-card-hvac">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
.state {
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
|
|
||||||
margin-left: 16px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
text-align: right;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
.state {
|
||||||
|
@apply(--paper-font-body1);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
|
||||||
|
margin-left: 16px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<div class='state'>[[stateObj.state]]</div>
|
<div class='state'>[[stateObj.state]]</div>
|
||||||
|
|||||||
@ -4,23 +4,23 @@
|
|||||||
<link rel="import" href="../components/entity/state-badge.html">
|
<link rel="import" href="../components/entity/state-badge.html">
|
||||||
|
|
||||||
<dom-module id="state-card-input_select">
|
<dom-module id="state-card-input_select">
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
state-badge {
|
|
||||||
float: left;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
margin-left: 53px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
state-badge {
|
||||||
|
float: left;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-dropdown-menu {
|
||||||
|
display: block;
|
||||||
|
margin-left: 53px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<state-badge state-obj='[[stateObj]]'></state-badge>
|
<state-badge state-obj='[[stateObj]]'></state-badge>
|
||||||
<paper-dropdown-menu
|
<paper-dropdown-menu
|
||||||
on-tap='stopPropagation'
|
on-tap='stopPropagation'
|
||||||
|
|||||||
@ -4,14 +4,14 @@
|
|||||||
<link rel="import" href="../components/state-info.html">
|
<link rel="import" href="../components/state-info.html">
|
||||||
|
|
||||||
<dom-module id="state-card-input_slider">
|
<dom-module id="state-card-input_slider">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
paper-slider {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
paper-slider {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<paper-slider
|
<paper-slider
|
||||||
|
|||||||
@ -3,35 +3,36 @@
|
|||||||
<link rel="import" href="../components/state-info.html">
|
<link rel="import" href="../components/state-info.html">
|
||||||
|
|
||||||
<dom-module id="state-card-media_player">
|
<dom-module id="state-card-media_player">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state {
|
|
||||||
@apply(--paper-font-common-nowrap);
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
margin-left: 16px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-text {
|
|
||||||
@apply(--paper-font-common-nowrap);
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-text[take-height] {
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary-text {
|
|
||||||
@apply(--paper-font-common-nowrap);
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
@apply(--paper-font-common-nowrap);
|
||||||
|
@apply(--paper-font-body1);
|
||||||
|
margin-left: 16px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-text {
|
||||||
|
@apply(--paper-font-common-nowrap);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-text[take-height] {
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-text {
|
||||||
|
@apply(--paper-font-common-nowrap);
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<div class='state'>
|
<div class='state'>
|
||||||
|
|||||||
@ -4,20 +4,20 @@
|
|||||||
<link rel="import" href="../components/state-info.html">
|
<link rel="import" href="../components/state-info.html">
|
||||||
|
|
||||||
<dom-module id="state-card-rollershutter">
|
<dom-module id="state-card-rollershutter">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state {
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
width: 127px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
text-align: right;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 127px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<div class='state'>
|
<div class='state'>
|
||||||
|
|||||||
@ -4,17 +4,17 @@
|
|||||||
<link rel="import" href="../components/state-info.html">
|
<link rel="import" href="../components/state-info.html">
|
||||||
|
|
||||||
<dom-module id="state-card-scene">
|
<dom-module id="state-card-scene">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
paper-button {
|
|
||||||
color: var(--default-primary-color);
|
|
||||||
font-weight: 500;
|
|
||||||
top: 3px;
|
|
||||||
height: 37px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
paper-button {
|
||||||
|
color: var(--default-primary-color);
|
||||||
|
font-weight: 500;
|
||||||
|
top: 3px;
|
||||||
|
height: 37px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<paper-button on-tap='activateScene'>ACTIVATE</paper-button>
|
<paper-button on-tap='activateScene'>ACTIVATE</paper-button>
|
||||||
|
|||||||
@ -5,17 +5,17 @@
|
|||||||
<link rel="import" href="../components/entity/ha-entity-toggle.html">
|
<link rel="import" href="../components/entity/ha-entity-toggle.html">
|
||||||
|
|
||||||
<dom-module id="state-card-script">
|
<dom-module id="state-card-script">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
paper-button {
|
|
||||||
color: var(--default-primary-color);
|
|
||||||
font-weight: 500;
|
|
||||||
top: 3px;
|
|
||||||
height: 37px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
paper-button {
|
||||||
|
color: var(--default-primary-color);
|
||||||
|
font-weight: 500;
|
||||||
|
top: 3px;
|
||||||
|
height: 37px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<template is='dom-if' if='[[stateObj.attributes.can_cancel]]'>
|
<template is='dom-if' if='[[stateObj.attributes.can_cancel]]'>
|
||||||
|
|||||||
@ -3,27 +3,28 @@
|
|||||||
<link rel="import" href="../components/state-info.html">
|
<link rel="import" href="../components/state-info.html">
|
||||||
|
|
||||||
<dom-module id="state-card-thermostat">
|
<dom-module id="state-card-thermostat">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state {
|
|
||||||
margin-left: 16px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.target {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.current {
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
@apply(--paper-font-body1);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
margin-left: 16px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.target {
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.current {
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<div class='state'>
|
<div class='state'>
|
||||||
|
|||||||
@ -4,13 +4,14 @@
|
|||||||
<link rel="import" href="../components/entity/ha-entity-toggle.html">
|
<link rel="import" href="../components/entity/ha-entity-toggle.html">
|
||||||
|
|
||||||
<dom-module id="state-card-toggle">
|
<dom-module id="state-card-toggle">
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
ha-entity-toggle {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
ha-entity-toggle {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<ha-entity-toggle state-obj="[[stateObj]]" hass='[[hass]]'></ha-entity-toggle>
|
<ha-entity-toggle state-obj="[[stateObj]]" hass='[[hass]]'></ha-entity-toggle>
|
||||||
|
|||||||
@ -3,22 +3,22 @@
|
|||||||
<link rel="import" href="../components/entity/state-badge.html">
|
<link rel="import" href="../components/entity/state-badge.html">
|
||||||
|
|
||||||
<dom-module id="state-card-weblink">
|
<dom-module id="state-card-weblink">
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
@apply(--paper-font-common-nowrap);
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
color: var(--primary-color);
|
|
||||||
|
|
||||||
text-transform: capitalize;
|
|
||||||
line-height: 40px;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
@apply(--paper-font-common-nowrap);
|
||||||
|
@apply(--paper-font-body1);
|
||||||
|
color: var(--primary-color);
|
||||||
|
|
||||||
|
text-transform: capitalize;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<state-badge state-obj='[[stateObj]]' in-dialog='[[inDialog]]'></state-badge>
|
<state-badge state-obj='[[stateObj]]' in-dialog='[[inDialog]]'></state-badge>
|
||||||
<a href$='[[stateObj.state]]' target='_blank' class='name' id='link'>[[stateObj.entityDisplay]]</a>
|
<a href$='[[stateObj.state]]' target='_blank' class='name' id='link'>[[stateObj.entityDisplay]]</a>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user