Custom fan card for govee fans using govee2mqtt - styling help

Configuration Frontend
1

Hi, fairly new to homeassistant and managed to put together a card for my govee fan. Govee Fans added via govee2mqtt show up as separate entity and I have been able to add a fan card.

I put together a simple custom card for basic controls I care for but have not been able to format it to my liking. I want to achieve following

  1. Remove borders and customize margins
  2. Change card width such that oscilation toggle shows up in top right
  3. Format Fan Speed and have slider take up rest of the empty space in between

Appreciate the help!

image

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Fan
        secondary: "{{states('switch.living_room_power_switch')|title}}"
        icon: mdi:fan
        tap_action:
          action: perform-action
          perform_action: switch.toggle
          target:
            entity_id: switch.living_room_power_switch
        icon_color: ""
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                {% if is_state('switch.living_room_power_switch', 'on') %}
                  --shape-animation: spin 1s linear infinite;
                  --card-mod-icon: mdi:fan;
                  --card-mod-icon-color:#4fb7d1;  
                {% else %}
                  --shape-animation: spin 3s ease-out;
                  --card-mod-icon: mdi:fan-off; 
                  --card-mod-icon-color:grey;       
                {% endif %}
                display: flex;
              },
      - type: custom:mushroom-template-card
        icon: mdi:arrow-oscillating
        entity: switch.living_room_oscillation_toggle
        layout: horizontal
        primary_info: none
        icon_type: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                {% if is_state('switch.living_room_oscillation_toggle', 'on') %}
                  --shape-animation: spin 3s;
                  --card-mod-icon: mdi:autorenew;
                  --card-mod-icon-color:#4fb7d1;
                {% else %}
                  --card-mod-icon: mdi:autorenew-off; 
                  --card-mod-icon-color:grey;
                  --shape-animation: spin 3s ease-out;
                {% endif %}
                display: flex;
              },
  - type: custom:mushroom-number-card
    entity: number.living_room_fanspeed
    primary_info: none
    icon_type: none
    layout: horizontal
2

Take a look at these threads here and here

type: custom:stack-in-card
mode: vertical
card_mod:
    style: |
     ha-card {
      border: none !important;
       }
cards:
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
     style: |
      ha-card {
      border: none !important;
       }
    cards:
      - type: custom:mushroom-template-card
        primary: Fan
        secondary: "{{states('switch.kitchen_lights')|title}}"
        icon: >
          {{'mdi:fan' if is_state('switch.kitchen_lights', 'on') else
          'mdi:fan-off'}}
        tap_action:
          action: perform-action
          perform_action: switch.toggle
          target:
            entity_id: switch.kitchen_lights
        icon_color: |
          {{ 'red' if is_state('switch.kitchen_lights', 'on') else 'grey' }}
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                {% if is_state('switch.kitchen_lights', 'on') %}
                  --shape-animation: spin 1s linear infinite;
                {% else %}
                  --shape-animation: spin 3s ease-out;
                {% endif %}
            .: |
             ha-card{
              border: none !important;
               }
                
      - type: custom:mushroom-template-card
        primary: Fan
        secondary: "{{states('switch.kitchen_lights')|title}}"
        icon: >
          {{'mdi:fan' if is_state('switch.kitchen_lights', 'on') else
          'mdi:fan-off'}}
        tap_action:
          action: perform-action
          perform_action: switch.toggle
          target:
            entity_id: switch.kitchen_lights
        icon_color: |
          {{ 'red' if is_state('switch.kitchen_lights', 'on') else 'grey' }}
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                {% if is_state('switch.kitchen_lights', 'on') %}
                  --shape-animation: spin 1s linear infinite;
                {% else %}
                  --shape-animation: spin 3s ease-out;
                {% endif %}
            .: |
             ha-card{
              border: none !important;
               }
                
  - type: custom:mushroom-number-card
    entity: number.living_room_fanspeed
    primary_info: none
    icon_type: none
    layout: horizontal
    card_mod:
     style: |
      ha-card {
      border: none !important;
       }
3

Thank you! Will read through the links you’ve provided.