Added loader and fixed tabs

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2017-01-10 17:53:46 +01:00
parent e4b3ba6590
commit ef9e2e4e7d
No known key found for this signature in database
GPG Key ID: FB5ACEED51955BF8
1 changed files with 92 additions and 22 deletions

View File

@ -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-info-white {
background-image: url(../img/actions/info-white.svg?v=1);
}
.icon-checkmark-white {
background-image: url(../img/actions/checkmark-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 */