Fix area card CSS

Chris-V · Jul 15, 2024 · 78269e1 · 78269e1
1 parent 8828bb5
commit 78269e1
Show file tree

Hide file tree

Showing 19 changed files with 268 additions and 232 deletions.
diff --git a/dashboards/cards/alarm.yaml b/dashboards/cards/alarm.yaml
@@ -1,33 +1,34 @@
 type: entities
 title: Intrusions
 
-style:
-  .: |
-    .header {
-      position: absolute;
-      right: 0;
-      top: 0;
-      margin: 12px 12px 0 0;
-      --mdc-icon-size: 24px;
-    }
-  "hui-buttons-header-footer$": |
-    .divider {
-      display: none;
-    }
-    hui-buttons-base.header.header {
-      --padding-top: 0;
-    }
-  "hui-buttons-header-footer$hui-buttons-base$ha-chip$": |
-    .mdc-chip__icon {
-      margin-inline: 0 !important;
-    }
-  "hui-buttons-header-footer$hui-buttons-base$state-badge$": |
-    ha-icon[data-domain="lock"][data-state="unlocked"] {
-      color: var(--paper-item-icon-color) !important;
-    }
-    ha-icon[data-domain="lock"][data-state="locked"] {
-      color: var(--paper-item-icon-active-color) !important;
-    }
+card_mod:
+  style:
+    .: |
+      .header {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin: 12px 12px 0 0;
+        --mdc-icon-size: 24px;
+      }
+    "hui-buttons-header-footer$": |
+      .divider {
+        display: none;
+      }
+      hui-buttons-base.header.header {
+        --padding-top: 0;
+      }
+    "hui-buttons-header-footer$hui-buttons-base$ha-chip$": |
+      .mdc-chip__icon {
+        margin-inline: 0 !important;
+      }
+    "hui-buttons-header-footer$hui-buttons-base$state-badge$": |
+      ha-icon[data-domain="lock"][data-state="unlocked"] {
+        color: var(--paper-item-icon-color) !important;
+      }
+      ha-icon[data-domain="lock"][data-state="locked"] {
+        color: var(--paper-item-icon-active-color) !important;
+      }
 
 header:
   type: buttons
@@ -63,11 +64,12 @@ footer:
       label: "No"
     - value: "on"
       label: "Yes"
-  style: |
-    ha-card {
-      --ha-card-background: none;
-      border: 0;
-    }
+  card_mod:
+    style: |
+      ha-card {
+        --ha-card-background: none;
+        border: 0;
+      }
 
 entities:
   - type: "custom:button-card"

diff --git a/dashboards/cards/area.yaml.j2 b/dashboards/cards/area.yaml.j2
@@ -150,34 +150,35 @@
 
 type: picture-elements
 image: {{ image | default('/local/rooms/placeholder.webp') }}
-style: |
-  .element[class~=element] {
-    position: relative;
-    transform: none;
-  }
-  ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-  ::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.55);
-  }
-  ::-webkit-scrollbar-thumb {
-    background: rgba({{ color }}, 0.55);
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: rgba({{ color }}, 1);
-  }
+card_mod:
+  style: |
+    .element[class~=element] {
+      position: relative;
+      transform: none;
+    }
+    ::-webkit-scrollbar {
+      width: 3px;
+      height: 3px;
+    }
+    ::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.55);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba({{ color }}, 0.55);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba({{ color }}, 1);
+    }
 elements:
   - type: custom:container-element
     style:
       position: absolute
-      top: 0
-      right: 0
-      left: 0
-      bottom: 0
+      inset: 0
       display: flex
+      align-items: stretch
       flex-direction: column
+      flex-wrap: nowrap
+      justify-content: space-between
       "--secondary-text-color": "#DADADB"
       "--primary-text-color": "#DADADB"
       "--paper-item-icon-color": "#DADADB"
@@ -214,7 +215,7 @@ elements:
             display: flex
             flex-grow: 0
             flex-shrink: 0
-            padding: 0 10px
+            width: "100%"
             color: "#D3D3D3"
             font-size: 1.6em
             font-weight: 500
@@ -297,9 +298,10 @@ elements:
             cards:
               - type: entities
                 show_header_toggle: false
-                style: |
-                  ha-card .card-content { padding: 0; }
-                  ha-card #states > * { margin: 0; }
+                card_mod:
+                  style: |
+                    ha-card .card-content { padding: 0; }
+                    ha-card #states > * { margin: 0; }
                 entities:
                   - entity: input_select.{{ climate.room_key }}_thermostat_mode
                     name: Mode
@@ -310,15 +312,16 @@ elements:
 
               - type: custom:simple-thermostat
                 entity: climate.{{ climate.room_key }}_thermostat
-                style: |
-                  ha-card {
-                    height: 100%;
-                    width: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    --st-spacing: 0;
-                  }
+                card_mod:
+                  style: |
+                    ha-card {
+                      height: 100%;
+                      width: 100%;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      --st-spacing: 0;
+                    }
                 control: []
                 decimals: 1
                 header: false

diff --git a/dashboards/cards/batteries.yaml b/dashboards/cards/batteries.yaml
@@ -1,10 +1,11 @@
 type: entities
 title: Batteries
 show_header_toggle: false
-style: !template
-  file: ../styles/inset-icon.css.j2
-  variables:
-    svg_path: "M16,10H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z"
+card_mod:
+  style: !template
+    file: ../styles/inset-icon.css.j2
+    variables:
+      svg_path: "M16,10H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z"
 entities:
   - entity: binary_sensor.all_batteries
     name: Status

diff --git a/dashboards/cards/bolt-ev.yaml b/dashboards/cards/bolt-ev.yaml
@@ -1,10 +1,11 @@
 type: picture-elements
 image: /local/car/bolt_ev_tile.png
-style: |
-  .element[class~=element] {
-    position: relative;
-    transform: none;
-  }
+card_mod:
+  style: |
+    .element[class~=element] {
+      position: relative;
+      transform: none;
+    }
 elements:
   - type: custom:container-element
     style:

diff --git a/dashboards/cards/climate-overview.yaml b/dashboards/cards/climate-overview.yaml
@@ -38,10 +38,11 @@ cards:
           service: script.restore_climate_auto_mode
 
   - type: entities
-    style: !template
-      file: ../styles/inset-icon.css.j2
-      variables:
-        svg_path: "M12 3L2 12H5V20H19V12H22L12 3M12 8A1 1 0 0 1 13 9V14.27A2 2 0 0 1 14 16A2 2 0 0 1 12 18A2 2 0 0 1 10 16A2 2 0 0 1 11 14.27V9A1 1 0 0 1 12 8Z"
+    card_mod:
+      style: !template
+        file: ../styles/inset-icon.css.j2
+        variables:
+          svg_path: "M12 3L2 12H5V20H19V12H22L12 3M12 8A1 1 0 0 1 13 9V14.27A2 2 0 0 1 14 16A2 2 0 0 1 12 18A2 2 0 0 1 10 16A2 2 0 0 1 11 14.27V9A1 1 0 0 1 12 8Z"
     entities:
       - input_number.climate_override_temperature
       - input_select.climate_override_location

diff --git a/dashboards/cards/guests.yaml b/dashboards/cards/guests.yaml
@@ -1,10 +1,11 @@
 type: entities
 show_header_toggle: false
-style: !template
-  file: ../styles/inset-icon.css.j2
-  variables:
-    background_size: "contain"
-    svg_path: "M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+card_mod:
+  style: !template
+    file: ../styles/inset-icon.css.j2
+    variables:
+      background_size: "contain"
+      svg_path: "M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
 
 header:
   type: custom:button-card
@@ -46,8 +47,9 @@ entities:
       type: glance
       show_state: false
       theme: blank
-      style: |
-        ha-card {
-          margin: 0;
-          border-top: 1px solid var(--secondary-text-color);
-        }
+      card_mod:
+        style: |
+          ha-card {
+            margin: 0;
+            border-top: 1px solid var(--secondary-text-color);
+          }
diff --git a/dashboards/cards/house-feed.yaml b/dashboards/cards/house-feed.yaml
@@ -3,12 +3,13 @@ card:
   type: logbook
   title: House feed
   hours_to_show: 24
-  style: !template
-    file: ../styles/inset-icon.css.j2
-    variables:
-      background_size: "contain"
-      svg_path: "M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z"
-      css: ".content ha-logbook { height: 330px; }"
+  card_mod:
+    style: !template
+      file: ../styles/inset-icon.css.j2
+      variables:
+        background_size: "contain"
+        svg_path: "M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z"
+        css: ".content ha-logbook { height: 330px; }"
 filter:
   template: >-
     {# Using a custom expand because the built-in expand only works on `group.*` #}

diff --git a/dashboards/cards/livings-overview.yaml b/dashboards/cards/livings-overview.yaml
@@ -1,10 +1,11 @@
 type: picture-elements
 image: "/local/empty_tile.png"
-style: |
-  ha-card {
-    height: 188px
-    width: 100%
-  }
+card_mod:
+  style: |
+    ha-card {
+      height: 188px
+      width: 100%
+    }
 elements:
   - <<: &sensor_image_element_config
       type: image

diff --git a/dashboards/cards/person.yaml.j2 b/dashboards/cards/person.yaml.j2
@@ -1,10 +1,11 @@
 type: picture-elements
 image: "{{ image }}"
-style: |
-  .element[class~=element] {
-    position: relative;
-    transform: none;
-  }
+card_mod:
+  style: |
+    .element[class~=element] {
+      position: relative;
+      transform: none;
+    }
 elements:
   - type: custom:container-element
     style:
@@ -68,9 +69,10 @@ elements:
             entity_id: "{{ person_entity }}"
             content: "{{ "{{" }} time_since(states['{{ person_entity }}'].last_changed, 1) {{ "}}" }}"
             theme: blank
-            style: |
-              ha-markdown.markdown.no-header {
-                padding: 0;
-                font-size: 0.9rem;
-                color: #D3D3D3;
-              }
+            card_mod:
+              style: |
+                ha-markdown.markdown.no-header {
+                  padding: 0;
+                  font-size: 0.9rem;
+                  color: #D3D3D3;
+                }
diff --git a/dashboards/cards/plant.yaml.j2 b/dashboards/cards/plant.yaml.j2
@@ -10,19 +10,20 @@
 
 type: picture-elements
 image: "{{ image }}"
-style: |
-  .element[class~=element] {
-    transform: none;
-  }
-  .element button-card {
-    position: relative;
-    --ha-label-badge-title-font-size: 0;
-    --ha-label-badge-font-size: 1.2rem;
-    --label-badge-red: #363941;
-  }
-  .element button-card + button-card {
-      margin-left: 1em;
-  }
+card_mod:
+  style: |
+    .element[class~=element] {
+      transform: none;
+    }
+    .element button-card {
+      position: relative;
+      --ha-label-badge-title-font-size: 0;
+      --ha-label-badge-font-size: 1.2rem;
+      --label-badge-red: #363941;
+    }
+    .element button-card + button-card {
+        margin-left: 1em;
+    }
 elements:
   - type: custom:button-card
     color_type: label-card

diff --git a/dashboards/cards/server.yaml.j2 b/dashboards/cards/server.yaml.j2
@@ -7,10 +7,11 @@
 type: entities
 title: {{ name }}
 show_header_toggle: false
-style: !template
-  file: ../styles/inset-icon.css.j2
-  variables:
-    svg_path: "{{ icon_path | default('M4,1H20A1,1 0 0,1 21,2V6A1,1 0 0,1 20,7H4A1,1 0 0,1 3,6V2A1,1 0 0,1 4,1M4,9H20A1,1 0 0,1 21,10V14A1,1 0 0,1 20,15H4A1,1 0 0,1 3,14V10A1,1 0 0,1 4,9M4,17H20A1,1 0 0,1 21,18V22A1,1 0 0,1 20,23H4A1,1 0 0,1 3,22V18A1,1 0 0,1 4,17M9,5H10V3H9V5M9,13H10V11H9V13M9,21H10V19H9V21M5,3V5H7V3H5M5,11V13H7V11H5M5,19V21H7V19H5Z') }}"
+card_mod:
+  style: !template
+    file: ../styles/inset-icon.css.j2
+    variables:
+      svg_path: "{{ icon_path | default('M4,1H20A1,1 0 0,1 21,2V6A1,1 0 0,1 20,7H4A1,1 0 0,1 3,6V2A1,1 0 0,1 4,1M4,9H20A1,1 0 0,1 21,10V14A1,1 0 0,1 20,15H4A1,1 0 0,1 3,14V10A1,1 0 0,1 4,9M4,17H20A1,1 0 0,1 21,18V22A1,1 0 0,1 20,23H4A1,1 0 0,1 3,22V18A1,1 0 0,1 4,17M9,5H10V3H9V5M9,13H10V11H9V13M9,21H10V19H9V21M5,3V5H7V3H5M5,11V13H7V11H5M5,19V21H7V19H5Z') }}"
 entities:
   - type: custom:restriction-card
     row: true