Add playlist-sync and group-wait to SyncPlay

2020-09-25 09:44:30 +02:00
parent 46a0382c0a
commit d8beb9909f
41 changed files with 3880 additions and 1125 deletions
@@ -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);
+    }
+}