How to set opacity for buttons on simple-thermostat card

Configuration Frontend
1

image
I am trying to make the buttons translucent on simple-thermostat-card but couldn’t get it to work.

Any help would be appreciated. Thanks

2

Nevermind, just got it working using below property. Thanks

–st-mode-background: rgba(0,0,0,0.3);

3

Can you share your code in full? can’t get it to work here

4

It is just placed under card mod but you can target each individual setting if you want

card_mod: 
 style: |
   ha-card{
    --heat_cool-color: red !important;
    --st-mode-background: rgba(0,0,0,0.3);
    }

Another method

card_mod: 
 style: |
   .modes{
    opacity: 10%;
    }

Mode color controls

card_mod: 
 style: |
  ha-card {
    --heat_cool-color: red !important;
    --st-mode-background: rgba(0,0,0,0.3);     
    --cool-color: blue;
    --heat-color: orange;
    --manual-color: #44739e;
    --off-color: grey;
    }
2 Likes
5 
type: picture-elements
image: /local/images/transparent2.png
elements:
  - type: custom:mini-graph-card
    name: Indoor Temp
    align_header: left
    align_icon: left
    entities:
      - entity: sensor.wyze_thermostat_temperature
        name: Temperature
        show_graph: true
        show_state: false
        show_points: false
      - color: gray
        entity: sensor.nightstate
        name: Night
        show_legend: false
        show_line: false
        show_points: false
        y_axis: secondary
    color_thresholds:
      - value: 24
        color: "#eb4d54"
      - value: 21
        color: "#1db954"
      - value: 18
        color: "#3a8df7"
    font_size: 80
    hours_to_show: 48
    hour24: true
    icon: mdi:thermometer
    points_per_hour: 0.5
    show:
      fill: fade
    card_mod:
      style: |
        .name {
          font-size: var(--ha-card-header-font-size, 14px);
          letter-spacing: -0.012em;
          display: block;
          font-weight: 0;
        }
        .header {
          visibility: hidden;
        }
        .states {
          visibility: hidden;
        }
        ha-card {
          background: transparent;
          box-shadow: none;
          border: none;
        }
    style:
      top: 15%
      left: 50%
      width: 100%
      height: 70%
  - type: custom:simple-thermostat
    entity: climate.wyze_thermostat
    step_size: 0.1
    layout:
      step: row
      mode:
        names: false
        icons: true
        headings: false
    hide:
      state: true
      temperature: true
    header:
      name: Indoor Temperature
      icon: mdi:thermometer
    control:
      hvac:
        _name: Operation
        "off":
          name: "Off"
        heat:
          name: Heat
        cool:
          name: Cool
        auto:
          name: Auto
    setpoints:
      current_temperature: null
      target_temp_low:
        hide: true
      target_temp_high:
        hide: true
    sensors:
      - entity: sensor.wyze_thermostat_status
        name: State
      - entity: sensor.wyze_thermostat_humidity
        name: Humidity
      - entity: sensor.wyze_thermostat_temp_min
        name: Min
      - entity: sensor.wyze_thermostat_temp_max
        name: Max
    card_mod:
      style: |
        ha-card { 
          --st-font-size-title: 20px;
          --st-font-size-xl: 52px;
          --st-font-size-m: 32px;
          --st-font-size-sensors: 15px;
          --st-mode-background: rgba(0,0,0,0.3);
          #background: rgba(0,0,0,0.5);
          position: absolute;
          #top: 0;
          #left: 50;
          width: 100%;
          height: 600px;  # Set explicit height
          #background: rgba(255, 255, 255, 0.8);
          z-index: 2;
          background: transparent;
          #background: rgba(76, 175, 80, 0.6);
          box-shadow: none;
        }  
    style:
      top: 0%
      left: 50%
      width: 100%
grid_options:
  rows: 4
  columns: 12
1 Like