Bonjour,
Je n’arrive pas à supprimer le border et background de la bottomcard.
Code
bottomCard:
type: custom:stack-in-card
cardOptions:
mode: vertical
keep:
box_shadow: false
margin: false
border_radius: false
background: false
outer_padding: true
cards:
- type: custom:simple-weather-card
entity: weather.savigny_sur_orge
name: ' '
primary_info:
- wind_speed
secondary_info:
- humidity
tap_action:
action: navigate
navigation_path: /oc-v5/meteo
card_mod:
style: |
ha-card {
background: none;
margin: 0px -10px -30px;
font-size: 14px;
border: none;
}
- type: entities
entities:
- type: divider
card_mod:
style: |
ha-card {
background-color: transparent;
background: transparent;
border: transparent;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.rte_tempo_today
tap_action:
action: more-info
primary: ''
secondary: ''
icon: |-
{% if is_state(entity, 'BLUE') %}
mdi:leaf
{% endif %}
{% if is_state(entity, 'WHITE') %}
mdi:lightning-bolt
{% endif %}
{% if is_state(entity, 'RED') %}
mdi:alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'BLUE') %}
blue
{% endif %}
{% if is_state(entity, 'WHITE') %}
grey
{% endif %}
{% if is_state(entity, 'RED') %}
red
{% endif %}
badge_color: |-
{% if is_state('sensor.rte_tempo_tomorrow', 'BLUE') %}
blue
{% endif %}
{% if is_state('sensor.rte_tempo_tomorrow', 'WHITE') %}
grey
{% endif %}
{% if is_state('sensor.rte_tempo_tomorrow', 'RED') %}
red
{% endif %}
badge_icon: mdi:lightning-bolt
multiline_secondary: true
layout: vertical
card_mod:
style: |
ha-card {
background-color: none;
background: transparent;
border: transparent;
margin-top: -15px !important;
margin-bottom: -20px !important;
--primary-text-color: rgb(var(--my-grey));
}
- type: entities
entities:
- type: divider
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
}
- type: custom:button-card
template: frame
padding-bottom: 1px
custom_fields:
buttons:
card:
type: grid
columns: 2
square: false
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.xxxx_quantite_de_carburant
decimals: 0
name: Autonomie
unit: L
tap_action:
action: none
navigation_path: /oc-v5/
- entity: sensor.xxxx_autonomie_en_carburant
decimals: 0
unit: KMS
name: reste
icon: mdi:gauge
tap_action:
action: none
navigation_path: /oc-v5/consos
- entity: input_number.austral_capacite_carburant_total
decimals: 0
unit: L
name: total
icon: mdi:fuel
tap_action:
action: none
navigation_path: /oc-v5/consos
show:
horseshoe_style: lineargradient
layout:
hlines:
- id: 1
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
vlines:
- id: 1
xpos: 51
ypos: 62
length: 20
styles:
- stroke: grey;
- opacity: 0.5;
- stroke-width: 2;
- stroke-linecap: round;
states:
- id: 0
entity_index: 0
xpos: 33
ypos: 70
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 1
entity_index: 1
xpos: 50
ypos: 34
styles:
- text-anchor: left;
- font-size: 3em;
- id: 2
entity_index: 2
xpos: 66
ypos: 70
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 30
ypos: 70
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 65
ypos: 70
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 90
styles:
- font-size: 1.2em;
- opacity: 0.7;
- letter-spacing: 0.4em;
- text-transform: lowercase
- id: 1
entity_index: 1
xpos: 36
ypos: 57
styles:
- font-size: 1.2em;
- opacity: 0.7;
- letter-spacing: 0.4em;
- text-transform: lowercase
- id: 1
entity_index: 2
xpos: 69
ypos: 57
styles:
- font-size: 1.2em;
- opacity: 0.7;
- letter-spacing: 0.4em;
- text-transform: lowercase
horseshoe_scale:
min: 0
max: 55
color: rgba(var(--my-grey2),0.8)
color_stops:
'0': rgba(255,191,0,0.7)
'20': rgba(176,191,26,0.7)
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
--primary-text-color: rgb(var(--my-white)
}
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.xxxx_kilometrage
attribute: temperature
decimals: 0
unit: ' KMS'
area: Odometre
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3em;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.5em;
- opacity: 0.8;
horseshoe_scale:
min: 0
max: 80000
color: rgba(var(--my-grey2),0.8)
color_stops:
'0': lightgreen
'60000': lightblue
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
--primary-text-color: rgb(var(--my-white)
}
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
margin-top: -15px !important;
margin-bottom: -20px !important;
}
- type: entities
entities:
- type: divider
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
}
- type: grid
columns: 3
square: false
cards:
- type: custom:mushroom-template-card
entity: cover.garage
primary_info: none
secondary_info: none
tap_action:
action: more-info
icon: |-
{% if is_state(entity, 'open') %}
mdi:garage-open-variant
{% else %}
mdi:garage-variant-lock
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
red
{% else %}
green
{% endif %}
badge_icon: |-
{% if is_state(entity, 'open') %}
mdi:lock-alert
{% else %}
mdi:lock
{% endif %}
badge_color: |-
{% if is_state(entity, 'open') %}
red
{% else %}
green
{% endif %}
card_mod:
style: |
ha-card {
background-color: transparent !important;
background: transparent !important;
border: none !important;
height:50px !important;
}
- type: custom:mushroom-template-card
tap_action:
action: more-info
entity: binary_sensor.porte_sous_sol_cave_a_vin_contact
primary: ''
secondary: ''
icon: |
{% if is_state(entity, 'off') %}
mdi:door
{% endif %}
{% if is_state(entity, 'on') %}
mdi:door-open
{% endif %}
icon_color: |-
{% if is_state(entity, 'off') %}
green
{% endif %}
{% if is_state(entity, 'on') %}
red
{% endif %}
card_mod:
style: |
ha-card {
background-color: transparent !important;
background: transparent !important;
border: none !important;
height:50px !important;
}
- type: custom:mushroom-template-card
tap_action:
action: more-info
entity: binary_sensor.porte_sous_sol_escalier_contact
primary: ''
secondary: ''
icon: |
{% if is_state(entity, 'off') %}
mdi:door
{% endif %}
{% if is_state(entity, 'on') %}
mdi:door-open
{% endif %}
icon_color: |-
{% if is_state(entity, 'off') %}
green
{% endif %}
{% if is_state(entity, 'on') %}
red
{% endif %}
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
height:50px !important;
}
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
margin-top: -15px !important;
margin-bottom: -20px !important;
--primary-text-color: rgb(var(--my-grey));
}
theme: Soft UI
style: |
:host {
--sidebar-background: var(--primary-background-color);
--sidebar-text-color: grey;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #333;
--clock-middle-border: #000;
box-shadow: var(--sidebar-shadow);
}
ha-card-border-width: 0
.sidebarMenu li {
position: relative;
padding: 10px 20px;
border-radius: 12px;
font-size: 20px !important;
text-transform: lowercase !important;
letter-spacing: 0.2em !important;
line-height: 32px !important;
font-weight: 500;
white-space: normal;
display: block;
cursor: pointer;
}
.digitalClock {
color: rgb(var(grey),1);
text-align: center;
padding-bottom: 1px;
padding-top: 20px;
font-size: 220px;
line-height: 30px!important;
font-weight: 700;
letter-spacing: 5px;
}
.date {
color: rgb(var(grey),1);
text-align: center;
font-size: 17px;
}
.bottom {
display: grid!important;
}
Et le résultat:
Si je change la couleur au niveau sidebar-background, tout passe bien ds cette nouvelle couleur sauf la partie bottomcard… En revanche si je force la couleur sur une carte cela fonctionne.
theme: Soft UI
style: |
:host {
--sidebar-background: var(--primary-background-color);
--sidebar-text-color: grey;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #333;
--clock-middle-border: #000;
box-shadow: var(--sidebar-shadow);
}
C’est grave docteur ? 
Merci par avance!
