Update client according to new model paths

[github/Chocobozzz/PeerTube.git] / client / src / sass / player / peertube-skin.scss

diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index de6501962f1be234b5cbcb6519bc9d98f848931a..185b002223cdf395675cb670e7430db373bcf60a 100644 (file)
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -10,6 +10,7 @@
 }
 
 .video-js.vjs-peertube-skin {
+
   font-size: $font-size;
   color: $primary-foreground-color;
 
@@ -135,6 +136,7 @@
     .vjs-resolution-control,
     .vjs-fullscreen-control,
     .vjs-peertube-link,
+    .vjs-theater-control,
     .vjs-settings
     {
       color: $primary-foreground-color !important;
@@ -194,7 +196,7 @@
     }
 
     .vjs-progress-control:hover .vjs-slider,
-    .vjs-slider.vjs-sliding {
+    .vjs-progress-control .vjs-slider.vjs-sliding {
       height: 5px;
 
       .vjs-play-progress::before {
@@ -256,11 +258,11 @@
         display: none;
       }
 
-      .download-speed-number, .upload-speed-number, .peers-number {
+      .download-speed-number, .upload-speed-number, .peers-number, .http-fallback {
         font-weight: $font-semibold;
       }
 
-      .download-speed-text, .upload-speed-text, .peers-text {
+      .download-speed-text, .upload-speed-text, .peers-text, .http-fallback {
         margin-right: 15px;
       }
 
@@ -348,6 +350,11 @@
         max-height: 14px;
         height: 100%;
       }
+
+      &:focus {
+        text-shadow: none;
+        box-shadow: none;
+      }
     }
 
     .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
@@ -394,6 +401,27 @@
       padding: 0 5px;
     }
 
+    .vjs-theater-control {
+      @include disable-outline;
+
+      width: 37px;
+      margin-right: 1px;
+
+      .vjs-icon-placeholder {
+        transition: transform 0.2s ease;
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        vertical-align: middle;
+        background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
+        background-size: contain;
+
+        &::before {
+          content: '';
+        }
+      }
+    }
+
     .vjs-fullscreen-control {
       @include disable-outline;
 
@@ -440,6 +468,10 @@
   }
 
   @media screen and (max-width: 750px) {
+    .vjs-theater-control {
+      display: none;
+    }
+
     .vjs-dock-text {
       font-size: 16px;
     }
@@ -511,6 +543,24 @@
       width: 33px;
     }
   }
+
+  // Theater mode is enabled
+  &.vjs-theater-enabled {
+    .vjs-theater-control {
+      width: 30px;
+
+      .vjs-icon-placeholder {
+        transform: scale(0.8);
+      }
+    }
+  }
+
+  // On fullscreen, hide theater control
+  &.vjs-fullscreen {
+    .vjs-theater-control {
+      display: none;
+    }
+  }
 }
 
 // Play/pause animations