Code de la carte
style: >
@keyframes blink {
50% {
color: #FDD835;
}
100% {
color: var(--primary-color);
}
}
#root > hui-state-label-element:nth-child(2),#root >
hui-state-label-element:nth-child(3) {
animation: {% if is_state('switch.bf255b0ef13d6cfdbarvv9', 'on') %} blink 1.5s ease-in-out infinite{% endif %};
}
elements:
- entity: sensor.vide
prefix: Bureau
style:
color: var(--primary-color)
font-size: 20px
font-variant: small-caps
left: 15%
pointer-events: none
top: 23%
tap_action:
action: none
type: state-label
- entity: sensor.vide
prefix: Alexia
style:
color: var(--primary-color)
font-size: 20px
font-variant: small-caps
left: 15%
pointer-events: none
top: 34%
tap_action:
action: none
type: state-label
- entity: input_boolean.wakestatus_1
show_icon: false
show_state: false
styles:
toogle:
- transform: translateX(26px)
card:
- width: 60px
- height: 40px
- background: transparent
- box-shadow: none
custom_fields:
toogle: |
[[[
return `
<div class="switch">
<span class="toggle-thumb">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#4ADE80;transform:;-ms-filter:"><path d="M10 15.586L6.707 12.293 5.293 13.707 10 18.414 19.707 8.707 18.293 7.293z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" style="fill:#F87171;transform:;-ms-filter:"><path d="M16.192 6.344L11.949 10.586 7.707 6.344 6.293 7.758 10.535 12 6.293 16.242 7.707 17.656 11.949 13.414 16.192 17.656 17.606 16.242 13.364 12 17.606 7.758z"></path></svg>
</span>
</div>`
]]]
type: 'custom:button-card'
style: |
ha-card {
margin: 0 0 130px 110px;
}
#toogle .switch {
display: inline-block;
width: 60px;
height: 34px;
position: relative;
}
.toggle-thumb {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #3f3F3f;
border-radius: 40px;
cursor: pointer;
}
.toggle-thumb:before {
content: "";
height: 26px;
width: 26px;
position: absolute;
left: 4px;
bottom: 4px;
border-radius: 50%;
background-color: #EFEFEF;
transition: .4s all ease;
}
.checkbox {
opacity: 0;
width: 0;
height: 0;
z-index: 100;
}
.toggle-thumb:before {
{% if is_state('input_boolean.wakestatus_1', 'on') %}
transform: translateX(26px);
{% endif %}
}
- type: 'custom:state-switch'
style:
left: 47%
top: 36%
entity: input_boolean.wakesettime_1
default: 'on'
transition: flip
transition_time: 300
states:
'on':
entity: input_datetime.wake_time_1_on
hide:
name: true
hour_step: 1
layout:
embedded: false
name: inside
align_controls: center
link_values: true
minute_step: 1
name: ''
style:
.: |
ha-card {
box-shadow: none;
background-color: rgba(0,0,0,0);
opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
}
.time-picker-row{
margin-left: 5px !important;
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
display: none;
}
time-unit:
$: |
.time-unit {
padding: 2px !important;
}
.time-input {
border: 2px solid var(--primary-color) !important;
background-color: rgba(0,0,0,0) !important;
color: black !important;
border-radius: 5px;
}
.time-picker-icon {
color: var(--primary-color) !important;
z-index: 100;
}
type: 'custom:time-picker-card'
'off':
entity: input_datetime.wake_time_1_off
hide:
name: true
hour_step: 1
layout:
embedded: false
name: inside
align_controls: center
link_values: true
minute_step: 1
name: ''
style:
.: |
ha-card {
box-shadow: none;
background-color: rgba(0,0,0,0);
opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
}
.time-picker-row{
margin-left: 5px !important;
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
display: none;
}
time-unit:
$: |
.time-unit {
padding: 2px !important;
}
.time-input {
border: 2px solid var(--primary-color) !important;
background-color: rgba(0,0,0,0) !important;
color: black !important;
border-radius: 5px;
}
.time-picker-icon {
color: var(--primary-color) !important;
z-index: 100;
}
type: 'custom:time-picker-card'
- entity: input_boolean.wakeweekday_mon_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Lu
style:
'--paper-item-icon-color': var(--primary-color)
right: 15%
top: 20%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_mon_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_tue_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Ma
style:
'--paper-item-icon-color': var(--primary-color)
right: 5%
top: 20%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_tue_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_wed_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Me
style:
'--paper-item-icon-color': var(--primary-color)
right: 20%
top: 50%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_wed_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_thu_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Je
style:
'--paper-item-icon-color': var(--primary-color)
right: 10%
top: 50%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_thu_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_fri_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Ve
style:
'--paper-item-icon-color': var(--primary-color)
right: 0%
top: 50%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_fri_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sat_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Sa
style:
'--paper-item-icon-color': var(--primary-color)
right: 15%
top: 80%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_sat_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sun_1
show_label: false
show_icon: false
show_name: true
show_state: false
name: Di
style:
'--paper-item-icon-color': var(--primary-color)
right: 5%
top: 80%
styles:
card:
- width: 30px
- height: 30px
- border-radius: 999px
- background-color: |
[[[
if ( (states['input_boolean.wakeweekday_sun_1'].state == 'off') ) return 'var(--primary-color)';
else return 'var(--paper-item-icon-active-color)';
]]]
- box-shadow: none
- border-radius: 999px
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
name:
- color: white
type: 'custom:button-card'
- type: 'custom:stack-in-card'
style:
top: 80%
left: 47.5%
mode: horizontal
keep:
background: true
cards:
- type: 'custom:button-card'
entity: input_boolean.wakesettime_1
icon: 'mdi:power-plug'
show_label: false
show_name: false
show_state: false
styles:
card:
- line-height: 0
- width: 50px
- height: 24px
- border: 2px solid var(--primary-color)
- background: |
[[[
if (entity.state == 'on')
return 'var(--primary-color)';
else
return 'white';
]]]
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(1.2)
- color: |
[[[
if (entity.state == 'on')
return 'white';
else
return 'var(--primary-color)';
]]]
- type: 'custom:button-card'
entity: input_boolean.wakesettime_1
icon: 'mdi:power-plug-off'
show_label: false
show_name: false
show_state: false
styles:
card:
- line-height: 0
- width: 50px
- height: 24px
- border: 2px solid var(--primary-color)
- background: |
[[[
if (entity.state == 'off')
return 'var(--primary-color)';
else
return 'white';
]]]
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(1.2)
- color: |
[[[
if (entity.state == 'off')
return 'white';
else
return 'var(--primary-color)';
]]]
image: /local/images/transparent/transparent_clock.png
type: picture-elements
source du bouton