Bonjour,
J’ai un souci sur la creation de boutons qui ne sont pas rond…
Il sonts plus ovale que rond, comment les rendre parfaitement circulaire ?
Si vous avez une idee, je vous laisse une photo et mon code yaml.
Merci pour votre aide.
type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Mute
icon: mdi:volume-off
tap_action:
action: perform-action
perform_action: media_player.media_pause
target:
device_id:
- f43642d54c2ea3812202eab92eadc355
entity: input_boolean.silent_mode
show_background: true
- name: Volets
entity: cover.all_group
show_background: true
tap_action:
action: perform-action
perform_action: cover.close_cover
icon: mdi:window-shutter
- name: Lampes
icon: mdi:lightbulb-off
show_background: true
tap_action:
action: perform-action
perform_action: light.turn_off
- name: Security
icon: mdi:video-outline
show_background: true
tap_action:
action: navigate
navigation_path: "#camera"
- name: Mode
icon: mdi:theme-light-dark
show_background: true
tap_action:
action: perform-action
perform_action: ""
modules:
- subbutton_colors
subbutton_colors:
subbutton1:
color: "#9F7E69"
subbutton2:
color: "#9F7E69"
subbutton3:
color: "#9F7E69"
subbutton4:
color: "#9F7E69"
subbutton5:
color: "#9F7E69"
styles: >
/* Assure que le contenu de la carte n'est pas coupé par les boutons fixés en
bas */
.card-content {
width: 100%;
margin: 0 !important;
padding-bottom: 70px;
}
/* Force le border-radius sur le composant bouton MDC interne (dernier essai
ciblé) */ mwc-button.bubble-sub-button {
border-radius: 50% !important;
}
/* Conteneur principal des sous-boutons : fixé en bas et pleine largeur (100%
de la fenêtre) */
.bubble-button-card-container {
background: none;
border: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
}
/* Conteneur des sous-boutons : centré avec positionnement absolu et
translation */
.bubble-sub-button-container {
display: flex !important;
gap: 16px !important;
justify-content: center !important;
/* Centrage absolu forcé */
position: absolute !important;
left: 50% !important;
transform: translateX(-50%);
margin: 0 !important;
}
/* Styles pour les boutons eux-mêmes */
.bubble-sub-button {
height: 46px !important;
width: 46px !important;
background-color: #9F7E69 !important;
transition: background-color 0.1s ease;
/* V1/V2/V3 : Maintenues */
border-radius: 50% !important;
overflow: hidden !important;
transform: translateZ(0);
/* CONTOURMENT ULTIME : Force la délimitation sur Webkit/Safari */
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.bubble-sub-button:active {
background-color: #8c6d5b !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}