diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_card.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_card.yaml index 25296463f..5b7bbbda0 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_card.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_card.yaml @@ -18,7 +18,9 @@ ulm_actions_card: if (action == 'adaptive'){ action = 'call-service' } - + if (domain == "media_player" && action == 'toggle'){ + action = 'call-service'; + } if (action == 'popup' && (variables.ulm_custom_popup != null )){ let popup_config = variables.ulm_custom_popup; if ((typeof popup_config === 'object') && 'template' in popup_config) { @@ -41,7 +43,9 @@ ulm_actions_card: if (action == 'adaptive'){ return 'input_select.select_option'; } - + if(entity.entity_id.startsWith("media_player.")){ + return 'media_player.media_play_pause'; + } return variables.ulm_card_tap_service; ]]] service_data: > @@ -54,19 +58,35 @@ ulm_actions_card: 'entity_id': variables.ulm_input_select }; } - + if(entity.entity_id.startsWith("media_player.")){ + return { + 'entity_id': entity.entity_id + }; + } return variables.ulm_card_tap_service_data; ]]] browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: > @@ -116,7 +136,9 @@ ulm_actions_card: if (action == 'adaptive'){ action = 'call-service' } - + if (domain == "media_player" && action == 'toggle'){ + action = 'call-service'; + } if (action == 'popup' && (variables.ulm_custom_popup != null )){ let popup_config = variables.ulm_custom_popup; if ((typeof popup_config === 'object') && 'template' in popup_config) { @@ -139,7 +161,9 @@ ulm_actions_card: if (action == 'adaptive'){ return 'input_select.select_option'; } - + if(entity.entity_id.startsWith("media_player.")){ + return 'media_player.media_play_pause'; + } return variables.ulm_card_hold_service; ]]] service_data: > @@ -152,19 +176,35 @@ ulm_actions_card: 'entity_id': variables.ulm_input_select }; } - + if(entity.entity_id.startsWith("media_player.")){ + return { + 'entity_id': entity.entity_id + }; + } return variables.ulm_card_hold_service_data; ]]] browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: > @@ -214,7 +254,9 @@ ulm_actions_card: if (action == 'adaptive'){ action = 'call-service' } - + if (domain == "media_player" && action == 'toggle'){ + action = 'call-service'; + } if (action == 'popup' && (variables.ulm_custom_popup != null )){ let popup_config = variables.ulm_custom_popup; if ((typeof popup_config === 'object') && 'template' in popup_config) { @@ -237,7 +279,9 @@ ulm_actions_card: if (action == 'adaptive'){ return 'input_select.select_option'; } - + if(entity.entity_id.startsWith("media_player.")){ + return 'media_player.media_play_pause'; + } return variables.ulm_card_double_tap_service; ]]] service_data: > @@ -250,19 +294,35 @@ ulm_actions_card: 'entity_id': variables.ulm_input_select }; } - + if(entity.entity_id.startsWith("media_player.")){ + return { + 'entity_id': entity.entity_id + }; + } return variables.ulm_card_double_tap_service_data; ]]] browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: > diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_icon.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_icon.yaml index 9bc2e7802..b6e367def 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_icon.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_icon.yaml @@ -18,7 +18,9 @@ ulm_actions_icon: if (action == 'adaptive'){ action = 'call-service' } - + if (domain == "media_player" && action == 'toggle'){ + action = 'call-service'; + } if (action == 'popup' && (variables.ulm_custom_popup != null )){ let popup_config = variables.ulm_custom_popup; if ((typeof popup_config === 'object') && 'template' in popup_config) { @@ -41,7 +43,9 @@ ulm_actions_icon: if (action == 'adaptive'){ return 'input_select.select_option'; } - + if(entity.entity_id.startsWith("media_player.")){ + return 'media_player.media_play_pause'; + } return variables.ulm_icon_tap_service; ]]] service_data: > @@ -54,19 +58,35 @@ ulm_actions_icon: 'entity_id': variables.ulm_input_select }; } - + if(entity.entity_id.startsWith("media_player.")){ + return { + 'entity_id': entity.entity_id + }; + } return variables.ulm_icon_tap_service_data; ]]] browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: > @@ -115,7 +135,9 @@ ulm_actions_icon: if (action == 'adaptive'){ action = 'call-service' } - + if (domain == "media_player" && action == 'toggle'){ + action = 'call-service'; + } if (action == 'popup' && (variables.ulm_custom_popup != null )){ let popup_config = variables.ulm_custom_popup; if ((typeof popup_config === 'object') && 'template' in popup_config) { @@ -138,7 +160,9 @@ ulm_actions_icon: if (action == 'adaptive'){ return 'input_select.select_option'; } - + if(entity.entity_id.startsWith("media_player.")){ + return 'media_player.media_play_pause'; + } return variables.ulm_icon_hold_service; ]]] service_data: > @@ -151,19 +175,35 @@ ulm_actions_icon: 'entity_id': variables.ulm_input_select }; } - + if(entity.entity_id.startsWith("media_player.")){ + return { + 'entity_id': entity.entity_id + }; + } return variables.ulm_icon_hold_service_data; ]]] browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: > @@ -213,7 +253,9 @@ ulm_actions_icon: if (action == 'adaptive'){ action = 'call-service' } - + if (domain == "media_player" && action == 'toggle'){ + action = 'call-service'; + } if (action == 'popup' && (variables.ulm_card_light_enable_popup || variables.ulm_card_media_player_enable_popup || variables.ulm_card_thermostat_enable_popup) ){ action = 'fire-dom-event' } @@ -240,7 +282,9 @@ ulm_actions_icon: if (action == 'adaptive'){ return 'input_select.select_option'; } - + if(entity.entity_id.startsWith("media_player.")){ + return 'media_player.media_play_pause'; + } return variables.ulm_icon_double_tap_service; ]]] service_data: > @@ -253,19 +297,35 @@ ulm_actions_icon: 'entity_id': variables.ulm_input_select }; } - + if(entity.entity_id.startsWith("media_player.")){ + return { + 'entity_id': entity.entity_id + }; + } return variables.ulm_icon_double_tap_service_data; ]]] browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: > diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_name.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_name.yaml index 826cf5891..dfacb70e8 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_name.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/actions/actions_name.yaml @@ -18,7 +18,9 @@ ulm_actions_name: if (action == 'adaptive'){ action = 'call-service' } - + if (domain == "media_player" && action == 'toggle'){ + action = 'call-service'; + } if (action == 'popup' && (variables.ulm_custom_popup != null )){ let popup_config = variables.ulm_custom_popup; if ((typeof popup_config === 'object') && 'template' in popup_config) { @@ -41,7 +43,9 @@ ulm_actions_name: if (action == 'adaptive'){ return 'input_select.select_option'; } - + if(entity.entity_id.startsWith("media_player.")){ + return 'media_player.media_play_pause'; + } return variables.ulm_name_tap_service; ]]] service_data: > @@ -54,19 +58,36 @@ ulm_actions_name: 'entity_id': variables.ulm_input_select }; } - + if(entity.entity_id.startsWith("media_player.")){ + return { + 'entity_id': entity.entity_id + }; + } + } return variables.ulm_name_tap_service_data; ]]] browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: > @@ -116,7 +137,9 @@ ulm_actions_name: if (action == 'adaptive'){ action = 'call-service' } - + if (domain == "media_player" && action == 'toggle'){ + action = 'call-service'; + } if (action == 'popup' && (variables.ulm_custom_popup != null )){ let popup_config = variables.ulm_custom_popup; if ((typeof popup_config === 'object') && 'template' in popup_config) { @@ -139,7 +162,9 @@ ulm_actions_name: if (action == 'adaptive'){ return 'input_select.select_option'; } - + if(entity.entity_id.startsWith("media_player.")){ + return 'media_player.media_play_pause'; + } return variables.ulm_name_hold_service; ]]] service_data: > @@ -152,19 +177,35 @@ ulm_actions_name: 'entity_id': variables.ulm_input_select }; } - + if(entity.entity_id.startsWith("media_player.")){ + return { + 'entity_id': entity.entity_id + }; + } return variables.ulm_card_name_service_data; ]]] browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: > @@ -214,7 +255,9 @@ ulm_actions_name: if (action == 'adaptive'){ action = 'call-service' } - + if (domain == "media_player" && action == 'toggle'){ + action = 'call-service'; + } if (action == 'popup' && (variables.ulm_custom_popup != null )){ let popup_config = variables.ulm_custom_popup; if ((typeof popup_config === 'object') && 'template' in popup_config){ @@ -237,7 +280,9 @@ ulm_actions_name: if (action == 'adaptive'){ return 'input_select.select_option'; } - + if(entity.entity_id.startsWith("media_player.")){ + return 'media_player.media_play_pause'; + } return variables.ulm_name_double_tap_service; ]]] service_data: > @@ -250,19 +295,35 @@ ulm_actions_name: 'entity_id': variables.ulm_input_select }; } - + if(entity.entity_id.startsWith("media_player.")){ + return { + 'entity_id': entity.entity_id + }; + } return variables.ulm_name_double_tap_service_data; ]]] browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: > diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_battery.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_battery.yaml index df1f61aad..834ca3dd4 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_battery.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_battery.yaml @@ -14,6 +14,7 @@ card_battery: ulm_card_battery_color_battery_level_danger: "var(--google-red)" ulm_card_battery_color_battery_level_warning: "var(--google-yellow)" ulm_card_battery_color_battery_level_ok: "var(--google-green)" + ulm_outlet_power_enable_popup: false triggers_update: "all" custom_fields: item1: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor.yaml index ed8f0dc4e..1551a66e2 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor.yaml @@ -10,6 +10,7 @@ card_binary_sensor: ulm_show_last_changed: false ulm_card_binary_sensor_icon: "[[[ return entity.attributes.icon ]]]" ulm_card_binary_sensor_name: "[[[ return entity.attributes.friendly_name ]]]" + ulm_outlet_power_enable_popup: false custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor_alert.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor_alert.yaml index b70f63c10..b6e737ab6 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor_alert.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_binary_sensor_alert.yaml @@ -10,6 +10,7 @@ card_binary_sensor_alert: ulm_show_last_changed: false ulm_card_binary_sensor_alert_icon: "[[[ return entity.attributes.icon ]]]" ulm_card_binary_sensor_alert_name: "[[[ return entity.attributes.friendly_name ]]]" + ulm_outlet_power_enable_popup: false custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic.yaml index e8c9c1626..239e5d22c 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic.yaml @@ -7,6 +7,7 @@ card_generic: variables: ulm_card_generic_icon: "[[[ return entity.attributes.icon ]]]" ulm_card_generic_name: "[[[ return entity.attributes.friendly_name ]]]" + ulm_outlet_power_enable_popup: false custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic_swap.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic_swap.yaml index ec7e4511a..4365fd9e7 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic_swap.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_generic_swap.yaml @@ -7,6 +7,7 @@ card_generic_swap: variables: ulm_card_generic_swap_icon: "[[[ return entity.attributes.icon ]]]" ulm_card_generic_swap_name: "[[[ return entity.attributes.friendly_name ]]]" + ulm_outlet_power_enable_popup: false custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_input_boolean.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_input_boolean.yaml index 703ec4282..b82380338 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_input_boolean.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_input_boolean.yaml @@ -8,6 +8,7 @@ card_input_boolean: variables: ulm_card_input_boolean_icon: "[[[ return entity.attributes.icon ]]]" ulm_card_input_boolean_name: "[[[ return entity.attributes.friendly_name ]]]" + ulm_outlet_power_enable_popup: false custom_fields: item1: card: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_power_outlet.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_power_outlet.yaml index 8d213d179..5823a757b 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_power_outlet.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_power_outlet.yaml @@ -9,6 +9,7 @@ card_power_outlet: ulm_card_power_outlet_consumption_sensor: ulm_card_power_outlet_name: "[[[ return entity.attributes.friendly_name ]]]" ulm_card_power_outlet_icon: "[[[ return entity.attributes.icon ]]]" + ulm_outlet_power_enable_popup: false triggers_update: "all" custom_fields: item1: diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_controls.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_controls.yaml index ca2e111e6..5b0a12023 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_controls.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popup_buttons/popup_chip_controls.yaml @@ -27,7 +27,14 @@ popup_chip_controls: entity_id: "[[[ return entity.entity_id; ]]]" styles: icon: - - color: "rgba(var(--color-theme),0.5)" + - color: > + [[[ + if(entity.state == 'playing'){ + return 'rgb(var(--color-theme)' + } else { + return 'rgba(var(--color-theme),0.5)' + } + ]]] item2: card: type: "custom:button-card" @@ -55,7 +62,14 @@ popup_chip_controls: entity_id: "[[[ return entity.entity_id; ]]]" styles: icon: - - color: "rgba(var(--color-theme),0.5)" + - color: > + [[[ + if(entity.state == 'playing'){ + return 'rgb(var(--color-theme)' + } else { + return 'rgba(var(--color-theme),0.5)' + } + ]]] icon_controls: show_icon: true diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml index c80e94cca..e40796452 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_brightness.yaml @@ -37,7 +37,7 @@ popup_light_brightness: columns.push("1fr"); } if (entity.attributes.supported_color_modes.some(r => color_modes.includes(r))) { - columns.push("2fr"); + columns.push("1fr"); } return columns.join(" "); ]]] @@ -81,7 +81,7 @@ popup_light_brightness: buttons: - display: "none" footer: - - align-self: "end" + - align-self: "start" - margin-top: "25px" extra_styles: | @media (max-width: 800px) { @@ -100,11 +100,6 @@ popup_light_brightness: #content3 { display: none !important; } - #card { - height: 100vh; - overflow: hidden; - position: fixed; - } } custom_fields: header: @@ -114,104 +109,108 @@ popup_light_brightness: entity: "[[[ return entity.entity_id ]]]" content1: card: - type: "custom:my-slider" + type: "custom:my-slider-v2" entity: "[[[ return entity.entity_id ]]]" - radius: "20px" - rotate: 270 - containerHeight: "320px" - width: "250px" - height: "100px" - top: "100px" - left: "17%" - thumbHorizontalPadding: "0px" - thumbWidth: "0px" - mainSliderColor: > - [[[ - var color = entity.attributes.rgb_color; - if (entity.state == "unavailable"){ - return "rgba(var(--color-grey),1)"; - } - else if (color){ - return "rgba(" + color + ",1)"; - } - else{ - return "rgba(var(--color-yellow),1)"; - } - ]]] - mainSliderColorOff: "rgba(var(--color-theme),0.1)" - secondarySliderColor: > - [[[ - var color = entity.attributes.rgb_color; - if (entity.state == "unavailable"){ - return "rgba(var(--color-grey),0.2)"; - } - else if (color){ - return "rgba(" + color + ",0.2)"; - } - else{ - return "rgba(var(--color-yellow),0.2)"; - } - ]]] - secondarySliderColorOff: "var(--color-theme)" + allowTapping: true + vertical: true + styles: + card: + - height: "280px" + - width: "100px" + - box-shadow: "none" + - background: "none" + container: + - border: "2px solid white" + - border-radius: "14px" + - Height: "280px" + - width: "100px" + - box-shadow: "none" + progress: + - background: > + [[[ + var color = entity.attributes.rgb_color; + if (entity.state == "unavailable"){ + return "rgba(var(--color-grey),1)"; + } + else if (entity.state == "off"){ + return "rgba(var(--color-theme),0.9)"; + } + else if (color){ + return "rgba(" + color + ",1)"; + } + else{ + return "rgba(var(--color-yellow),1)"; + } + ]]] + track: + - background: > + [[[ + var color = entity.attributes.rgb_color; + if (entity.state == "unavailable"){ + return "rgba(var(--color-grey),0.2)"; + } + else if (entity.state == "off"){ + return "rgba(var(--color-theme),0.09)"; + } + else if (color){ + return "rgba(" + color + ",0.2)"; + } + else{ + return "rgba(var(--color-yellow),0.2)"; + } + ]]] + thumb: + - width: "50px" + - height: "5px" + - background: "white" + - position: "center" + - margin-right: "25px" + - margin-left: "25px" + - border-radius: "0px 0px 10px 10px" card_mod: - style: | - ha-card { - background: none !important; - box-shadow: none !important; - } - .slider-container input[type="range"] { - position: revert !important; - border: 1px solid rgba(var(--color-theme),0.3) !important; - } - .slider-container { - display: flex; - justify-content: center; - align-items: center; - } + style: + .: | + :host { + display: flex; + justify-content: center; + align-items: center; + background: none; + } content2: card: - type: "custom:my-slider" + type: "custom:my-slider-v2" entity: "[[[ return entity.entity_id ]]]" - minBar: "[[[ return entity.attributes.min_mireds ]]]" - minSet: "[[[ return entity.attributes.min_mireds ]]]" - maxBar: "[[[ return entity.attributes.max_mireds ]]]" - maxSet: "[[[ return entity.attributes.max_mireds ]]]" - function: "Warmth" - radius: "20px" - rotate: 270 - containerHeight: "320px" - width: "250px" - height: "100px" - thumbHorizontalPadding: "0px" - thumbWidth: "2%" - thumbHeight: "85px" - thumbColor: "#000" - mainSliderColor: "rgba(255, 255, 255, 0)" - mainSliderColorOff: "rgba(255, 255, 255, 0)" + colorMode: "temperature" + allowTapping: true + vertical: true + styles: + card: + - height: "280px" + - width: "100px" + - box-shadow: "none" + - background: "none" + container: + - border: "2px solid white" + - border-radius: "14px" + - Height: "280px" + - width: "100px" + - box-shadow: "none" + - background: "none" + thumb: + - width: "0px" + progress: + - background: "none" + track: + - background: "linear-gradient(180deg, #f3db6d, #fff, #c9f2fc)" card_mod: - style: | - ha-card { - background: none !important; - box-shadow: none !important; - } - .slider-container input[type="range"] { - position: revert !important; - border: 1px solid rgba(208, 208, 208, 1) !important; - background: linear-gradient(90deg, #c9f2fc, #fff, #f3db6d); - --thumb-top: 1px !important; - } - .slider-container input[type="range"]::-webkit-slider-thumb { - margin-top: 7px; - background-color: rgba(1, 1, 1, 0); - } - .slider-container input[type="range"]::-moz-range-thumb { - background-color: rgba(1, 1, 1, 0); - } - .slider-container { - display: flex; - justify-content: center; - align-items: center; - } + style: + .: | + :host { + display: flex; + justify-content: center; + align-items: center; + background: none; + } buttons: card: type: "custom:button-card" @@ -251,7 +250,7 @@ popup_light_brightness: columns.push("1fr"); } if (entity.attributes.supported_color_modes.some(r => color_modes.includes(r))) { - columns.push("1fr"); + columns.push("2fr"); } return columns.join(" "); ]]] @@ -290,9 +289,22 @@ popup_light_brightness: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_light_color_temp" @@ -322,9 +334,22 @@ popup_light_brightness: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_light_color" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color.yaml index 3a539bd11..4e2272d72 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color.yaml @@ -55,9 +55,22 @@ popup_light_color: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_light_brightness" @@ -77,9 +90,22 @@ popup_light_color: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_light_color_temp" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color_temp.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color_temp.yaml index 009a9ddf2..c21cd5da0 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color_temp.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_light_color_temp.yaml @@ -55,9 +55,22 @@ popup_light_color_temp: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_light_brightness" @@ -85,9 +98,22 @@ popup_light_color_temp: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_light_color" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_infos.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_infos.yaml index 3fbeae037..c44e6147b 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_infos.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_infos.yaml @@ -7,15 +7,14 @@ popup_media_player_infos: triggers_update: "all" styles: grid: - - grid-template-areas: "'header' 'content1' 'footer'" - - grid-template-rows: "14vh 56vh 16vh" - - row-gap: "2.5%" + - grid-template-areas: "'header header' 'content1 content2' 'footer footer'" + - grid-template-rows: "16vh 56vh 14vh" + - grid-template-columns: "2fr 1fr" card: - background: "var(--primary-background-color)" - box-shadow: "none" - padding: "0% 2% 2% 2%" - border-radius: "none" - - height: "100vh" custom_fields: header: - align-self: "start" @@ -24,28 +23,21 @@ popup_media_player_infos: - background-color: "var(--card-background-color)" - border-radius: "var(--border-radius)" - box-shadow: "var(--box-shadow)" - - width: "100%" - - max-width: "400px" - justify-self: "center" content2: - - display: "none" - buttons: - - display: "none" + - align-self: "center" + - justify-self: "center" footer: - - align-self: "end" + - align-self: "start" - margin-top: "25px" - padding-bottom: "4%" extra_styles: | @media (max-width: 800px) { #container { grid-template-areas: "header" "content1" "footer" !important; - grid-template-rows: 14vh 56vh 16vh !important; + grid-template-rows: 16vh 56vh 28vh !important; grid-template-columns: 1fr !important; } - #buttons { - display: block !important; - align-self: start !important; - } #content2 { display: none; } @@ -228,9 +220,22 @@ popup_media_player_infos: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_media_player_volume" @@ -256,33 +261,39 @@ popup_media_player_infos: entity: "[[[ return entity.entity_id; ]]]" content2: card: - type: "custom:my-slider" + type: "custom:my-slider-v2" entity: "[[[ return entity.entity_id; ]]]" - radius: "20px" - rotate: 270 - containerHeight: "320px" - width: "250px" - height: "100px" - top: "100px" - left: "17%" - thumbHorizontalPadding: "0px" - thumbWidth: "0px" - mainSliderColor: "rgba(var(--color-theme),0.1)" - mainSliderColorOff: "rgba(var(--color-theme),0.1)" - secondarySliderColor: "var(--color-theme)" - secondarySliderColorOff: "var(--color-theme)" + allowTapping: true + vertical: true + styles: + card: + - height: "30vh" + - width: "calc(30vh / 2.8)" + - box-shadow: "none" + - background: "none" + container: + - border: "2px solid white" + - border-radius: "14px" + - height: "30vh" + - width: "calc(30vh / 2.8)" + - box-shadow: "none" + thumb: + - width: "50px" + - height: "5px" + - background: "white" + - position: "center" + - margin-left: "calc(30vh / 2.8 / 2 - 25px)" + - border-radius: "0px 0px 10px 10px" + progress: + - background: "rgba(var(--color-theme),0.9)" + track: + - background: "rgba(var(--color-theme),0.09)" card_mod: - style: | - ha-card { - background: none !important; - box-shadow: none !important; - } - .slider-container input[type="range"] { - position: revert !important; - border: 1px solid rgba(var(--color-theme),0.3) !important; - } - .slider-container { - display: flex; - justify-content: center; - align-items: center; - } + style: + .: | + :host { + display: flex; + justify-content: center; + align-items: center; + background: none; + } diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_volume.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_volume.yaml index bbfa60ebc..6dbf5fa7e 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_volume.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_media_player_volume.yaml @@ -3,8 +3,8 @@ popup_media_player_volume: template: "popup_media_player_infos" styles: grid: - - grid-template-areas: "'header' 'content2' 'buttons' 'footer'" - - grid-template-rows: "16vh 52vh 14vh 14vh;" + - grid-template-areas: "'header' 'content2' 'footer'" + - grid-template-rows: "16vh 52vh 28vh;" - grid-template-columns: "1fr" custom_fields: content1: @@ -15,14 +15,10 @@ popup_media_player_volume: extra_styles: | @media (max-width: 800px) { #container { - grid-template-areas: "header" "content2" "buttons" "footer" !important; - grid-template-rows: 16vh 52vh 14vh 14vh !important; + grid-template-areas: "header" "content2" "footer" !important; + grid-template-rows: 16vh 56vh 28vh !important; grid-template-columns: 1fr !important; } - #buttons { - display: block !important; - align-self: start !important; - } #content1 { display: none; } @@ -36,31 +32,6 @@ popup_media_player_volume: card: type: "custom:button-card" template: "popup_button_back" - tap_action: - action: "fire-dom-event" - browser_mod: - service: "browser_mod.popup" - data: - large: true - hide_header: true - content: - type: "custom:button-card" - template: "popup_media_player_infos" - entity: "[[[ return entity.entity_id; ]]]" - buttons: - card: - type: "custom:button-card" - template: "list_2_items" - styles: - card: - - background: "none" - custom_fields: - item1: - card: - type: "custom:button-card" - template: - - "popup_button" - - "popup_button_playing" tap_action: action: "fire-dom-event" browser_mod: @@ -69,17 +40,23 @@ popup_media_player_volume: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_media_player_infos" entity: "[[[ return entity.entity_id; ]]]" - item2: - card: - type: "custom:button-card" - template: - - "popup_button" - - "popup_button_selected" - - "popup_button_volume" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_history.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_history.yaml index efa39b2e6..fcf648b6e 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_history.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_history.yaml @@ -50,9 +50,22 @@ popup_power_outlet_history: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_power_outlet_stats" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_stats.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_stats.yaml index 0e204d2d5..799bd0469 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_stats.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_power_outlet_stats.yaml @@ -136,9 +136,22 @@ popup_power_outlet_stats: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_power_outlet_history" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_thermostat_temperature.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_thermostat_temperature.yaml index 9a1a81cc2..5f0a19c18 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_thermostat_temperature.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_thermostat_temperature.yaml @@ -24,7 +24,7 @@ popup_thermostat_temperature: - width: "50%" - margin: "0 auto" footer: - - align-self: "end" + - align-self: "start" - margin-top: "25px" extra_styles: | @media (max-width: 800px) { diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather.yaml index ffb255004..3e75efcc1 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather.yaml @@ -5,8 +5,25 @@ popup_weather: browser_mod: service: "browser_mod.popup" data: - large: true hide_header: true + style: | + --popup-background-color: var(--primary-background-color); + --popup-border-radius: 20px; + --popup-padding-x: 24px; + --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_weather_forecast" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_forecast.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_forecast.yaml index 1afcb0299..ce86857a8 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_forecast.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_forecast.yaml @@ -196,9 +196,22 @@ popup_weather_forecast: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_weather_radar" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_radar.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_radar.yaml index 67bea3205..76f5dad41 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_radar.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/popup_templates/popups/popup_weather_radar.yaml @@ -49,9 +49,22 @@ popup_weather_radar: hide_header: true style: | --popup-background-color: var(--primary-background-color); - --popup-border-radius: 0px; + --popup-border-radius: 20px; --popup-padding-x: 24px; --popup-padding-y: 20px; + --popup-max-width: auto + --popup-min-width: 800px; + card_mod: + style: + ha-dialog$: | + @media (max-width: 800px){ + div.mdc-dialog__container { + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100%; + --ha-dialog-border-radius: 0px; + } + } content: type: "custom:button-card" template: "popup_weather_forecast"