I have since redesigned the card to this
Script
alias: Pihole Timer Finish
sequence:
- service: timer.finish
metadata: {}
data: {}
target:
entity_id:
- timer.pht
- type: turn_on
device_id: main device here
entity_id: main device here
domain: switch
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.pht
data: {}
mode: single
icon: mdi:timer-off-outline
Automation
alias: Pihole Timer Finish
sequence:
- service: timer.finish
metadata: {}
data: {}
target:
entity_id:
- timer.pht
- type: turn_on
device_id: main device here
entity_id: main device here
domain: switch
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.pht
data: {}
mode: single
icon: mdi:timer-off-outline
Card Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: PiHole
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 15% 20% 65%
margin: '-10px 0px 0px 0px'
cards:
- type: custom:mushroom-template-card
entity: input_boolean.pht
icon: mdi:apple
tap_action:
action: toggle
confirmation:
text: Are you sure you want to start the timer?
hold_action:
action: call-service
confirmation:
text: Are you sure you want cancel the timer?
service: script.pihole_timer_finish
icon_color: transparent
card_mod:
style: |
{% if is_state('switch.pi_hole', 'off') %}
ha-state-icon {
animation: beat 1.3s ease-out infinite both;
}
@keyframes beat {
0% { transform: scale(.9); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.1); }
60% { transform: scale(1); }
}
{% endif %}
{% if is_state('switch.pi_hole', 'on') %} ha-state-icon:after {
content: ""; position: relative; background-image:
url("/local/pics/pi-on.png") ; background-repeat:no-repeat;
background-size: 100%; background-position: center; height: 50px;
width: 40px; top: -6px; left: 12px; border-radius: 50%;
}
{% else %} ha-state-icon:after { content: ""; position: relative;
background-image: url("/local/pics/pi.png");
background-repeat:no-repeat; background-size: 100%;
background-position: center; height: 50px; width: 40px; top: -6px;
left: 12px; border-radius: 50%; animation: sprinkle 4s ease-in-out
infinite;
}
{% endif %}
ha-card {
border: none !important;
background:none;
} ha-state-icon { color: transparent !important; border: none
!important;
--icon-symbol-size: 1px;
}
- type: custom:button-card
entity: timer.pht
name: Time Left
show_name: true
show_state: true
show_label: false
show_icon: false
tap_action:
action: none
custom_fields:
status:
card:
type: custom:button-card
entity: switch.pi_hole
tap_action: none
show_state: true
show_name: false
show_icon: false
styles:
card:
- color: |
[[[
if(states['input_boolean.pht'].state == 'off') return 'lime'
else return 'red';
]]]
- font-size: 14px
- background: transparent
- border: none
- text-transform: uppercase
styles:
name:
- position: absolute
- width: 60px
- top: 5%
- left: 10%
- z-index: 1
- font-size: 13px
- color: grey
card:
- height: 60px
- width: 70px
- top: 3px
- background: none
- border: none
- color: |
[[[
if(states['input_boolean.pht'].state == 'off') return 'lime'
else return 'red';
]]]
state:
- position: absolute
- left: 40%
- top: 35%
- z-index: 0
- font-size: 12px
custom_fields:
status:
- position: absolute
- left: 32%
- top: 70%
- z-index: 2
- width: 30px
card_mod:
style: |
ha-card {
border-radius: 8px !important;
}
- type: custom:mushroom-number-card
name: ''
entity: input_number.pht
tap_action:
action: toggle
layout: horizontal
display_mode: slider
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
--shape-color: none;
}
mushroom-number-value-control$:
mushroom-slider$: |
.slider {
position: absolute !important;
width: 90% !important;
left: 12px;
z-index: 0;
height: 44px !important;
flex-shrink: 1;
flex-grow: 1;
margin-top:2px;
--bg-color: rgba(169, 169, 169, 0.2);
--main-color: {{ 'rgba(0, 255, 0, .42)' if is_state('switch.pi_hole', 'on') else 'rgba(255, 0, 0, .2)' }} ;
}
.: |
ha-state-icon {
color:transparent;
--icon-symbol-size: 1px;
}
ha-card {
border: none !important;
background: none;
}
mushroom-state-info$: |
.container {
flex-direction: row !important;
position: absolute !important;
width: 79%;
top: 17px;
align-items: baseline;
}
.primary {
color: transparent !important;
position: relative;
flex-shrink: 0;
flex-grow: 1;
z-index: 1;
}
.primary:after {
content: "{{states('input_number.pht')| int(0)}} Min ";
position:absolute;
color: {{ 'lime' if is_state('switch.pi_hole', 'on') else 'red' }} ;
left: 1px;
font-weight: 400;
top: 3px;
width: 30px !important;
z-index: 1 ;
}
.secondary {
color: transparent !important;
position: relative ;
flex-shrink: 1;
flex-grow: 1;
}
card_mod:
style: |
ha-card {
background-image: url("/local/pics/wood.png");
border: none;
}
