Update MaterialZ

ZMYaro · May 3, 2021 · fbe28d9 · fbe28d9
1 parent d950ffe
commit fbe28d9
Show file tree

Hide file tree

Showing 9 changed files with 584 additions and 235 deletions.
diff --git a/app/admin_list.html b/app/admin_list.html
@@ -9,7 +9,7 @@
 			</a>
 			Admin
 		</header>
-		<section class="card z1">
+		<section class="card full-width z1">
 			<ul class="list">
 				{% for song in songs %}
 					<li>

diff --git a/app/edit.html b/app/edit.html
@@ -24,7 +24,7 @@
 					Add song
 				{% endif %}
 			</header>
-			<section class="card z1">
+			<section class="card full-width z1">
 				<table>
 					<tr>
 						<td>

diff --git a/app/index.html b/app/index.html
@@ -10,7 +10,7 @@
 		<!-- View containers -->
 		<div id="searchContainer">
 			<!-- Welcome card -->
-			<section id="welcomeCard" class="card z1 hidden">
+			<section id="welcomeCard" class="card full-width z1 hidden" style="margin-bottom: 16px;">
 				<div style="display: inline-block; width: 20%; vertical-align: top;">
 					<img src="/static/images/icons/icon_256.png" alt="EarZ logo" style="width: 100%;" />
 				</div>
@@ -29,7 +29,7 @@ <h1 style="font-weight: 400; font-size: 200%; opacity: 0.8; margin: 0;">Welcome<
 
 
 			<!-- Search box card -->
-			<section class="card z1" id="searchCard">
+			<section class="card full-width z1" id="searchCard">
 				<!-- Search type selector -->
 				<form id="searchTypeForm">
 					<label for="lyricSearchType">
@@ -107,15 +107,15 @@ <h1 style="font-weight: 400; font-size: 200%; opacity: 0.8; margin: 0;">Welcome<
 			</section>
 
 			<!-- Search results card -->
-			<section class="card z1 hidden" id="resultsCard">
+			<section class="card full-width z1 hidden" id="resultsCard">
 				<ul class="list" id="resultsList">
 				</ul>
 			</section>
 		</div>
 		<div id="songContainer" class="hidden" style="display: none;">
-			<section class="card z1 hidden" id="songLinksCard">
+			<section class="card full-width z1 hidden" id="songLinksCard">
 			</section>
-			<section class="card z1 hidden" id="songCard">
+			<section class="card full-width z1 hidden" id="songCard">
 			</section>
 		</div>
 

diff --git a/app/static/scripts/lib/material-touch.js b/app/static/scripts/lib/material-touch.js
@@ -1,9 +1,9 @@
 /* Script for triggering element active states when touched
  * Supplement to the MaterialZ CSS library
  *
- * Copyright 2016 Zachary Yaro
+ * Copyright 2015-2021 Zachary Yaro
  * Released under the MIT license
- * https://materialz.zmyaro.com/LICENSE.txt
+ * https://materialz.dev/LICENSE.txt
  */
 
  (function () {

diff --git a/app/static/styles/layout.css b/app/static/styles/layout.css
@@ -9,9 +9,7 @@
 
 section,
 section.card {
-	display: block;
 	max-width: 800px;
-	margin: 16px auto;
 
 	opacity: 1;
 
@@ -79,17 +77,10 @@ label {
 
 /* Styles for smaller screens, such as mobile phones */
 @media (max-width: 600px) {
-	section,
-	section.card {
-		margin: 16px -16px;
-		-webkit-border-radius: 0;
-		   -moz-border-radius: 0;
-		        border-radius: 0;
-	}
-		section:first-of-type,
-		section.card:first-of-type {
-			margin-top: -16px;
-		}
+	section:first-of-type,
+	section.card:first-of-type {
+		margin-top: -16px;
+	}
 
 	/* Lower the app bar to effectively z = 1. */
 	.appBar.z2 {

diff --git a/app/static/styles/lib/material-depth.css b/app/static/styles/lib/material-depth.css
@@ -1,9 +1,9 @@
 /* Base Material styles for depth
  * Part of the MaterialZ CSS library
  *
- * Copyright 2015 Zachary Yaro
+ * Copyright 2015-2021 Zachary Yaro
  * Released under the MIT license
- * http://materialz.zmyaro.com/LICENSE.txt
+ * https://materialz.dev/LICENSE.txt
  */
 
 @charset "UTF-8";
@@ -29,6 +29,17 @@
 	     -o-transition-property: box-shadow;
 	        transition-property: box-shadow;
 }
+.card.full-width.z1,
+.card.full-width.z2,
+.card.full-width.z3,
+.card.full-width.z4,
+.card.full-width.z5 {
+	-webkit-transition-property: margin, border-radius, -webkit-box-shadow, box-shadow;
+	   -moz-transition-property: margin, border-radius, -moz-box-shadow, box-shadow;
+	    -ms-transition-property: margin, border-radius, box-shadow;
+	     -o-transition-property: margin, border-radius, box-shadow;
+	        transition-property: margin, border-radius, box-shadow;
+}
 button.z1,
 button.z2,
 button.z3,
@@ -165,8 +176,6 @@ input[type="reset"].z5 {
 	-webkit-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
 	   -moz-box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
 	        box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
-	    filter:  progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
-	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
 }
 
 button.z1:hover,
@@ -182,8 +191,6 @@ input[type="reset"].z1:focus {
 	-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
 	   -moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
 	        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.23), 0 4px 15px 0 rgba(0, 0, 0, 0.175);
-	    filter:  progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7);
-	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b4b4b4,Strength=7)";
 }
 .z2,
 button.z1:enabled:active,
@@ -199,8 +206,6 @@ input[type="reset"].z1.active {
 	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
 	   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
 	        box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0, rgba(0, 0, 0, 0.19) 0 6px 20px 0;
-	    filter:  progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10);
-	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b0b0b0,Strength=10)";
 }
 .z3,
 button.z2:enabled:active,
@@ -255,6 +260,18 @@ input[type="reset"].z1.disabled {
 	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
 	   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
 	        box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.14) 0 2px 5px 0;
-	    filter:  progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5);
-	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#b8b8b8,Strength=5)";
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.z1,
+	.z2,
+	.z3,
+	.z4,
+	.z5 {
+		-webkit-transition-duration: 0s;
+		   -moz-transition-duration: 0s;
+		    -ms-transition-duration: 0s;
+		     -o-transition-duration: 0s;
+		        transition-duration: 0s;
+	}
 }