From 920ea3018d0020a4a24024bafe252a0857b747de Mon Sep 17 00:00:00 2001
From: hanakin <midaym@gmail.com>
Date: Fri, 17 Feb 2017 19:35:04 -0500
Subject: [PATCH] [ticket/14095] Faster & simpler

PHPBB3-14095
---
 .../prosilver/template/simple_footer.html     |   4 +-
 phpBB/styles/prosilver/theme/colours.css      |  28 +++-
 phpBB/styles/prosilver/theme/common.css       | 127 +++++++-----------
 3 files changed, 73 insertions(+), 86 deletions(-)

diff --git a/phpBB/styles/prosilver/template/simple_footer.html b/phpBB/styles/prosilver/template/simple_footer.html
index 0a10f3b04c..69301571d7 100644
--- a/phpBB/styles/prosilver/template/simple_footer.html
+++ b/phpBB/styles/prosilver/template/simple_footer.html
@@ -9,9 +9,7 @@
 		<div id="darken" class="darken">&nbsp;</div>
 	</div>
 	<div id="loading_indicator" class="loading_indicator">
-		<div id="darken" class="darken">
-			<div class="loader">{L_Loading}...</div>
-		</div>
+		<div class="loader">{L_Loading}...</div>
 	</div>
 	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
 		<a href="#" class="alert_close">
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index 6f585b6b1d..bd0c6f5ac7 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -1333,12 +1333,32 @@ input.disabled {
 	background-color: #000000;
 }
 
-.loading_indicator .darken {
-	background-color: rgba(0, 0, 0, 0.5);
+.loader {
+	background: #0076b1;
 }
 
-.loader {
-	color: #ffffff;
+.loader:before {
+	background: #ffffff;
+}
+
+@-webkit-keyframes animate {
+	0% {
+		background: #0076b1;
+	}
+
+	50% {
+		background: #d31141;
+	}
+}
+
+@keyframes animate {
+	0% {
+		background: #0076b1;
+	}
+
+	50% {
+		background: #d31141;
+	}
 }
 
 .dropdown-extended ul li {
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index cb6ae84cb7..957ea3b9b7 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -1017,8 +1017,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
 	font-size: 1.1em;
 }
 
-.darkenwrapper,
-.loading_indicator {
+.darkenwrapper {
 	position: relative;
 	z-index: 44;
 	display: none;
@@ -1034,108 +1033,78 @@ fieldset.fields1 dl.pmlist dd.recipients {
 	height: 100%;
 }
 
-.loading_indicator .darken {
-	opacity: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+.loading_indicator {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	z-index: 51;
+	display: none;
 }
 
 .loader {
-	font-size: 90px;
-	text-indent: -9999em;
+	text-indent: -9999px;
 	border-radius: 50%;
 	position: relative;
-	overflow: hidden;
-	width: 1em;
-	height: 1em;
-	margin: 72px auto;
-	-ms-transform: translateZ(0);
-	-webkit-transform: translateZ(0);
-	transform: translateZ(0);
-	-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
-	animation: load6 1.7s infinite ease, round 1.7s infinite ease;
+	display: inline-block;
+	box-sizing: border-box;
+	width: 24px;
+	height: 24px;
+	animation: animate 1s ease-in-out infinite;
 }
 
-@-webkit-keyframes load6 {
+.loader:before {
+	border-radius: 0 12px 12px 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: inline-block;
+	box-sizing: border-box;
+	width: 12px;
+	height: 24px;
+	content: '';
+	animation: before 1s ease-in-out infinite;
+}
+
+@-webkit-keyframes before {
 	0% {
-		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+		opacity: 0.5;
+		transform: rotateY(0);
+		transform-origin: left center;
 	}
 
-	5%,
-	95% {
-		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
-	}
-
-	10%,
-	59% {
-		box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
-	}
-
-	20% {
-		box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
-	}
-
-	38% {
-		box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
+	30%,
+	70% {
+		opacity: 0.2;
+		transform: rotateY(180deg);
+		transform-origin: left center;
 	}
 
 	100% {
-		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+		opacity: 0.5;
+		transform: rotateY(0);
 	}
 }
 
-@keyframes load6 {
+@keyframes before {
 	0% {
-		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+		opacity: 0.5;
+		transform: rotateY(0);
+		transform-origin: left center;
 	}
 
-	5%,
-	95% {
-		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
-	}
-
-	10%,
-	59% {
-		box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
-	}
-
-	20% {
-		box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
-	}
-
-	38% {
-		box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
+	30%,
+	70% {
+		opacity: 0.2;
+		transform: rotateY(180deg);
+		transform-origin: left center;
 	}
 
 	100% {
-		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+		opacity: 0.5;
+		transform: rotateY(0);
 	}
 }
 
-@-webkit-keyframes round {
-	0% {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-
-	100% {
-		-webkit-transform: rotate(360deg);
-		transform: rotate(360deg);
-	}
-}
-
-@keyframes round {
-	0% {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-
-	100% {
-		-webkit-transform: rotate(360deg);
-		transform: rotate(360deg);
-	}
-}
 
 /* Miscellaneous styles
 ---------------------------------------- */