Added loader and fixed tabs

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

1 files changed, 93 insertions, 23 deletions

diff --git a/core/css/guest.css b/core/css/guest.css
index be7247d27cc..4f50e40d554 100644
--- 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 */