Skip to content

Commit fbe28d9

Browse files
ZMYaroZMYaro
committed
Update MaterialZ
1 parent d950ffe commit fbe28d9

File tree

9 files changed

+584
-235
lines changed

9 files changed

+584
-235
lines changed

‎app/admin_list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</a>
1010
Admin
1111
</header>
12-
<section class="card z1">
12+
<section class="card full-width z1">
1313
<ul class="list">
1414
{% for song in songs %}
1515
<li>

‎app/edit.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
Add song
2525
{% endif %}
2626
</header>
27-
<section class="card z1">
27+
<section class="card full-width z1">
2828
<table>
2929
<tr>
3030
<td>

‎app/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<!-- View containers -->
1111
<div id="searchContainer">
1212
<!-- Welcome card -->
13-
<section id="welcomeCard" class="card z1 hidden">
13+
<section id="welcomeCard" class="card full-width z1 hidden" style="margin-bottom: 16px;">
1414
<div style="display: inline-block; width: 20%; vertical-align: top;">
1515
<img src="/static/images/icons/icon_256.png" alt="EarZ logo" style="width: 100%;" />
1616
</div>
@@ -29,7 +29,7 @@ <h1 style="font-weight: 400; font-size: 200%; opacity: 0.8; margin: 0;">Welcome<
2929

3030

3131
<!-- Search box card -->
32-
<section class="card z1" id="searchCard">
32+
<section class="card full-width z1" id="searchCard">
3333
<!-- Search type selector -->
3434
<form id="searchTypeForm">
3535
<label for="lyricSearchType">
@@ -107,15 +107,15 @@ <h1 style="font-weight: 400; font-size: 200%; opacity: 0.8; margin: 0;">Welcome<
107107
</section>
108108

109109
<!-- Search results card -->
110-
<section class="card z1 hidden" id="resultsCard">
110+
<section class="card full-width z1 hidden" id="resultsCard">
111111
<ul class="list" id="resultsList">
112112
</ul>
113113
</section>
114114
</div>
115115
<div id="songContainer" class="hidden" style="display: none;">
116-
<section class="card z1 hidden" id="songLinksCard">
116+
<section class="card full-width z1 hidden" id="songLinksCard">
117117
</section>
118-
<section class="card z1 hidden" id="songCard">
118+
<section class="card full-width z1 hidden" id="songCard">
119119
</section>
120120
</div>
121121

‎app/static/scripts/lib/material-touch.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* Script for triggering element active states when touched
22
* Supplement to the MaterialZ CSS library
33
*
4-
* Copyright 2016 Zachary Yaro
4+
* Copyright 2015-2021 Zachary Yaro
55
* Released under the MIT license
6-
* https://materialz.zmyaro.com/LICENSE.txt
6+
* https://materialz.dev/LICENSE.txt
77
*/
88

99
(function () {

‎app/static/styles/layout.css‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@
99

1010
section,
1111
section.card {
12-
display: block;
1312
max-width: 800px;
14-
margin: 16px auto;
1513

1614
opacity: 1;
1715

@@ -79,17 +77,10 @@ label {
7977

8078
/* Styles for smaller screens, such as mobile phones */
8179
@media (max-width: 600px) {
82-
section,
83-
section.card {
84-
margin: 16px -16px;
85-
-webkit-border-radius: 0;
86-
-moz-border-radius: 0;
87-
border-radius: 0;
88-
}
89-
section:first-of-type,
90-
section.card:first-of-type {
91-
margin-top: -16px;
92-
}
80+
section:first-of-type,
81+
section.card:first-of-type {
82+
margin-top: -16px;
83+
}
9384

9485
/* Lower the app bar to effectively z = 1. */
9586
.appBar.z2 {

‎app/static/styles/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)