css animations are not stopped when window is out of focus
This commit is contained in:
booploops
parent
35eb7a2112
commit
52edbaabc3
2 changed files with 153 additions and 101 deletions
|
|
@ -3270,11 +3270,13 @@ const app = new Vue({
|
|||
document.querySelectorAll(".animated-artwork-video").forEach(el => {
|
||||
el.play()
|
||||
})
|
||||
document.querySelector("body").classList.remove("stopanimation")
|
||||
this.animateBackground = true
|
||||
} else {
|
||||
document.querySelectorAll(".animated-artwork-video").forEach(el => {
|
||||
el.pause()
|
||||
})
|
||||
document.querySelector("body").classList.add("stopanimation")
|
||||
this.animateBackground = false
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -83,6 +83,10 @@ body.notransparency::before {
|
|||
background-image: url(data:image/png;base64,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);
|
||||
}
|
||||
|
||||
body.stopanimation * {
|
||||
animation: unset !important;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
|
|
@ -159,6 +163,7 @@ body.notransparency::before {
|
|||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
//&::before {
|
||||
// position: absolute;
|
||||
// top: -50%;
|
||||
|
|
@ -1107,15 +1112,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
|
||||
.app-playback-controls:hover .marquee {
|
||||
animation: unset;
|
||||
|
||||
&.song-artist {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.song-name {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: none !important;
|
||||
display: none;
|
||||
|
|
@ -1125,23 +1134,25 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
|
||||
.marquee {
|
||||
animation: marquee 15s linear infinite;
|
||||
|
||||
&.song-artist {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
&.song-name {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(data-value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-progress {
|
||||
@bgColor: transparent;
|
||||
//height: 16px;
|
||||
|
|
@ -1241,13 +1252,16 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--selected-click);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
--url: url('views/svg/more.svg') !important;
|
||||
}
|
||||
|
|
@ -1275,6 +1289,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item > .app-playback-controls > div > .song-artist-album {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
|
@ -1382,7 +1397,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
|
||||
|
||||
|
||||
.display--large {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -2776,6 +2790,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 50px;
|
||||
height: 42px;
|
||||
|
|
@ -2852,7 +2867,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* Album / Playlist Page */
|
||||
.playlist-page {
|
||||
--bgColor: transparent;
|
||||
|
|
@ -3072,6 +3086,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Collection Page
|
||||
.collection-page {
|
||||
padding-bottom: 128px;
|
||||
|
|
@ -3264,6 +3279,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
|
||||
}
|
||||
}
|
||||
|
||||
.artist-title {
|
||||
|
||||
.artist-play {
|
||||
|
|
@ -3417,6 +3433,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
padding: 6px;
|
||||
display: flex;
|
||||
background: rgb(200 200 200 / 10%);
|
||||
|
||||
.menu-option-header {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -3443,6 +3460,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-panel-body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
@ -3540,6 +3558,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.infinity {
|
||||
content: url("./assets/infinity.svg");
|
||||
margin: auto;
|
||||
|
|
@ -3720,15 +3739,33 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
/* CSS.gg
|
||||
*/
|
||||
@keyframes load-bar {
|
||||
10% {box-shadow: inset 0 -4px 0}
|
||||
20% {box-shadow: inset 0 -10px 0}
|
||||
30% {box-shadow: inset 0 -12px 0}
|
||||
40% {box-shadow: inset 0 -8px 0}
|
||||
50% {box-shadow: inset 0 -4px 0}
|
||||
60% {box-shadow: inset 0 -6px 0}
|
||||
80% {box-shadow: inset 0 -12px 0}
|
||||
90% {box-shadow: inset 0 -6px 0}
|
||||
to {box-shadow: inset 0 -2px 0}
|
||||
10% {
|
||||
box-shadow: inset 0 -4px 0
|
||||
}
|
||||
20% {
|
||||
box-shadow: inset 0 -10px 0
|
||||
}
|
||||
30% {
|
||||
box-shadow: inset 0 -12px 0
|
||||
}
|
||||
40% {
|
||||
box-shadow: inset 0 -8px 0
|
||||
}
|
||||
50% {
|
||||
box-shadow: inset 0 -4px 0
|
||||
}
|
||||
60% {
|
||||
box-shadow: inset 0 -6px 0
|
||||
}
|
||||
80% {
|
||||
box-shadow: inset 0 -12px 0
|
||||
}
|
||||
90% {
|
||||
box-shadow: inset 0 -6px 0
|
||||
}
|
||||
to {
|
||||
box-shadow: inset 0 -2px 0
|
||||
}
|
||||
}
|
||||
|
||||
.loadbar-sound,
|
||||
|
|
@ -3740,6 +3777,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
height: 28px;
|
||||
box-shadow: inset 0 -12px 0;
|
||||
}
|
||||
|
||||
.loadbar-sound {
|
||||
margin-left: 22px;
|
||||
margin-top: -16px;
|
||||
|
|
@ -3748,16 +3786,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
color: var(--keyColor);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loadbar-sound::after,
|
||||
.loadbar-sound::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0
|
||||
}
|
||||
|
||||
.loadbar-sound::before {
|
||||
left: -4.5px;
|
||||
animation-delay: -2.4s
|
||||
}
|
||||
|
||||
.loadbar-sound::after {
|
||||
right: -4.2px;
|
||||
animation-delay: -3.7s
|
||||
|
|
@ -5105,6 +5146,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
z-index: 3;
|
||||
opacity: 0;
|
||||
padding: 3%;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -5250,6 +5292,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.grid-body {
|
||||
display: grid;
|
||||
grid-auto-flow: column dense;
|
||||
|
|
@ -5286,6 +5329,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
font-size: 1.0em;
|
||||
background: rgb(255 255 255 / 3%);
|
||||
}
|
||||
|
||||
.settings-option-body {
|
||||
margin: 16px;
|
||||
}
|
||||
|
|
@ -5799,6 +5843,7 @@ body.no-gpu {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: block;
|
||||
|
||||
|
|
@ -5812,12 +5857,14 @@ body.no-gpu {
|
|||
justify-items: center;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.input-container.mini {
|
||||
display: inline-grid;
|
||||
width: 43px;
|
||||
justify-items: center;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.freq-header {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
|
@ -5827,14 +5874,17 @@ body.no-gpu {
|
|||
margin-left: 25%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input.eq-slider {
|
||||
-webkit-appearance: slider-vertical;
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
padding: unset;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.header input.eq-slider {
|
||||
-webkit-appearance: slider-vertical;
|
||||
width: 5%;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue