mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 11:28:23 -07:00
523 lines
10 KiB
CSS
523 lines
10 KiB
CSS
.mdl-spinner {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.mdl-spinner.is-active {
|
|
-webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
|
|
animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes mdl-spinner__container-rotate {
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes mdl-spinner__container-rotate {
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.mdl-spinner__layer {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.mdl-spinner__layer-1 {
|
|
border-color: rgb(66,165,245);
|
|
}
|
|
|
|
.mdl-spinner--single-color .mdl-spinner__layer-1 {
|
|
border-color: rgb(63,81,181);
|
|
}
|
|
|
|
.mdl-spinner.is-active .mdl-spinner__layer-1 {
|
|
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
}
|
|
|
|
.mdl-spinner__layer-2 {
|
|
border-color: rgb(244,67,54);
|
|
}
|
|
|
|
.mdl-spinner--single-color .mdl-spinner__layer-2 {
|
|
border-color: rgb(63,81,181);
|
|
}
|
|
|
|
.mdl-spinner.is-active .mdl-spinner__layer-2 {
|
|
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
}
|
|
|
|
.mdl-spinner__layer-3 {
|
|
border-color: rgb(253,216,53);
|
|
}
|
|
|
|
.mdl-spinner--single-color .mdl-spinner__layer-3 {
|
|
border-color: rgb(63,81,181);
|
|
}
|
|
|
|
.mdl-spinner.is-active .mdl-spinner__layer-3 {
|
|
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
}
|
|
|
|
.mdl-spinner__layer-4 {
|
|
border-color: rgb(76,175,80);
|
|
}
|
|
|
|
.mdl-spinner--single-color .mdl-spinner__layer-4 {
|
|
border-color: rgb(63,81,181);
|
|
}
|
|
|
|
.mdl-spinner.is-active .mdl-spinner__layer-4 {
|
|
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
}
|
|
|
|
@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
|
|
12.5% {
|
|
-webkit-transform: rotate(135deg);
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: rotate(270deg);
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
37.5% {
|
|
-webkit-transform: rotate(405deg);
|
|
transform: rotate(405deg);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(540deg);
|
|
transform: rotate(540deg);
|
|
}
|
|
|
|
62.5% {
|
|
-webkit-transform: rotate(675deg);
|
|
transform: rotate(675deg);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: rotate(810deg);
|
|
transform: rotate(810deg);
|
|
}
|
|
|
|
87.5% {
|
|
-webkit-transform: rotate(945deg);
|
|
transform: rotate(945deg);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(1080deg);
|
|
transform: rotate(1080deg);
|
|
}
|
|
}
|
|
|
|
@keyframes mdl-spinner__fill-unfill-rotate {
|
|
12.5% {
|
|
-webkit-transform: rotate(135deg);
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform: rotate(270deg);
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
37.5% {
|
|
-webkit-transform: rotate(405deg);
|
|
transform: rotate(405deg);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(540deg);
|
|
transform: rotate(540deg);
|
|
}
|
|
|
|
62.5% {
|
|
-webkit-transform: rotate(675deg);
|
|
transform: rotate(675deg);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform: rotate(810deg);
|
|
transform: rotate(810deg);
|
|
}
|
|
|
|
87.5% {
|
|
-webkit-transform: rotate(945deg);
|
|
transform: rotate(945deg);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(1080deg);
|
|
transform: rotate(1080deg);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* HACK: Even though the intention is to have the current .mdl-spinner__layer-N
|
|
* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
|
|
* to do proper subpixel rendering for the elements being animated. This is
|
|
* especially visible in Chrome 39 on Ubuntu 14.04. See:
|
|
*
|
|
* - https://github.com/Polymer/paper-spinner/issues/9
|
|
* - https://code.google.com/p/chromium/issues/detail?id=436255
|
|
*/
|
|
@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
|
|
from {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
25% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
26% {
|
|
opacity: 0;
|
|
}
|
|
|
|
89% {
|
|
opacity: 0;
|
|
}
|
|
|
|
90% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.99;
|
|
}
|
|
}
|
|
|
|
@keyframes mdl-spinner__layer-1-fade-in-out {
|
|
from {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
25% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
26% {
|
|
opacity: 0;
|
|
}
|
|
|
|
89% {
|
|
opacity: 0;
|
|
}
|
|
|
|
90% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.99;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
15% {
|
|
opacity: 0;
|
|
}
|
|
|
|
25% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
51% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes mdl-spinner__layer-2-fade-in-out {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
15% {
|
|
opacity: 0;
|
|
}
|
|
|
|
25% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
51% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
75% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
76% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes mdl-spinner__layer-3-fade-in-out {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
75% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
76% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
65% {
|
|
opacity: 0;
|
|
}
|
|
|
|
75% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
90% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes mdl-spinner__layer-4-fade-in-out {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
65% {
|
|
opacity: 0;
|
|
}
|
|
|
|
75% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
90% {
|
|
opacity: 0.99;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Patch the gap that appear between the two adjacent
|
|
* div.mdl-spinner__circle-clipper while the spinner is rotating
|
|
* (appears on Chrome 38, Safari 7.1, and IE 11).
|
|
*
|
|
* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
|
|
* opacity is 0.99, but still does on Safari and IE.
|
|
*/
|
|
.mdl-spinner__gap-patch {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
top: 0;
|
|
left: 45%;
|
|
width: 10%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-color: inherit;
|
|
}
|
|
|
|
.mdl-spinner__gap-patch .mdl-spinner__circle {
|
|
width: 1000%;
|
|
left: -450%;
|
|
}
|
|
|
|
.mdl-spinner__circle-clipper {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 50%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-color: inherit;
|
|
}
|
|
|
|
.mdl-spinner__circle-clipper .mdl-spinner__circle {
|
|
width: 200%;
|
|
}
|
|
|
|
.mdl-spinner__circle {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
border-width: 3px;
|
|
border-style: solid;
|
|
border-color: inherit;
|
|
border-bottom-color: transparent !important;
|
|
border-radius: 50%;
|
|
-webkit-animation: none;
|
|
animation: none;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.mdl-spinner__left .mdl-spinner__circle {
|
|
border-right-color: transparent !important;
|
|
-webkit-transform: rotate(129deg);
|
|
transform: rotate(129deg);
|
|
}
|
|
|
|
.mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
|
|
-webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
}
|
|
|
|
.mdl-spinner__right .mdl-spinner__circle {
|
|
left: -100%;
|
|
border-left-color: transparent !important;
|
|
-webkit-transform: rotate(-129deg);
|
|
transform: rotate(-129deg);
|
|
}
|
|
|
|
.mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
|
|
-webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
}
|
|
|
|
@-webkit-keyframes mdl-spinner__left-spin {
|
|
from {
|
|
-webkit-transform: rotate(130deg);
|
|
transform: rotate(130deg);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(-5deg);
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(130deg);
|
|
transform: rotate(130deg);
|
|
}
|
|
}
|
|
|
|
@keyframes mdl-spinner__left-spin {
|
|
from {
|
|
-webkit-transform: rotate(130deg);
|
|
transform: rotate(130deg);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(-5deg);
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(130deg);
|
|
transform: rotate(130deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes mdl-spinner__right-spin {
|
|
from {
|
|
-webkit-transform: rotate(-130deg);
|
|
transform: rotate(-130deg);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(5deg);
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(-130deg);
|
|
transform: rotate(-130deg);
|
|
}
|
|
}
|
|
|
|
@keyframes mdl-spinner__right-spin {
|
|
from {
|
|
-webkit-transform: rotate(-130deg);
|
|
transform: rotate(-130deg);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: rotate(5deg);
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(-130deg);
|
|
transform: rotate(-130deg);
|
|
}
|
|
}
|
|
|
|
.docspinner {
|
|
margin-top: -5vh;
|
|
margin-left: -5vh;
|
|
width: 10vh;
|
|
height: 10vh;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 9999999;
|
|
contain: layout style;
|
|
}
|
|
|
|
.loadingHide {
|
|
display: none !important;
|
|
}
|