Add back to live feature

[github/Chocobozzz/PeerTube.git] / client / src / sass / player / control-bar.scss

diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index e8b447b9e65d8f619aa699059ebd53afc44b1f2d..96b3adf66caf58179c287b9cd5b350cac54bb768 100644 (file)
--- 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;
@@ -147,15 +153,31 @@
   }
 
   .vjs-live-control {
-    line-height: $control-bar-height;
-    min-width: 4em;
-    width: inherit;
+    padding: 5px 7px;
+    border-radius: 3px;
+    height: fit-content;
+    margin: auto 10px;
+    font-weight: bold;
+    max-width: fit-content;
+    opacity: 1 !important;
+    line-height: normal;
+    position: relative;
+    top: -1px;
+
+    &.synced-with-live-edge {
+      background: #d7281c;
+    }
+
+    &:not(.synced-with-live-edge) {
+      cursor: pointer;
+      background: #80807f;
+    }
   }
 
   .vjs-peertube {
     @include margin-right(6px);
+    @include margin-left(auto);
 
-    width: 100%;
     line-height: $control-bar-height;
     text-align: end;
     overflow: hidden;
@@ -352,11 +374,13 @@
   .vjs-peertube-link {
     @include disable-outline;
     @include disable-default-a-behaviour;
+    @include ellipsis;
 
     text-decoration: none;
     line-height: $control-bar-height;
     font-weight: $font-semibold;
     padding: 0 5px;
+    max-width: 150px;
   }
 
   .vjs-theater-control {
@@ -403,9 +427,21 @@
     .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) {
+    .vjs-volume-control {
+      display: none;
+    }
+
     .vjs-peertube {
       padding: 0 !important;
 
@@ -414,6 +450,10 @@
       }
     }
 
+    .vjs-peertube-link {
+      max-width: 100px;
+    }
+
     &.vjs-live {
       .vjs-duration {
         display: none !important;
@@ -426,7 +466,6 @@
   }
 
   @media screen and (max-width: $screen-width-350) {
-    .vjs-volume-control,
     .vjs-next-video,
     .vjs-previous-video {
       display: none !important;
@@ -444,6 +483,12 @@
       @include margin-right($first-control-bar-element-margin-left-small-width);
     }
 
+    .vjs-play-control {
+      @include margin-left(0);
+
+      width: 30px;
+    }
+
     &.vjs-live {
       .vjs-current-time {
         display: none !important;