How to combine two code sections?

Configuration Frontend
2

Here is a example of combining styles with .: | for the standard climate card, but it will easily convert to the bt card. The colors are different so you can identify the code that is associated with the field.

image
image906×788 30 KB

type: thermostat
entity: climate.living_room
card_mod:
  style:
    ha-state-control-climate-temperature:
      $: |
        .icon-button {padding: 10px;}
        .label ha-svg-icon  { color: red !important; }
        .target-button { color: red !important; }
        .label:nth-of-type(1) { color: yellow !important; }
        .label:nth-of-type(2) { color: cyan !important; }        
        .target-button:nth-of-type(1) { color: lime !important; }
        .target-button:nth-of-type(2) { color: blue !important; }
        .buttons ha-outlined-icon-button:nth-of-type(1) {
        --md-sys-color-outline:purple !important;}
        .buttons ha-outlined-icon-button:nth-of-type(2)
        {--md-sys-color-outline:lime !important; }
    ha-state-control-climate-temperature$:
      ha-control-circular-slider$: |
        .high {stroke: red !important; opacity: 1 !important; 
                }
        .low { stroke: blue !important;
               opacity: 1 !important; 
                }
        .arc { stroke-width: 10px !important;}
        .background {
                stroke: pink !important;
                opacity: 1 !important; 
                stroke-width: 10px !important;}
        .target-button { color: red !important; }
    .: |
      .title {
                font-size: 14px !important;
                color: cyan !important;
                text-align: left !important;
                background: #262626 !important;
                 }
      ha-card {
        background: black !important;
          }

Try to avoid cross posting…Dimitri makes a great point about understanding .: |

For a great CSS mod guide check out this