mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
6f21a963ea
commit
823f69bb92
68 changed files with 303 additions and 388 deletions
|
@ -1,14 +1,15 @@
|
|||
.mdl-spinner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-spinner.is-active {
|
||||
-webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
|
||||
animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
|
||||
}
|
||||
.mdlSpinnerActive {
|
||||
display: inline-block;
|
||||
-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 {
|
||||
|
@ -35,11 +36,7 @@
|
|||
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 {
|
||||
.mdlSpinnerActive .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;
|
||||
}
|
||||
|
@ -48,11 +45,7 @@
|
|||
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 {
|
||||
.mdlSpinnerActive .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;
|
||||
}
|
||||
|
@ -61,11 +54,7 @@
|
|||
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 {
|
||||
.mdlSpinnerActive .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;
|
||||
}
|
||||
|
@ -74,11 +63,7 @@
|
|||
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 {
|
||||
.mdlSpinnerActive .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;
|
||||
}
|
||||
|
@ -360,30 +345,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
@ -414,25 +375,25 @@
|
|||
left: 0;
|
||||
}
|
||||
|
||||
.mdl-spinner__left .mdl-spinner__circle {
|
||||
.mdl-spinner__circleLeft {
|
||||
border-right-color: transparent !important;
|
||||
-webkit-transform: rotate(129deg);
|
||||
transform: rotate(129deg);
|
||||
}
|
||||
|
||||
.mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
|
||||
.mdlSpinnerActive .mdl-spinner__circleLeft {
|
||||
-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 {
|
||||
.mdl-spinner__circleRight {
|
||||
left: -100%;
|
||||
border-left-color: transparent !important;
|
||||
-webkit-transform: rotate(-129deg);
|
||||
transform: rotate(-129deg);
|
||||
}
|
||||
|
||||
.mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
|
||||
.mdlSpinnerActive .mdl-spinner__circleRight {
|
||||
-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;
|
||||
}
|
||||
|
@ -516,7 +477,3 @@
|
|||
z-index: 9999999;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.loadingHide {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
@ -13,23 +13,20 @@ define(['css!./loading-lite'], function () {
|
|||
|
||||
elem.classList.add('docspinner');
|
||||
elem.classList.add('mdl-spinner');
|
||||
elem.classList.add('mdl-js-spinner');
|
||||
|
||||
elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div>';
|
||||
elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div>';
|
||||
|
||||
document.body.appendChild(elem);
|
||||
}
|
||||
|
||||
elem.classList.add('is-active');
|
||||
elem.classList.remove('loadingHide');
|
||||
elem.classList.add('mdlSpinnerActive');
|
||||
},
|
||||
hide: function () {
|
||||
var elem = loadingElem;
|
||||
|
||||
if (elem) {
|
||||
|
||||
elem.classList.remove('is-active');
|
||||
elem.classList.add('loadingHide');
|
||||
elem.classList.remove('mdlSpinnerActive');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,14 +0,0 @@
|
|||
.docspinner {
|
||||
margin-top: -5vh;
|
||||
margin-left: -5vh;
|
||||
width: 10vh;
|
||||
height: 10vh;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
.loadingHide {
|
||||
display: none !important;
|
||||
}
|
|
@ -1,28 +0,0 @@
|
|||
define(['paper-spinner', 'css!./loading'], function () {
|
||||
|
||||
return {
|
||||
show: function () {
|
||||
var elem = document.querySelector('.docspinner');
|
||||
|
||||
if (!elem) {
|
||||
|
||||
elem = document.createElement("paper-spinner");
|
||||
elem.classList.add('docspinner');
|
||||
|
||||
document.body.appendChild(elem);
|
||||
}
|
||||
|
||||
elem.active = true;
|
||||
elem.classList.remove('loadingHide');
|
||||
},
|
||||
hide: function () {
|
||||
var elem = document.querySelector('.docspinner');
|
||||
|
||||
if (elem) {
|
||||
|
||||
elem.active = false;
|
||||
elem.classList.add('loadingHide');
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue