Any chance to have and study your code?
Could you please share the code of your dashboard? it looks amazing!
Could you share the code? I have now my mobile app based on rounded, but see some nice add-ons you made which are good inspiration for my tablet dashboard
1 Like
Sorry, but the dashboard has over 42000 lines of code. There is no way, I can clean it up to share. If you are interested in anything specific I am happy to post parts of it 
1 Like
I understand! It would be very helpful to share your grid lay-out first so I can play a little bit with that 
Trying to re-create it myself but it’s hard haha
Sure. So I am using Layout Card from HACS to then use Grid as the view Type with this grid:
grid-template-columns: 120px 90%
grid-template-rows: auto
grid-template-areas: |
"header header header"
"sidebar . main"
"footer footer footer"
And then I use this to put the specific cards in the grid place:
view_layout:
grid-area: header
1 Like
Thanks for sharing.
And your header is then one big horizontal stack or how do I need to see this?
Hi, I will share the code when I get back from holiday as it is a bit tricky on mobile
1 Like
My header is actually another layout card, because I wanted to define how much space each part takes. And then it kinda just works like a horizontal stack. The clock and profile are just custom:button-cards and the status icons are mushroom chips.
1 Like
That makes sense. I’ll try to create this myself as well. Thanks for the info!
you really did a great job! my compliments! I think we will all be grateful if you want to share the code
1 Like
Could you share the grid of your header an the steps you took to create this?
And how did you create the main part? Just vertical and horizontal stacks?
Please guide me a bit
Sure no problem.
This is the grid for the header:
grid-template-columns: 75px min-content auto 200px
grid-template-rows: min-content
grid-template-areas: |
". time status profile"
I used a layout-card to add it and then added the time, status and profile cards.
The main part is just a grid card with two columns. and then nested grid and other cards.
1 Like
It’s over 50.000 lines of code. Hard to share… if you have any specific questions how I did something I am happy to share details
If you can upload the project ro github it’s be apreshasher
1 Like
views:
- title: Home
type: sections
sections:
- type: grid
cards:
- type: custom:bar-card
name: House Usage
tap_action: none
entities:
- entity: sensor.current_measured_power
min: 0
max: 10000
height: 66
severity:
- color: transparent
from: -10000
to: 10000
icon: mdi:lightning-bolt
entity_row: true
positions:
icon: inside
indicator: inside
name: inside
value: inside
card_mod:
style: |
bar-card-currentbar {
border-radius: 15px;
background: linear-gradient(to right, rgb(164, 195, 210) 5%, rgb(121, 210, 179) 15%, rgb(252, 245, 112) 50%, rgb(240, 128, 48) 90%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
}
bar-card-backgroundbar {
border-radius: 15px;
background: linear-gradient(to right, rgb(164,195,210) 5%, rgb(121,210,179) 15%, rgb(252,245,112) 50%, rgb(240,128,48) 90%);
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
bar-card-card {
border: none;
padding: auto;
margin-bottom: -25px;
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
ha-icon {
{% set power_usage = states('sensor.house_power_usage') | int %}
{% if power_usage > 500 %}
color: var(--primary-background-color);
{% else %}
color: var(--primary-text-color);
{% endif %}
}
bar-card-name {
{% set power_usage = states('sensor.house_power_usage') | int %}
{% if power_usage > 2000 %}
color: var(--primary-background-color);
{% else %}
color: var(--primary-text-color);
{% endif %}
}
- type: custom:mushroom-template-card
primary: Home
secondary: >-
{{ 'All Doors Closed' if is_state('binary_sensor.doors_group',
'off') else 'Door(s) Open' }}, {{ 'All lights off' if states.light
| selectattr('state', 'eq', 'on') | list | count == 0 else
(states.light | selectattr('state', 'eq', 'on') | list | count) ~
' light(s) on' }}
icon: mdi:home
layout: horizontal
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
card_mod:
style: |
ha-card {
{% if states('binary_sensor.doors_group') == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
animation: ping 2s infinite;
{% endif %}
}
ha-state-icon {
{% if states('binary_sensor.doors_group') == 'on' %}
color: rgba(var(--rgb-red), 0.7);
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% endif %}
}
- type: custom:clock-weather-card
entity: weather.home
sun_entity: sun.sun
temperature_sensor: null
weather_icon_type: fill
animated_icon: true
forecast_rows: 2
locale: en-GB
time_pattern: HH:mm
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: false
hide_forecast_section: false
show_humidty: false
hide_clock: false
hide_date: false
hourly_forecast: false
use_browser_time: false
time_zone: null
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
#box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
background: {% if states('sensor.home_realfeel_temperature_max_today') %}
{% set temp = states('sensor.home_realfeel_temperature_max_today')|float %}
{% if temp >= 0 and temp < 10 %}
linear-gradient(to top, rgba(164, 195, 210, 0.5), rgba(121, 210, 179, 0.5));
{% elif temp >= 10 and temp < 15 %}
linear-gradient(to top, rgba(121, 210, 179, 0.5), rgba(252, 245, 112, 0.5));
{% elif temp >= 15 and temp < 20 %}
linear-gradient(to top, rgba(252, 245, 112, 0.5), rgba(240, 128, 48, 0.5));
{% elif temp >= 20 and temp <= 25 %}
linear-gradient(to top, rgba(240, 128, 48, 0.5), rgba(240, 128, 48, 0.5));
{% else %}
linear-gradient(90deg, #002f7a 0%, #002f7a 100%);
{% endif %}
{% else %}
linear-gradient(90deg, #002f7a 0%, #002f7a 100%);
{% endif %}
#border: none !important;
}
@keyframes clip {
0% { clip-path: inset(100% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:mushroom-climate-card
entity: climate.thermostat_thermostat
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
collapsible_controls: false
show_temperature_control: true
name: Central Heating
secondary_info: state
icon: mdi:thermometer
fill_container: false
layout: horizontal
card_mod:
style: |
mushroom-badge-icon {
visibility: hidden;
}
ha-state-icon {
{% if is_state(config.entity, 'off') %}
--card-mod-icon: mdi:radiator-off
{% else %}
--card-mod-icon: mdi:radiator;
animation: clip 1.5s linear infinite;
color: var(--primary-text-color);
{% endif %};
}
@keyframes clip {
0% { clip-path: inset(50% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
ha-card {
#box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
background: {% if states('sensor.thermostat_thermostat_temperature') %}
{% set temp = states('sensor.thermostat_thermostat_temperature')|float %}
{% if temp >= 18 and temp < 19 %}
linear-gradient(to right, rgba(164, 195, 210, 0.5), rgba(121, 210, 179, 0.5));
{% elif temp >= 19 and temp < 20 %}
linear-gradient(to right, rgba(121, 210, 179, 0.5), rgba(252, 245, 112, 0.5));
{% elif temp >= 20 and temp < 21 %}
linear-gradient(to right, rgba(252, 245, 112, 0.5), rgba(240, 128, 48, 0.5));
{% elif temp >= 21 and temp <= 22 %}
linear-gradient(to right, rgba(240, 128, 48, 0.5), rgba(240, 128, 48, 0.5));
{% else %}
linear-gradient(90deg, #002f7a 0%, #002f7a 100%);
{% endif %}
{% else %}
linear-gradient(90deg, #002f7a 0%, #002f7a 100%);
{% endif %}
border: none !important;
}
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states:
- armed_away
fill_container: false
layout: horizontal
name: Home Alarm
- type: custom:mini-graph-card
entities:
- sensor.cryptoinfo_btc_price
name: BTC
icon: mdi:bitcoin
height: 98
hours_to_show: 100
line_width: 1
line_color: rgb(164,195,210)
color_thresholds_transition: smooth
color_thresholds:
- value: 60000
color: rgb(164,195,210)
- value: 64000
color: rgb(121,210,179)
- value: 66000
color: rgb(252,245,112)
- value: 70000
color: rgb(240,128,48)
- value: 75000
color: rgb(240,128,48)
show:
name: true
legend: false
icon: true
labels: false
state: true
points: false
card_mod:
style:
.icon ha-icon:
$: |
ha-svg-icon {
color: var(--primary-text-color) !important;
- type: grid
cards:
- type: custom:bar-card
entities:
- entity: sensor.solar_production_measured_solar
name: Solar Generation
tap_action: none
min: 0
max: 3000
height: 66
severity:
- color: transparent
from: 0
to: 3000
icon: mdi:solar-power-variant
entity_row: true
positions:
icon: inside
indicator: inside
name: inside
value: inside
card_mod:
style: |
bar-card-currentbar {
border-radius: 15px;
background: linear-gradient(to right, rgb(164, 195, 210) 5%, rgb(121, 210, 179) 15%, rgb(252, 245, 112) 50%, rgb(240, 128, 48) 90%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
}
bar-card-backgroundbar {
border-radius: 15px;
background: linear-gradient(to right, rgb(164,195,210) 5%, rgb(121,210,179) 15%, rgb(252,245,112) 50%, rgb(240,128,48) 90%);
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
bar-card-card {
border: none;
padding: auto;
margin-bottom: -25px;
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
ha-icon {
{% set power_usage = states('sensor.solar_production_measured_solar') | int %}
{% if power_usage > 500 %}
color: var(--primary-background-color);
{% else %}
color: var(--primary-text-color);
{% endif %}
}
bar-card-name {
{% set power_usage = states('sensor.solar_production_measured_solar') | int %}
{% if power_usage > 1000 %}
color: var(--primary-background-color);
{% else %}
color: var(--primary-text-color);
{% endif %}
}
- type: custom:mushroom-title-card
title: Downstairs
subtitle: >-
{{ states('sensor.entry_45d9_temperature') }} °C / {{
states('sensor.entry_45d9_humidity') }} %
card_mod:
style: |
ha-card {
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919 !important;
}
- type: custom:mushroom-light-card
entity: light.tasmota
use_light_color: true
show_brightness_control: true
collapsible_controls: true
show_color_control: true
show_color_temp_control: true
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states(config.entity) == 'on' %}
color: var(--text-color);
{% endif %}
}
- type: custom:mushroom-light-card
entity: light.kitchen_led_kitchen_led
use_light_color: true
show_brightness_control: true
collapsible_controls: true
show_color_control: true
show_color_temp_control: true
layout: vertical
icon: mdi:led-strip-variant
name: Kitchen LED
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
border: none !important;
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
background: linear-gradient(to top, rgba{{state_attr(config.entity,'rgb_color') + (0.01,)}}, rgba{{state_attr(config.entity,'rgb_color') + (0.2,)}});
{% endif %}
}
- type: custom:mushroom-light-card
entity: light.tasmota_tasmota2
use_light_color: true
show_brightness_control: true
collapsible_controls: true
show_color_control: true
show_color_temp_control: true
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states(config.entity) == 'on' %}
color: var(--text-color);
{% endif %}
}
- type: custom:mushroom-light-card
use_light_color: false
show_brightness_control: true
collapsible_controls: true
show_color_control: false
show_color_temp_control: false
fill_container: false
entity: light.night_lights
name: Night Lights
layout: vertical
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states(config.entity) == 'on' %}
color: var(--text-color);
{% endif %}
}
- type: custom:mushroom-light-card
entity: light.tasmota_2
use_light_color: false
show_brightness_control: true
collapsible_controls: false
show_color_control: false
show_color_temp_control: false
name: Living Main
fill_container: false
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states(config.entity) == 'on' %}
color: var(--text-color);
{% endif %}
}
- type: custom:mushroom-template-card
primary: iPad Charger
secondary: iPad {{ states('sensor.ipad_battery_level') }} %
icon: >
{% set battery_level = (states('sensor.ipad_battery_level') | int
/ 10) | round(0) | int * 10 %} {% if
is_state('sensor.ipad_battery_state', 'Charging' ) %}
{% if battery_level > 0 %}
mdi:battery-charging-{{ battery_level }}
{% else %}
mdi:battery-charging-outline
{% endif %}
{% else %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
{% endif %}
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon_color: >-
{% set battery_level = states('sensor.ipad_battery_level') | int
%}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
entity: switch.tasmota
card_mod:
style: |
@keyframes blink {
50% {opacity: 0;}
}
ha-state-icon {
{% if (states('sensor.ipad_battery_level') | int) < 30 %}
animation: blink 1s linear infinite;
{% endif %}
}
ha-card {
{% if states('switch.tasmota') == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
- type: custom:mushroom-template-card
primary: Garage
secondary: >-
{{ ('Washing Machine, Running' if
states('sensor.washing_plug_power')|float > 5 else 'Washing
Machine, Finished') }}
icon: mdi:washing-machine
layout: horizontal
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
card_mod:
style: |
ha-state-icon {
{% if states('sensor.washing_plug_power') |float > 5 %}
animation: wobbling 0.7s linear infinite alternate;
{% endif %}
}
@keyframes wobbling {
0% { transform: rotate(-80deg); }
100% { transform: rotate(40deg); }
}
- type: custom:mushroom-cover-card
entity: cover.garage_doors_garage_doors_cover
show_position_control: false
show_buttons_control: true
show_tilt_position_control: false
secondary_info: state
primary_info: name
name: Garage Door
fill_container: false
layout: horizontal
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states('cover.garage_doors_garage_doors_cover') == 'open' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states('cover.garage_doors_garage_doors_cover') == 'open' %}
color: rgb(164, 195, 210);
{% endif %}
}
- type: grid
cards:
- type: custom:bar-card
name: Grid Export
tap_action: none
entities:
- entity: sensor.home_usage_minus_solar_above_0
min: 0
max: 3000
height: 66
severity:
- color: transparent
from: 0
to: 3000
icon: mdi:transmission-tower-export
entity_row: true
positions:
icon: inside
indicator: inside
name: inside
value: inside
card_mod:
style: |
bar-card-currentbar {
border-radius: 15px;
background: linear-gradient(to right, rgb(164, 195, 210) 5%, rgb(121, 210, 179) 15%, rgb(252, 245, 112) 50%, rgb(240, 128, 48) 90%);
clip-path: polygon(0 0, var(--bar-percent) 0, var(--bar-percent) 100%, 0 100%);
}
bar-card-backgroundbar {
border-radius: 15px;
background: linear-gradient(to right, rgb(164,195,210) 5%, rgb(121,210,179) 15%, rgb(252,245,112) 50%, rgb(240,128,48) 90%);
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
bar-card-card {
border: none;
padding: auto;
margin-bottom: -25px;
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
ha-icon {
{% set power_usage = states('sensor.home_usage_minus_solar_above_0') | int %}
{% if power_usage > 500 %}
color: var(--primary-background-color);
{% else %}
color: var(--primary-text-color);
{% endif %}
}
bar-card-name {
{% set power_usage = states('sensor.home_usage_minus_solar_above_0') | int %}
{% if power_usage > 1000 %}
color: var(--primary-background-color);
{% else %}
color: var(--primary-text-color);
{% endif %}
}
- type: custom:mushroom-title-card
title: Upstairs
subtitle: >-
{{ states('sensor.average_temperature_upstairs') }} °C / {{
states('sensor.average_humidity_upstairs') }} %
card_mod:
style: |
ha-card {
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919 !important;
}
- type: custom:mushroom-light-card
entity: light.tasmota_tasmota2_2
use_light_color: true
show_brightness_control: true
collapsible_controls: true
show_color_control: true
show_color_temp_control: true
name: Bathroom
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states(config.entity) == 'on' %}
color: var(--text-color);
{% endif %}
}
- type: custom:mushroom-fan-card
entity: fan.tasmota
icon: mdi:fan
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states(config.entity) == 'on' %}
animation: rotate 0.5s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
{% endif %}
}
- type: custom:mushroom-light-card
entity: light.guest_room_main
use_light_color: false
show_brightness_control: true
collapsible_controls: true
show_color_control: false
show_color_temp_control: false
name: Guest Room
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states(config.entity) == 'on' %}
color: var(--text-color);
{% endif %}
}
- type: custom:mushroom-light-card
entity: light.tasmota_3
use_light_color: true
show_brightness_control: true
collapsible_controls: true
show_color_control: true
show_color_temp_control: true
icon: mdi:led-strip-variant
layout: vertical
fill_container: false
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
border: none !important;
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
background: linear-gradient(to top, rgba{{state_attr(config.entity,'rgb_color') + (0.01,)}}, rgba{{state_attr(config.entity,'rgb_color') + (0.2,)}});
{% endif %}
}
- type: custom:mushroom-template-card
primary: Heating Panel
secondary: ''
icon: mdi:power
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
entity: switch.switch_8f55b3_switch_s1_2
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
#box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
background: {% if states('sensor.thermostat_thermostat_temperature') %}
{% set temp = states('sensor.thermostat_thermostat_temperature')|float %}
{% if temp >= 18 and temp < 19 %}
linear-gradient(to right, rgba(164, 195, 210, 0.5), rgba(121, 210, 179, 0.5));
{% elif temp >= 19 and temp < 20 %}
linear-gradient(to right, rgba(121, 210, 179, 0.5), rgba(252, 245, 112, 0.5));
{% elif temp >= 20 and temp < 21 %}
linear-gradient(to right, rgba(252, 245, 112, 0.5), rgba(240, 128, 48, 0.5));
{% elif temp >= 21 and temp <= 22 %}
linear-gradient(to right, rgba(240, 128, 48, 0.5), rgba(240, 128, 48, 0.5));
{% else %}
linear-gradient(90deg, #002f7a 0%, #002f7a 100%);
{% endif %}
{% else %}
linear-gradient(90deg, #002f7a 0%, #002f7a 100%);
{% endif %}
border: none !important;
}
ha-state-icon {
{% if is_state(config.entity, 'off') %}
--card-mod-icon: mdi:heat-wave;
{% else %}
--card-mod-icon: mdi:heat-wave;
color: rgba(240, 128, 48, 1);
animation: clip 1.5s linear infinite;
{% endif %}
}
@keyframes clip {
0% { clip-path: inset(100% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:mushroom-light-card
entity: light.amalia_room_main
use_light_color: false
show_brightness_control: false
collapsible_controls: false
show_color_control: false
show_color_temp_control: false
name: Amelia's Main
layout: horizontal
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states(config.entity) == 'on' %}
color: var(--text-color);
{% endif %}
}
- type: custom:mushroom-light-card
use_light_color: false
show_brightness_control: true
collapsible_controls: true
show_color_control: false
show_color_temp_control: false
entity: light.bedroom
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
{% if states(config.entity) == 'on' %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 15px #2c2c2c;
{% endif %}
}
ha-state-icon {
{% if states(config.entity) == 'on' %}
color: var(--text-color);
{% endif %}
}
- type: custom:mushroom-media-player-card
entity: media_player.home_speakers
media_controls:
- on_off
collapsible_controls: false
volume_controls:
- volume_set
show_volume_level: true
fill_container: false
use_media_info: false
tap_action:
action: call-service
service: script.ref_fm
target: {}
hold_action:
action: none
double_tap_action:
action: none
icon_type: none
secondary_info: state
primary_info: name
icon: mdi:radio
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
ha-card {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/RMF_FM_logotyp_2022.png/220px-RMF_FM_logotyp_2022.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
{% if is_state(config.entity, 'playing') or is_state(config.entity, 'idle') or is_state(config.entity, 'paused') or is_state(config.entity, 'buffering') %}
box-shadow: inset 5px 5px 15px #191919, inset -5px -5px 95px #2c2c2c;
border: none;
{% elif is_state(config.entity, 'off') %}
filter: grayscale(100%);
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 5px #191919;
{% endif %}
}
theme: mrjelly
cards: []
1 Like