@-webkit-keyframes ha-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes ha-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .ha-spin { -webkit-animation: ha-spin 2s infinite linear; animation: ha-spin 2s infinite linear; } core-scroll-header-panel, core-header-panel { background-color: #E5E5E5; } core-toolbar { background: #03a9f4; color: white; font-weight: normal; } :host { font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; min-width: 350px; max-width: 700px; /* First two are from core-transition-bottom */ transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, top .3s, left .3s !important; } :host .sidebar { margin-left: 30px; } @media all and (max-width: 620px) { :host.two-column { margin: 0; width: 100%; max-height: calc(100% - 64px); bottom: 0px; left: 0px; right: 0px; } :host .sidebar { display: none; } } @media all and (max-width: 464px) { :host { margin: 0; width: 100%; max-height: calc(100% - 64px); bottom: 0px; left: 0px; right: 0px; } } html /deep/ .ha-form paper-input { display: block; } html /deep/ .ha-form paper-input:first-child { padding-top: 0; } .data-entry { margin-bottom: 8px; } .data-entry:last-child { margin-bottom: 0; } .data-entry .key { margin-right: 8px; } .data-entry .value { text-align: right; word-break: break-all; } paper-toggle-button::shadow .toggle-ink { color: #039be5; } paper-toggle-button::shadow [checked] .toggle-bar { background-color: #039be5; } paper-toggle-button::shadow [checked] .toggle-button { background-color: #039be5; }
.label-text, .error { color: {{g.paperInput.labelColor}}; } ::-webkit-input-placeholder { color: {{g.paperInput.labelColor}}; } ::-moz-placeholder { color: {{g.paperInput.labelColor}}; } :-ms-input-placeholder { color: {{g.paperInput.labelColor}}; } .unfocused-underline { background-color: {{g.paperInput.labelColor}}; } :host([focused]) .floated-label .label-text { color: {{g.paperInput.focusedColor}}; } .focused-underline { background-color: {{g.paperInput.focusedColor}}; } :host(.invalid) .floated-label .label-text, .error { color: {{g.paperInput.invalidColor}}; } :host(.invalid) .unfocused-underline, :host(.invalid) .focused-underline { background-color: {{g.paperInput.invalidColor}}; }