303 lines
6.1 KiB
JavaScript
303 lines
6.1 KiB
JavaScript
export function cssData(user) {
|
|
var css =`
|
|
|
|
ha-card {
|
|
overflow: hidden;
|
|
--rail_border_color: transparent;
|
|
--auto_color: rgb(227, 99, 4, 1);
|
|
--cool_color: rgba(0, 122, 241, 0.6);
|
|
--cool_colorc: rgba(0, 122, 241, 1);
|
|
--heat_color: #ff8100;
|
|
--heat_colorc: rgb(227, 99, 4, 1);
|
|
--manual_color: #44739e;
|
|
--off_color: #8a8a8a;
|
|
--fan_only_color: #D7DBDD;
|
|
--dry_color: #efbd07;
|
|
--idle_color: #808080;
|
|
--unknown_color: #bac;
|
|
--text-color: white;
|
|
}
|
|
ha-card.no_card{
|
|
background-color: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
ha-card.no_card .prop{
|
|
display: none;
|
|
}
|
|
.auto, .heat_cool {
|
|
--mode_color: var(--auto_color);
|
|
}
|
|
|
|
.cool {
|
|
--mode_color: var(--cool_color);
|
|
}
|
|
|
|
.heat {
|
|
--mode_color: var(--heat_color);
|
|
}
|
|
|
|
.manual {
|
|
--mode_color: var(--manual_color);
|
|
}
|
|
|
|
.off {
|
|
--mode_color: var(--off_color);
|
|
}
|
|
.more {
|
|
--mode_color: var(--off_color);
|
|
}
|
|
.fan_only {
|
|
--mode_color: var(--fan_only_color);
|
|
}
|
|
|
|
.eco {
|
|
--mode_color: var(--auto_color);
|
|
}
|
|
|
|
.dry {
|
|
--mode_color: var(--dry_color);
|
|
}
|
|
|
|
.idle {
|
|
--mode_color: var(--idle_color);
|
|
}
|
|
|
|
.unknown-mode {
|
|
--mode_color: var(--unknown_color);
|
|
}
|
|
.c_body {
|
|
padding: 5% 5% 5% 5%;
|
|
}
|
|
.c_icon{
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 25;
|
|
}
|
|
.climate_info {
|
|
position: absolute;
|
|
top: 82%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 14%;
|
|
height: 14%;
|
|
--background-color: white;
|
|
}
|
|
.modes, .mode_color{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.modes ha-icon {
|
|
color: var(--mode_color);
|
|
--mdc-icon-size: 100%;
|
|
}
|
|
.dialog{
|
|
background-color:#0000008c;
|
|
width: 90%;
|
|
height: 90%;
|
|
margin: 5%;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
top: 45%;
|
|
left: 45%;
|
|
backdrop-filter: blur(6px) grayscale(50%);
|
|
box-shadow: 0px 0px 10px 0px #696969;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
.dialog span {
|
|
width:33%;
|
|
margin: 3% 0;
|
|
}
|
|
.dialog ha-icon {
|
|
color: var(--mode_color);
|
|
--mdc-icon-size: 70%;
|
|
margin: 15%;
|
|
}
|
|
.dialog.hide{
|
|
display: none;
|
|
}
|
|
.dialog.pending{
|
|
border: 1px solid var(--mode_color);
|
|
box-shadow: 0px 0px 10px 0px var(--mode_color);
|
|
animation: dialog-pending .8s infinite alternate;
|
|
}
|
|
|
|
@keyframes dialog-pending
|
|
{
|
|
from {box-shadow: 0px 0px 10px 0px var(--mode_color);}
|
|
to {box-shadow: 0px 0px 0px 0px var(--mode_color);}
|
|
}
|
|
|
|
.dot_r{
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
opacity: 0.1;
|
|
}
|
|
.dot_h{
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
|
|
.dial {
|
|
user-select: none;
|
|
|
|
--thermostat-off-fill: #000000c2;
|
|
--thermostat-path-color: rgba(255, 255, 255, 0.3);
|
|
--thermostat-path-active-color: rgba(255, 255, 255, 0.8);
|
|
--thermostat-path-active-color-large: rgba(255, 255, 255, 1);
|
|
--thermostat-text-color: white;
|
|
}
|
|
|
|
.dial.has-thermo .dial__ico__leaf {
|
|
visibility: hidden;
|
|
}
|
|
.dial .dial__shape {
|
|
transition: fill 0.5s;
|
|
fill: var(--thermostat-off-fill);
|
|
}
|
|
|
|
.dial__ico__thermo {
|
|
fill: var(--thermostat-path-active-color);
|
|
opacity: 0;
|
|
transition: opacity 0.5s;
|
|
pointer-events: none;
|
|
}
|
|
.dial.has-thermo .dial__ico__thermo {
|
|
display: block;
|
|
opacity: 1;
|
|
pointer-events: initial;
|
|
}
|
|
.dial__editableIndicator {
|
|
fill: white;
|
|
fill-rule: evenodd;
|
|
opacity: 0;
|
|
transition: opacity 0.5s;
|
|
}
|
|
.dial__temperatureControl {
|
|
fill: white;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.dial__temperatureControl.control-visible {
|
|
opacity: 0.2;
|
|
}
|
|
.dial--edit .dial__editableIndicator {
|
|
opacity: 1;
|
|
}
|
|
.dial--state--off .dial__shape {
|
|
fill: var(--thermostat-off-fill);
|
|
}
|
|
.dial--state--heat .dial__shape {
|
|
fill: var(--heat_colorc);
|
|
}
|
|
.dial--state--cool .dial__shape {
|
|
fill: var(--cool_colorc);
|
|
}
|
|
.dial--state--auto .dial__shape {
|
|
fill: var(--auto_color);
|
|
}
|
|
.dial--state--fan_only .dial__shape {
|
|
fill: var(--fan_only_color);
|
|
}
|
|
.dial--state--dry .dial__shape {
|
|
fill: var(--dry_color);
|
|
}
|
|
.dial--state--idle .dial__shape {
|
|
fill: var(--idle_color);
|
|
}
|
|
.dial__ticks path {
|
|
fill: var(--thermostat-path-color);
|
|
}
|
|
.dial__ticks path.active {
|
|
fill: var(--mode_color);
|
|
}
|
|
.dial__ticks path.active.large {
|
|
fill: var(--mode_color);
|
|
}
|
|
.dial text, .dial text tspan {
|
|
fill: var(--thermostat-text-color);
|
|
text-anchor: middle;
|
|
font-family: Helvetica, sans-serif;
|
|
alignment-baseline: central;
|
|
dominant-baseline: central;
|
|
}
|
|
.dial__lbl--target {
|
|
font-size: 120px;
|
|
font-weight: bold;
|
|
visibility: hidden;
|
|
}
|
|
.dial__lbl--low, .dial__lbl--high {
|
|
font-size: 90px;
|
|
font-weight: bold;
|
|
visibility: hidden;
|
|
}
|
|
.dial.in_control .dial__lbl--target {
|
|
visibility: visible;
|
|
}
|
|
.dial.in_control .dial__lbl--low {
|
|
visibility: visible;
|
|
}
|
|
.dial.in_control .dial__lbl--high {
|
|
visibility: visible;
|
|
}
|
|
.dial__lbl--ambient {
|
|
font-size: 120px;
|
|
font-weight: bold;
|
|
visibility: visible;
|
|
}
|
|
.dial.in_control.has_dual .dial__chevron--low,
|
|
.dial.in_control.has_dual .dial__chevron--high {
|
|
visibility: visible;
|
|
}
|
|
.dial.in_control .dial__chevron--target {
|
|
visibility: visible;
|
|
}
|
|
.dial.in_control.has_dual .dial__chevron--target {
|
|
visibility: hidden;
|
|
}
|
|
.dial .dial__chevron {
|
|
visibility: hidden;
|
|
fill: none;
|
|
stroke: var(--thermostat-text-color);
|
|
stroke-width: 4px;
|
|
opacity: 0.3;
|
|
}
|
|
.dial .dial__chevron.pressed {
|
|
opacity: 1;
|
|
}
|
|
.dial.in_control .dial__lbl--ambient {
|
|
visibility: hidden;
|
|
}
|
|
.dial__lbl--super--ambient, .dial__lbl--super--target {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
}
|
|
.dial__lbl--super--high, .dial__lbl--super--low {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
}
|
|
.dial__lbl--ring {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
.dial__lbl--title {
|
|
font-size: 24px;
|
|
}
|
|
`
|
|
return css;
|
|
}
|
|
|