Add play/pause bezels to the video player

1 files changed, 42 insertions, 0 deletions

diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
new file mode 100644
index 000000000..f1b1dcb4a
--- /dev/null
+++ b/client/src/sass/player/bezels.scss
@@ -0,0 +1,42 @@
+@keyframes bezels-fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+.vjs-bezel {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 52px;
+        height: 52px;
+        z-index: 19;
+        margin-left: -26px;
+        margin-top: -26px;
+        background: rgba(0,0,0,.5);
+        border-radius: 26px;
+        animation: bezels-fadeout .5s linear 1 normal forwards;
+  pointer-events: none;
+}
+
+.vjs-bezel-icon {
+        width: 36px;
+        height: 36px;
+  margin: 8px;
+  
+  svg .vjs-svg-fill {
+    fill: #fff;
+  }
+}
+
+.video-js {
+
+  .vjs-bezel-content {
+
+  }
+
+}
\ No newline at end of file