Moin,
ich habe die Bubble-Card zur Darstellung von DWD-Wetterwarnungen angepasst. Für Interessierte - Code nachfolgend: (UPDATE: Code angepasst)
type: custom:bubble-card
card_type: button
button_type: name
entity: sensor.stadt_neubukow_aktuelle_warnstufe
styles: |-
.bubble-container {
--bubble-border-radius: 0px !important;
--bubble-backdrop-filter: blur(5.1px);
-webkit-backdrop-filter: blur(5.1px);
backdrop-filter: blur(5px);
overlay-backdrop-opacity: 1;
overlay-backdrop-background-color: rgba(0, 0, 0, 0.32);
transition: all 150ms ease-in-out;
box-shadow: rgba(255, 255, 255, 0.05) 0 0 1px 1px inset;
background: rgba(7, 189, 223, 0.15);
background-image: linear-gradient(180deg, rgba(206, 211, 234, 0.07) 0%, transparent 100%);
}
.bubble-button-card {
display: grid;
grid-template-areas:
'i1 i i2'
'n1 n n2'
's1 s s2';
grid-template-columns: auto 90% auto;
grid-template-rows: 1fr 90% 1fr;
justify-items: center;
}
.bubble-icon-container {
grid-area: i;
justify-self: center;
background: transparent;
icon-color: white;
margin-top: -60px;
}
.bubble-name-container {
grid-area: i;
justify-self: center;
align-self: start;
justify-content: center;
align-content: center;
justify-items: center;
width: 90%;
}
.large .bubble-sub-button-container {
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
grid-area: n;
justify-self: center;
align-self: center;
justify-content: center;
align-content: start;
justify-items: center;
}
.bubble-name {
font-family: roboto;
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
justify-content: center !important;
text-align: center;
margin-top: 10px;
}
.bubble-state {
font-family: roboto;
font-size: calc(1rem + (11 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 300;
line-height: 1;
justify-content: center !important;
text-align: center;
align-self: center;
margin-top: 40px;
color: white;
width: 100% !important;
display: inline-block !important;
position: relative !important;
white-space: nowrap !important;
animation: scroll 30s linear infinite ;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-500%); }
}
.bubble-sub-button-1 {
font-size: calc(1rem + (12 - 10) * ((100vw - 320px) / (1600 - 320)));
font-weight: 600;
margin-top: 15px;
color: ${
hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '0' ? 'white'
: hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '1' ? 'gold'
: hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '2' ? 'orange'
: hass.states['sensor.stadt_neubukow_aktuelle_warnstufe'].state === '3' ? 'orangered' : 'mediumpurple'
} !important;
}
.bubble-sub-button-2 {
position: absolute;
text-align: center;
align-self: end;
left: -10%;
top: 80%;
}
.bubble-sub-button-3 {
position: absolute;
text-align: center;
align-self: end;
right: -10%;
top: 80%;
}
rows: "2"
card_layout: large-sub-buttons-grid
show_icon: false
scrolling_effect: false
show_state: false
show_name: true
show_attribute: true
attribute: warning_1_description
sub_button:
- entity: sensor.stadt_neubukow_aktuelle_warnstufe
show_attribute: true
attribute: warning_1_headline
show_icon: false
state_background: false
show_background: false
tap_action:
action: none
- entity: sensor.stadt_neubukow_aktuelle_warnstufe
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: warning_1_start
- entity: sensor.stadt_neubukow_aktuelle_warnstufe
show_icon: false
state_background: false
show_background: false
show_attribute: true
attribute: warning_1_end
force_icon: false
name: Wetterwarnungen
tap_action:
action: none
button_action:
tap_action:
action: none
