client/src/sass/video-js-custom.scss

   1 // Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
   2
   3 // Video JS Sublime Skin
   4 // The following are SCSS variables to automate some of the values.
   5 // But don't feel limited by them. Change/replace whatever you want.
   6
   7 // The color of icons, text, and the big play button border.
   8 // Try changing to #0f0
   9 $primary-foreground-color: #fff; // #fff default
  10
  11 // The default color of control backgrounds is mostly black but with a little
  12 // bit of blue so it can still be seen on all-black video frames, which are common.
  13 // Try changing to #900
  14 $primary-background-color: #2B333F;  // #2B333F default
  15
  16 // Try changing to true
  17 $center-big-play-button: true; // true default
  18
  19 .video-js {
  20   /* The base font size controls the size of everything, not just text.
  21      All dimensions use em-based sizes so that the scale along with the font size.
  22      Try increasing it to 15px and see what happens. */
  23   font-size: 10px;
  24
  25   /* The main font color changes the ICON COLORS as well as the text */
  26   color: $primary-foreground-color;
  27 }
  28
  29 /* The "Big Play Button" is the play button that shows before the video plays.
  30    To center it set the align values to center and middle. The typical location
  31    of the button is the center, but there is trend towards moving it to a corner
  32    where it gets out of the way of valuable content in the poster image.*/
  33 .vjs-sublime-skin .vjs-big-play-button {
  34   /* The font size is what makes the big play button...big.
  35      All width/height values use ems, which are a multiple of the font size.
  36      If the .video-js font-size is 10px, then 3em equals 30px.*/
  37   font-size: 8em;
  38
  39   /* We're using SCSS vars here because the values are used in multiple places.
  40      Now that font size is set, the following em values will be a multiple of the
  41      new font size. If the font-size is 3em (30px), then setting any of
  42      the following values to 3em would equal 30px. 3 * font-size. */
  43   $big-play-width: 3em;
  44   /* 1.5em = 45px default */
  45   $big-play-height: 1.5em;
  46
  47   line-height: $big-play-height;
  48   height: $big-play-height;
  49   width: $big-play-width;
  50
  51   /* 0.06666em = 2px default */
  52   border: 0;
  53   /* 0.3em = 9px default */
  54   border-radius: 0.3em;
  55
  56   @if $center-big-play-button {
  57     /* Align center */
  58     left: 50%;
  59     top: 50%;
  60     margin-left: -($big-play-width / 2);
  61     margin-top: -($big-play-height / 2);
  62   } @else {
  63     /* Align top left. 0.5em = 15px default */
  64     left: 0.5em;
  65     top: 0.5em;
  66   }
  67 }
  68
  69 /* The default color of control backgrounds is mostly black but with a little
  70    bit of blue so it can still be seen on all-black video frames, which are common. */
  71 .video-js .vjs-control-bar,
  72 .video-js .vjs-big-play-button,
  73 .video-js .vjs-menu-button .vjs-menu-content {
  74   /* IE8 - has no alpha support */
  75   background-color: $primary-background-color;
  76   /* Opacity: 1.0 = 100%, 0.0 = 0% */
  77   background-color: rgba($primary-background-color, 0.7);
  78   background-color: transparent;
  79 }
  80
  81 // Make a slightly lighter version of the main background
  82 // for the slider background.
  83 $slider-bg-color: lighten($primary-background-color, 33%);
  84
  85 /* Slider - used for Volume bar and Progress bar */
  86 .video-js .vjs-slider {
  87   background-color: $slider-bg-color;
  88   background-color: rgba($slider-bg-color, 0.5);
  89   background-color: rgba(255,255,255,.3);
  90   border-radius: 2px;
  91   height: 6.5px;
  92 }
  93
  94 /* The slider bar color is used for the progress bar and the volume bar
  95    (the first two can be removed after a fix that's coming) */
  96 .video-js .vjs-volume-level,
  97 .video-js .vjs-play-progress,
  98 .video-js .vjs-slider-bar {
  99   background: $primary-foreground-color;
 100 }
 101
 102 /* Enlarged Slider to enable easier tracking. Adjust all the height:6.5px to preferred height for the slider if necessary. */
 103 .video-js .vjs-progress-holder .vjs-load-progress,
 104 .video-js .vjs-progress-holder .vjs-load-progress div,
 105 .video-js .vjs-progress-holder .vjs-play-progress,
 106 .video-js .vjs-progress-holder .vjs-tooltip-progress-bar {
 107   height: 6.5px;
 108 }
 109
 110 /* The main progress bar also has a bar that shows how much has been loaded. */
 111 .video-js .vjs-load-progress {
 112   /* For IE8 we'll lighten the color */
 113   background: ligthen($slider-bg-color, 25%);
 114   /* Otherwise we'll rely on stacked opacities */
 115   background: rgba($slider-bg-color, 0.5);
 116 }
 117
 118 /* The load progress bar also has internal divs that represent
 119    smaller disconnected loaded time ranges */
 120 .video-js .vjs-load-progress div {
 121   /* For IE8 we'll lighten the color */
 122   background: ligthen($slider-bg-color, 50%);
 123   /* Otherwise we'll rely on stacked opacities */
 124   background: rgba($slider-bg-color, 0.75);
 125 }
 126
 127 //Skin Style Starts
 128 .vjs-sublime-skin .vjs-poster {
 129     outline: none; /* Remove Blue Outline on Click*/
 130     outline: 0;
 131 }
 132
 133 .vjs-sublime-skin:hover .vjs-big-play-button {
 134     background-color: transparent;
 135 }
 136
 137 .vjs-sublime-skin .vjs-fullscreen-control:before,
 138 .vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:before {
 139     content: ''; /* Remove Fullscreen Exit Icon */
 140 }
 141
 142 .vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control {
 143     background: #fff;
 144 }
 145
 146 .vjs-sublime-skin .vjs-fullscreen-control {
 147     border: 3px solid #fff;
 148     box-sizing: border-box;
 149     cursor: pointer;
 150     margin-top: -7px;
 151     top: 50%;
 152     height: 14px;
 153     width: 22px;
 154     margin-right: 10px;
 155 }
 156
 157 .vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after {
 158     background: #000;
 159     content: "";
 160     display: block;
 161     position: absolute;
 162     bottom: 0;
 163     left: 0;
 164     height: 5px;
 165     width: 5px;
 166 }
 167
 168 .vjs-sublime-skin .vjs-progress-holder {
 169     margin: 0;
 170 }
 171
 172 .vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after {
 173     border-radius: 2px;
 174     display: block;
 175     height: 6.5px;
 176 }
 177
 178 .vjs-sublime-skin .vjs-progress-control .vjs-load-progres,
 179 .vjs-sublime-skin .vjs-progress-control .vjs-play-progress {
 180     border-radius: 2px;
 181     height: 6.5px;
 182 }
 183
 184 .vjs-sublime-skin .vjs-playback-rate {
 185     display: none; /* Remove Playback Rate */
 186 }
 187
 188 .vjs-sublime-skin .vjs-progress-control {
 189     margin-right: 50px;
 190 }
 191
 192 .vjs-sublime-skin .vjs-time-control {
 193     right: 55px;
 194 }
 195
 196 .vjs-sublime-skin .vjs-volume-menu-button:before {
 197     width: 1.2em;
 198     z-index: 1;
 199 }
 200
 201 .vjs-sublime-skin .vjs-volume-menu-button .vjs-menu,
 202 .vjs-sublime-skin .vjs-volume-menu-button:focus .vjs-menu,
 203 .vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active .vjs-menu {
 204     display: block;
 205     opacity: 1;
 206 }
 207
 208 .vjs-sublime-skin .vjs-volume-menu-button,
 209 .vjs-sublime-skin .vjs-volume-panel {
 210     width: 6em;
 211     position: absolute;
 212     right: 0;
 213     margin-right: 30px;
 214 }
 215
 216 .vjs-sublime-skin .vjs-volume-menu-button .vjs-menu-content,
 217 .vjs-sublime-skin .vjs-volume-menu-button:hover,
 218 .vjs-sublime-skin .vjs-volume-menu-button:focus,
 219 .vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active,
 220 .vjs-sublime-skin .vjs-volume-panel .vjs-volume-control,
 221 .vjs-sublime-skin .vjs-volume-panel:hover,
 222 .vjs-sublime-skin .vjs-volume-panel:focus,
 223 .vjs-sublime-skin .vjs-volume-panel.vjs-slider-active {
 224     width: 6em;
 225 }
 226
 227 .vjs-sublime-skin .vjs-volume-menu-button .vjs-menu {
 228     left: 23px;
 229 }
 230
 231 .vjs-sublime-skin .vjs-mouse-display:before,
 232 .vjs-sublime-skin .vjs-play-progress:before,
 233 .vjs-sublime-skin .vjs-volume-level:before {
 234     content: ''; /* Remove Circle From Progress Bar */
 235 }
 236
 237 .vjs-sublime-skin .vjs-mouse-display:after,
 238 .vjs-sublime-skin .vjs-play-progress:after,
 239 .vjs-sublime-skin .vjs-time-tooltip {
 240     width: 5.5em;
 241 }
 242
 243 .vjs-sublime-skin .vjs-audio-button {
 244     display: none;
 245 }
 246
 247 .vjs-sublime-skin .vjs-volume-bar {
 248     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC);
 249     background-size: 22px 14px;
 250     background-repeat: no-repeat;
 251     height: 100%;
 252     width: 100%;
 253     max-width: 22px;
 254     max-height: 14px;
 255     margin: 7px 4px;
 256     border-radius: 0;
 257 }
 258
 259 .vjs-sublime-skin .vjs-volume-level {
 260     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC);
 261     background-size: 22px 14px;
 262     background-repeat: no-repeat;
 263     max-width: 22px;
 264     max-height: 14px;
 265     height: 100%;
 266 }
 267
 268 /* New for VideoJS v6 */
 269 .vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
 270 .vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active,
 271 .vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
 272 .vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
 273     width: 6em;
 274     transition-property: none;
 275 }
 276
 277 .vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
 278     width: 3em;
 279     height: auto;
 280 }
 281
 282 .vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
 283     transition-property: none;
 284 }
 285
 286 .vjs-sublime-skin .vjs-fullscreen-control .vjs-icon-placeholder {
 287     display: none; /* Remove Duplicate Fullscreen Icon */
 288 }
 289
 290 .vjs-sublime-skin .vjs-volume-panel .vjs-mute-control {
 291     width: 2em;
 292     z-index: 1;
 293     padding: 0;
 294 }
 295
 296 .vjs-sublime-skin .vjs-volume-panel .vjs-volume-control {
 297     display: inline-block;
 298     position: relative;
 299     left: 5px;
 300     opacity: 1;
 301     width: 3em;
 302     height: auto;
 303 }