How to set border-radius on Tile card Features

separate post for clarity, and because it is unexpectedly difficult…

trying to set a border-radius of my theme to the buttons on the humidifier, I can not immediately find a way to do so:

  - type: tile
    entity: humidifier.badkamer
    card_mod:
      style:

        hui-card-features $:
          hui-humidifier-toggle-card-feature $:
            ha-control-select$: |
              .container {
                border-radius: var(--ha-card-border-radius);
              }
              .option-on.option.selected {
                --control-select-button-border-radius: 0 !important;
              }
        hui-card-features $:
          hui-target-humidity-card-feature $:
            ha-control-slider$: |
              .container {
                --control-slider-border-radius: var(--ha-card-border-radius);
              }
              .slider .slider-track-bar {
                border-radius: var(--ha-card-border-radius) !important;
              }

works almost perfectly, except for the option buttons
if I set the border-radius on the element in Inspector, it does kick in, but somehow my card-mod skills leave me here.

and upon reloading even the container fall back to its default 10px now… so not reliable after all

I did manage to pull it off on several other tiles

carefully watching my Climate tile, I can copy this:

  - type: tile
    entity: humidifier.badkamer
    card_mod:
      style:

        hui-card-features $:
          hui-humidifier-toggle-card-feature $:
            ha-control-select$: |
              .container {
                --control-select-border-radius: var(--ha-card-border-radius);
                --control-select-button-border-radius: var(--ha-card-border-radius);
              }

          hui-target-humidity-card-feature $:
            ha-control-slider$: |
              .container {
                --control-slider-border-radius: var(--ha-card-border-radius);
              }
              .slider .slider-track-bar {
                border-radius: var(--ha-card-border-radius) !important;
              }

and bingo:

Ive found card_mods for the type: tile cards on the domains I use, and list them below so hopefully someone can use them. I’ve left some commented code I dont use, but which can be set if you might wish so. I might still give it a go to set the border-radius on the small track-bar handles inside

My mods are in a dedicated folder, so I can include them in the yaml dashboards like this:

    - type: tile
      card_mod: !include /config/dashboard/card_mods/tile_light.yaml
      entity: light.voordeur
      features:
        - type: light-brightness
        - type: light-color-temp
      state_content:
        - state
        - last-changed
        - brightness
        - color_temp_kelvin
Alarm control panel
# tile_alarm_control_panel
style:
  hui-card-features $:
    hui-alarm-modes-card-feature $:
      ha-control-select$: |
        .container {
          /*background: green;*/
          /*--control-select-background: green;*/
          --control-select-border-radius: var(--ha-card-border-radius);
          --control-select-button-border-radius: var(--ha-card-border-radius);
          /*--control-select-color: red;*/
          /*--control-select-selected-opacity: 0.5; # sets full button opacity */
          /*color: green; #for non selected control icons*/
        }
  .: |
    ha-card {
      --primary-text-color: var(--primary-color);
    }

Climate
# tile_climate
style:
  hui-card-features $ hui-target-temperature-card-feature $: |
    ha-control-number-buttons {
      /*color: green;*/
      {% set state = states(config.entity) %}
      --control-number-buttons-background-color:
        {{'skyblue' if not state =='off' else 'var(--no-power-color)'}};
      --control-number-buttons-border-radius: var(--ha-card-border-radius);
    }
  hui-card-features $ hui-climate-preset-modes-card-feature $: |
    ha-control-select {
      --control-select-background: skyblue;
     /*background: skyblue;*/
    }

  hui-card-features $:
    hui-climate-preset-modes-card-feature $:
      ha-control-select$: |
        .container {
          /*background: green;*/
          /*--control-select-background: green;*/
          --control-select-border-radius: var(--ha-card-border-radius);
          --control-select-button-border-radius: var(--ha-card-border-radius);
          /*--control-select-color: red;*/
          /*--control-select-selected-opacity: 0.5; # sets full button opacity */
          /*color: green; #for non selected control icons*/
        }
  .: |
    ha-card {
      --primary-text-color: var(--primary-color);
    }

Cover
# tile_cover
style:
  hui-card-features $:
    hui-cover-open-close-card-feature $:
        ha-control-button$: |
          .button {
            --control-button-border-radius: var(--ha-card-border-radius);
          }

    hui-cover-position-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-bar {
          border-radius: var(--ha-card-border-radius) !important;
        }

Fan (+animation)
# tile_fan animate
style:
  hui-card-features $:
    hui-fan-speed-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-bar {
          border-radius: var(--ha-card-border-radius) !important;
        }
        .slider {
        --control-slider-color:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int(0) %}
          {% if perc <= 15 %} lightblue
          {%- elif perc <= 33 %} lightskyblue
          {%- elif perc <= 67 %} dodgerblue
          {%- else  %} darkblue
          {%- endif %}
          {%- else %} var(--state-inactive-color)
          {%- endif %} !important;
        --control-slider-background:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int(0) %}
          {% if perc <= 15 %} lightblue
          {%- elif perc <= 33 %} lightskyblue
          {%- elif perc <= 67 %} dodgerblue
          {%- else  %} darkblue
          {%- endif %}
          {%- else %} var(--state-inactive-color)
          {%- endif %} !important;
        }
  .: |
    ha-tile-icon {
      --tile-color:
        {% if is_state(config.entity,'on') %}
        {% set perc = state_attr(config.entity,'percentage')|int(0) %}
        {% if perc <= 15 %} lightblue
        {%- elif perc <= 33 %} lightskyblue
        {%- elif perc <= 67 %} dodgerblue
        {%- else  %} darkblue
        {% endif %}
        {% else %} var(--state-inactive-color)
        {% endif %};
    }
    ha-state-icon {
      animation:
        {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int %}
          {% set base =
            'rotation infinite linear' %}
          {% if perc <= 15 %} 4s {{base}}
          {%- elif perc <= 33 %} 3s {{base}}
          {%- elif perc <= 67 %} 1.5s {{ base}}
          {%- else  %} 0.75s {{base}}
          {% endif %}
        {% else %} none
        {% endif %};
    }
    @keyframes rotation {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

Humidifier
# tile_humidifier
style:

  hui-card-features $:
    hui-humidifier-toggle-card-feature $:
      ha-control-select$: |
        .container {
          --control-select-border-radius: var(--ha-card-border-radius);
          --control-select-button-border-radius: var(--ha-card-border-radius);
        }

    hui-target-humidity-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-bar {
          border-radius: var(--ha-card-border-radius) !important;
        }

Input number
# tile_input_number
style:
  hui-card-features$:
    hui-numeric-input-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-bar {
          border-radius: var(--ha-card-border-radius) !important;
        }
    hui-numeric-input-card-feature$: |
      {% set vol = states(config.entity)|float(0) %}
      ha-control-slider {
        --control-slider-color:
          {% if vol == 0.0 %} gray
          {% elif vol <= 0.3 %} dodgerblue
          {% elif vol <= 0.6 %} green
          {% elif vol <= 0.8 %} orange
          {% else %} red
          {% endif %} !important;
        --control-slider-background:
          {% if vol == 0.0 %} gray
          {% elif vol <= 0.3 %} dodgerblue
          {% elif vol <= 0.6 %} green
          {% elif vol <= 0.8 %} orange
          {% else %} red
          {% endif %} !important;
      }
      ha-control-number-buttons {
        color: var(--primary-color);
        {% set state = states(config.entity) %}
        --control-number-buttons-background-color: var(--primary-color);
        --control-number-buttons-border-radius: var(--ha-card-border-radius);
      }

Light
# tile_light
style:
  hui-card-features $:
    hui-light-color-temp-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-cursor {
          border-radius: var(--ha-card-border-radius) !important;
        }
    hui-light-brightness-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-bar {
          border-radius: var(--ha-card-border-radius) !important;
        }

And this is with the border-radius also set on the handle track-bar inside (::after), which for me is the final finishing touch

Light with handle
# tile_light
style:
  hui-card-features $:
    hui-light-color-temp-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-cursor {
          border-radius: var(--ha-card-border-radius) !important;
        }
        .slider .slider-track-cursor::after {
          border-radius: var(--ha-card-border-radius) !important;
        }
    hui-light-brightness-card-feature $:
      ha-control-slider$: |
        .container {
          --control-slider-border-radius: var(--ha-card-border-radius);
        }
        .slider .slider-track-bar {
          border-radius: var(--ha-card-border-radius) !important;
        }
        .slider .slider-track-bar::after {
          border-radius: var(--ha-card-border-radius) !important;
        }

Update
# tile_update
style:
  hui-card-features $:
    hui-update-actions-card-feature $:
        ha-control-button$: |
          .button {
            --control-button-border-radius: var(--ha-card-border-radius);
          }

Scherm­afbeelding 2024-07-16 om 09.52.35

3 Likes