Skip to content

Commit d17a0e7

Browse files
basbrussbasbruss
authored
Merge pull request #1250 from UI-Lovelace-Minimalist/release
Hotfix themes
2 parents 28cad9d + e4b38f2 commit d17a0e7

File tree

3 files changed

+228
-101
lines changed

3 files changed

+228
-101
lines changed

‎custom_components/ui_lovelace_minimalist/lovelace/themefiles/minimalist-ios-tapbar/minimalist-ios-tapbar.yaml

+11-12
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,21 @@ minimalist-ios-tapbar:
3131
#tabsContent {
3232
width: 97%;
3333
}
34-
.: |
35-
div#view{
36-
transform: initial;
37-
padding: 0 !important;
38-
margin: 0 !important;
39-
width: 100%;
40-
height: 100% !important;
34+
paper-icon-button {
35+
display: none;
4136
}
42-
div.header {
43-
top: auto;
44-
bottom: 0 !important;
37+
.: |
38+
@media (orientation: portrait) {
39+
a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
40+
display: none !important;
41+
}
42+
.header {
43+
top: auto !important;
44+
bottom: 0px !important;
4545
box-shadow: var(--footer-shadow);
46-
position: fixed !important;
4746
height: var(--header-height) !important;
4847
}
49-
div.toolbar {
48+
.toolbar {
5049
height: var(--header-height) !important;
5150
padding: 10px 0px !important;
5251
background: var( --ha-card-background, var(--card-background-color) );

‎custom_components/ui_lovelace_minimalist/lovelace/themefiles/minimalist-mobile-tapbar/minimalist-mobile-tapbar.yaml

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
---
2+
minimalist-mobile-tapbar:
3+
# Journal
4+
state-icon-color: "rgb(var(--color-theme))"
5+
border-radius: "20px"
6+
ha-card-border-radius: "var(--border-radius)"
7+
error-color: "var(--google-red)"
8+
warning-color: "var(--google-yellow)"
9+
success-color: "var(--google-green)"
10+
info-color: "var(--google-blue)"
11+
divider-color: "rgba(var(--color-theme),.12)"
12+
accent-color: "var(--google-yellow)"
13+
card-mod-theme: "minimalist-mobile-tapbar"
14+
header-height: "calc(var(--header-base-height) + env(safe-area-inset-bottom))"
15+
header-base-height: "70px"
16+
app-header-selection-bar-color: "transparent"
17+
ha-dialog-border-radius: "10px"
18+
# fix added border-lines in 2022.11
19+
ha-card-border-width: "0px"
20+
21+
card-mod-view-yaml: |
22+
"*:first-child$": |
23+
#columns .column > * {
24+
padding-left: 5px;
25+
padding-right: 5px;
26+
padding-bottom: 5px;
27+
}
28+
29+
# Move navbar
30+
card-mod-root-yaml: |
31+
ha-tabs$: |
32+
#tabsContent {
33+
width: 97%;
34+
}
35+
.: |
36+
.header {
37+
top: auto !important;
38+
bottom: 0px !important;
39+
box-shadow: var(--footer-shadow);
40+
height: var(--header-height) !important;
41+
}
42+
.toolbar {
43+
height: var(--header-base-height) !important;
44+
padding-bottom: env(safe-area-inset-bottom) !important;
45+
}
46+
#view {
47+
margin-top: calc(-1 * var(--header-height)) !important;
48+
padding-bottom: var(--header-height);
49+
}
50+
ha-tabs {
51+
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color);
52+
--mdc-icon-size: 26px;
53+
display: flex;
54+
justify-content: space-between;
55+
padding: 0 10px;
56+
height:50px !important;
57+
}
58+
paper-tab[aria-selected=true] {
59+
color: var(--header-active-tab-color);
60+
background-color: var(--header-active-tab-bg-color);
61+
}
62+
paper-tab {
63+
color: var(--header-all-tabs-color);
64+
border-radius: 25px;
65+
height:50px;
66+
/*width: calc(100% / 4);
67+
padding: 0;*/
68+
padding-left: 20px;
69+
padding-right: 20px;
70+
}
71+
72+
# Color themes
73+
modes:
74+
light:
75+
# main interface colors
76+
primary-color: "#434343"
77+
google-red: "#F54436"
78+
google-green: "#01C852"
79+
google-yellow: "#FF9101"
80+
google-blue: "#3D5AFE"
81+
google-violet: "#661FFF"
82+
google-grey: "#BBBBBB"
83+
color-red: "245, 68, 54"
84+
color-green: "1, 200, 82"
85+
color-yellow: "255, 145, 1"
86+
color-blue: "61, 90, 254"
87+
color-purple: "102, 31, 255"
88+
color-grey: "187, 187, 187"
89+
color-pink: "233, 30, 99"
90+
color-theme: "51,51,51"
91+
color-background-yellow: "250, 250, 250"
92+
color-background-blue: "250, 250, 250"
93+
color-background-green: "250, 250, 250"
94+
color-background-red: "250, 250, 250"
95+
color-background-pink: "250, 250, 250"
96+
color-background-purple: "250, 250, 250"
97+
color-yellow-text: "var(--primary-text-color)"
98+
color-blue-text: "var(--primary-text-color)"
99+
color-green-text: "var(--primary-text-color)"
100+
color-red-text: "var(--primary-text-color)"
101+
color-pink-text: "var(--primary-text-color)"
102+
color-purple-text: "var(--primary-text-color)"
103+
opacity-bg: "1"
104+
# Header / Footer
105+
header-active-tab-color: "rgb(var(--color-blue))"
106+
header-active-tab-bg-color: "rgba(var(--color-blue), .3)"
107+
header-all-tabs-color: "var(--paper-item-icon-color)"
108+
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
109+
app-header-text-color: "var(--primary-text-color)"
110+
app-header-background-color: "var( --ha-card-background, var(--card-background-color, white) )"
111+
paper-tabs-selection-bar-color: "var(--primary-text-color)"
112+
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
113+
# background and sidebar
114+
card-background-color: "#FAFAFA"
115+
primary-background-color: "#EFEFEF"
116+
secondary-background-color: "#EFEFEF"
117+
# text
118+
primary-text-color: "#212121"
119+
# slider
120+
slider-color: "rgb(var(--color-blue))"
121+
slider-bar-color: "rgba(var(--color-blue),0.38)"
122+
# cards
123+
box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.16)"
124+
ha-card-box-shadow: "var(--box-shadow)"
125+
# sidebar
126+
sidebar-selected-text-color: "rgb(var(--color-blue))"
127+
sidebar-selected-icon-color: "rgb(var(--color-blue))"
128+
sidebar-text-color: "#80868b"
129+
# switch
130+
switch-checked-color: "rgb(var(--color-blue))"
131+
# media player
132+
mini-media-player-accent-color: "rgb(var(--color-blue))"
133+
dark:
134+
# main interface colors
135+
primary-color: "#89B3F8"
136+
google-red: "#F18B82"
137+
google-green: "#80C994"
138+
google-yellow: "#FCD663"
139+
google-blue: "#89B3F8"
140+
google-violet: "#BB86FC"
141+
google-grey: "#BBBBBB"
142+
color-red: "241, 139, 130"
143+
color-green: "128, 201, 148"
144+
color-yellow: "252, 214, 99"
145+
color-blue: "137, 179, 248"
146+
color-theme: "221,221,221"
147+
color-purple: "102, 31, 255"
148+
color-grey: "187, 187, 187"
149+
color-pink: "233, 30, 99"
150+
color-amber: "255, 145, 1"
151+
color-background-yellow: "var(--color-yellow)"
152+
color-background-blue: "var(--color-blue)"
153+
color-background-green: "var(--color-green)"
154+
color-background-red: "var(--color-red)"
155+
color-background-pink: "var(--color-pink)"
156+
color-background-purple: "var(--color-purple)"
157+
color-yellow-text: "var(--color-yellow)"
158+
color-blue-text: "var(--color-blue)"
159+
color-green-text: "var(--color-green)"
160+
color-red-text: "var(--color-red)"
161+
color-pink-text: "var(--color-pink)"
162+
color-purple-text: "var(--color-purple)"
163+
opacity-bg: "0.1"
164+
# Header / Footer
165+
header-active-tab-color: "rgb(var(--color-amber))"
166+
header-active-tab-bg-color: "rgba(var(--color-amber), .3)"
167+
header-all-tabs-color: "var(--paper-item-icon-color)"
168+
header-tab-indicator-color: "rgba(0, 0, 0, 0)"
169+
app-header-text-color: "var(--primary-text-color)"
170+
app-header-background-color: "var( --ha-card-background, var(--card-background-color, rgb(29, 29, 29)) )"
171+
paper-tabs-selection-bar-color: "var(--primary-text-color)"
172+
footer-shadow: "0px -1px 3px 0px rgba(0,0,0,0.12)"
173+
# background and sidebar
174+
card-background-color: "#1D1D1D"
175+
primary-background-color: "#121212"
176+
secondary-background-color: "#121212"
177+
# text
178+
primary-text-color: "#DDDDDD"
179+
# floating button text color
180+
mdc-theme-on-secondary: "var(--card-background-color)"
181+
# Sidebar
182+
sidebar-selected-text-color: "rgb(var(--color-amber))"
183+
sidebar-selected-icon-color: "rgb(var(--color-amber))"
184+
# Slider
185+
slider-color: "rgb(var(--color-blue))"
186+
slider-bar-color: "rgba(var(--color-blue),0.38)"
187+
# card
188+
box-shadow: "none"
189+
# media player
190+
mini-media-player-accent-color: "var(--google-blue)"
191+
# Journal
192+
state-icon-color: "rgb(var(--color-theme))"

0 commit comments

Comments
 (0)