Share your Tablet/Desktop Dashboards

4 Likes

Any chance to have and study your code?

Here is mine. Based on Rounded.

4 Likes

My dashboard with the Star Trek theme.

9 Likes

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 :slight_smile:

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 :smiley:

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 :slight_smile:

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