Only use woff2 for fonts

[github/Chocobozzz/PeerTube.git] / client / src / sass / video-js-custom.scss

diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 680958a9f8b0471785b3b2036d263bd094eab3ee..8de0784f99ec14325cc11112a19237455d33db31 100644 (file)
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -21,6 +21,8 @@ $slider-bg-color: lighten($primary-background-color, 33%);
 $setting-transition-duration: 0.15s;
 $setting-transition-easing: ease-out;
 
+$context-menu-width: 350px;
+
 .video-js.vjs-peertube-skin {
   font-size: $font-size;
   color: $primary-foreground-color;
@@ -128,39 +130,6 @@ $setting-transition-easing: ease-out;
     background-color: rgba($primary-background-color, 0.5);
   }
 
-  .vjs-slider {
-    background-color: rgba(255, 255, 255, .3);
-    border-radius: 2px;
-    height: 5px;
-
-    .vjs-slider-bar {
-      background: $primary-foreground-color;
-    }
-  }
-
-  .vjs-play-progress {
-
-    &::before {
-      top: -0.3em;
-
-      &:hover {
-        top: -0.372em;
-      }
-    }
-
-    .vjs-time-tooltip {
-      display: none;
-    }
-  }
-
-  .vjs-load-progress {
-    background: rgba($slider-bg-color, 0.5);
-
-    div {
-      background: rgba($slider-bg-color, 0.75);
-    }
-  }
-
   .vjs-poster {
     outline: none; /* Remove Blue Outline on Click*/
     outline: 0;
@@ -195,6 +164,38 @@ $setting-transition-easing: ease-out;
       opacity: $primary-foreground-opacity;
     }
 
+    .vjs-slider {
+      background-color: rgba(255, 255, 255, .2);
+      border-radius: 2px;
+      height: 5px;
+
+      .vjs-slider-bar {
+        background: $primary-foreground-color;
+      }
+    }
+
+    .vjs-play-progress {
+      padding-right: 4px;
+
+      &::before {
+        top: -0.3em;
+
+        &:hover {
+          top: -0.372em;
+        }
+      }
+
+      .vjs-time-tooltip {
+        display: none;
+      }
+    }
+
+    .vjs-load-progress {
+      &, & div {
+        background: rgba(255, 255, 255, .2);
+      }
+    }
+
     .vjs-progress-control {
       bottom: 34px;
       width: 100%;
@@ -217,6 +218,8 @@ $setting-transition-easing: ease-out;
     }
 
     .vjs-time-control {
+      line-height: inherit;
+
       &.vjs-current-time {
         font-size: $font-size;
         display: inline-block;
@@ -787,4 +790,32 @@ $setting-transition-easing: ease-out;
       }
     }
   }
+}
+
+/* Sass for videojs-contextmenu-ui */
+
+.video-js .vjs-contextmenu-ui-menu {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 5px 0;
+  width: $context-menu-width;
+
+  .vjs-menu-content {
+    opacity: $primary-foreground-opacity;
+    color: $primary-foreground-color;
+    font-size: $font-size !important;
+    font-weight: $font-semibold;
+  }
+
+  .vjs-menu-item {
+    cursor: pointer;
+    font-size: 1em;
+    padding: 8px 16px;
+    text-align: left;
+    text-transform: none;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
 }
\ No newline at end of file