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

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