Witam, zrobiłem sobie timer pod switch kuchenki gdzie po ustawieniu czasu pokazuje się odliczanie i pasek postępu.
Chciałbym dopasować wizualnie ten element do pozostałych przycisków w dashbordzie.
Próbowałem dodać używając card-mod ale niestety bez pododzenia, obojętnie jakiej składni bym nie użył nic nie skutkowało.
Ogólnie chciałbym dodać do dolnego przycisku, tą samą ramkę z jasnym cieniem, jaki jest w górnym przycisku:
Poniżej obecny kod karty:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: button
entity: switch.zgniazdko05
name: zG05 (Kuchenka)
icon: mdi:stove
show_state: true
button_action:
double_tap_action: {}
tap_action:
action: none
sub_button:
- entity: sensor.zgniazdko05_power
show_state: true
show_background: true
tap_action:
action: none
styles: |-
.bubble-button-background {
border-radius: 1px; !important;
}
.bubble-sub-button-1 {
border-radius: 8px; !important;
}
.icon-container {
border-radius: 8px; !important;
}
.bubble-sub-button-1 {
background-color: rgba(0, 0, 0, 0.7) !important;
}
.bubble-button-card-container {
border-radius: 12px; !important;
border-style: solid; !important;
border-width: 1px;
border-color: rgba(168, 156, 132, 1) !important;
box-shadow: 0px 0px 3px 2px rgba(168, 156, 132, 1) !important;
}
- type: custom:bubble-card
card_type: empty-column
- type: entities
entities:
- type: custom:numberbox-card
entity: timer.timerkuchenka
service: timer.start
param: duration
state: duration
min: 0
max: 99999
unit: time
step: 60
name: Kuchenka (Timer)
border: false
speed: 350
card_mod:
style: |
ha-card {
bottom: 11px;
left: 10px;
padding: 10px;
border-radius: 200px; !important;
border-width: 2px; !important;
height: 22px;
}
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: conditional
conditions:
- entity: timer.timerkuchenka
state: active
card:
type: custom:timer-bar-card
entity: timer.timerkuchenka
layout: full_row
bar_direction: rtl
bar_radius: 5px
invert: true
compressed: true
filter: true
bar_height: 3px
layout:
margin: "-7px 1px -7px 1px"
theme: MOJE2
Będę bardzo wdzięczny za jakiekolwiek wskazówki odnośnie kodu tego stylu.
