Hi,
Help… I kind of reached a dead end here, trying for hours to figure out how to remove the background from the bottom half of this multi-card configuration. I tried card-mod and many other solutions but I just can’t figure it out anymore.
Thanks.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:horizon-card
refresh_period: 60
fields:
sunrise: true
sunset: true
dawn: true
noon: true
dusk: true
azimuth: false
sun_azimuth: false
moon_azimuth: false
elevation: false
sun_elevation: false
moon_elevation: false
moonrise: true
moonset: true
moon_phase: true
latitude: 44.89751662557094
longitude: 26.080309152603153
elevation: 122
time_zone: Europe/Bucharest
card_mod:
style: |
.horizon-card-header {
margin-top: 0px !important;
}
.horizon-card-graph {
margin-top: 10px !important;
margin-bottom: -25px !important;
}
.horizon-card-footer {
margin-bottom: 15px !important;
}
.horizon-card-footer > * {
margin-top: 0px !important;
}
.horizon-card-field-name {
font-size: 10px !important;
font-weight: bold;
color: #FF9109 !important;
}
.horizon-card-field-value {
font-size: 13px !important;
color: #E0E0E0 !important;
}
.horizon-card-field-row {
margin-top: 25px !important;
}
.horizon-card-field-moon-phase {
margin-top: -7.5px !important;
}
- type: custom:stack-in-card
mode: vertical
card-mod:
styles: |
ha-card {
--ha-card-background: none;
}
cards:
- type: custom:compass-card
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
compass:
north:
show: true
color: '#FF9109'
east:
show: false
color: '#E0E0E0'
west:
show: false
color: '#E0E0E0'
south:
show: false
color: '#E0E0E0'
circle:
background_image: /local/compass_card_bgi_sat.png
background_opacity: 0.5
color: '#FF9109'
value_sensors:
- sensor: ''
- type: custom:button-card
color_type: label-card
styles:
card:
- padding: 15px
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- entity: sensor.sun_solar_azimuth
name: Azimuth
show_state: true
icon: none
styles:
card:
- padding: 0
- height: 42px
- border-radius: 5px
- box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.5)
name:
- transform: translateY(-5px)
- font-size: 13px
- font-weight: bold
- color: '#FF9109'
state:
- margin-bottom: 3px
- font-size: 10px
- color: '#E0E0E0'
type: custom:button-card
- entity: sensor.sun_solar_elevation
name: Elevation
show_state: true
icon: none
styles:
card:
- padding: 0
- height: 42px
- border-radius: 5px
- box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.5)
name:
- transform: translateY(-5px)
- font-size: 13px
- font-weight: bold
- color: '#FF9109'
state:
- margin-bottom: 3px
- font-size: 10px
- color: '#E0E0E0'
type: custom:button-card