Skip to content

Commit 6ae402c

Browse files
ZMYaroZMYaro
committed
Update MaterialZ and add dark theme
1 parent ca46a96 commit 6ae402c

File tree

6 files changed

+788
-199
lines changed

6 files changed

+788
-199
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<link rel="stylesheet" type="text/css" href="lib/material-elements.css" />
1919
<link rel="stylesheet" type="text/css" href="lib/material-depth.css" />
2020
<link rel="stylesheet" type="text/css" href="lib/material-widgets.css" />
21+
<link rel="stylesheet" type="text/css" href="lib/material-dark.css" media="(prefers-color-scheme: dark)" />
2122
<style type="text/css">
2223
* {
2324
box-sizing: border-box;

‎lib/material-dark.css‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
/* Base Material styles for dark theme
2+
* Part of the MaterialZ CSS library
3+
*
4+
* Copyright 2015-2021 Zachary Yaro
5+
* Released under the MIT license
6+
* https://materialz.dev/LICENSE.txt
7+
*/
8+
9+
@charset "UTF-8";
10+
11+
body {
12+
background-color: #121212;
13+
color: #ffffff;
14+
}
15+
16+
/* --------======== BUTTONS and DROP-DOWNS ========-------- */
17+
select {
18+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAIAgMAAADCRZTUAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAgJsrThgAAAAySURBVAjXY8hatWolAwxIrVq1BM5hW7VqApzDuGqVAwMcZAG1IDQBtSA0AbUgNCG0AAD8iAqhtDTiaAAAAABJRU5ErkJggg==);
19+
}
20+
button:not(:disabled):hover,
21+
button:focus,
22+
[role="button"]:not(:disabled):hover,
23+
[role="button"]:focus,
24+
input[type="button"]:not(:disabled):hover,
25+
input[type="button"]:focus,
26+
input[type="submit"]:not(:disabled):hover,
27+
input[type="submit"]:focus,
28+
input[type="reset"]:not(:disabled):hover,
29+
input[type="reset"]:focus,
30+
select:not(:disabled):hover,
31+
select:focus {
32+
background-color: #313131;
33+
background-color: rgba(128, 128, 128, 0.2);
34+
}
35+
/* The “active” class is used to force the appearance of the active/pressed state */
36+
button:not(:disabled):active,
37+
button:not(:disabled).active,
38+
[role="button"]:not(:disabled):active,
39+
[role="button"]:not(:disabled).active,
40+
input[type="button"]:not(:disabled):active,
41+
input[type="button"]:not(:disabled).active,
42+
input[type="submit"]:not(:disabled):active,
43+
input[type="submit"]:not(:disabled).active,
44+
input[type="reset"]:not(:disabled):active,
45+
input[type="reset"]:not(:disabled).active,
46+
select:not(:disabled):active,
47+
select:not(:disabled).active {
48+
background-color: #444444;
49+
background-color: rgba(128, 128, 128, 0.4);
50+
}
51+
52+
/* --------======== RADIO BUTTONS AND CHECKBOXES ========-------- */
53+
input[type="checkbox"]::after {
54+
border-color: #1d1d1d;
55+
}
56+
57+
/* --------======== TEXT FIELDS ========-------- */
58+
input[type="text"],
59+
input[type="search"],
60+
input[type="password"],
61+
input[type="email"],
62+
input[type="url"],
63+
input[type="number"],
64+
textarea,
65+
select[size] {
66+
border-bottom-color: #c8c8c8;
67+
}
68+
69+
70+
/* --------======== LISTS ========-------- */
71+
.list li {
72+
border-color: #363636;
73+
border-color: rgba(128, 128, 128, 0.25);
74+
}
75+
76+
/* --------======== CARDS ========-------- */
77+
.card,
78+
.card.z1 {
79+
background-color: #1d1d1d;
80+
}
81+
button.z1,
82+
button.z2,
83+
button.z3,
84+
button.z4,
85+
button.z5,
86+
[role="button"].z1,
87+
[role="button"].z2,
88+
[role="button"].z3,
89+
[role="button"].z4,
90+
[role="button"].z5 ,
91+
input[type="button"].z1,
92+
input[type="button"].z2,
93+
input[type="button"].z3,
94+
input[type="button"].z4,
95+
input[type="button"].z5,
96+
input[type="submit"].z1,
97+
input[type="submit"].z2,
98+
input[type="submit"].z3,
99+
input[type="submit"].z4,
100+
input[type="submit"].z5,
101+
input[type="reset"].z1,
102+
input[type="reset"].z2,
103+
input[type="reset"].z3,
104+
input[type="reset"].z4,
105+
input[type="reset"].z5 {
106+
background-color: #212121;
107+
}
108+
.card.z2,
109+
button.z1:hover,
110+
button.z2:hover,
111+
button.z3:hover,
112+
button.z4:hover,
113+
button.z5:hover,
114+
[role="button"].z1:hover,
115+
[role="button"].z2:hover,
116+
[role="button"].z3:hover,
117+
[role="button"].z4:hover,
118+
[role="button"].z5:hover,
119+
input[type="button"].z1:hover,
120+
input[type="button"].z2:hover,
121+
input[type="button"].z3:hover,
122+
input[type="button"].z4:hover,
123+
input[type="button"].z5:hover,
124+
input[type="submit"].z1:hover,
125+
input[type="submit"].z2:hover,
126+
input[type="submit"].z3:hover,
127+
input[type="submit"].z4:hover,
128+
input[type="submit"].z5:hover,
129+
input[type="reset"].z1:hover,
130+
input[type="reset"].z2:hover,
131+
input[type="reset"].z3:hover,
132+
input[type="reset"].z4:hover,
133+
input[type="reset"].z5:hover,
134+
button.z1:focus,
135+
button.z2:focus,
136+
button.z3:focus,
137+
button.z4:focus,
138+
button.z5:focus,
139+
[role="button"].z1:focus,
140+
[role="button"].z2:focus,
141+
[role="button"].z3:focus,
142+
[role="button"].z4:focus,
143+
[role="button"].z5:focus,
144+
input[type="button"].z1:focus,
145+
input[type="button"].z2:focus,
146+
input[type="button"].z3:focus,
147+
input[type="button"].z4:focus,
148+
input[type="button"].z5:focus,
149+
input[type="submit"].z1:focus,
150+
input[type="submit"].z2:focus,
151+
input[type="submit"].z3:focus,
152+
input[type="submit"].z4:focus,
153+
input[type="submit"].z5:focus,
154+
input[type="reset"].z1:focus,
155+
input[type="reset"].z2:focus,
156+
input[type="reset"].z3:focus,
157+
input[type="reset"].z4:focus,
158+
input[type="reset"].z5:focus {
159+
background-color: #272727;
160+
}
161+
.card.z3,
162+
button.z1:not(:disabled):active,
163+
button.z2:not(:disabled):active,
164+
button.z3:not(:disabled):active,
165+
button.z4:not(:disabled):active,
166+
button.z5:not(:disabled):active,
167+
[role="button"].z1:active,
168+
[role="button"].z2:active,
169+
[role="button"].z3:active,
170+
[role="button"].z4:active,
171+
[role="button"].z5:active,
172+
input[type="button"].z1:not(:disabled):active,
173+
input[type="button"].z2:not(:disabled):active,
174+
input[type="button"].z3:not(:disabled):active,
175+
input[type="button"].z4:not(:disabled):active,
176+
input[type="button"].z5:not(:disabled):active,
177+
input[type="submit"].z1:not(:disabled):active,
178+
input[type="submit"].z2:not(:disabled):active,
179+
input[type="submit"].z3:not(:disabled):active,
180+
input[type="submit"].z4:not(:disabled):active,
181+
input[type="submit"].z5:not(:disabled):active,
182+
input[type="reset"].z1:not(:disabled):active,
183+
input[type="reset"].z2:not(:disabled):active,
184+
input[type="reset"].z3:not(:disabled):active,
185+
input[type="reset"].z4:not(:disabled):active,
186+
input[type="reset"].z5:not(:disabled):active,
187+
button.z1:not(:disabled).active,
188+
button.z2:not(:disabled).active,
189+
button.z3:not(:disabled).active,
190+
button.z4:not(:disabled).active,
191+
button.z5:not(:disabled).active,
192+
[role="button"].z1.active,
193+
[role="button"].z2.active,
194+
[role="button"].z3.active,
195+
[role="button"].z4.active,
196+
[role="button"].z5.active,
197+
input[type="button"].z1:not(:disabled).active,
198+
input[type="button"].z2:not(:disabled).active,
199+
input[type="button"].z3:not(:disabled).active,
200+
input[type="button"].z4:not(:disabled).active,
201+
input[type="button"].z5:not(:disabled).active,
202+
input[type="submit"].z1:not(:disabled).active,
203+
input[type="submit"].z2:not(:disabled).active,
204+
input[type="submit"].z3:not(:disabled).active,
205+
input[type="submit"].z4:not(:disabled).active,
206+
input[type="submit"].z5:not(:disabled).active,
207+
input[type="reset"].z1:not(:disabled).active,
208+
input[type="reset"].z2:not(:disabled).active,
209+
input[type="reset"].z3:not(:disabled).active,
210+
input[type="reset"].z4:not(:disabled).active,
211+
input[type="reset"].z5:not(:disabled).active {
212+
background-color: #2d2d2d;
213+
}
214+
.card.z4 {
215+
background-color: #353535;
216+
}
217+
.card.z5 {
218+
background-color: #373737;
219+
}

‎lib/material-depth.css‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* Base Material styles for depth
22
* Part of the MaterialZ CSS library
33
*
4-
* Copyright 2015 Zachary Yaro
4+
* Copyright 2015-2021 Zachary Yaro
55
* Released under the MIT license
6-
* http://materialz.zmyaro.com/LICENSE.txt
6+
* https://materialz.dev/LICENSE.txt
77
*/
88

99
@charset "UTF-8";
@@ -29,6 +29,17 @@
2929
-o-transition-property: box-shadow;
3030
transition-property: box-shadow;
3131
}
32+
.card.full-width.z1,
33+
.card.full-width.z2,
34+
.card.full-width.z3,
35+
.card.full-width.z4,
36+
.card.full-width.z5 {
37+
-webkit-transition-property: margin, border-radius, -webkit-box-shadow, box-shadow;
38+
-moz-transition-property: margin, border-radius, -moz-box-shadow, box-shadow;
39+
-ms-transition-property: margin, border-radius, box-shadow;
40+
-o-transition-property: margin, border-radius, box-shadow;
41+
transition-property: margin, border-radius, box-shadow;
42+
}
3243
button.z1,
3344
button.z2,
3445
button.z3,
@@ -165,8 +176,6 @@ input[type="reset"].z5 {
165176
-webkit-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
166177
-moz-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
167178
box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
168-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
169-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
170179
}
171180

172181
button.z1:hover,
@@ -182,8 +191,6 @@ input[type="reset"].z1:focus {
182191
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
183192
-moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
184193
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
185-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7);
186-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7)";
187194
}
188195
.z2,
189196
button.z1:enabled:active,
@@ -199,8 +206,6 @@ input[type="reset"].z1.active {
199206
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
200207
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
201208
box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
202-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10);
203-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10)";
204209
}
205210
.z3,
206211
button.z2:enabled:active,
@@ -255,6 +260,18 @@ input[type="reset"].z1.disabled {
255260
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
256261
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
257262
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
258-
filter: progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
259-
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
263+
}
264+
265+
@media (prefers-reduced-motion: reduce) {
266+
.z1,
267+
.z2,
268+
.z3,
269+
.z4,
270+
.z5 {
271+
-webkit-transition-duration: 0s;
272+
-moz-transition-duration: 0s;
273+
-ms-transition-duration: 0s;
274+
-o-transition-duration: 0s;
275+
transition-duration: 0s;
276+
}
260277
}

0 commit comments

Comments
 (0)