]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/commitdiff
Add opacity effect on control bar icons
authorChocobozzz <me@florianbigard.com>
Thu, 29 Mar 2018 14:28:07 +0000 (16:28 +0200)
committerChocobozzz <me@florianbigard.com>
Tue, 3 Apr 2018 10:06:28 +0000 (12:06 +0200)
client/src/assets/player/peertube-videojs-plugin.ts
client/src/sass/video-js-custom.scss

index 4843e3d8a4ff08c8be1fe5e8c7e8392a1fd61446..22cb27da3e4181b9c97f0d41fef34828e4de8013 100644 (file)
@@ -126,6 +126,10 @@ class ResolutionMenuButton extends MenuButton {
   buildCSSClass () {
     return super.buildCSSClass() + ' vjs-resolution-button'
   }
+
+  buildWrapperCSSClass () {
+    return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
+  }
 }
 MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
 
index 4ef1693b54a04c783297c5b180e651a68adbecc8..2fa3527a80a86eee241567ac3176d89adbbe7bcf 100644 (file)
@@ -1,7 +1,7 @@
 @import '_variables';
 @import '_mixins';
 
-$primary-foreground-color: #fff;
+$primary-foreground-color: #eee;
 $primary-foreground-opacity: 0.9;
 $primary-foreground-opacity-hover: 1;
 $primary-background-color: #000;
@@ -13,7 +13,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
 
 .video-js.vjs-peertube-skin {
   font-size: $font-size;
-  color: $primary-foreground-color;
+  color: #fff;
 
   .vjs-dock-text {
     padding-right: 10px;
@@ -109,8 +109,14 @@ $slider-bg-color: lighten($primary-background-color, 33%);
     }
   }
 
-  .vjs-play-progress .vjs-time-tooltip {
-    display: none;
+  .vjs-play-progress {
+    &::before:hover {
+      top: -0.372em;
+    }
+
+    .vjs-time-tooltip {
+      display: none;
+    }
   }
 
   .vjs-load-progress {
@@ -129,6 +135,28 @@ $slider-bg-color: lighten($primary-background-color, 33%);
   .vjs-control-bar {
     height: $control-bar-height;
 
+    .vjs-progress-control,
+    .vjs-play-control,
+    .vjs-playback-rate,
+    .vjs-mute-control,
+    .vjs-volume-control,
+    .vjs-resolution-control,
+    .vjs-fullscreen-control
+    {
+      opacity: $primary-foreground-opacity;
+      transition: opacity .1s;
+
+      &:hover {
+        opacity: $primary-foreground-opacity-hover;
+      }
+    }
+
+    .vjs-current-time,
+    .vjs-duration,
+    .vjs-peertube {
+      color: $primary-foreground-color;
+    }
+
     .vjs-progress-control {
       bottom: 34px;
       width: 100%;
@@ -169,7 +197,6 @@ $slider-bg-color: lighten($primary-background-color, 33%);
         font-size: $font-size;
         display: inline-block;
         padding: 0;
-
         .vjs-duration-display {
           line-height: calc(#{$control-bar-height} + 1px);
         }