From: Jérémy Fabre Date: Thu, 8 Sep 2016 15:46:17 +0000 (+0200) Subject: Change the video player skin X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=4b129221d77bce70bce7809845a60083c1fa81e2;p=mezzo.git Change the video player skin --- diff --git a/app/static/src/sass/vendors/_videojs.scss b/app/static/src/sass/vendors/_videojs.scss index 0fe309c4..df11bae7 100644 --- 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%; +}