Refactoring margin and padding mixins

[github/Chocobozzz/PeerTube.git] / client / src / sass / player / mobile.scss

diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index dde2c3127a71992ab7823f961d7e8be9208927af..84d7a00f1b67c1f57fbb38c5fa8ea38b03203d01 100644 (file)
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -1,5 +1,7 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 /* Special mobile style */
 
@@ -14,3 +16,162 @@
     }
   }
 }
+
+.vjs-mobile-buttons-overlay {
+  display: none;
+
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+  top: 0;
+
+  .vjs-user-active,
+  .vjs-paused {
+    display: block;
+  }
+
+  .main-button,
+  .rewind-button,
+  .forward-button {
+    width: fit-content;
+    height: fit-content;
+    position: relative;
+    top: calc(50% - 10px);
+    transform: translateY(-50%);
+    user-select: none;
+  }
+
+  .main-button,
+  .rewind-button .icon,
+  .forward-button .icon {
+    font-family: VideoJS;
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  .main-button {
+    font-size: 5em;
+    margin: auto;
+  }
+
+  .rewind-button,
+  .forward-button {
+    margin: 0 10px;
+    position: absolute;
+    text-align: center;
+
+    .icon {
+      opacity: 0;
+      animation: fadeInAndOut 1s linear infinite;
+
+      &::before {
+        font-size: 20px;
+        content: '\f101';
+        display: inline-block;
+        width: 16px;
+      }
+    }
+  }
+
+  .forward-button {
+    right: 5px;
+
+    .icon {
+      &::before {
+        margin-left: -2px;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.25s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.5s;
+      }
+    }
+  }
+
+  .rewind-button {
+    left: 5px;
+
+    .icon {
+      &::before {
+        margin-right: -2px;
+        transform: scaleX(-1);
+      }
+
+      &:nth-child(1) {
+        animation-delay: 0.5s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.25s;
+      }
+    }
+  }
+}
+
+.vjs-paused {
+  .main-button {
+    &::before {
+      content: '\f101';
+    }
+  }
+}
+
+.vjs-playing {
+  .main-button {
+    &::before {
+      content: '\f103';
+    }
+  }
+}
+
+.vjs-ended {
+  .main-button {
+    &::before {
+      content: '\f116';
+    }
+  }
+}
+
+.vjs-has-started {
+
+  &.vjs-user-active,
+  &.vjs-paused {
+    .vjs-mobile-buttons-overlay {
+      display: block;
+    }
+  }
+
+  &.vjs-scrubbing {
+    .vjs-mobile-buttons-overlay {
+      display: none;
+    }
+  }
+
+  &.vjs-seeking,
+  &.vjs-waiting,
+  &.vjs-fast-seeking {
+    .main-button {
+      display: none;
+    }
+  }
+}
+
+@keyframes fadeInAndOut {
+  0%,
+  20% {
+    opacity: 0;
+  }
+
+  60%,
+  70% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}