Lovelace Soft UI - Simple and Clean Lovelace Configuration

[KNLMN]

Sure no problem

    - cards:
        - content: |
            # Remove these borders
          style:
            .: |
              ha-card {
                --ha-card-background: none !important;
                box-shadow: none !important;
                height: 20px;
              }
            ha-markdown:
              $: |
                h1 {
                  font-size: 20px;
                  font-weight: light;
                  font-family: Helvetica;
                  letter-spacing: '-0.01em';
                }
          type: markdown
        - content: |
            # Please
          style:
            .: |
              ha-card {
               --paper-card-background-color: none !important;
                box-shadow: none !important;
                height: 50px;
              }  
            ha-markdown:
            $: |
              h1 {
                font-size: 15px;
                font-weight: thin;
                font-family: Helvetica;
                letter-spacing: '-0.01em';
              }
          type: markdown    
      type: vertical-stack    

[KTibow (Kendell R)]

Odd. Did that fix it or do you still have problems?

[KNLMN]

Still having problems, this is the part in my theme that says about markdown cards. Looks like it’s been set up good right? (it’s the light-soft-ui):

      ha-card.type-markdown {
        box-shadow: none;
      }
      ha-card.type-markdown > ha-markdown {
        padding: 8px;
      }
      ha-card:not(.type-markdown) {
        background-color: var(--primary-background-color);
        border-radius: var(--ha-card-border-radius);
      }
      ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) {
        margin: 20px 6px;
        box-shadow: var(--ha-card-box-shadow);

[KTibow (Kendell R)]

Try adding an !important in the theme under : none;

[KNLMN]

Sadly, no succes.

      }
      ha-card.type-markdown {
        box-shadow: none !important;
      }

[KTibow (Kendell R)]

Hmm… That’s odd. I don’t get them, here’s my code:

content: >
  # <center>{% if is_state('binary_sensor.evening', 'on') %} Good evening {%
  elif is_state('binary_sensor.night', 'on') %} Have a good night {% elif
  is_state('binary_sensor.morning', 'on') %} Good morning {% endif %} </center>
style:
  .: |
    ha-card {
      margin: 0 0 15px 0;
    }
  ha-markdown:
    $: |
      h1 {
        font-size: 2.5em;
        font-family: Quicksand, sans-serif;
        font-weight: 1000;
      }
type: markdown

By the way, per @N-L1’s suggestions, I created a new topic:

So, I made some Soft UI themes

2022 UPDATE: The current theme is GitHub - KTibow/lovelace-soft-theme: A new, simple soft theme for Home Assistant., I merged the dark and light ones together. However I’m not currently using it myself. Hey guys. I’ve been using Soft UI for a while now. I used custom themes, namely the Google Light Theme and the Dark Purple Theme by JuanMTech. I changed some stuff here and there, and only kept the changes inside my Home Assistant instance. But now that card-mod themes are out, I’ve added a l…

[tc23]

@hawk is this what you did for your climate buttons? Would you mind sharing the config for that button?

[KingRichard (Richard T)]

Read the code… but none work on my end. Unsure how to implemented. Follow the guide

[KTibow (Kendell R)]

Did you install browser-mod with HACS, restarted, added to configuration.yaml, restarted, and reloaded page?

[KingRichard (Richard T)]

yes I did…

[KTibow (Kendell R)]

You should ask on the browser-mod forum thread then, not here.

[weaverprojects]

got this Font Size Problem. how can I fix this?

[N-l1]

Hi @weaverprojects, seems like you are using an older version of the code. Try the newer versions on GitHub.

[Simul8or]

Can anyone help me put this in a vertical stack? I would just like 3 of the same buttons in a stack. I can go and change the names of the other buttons later. Thanks!

cards:
  - entity: light.example
    icon: 'mdi:lightbulb-multiple'
    show_icon: true
    show_name: false
    state:
      - value: 'on'
        styles:
          card:
            - box-shadow: |
                [[[ return states['sun.sun'].state == 'below_horizon'
                  ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                  : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                ]]]
          icon:
            - color: var(--paper-item-icon-active-color)
    styles:
      card:
        - width: 60px
        - height: 60px
        - margin: 10px
        - border-radius: 15px
        - box-shadow: |
            [[[ return states['sun.sun'].state == 'below_horizon'
              ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
              : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
            ]]]
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    tap_action:
      action: navigate
      navigation_path: /lovelace-home/lights
    type: 'custom:button-card'
  - cards:
      - content: |
          # Lights
        style:
          .: |
            ha-card {
              --ha-card-background: none !important;
              box-shadow: none !important;
              height: 20px;
              margin-top: 15px;
            }
          ha-markdown:
            $: |
              h1 {
                font-size: 22px;
                font-weight: bold;
                font-family: Helvetica;
                letter-spacing: '-0.01em';
              }
        type: markdown
    type: vertical-stack
type: horizontal-stack

[KTibow (Kendell R)]

cards:
  - cards:
      - entity: light.example
        icon: 'mdi:lightbulb-multiple'
        show_icon: true
        show_name: false
        state:
          - value: 'on'
            styles:
              card:
                - box-shadow: |
                    [[[ return states['sun.sun'].state == 'below_horizon'
                      ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                      : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                    ]]]
              icon:
                - color: var(--paper-item-icon-active-color)
        styles:
          card:
            - width: 60px
            - height: 60px
            - margin: 10px
            - border-radius: 15px
            - box-shadow: |
                [[[ return states['sun.sun'].state == 'below_horizon'
                  ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
                  : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
                ]]]
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: navigate
          navigation_path: /lovelace-home/lights
        type: 'custom:button-card'
      - cards:
          - content: |
              # Lights
            style:
              .: |
                ha-card {
                  --ha-card-background: none !important;
                  box-shadow: none !important;
                  height: 20px;
                  margin-top: 15px;
                }
              ha-markdown:
                $: |
                  h1 {
                    font-size: 22px;
                    font-weight: bold;
                    font-family: Helvetica;
                    letter-spacing: '-0.01em';
                  }
            type: markdown
        type: vertical-stack
    type: horizontal-stack
  - cards:
      - entity: light.example
        icon: 'mdi:lightbulb-multiple'
        show_icon: true
        show_name: false
        state:
          - value: 'on'
            styles:
              card:
                - box-shadow: |
                    [[[ return states['sun.sun'].state == 'below_horizon'
                      ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                      : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                    ]]]
              icon:
                - color: var(--paper-item-icon-active-color)
        styles:
          card:
            - width: 60px
            - height: 60px
            - margin: 10px
            - border-radius: 15px
            - box-shadow: |
                [[[ return states['sun.sun'].state == 'below_horizon'
                  ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
                  : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
                ]]]
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: navigate
          navigation_path: /lovelace-home/lights
        type: 'custom:button-card'
      - cards:
          - content: |
              # Lights
            style:
              .: |
                ha-card {
                  --ha-card-background: none !important;
                  box-shadow: none !important;
                  height: 20px;
                  margin-top: 15px;
                }
              ha-markdown:
                $: |
                  h1 {
                    font-size: 22px;
                    font-weight: bold;
                    font-family: Helvetica;
                    letter-spacing: '-0.01em';
                  }
            type: markdown
        type: vertical-stack
    type: horizontal-stack
  - cards:
      - entity: light.example
        icon: 'mdi:lightbulb-multiple'
        show_icon: true
        show_name: false
        state:
          - value: 'on'
            styles:
              card:
                - box-shadow: |
                    [[[ return states['sun.sun'].state == 'below_horizon'
                      ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                      : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                    ]]]
              icon:
                - color: var(--paper-item-icon-active-color)
        styles:
          card:
            - width: 60px
            - height: 60px
            - margin: 10px
            - border-radius: 15px
            - box-shadow: |
                [[[ return states['sun.sun'].state == 'below_horizon'
                  ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
                  : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
                ]]]
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: navigate
          navigation_path: /lovelace-home/lights
        type: 'custom:button-card'
      - cards:
          - content: |
              # Lights
            style:
              .: |
                ha-card {
                  --ha-card-background: none !important;
                  box-shadow: none !important;
                  height: 20px;
                  margin-top: 15px;
                }
              ha-markdown:
                $: |
                  h1 {
                    font-size: 22px;
                    font-weight: bold;
                    font-family: Helvetica;
                    letter-spacing: '-0.01em';
                  }
            type: markdown
        type: vertical-stack
    type: horizontal-stack
type: vertical-stack

Just create a new vertical stack next time, hit plus, choose manual, and paste the thing in. Repeat as needed.

[Simul8or]

@KTibow

cards:
  - cards:
      - entity: light.example
        icon: 'mdi:lightbulb-multiple'
        show_icon: true
        show_name: false
        state:
          - value: 'on'
            styles:
              card:
                - box-shadow: |
                    [[[ return states['sun.sun'].state == 'below_horizon'
                      ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                      : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                    ]]]
              icon:
                - color: var(--paper-item-icon-active-color)
        styles:
          card:
            - width: 60px
            - height: 60px
            - margin: 10px
            - border-radius: 15px
            - box-shadow: |
                [[[ return states['sun.sun'].state == 'below_horizon'
                  ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
                  : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
                ]]]
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: navigate
          navigation_path: /lovelace-home/lights
        type: 'custom:button-card'
      - cards:
          - content: |
              # Lights
            style:
              .: |
                ha-card {
                  --ha-card-background: none !important;
                  box-shadow: none !important;
                  height: 20px;
                  margin-top: 15px;
                }
              ha-markdown:
                $: |
                  h1 {
                    font-size: 22px;
                    font-weight: bold;
                    font-family: Helvetica;
                    letter-spacing: '-0.01em';
                  }
            type: markdown
        type: vertical-stack
    type: horizontal-stack
  - cards:
      - entity: light.example
        icon: 'mdi:lightbulb-multiple'
        show_icon: true
        show_name: false
        state:
          - value: 'on'
            styles:
              card:
                - box-shadow: |
                    [[[ return states['sun.sun'].state == 'below_horizon'
                      ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                      : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                    ]]]
              icon:
                - color: var(--paper-item-icon-active-color)
        styles:
          card:
            - width: 60px
            - height: 60px
            - margin: 10px
            - border-radius: 15px
            - box-shadow: |
                [[[ return states['sun.sun'].state == 'below_horizon'
                  ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
                  : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
                ]]]
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: navigate
          navigation_path: /lovelace-home/lights
        type: 'custom:button-card'
      - cards:
          - content: |
              # Lights
            style:
              .: |
                ha-card {
                  --ha-card-background: none !important;
                  box-shadow: none !important;
                  height: 20px;
                  margin-top: 15px;
                }
              ha-markdown:
                $: |
                  h1 {
                    font-size: 22px;
                    font-weight: bold;
                    font-family: Helvetica;
                    letter-spacing: '-0.01em';
                  }
            type: markdown
        type: vertical-stack
    type: horizontal-stack
  - cards:
      - entity: light.example
        icon: 'mdi:lightbulb-multiple'
        show_icon: true
        show_name: false
        state:
          - value: 'on'
            styles:
              card:
                - box-shadow: |
                    [[[ return states['sun.sun'].state == 'below_horizon'
                      ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                      : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                    ]]]
              icon:
                - color: var(--paper-item-icon-active-color)
        styles:
          card:
            - width: 60px
            - height: 60px
            - margin: 10px
            - border-radius: 15px
            - box-shadow: |
                [[[ return states['sun.sun'].state == 'below_horizon'
                  ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
                  : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
                ]]]
            - background-color: var(--primary-background-color)
          icon:
            - color: var(--primary-text-color)
        tap_action:
          action: navigate
          navigation_path: /lovelace-home/lights
        type: 'custom:button-card'
      - cards:
          - content: |
              # Lights
            style:
              .: |
                ha-card {
                  --ha-card-background: none !important;
                  box-shadow: none !important;
                  height: 20px;
                  margin-top: 15px;
                }
              ha-markdown:
                $: |
                  h1 {
                    font-size: 22px;
                    font-weight: bold;
                    font-family: Helvetica;
                    letter-spacing: '-0.01em';
                  }
            type: markdown
        type: vertical-stack
    type: horizontal-stack
type: vertical-stack

perfect…thanks!

[Eoin]

Just starting to play with Soft UI, on a mobile device it looks very sexy. Great work, N-l1!

Wondering if anyone has an example of the code they are using for the remote card popup. I can get the card working if I add it directly on lovelace, but cannot get the formatting correct when adding it through browser-mod.

I do have other popups working so it’s just a problem with my formatting.

[KTibow (Kendell R)]

Can you post your config?

[Eoin]

You asked for it!

The popup for ‘light.master_bedroom_pendants’ is working as expected. The remote card which is using the ‘media_player.roku_streaming_stick’ entity produces the following:

popup_cards:
  media_player.roku_streaming_stick:
    - cards:
        - icon: 'mdi:power'
          show_icon: true
          show_name: false
          style: |
            ha-card {
              box-shadow:
                {% if is_state('sun.sun', 'above_horizon') %}
                  -5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
                {% elif is_state('sun.sun', 'below_horizon') %}
                  -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
                {% endif %}
            }
          styles:
            card:
              - width: 60px
              - height: 60px
              - margin: 10px 10px 10px 155px
              - border-radius: 100px
              - background-color: var(--primary-background-color)
            icon:
              - color: var(--primary-text-color)
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: power
              entity_id: remote.xiaomi
          type: 'custom:button-card'
      type: 'custom:hui-horizontal-stack-card'
    - cards:
        - entities:
            - cards:
                - icon: 'mdi:menu-up'
                  show_icon: true
                  show_name: false
                  size: 100%
                  styles:
                    card:
                      - margin-left: 69px
                      - box-shadow: none
                      - width: 50px
                      - height: 50px
                      - background-color: var(--primary-background-color)
                    icon:
                      - color: var(--primary-text-color)
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      command: up
                      entity_id: remote.xiaomi
                  type: 'custom:button-card'
              type: 'custom:hui-horizontal-stack-card'
            - cards:
                - icon: 'mdi:menu-left'
                  show_icon: true
                  show_name: false
                  size: 100%
                  styles:
                    card:
                      - margin-left: 11px
                      - box-shadow: none
                      - width: 50px
                      - height: 50px
                      - background-color: var(--primary-background-color)
                    icon:
                      - color: var(--primary-text-color)
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      command: left
                      entity_id: remote.xiaomi
                  type: 'custom:button-card'
                - name: OK
                  show_icon: false
                  show_name: true
                  style: |
                    ha-card {
                      box-shadow:
                        {% if is_state('sun.sun', 'above_horizon') %}
                          -5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
                        {% elif is_state('sun.sun', 'below_horizon') %}
                          -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
                        {% endif %}
                    }
                  styles:
                    card:
                      - width: 50px
                      - height: 50px
                      - border-radius: 100px
                      - background-color: var(--primary-background-color)
                    name:
                      - font-size: 20px
                      - font-weight: bold
                      - font-family: Helvetica
                      - letter-spacing: '-0.01em'
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      command: enter
                      entity_id: remote.xiaomi
                  type: 'custom:button-card'
                - icon: 'mdi:menu-right'
                  show_icon: true
                  show_name: false
                  size: 100%
                  styles:
                    card:
                      - box-shadow: none
                      - width: 50px
                      - height: 50px
                      - background-color: var(--primary-background-color)
                    icon:
                      - color: var(--primary-text-color)
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      command: right
                      entity_id: remote.xiaomi
                  type: 'custom:button-card'
              type: 'custom:hui-horizontal-stack-card'
            - cards:
                - icon: 'mdi:menu-down'
                  show_icon: true
                  show_name: false
                  size: 100%
                  styles:
                    card:
                      - margin-left: 69px
                      - box-shadow: none
                      - width: 50px
                      - height: 50px
                      - background-color: var(--primary-background-color)
                    icon:
                      - color: var(--primary-text-color)
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      command: down
                      entity_id: remote.xiaomi
                  type: 'custom:button-card'
              type: 'custom:hui-horizontal-stack-card'
          show_header_toggle: false
          style: |
            ha-card {
              box-shadow:
                {% if is_state('sun.sun', 'above_horizon') %}
                  inset -3px -3px 5px rgba(255, 255, 255, .65), inset 3px 3px 5px rgba(0, 0, 0, .035);
                {% elif is_state('sun.sun', 'below_horizon') %}
                  inset -3px -3px 5px rgba(50, 50, 50, .5), inset 3px 3px 5px rgba(0, 0, 0, .3);
                {% endif %}
              border-radius: 30px;
              background-color: var(--primary-background-color)
            }
          type: 'custom:hui-entities-card'
      type: 'custom:hui-horizontal-stack-card'
    - show_icon: false
      show_name: false
      style: |
        ha-card {
          --ha-card-background: none !important;
          box-shadow: none !important;
        }
      styles:
        card:
          - width: 10px
          - height: 10px
      type: 'custom:button-card'
    - cards:
        - entities:
            - cards:
                - icon: 'mdi:minus'
                  show_icon: true
                  show_name: false
                  size: 100%
                  styles:
                    card:
                      - margin-left: 30px
                      - box-shadow: none
                      - width: 30px
                      - height: 30px
                      - background-color: var(--primary-background-color)
                    icon:
                      - color: var(--primary-text-color)
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      command: volume_down_sony
                      entity_id: remote.xiaomi
                  type: 'custom:button-card'
                - name: VOL
                  show_icon: false
                  show_name: true
                  styles:
                    card:
                      - margin-left: 10px
                      - box-shadow: none
                      - width: 30px
                      - height: 30px
                      - border-radius: 100px
                      - background-color: var(--primary-background-color)
                    name:
                      - font-size: 13px
                      - font-weight: bold
                      - font-family: Helvetica
                      - letter-spacing: '-0.01em'
                  type: 'custom:button-card'
                - icon: 'mdi:plus'
                  show_icon: true
                  show_name: false
                  size: 100%
                  styles:
                    card:
                      - margin-left: 10px
                      - box-shadow: none
                      - width: 30px
                      - height: 30px
                      - background-color: var(--primary-background-color)
                    icon:
                      - color: var(--primary-text-color)
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      command: volume_up_sony
                      entity_id: remote.xiaomi
                  type: 'custom:button-card'
              type: 'custom:hui-horizontal-stack-card'
          show_header_toggle: false
          style: |
            ha-card {
              background-color: var(--primary-background-color);
              border-radius: 15px;
              box-shadow:
                {% if is_state('sun.sun', 'above_horizon') %}
                  -5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
                {% elif is_state('sun.sun', 'below_horizon') %}
                  -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
                {% endif %}
            }
          type: 'custom:hui-entities-card'
      type: 'custom:hui-horizontal-stack-card'
    - cards:
        - icon: 'mdi:home'
          show_icon: true
          show_name: false
          style: |
            ha-card {
              box-shadow:
                {% if is_state('sun.sun', 'above_horizon') %}
                  -5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
                {% elif is_state('sun.sun', 'below_horizon') %}
                  -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
                {% endif %}
            }
          styles:
            card:
              - margin-top: 10px
              - margin-left: 5px
              - width: 60px
              - height: 60px
              - border-radius: 15px
              - background-color: var(--primary-background-color)
            icon:
              - color: var(--primary-text-color)
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: home
              entity_id: remote.xiaomi
          type: 'custom:button-card'
        - icon: 'mdi:keyboard-return'
          show_icon: true
          show_name: false
          style: |
            ha-card {
              box-shadow:
                {% if is_state('sun.sun', 'above_horizon') %}
                  -5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
                {% elif is_state('sun.sun', 'below_horizon') %}
                  -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
                {% endif %}
            }
          styles:
            card:
              - margin-top: 10px
              - margin-left: 8px
              - width: 60px
              - height: 60px
              - border-radius: 15px
              - background-color: var(--primary-background-color)
            icon:
              - color: var(--primary-text-color)
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: return
              entity_id: remote.xiaomi
          type: 'custom:button-card'
        - icon: 'mdi:set-top-box'
          show_icon: true
          show_name: false
          style: |
            ha-card {
              box-shadow:
                {% if is_state('sun.sun', 'above_horizon') %}
                  -5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
                {% elif is_state('sun.sun', 'below_horizon') %}
                  -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
                {% endif %}
            }
          styles:
            card:
              - margin-top: 10px
              - margin-left: 8px
              - width: 60px
              - height: 60px
              - border-radius: 15px
              - background-color: var(--primary-background-color)
            icon:
              - color: var(--primary-text-color)
          tap_action:
            action: call-service
            service: script.turn_on
            service_data:
              entity_id: script.mi_box
          type: 'custom:button-card'
      type: 'custom:hui-horizontal-stack-card'
  show_header_toggle: false
  style: |
    ha-card {
      background-color: var(--primary-background-color);
      width: 250px;
      border-radius: 10px;
      margin: 10px auto;
      box-shadow:
        {% if is_state('sun.sun', 'above_horizon') %}
          -5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
        {% elif is_state('sun.sun', 'below_horizon') %}
          -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
        {% endif %}
    }
  type: entities
  light.master_bedroom_pendants:
    card:
      actions:
        - color: '#FF6666'
          name: Red
          service: light.turn_on
          service_data:
            entity_id: light.master_bedroom_pendants
            rgb_color:
              - 255
              - 102
              - 102
        - color: '#FFFFFF'
          name: White
          service: light.turn_on
          service_data:
            entity_id: light.master_bedroom_pendants
            brightness: 204
            color_temp: 285
        - color: '#FFCC99'
          name: Peach
          service: light.turn_on
          service_data:
            entity_id: light.master_bedroom_pendants
            rgb_color:
              - 255
              - 204
              - 153
        - color: '#CCFFCC'
          name: Green
          service: light.turn_on
          service_data:
            entity_id: light.master_bedroom_pendants
            rgb_color:
              - 204
              - 255
              - 204
      actionsInARow: 2
      brightnessHeight: 400px
      brightnessWidth: 150px
      entity: light.master_bedroom_pendants
      icon: 'mdi:globe-light'
      switchHeight: 400px
      switchWidth: 150px
      type: 'custom:light-popup-card'
    style:
      $: |
        .mdc-dialog .mdc-dialog__container {
          width: 100%;
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          width:100%;
          box-shadow:none;
        }
      .: |
        :host {
          --mdc-theme-surface: rgba(0,0,0,0);
          --secondary-background-color: rgba(0,0,0,0);
          --ha-card-background: rgba(0,0,0,0);
          --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
          --mdc-dialog-min-height: 100%;
          --mdc-dialog-min-width: 100%;
          --mdc-dialog-max-width: 100%;
        }
        mwc-icon-button {
          color: #FFF;
        }
    title: Light

[KTibow (Kendell R)]

Maybe you should change

popup_cards:
  media_player.roku_streaming_stick:
    - cards:

to

popup_cards:
  media_player.roku_streaming_stick:
    type: vertical-stack
    cards:
    - cards:

By the way, it looks like you’re using the light shadow for the dark theme.