Merge branch 'release/4.3.0' into develop

[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 6271523af99e394d0d360bfdfcbf43a570863f6e..0082378e44add6f6500f04b69f562aa720f977a5 100644 (file)
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -155,13 +155,12 @@
   .vjs-live-control {
     line-height: $control-bar-height;
     min-width: 4em;
-    width: inherit;
   }
 
   .vjs-peertube {
     @include margin-right(6px);
+    @include margin-left(auto);
 
-    width: 100%;
     line-height: $control-bar-height;
     text-align: end;
     overflow: hidden;
@@ -358,11 +357,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 {
@@ -420,6 +421,10 @@
   }
 
   @media screen and (max-width: $screen-width-570) {
+    .vjs-volume-control {
+      display: none;
+    }
+
     .vjs-peertube {
       padding: 0 !important;
 
@@ -428,6 +433,10 @@
       }
     }
 
+    .vjs-peertube-link {
+      max-width: 100px;
+    }
+
     &.vjs-live {
       .vjs-duration {
         display: none !important;
@@ -440,7 +449,6 @@
   }
 
   @media screen and (max-width: $screen-width-350) {
-    .vjs-volume-control,
     .vjs-next-video,
     .vjs-previous-video {
       display: none !important;
@@ -458,6 +466,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;