Fixed package installation icon / updated spinner

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index 3c41dab5b3a4d3c3e675639effea0f8f2d12bcb0..a30a1b1ff312dd682ffe5625daa13730fbfde623 100644 (file)
--- 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 61b43a83c6ec74ce8b8d7c1a70f3ac3834c0558e..a9e43c9568f0ea6d2132c2828df0b0707b6891e4 100644 (file)
--- 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 16c6ff3baed9046911152d322da111f4ad8a8164..e43fd3bd627179c64a326bc5eb756209869defb2 100644 (file)
--- 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;