From 0e07fb608cb913c3440efac06aa2622c2e3c3e86 Mon Sep 17 00:00:00 2001 From: saxel Date: Mon, 6 Dec 2021 13:02:28 +0700 Subject: [PATCH 1/2] Added Pink and Purple text/background variables --- .../minimalist-desktop/minimalist-desktop.yaml | 14 +++++++++++--- .../minimalist-mobile/minimalist-mobile.yaml | 14 +++++++++++--- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/config/themes/minimalist-desktop/minimalist-desktop.yaml b/config/themes/minimalist-desktop/minimalist-desktop.yaml index 65369ea6d..72f875bd4 100644 --- a/config/themes/minimalist-desktop/minimalist-desktop.yaml +++ b/config/themes/minimalist-desktop/minimalist-desktop.yaml @@ -32,15 +32,19 @@ minimalist-desktop: color-background-blue : 250, 250, 250 color-background-green : 250, 250, 250 color-background-red : 250, 250, 250 + color-background-pink : 250, 250, 250 + color-background-purple : 250, 250, 250 color-yellow-text: 'var(--primary-text-color)' color-blue-text: 'var(--primary-text-color)' color-green-text: 'var(--primary-text-color)' color-red-text: 'var(--primary-text-color)' + color-pink-text: 'var(--primary-text-color)' + color-purple-text: 'var(--primary-text-color)' opacity-bg: '1' #background and sidebar card-background-color: '#FAFAFA' primary-background-color: '#EFEFEF' - secondary-background-color: '#EFEFEF' + secondary-background-color: '#EFEFEF' #header app-header-text-color: 'var(--primary-text-color)' app-header-background-color: 'var(--primary-background-color)' @@ -82,17 +86,21 @@ minimalist-desktop: color-background-blue : 'var(--color-blue)' color-background-green : 'var(--color-green)' color-background-red : 'var(--color-red)' + color-background-pink : 'var(--color-pink)' + color-background-purple : 'var(--color-purple)' color-yellow-text: 'var(--color-yellow)' color-blue-text: 'var(--color-blue)' color-green-text: 'var(--color-green)' color-red-text: 'var(--color-red)' + color-pink-text: 'var(--color-pink)' + color-purple-text: 'var(--color-purple)' opacity-bg: '0.1' #floating button text color mdc-theme-on-secondary: 'var(--card-background-color)' #background and sidebar card-background-color: '#1D1D1D' primary-background-color: '#121212' - secondary-background-color: '#121212' + secondary-background-color: '#121212' #header app-header-text-color: 'var(--primary-text-color)' app-header-background-color: 'var(--primary-background-color)' @@ -108,4 +116,4 @@ minimalist-desktop: #media player mini-media-player-accent-color: 'var(--google-blue)' # Journal - state-icon-color: 'rgb(var(--color-theme))' \ No newline at end of file + state-icon-color: 'rgb(var(--color-theme))' diff --git a/config/themes/minimalist-mobile/minimalist-mobile.yaml b/config/themes/minimalist-mobile/minimalist-mobile.yaml index 915861b19..73e85b24c 100644 --- a/config/themes/minimalist-mobile/minimalist-mobile.yaml +++ b/config/themes/minimalist-mobile/minimalist-mobile.yaml @@ -37,15 +37,19 @@ minimalist-mobile: color-background-blue : 250, 250, 250 color-background-green : 250, 250, 250 color-background-red : 250, 250, 250 + color-background-pink : 250, 250, 250 + color-background-purple : 250, 250, 250 color-yellow-text: 'var(--primary-text-color)' color-blue-text: 'var(--primary-text-color)' color-green-text: 'var(--primary-text-color)' color-red-text: 'var(--primary-text-color)' + color-pink-text: 'var(--primary-text-color)' + color-purple-text: 'var(--primary-text-color)' opacity-bg: '1' #background and sidebar card-background-color: '#FAFAFA' primary-background-color: '#EFEFEF' - secondary-background-color: '#EFEFEF' + secondary-background-color: '#EFEFEF' #header app-header-text-color: 'var(--primary-text-color)' app-header-background-color: 'var(--primary-background-color)' @@ -87,17 +91,21 @@ minimalist-mobile: color-background-blue : 'var(--color-blue)' color-background-green : 'var(--color-green)' color-background-red : 'var(--color-red)' + color-background-pink : 'var(--color-pink)' + color-background-purple : 'var(--color-purple)' color-yellow-text: 'var(--color-yellow)' color-blue-text: 'var(--color-blue)' color-green-text: 'var(--color-green)' color-red-text: 'var(--color-red)' + color-pink-text: 'var(--color-pink)' + color-purple-text: 'var(--color-purple)' opacity-bg: '0.1' #floating button text color mdc-theme-on-secondary: 'var(--card-background-color)' #background and sidebar card-background-color: '#1D1D1D' primary-background-color: '#121212' - secondary-background-color: '#121212' + secondary-background-color: '#121212' #header app-header-text-color: 'var(--primary-text-color)' app-header-background-color: 'var(--primary-background-color)' @@ -113,4 +121,4 @@ minimalist-mobile: #media player mini-media-player-accent-color: 'var(--google-blue)' # Journal - state-icon-color: 'rgb(var(--color-theme))' \ No newline at end of file + state-icon-color: 'rgb(var(--color-theme))' From e79b31dbc732fb66435f11ddee4408930c048f64 Mon Sep 17 00:00:00 2001 From: saxel Date: Mon, 6 Dec 2021 15:14:43 +0700 Subject: [PATCH 2/2] Add scene/status button that utilizes input_select Also added possibility to specify active color as a variable --- .../button_card_templates.yaml | 60 ++++++++----------- 1 file changed, 24 insertions(+), 36 deletions(-) diff --git a/config/minimalist-templates/button_card_templates.yaml b/config/minimalist-templates/button_card_templates.yaml index e8207259c..4f841941e 100644 --- a/config/minimalist-templates/button_card_templates.yaml +++ b/config/minimalist-templates/button_card_templates.yaml @@ -161,11 +161,11 @@ card_title: - font-weight: bold - font-size: '1rem' - opacity: '0.4' -### VERTICAL BUTTONS (fka SCENES) ### +### VERTICAL BUTTONS (fka SCENES) ### vertical_buttons: show_label: true label: "[[[ return (entity.attributes.value )]]]" - styles: + styles: icon: - color: 'rgba(var(--color-theme),0.2)' label: @@ -192,43 +192,38 @@ vertical_buttons: - box-shadow: var(--box-shadow) - padding: 10px 0px 8px 0px size: 20px -vertical_buttons_blue: + +vertical_buttons_custom_state: template: vertical_buttons variables: - state: "default" - state: - - operator: template - value: "[[[ return states['input_select.localisation_thomas'].state == variables.state ]]]" - styles: - icon: - - color: 'rgba(var(--color-blue),1)' - label: - - color: 'rgba(var(--color-blue-text),1)' - name: - - color: 'rgba(var(--color-blue-text),1)' - img_cell: - - background-color: 'rgba(var(--color-blue), 0.2)' - card: - - background-color: 'rgba(var(--color-background-blue), var(--opacity-bg))' -vertical_buttons_green: - variables: - state: "default" - template: - - vertical_buttons + state: 'default' + color: 'blue' # blue, red, green, yellow, purple, pink + show_last_changed: false + name: '[[[ return variables.state ]]]' + styles: + name: + - text-transform: capitalize state: - operator: template - value: "[[[ return states['input_select.localisation_thomas'].state == variables.state ]]]" + value: '[[[ return entity.state == variables.state ]]]' styles: icon: - - color: 'rgba(var(--color-green),1)' + - color: '[[[ return `rgba(var(--color-${variables.color}), 1)`; ]]]' label: - - color: 'rgba(var(--color-green-text),1)' + - color: '[[[ return `rgba(var(--color-${variables.color}-text), 1)`; ]]]' name: - - color: 'rgba(var(--color-green-text),1)' + - color: '[[[ return `rgba(var(--color-${variables.color}-text), 1)`; ]]]' img_cell: - - background-color: 'rgba(var(--color-green), 0.2)' + - background-color: '[[[ return `rgba(var(--color-${variables.color}), 0.2)`; ]]]' card: - - background-color: 'rgba(var(--color-background-green), var(--opacity-bg))' + - background-color: '[[[ return `rgba(var(--color-background-${variables.color}), var(--opacity-bg))`; ]]]' + tap_action: + action: call-service + service: input_select.select_option + service_data: + entity_id: '[[[ return entity.entity_id ]]]' + option: '[[[ return variables.state ]]]' + ### CARDS ### card_generic: template: @@ -1642,10 +1637,3 @@ media_buttons: variables: ulm_card_media_player_with_controls_entity: "[[[ return variables.entity ]]]" ulm_card_media_player_with_controls_name: "[[[ return variables.name ]]]" -### SCENES ### -scene: - template: vertical_buttons -scene_blue: - template: vertical_buttons_blue -scene_green: - template: vertical_buttons_green