From 47e76c45b87b42f045ecb44a8a118255546a03b3 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 24 Nov 2015 20:32:21 +0100
Subject: [PATCH] Fixed package installation icon / updated spinner

---
 wcfsetup/install/files/acp/js/WCF.ACP.js    |  2 +-
 wcfsetup/install/files/style/icon/icon.scss | 20 +++++++++++++++---
 wcfsetup/install/files/style/ui/dialog.scss | 23 ++-------------------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index 3c41dab5b3..a30a1b1ff3 100644
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -701,7 +701,7 @@ WCF.ACP.Package.Installation = Class.extend({
 	 * @param	string		iconName
 	 */
 	_setIcon: function(iconName) {
-		this._dialog.find('.jsPackageInstallationStatus').removeClass('fa-check fa-question fa-times fa-spinner').addClass('icon-' + iconName);
+		this._dialog.find('.jsPackageInstallationStatus').removeClass('fa-check fa-question fa-times fa-spinner').addClass('fa-' + iconName);
 	}
 });
 
diff --git a/wcfsetup/install/files/style/icon/icon.scss b/wcfsetup/install/files/style/icon/icon.scss
index 61b43a83c6..a9e43c9568 100644
--- a/wcfsetup/install/files/style/icon/icon.scss
+++ b/wcfsetup/install/files/style/icon/icon.scss
@@ -116,11 +116,25 @@ a > span.fa:not(.pointer) {
 
 // spinner animation
 .fa-spinner {
-	height: auto;
+	animation: wcfSpinner .6s linear infinite;
+	// TODO: these colors shouldn't be hard-coded
+	border: 2px solid rgb(204, 204, 204);
+	border-top-color: rgb(79, 129, 189);
+	border-radius: 50%;
 	
-	-webkit-animation: spin 1s infinite steps(8);
-	animation: spin 1s infinite steps(8);
+	&::before {
+		display: none;
+	}
+}
+
+@-webkit-keyframes wcfSpinner {
+	to { -webkit-transform: rotate(360deg); }
 }
+
+@keyframes wcfSpinner {
+	to { transform: rotate(360deg); }
+}
+
 @-webkit-keyframes spin {
 	0% { -webkit-transform: rotate(0deg); }
 	100% { -webkit-transform: rotate(359deg); }
diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index 16c6ff3bae..e43fd3bd62 100644
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -160,10 +160,6 @@
 	margin-top: 0;
 }
 
-@keyframes wcfSpinner {
-	to { transform: rotate(360deg); }
-}
-
 .spinner {
 	background-color: rgb(255, 255, 255);
 	border: 1px solid rgb(204, 204, 204);
@@ -175,12 +171,10 @@
 	position: fixed;
 	text-align: center;
 	top: 200px;
-	visibility: hidden;
-	z-index: 401;
-	
 	transform: translateX(-50%);
-	
 	transition: visibility 0s linear .1s, opacity .1s linear;
+	visibility: hidden;
+	z-index: 401;
 	
 	&.active {
 		opacity: 1;
@@ -189,19 +183,6 @@
 		transition-delay: 0s;
 	}
 	
-	> .icon {
-		border: 2px solid rgb(204, 204, 204);
-		border-top-color: rgb(79, 129, 189);
-		border-radius: 50%;
-		height: 48px;
-		animation: wcfSpinner .6s linear infinite;
-		width: 48px;
-		
-		&::before {
-			display: none;
-		}
-	}
-	
 	> span:not(.icon) {
 		display: block;
 		margin-top: 5px;
-- 
2.20.1