milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1945 from OancaAndrei/syncplay-enhanced

Browse source 
SyncPlay for TV series (and Music)
This commit is contained in:
Joshua M. Boniface 2020-12-04 20:22:38 -05:00 • committed by GitHub
commit bad0a23650
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 3840 additions and 1122 deletions
Download patch file Download diff file Expand all files Collapse all files

115
src/assets/css/videoosd.css
View file

@ -255,3 +255,118 @@
display: none !important;
}
}
.syncPlayContainer {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.primary-icon {
position: absolute;
font-size: 64px;
align-self: center;
}
.primary-icon.spin {
font-size: 76px !important;
animation: spin 2s linear infinite;
}
.secondary-icon {
position: absolute;
font-size: 24px;
}
.secondary-icon.centered {
font-size: 28px !important;
align-self: center;
}
.secondary-icon.shifted {
right: 0;
bottom: 0;
font-size: 52px;
}
.syncPlayIconCircle {
position: relative;
visibility: hidden;
display: flex;
justify-content: center;
border-radius: 50%;
margin: 60px;
height: 96px;
width: 96px;
color: rgba(0, 164, 220, 0);
background: rgba(0, 164, 220, 0);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0);
transform: scale(1);
}
.syncPlayIconCircle.oneShotPulse {
animation: pulse 1.5s 1;
}
.syncPlayIconCircle.infinitePulse {
animation: infinite-pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
color: rgba(0, 164, 220, 0.7);
background: rgba(0, 164, 220, 0.3);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0.3);
}
70% {
transform: scale(1);
color: rgba(0, 164, 220, 0);
background: rgba(0, 164, 220, 0);
box-shadow: 0 0 0 60px rgba(0, 164, 220, 0);
}
100% {
transform: scale(0.95);
color: rgba(0, 164, 220, 0);
background: rgba(0, 164, 220, 0);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0);
}
}
@keyframes infinite-pulse {
0% {
transform: scale(0.95);
color: rgba(0, 164, 220, 0.7);
background: rgba(0, 164, 220, 0.3);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0.3);
}
70% {
transform: scale(1);
color: rgba(0, 164, 220, 0.6);
background: rgba(0, 164, 220, 0);
box-shadow: 0 0 0 60px rgba(0, 164, 220, 0);
}
100% {
transform: scale(0.95);
color: rgba(0, 164, 220, 0.7);
background: rgba(0, 164, 220, 0.3);
box-shadow: 0 0 0 0 rgba(0, 164, 220, 0);
}
}
@keyframes spin {
100% {
transform: rotate(-360deg);
}
}