Merge pull request #1061 from basbruss/styling

Styling for popup selectors

custom_components/ui_lovelace_minimalist/lovelace/translations/cn.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "体积"
     ulm_popups_color: "顏色"
     ulm_radar: "雷达"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/cs.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Hlasitost"
     ulm_popups_color: "Barva"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/da.yaml

@@ -14,3 +14,4 @@ ulm_language_variables:
     ulm_volume: "Volumen"
     ulm_popups_color: "Farve"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/de.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Lautstärke"
     ulm_popups_color: "Farbe"
     ulm_radar: "Radar"
+    ulm_popup_total: "Gesamt"

custom_components/ui_lovelace_minimalist/lovelace/translations/en.yaml

@@ -14,3 +14,4 @@ ulm_language_variables:
     ulm_volume: "Volume"
     ulm_popups_color: "Color"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/es.yaml

@@ -14,3 +14,4 @@ ulm_language_variables:
     ulm_volume: "Volumen"
     ulm_popups_color: "Color"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/fi.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Äänenvoimakkuus"
     ulm_popups_color: "Väri"
     ulm_radar: "Tutka"
+    ulm_popup_total: "Yhteensä"

custom_components/ui_lovelace_minimalist/lovelace/translations/fr.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Volume"
     ulm_popups_color: "Couleur"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/it.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Volume"
     ulm_popups_color: "Colore"
     ulm_radar: "Radar"
+    ulm_popup_total: "Totale"

custom_components/ui_lovelace_minimalist/lovelace/translations/nl.yaml

@@ -14,3 +14,4 @@ ulm_language_variables:
     ulm_volume: "Volume"
     ulm_popups_color: "Kleur"
     ulm_radar: "Radar"
+    ulm_popup_total: "Totaal"

custom_components/ui_lovelace_minimalist/lovelace/translations/no.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Volume"
     ulm_popups_color: "Farge"
     ulm_radar: "Radar"
+    ulm_popup_total: "Totalt"

custom_components/ui_lovelace_minimalist/lovelace/translations/pl.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Objętość"
     ulm_popups_color: "Kolor"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/pt-BR.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Volume"
     ulm_popups_color: "Cor"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/pt.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Volume"
     ulm_popups_color: "Cor"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/ru.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Объем"
     ulm_popups_color: "Цвет"
     ulm_radar: "Pадар"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/sk.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Volume"
     ulm_popups_color: "Farba"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/sv.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Volym"
     ulm_popups_color: "Färg"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/translations/tr.yaml

@@ -11,3 +11,4 @@ ulm_language_variables:
     ulm_volume: "Cilt"
     ulm_popups_color: "Renk"
     ulm_radar: "Radar"
+    ulm_popup_total: "Total"

custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_layouts/popup_light_effect_row.yaml

@@ -1,27 +1,6 @@
 ---
 popup_light_effect_row:
-  show_icon: false
-  show_name: true
-  show_label: false
-  extra_styles: |
-    ha-card:hover {
-      background-color: var(--primary-background-color);
-    }
-  styles:
-    grid:
-      - grid-template-areas: "n"
-    card:
-      - padding: "2px 0px"
-      - height: "42px"
-      - border-radius: "10px"
-      - width: "40vh"
-    name:
-      - align-self: "center"
-      - justify-self: "start"
-      - font-weight: "bold"
-      - font-size: "14px"
-      - margin-left: "12px"
-      - margin-right: "12px"
+  template: "popup_row_layout"
   name: >
     [[[
       var name = entity.attributes.effect_list[variables.ulm_popup_light_effect_entity_idx];
@@ -32,7 +11,10 @@ popup_light_effect_row:
       value: "[[[ return entity.attributes.effect == entity.attributes.effect_list[variables.ulm_popup_light_effect_entity_idx]; ]]]"
       styles:
         card:
-          - background-color: "rgba(var(--color-theme),0.2)"
+          - background-color: "rgba(var(--color-blue),0.1)"
+          - border: "none"
+        name:
+          - color: "rgba(var(--color-blue),1)"
   tap_action:
     action: "call-service"
     service: "light.turn_on"

custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_layouts/popup_light_palette_row.yaml

@@ -1,27 +1,6 @@
 ---
 popup_light_palette_row:
-  show_icon: false
-  show_name: true
-  show_label: false
-  extra_styles: |
-    ha-card:hover {
-      background-color: var(--primary-background-color);
-    }
-  styles:
-    grid:
-      - grid-template-areas: "n"
-    card:
-      - padding: "2px 0px"
-      - height: "42px"
-      - border-radius: "10px"
-      - width: "40vh"
-    name:
-      - align-self: "center"
-      - justify-self: "start"
-      - font-weight: "bold"
-      - font-size: "14px"
-      - margin-left: "12px"
-      - margin-right: "12px"
+  template: "popup_row_layout"
   name: >
     [[[
       var name = entity.attributes.options[variables.ulm_popup_light_palette_entity_idx];
@@ -32,7 +11,10 @@ popup_light_palette_row:
       value: "[[[ return entity.state == entity.attributes.options[variables.ulm_popup_light_palette_entity_idx]; ]]]"
       styles:
         card:
-          - background-color: "rgba(var(--color-theme),0.2)"
+          - background-color: "rgba(var(--color-blue),0.1)"
+          - border: "none"
+        name:
+          - color: "rgba(var(--color-blue),1)"
   tap_action:
     action: "call-service"
     service: "select.select_option"

custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_layouts/popup_media_player_row.yaml

@@ -1,27 +1,6 @@
 ---
 popup_media_player_row:
-  show_icon: false
-  show_name: true
-  show_label: false
-  extra_styles: |
-    ha-card:hover {
-      background-color: var(--primary-background-color);
-    }
-  styles:
-    grid:
-      - grid-template-areas: "n"
-    card:
-      - padding: "2px 0px"
-      - height: "42px"
-      - border-radius: "10px"
-      - width: "40vh"
-    name:
-      - align-self: "center"
-      - justify-self: "start"
-      - font-weight: "bold"
-      - font-size: "14px"
-      - margin-left: "12px"
-      - margin-right: "12px"
+  template: "popup_row_layout"
   name: >
     [[[
       var name = entity.attributes.source_list[variables.ulm_popup_media_entity_idx];
@@ -32,7 +11,10 @@ popup_media_player_row:
       value: "[[[ return entity.attributes.source == entity.attributes.source_list[variables.ulm_popup_media_entity_idx]; ]]]"
       styles:
         card:
-          - background-color: "rgba(var(--color-theme),0.2)"
+          - background-color: "rgba(var(--color-blue),0.1)"
+          - border: "none"
+        name:
+          - color: "rgba(var(--color-blue),1)"
   tap_action:
     action: "call-service"
     service: "media_player.select_source"

custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_layouts/popup_row_layout.yaml

@@ -0,0 +1,25 @@
+---
+popup_row_layout:
+  show_icon: false
+  show_name: true
+  show_label: false
+  extra_styles: |
+    ha-card:hover {
+      background-color: var(--primary-background-color);
+    }
+  styles:
+    grid:
+      - grid-template-areas: "n"
+    card:
+      - padding: "2px 12px"
+      - height: "42px"
+      - background: "none"
+      - border: "1px rgba(var(--color-theme),0.2) solid"
+      - width: "40vh"
+    name:
+      - align-self: "center"
+      - justify-self: "center"
+      - font-weight: "bold"
+      - font-size: "14px"
+      - text-transform: "capitalize"
+      - color: "rgba(var(--color-theme),0.5)"

custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_effect.yaml

@@ -1,6 +1,8 @@
 ---
 popup_light_effect:
-  template: "popup_light_brightness"
+  template:
+    - "popup_light_brightness"
+    - "ulm_language_variables"
   styles:
     grid:
       - grid-template-areas: >
@@ -219,10 +221,10 @@ popup_light_effect:
         entity: "[[[ return entity.entity_id; ]]]"
         icon: "mdi:auto-fix"
         name: "[[[ return hass.resources[hass['language']]['ui.card.light.effect']; ]]]"
-        label: "[[[ return 'total: ' + entity?.attributes?.effect_list?.length ]]]"
+        label: "[[[ return variables.ulm_popup_total + ': ' + entity?.attributes?.effect_list?.length ]]]"
         styles:
           card:
-            - padding-bottom: "12px"
+            - margin-bottom: "12px"
             - background: "none"
           img_cell:
             - background: "var(--card-background-color)"
@@ -234,15 +236,12 @@ popup_light_effect:
         type: "custom:button-card"
         template:
           - "icon_info"
-          - "ulm_language_variables"
-        variables:
-          ulm_card_light_color_palette: "[[[ return variables?.ulm_card_light_color_palette ]]]"
         icon: "mdi:palette"
-        name: "[[[ return variables?.ulm_popups_color; ]]]"
-        label: "[[[ return 'total: ' + states[variables?.ulm_card_light_color_palette]?.attributes?.options?.length ]]]"
+        name: "[[[ return variables.ulm_popups_color; ]]]"
+        label: "[[[ return variables.ulm_popup_total + ': ' + states[variables?.ulm_card_light_color_palette]?.attributes?.options?.length ]]]"
         styles:
           card:
-            - padding-bottom: "12px"
+            - margin-bottom: "12px"
             - background: "none"
           img_cell:
             - background: "var(--card-background-color)"

custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_source.yaml

@@ -20,14 +20,14 @@ popup_media_player_source:
         - overflow-x: "hidden"
         - justify-self: "center"
         - align-self: "start"
-        - max-height: "56vh"
+        - height: "56vh"
         - padding-bottom: "12px"
         - max-width: "42vh"
   extra_styles: |
     @media (max-width: 800px) {
       #container {
         grid-template-areas: "header" "content3" "footer" !important;
-        grid-template-rows: 16vh max-content 14vh !important;
+        grid-template-rows: 16vh 56vh 14vh !important;
         grid-template-columns: 1fr !important;
       }
       #content1 {