Pour la météo, j’avais suivi le sujet dédié de @Pulpy-Luke, ça fonctionne très bien. Par contre les z:index, je découvre.
1 « J'aime »
re,
le z-index, force l’élément sur une couche du mille feuille, la première image (en dessous de tout) est sur le z:index 0 pour faire simple.
rien de sorcier, mais comme je l’ai montré plus haut ça peut amener des désagréments esthétiques en édition surtout
c’est pas sorcier, suffit de pas mettre plus bas que ce que j’ai mis, ça fonctionne pas ( j’ai testé )
cdt
1 « J'aime »
Re,
J’ajoute le code de ma première version du menu si ça intéresse du monde, parce que même si je garde tout je ne suis pas à l’abri d’une mauvaise manip et de perdre un truc
- type: custom:mod-card
style:
left: 10%
top: 28.5%
height: 65%
z-index: 14
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#update1"
card_layout: normal
width_desktop: 400px
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
icon: mdi:update
auto_close: "5000"
name: Mises à jour partie1
- type: custom:bubble-card
style:
left: 80%
top: 10%
width: 20%
height: 5%
z-index: 13
card_type: button
button_type: name
icon: mdi:arrow-right-bold
name: Mises à jour partie2
button_action:
tap_action:
action: navigate
navigation_path: "#update2"
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
- type: custom:auto-entities
card:
type: entities
show_header_toggle: false
filter:
include:
- domain: update
template: >
{% set installed = state_attr(entity.entity_id,
'installed_version') %} {% set latest =
state_attr(entity.entity_id, 'latest_version') %} {{ installed
!= latest }}
show_empty: false
card_param: entities
entities:
- entity: update.home_assistant_operating_system_update
name: HA OS
type: custom:template-entity-row
state: >
{{ state_attr('update.home_assistant_operating_system_update',
'installed_version') }} ➜ {{
state_attr('update.home_assistant_operating_system_update',
'latest_version') }}
card_mod:
style: |
:host {
{% if state_attr('update.home_assistant_operating_system_update', 'installed_version') != state_attr('update.home_assistant_operating_system_update', 'latest_version') %}
color: red !important;
{% else %}
color: inherit;
{% endif %}
}
- type: custom:mod-card
style:
left: 12.5%
top: 28.5%
height: 65%
z-index: 14
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#update2"
card_layout: normal
width_desktop: 400px
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
icon: mdi:update
auto_close: "5000"
name: Mises à jour partie2
- type: custom:bubble-card
style:
left: 80%
top: 10%
width: 20%
height: 5%
z-index: 13
card_type: button
button_type: name
icon: mdi:arrow-right-bold
name: Restrictions d'eau
button_action:
tap_action:
action: navigate
navigation_path: "#restrictions_eau"
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
- type: custom:auto-entities
card:
type: entities
show_header_toggle: false
filter:
include:
- domain: update
template: >
{% set installed = state_attr(entity.entity_id,
'installed_version') %} {% set latest =
state_attr(entity.entity_id, 'latest_version') %} {{ installed
!= latest }}
show_empty: false
card_param: entities
entities:
- entity: update.zerotier_one_update
name: ZeroTier One
type: custom:template-entity-row
state: >
{{ state_attr('update.zerotier_one_update', 'installed_version')
}} ➜ {{ state_attr('update.zerotier_one_update',
'latest_version') }}
card_mod:
style: |
:host {
{% if state_attr('update.zerotier_one_update', 'installed_version') != state_attr('update.zerotier_one_update', 'latest_version') %}
color: red !important;
{% else %}
color: inherit;
{% endif %}
}
- type: custom:mod-card
style:
left: 15%
top: 23.5%
height: 55%
z-index: 14
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#restrictions_eau"
card_layout: normal
width_desktop: 400px
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
icon: mdi:fountain
auto_close: "5000"
name: Restrictions d'eau
- type: custom:bubble-card
style:
left: 80%
top: 10%
width: 20%
height: 5%
z-index: 13
card_type: button
button_type: name
icon: mdi:arrow-right-bold
name: Meteo
button_action:
tap_action:
action: navigate
navigation_path: "#meteo"
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
- type: custom:auto-entities
card:
type: entities
show_header_toggle: false
show_empty: false
card_param: entities
entities:
- entity: sensor.arrosage_des_pelouses_restrictions_berlaimont
- entity: sensor.arrosage_des_jardins_potagers_restrictions_berlaimont
- entity: sensor.lavage_des_vehicules_restrictions_berlaimont
- entity: sensor.lavage_des_toitures_facades_restrictions_berlaimont
- entity: >-
sensor.vidange_et_remplissage_des_piscines_restrictions_berlaimont
- entity: >-
sensor.remplissage_vidange_des_plans_d_eau_restrictions_berlaimont
- entity: sensor.restriction_specifique_restrictions_berlaimont
- type: custom:mod-card
style:
left: 17.5%
top: 45%
height: 98%
z-index: 14
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#meteo"
card_layout: normal
width_desktop: 400px
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
icon: mdi:weather-cloudy
auto_close: "20000"
name: Meteo
- type: custom:bubble-card
style:
left: 80%
top: 10%
width: 20%
height: 5%
z-index: 13
card_type: button
button_type: name
icon: mdi:arrow-u-left-top-bold
name: Mises à jour partie1
button_action:
tap_action:
action: navigate
navigation_path: "#update1"
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: weather-forecast
show_current: true
show_forecast: true
entity: weather.forecast_maison
forecast_type: hourly
- type: custom:swipe-card
parameters:
allowTouchMove: false
effect: coverflow
centeredSlides: true
slidesPerView: auto
spaceBetween: 8
pagination:
type: progressbar
navigation: null
keyboard:
enabled: true
onlyInViewport: true
navigation: null
cards:
- type: iframe
url: >-
https://embed.windy.com/embed2.html?lat=50,2&lon=15&detailLat=50,2&detailLon=15&zoom=5&level=surface&overlay=rain&product=ecmwf&menu=&message=&marker=&calendar=24&pressure=&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1
aspect_ratio: 99%
card_mod:
style: |
ha-card {
filter: invert(0%);
}
- type: iframe
url: >-
https://embed.windy.com/embed2.html?lat=50,2&lon=15&detailLat=50,2&detailLon=15&zoom=5&level=surface&overlay=temp&product=ecmwf&menu=&message=&marker=&calendar=24&pressure=&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1
aspect_ratio: 99%
card_mod:
style: |
ha-card {
filter: invert(0%);
}
- type: iframe
url: >-
https://embed.windy.com/embed2.html?lat=50,2&lon=15&detailLat=50,2&detailLon=15&zoom=5&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=24&pressure=&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1
aspect_ratio: 99%
card_mod:
style: |
ha-card {
filter: invert(0%);
}
- type: weather-forecast
show_current: false
show_forecast: true
entity: weather.forecast_maison
forecast_type: daily
- type: custom:bubble-card
style:
left: 3.5%
top: 10%
width: 7%
height: 5%
z-index: 13
card_type: button
button_type: name
icon: mdi:update
name: Menu
button_action:
tap_action:
action: navigate
navigation_path: "#update1"
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
scrolling_effect: false
- type: custom:mod-card
style:
left: 86.5%
top: 39.75%
height: 87.5%
z-index: 14
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#alarme"
card_layout: normal
width_desktop: 400px
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
icon: mdi:shield-home
auto_close: "10000"
name: Alarme
- type: custom:bubble-card
style:
left: 80%
top: 10%
width: 20%
height: 5%
z-index: 13
card_type: button
button_type: name
icon: mdi:arrow-left-bold
name: Batteries
button_action:
tap_action:
action: navigate
navigation_path: "#batteries"
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
- type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme maison
button_scale_keypad: 1
use_clear_icon: true
keep_keypad_visible: true
card_mod:
style:
alarmo-button$:
mwc-button$: |
#button {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
border: 1px rgba(0,0,0,1.0) outset;
border-radius: 25px;
margin: 4px;
}
ha-textfield $: |
.mdc-text-field {
border-radius: 25px !important;
}
.mdc-text-field__ripple {
border-radius: 25px !important;
}
.mdc-line-ripple {
display: none !important;
}
.: |
ha-card {
margin-top: -5px;
background: transparent;
}
ha-card > div.header > div.icon > alarmo-state-badge {
--state-alarm_control_panel-armed_away-color: var(--red-color);
--state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
--state-alarm_control_panel-armed_home-color: var(--red-color);
--state-alarm_control_panel-armed_night-color: var(--red-color);
--state-alarm_control_panel-armed_vacation-color: var(--red-color);
--state-alarm_control_panel-arming-color: var(--orange-color);
--state-alarm_control_panel-disarming-color: var(--orange-color);
--state-alarm_control_panel-pending-color: var(--orange-color);
--state-alarm_control_panel-triggered-color: var(--red-color);
--state-alarm_control_panel-disarmed-color: var(--green-color)
}
ha-textfield {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
border: 1px rgba(0,0,0,1.0) outset;
border-radius: 50px;
}
- type: custom:mod-card
style:
left: 81.5%
top: 18.5%
height: 45%
z-index: 14
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#ephemeride"
card_layout: normal
width_desktop: 400px
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
icon: mdi:church
auto_close: "5000"
name: Ephemeride
- type: custom:bubble-card
style:
left: 80%
top: 10%
width: 20%
height: 5%
z-index: 13
card_type: button
button_type: name
icon: mdi:arrow-u-right-top-bold
name: Alarme
button_action:
tap_action:
action: navigate
navigation_path: "#alarme"
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
- type: custom:auto-entities
card:
type: entities
show_header_toggle: false
entities:
- entity: sensor.jour_anniversaire
- entity: sensor.demain_anniversaire
- entity: sensor.saint_du_jour
- entity: sensor.saint_de_demain
- entity: sensor.jour_ferie
- type: custom:mod-card
style:
left: 84%
top: 31%
height: 70%
z-index: 14
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#batteries"
card_layout: normal
width_desktop: 400px
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
icon: mdi:battery
auto_close: "10000"
name: Batteries
- type: custom:bubble-card
style:
left: 80%
top: 10%
width: 20%
height: 5%
z-index: 13
card_type: button
button_type: name
icon: mdi:arrow-left-bold
name: Ephemeride
button_action:
tap_action:
action: navigate
navigation_path: "#ephemeride"
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
- type: custom:battery-state-card
sort: state
entities:
- sensor.temp_labo_battery
- type: custom:bubble-card
style:
left: 96.5%
top: 10%
width: 7%
height: 5%
z-index: 13
card_type: button
button_type: name
icon: mdi:update
name: Menu
card_layout: normal
width_desktop: 400px
button_action:
tap_action:
action: navigate
navigation_path: "#alarme"
styles: |
.bubble-button-card-container {
box-shadow: none;
border-radius: 15px !important; # Ajustez la valeur ici
}
scrolling_effect: false
donc un menu de chaque côté avec des liens latéraux entre les cartes
cdt
Re,
je galère un peu sur Ephemeride, mais ça va le faire 
ne demandez pas encore le code, c’est pas fini 
cdt
Re,
Bon ça ne devrait plus trop bouger, du coup je profite du coucher de soleil pour poster 
avec un peu de couleur sur le tap_action
encore certain états à remonter dans les couleurs d’icones par exemple la notif de mise à jour disponibles
cdt
Re,
Tjs bubble en exploration, popup en action je me suis affranchi du menu en haut de page pour le passer en bubble et bubble popup (enfin c’est en test, surtout pour voir la charge, parce que ça implique de passer tout mon dashbord sur 1 plan).
On passerait donc de ça
à ça
en n’oubliant pas que dans tous les cas je change de plan aussi de mon plan principal
j’ai aussi mis en place un auto popup bubble sur état des portes / fenêtres, il reste ouvert tant qu’une porte ou une fenêtre est ouvert, je vais détailler dans le 1er message du topic cette partie.
cdt
Hello,
Je continue de creuser dans mon coin, je n’irais pas plus loin à priori
Je fini de mettre en place et je ferais un retour si ça intéresse du monde
cdt
1 « J'aime »
Re,
Bon finalement j’ai contourné le soucis des arrondis que j’arrivais pas à modifier dans le popup, j’ai tout mis en transparent.
- type: custom:bubble-card
card_type: pop-up
hash: "#menu"
card_layout: normal
name: Menu
width_desktop: 150px
show_icon: false
styles: |
.bubble-pop-up-background {
background: rgba(0, 0, 0, 0.0) !important; /* Fond totalement transparent */
box-shadow: none !important; /* Supprime l'ombre */
backdrop-filter: none !important; /* Supprime l'effet de flou */
}
.bubble-header-container {
background: transparent !important;
opacity: 0 !important;
pointer-events: none !important;
}
.bubble-sub-button-3 {
background-color: orange; !important;
}
.bubble-sub-button:active {
background-color: rgba(0, 123, 255, 0.5); /* Couleur bleue semi-transparente */
}
cdt
Hello,
Pour les pro du css, il y a moyen de générer une grille tous les 1% de carte? je le fais via
- type: custom:hui-image-element
style:
left: 0%
top: 38%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 39%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 31%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 32%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
mais bon si c’est possible d’avoir moins copieux, merci
code
type: picture-elements
image: /local/plan3D/Transparent 1920x1080.png
elements:
- type: image
image: /local/plan3D/piece maxi/transparent/labo transparent maxi.png
style:
top: 55.3%
left: 53.2%
width: 80.5%
- type: custom:hui-image-element
style:
left: 0%
top: 10%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 11%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 12%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 13%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 14%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 15%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 16%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 17%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 18%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 19%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 20%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 21%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 22%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 23%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 24%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 25%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 26%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 27%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 28%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 29%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 30%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 31%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 32%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 33%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 34%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 35%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 36%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 37%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 38%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 39%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 40%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 41%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 42%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 43%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 44%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 45%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 46%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 47%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 48%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 49%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 50%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 51%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 52%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 53%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 54%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 55%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 56%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 57%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 58%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 59%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 60%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 61%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 62%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 63%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 64%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 65%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 66%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 67%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 68%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 69%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 70%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 71%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 72%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 73%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 74%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 75%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 76%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 77%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 78%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 79%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 80%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 81%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 82%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 83%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 84%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 85%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 86%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 87%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 88%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 89%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
left: 0%
top: 90%
width: 200%
height: 1px
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 10%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 11%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 12%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 13%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 14%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 15%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 16%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 17%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 18%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 19%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 20%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 21%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 22%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 23%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 24%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 25%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 26%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 27%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 28%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 29%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 30%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 31%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 32%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 33%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 34%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 35%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 36%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 37%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 38%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 39%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 40%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 41%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 42%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 43%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 44%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 45%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 46%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 47%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 48%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 49%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 50%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 51%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 52%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 53%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 54%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 55%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 56%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 57%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 58%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 59%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 60%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 61%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 62%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 63%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 64%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 65%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 66%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 67%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 68%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 69%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 70%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 71%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 72%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 73%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 74%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 75%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 76%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 77%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 78%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 79%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 80%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 81%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 82%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 83%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 84%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 85%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 86%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 87%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 88%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 89%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
- type: custom:hui-image-element
style:
top: 1%
left: 90%
width: 1px
height: 200%
background: rgba(255, 255, 255, 0.3)
cdt
Re,
J’arrive au terme de mes recherches et de mes besoins, mais je le tiens bien ce coup ci
au passage un petit rappel de comment modifier un élément, si j’arrive à le faire, tout le monde peut le faire, pour rappel, je ne sais pas coder
F12 dans son navigateur > inspection du code on cible sur quoi on veut jouer (modifié)
je sais que je veux jouer sur .bubble-close-button.close-pop-up uniquement quand il est actif
.bubble-close-button.close-pop-up:active {
.bubble-close-button.close-pop-up:active {
background-color: rgba(0, 123, 255, 0.5); /* Couleur bleue semi-transparente */
}
un petit bout de rendu final
si ça intéresse du monde je peux éventuellement faire une vidéo du rendu final, sinon j’en reste là
cdt
1 « J'aime »
Re,
Joli boulot sur bubble + vigieau, Nouvelle intégration Vigieau - #180 par zer que j’ai adapté à ma sauce et intégré en prod
cdt