Bonjour,
J’essaie d’appliquer du CSS avec card_mod mais j’ai beaucoup de mal avec la console de dev du navigateur.
J’essaie de rendre transparent le background des 2 parties de la télécommande (ce sont des fichiers PNG transparents à la base)
J’ai essayé des tests unitaires, et lorsque je sort la vertical stack in card de l’ensemble, la transparence est bien là mais lorsque j’intègre le tout dans ma carte finale, la transparence disparait .
J’en déduis que le code du card mod n’est pas à la bonne place mais je galère depuis des jours à trouver où modifier ça
Est ce qu’une âme charitable saurait m’aider svp ?
Voici le code de la carte complète.
Au besoin je peux donner mon test unitaire ou la transparence est bien appliquée au niveau de ma télécommande
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#tv_salon_3"
name: TV Salon (Player Devialet)
icon: mdi:television
auto_close: ""
margin_top_desktop: calc(100vh - 725px)
bg_opacity: "0"
bg_blur: "10"
bg_color: transparent
styles: |-
.bubble-button-card-container {
#height: 120px !important;
#width: 65% !important;
background: transparent !important;
#color: yellow !important;
}
.bubble-pop-up {
#background: transparent !important;
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
}
.bubble-button-background {
background: transparent !important;
}
.bubble-icon-container {
#margin: auto !important;
background: rgb(230, 128, 41) !important;
}
.bubble-icon {
--mdc-icon-size: 30px !important;
#color: rgb(92, 51, 169) !important;
color: blue !important;
}
ha-card {
#--bubble-icon-background-color: rgb(230, 128, 41) !important;
--bubble-main-background-color: transparent !important;
padding: 10px 0px 10px 45px !important;
}
button_type: name
modules:
- default
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: switch.multiprise_tv_sejour_l1_devialet
styles: |2-
.bubble-icon {
color: ${hass.states['switch.multiprise_tv_sejour_l1_devialet'].state === 'off' ? 'rgb(255,100,0)' : 'teal'} !important;
--mdc-icon-size: 30px !important;
}
.bubble-icon-container {
#background: ${hass.states['switch.multiprise_tv_sejour_l1_devialet'].state === 'off' ? 'grey' : 'orange'};
background: transparent !important;
}
.bubble-button-card-container {
#background: rgba(0,0,0,0.3) !important;
background: transparent !important;
--bubble-button-background-color: transparent !important;
}
ha-card {
#--bubble-icon-background-color: rgb(255, 255, 0) !important;
#--bubble-main-background-color: transparent !important;
width: 100% !important;
backgroud-color: transparent !important;
}
${icon.setAttribute("icon", hass.states['switch.multiprise_tv_sejour_l1_devialet'].state === 'off' ? 'mdi:television-off' : 'mdi:television-play')}
name: Prise Devialet
force_icon: true
show_state: true
show_attribute: true
button_type: switch
modules:
- default
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:bubble-card
card_type: button
entity: switch.prise_tv_salon
styles: |2-
.bubble-icon {
color: ${hass.states['switch.prise_tv_salon'].state === 'off' ? 'rgb(255,100,0)' : 'teal'} !important;
--mdc-icon-size: 30px !important;
}
.bubble-icon-container {
background: transparent !important;
}
.bubble-button-card-container {
background: transparent !important;
--bubble-button-background-color: transparent !important;
}
ha-card {
width: 100% !important;
}
${icon.setAttribute("icon", hass.states['switch.prise_tv_salon'].state === 'off' ? 'mdi:television-classic-off' : 'mdi:television-classic')}
button_type: switch
modules:
- default
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:state-switch
entity: >-
{% if is_state('switch.multiprise_tv_sejour_l1_devialet', 'on') %} on
{% else %} off {% endif %}
states:
"on":
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-background: transparent !important;
}
cards:
- elements:
- service: switch.turn_off
service_data:
entity_id: switch.tv_lg_salon_on_off
style:
left: 26%
top: 21%
title: TV
type: service-button
- service: freebox_player.remote
service_data:
code: power
style:
left: 78%
top: 21%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "1"
style:
left: 26%
top: 37%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "2"
style:
left: 53%
top: 37%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "3"
style:
left: 78%
top: 37%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "4"
style:
left: 26%
top: 50%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "5"
style:
left: 53%
top: 50%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "6"
style:
left: 78%
top: 50%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "7"
style:
left: 26%
top: 61%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "8"
style:
left: 53%
top: 61%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "9"
style:
left: 78%
top: 61%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: "0"
style:
left: 52%
top: 73%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: red
style:
left: 26%
top: 80%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: blue
style:
left: 77%
top: 79%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: up
style:
left: 52%
top: 87%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: ok
style:
left: 52%
top: 98%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: left
style:
left: 28%
top: 98%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: right
style:
left: 75%
top: 98%
title: ""
type: service-button
image: >-
/local/ressources/img/telco_devialet_v2/teleco_softouch_part1.png
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0) !important;
box-shadow: none;
--ha-card-background: transparent !important;
}
type: picture-elements
- elements:
- service: freebox_player.remote
service_data:
code: ok
style:
left: 52%
top: 2%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: left
style:
left: 28%
top: 2%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: right
style:
left: 75%
top: 2%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: down
style:
left: 52%
top: 13%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: home
style:
left: 52%
top: 25%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: green
style:
left: 26%
top: 19%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: yellow
style:
left: 77%
top: 19%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: vol_inc
style:
left: 26%
top: 33%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: vol_dec
style:
left: 26%
top: 47%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: prgm_inc
style:
left: 77%
top: 33%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: prgm_dec
style:
left: 77%
top: 47%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: mute
style:
left: 52%
top: 36%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: rec
style:
left: 52%
top: 47%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: bwd
style:
left: 26%
top: 58%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: play
style:
left: 52%
top: 58%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: fwd
style:
left: 77%
top: 58%
title: ""
type: service-button
- service: freebox_player.remote
service_data:
code: netflix
style:
left: 52%
top: 68%
title: ""
type: service-button
image: >-
/local/ressources/img/telco_devialet_v2/teleco_softouch_part2.png
card_mod:
style: |
ha-card {
background: rgba(0,0,0,0) !important;
box-shadow: none;
--ha-card-background: transparent !important;
}
type: picture-elements
- type: custom:state-switch
entity: >-
{% if is_state('switch.prise_tv_salon', 'on') or
is_state('switch.multiprise_tv_sejour_l1_devialet', 'on')%} on {% else
%} off {% endif %}
states:
"on":
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
modules:
- default
button_type: name
styles: |2-
ha-card {
--bubble-main-background-color: rgba(0, 0, 0, 0);
#padding: 10px 10px 10px 45px !important;
}
icon: mdi:timer-cog
name: Timer TV
sub_button:
- name: Config timer
icon: mdi:arrow-right-bold-circle
show_name: true
tap_action:
action: none
state_background: false
show_background: false
- entity: input_boolean.btn_timer_tv_heures
tap_action:
action: toggle
- entity: input_boolean.btn_timer_tv_minutes
tap_action:
action: toggle
- entity: input_boolean.btn_timer_tv_secondes
tap_action:
action: toggle
tap_action:
action: none
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
modules:
- default
entity: input_number.timer_tv_kesandre_heures
name: Heures
icon: mdi:alpha-h-box-outline
tap_action:
action: none
hold_action:
action: more-info
button_action:
tap_action:
action: none
hold_action:
action: none
sub_button:
- entity: input_number.timer_tv_kesandre_heures
icon: mdi:plus
tap_action:
action: perform-action
perform_action: input_number.increment
target:
entity_id: input_number.timer_tv_kesandre_heures
- entity: input_number.timer_tv_kesandre_heures
icon: mdi:minus
tap_action:
action: perform-action
perform_action: input_number.decrement
target:
entity_id: input_number.timer_tv_kesandre_heures
scrolling_effect: false
force_icon: false
show_icon: true
show_last_changed: false
show_last_updated: false
show_attribute: false
card_layout: normal
show_name: true
styles: |-
ha-card {
--bubble-main-background-color: rgba(0, 0, 0, 0);
#padding: 10px 10px 10px 45px !important;
}
visibility:
- condition: state
entity: input_boolean.btn_timer_tv_heures
state: "on"
- type: custom:bubble-card
card_type: button
button_type: state
modules:
- default
entity: input_number.timer_tv_kesandre_minutes
name: Minutes
icon: mdi:alpha-m-box-outline
tap_action:
action: none
hold_action:
action: more-info
button_action:
tap_action:
action: none
hold_action:
action: none
sub_button:
- entity: input_number.timer_tv_kesandre_minutes
icon: mdi:plus
tap_action:
action: perform-action
perform_action: input_number.increment
target:
entity_id: input_number.timer_tv_kesandre_minutes
- entity: input_number.timer_tv_kesandre_minutes
icon: mdi:minus
tap_action:
action: perform-action
perform_action: input_number.decrement
target:
entity_id: input_number.timer_tv_kesandre_minutes
scrolling_effect: false
card_layout: normal
show_icon: true
show_name: true
styles: |-
ha-card {
--bubble-main-background-color: rgba(0, 0, 0, 0);
#padding: 10px 10px 10px 45px !important;
}
visibility:
- condition: state
entity: input_boolean.btn_timer_tv_minutes
state: "on"
- type: custom:bubble-card
card_type: button
button_type: state
modules:
- default
entity: input_number.timer_tv_kesandre_secondes
name: Secondes
icon: mdi:alpha-s-box-outline
tap_action:
action: none
hold_action:
action: more-info
button_action:
tap_action:
action: none
hold_action:
action: none
sub_button:
- entity: input_number.timer_tv_kesandre_secondes
icon: mdi:plus
tap_action:
action: perform-action
perform_action: input_number.increment
target:
entity_id: input_number.timer_tv_kesandre_secondes
show_icon: true
- entity: input_number.timer_tv_kesandre_secondes
icon: mdi:minus
tap_action:
action: perform-action
perform_action: input_number.decrement
target:
entity_id: input_number.timer_tv_kesandre_secondes
scrolling_effect: true
card_layout: normal
show_icon: true
show_name: true
styles: |-
ha-card {
--bubble-main-background-color: rgba(0, 0, 0, 0);
#padding: 10px 10px 10px 45px !important;
}
visibility:
- condition: state
entity: input_boolean.btn_timer_tv_secondes
state: "on"
- type: custom:bubble-card
card_type: button
button_type: state
entity: timer.tv_kesandre
sub_button:
- entity: timer.tv_kesandre
tap_action:
action: perform-action
target: {}
perform_action: script.timer_start_timer_tv_kesandre
icon: mdi:play
show_name: false
- entity: timer.tv_kesandre
icon: mdi:pause
tap_action:
action: call-service
service: timer.pause
target:
entity_id: timer.tv_kesandre
- entity: timer.tv_kesandre
icon: mdi:cancel
tap_action:
action: call-service
target:
entity_id: timer.tv_kesandre
service: timer.cancel
- entity: timer.tv_kesandre
tap_action:
action: call-service
service: timer.finish
target:
entity_id: timer.tv_kesandre
icon: mdi:clock-end
show_attribute: false
show_state: true
show_name: true
<force_icon: false
show_icon: true
show_last_changed: false
card_layout: normal
styles: |
:host{
--circle-color: var(--bubble-accent-color, var(--accent-color));
--percentage: ${(() => {
card.timerEntity = hass.states[entity];
const now = new Date();
const endTime = new Date(card.timerEntity.attributes.finishes_at);
const runningTime = Math.round((endTime - now) / 1000);
const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000);
const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000);
var percentage = 0;
if (isNaN(runningTime)) {
percentage = 100 - Math.round( 100.0 * remainingTime / maxtime);
} else {
percentage = 100 - Math.round( 100.0 * runningTime / maxtime);
}
if (isNaN(percentage)) {
return "0%";
} else {
return "" + percentage +"%";
}
})()};
}
.bubble-icon-container {
background: radial-gradient(
var(--card-background-color) 60%,
transparent 0%
), conic-gradient(
var(--circle-color) var(--percentage) 0%,
var(--card-background-color) 0% 100%
) !important;
}
.bubble-icon-container:after {
content: "" !important;
height: 100% !important;
width: 100% !important;
position: absolute !important;
border-radius: 50% !important;
background: (var(--bubble-button-icon-background-color), 0.1) !important;
}
${(() => {
function UpdateState(){
try {
let now = new Date();
let endTime = new Date(card.timerEntity.attributes.finishes_at);
let runningTime = Math.round((endTime - now)/1000);
let hours = Math.floor(runningTime / 3600);
let minutes = Math.floor((runningTime - (hours * 3600)) / 60);
let remainingSeconds = runningTime % 60;
card.querySelector('.bubble-state').innerText =
(hours > 0 ? (hours + ":") : "") +
("0" + minutes).slice(-2) + ":" +
("0" + remainingSeconds).slice(-2);
} catch (error) {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
}
};
if (card.timer == null && card.timerEntity.state === 'active') {
card.timer = setInterval(()=>{UpdateState()}, 500);
}else if (card.timerEntity.state != 'active'){
clearInterval(card.timer);
card.timer = null;
if (card.timerEntity.state !='paused') {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
} else if(card.timerEntity.state==='paused') {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining;
}
}
})()}
${(() => {
subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay');
})()}
${(() => {
if (card.timerEntity.state != 'active') {
card.querySelector('.bubble-sub-button-2').classList.add("hidden");
}
})()}
${(() => {
if (card.timerEntity.state === 'idle') {
card.querySelector('.bubble-sub-button-3').classList.add("hidden");
}
})()}
${(() => {
if (card.timerEntity.state === 'idle') {
card.querySelector('.bubble-sub-button-4').classList.add("hidden");
}
})()}
ha-card {
--bubble-main-background-color: rgba(0, 0, 0, 0);
#padding: 10px 10px 10px 45px !important;
}
modules:
- default
show_last_updated: false
force_icon: false
scrolling_effect: true
attribute: remaining
name: ""
card_mod:
style:
ha-card:
$: |
:host {
background-color: transparent !important;
}
.
