97 lines
3.5 KiB
SCSS
97 lines
3.5 KiB
SCSS
ha-icon-button.button {
|
|
color: var(--secondary-color, white);
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
border-radius: 50%;
|
|
padding: 0px;
|
|
margin: 3px;
|
|
--ha-icon-display: block;
|
|
/* Buttons can always be clicked */
|
|
pointer-events: auto;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
// =====================================================================================
|
|
// From: https://github.com/home-assistant/frontend/blob/dev/src/common/style/icon_color_css.ts
|
|
// Modified version for ha-icon and ha-icon-button.
|
|
// =====================================================================================
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@mixin state-icon($element) {
|
|
#{$element}[data-domain="alert"][data-state="on"],
|
|
#{$element}[data-domain="automation"][data-state="on"],
|
|
#{$element}[data-domain="binary_sensor"][data-state="on"],
|
|
#{$element}[data-domain="calendar"][data-state="on"],
|
|
#{$element}[data-domain="camera"][data-state="streaming"],
|
|
#{$element}[data-domain="cover"][data-state="open"],
|
|
#{$element}[data-domain="fan"][data-state="on"],
|
|
#{$element}[data-domain="humidifier"][data-state="on"],
|
|
#{$element}[data-domain="light"][data-state="on"],
|
|
#{$element}[data-domain="input_boolean"][data-state="on"],
|
|
#{$element}[data-domain="lock"][data-state="unlocked"],
|
|
#{$element}[data-domain="media_player"][data-state="on"],
|
|
#{$element}[data-domain="media_player"][data-state="paused"],
|
|
#{$element}[data-domain="media_player"][data-state="playing"],
|
|
#{$element}[data-domain="script"][data-state="on"],
|
|
#{$element}[data-domain="sun"][data-state="above_horizon"],
|
|
#{$element}[data-domain="switch"][data-state="on"],
|
|
#{$element}[data-domain="timer"][data-state="active"],
|
|
#{$element}[data-domain="vacuum"][data-state="cleaning"],
|
|
#{$element}[data-domain="group"][data-state="on"],
|
|
#{$element}[data-domain="group"][data-state="home"],
|
|
#{$element}[data-domain="group"][data-state="open"],
|
|
#{$element}[data-domain="group"][data-state="locked"],
|
|
#{$element}[data-domain="group"][data-state="problem"] {
|
|
color: var(--paper-item-icon-active-color, #fdd835);
|
|
}
|
|
|
|
#{$element}[data-domain="climate"][data-state="cooling"] {
|
|
color: var(--cool-color, var(--state-climate-cool-color));
|
|
}
|
|
|
|
#{$element}[data-domain="climate"][data-state="heating"] {
|
|
color: var(--heat-color, var(--state-climate-heat-color));
|
|
}
|
|
|
|
#{$element}[data-domain="climate"][data-state="drying"] {
|
|
color: var(--dry-color, var(--state-climate-dry-color));
|
|
}
|
|
|
|
#{$element}[data-domain="alarm_control_panel"] {
|
|
color: var(--alarm-color-armed, var(--label-badge-red));
|
|
}
|
|
#{$element}[data-domain="alarm_control_panel"][data-state="disarmed"] {
|
|
color: var(--alarm-color-disarmed, var(--label-badge-green));
|
|
}
|
|
#{$element}[data-domain="alarm_control_panel"][data-state="pending"],
|
|
#{$element}[data-domain="alarm_control_panel"][data-state="arming"] {
|
|
color: var(--alarm-color-pending, var(--label-badge-yellow));
|
|
animation: pulse 1s infinite;
|
|
}
|
|
#{$element}[data-domain="alarm_control_panel"][data-state="triggered"] {
|
|
color: var(--alarm-color-triggered, var(--label-badge-red));
|
|
animation: pulse 1s infinite;
|
|
}
|
|
|
|
#{$element}[data-domain="plant"][data-state="problem"],
|
|
#{$element}[data-domain="zwave"][data-state="dead"] {
|
|
color: var(--state-icon-error-color);
|
|
}
|
|
|
|
/* Color the icon if unavailable */
|
|
#{$element}[data-state="unavailable"] {
|
|
color: var(--state-unavailable-color);
|
|
}
|
|
}
|
|
|
|
@include state-icon("ha-icon");
|
|
@include state-icon("ha-icon-button"); |