The card looks and behaves on when it’s first presented:
Then I go to adjust volume and the color is different than I want. I can’t find the element to control.
But the real perplexing thing is, when I go to close the volume slider, the text field does populate and the ‘X’ remains (instead of the audio icon):
So this leads me to 3 questions:
- How do I control the styling of the audio icon on the right?
- How do I control the styling of the audio slider?
- How do I get the elements of the media player card back?
YAML below:
type: custom:bubble-card
card_type: media-player
entity: media_player.office_frame
name: Screen
icon: mdi:television
scrolling_effect: false
show_state: true
hide:
play_pause_button: true
next_button: true
previous_button: true
volume_button: false
power_button: true
mute_button: true
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: none
styles: |
.bubble-icon {
color: ${
hass.states['media_player.office_frame'].state === 'on'
? 'rgba(0, 198, 194,1)' : 'rgba(201, 201, 205, 1)'
} !important;
}
.bubble-name {
font-size: 14px !important;
color: rgba(201, 201, 205, 1);
}
.bubble-media-player {
background-color: rgba(16, 16, 20, 1) !important
}
.bubble-icon-container {
background: rgba(16, 16, 20, 1);
opacity: 100 !important;
}