Change the video player skin

diff --git a/app/static/src/sass/vendors/_videojs.scss b/app/static/src/sass/vendors/_videojs.scss
index 0fe309c44ecab3d03c20ccefe3dad6e509081d88..df11bae7985d60efd112242319c892d0a6910f06 100644 (file)
--- a/app/static/src/sass/vendors/_videojs.scss
+++ b/app/static/src/sass/vendors/_videojs.scss
@@ -1,17 +1,4 @@
-/*
-  Player Skin Designer for Video.js
-  http://videojs.com
-
-  To customize the player skin edit
-  the CSS below. Click "details"
-  below to add comments or questions.
-  This file uses some SCSS. Learn more
-  at http://sass-lang.com/guide)
-
-  This designer can be linked to at:
-  http://codepen.io/heff/pen/EarCt/left/?editors=010
-*/
-
+// Video JS Sublime Skin
 // The following are SCSS variables to automate some of the values.
 // But don't feel limited by them. Change/replace whatever you want.
 
@@ -22,7 +9,7 @@ $primary-foreground-color: $color-main; // #fff default
 // The default color of control backgrounds is mostly black but with a little
 // bit of blue so it can still be seen on all-black video frames, which are common.
 // Try changing to #900
-$primary-background-color: #000000;  // #2B333F default
+$primary-background-color: #2B333F;  // #2B333F default
 
 // Try changing to true
 $center-big-play-button: true; // true default
@@ -45,7 +32,7 @@ $center-big-play-button: true; // true default
   /* The font size is what makes the big play button...big.
      All width/height values use ems, which are a multiple of the font size.
      If the .video-js font-size is 10px, then 3em equals 30px.*/
-  font-size: 3em;
+  font-size: 8em;
 
   /* We're using SCSS vars here because the values are used in multiple places.
      Now that font size is set, the following em values will be a multiple of the
@@ -53,16 +40,16 @@ $center-big-play-button: true; // true default
      the following values to 3em would equal 30px. 3 * font-size. */
   $big-play-width: 3em;
   /* 1.5em = 45px default */
-  $big-play-height: 3em;
+  $big-play-height: 1.5em;
 
   line-height: $big-play-height;
   height: $big-play-height;
   width: $big-play-width;
 
   /* 0.06666em = 2px default */
-  border: 0.06666em solid $primary-foreground-color;
+  border: 0;
   /* 0.3em = 9px default */
-  border-radius: $big-play-width;
+  border-radius: 0.3em;
 
   @if $center-big-play-button {
     /* Align center */
@@ -86,6 +73,7 @@ $center-big-play-button: true; // true default
   background-color: $primary-background-color;
   /* Opacity: 1.0 = 100%, 0.0 = 0% */
   background-color: rgba($primary-background-color, 0.7);
+  background-color: transparent;
 }
 
 // Make a slightly lighter version of the main background
@@ -96,6 +84,9 @@ $slider-bg-color: lighten($primary-background-color, 33%);
 .video-js .vjs-slider {
   background-color: $slider-bg-color;
   background-color: rgba($slider-bg-color, 0.5);
+  background-color: rgba(255,255,255,.3);
+  border-radius: 2px;
+  height: 4px;
 }
 
 /* The slider bar color is used for the progress bar and the volume bar
@@ -122,3 +113,100 @@ $slider-bg-color: lighten($primary-background-color, 33%);
   /* Otherwise we'll rely on stacked opacities */
   background: rgba($slider-bg-color, 0.75);
 }
+
+//Skin Style Starts
+.vjs-ircam-skin .vjs-poster {
+  outline: none; //Remove Blue Outline on Click
+  outline: 0;
+}
+.vjs-ircam-skin:hover .vjs-big-play-button {
+  background-color: transparent;
+}
+.vjs-ircam-skin .vjs-fullscreen-control:before, .vjs-ircam-skin.vjs-fullscreen .vjs-fullscreen-control:before {
+    content: ''; //Remove Fullscreen Exit Icon
+}
+.vjs-ircam-skin.vjs-fullscreen .vjs-fullscreen-control {
+    background: #fff;
+}
+.vjs-ircam-skin .vjs-fullscreen-control {
+  border: 3px solid #fff;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin-top: -7px;
+  top: 50%;
+  height: 14px;
+  width: 22px;
+  margin-right: 10px;
+}
+.vjs-ircam-skin.vjs-fullscreen .vjs-fullscreen-control:after  {
+    background: #000;
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 5px;
+    width: 5px;
+}
+.vjs-ircam-skin .vjs-progress-holder {
+  margin: 0;
+}
+.vjs-ircam-skin .vjs-progress-control .vjs-progress-holder:after {
+  border-radius: 2px;
+  display: block;
+  height: 4px;
+}
+.vjs-ircam-skin .vjs-progress-control .vjs-load-progres, .vjs-ircam-skin .vjs-progress-control .vjs-play-progress {
+  border-radius: 2px;
+  height: 4px;
+}
+.vjs-ircam-skin .vjs-playback-rate {
+  display: none; //Remove Playback Rate
+}
+.vjs-ircam-skin .vjs-progress-control {
+  margin-right: 40px;
+}
+.vjs-ircam-skin .vjs-time-control {
+  right: 40px;
+}
+.vjs-ircam-skin .vjs-mute-control:before, .vjs-ircam-skin .vjs-volume-menu-button:before, .vjs-ircam-skin .vjs-mute-control.vjs-vol-0:before, .vjs-ircam-skin .vjs-volume-menu-button.vjs-vol-0:before, .vjs-ircam-skin .vjs-mute-control.vjs-vol-1:before, .vjs-ircam-skin .vjs-volume-menu-button.vjs-vol-1:before, .vjs-ircam-skin .vjs-mute-control.vjs-vol-2:before, .vjs-ircam-skin .vjs-volume-menu-button.vjs-vol-2:before {
+    content: ''; //Remove Volume Icons
+}
+.vjs-ircam-skin .vjs-menu-button-inline .vjs-menu, .vjs-ircam-skin .vjs-menu-button-inline:focus .vjs-menu, .vjs-ircam-skin .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
+    display: block;
+    opacity: 1;
+}
+.vjs-ircam-skin .vjs-volume-menu-button {
+  width: 3em;
+  position: absolute;
+  right: 0;
+  margin-right: 40px;
+}
+.vjs-ircam-skin .vjs-menu-button .vjs-menu-content, .vjs-ircam-skin .vjs-menu-button-inline:hover, .vjs-ircam-skin .vjs-menu-button-inline:focus, .vjs-ircam-skin .vjs-menu-button-inline.vjs-slider-active {
+    width: 3em;
+}
+.vjs-ircam-skin .vjs-menu-button-inline .vjs-menu {
+    left: 0; //Override to Align Volume To the Right Side
+}
+.vjs-ircam-skin .vjs-mouse-display:before, .vjs-ircam-skin .vjs-play-progress:before, .vjs-ircam-skin .vjs-volume-level:before {
+    content: ''; //Remove Circle from Progress Bar
+}
+.vjs-ircam-skin .vjs-volume-bar {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC);
+    background-size: 22px 14px;
+    background-repeat: no-repeat;
+    height: 100%;
+    width: 100%;
+    max-width: 22px;
+    max-height: 14px;
+    margin: 7px 4px;
+    border-radius: 0;
+}
+.vjs-ircam-skin .vjs-volume-level {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC);
+    background-size: 22px 14px;
+    background-repeat: no-repeat;
+    max-width: 22px;
+    max-height: 14px;
+    height: 100%;
+}