Added loader and fixed tabs

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

diff --git a/core/css/guest.css b/core/css/guest.css
index be7247d27ccc76af5579450a20b2d749ae279a92..4f50e40d55448f27fb35411f30bae69fe97a5ffc 100644 (file)
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -511,12 +511,12 @@ fieldset.update legend + p {
        margin-bottom: 15px;
 }
 p.info {
-    margin: 0 auto;
-    padding-top: 20px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+       margin: 0 auto;
+       padding-top: 20px;
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       -ms-user-select: none;
+       user-select: none;
 }
 
 /* Update */
@@ -541,32 +541,102 @@ p.info {
        border-bottom: 1px solid #aaa;
 }
 .update a.update-show-detailed {
-    border-bottom: inherit;
+       border-bottom: inherit;
 }
 #update-progress-detailed {
-    text-align: left;
+       text-align: left;
 }
 .update-show-detailed {
-    padding: 13px;
-    display: block;
-    opacity: .75;
+       padding: 13px;
+       display: block;
+       opacity: .75;
 }
 #update-progress-icon {
-    height: 32px;
-    margin: 10px;
-    background-size: 32px;
+       height: 32px;
+       margin: 10px;
+       background-size: 32px;
 }
 
 /* Icons */
-[class^="icon-"],
-[class*=" icon-"] {
-    background-repeat: no-repeat;
-    background-position: center;
-    min-width: 16px;
-    min-height: 16px;
-}
-.icon-checkmark-white {
-    background-image: url(../img/actions/checkmark-white.svg?v=1);
+.icon-info-white {
+       background-image: url(../img/actions/info-white.svg?v=1);
+}
+
+/* Loading */
+.float-spinner {
+       margin-top: -32px;
+       padding-top: 32px;
+}
+[class^='icon-'], [class*=' icon-'] {
+       background-repeat: no-repeat;
+       background-position: center;
+       min-width: 16px;
+       min-height: 16px;
+}
+.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
+       position: relative;
+}
+.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
+       z-index: 2;
+       content: '';
+       height: 32px;
+       width: 32px;
+       margin: -17px 0 0 -17px;
+       position: absolute;
+       top: 50%;
+       left: 50%;
+       border-radius: 100%;
+       -webkit-animation: rotate .8s infinite linear;
+       animation: rotate .8s infinite linear;
+       -webkit-transform-origin: center;
+       -ms-transform-origin: center;
+       transform-origin: center;
+}
+.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
+       border: 2px solid rgba(150, 150, 150, 0.5);
+       border-top-color: #646464;
+}
+.icon-loading-dark:after, .icon-loading-small-dark:after {
+       border: 2px solid rgba(187, 187, 187, 0.5);
+       border-top-color: #bbb;
+}
+.icon-loading-small:after, .icon-loading-small-dark:after {
+       height: 16px;
+       width: 16px;
+       margin: -9px 0 0 -9px;
+}
+/* Css replaced elements don't have ::after nor ::before */
+img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading {
+       background-image: url("../img/loading.gif");
+}
+img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark {
+       background-image: url("../img/loading-dark.gif");
+}
+img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small {
+       background-image: url("../img/loading-small.gif");
+}
+img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark {
+       background-image: url("../img/loading-small-dark.gif");
+}
+@-webkit-keyframes rotate {
+       from {
+       -webkit-transform: rotate(0deg);
+       transform: rotate(0deg);
+       }
+       to {
+       -webkit-transform: rotate(360deg);
+       transform: rotate(360deg);
+       }
+}
+@keyframes rotate {
+       from {
+       -webkit-transform: rotate(0deg);
+       transform: rotate(0deg);
+       }
+       to {
+       -webkit-transform: rotate(360deg);
+       transform: rotate(360deg);
+       }
 }
 
 /* FOOTER */