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

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