/* Palette generated by Material Palette - materialpalette.com/light-blue/orange */ .dark-primary-color { background: #0288D1; } .default-primary-color { background: #03A9F4; } .light-primary-color { background: #B3E5FC; } .text-primary-color { color: #FFFFFF; } .accent-color { background: #FF9800; } .primary-text-color { color: #212121; } .secondary-text-color { color: #727272; } .divider-color { border-color: #B6B6B6; } /* extra */ .accent-text-color { color: #FF9800; } body { color: #212121; } a { color: #FF9800; text-decoration: none; } @-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}}; }