X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fvideo-js-custom.scss;h=8de0784f99ec14325cc11112a19237455d33db31;hb=fa40cbc3b26e2a7b01a6273def62fa8bb552c7b6;hp=c533bd1166828721526621a95356578e79a48351;hpb=33d7855229f45d73a767566f1dbcb87709211ebf;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index c533bd116..8de0784f9 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,6 +1,13 @@
 @import '_variables';
 @import '_mixins';
 
+@mixin big-play-button-triangle-size($triangle-size) {
+  width: $triangle-size;
+  height: $triangle-size;
+  top: calc(50% - #{$triangle-size / 2});
+  left: calc(53% - #{($triangle-size / 2)});
+}
+
 $primary-foreground-color: #fff;
 $primary-foreground-opacity: 0.9;
 $primary-foreground-opacity-hover: 1;
@@ -14,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;
@@ -59,7 +68,7 @@ $setting-transition-easing: ease-out;
     $big-play-width: 1.2em;
     $big-play-height: 1.2em;
 
-    border: 0;
+    border: 6px solid #fff;
     border-radius: 100%;
 
     left: 50%;
@@ -69,7 +78,7 @@ $setting-transition-easing: ease-out;
     line-height: $big-play-height;
     margin-left: -($big-play-width / 2);
     margin-top: -($big-play-height / 2);
-    transition: opacity 0.5s;
+    transition: 0.4s opacity;
 
     &::-moz-focus-inner {
       border: 0;
@@ -77,84 +86,50 @@ $setting-transition-easing: ease-out;
     }
 
     .vjs-icon-placeholder::before {
-      transition: font-size 0.5s, opacity 0.5s;
+      @include big-play-button-triangle-size(45px);
+
+      content: '';
+      background-image: url('../assets/player/images/big-play-button.svg');
     }
 
     &:hover {
       opacity: 0.8;
-
-      .vjs-icon-placeholder::before {
-        font-size: 110%;
-      }
     }
   }
 
-  &.vjs-has-started .vjs-big-play-button {
-    display: block;
-    visibility: hidden;
-
-    &, &::before {
-      opacity: 0;
-      transition: visibility 0.1s, opacity 0.1s;
-    }
-  }
+  // Small effect when we click on the play button
+  &.vjs-has-big-play-button-clicked {
 
-  &.vjs-has-started video {
-    background-color: #000;
-    animation: fade-black-on-play 0.5s linear;
+    .vjs-big-play-button, .vjs-poster {
+      display: block;
+      visibility: hidden;
 
-    @keyframes fade-black-on-play {
-      0% {
-        opacity: 1;
-      }
-      50% {
+      &.vjs-big-play-button, &.vjs-big-play-button::before {
         opacity: 0;
+        transition: visibility 0.2s, opacity 0.2s;
       }
-      100% {
-        opacity: 1;
+
+      &.vjs-poster, &.vjs-poster::before {
+        opacity: 0;
+        transition: visibility 0.3s, opacity 0.3s;
+        transition-delay: 0.05s;
       }
     }
   }
 
+  // Hide the big play button on autoplay
+  &.vjs-has-autoplay {
+    .vjs-big-play-button {
+      display: none !important;
+    }
+  }
+
   .vjs-control-bar,
   .vjs-big-play-button,
   .vjs-settings-dialog {
     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;
@@ -189,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%;
@@ -211,6 +218,8 @@ $setting-transition-easing: ease-out;
     }
 
     .vjs-time-control {
+      line-height: inherit;
+
       &.vjs-current-time {
         font-size: $font-size;
         display: inline-block;
@@ -435,17 +444,37 @@ $setting-transition-easing: ease-out;
     }
   }
 
-  @media screen and (max-width: 570px) {
+  @media screen and (max-width: 750px) {
     .vjs-dock-text {
-      font-size: 14px;
+      font-size: 16px;
     }
 
     .vjs-dock-description {
       font-size: 9px;
     }
 
+    .vjs-big-play-button {
+      font-size: 5em;
+      border-width: 5px;
+
+      .vjs-icon-placeholder::before {
+        @include big-play-button-triangle-size(32px);
+      }
+    }
+  }
+
+  @media screen and (max-width: 570px) {
+    .vjs-dock-text {
+      font-size: 14px;
+    }
+
     .vjs-big-play-button {
       font-size: 4.5em;
+      border-width: 4.5px;
+
+      .vjs-icon-placeholder::before {
+        @include big-play-button-triangle-size(27px);
+      }
     }
 
     .vjs-playback-rate {
@@ -468,15 +497,23 @@ $setting-transition-easing: ease-out;
 
     .vjs-big-play-button {
       font-size: 3em;
+      border-width: 3px;
+
+      .vjs-icon-placeholder::before {
+        @include big-play-button-triangle-size(20px);
+      }
     }
 
     .vjs-volume-control {
       display: none !important;
     }
 
-    .vjs-volume-panel {
-      width: 26px !important;
-      margin-right: 83px !important;
+    .vjs-peertube-link {
+      padding: 0 !important;
+    }
+
+    .vjs-settings {
+      width: 33px;
     }
   }
 }
@@ -638,6 +675,11 @@ $setting-transition-easing: ease-out;
     .vjs-settings-sub-menu-value {
       width: 100%;
       text-align: right;
+
+      small {
+        font-size: 0.85em;
+        opacity: 0.8;
+      }
     }
 
     .vjs-settings-panel {
@@ -748,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