├── LICENSE
├── README.md
├── cards
├── button
│ ├── button.yaml
│ ├── button_border.yaml
│ ├── button_border_text.yaml
│ ├── button_description.yaml
│ └── button_text.yaml
└── text
│ ├── heading.yaml
│ └── heading_subheading.yaml
└── images
├── button.png
├── button_border.png
├── button_border_text.png
├── button_description.png
├── button_text.png
├── heading.png
├── heading_subheading.png
└── screenshot.png
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 ilzq
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Lovelace Soft UI
2 |
3 | 
4 |
5 | ## Overview
6 |
7 | This project originally stemmed from just me redoing my UI.
8 | However, it has evolved into something much bigger.
9 | Today, in this repo, you will find detailed instructions on applying
10 | this style to your cards and a collection of custom-configured cards that match best with this style.
11 |
12 | This would have not been possible without the support of the Home Assistant community.
13 | If you need help, please consult the
14 | [community forums](https://community.home-assistant.io/t/lovelace-soft-ui-simple-and-clean-lovelace-configuration)
15 | or the issues tab. New contributions are most welcomed.
16 | Thank you, and please check out other great alternatives:
17 |
18 | - [**`Savjee`**](https://github.com/Savjee)/[`button-text-card`](https://github.com/Savjee/button-text-card)
19 |
20 | - [**`KTibow`**](https://github.com/KTibow)/[`lovelace-soft-theme`](https://github.com/KTibow/lovelace-soft-theme/)
21 |
22 | ## Installation
23 |
24 | First, we will need
25 | [card-mod](https://github.com/thomasloven/lovelace-card-mod)
26 | to style our cards. The easiest way to install card-mod is via
27 | [HACS](https://hacs.xyz).
28 |
29 | Second, we will need to apply our card-mod style through themes.
30 | We first need to install custom themes (can also be found via HACS),
31 | then we will add our card-mod style to the theme YAML files, typically found at:
32 | `config/themes/{theme_name}/{theme_name}.yaml`
33 |
34 | There are two ways to style our cards:
35 | the Universal method, which styles _all_ cards,
36 | and the Individual method, which only styles _specific_ cards.
37 |
38 | #### `Universal`
39 |
40 | To universally style all cards, add the following to your theme YAML file:
41 |
42 |
43 | Show code
44 |
45 | **Light version:**
46 |
47 | ```yaml
48 | # Example light_theme.yaml entry
49 | theme_name:
50 | card-mod-theme: theme_name # Change to your theme name
51 | card-mod-card: |
52 | ha-card {
53 | margin: 20px;
54 | border-radius: 15px;
55 | background-color: var(--primary-background-color);
56 | box-shadow: -5px -5px 15px #ffffff, 5px 5px 15px #ebebeb;
57 | }
58 | # This is needed for the "pressed" buttons
59 | soft-ui-pressed: 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb'
60 | ```
61 |
62 | **Dark version:**
63 |
64 | ```yaml
65 | # Example dark_theme.yaml entry
66 | theme_name:
67 | card-mod-theme: theme_name # Change to your theme name
68 | card-mod-card: |
69 | ha-card {
70 | margin: 20px;
71 | border-radius: 15px;
72 | background-color: var(--primary-background-color);
73 | box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
74 | }
75 | # This is needed for the "pressed" buttons
76 | soft-ui-pressed: 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919'
77 | ```
78 |
79 |
80 |
81 | #### `Individual`
82 |
83 | To individually style cards,
84 | first, we will create a styling class in our theme YAML:
85 |
86 |
87 | Show code
88 |
89 | **Light version:**
90 |
91 | ```yaml
92 | # Example light_theme.yaml entry
93 | theme_name:
94 | card-mod-theme: theme_name # Change to your theme name
95 | card-mod-card: |
96 | ha-card.soft-ui {
97 | margin: 20px;
98 | border-radius: 15px;
99 | background-color: var(--primary-background-color);
100 | box-shadow: -5px -5px 15px #ffffff, 5px 5px 15px #ebebeb;
101 | }
102 | # This is needed for the "pressed" buttons
103 | soft-ui-pressed: 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb'
104 | ```
105 |
106 | **Dark version:**
107 |
108 | ```yaml
109 | # Example dark_theme.yaml entry
110 | theme_name:
111 | card-mod-theme: theme_name # Change to your theme name
112 | card-mod-card: |
113 | ha-card.soft-ui {
114 | margin: 20px;
115 | border-radius: 15px;
116 | background-color: var(--primary-background-color);
117 | box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
118 | }
119 | # This is needed for the "pressed" buttons
120 | soft-ui-pressed: 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919'
121 | ```
122 |
123 |
124 |
125 | Then to use the style, simply reference the `soft-ui` class in any card
126 | by adding the following to the YAML card configuration:
127 |
128 | ```yaml
129 | # Example card configuration entry
130 | card_mod:
131 | class: soft-ui
132 | ```
133 |
134 | ## Cards
135 |
136 | All cards below have been made to work with both
137 | the Universal styling method and the Individual styling method.
138 | However, Button cards **require** the additional installation of the custom
139 | [button-card](https://github.com/custom-cards/button-card).
140 | Add cards via the _Manual_ card option in the Lovelace UI.
141 |
142 | #### `Heading`
143 |
144 | > Get card [here](cards/text/heading.yaml)
145 |
146 | 
147 |
148 | #### `Heading & Subheading`
149 |
150 | > Get card [here](cards/text/heading_subheading.yaml)
151 |
152 | 
153 |
154 | #### `Button`
155 |
156 | > Get card [here](cards/button/button.yaml)
157 |
158 | 
159 |
160 | #### `Button Border`
161 |
162 | > Get card [here](cards/button/button_border.yaml)
163 |
164 | 
165 |
166 | #### `Button Text`
167 |
168 | > Get card [here](cards/button/button_text.yaml)
169 |
170 | 
171 |
172 | #### `Button Border Text`
173 |
174 | > Get card [here](cards/button/button_border_text.yaml)
175 |
176 | 
177 |
178 | #### `Button Description`
179 |
180 | > Get card [here](cards/button/button_description.yaml)
181 |
182 | 
183 |
--------------------------------------------------------------------------------
/cards/button/button.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | # ______ _ _
3 | # | ___ \ | | | |
4 | # | |_/ /_ _| |_| |_ ___ _ __
5 | # | ___ \ | | | __| __/ _ \| '_ \
6 | # | |_/ / |_| | |_| || (_) | | | |
7 | # \____/ \____|\__|\__\___/|_| |_|
8 |
9 | # Light to control
10 | entity: light.example
11 | # Icon to display
12 | icon: "mdi:lamp"
13 | # Button actions
14 | tap_action:
15 | action: toggle
16 | haptic: light
17 | hold_action:
18 | action: more-info
19 | haptic: medium
20 | styles:
21 | card:
22 | # Feel free to change the size here
23 | - width: min(20vw, 60px)
24 | - height: min(20vw, 60px)
25 | icon:
26 | - color: var(--primary-text-color)
27 | state:
28 | - value: "on"
29 | styles:
30 | icon:
31 | - color: var(--paper-item-icon-active-color)
32 | card:
33 | - box-shadow: var(--soft-ui-pressed)
34 | show_icon: true
35 | show_name: false
36 | card_mod:
37 | class: soft-ui
38 | type: "custom:button-card"
39 |
--------------------------------------------------------------------------------
/cards/button/button_border.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | # ______ _
3 | # | ___ \ | |
4 | # | |_/ / ___ _ __ __| | ___ _ __
5 | # | ___ \/ _ \| '__/ _` |/ _ \ '__|
6 | # | |_/ / (_) | | | (_| | __/ |
7 | # \____/ \___/|_| \____|\___|_|
8 |
9 | # Entity to control
10 | entity: light.example
11 | # Icon to display
12 | icon: "mdi:lamp"
13 | # Button actions
14 | tap_action:
15 | action: toggle
16 | haptic: light
17 | hold_action:
18 | action: more-info
19 | haptic: medium
20 | styles:
21 | card:
22 | # Feel free to change the size here
23 | - width: min(20vw, 60px)
24 | - height: min(20vw, 60px)
25 | icon:
26 | - color: var(--primary-text-color)
27 | state:
28 | - value: "on"
29 | styles:
30 | card:
31 | - border-style: solid
32 | - border-width: 2px
33 | - border-color: var(--paper-item-icon-active-color)
34 | - box-shadow: var(--soft-ui-pressed)
35 | icon:
36 | - color: var(--paper-item-icon-active-color)
37 | show_icon: true
38 | show_name: false
39 | card_mod:
40 | class: soft-ui
41 | type: "custom:button-card"
42 |
--------------------------------------------------------------------------------
/cards/button/button_border_text.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | # ______ _____ _
3 | # | ___ \_ _| | |
4 | # | |_/ / | | _____ _| |_
5 | # | ___ \ | |/ _ \ \/ / __|
6 | # | |_/ / | | __/> <| |_
7 | # \____/ \_/\___/_/\_\\__|
8 |
9 | # Entity to control
10 | entity: light.example
11 | # Icon to display
12 | icon: "mdi:vanity-light"
13 | # Name to display
14 | name: Island
15 | # Size of the icon
16 | size: 30%
17 | # Button actions
18 | tap_action:
19 | action: toggle
20 | haptic: light
21 | hold_action:
22 | action: more-info
23 | haptic: medium
24 | styles:
25 | img_cell:
26 | # Padding of the icon
27 | - padding-left: 25px
28 | - justify-content: start
29 | card:
30 | # Size of the card
31 | - width: min(25vw, 100px)
32 | - height: min(25vw, 100px)
33 | grid:
34 | - grid-template-areas: '"i" "n" "s"'
35 | - grid-template-columns: 1fr
36 | - grid-template-rows: 1fr min-content min-content
37 | icon:
38 | - color: var(--primary-text-color)
39 | name:
40 | - justify-self: start
41 | - font-weight: bold
42 | - font-size: 15px
43 | - padding-left: 15px
44 | state:
45 | - justify-self: start
46 | - font-weight: bold
47 | - font-size: 15px
48 | - opacity: 0.6
49 | - padding: 0 15px 5px
50 | state:
51 | - value: "on"
52 | styles:
53 | card:
54 | - border-style: solid
55 | - border-width: 2px
56 | - border-color: var(--paper-item-icon-active-color)
57 | - box-shadow: var(--soft-ui-pressed)
58 | icon:
59 | - color: var(--paper-item-icon-active-color)
60 | show_state: true
61 | card_mod:
62 | class: soft-ui
63 | type: "custom:button-card"
64 |
--------------------------------------------------------------------------------
/cards/button/button_description.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | # _____
3 | # | __ \
4 | # | | | | ___ ___ ___
5 | # | | | |/ _ \/ __|/ __|
6 | # | |__| | __/\__ \ (__
7 | # |_____/ \___||___/\___|
8 |
9 | cards:
10 | # Entity to control
11 | - entity: light.example
12 | # Icon to display
13 | icon: "mdi:television"
14 | # Button actions
15 | tap_action:
16 | action: toggle
17 | haptic: light
18 | hold_action:
19 | action: more-info
20 | haptic: medium
21 | styles:
22 | card:
23 | # Feel free to change the size here
24 | - width: min(20vw, 80px)
25 | - height: min(20vw, 80px)
26 | icon:
27 | - color: var(--primary-text-color)
28 | state:
29 | - value: "on"
30 | styles:
31 | card:
32 | - border-style: solid
33 | - border-width: 2px
34 | - border-color: var(--paper-item-icon-active-color)
35 | - box-shadow: var(--soft-ui-pressed)
36 | icon:
37 | - color: var(--paper-item-icon-active-color)
38 | show_icon: true
39 | show_name: false
40 | card_mod:
41 | class: soft-ui
42 | type: "custom:button-card"
43 |
44 | - content: |
45 | # Display in big text
46 | ## Display in the small text
47 | style:
48 | .: |
49 | ha-card {
50 | margin-top: 15px;
51 | --ha-card-background: none !important;
52 | box-shadow: none !important;
53 | }
54 | ha-markdown:
55 | $: |
56 | h1 {
57 | font-size: 20px !important;
58 | }
59 | h2 {
60 | font-size: 15px !important;
61 | }
62 | type: markdown
63 | type: horizontal-stack
64 |
--------------------------------------------------------------------------------
/cards/button/button_text.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | # _____ _
3 | # |_ _| | |
4 | # | | _____ _| |_
5 | # | |/ _ \ \/ / __|
6 | # | | __/> <| |_
7 | # \_/\___/_/\_\\__|
8 |
9 | # Entity to control
10 | entity: light.example
11 | # Icon to display
12 | icon: "mdi:vanity-light"
13 | # Name to display
14 | name: Island
15 | # Size of the icon
16 | size: 30%
17 | # Button actions
18 | tap_action:
19 | action: toggle
20 | haptic: light
21 | hold_action:
22 | action: more-info
23 | haptic: medium
24 | styles:
25 | img_cell:
26 | # Padding of the icon
27 | - padding-left: 25px
28 | - justify-content: start
29 | card:
30 | # Size of the card
31 | - width: min(25vw, 100px)
32 | - height: min(25vw, 100px)
33 | grid:
34 | - grid-template-areas: '"i" "n" "s"'
35 | - grid-template-columns: 1fr
36 | - grid-template-rows: 1fr min-content min-content
37 | icon:
38 | - color: var(--primary-text-color)
39 | name:
40 | - justify-self: start
41 | - font-weight: bold
42 | - font-size: 15px
43 | - padding-left: 15px
44 | state:
45 | - justify-self: start
46 | - font-weight: bold
47 | - font-size: 15px
48 | - opacity: 0.6
49 | - padding: 0 15px 5px
50 | state:
51 | - value: "on"
52 | styles:
53 | icon:
54 | - color: var(--paper-item-icon-active-color)
55 | card:
56 | - box-shadow: var(--soft-ui-pressed)
57 | show_state: true
58 | card_mod:
59 | class: soft-ui
60 | type: "custom:button-card"
61 |
--------------------------------------------------------------------------------
/cards/text/heading.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | # _ _ _
3 | # | | | | | |
4 | # | |_| | ___ __ _ __| |
5 | # | _ |/ _ \/ _` |/ _` |
6 | # | | | | __/ (_| | (_| |
7 | # \_| |_/\___|\__,_|\__,_|
8 |
9 | content: |
10 | # Display in big text
11 | card_mod:
12 | style:
13 | .: |
14 | ha-card {
15 | --ha-card-background: none !important;
16 | box-shadow: none !important;
17 | }
18 | ha-markdown:
19 | $: |
20 | h1 {
21 | font-size: 20px !important;
22 | }
23 | type: markdown
24 |
--------------------------------------------------------------------------------
/cards/text/heading_subheading.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | # _____ _
3 | # / ___| | |
4 | # \ `--. _ _| |__
5 | # `--. \ | | | '_ \
6 | # /\__/ / |_| | |_) |
7 | # \____/ \__,_|_.__/
8 |
9 | content: |
10 | # Display in big text
11 | ## Display in the small text
12 | card_mod:
13 | style:
14 | .: |
15 | ha-card {
16 | --ha-card-background: none !important;
17 | box-shadow: none !important;
18 | }
19 | ha-markdown:
20 | $: |
21 | h1 {
22 | font-size: 20px !important;
23 | }
24 | h2 {
25 | font-size: 15px !important;
26 | }
27 | type: markdown
28 |
--------------------------------------------------------------------------------
/images/button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiz-li/lovelace-soft-ui/e1a30ffffcce22f5f5035f6445511561dd3f66da/images/button.png
--------------------------------------------------------------------------------
/images/button_border.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiz-li/lovelace-soft-ui/e1a30ffffcce22f5f5035f6445511561dd3f66da/images/button_border.png
--------------------------------------------------------------------------------
/images/button_border_text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiz-li/lovelace-soft-ui/e1a30ffffcce22f5f5035f6445511561dd3f66da/images/button_border_text.png
--------------------------------------------------------------------------------
/images/button_description.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiz-li/lovelace-soft-ui/e1a30ffffcce22f5f5035f6445511561dd3f66da/images/button_description.png
--------------------------------------------------------------------------------
/images/button_text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiz-li/lovelace-soft-ui/e1a30ffffcce22f5f5035f6445511561dd3f66da/images/button_text.png
--------------------------------------------------------------------------------
/images/heading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiz-li/lovelace-soft-ui/e1a30ffffcce22f5f5035f6445511561dd3f66da/images/heading.png
--------------------------------------------------------------------------------
/images/heading_subheading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiz-li/lovelace-soft-ui/e1a30ffffcce22f5f5035f6445511561dd3f66da/images/heading_subheading.png
--------------------------------------------------------------------------------
/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiz-li/lovelace-soft-ui/e1a30ffffcce22f5f5035f6445511561dd3f66da/images/screenshot.png
--------------------------------------------------------------------------------