X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fplayer%2Fcontrol-bar.scss;h=6271523af99e394d0d360bfdfcbf43a570863f6e;hb=6d9ed0b6cb439f53e6df2aa1e751369bdc0f76ab;hp=dd4e33e759208f75e1bc2cceb0054b0a90eed0a6;hpb=a5a79d15427372b581e34ac3999c73fc316699d5;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index dd4e33e75..6271523af 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -4,12 +4,18 @@
 @use './_player-variables' as *;
 
 .video-js.vjs-peertube-skin .vjs-control-bar {
+  z-index: 100;
+
   height: $control-bar-height;
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
   box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   transition: visibility 0.3s, opacity 0.3s !important;
 
+  &.control-bar-hidden {
+    display: none !important;
+  }
+
   > button:first-child {
     @include margin-left($first-control-bar-element-margin-left);
   }
@@ -49,10 +55,10 @@
     @include margin-left($progress-margin);
 
     position: absolute;
-    top: -10px;
+    top: $control-bar-slider-top;
     z-index: 100; // On top of the progress bar
     width: calc(100% - (2 * #{$progress-margin}));
-    height: 14px;
+    height: 20px;
 
     .vjs-slider {
       margin: 0;
@@ -96,7 +102,6 @@
     }
   }
 
-
   .vjs-play-control {
     @include disable-outline;
 
@@ -105,7 +110,9 @@
 
     .vjs-icon-placeholder::before {
       font-size: $control-bar-play-font-size;
-      line-height: initial;
+      line-height: unset;
+      position: relative;
+      top: -1px;
     }
   }
 
@@ -281,6 +288,11 @@
       max-width: $control-bar-icon-size;
       height: 100%;
       max-height: $control-bar-volume-slider-height;
+
+      &::before {
+        // Remove circle
+        content: '';
+      }
     }
 
     &:focus {
@@ -397,6 +409,14 @@
     .vjs-theater-control {
       display: none;
     }
+
+    .vjs-peertube {
+      .icon,
+      .download-speed-text,
+      .upload-speed-text {
+        display: none !important;
+      }
+    }
   }
 
   @media screen and (max-width: $screen-width-570) {