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

   1 // Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin
   2 $primary-foreground-color: #fff;
   3 $primary-background-color: #000;
   4 $font-size: 13px;
   5 $control-bar-height: 34px;
   6
   7 .video-js.vjs-peertube-skin {
   8   font-size: $font-size;
   9   color: $primary-foreground-color;
  10
  11   .vjs-button > .vjs-icon-placeholder::before {
  12     line-height: $control-bar-height;
  13   }
  14
  15   .vjs-mouse-display:before,
  16   .vjs-play-progress:before,
  17   .vjs-volume-level:before {
  18     content: ''; /* Remove Circle From Progress Bar */
  19   }
  20
  21   .vjs-audio-button {
  22     display: none;
  23   }
  24
  25   .vjs-big-play-button {
  26     outline: 0;
  27     font-size: 6em;
  28
  29     $big-play-width: 1.5em;
  30     $big-play-height: 1em;
  31
  32     border: 0;
  33     border-radius: 0.3em;
  34
  35     left: 50%;
  36     top: 50%;
  37     width: $big-play-width;
  38     height: $big-play-height;
  39     line-height: $big-play-height;
  40     margin-left: -($big-play-width / 2);
  41     margin-top: -($big-play-height / 2);
  42     transition: opacity 0.5s;
  43
  44     &::-moz-focus-inner {
  45       border: 0;
  46       padding: 0
  47     }
  48
  49     .vjs-icon-placeholder::before {
  50       transition: text-shadow 0.3s;
  51     }
  52
  53     &:hover {
  54       opacity: 0.9;
  55
  56       .vjs-icon-placeholder::before {
  57         text-shadow: 0 0 1px rgba(255, 255, 255, 0.8);
  58       }
  59     }
  60   }
  61
  62   &.vjs-has-started .vjs-big-play-button {
  63     display: block;
  64     visibility: hidden;
  65     opacity: 0;
  66     transition: visibility 0.3s, opacity 0.3s;
  67   }
  68
  69   .vjs-control-bar,
  70   .vjs-big-play-button,
  71   .vjs-menu-button .vjs-menu-content {
  72     background-color: rgba($primary-background-color, 0.5);
  73   }
  74
  75   $slider-bg-color: lighten($primary-background-color, 33%);
  76
  77   .vjs-slider {
  78     background-color: rgba(255, 255, 255, .3);
  79     border-radius: 2px;
  80     height: 5px;
  81   }
  82
  83   /* The slider bar color is used for the progress bar and the volume bar
  84      (the first two can be removed after a fix that's coming) */
  85   .vjs-volume-level,
  86   .vjs-play-progress,
  87   .vjs-slider-bar {
  88     background: $primary-foreground-color;
  89   }
  90
  91   .vjs-load-progress {
  92     background: rgba($slider-bg-color, 0.5);
  93   }
  94
  95   .vjs-load-progress div {
  96     background: rgba($slider-bg-color, 0.75);
  97   }
  98
  99   .vjs-poster {
 100     outline: none; /* Remove Blue Outline on Click*/
 101     outline: 0;
 102   }
 103
 104   .vjs-control-bar {
 105     height: $control-bar-height;
 106
 107     .vjs-progress-control {
 108       bottom: 34px;
 109       width: 100%;
 110       position: absolute;
 111       height: 5px;
 112
 113       .vjs-progress-holder {
 114         margin: 0;
 115         border-radius: 0;
 116       }
 117     }
 118
 119     .vjs-play-control {
 120       outline: 0;
 121       font-size: $font-size;
 122       padding: 0 17px;
 123       margin-right: 5px;
 124     }
 125
 126     .vjs-time-control {
 127       &.vjs-current-time {
 128         font-size: $font-size;
 129         display: inline-block;
 130         padding: 0;
 131
 132         .vjs-current-time-display {
 133           line-height: calc(#{$control-bar-height} + 1px);
 134
 135           &::after {
 136             content: "/";
 137             margin: 0 1px 0 2px;
 138           }
 139         }
 140       }
 141
 142       &.vjs-duration {
 143         font-size: $font-size;
 144         display: inline-block;
 145         padding: 0;
 146
 147         .vjs-duration-display {
 148           line-height: calc(#{$control-bar-height} + 1px);
 149         }
 150       }
 151
 152       &.vjs-remaining-time {
 153         display: none;
 154       }
 155     }
 156
 157     .vjs-peertube {
 158       width: 100%;
 159       line-height: $control-bar-height;
 160       text-align: right;
 161       padding-right: 60px;
 162
 163       .vjs-peertube-displayed {
 164         display: block;
 165       }
 166
 167       .vjs-peertube-hidden {
 168         display: none;
 169       }
 170
 171       .download-speed-number, .upload-speed-number, .peers-number {
 172         font-weight: $font-semibold;
 173       }
 174
 175       .download-speed-text, .upload-speed-text, .peers-text {
 176         margin-right: 15px;
 177       }
 178
 179       .icon {
 180         display: inline-block;
 181         width: 15px;
 182         height: 15px;
 183         background-size: contain;
 184         vertical-align: middle;
 185         background-repeat: no-repeat;
 186         margin-right: 6px;
 187         position: relative;
 188         top: -1px;
 189
 190         &.icon-download {
 191           background-image: url('../assets/player/images/arrow-down.svg');
 192         }
 193
 194         &.icon-upload {
 195           background-image: url('../assets/player/images/arrow-up.svg');
 196         }
 197       }
 198     }
 199
 200     .vjs-mute-control {
 201       outline: 0;
 202
 203       .vjs-icon-placeholder {
 204         display: inline-block;
 205         width: 22px;
 206         height: 22px;
 207         vertical-align: middle;
 208         background: url('../assets/player/images/volume.svg') no-repeat;
 209         background-size: contain;
 210
 211         &::before {
 212           content: '';
 213         }
 214       }
 215
 216       &.vjs-vol-0 .vjs-icon-placeholder {
 217         background: url('../assets/player/images/volume-mute.svg') no-repeat;
 218         background-size: contain;
 219       }
 220     }
 221
 222     .vjs-volume-menu-button,
 223     .vjs-volume-panel {
 224       width: 6em;
 225       position: absolute;
 226       right: 0;
 227       margin-right: 65px;
 228     }
 229
 230     .vjs-volume-bar {
 231       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
 232       background-size: 22px 14px;
 233       height: 100%;
 234       width: 100%;
 235       max-width: 22px;
 236       max-height: 14px;
 237       margin: 7px 4px;
 238       border-radius: 0;
 239       top: 3px;
 240
 241       .vjs-volume-level {
 242         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
 243         background-size: 22px 14px;
 244         max-width: 22px;
 245         max-height: 14px;
 246         height: 100%;
 247       }
 248     }
 249
 250     .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
 251     .vjs-volume-panel.vjs-volume-panel-horizontal:active,
 252     .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
 253     .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
 254       width: 6em;
 255       transition-property: none;
 256     }
 257
 258     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
 259       width: 3em;
 260       height: auto;
 261     }
 262
 263     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
 264       transition-property: none;
 265     }
 266
 267     .vjs-volume-panel {
 268       .vjs-mute-control {
 269         width: 2em;
 270         z-index: 1;
 271         padding: 0;
 272       }
 273
 274       .vjs-volume-control {
 275         display: inline-block;
 276         position: relative;
 277         left: 5px;
 278         opacity: 1;
 279         width: 3em;
 280         height: auto;
 281       }
 282     }
 283
 284     .vjs-fullscreen-control {
 285       width: 37px;
 286       outline: 0;
 287
 288       .vjs-icon-placeholder {
 289         display: inline-block;
 290         width: 22px;
 291         height: 22px;
 292         vertical-align: middle;
 293         background: url('../assets/player/images/fullscreen.svg') no-repeat;
 294         background-size: contain;
 295
 296         &::before {
 297           content: '';
 298         }
 299       }
 300     }
 301
 302     .vjs-menu-button-popup {
 303       font-size: 13px;
 304       font-weight: $font-semibold;
 305       width: 50px;
 306
 307       // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
 308       .vjs-resolution-button-label {
 309         line-height: $control-bar-height;
 310         position: absolute;
 311         top: 0;
 312         left: 4px;
 313         width: 100%;
 314         height: 100%;
 315         text-align: center;
 316         box-sizing: inherit;
 317         text-align: center;
 318       }
 319
 320       .vjs-resolution-button {
 321         outline: 0 !important;
 322       }
 323
 324       .vjs-menu {
 325         top: 20px;
 326
 327         .vjs-menu-content {
 328           width: 50px;
 329           left: 50%; /* Center the menu, in it's parent */
 330           margin-left: -21px;
 331         }
 332
 333         li {
 334           text-transform: none;
 335           font-size: 13px;
 336         }
 337       }
 338     }
 339   }
 340
 341   @media screen and (max-width: 550px) {
 342     .vjs-big-play-button {
 343       font-size: 5em;
 344     }
 345
 346     .vjs-peertube {
 347       padding: 0 !important;
 348
 349       .vjs-peertube-displayed {
 350         display: none !important;
 351       }
 352     }
 353   }
 354
 355   @media screen and (max-width: 300px) {
 356     .vjs-dock-text {
 357       font-size: 1em;
 358     }
 359
 360     .vjs-big-play-button {
 361       font-size: 4em;
 362     }
 363
 364     .vjs-volume-control {
 365       display: none !important;
 366     }
 367
 368     .vjs-volume-panel {
 369       width: 26px !important;
 370       margin-right: 83px !important;
 371     }
 372   }
 373 }
 374
 375 // Thanks: https://projects.lukehaas.me/css-loaders/
 376 .vjs-loading-spinner {
 377   left: 50%;
 378   font-size: 10px;
 379   text-indent: -9999em;
 380   border: 0.7em solid rgba(255, 255, 255, 0.2);
 381   border-left-color: #ffffff;
 382   transform: translateZ(0);
 383   animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
 384   overflow: hidden;
 385   visibility: hidden;
 386
 387   &:before {
 388     animation: none !important;
 389   }
 390
 391   &:after {
 392     border-radius: 50%;
 393     width: 6em;
 394     height: 6em;
 395     animation: none !important;
 396   }
 397
 398   @keyframes spinner {
 399     0% {
 400       transform: rotate(0deg);
 401     }
 402     100% {
 403       transform: rotate(360deg);
 404     }
 405   }
 406
 407   @keyframes vjs-spinner-show {
 408     0% {
 409       display: none;
 410       opacity: 0;
 411     }
 412
 413     1% {
 414       display: block;
 415       visibility: visible;
 416       opacity: 0;
 417     }
 418
 419     100% {
 420       display: block;
 421       visibility: visible;
 422       opacity: 1;
 423     }
 424   }
 425 }
 426
 427 // Error display disabled
 428 .vjs-error:not(.vjs-error-display-enabled) {
 429   .vjs-error-display {
 430     display: none;
 431   }
 432
 433   .vjs-loading-spinner {
 434     display: block;
 435   }
 436 }
 437
 438 // Error display enabled
 439 .vjs-error.vjs-error-display-enabled {
 440   .vjs-error-display {
 441     display: block;
 442   }
 443 }