mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 00:36:34 +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'>
|
||||
|
||||
<dom-module id='ha-badges-card'>
|
||||
<style>
|
||||
</style>
|
||||
<template>
|
||||
<template is='dom-repeat' items='[[states]]'>
|
||||
<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">
|
||||
|
||||
<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>
|
||||
<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]]'
|
||||
on-load='imageLoadSuccess' on-error='imageLoadFail' alt='[[stateObj.entityDisplay]]'>
|
||||
<div class='caption'>
|
||||
|
||||
@ -5,35 +5,36 @@
|
||||
<link rel='import' href='../state-summary/state-card-content.html'>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
|
||||
<div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
|
||||
|
||||
@ -3,31 +3,32 @@
|
||||
<link rel='import' href='../components/ha-card.html'>
|
||||
|
||||
<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>
|
||||
<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!">
|
||||
<div class='content'>
|
||||
<template is='dom-if' if='[[hass.demo]]'>
|
||||
|
||||
@ -3,132 +3,133 @@
|
||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||
|
||||
<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>
|
||||
<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='cover' id='cover'></div>
|
||||
|
||||
|
||||
@ -4,19 +4,20 @@
|
||||
<link rel='import' href='../components/ha-card.html'>
|
||||
|
||||
<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>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--paper-font-body1);
|
||||
}
|
||||
.content {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
paper-button {
|
||||
margin: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ha-card header="[[computeTitle(stateObj)]]">
|
||||
<div class='content'>[[stateObj.state]]</div>
|
||||
<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">
|
||||
|
||||
<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>
|
||||
<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]]'>
|
||||
<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>
|
||||
|
||||
@ -3,28 +3,29 @@
|
||||
<link rel='import' href='../ha-label-badge.html'>
|
||||
|
||||
<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>
|
||||
<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)]]'
|
||||
value='[[computeValue(state)]]'
|
||||
icon='[[computeIcon(state)]]'
|
||||
|
||||
@ -3,41 +3,44 @@
|
||||
<link rel='import' href='./ha-state-icon.html'>
|
||||
|
||||
<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>
|
||||
<ha-state-icon id='icon' state-obj='[[stateObj]]'
|
||||
data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
|
||||
</ha-state-icon>
|
||||
<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>
|
||||
|
||||
<ha-state-icon
|
||||
id='icon'
|
||||
state-obj='[[stateObj]]'
|
||||
data-domain$='[[stateObj.domain]]'
|
||||
data-state$='[[stateObj.state]]'
|
||||
></ha-state-icon>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -2,23 +2,24 @@
|
||||
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
|
||||
|
||||
<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>
|
||||
<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]]'>
|
||||
<div class='header'>[[header]]</div>
|
||||
</template>
|
||||
|
||||
@ -5,52 +5,52 @@
|
||||
<link rel="import" href="../cards/ha-card-chooser.html">
|
||||
|
||||
<dom-module id="ha-cards">
|
||||
<style is="custom-style" include="iron-flex iron-flex-factors"></style>
|
||||
<style>
|
||||
:host {
|
||||
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) {
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-flex-factors"></style>
|
||||
<style>
|
||||
: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 {
|
||||
margin-left: 0;
|
||||
margin-left: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.column {
|
||||
max-width: 600px;
|
||||
@media (max-width: 500px) {
|
||||
:host {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.zone-card {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@media (max-width: 599px) {
|
||||
.column {
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class='main'>
|
||||
<template is='dom-if' if='[[cards.badges]]'>
|
||||
<div class='badges'>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
||||
|
||||
<dom-module id='ha-color-picker'>
|
||||
<style>
|
||||
canvas {
|
||||
cursor: crosshair;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<style>
|
||||
canvas {
|
||||
cursor: crosshair;
|
||||
}
|
||||
</style>
|
||||
|
||||
<canvas width='[[width]]' height='[[height]]'></canvas>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
@ -3,12 +3,13 @@
|
||||
<link rel='import' href='./ha-label-badge.html'>
|
||||
|
||||
<dom-module id='ha-demo-badge'>
|
||||
<style>
|
||||
:host {
|
||||
--ha-label-badge-color: #dac90d;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
--ha-label-badge-color: #dac90d;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ha-label-badge
|
||||
icon='mdi:emoticon'
|
||||
label='Demo'
|
||||
|
||||
@ -2,75 +2,76 @@
|
||||
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
|
||||
|
||||
<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>
|
||||
<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='label-badge' id='badge'>
|
||||
<div class$='[[computeClasses(value)]]'>
|
||||
|
||||
@ -3,28 +3,29 @@
|
||||
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<iron-icon icon='[[icon]]'></iron-icon>
|
||||
<div class='slider-container'>
|
||||
|
||||
@ -10,95 +10,95 @@
|
||||
<link rel='import' href='../components/stream-status.html'>
|
||||
|
||||
<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>
|
||||
<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-toolbar>
|
||||
<div class="title">Home Assistant</div>
|
||||
|
||||
@ -1,17 +1,22 @@
|
||||
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
|
||||
|
||||
<dom-module id="ha-view-tabs">
|
||||
<style>
|
||||
:host {
|
||||
--paper-tabs-selection-bar-color: #FFF;
|
||||
}
|
||||
paper-tab {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
|
||||
on-iron-select='viewSelected' scrollable=''>
|
||||
<style>
|
||||
: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>
|
||||
<template is='dom-repeat' items='[[views]]'>
|
||||
<paper-tab data-entity$='[[item.entityId]]' on-tap='viewTapped'>
|
||||
|
||||
@ -2,16 +2,17 @@
|
||||
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
||||
|
||||
<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>
|
||||
<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'>
|
||||
<paper-spinner active="true"></paper-spinner>
|
||||
<div class='text'><content></content>…</div>
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<dom-module id="relative-ha-datetime">
|
||||
<template>
|
||||
<span>[[relativeTime]]</span>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'relative-ha-datetime',
|
||||
@ -24,11 +18,6 @@ Polymer({
|
||||
parsedDateTime: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
relativeTime: {
|
||||
type: String,
|
||||
value: 'not set',
|
||||
},
|
||||
},
|
||||
|
||||
created: function () {
|
||||
@ -57,7 +46,8 @@ Polymer({
|
||||
},
|
||||
|
||||
updateRelative: function () {
|
||||
this.relativeTime = this.parsedDateTime ?
|
||||
var root = Polymer.dom(this);
|
||||
root.innerHTML = this.parsedDateTime ?
|
||||
window.moment(this.parsedDateTime).fromNow() : '';
|
||||
},
|
||||
});
|
||||
|
||||
@ -7,22 +7,23 @@
|
||||
<link rel="import" href="./state-history-chart-line.html">
|
||||
|
||||
<dom-module id="state-history-charts">
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
||||
<div hidden$="[[!isLoading]]" class='loading-container'>
|
||||
|
||||
@ -4,38 +4,38 @@
|
||||
<link rel="import" href="relative-ha-datetime.html">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<state-badge state-obj='[[stateObj]]'></state-badge>
|
||||
|
||||
|
||||
@ -4,23 +4,29 @@
|
||||
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -6,46 +6,46 @@
|
||||
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
|
||||
|
||||
<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>
|
||||
<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}}'>
|
||||
<div class='content'>
|
||||
<div class='icon'>
|
||||
|
||||
@ -10,36 +10,37 @@
|
||||
<link rel="import" href="../more-infos/more-info-content.html">
|
||||
|
||||
<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>
|
||||
<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' -->
|
||||
<paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
|
||||
<h2>
|
||||
|
||||
@ -15,15 +15,6 @@
|
||||
<link rel='import' href='./resources/panel-imports.html'>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<img src="/static/icons/favicon-192x192.png" height="192" />
|
||||
<a href="#" id="hideKeyboardOnFocus"></a>
|
||||
|
||||
@ -6,19 +6,20 @@
|
||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||
|
||||
<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>
|
||||
<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-toolbar>
|
||||
<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">
|
||||
|
||||
<dom-module id="notification-manager">
|
||||
<style>
|
||||
paper-toast {
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<style>
|
||||
paper-toast {
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<paper-toast id="toast" text='{{text}}' no-cancel-on-outside-click='[[neg]]'></paper-toast>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
@ -4,16 +4,17 @@
|
||||
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
|
||||
|
||||
<dom-module id='more-info-alarm_control_panel'>
|
||||
<style is="custom-style" include="iron-flex"></style>
|
||||
<template>
|
||||
<div class='layout horizontal'>
|
||||
<paper-input label='code' value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' hidden='[[!codeInputVisible]]' disabled='[[!codeInputEnabled]]'></paper-input>
|
||||
</div>
|
||||
<div class='layout horizontal'>
|
||||
<paper-button on-tap='handleDisarmTap' hidden='[[!disarmButtonVisible]]' disabled='[[!codeValid]]'>Disarm</paper-button>
|
||||
<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>
|
||||
<style is="custom-style" include="iron-flex"></style>
|
||||
|
||||
<div class='layout horizontal'>
|
||||
<paper-input label='code' value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' hidden='[[!codeInputVisible]]' disabled='[[!codeInputEnabled]]'></paper-input>
|
||||
</div>
|
||||
<div class='layout horizontal'>
|
||||
<paper-button on-tap='handleDisarmTap' hidden='[[!disarmButtonVisible]]' disabled='[[!codeValid]]'>Disarm</paper-button>
|
||||
<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>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<dom-module id='more-info-camera'>
|
||||
<style>
|
||||
:host {
|
||||
max-width:640px;
|
||||
}
|
||||
|
||||
.camera-image {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
max-width:640px;
|
||||
}
|
||||
|
||||
.camera-image {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class='camera-image' src="[[computeCameraImageUrl(hass, stateObj)]]"
|
||||
on-load='imageLoaded' alt='[[stateObj.entityDisplay]]' />
|
||||
</template>
|
||||
|
||||
@ -14,14 +14,6 @@
|
||||
<link rel='import' href='more-info-lock.html'>
|
||||
<link rel='import' href='more-info-hvac.html'>
|
||||
|
||||
<dom-module id='more-info-content'>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'more-info-content',
|
||||
@ -37,6 +29,10 @@ Polymer({
|
||||
},
|
||||
},
|
||||
|
||||
created: function () {
|
||||
this.style.display = 'block';
|
||||
},
|
||||
|
||||
stateObjChanged: function (stateObj) {
|
||||
if (!stateObj) return;
|
||||
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<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>
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
.data-entry .value {
|
||||
max-width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='layout vertical'>
|
||||
<template is='dom-repeat' items="[[computeDisplayAttributes(stateObj)]]" as="attribute">
|
||||
<div class='data-entry layout justified horizontal'>
|
||||
|
||||
@ -2,18 +2,18 @@
|
||||
|
||||
<link rel="import" href="../state-summary/state-card-content.html">
|
||||
|
||||
|
||||
<dom-module id="more-info-group">
|
||||
<style>
|
||||
.child-card {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.child-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<style>
|
||||
.child-card {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.child-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="groupedControlDetails"></div>
|
||||
<template is='dom-repeat' items="[[states]]" as='state'>
|
||||
<div class='child-card'>
|
||||
|
||||
@ -5,33 +5,34 @@
|
||||
<link rel='import' href='../components/ha-color-picker.html'>
|
||||
|
||||
<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>
|
||||
<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='brightness'>
|
||||
|
||||
@ -4,12 +4,13 @@
|
||||
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
|
||||
|
||||
<dom-module id='more-info-lock'>
|
||||
<style>
|
||||
paper-input {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<style>
|
||||
paper-input {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div hidden='[[!stateObj.attributes.code_format]]'>
|
||||
<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>
|
||||
|
||||
@ -3,38 +3,39 @@
|
||||
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||
|
||||
<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>
|
||||
<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='layout horizontal'>
|
||||
<div class='flex'>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
||||
|
||||
<dom-module id='more-info-script'>
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
|
||||
<div class='layout vertical'>
|
||||
<div class='data-entry layout justified horizontal'>
|
||||
<div class='key'>Last Action</div>
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
<link rel="import" href="../components/relative-ha-datetime.html">
|
||||
|
||||
<dom-module id="more-info-sun">
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
|
||||
<template is='dom-repeat' items='[[computeOrder(risingDate, settingDate)]]'>
|
||||
<div class='data-entry layout justified horizontal'>
|
||||
<div class='key'>
|
||||
|
||||
@ -3,22 +3,23 @@
|
||||
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<div>Target Temperature</div>
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
|
||||
<dom-module id="more-info-updater">
|
||||
<style is="custom-style" include="iron-flex"></style>
|
||||
<style>
|
||||
.link {
|
||||
color: #03A9F4;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex"></style>
|
||||
<style>
|
||||
.link {
|
||||
color: #03A9F4;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='layout vertical'>
|
||||
|
||||
<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">
|
||||
|
||||
<style is="custom-style">
|
||||
body {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
:root {
|
||||
--dark-primary-color: #0288D1;
|
||||
--default-primary-color: #03A9F4;
|
||||
|
||||
@ -4,17 +4,17 @@
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<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>
|
||||
<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'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<paper-button hidden$='[[inDialog]]'>[[stateObj.state]]</paper-button>
|
||||
|
||||
@ -3,19 +3,19 @@
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<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>
|
||||
<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'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<div class='state'>[[stateObj.stateDisplay]]</div>
|
||||
|
||||
@ -3,20 +3,20 @@
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<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>
|
||||
<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'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<div class='state'>[[stateObj.state]]</div>
|
||||
|
||||
@ -4,23 +4,23 @@
|
||||
<link rel="import" href="../components/entity/state-badge.html">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<paper-dropdown-menu
|
||||
on-tap='stopPropagation'
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<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>
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
paper-slider {
|
||||
margin-left: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='horizontal justified layout'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<paper-slider
|
||||
|
||||
@ -3,35 +3,36 @@
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<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>
|
||||
<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'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<div class='state'>
|
||||
|
||||
@ -4,20 +4,20 @@
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<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>
|
||||
<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'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<div class='state'>
|
||||
|
||||
@ -4,17 +4,17 @@
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<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>
|
||||
<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'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<paper-button on-tap='activateScene'>ACTIVATE</paper-button>
|
||||
|
||||
@ -5,17 +5,17 @@
|
||||
<link rel="import" href="../components/entity/ha-entity-toggle.html">
|
||||
|
||||
<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>
|
||||
<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'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<template is='dom-if' if='[[stateObj.attributes.can_cancel]]'>
|
||||
|
||||
@ -3,27 +3,28 @@
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<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>
|
||||
<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'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<div class='state'>
|
||||
|
||||
@ -4,13 +4,14 @@
|
||||
<link rel="import" href="../components/entity/ha-entity-toggle.html">
|
||||
|
||||
<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>
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
ha-entity-toggle {
|
||||
margin-left: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='horizontal justified layout'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<ha-entity-toggle state-obj="[[stateObj]]" hass='[[hass]]'></ha-entity-toggle>
|
||||
|
||||
@ -3,22 +3,22 @@
|
||||
<link rel="import" href="../components/entity/state-badge.html">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<a href$='[[stateObj.state]]' target='_blank' class='name' id='link'>[[stateObj.entityDisplay]]</a>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user