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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 $primary-foreground-color: #fff;
   5 $primary-foreground-opacity: 0.9;
   6 $primary-foreground-opacity-hover: 1;
   7 $primary-background-color: #000;
   8
   9 $font-size: 13px;
  10 $control-bar-height: 34px;
  11
  12 $slider-bg-color: lighten($primary-background-color, 33%);
  13
  14 $setting-transition-duration: 0.15s;
  15 $setting-transition-easing: ease-out;
  16
  17 .video-js.vjs-peertube-skin {
  18   font-size: $font-size;
  19   color: $primary-foreground-color;
  20
  21   .vjs-dock-text {
  22     padding-right: 10px;
  23   }
  24
  25   .vjs-dock-description {
  26     font-size: 11px;
  27
  28     &::before, &::after {
  29       display: inline-block;
  30       content: '\1F308';
  31     }
  32
  33     &::before {
  34       margin-right: 4px;
  35     }
  36
  37     &::after {
  38       margin-left: 4px;
  39       transform: scale(-1, 1);
  40     }
  41   }
  42
  43   .vjs-button > .vjs-icon-placeholder::before {
  44     line-height: $control-bar-height;
  45   }
  46
  47   .vjs-volume-level::before {
  48     content: ''; /* Remove Circle From Progress Bar */
  49   }
  50
  51   .vjs-audio-button {
  52     display: none;
  53   }
  54
  55   .vjs-big-play-button {
  56     outline: 0;
  57     font-size: 6em;
  58
  59     $big-play-width: 1.2em;
  60     $big-play-height: 1.2em;
  61
  62     border: 0;
  63     border-radius: 100%;
  64
  65     left: 50%;
  66     top: 50%;
  67     width: $big-play-width;
  68     height: $big-play-height;
  69     line-height: $big-play-height;
  70     margin-left: -($big-play-width / 2);
  71     margin-top: -($big-play-height / 2);
  72     transition: opacity 0.5s;
  73
  74     &::-moz-focus-inner {
  75       border: 0;
  76       padding: 0
  77     }
  78
  79     .vjs-icon-placeholder::before {
  80       transition: font-size 0.2s, opacity 0.2s;
  81     }
  82
  83     &:hover {
  84       opacity: 0.8;
  85
  86       .vjs-icon-placeholder::before {
  87         font-size: 110%;
  88       }
  89     }
  90   }
  91
  92   &.vjs-has-started .vjs-big-play-button {
  93     display: block;
  94     visibility: hidden;
  95
  96     &, &::before {
  97       opacity: 0;
  98       transition: visibility 0.1s, opacity 0.1s;
  99     }
 100   }
 101
 102   &.vjs-has-started video {
 103     background-color: #000;
 104     animation: fade-black-on-play 0.5s linear;
 105
 106     @keyframes fade-black-on-play {
 107       0% {
 108         opacity: 1;
 109       }
 110       50% {
 111         opacity: 0;
 112       }
 113       100% {
 114         opacity: 1;
 115       }
 116     }
 117   }
 118
 119   .vjs-control-bar,
 120   .vjs-big-play-button,
 121   .vjs-settings-dialog {
 122     background-color: rgba($primary-background-color, 0.5);
 123   }
 124
 125   .vjs-slider {
 126     background-color: rgba(255, 255, 255, .3);
 127     border-radius: 2px;
 128     height: 5px;
 129
 130     .vjs-slider-bar {
 131       background: $primary-foreground-color;
 132     }
 133   }
 134
 135   .vjs-play-progress {
 136
 137     &::before {
 138       top: -0.3em;
 139
 140       &:hover {
 141         top: -0.372em;
 142       }
 143     }
 144
 145     .vjs-time-tooltip {
 146       display: none;
 147     }
 148   }
 149
 150   .vjs-load-progress {
 151     background: rgba($slider-bg-color, 0.5);
 152
 153     div {
 154       background: rgba($slider-bg-color, 0.75);
 155     }
 156   }
 157
 158   .vjs-poster {
 159     outline: none; /* Remove Blue Outline on Click*/
 160     outline: 0;
 161   }
 162
 163   .vjs-control-bar {
 164     height: $control-bar-height;
 165
 166     .vjs-progress-control,
 167     .vjs-play-control,
 168     .vjs-playback-rate,
 169     .vjs-mute-control,
 170     .vjs-volume-control,
 171     .vjs-resolution-control,
 172     .vjs-fullscreen-control,
 173     .vjs-peertube-link,
 174     .vjs-settings
 175     {
 176       color: $primary-foreground-color !important;
 177       opacity: $primary-foreground-opacity;
 178       transition: opacity .1s;
 179
 180       &:hover {
 181         opacity: $primary-foreground-opacity-hover;
 182       }
 183     }
 184
 185     .vjs-current-time,
 186     .vjs-duration,
 187     .vjs-peertube {
 188       color: $primary-foreground-color;
 189       opacity: $primary-foreground-opacity;
 190     }
 191
 192     .vjs-progress-control {
 193       bottom: 34px;
 194       width: 100%;
 195       position: absolute;
 196       height: 5px;
 197
 198       .vjs-progress-holder {
 199         margin: 0;
 200         border-radius: 0;
 201       }
 202     }
 203
 204     .vjs-play-control {
 205       @include disable-outline;
 206
 207       cursor: pointer;
 208       font-size: $font-size;
 209       padding: 0 17px;
 210       margin-right: 5px;
 211     }
 212
 213     .vjs-time-control {
 214       &.vjs-current-time {
 215         font-size: $font-size;
 216         display: inline-block;
 217         padding: 0;
 218
 219         .vjs-current-time-display {
 220           line-height: calc(#{$control-bar-height} + 1px);
 221
 222           &::after {
 223             content: "/";
 224             margin: 0 1px 0 2px;
 225           }
 226         }
 227       }
 228
 229       &.vjs-duration {
 230         font-size: $font-size;
 231         display: inline-block;
 232         padding: 0;
 233         .vjs-duration-display {
 234           line-height: calc(#{$control-bar-height} + 1px);
 235         }
 236       }
 237
 238       &.vjs-remaining-time {
 239         display: none;
 240       }
 241     }
 242
 243     .vjs-peertube {
 244       width: 100%;
 245       line-height: $control-bar-height;
 246       text-align: right;
 247
 248       .vjs-peertube-displayed {
 249         display: block;
 250       }
 251
 252       .vjs-peertube-hidden {
 253         display: none;
 254       }
 255
 256       .download-speed-number, .upload-speed-number, .peers-number {
 257         font-weight: $font-semibold;
 258       }
 259
 260       .download-speed-text, .upload-speed-text, .peers-text {
 261         margin-right: 15px;
 262       }
 263
 264       .icon {
 265         display: inline-block;
 266         width: 15px;
 267         height: 15px;
 268         background-size: contain;
 269         vertical-align: middle;
 270         background-repeat: no-repeat;
 271         margin-right: 6px;
 272         position: relative;
 273         top: -1px;
 274
 275         &.icon-download {
 276           background-image: url('../assets/player/images/arrow-down.svg');
 277         }
 278
 279         &.icon-upload {
 280           background-image: url('../assets/player/images/arrow-up.svg');
 281         }
 282       }
 283     }
 284
 285     .vjs-playback-rate {
 286       font-size: 10px;
 287       width: 37px !important;
 288
 289       .vjs-playback-rate-value {
 290         font-size: 13px;
 291         line-height: $control-bar-height;
 292       }
 293
 294       .vjs-menu .vjs-menu-content {
 295         width: 37px !important;
 296       }
 297     }
 298
 299     .vjs-mute-control {
 300       @include disable-outline;
 301
 302       line-height: $control-bar-height;
 303       padding: 0;
 304       width: 30px;
 305
 306       .vjs-icon-placeholder {
 307         display: inline-block;
 308         width: 22px;
 309         height: 22px;
 310         vertical-align: middle;
 311         background: url('../assets/player/images/volume.svg') no-repeat;
 312         background-size: contain;
 313
 314         &::before {
 315           content: '';
 316         }
 317       }
 318
 319       &.vjs-vol-0 .vjs-icon-placeholder {
 320         background: url('../assets/player/images/volume-mute.svg') no-repeat;
 321         background-size: contain;
 322       }
 323     }
 324
 325     .vjs-volume-control {
 326       width: 30px;
 327       margin: 0 5px 0 0;
 328     }
 329
 330     .vjs-volume-bar {
 331       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
 332       background-size: 22px 14px;
 333       height: 100%;
 334       width: 100%;
 335       max-width: 22px;
 336       max-height: 14px;
 337       margin: 7px 4px;
 338       border-radius: 0;
 339       top: 3px;
 340
 341       .vjs-volume-level {
 342         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
 343         background-size: 22px 14px;
 344         max-width: 22px;
 345         max-height: 14px;
 346         height: 100%;
 347       }
 348     }
 349
 350     .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
 351     .vjs-volume-panel.vjs-volume-panel-horizontal:active,
 352     .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
 353     .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
 354       width: 6em;
 355       transition-property: none;
 356     }
 357
 358     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
 359       width: 3em;
 360       height: auto;
 361     }
 362
 363     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
 364       transition-property: none;
 365     }
 366
 367     .vjs-volume-panel {
 368       .vjs-mute-control {
 369         width: 2em;
 370         z-index: 1;
 371         padding: 0;
 372       }
 373
 374       .vjs-volume-control {
 375         display: inline-block;
 376         position: relative;
 377         left: 5px;
 378         opacity: 1;
 379         width: 3em;
 380         height: auto;
 381       }
 382     }
 383
 384     .vjs-peertube-link {
 385       @include disable-outline;
 386       @include disable-default-a-behaviour;
 387
 388       text-decoration: none;
 389       line-height: $control-bar-height;
 390       font-weight: $font-semibold;
 391       padding: 0 5px;
 392     }
 393
 394     .vjs-fullscreen-control {
 395       @include disable-outline;
 396
 397       width: 37px;
 398
 399       .vjs-icon-placeholder {
 400         display: inline-block;
 401         width: 22px;
 402         height: 22px;
 403         vertical-align: middle;
 404         background: url('../assets/player/images/fullscreen.svg') no-repeat;
 405         background-size: contain;
 406
 407         &::before {
 408           content: '';
 409         }
 410       }
 411     }
 412
 413     .vjs-menu-button-popup {
 414       font-weight: $font-semibold;
 415       width: 50px;
 416
 417       .vjs-resolution-button {
 418         @include disable-outline;
 419       }
 420
 421       .vjs-menu {
 422         top: 20px;
 423         left: 0;
 424
 425         .vjs-menu-content {
 426           width: 50px;
 427           bottom: 20px;
 428         }
 429
 430         li {
 431           text-transform: none;
 432           font-size: 13px;
 433         }
 434       }
 435     }
 436   }
 437
 438   @media screen and (max-width: 570px) {
 439     .vjs-dock-text {
 440       font-size: 14px;
 441     }
 442
 443     .vjs-dock-description {
 444       font-size: 9px;
 445     }
 446
 447     .vjs-big-play-button {
 448       font-size: 4.5em;
 449     }
 450
 451     .vjs-playback-rate {
 452       display: none;
 453     }
 454
 455     .vjs-peertube {
 456       padding: 0 !important;
 457
 458       .vjs-peertube-displayed {
 459         display: none !important;
 460       }
 461     }
 462   }
 463
 464   @media screen and (max-width: 300px) {
 465     .vjs-dock-text {
 466       font-size: 13px;
 467     }
 468
 469     .vjs-big-play-button {
 470       font-size: 3em;
 471     }
 472
 473     .vjs-volume-control {
 474       display: none !important;
 475     }
 476
 477     .vjs-volume-panel {
 478       width: 26px !important;
 479       margin-right: 83px !important;
 480     }
 481   }
 482 }
 483
 484 // Play/pause animations
 485 .vjs-has-started .vjs-play-control {
 486   &.vjs-playing {
 487     animation: remove-pause-button 0.25s ease;
 488   }
 489
 490   &.vjs-paused {
 491     animation: add-play-button 0.25s ease;
 492   }
 493
 494   @keyframes remove-pause-button {
 495     0% {
 496       transform: rotate(90deg);
 497     }
 498     100% {
 499       transform: rotate(0deg);
 500     }
 501   }
 502
 503   @keyframes add-play-button {
 504     0% {
 505       transform: rotate(-90deg);
 506     }
 507     100% {
 508       transform: rotate(0deg);
 509     }
 510   }
 511 }
 512
 513 // Thanks: https://projects.lukehaas.me/css-loaders/
 514 .vjs-loading-spinner {
 515   left: 50%;
 516   font-size: 10px;
 517   text-indent: -9999em;
 518   border: 0.7em solid rgba(255, 255, 255, 0.2);
 519   border-left-color: #ffffff;
 520   transform: translateZ(0);
 521   animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
 522   overflow: hidden;
 523   visibility: hidden;
 524
 525   &::before {
 526     animation: none !important;
 527   }
 528
 529   &::after {
 530     border-radius: 50%;
 531     width: 6em;
 532     height: 6em;
 533     animation: none !important;
 534   }
 535
 536   @keyframes spinner {
 537     0% {
 538       transform: rotate(0deg);
 539     }
 540     100% {
 541       transform: rotate(360deg);
 542     }
 543   }
 544
 545   @keyframes vjs-spinner-show {
 546     0% {
 547       display: none;
 548       opacity: 0;
 549     }
 550
 551     1% {
 552       display: block;
 553       visibility: visible;
 554       opacity: 0;
 555     }
 556
 557     100% {
 558       display: block;
 559       visibility: visible;
 560       opacity: 1;
 561     }
 562   }
 563 }
 564
 565 // Error display disabled
 566 .vjs-error:not(.vjs-error-display-enabled) {
 567   .vjs-error-display {
 568     display: none;
 569   }
 570
 571   .vjs-loading-spinner {
 572     display: block;
 573   }
 574 }
 575
 576 // Error display enabled
 577 .vjs-error.vjs-error-display-enabled {
 578   .vjs-error-display {
 579     display: block;
 580   }
 581 }
 582
 583
 584 /* Sass for videojs-settings-menu */
 585
 586 .video-js {
 587
 588   .vjs-settings {
 589     @include disable-outline;
 590
 591     cursor: pointer;
 592     width: 37px;
 593
 594     .vjs-icon-placeholder {
 595       display: inline-block;
 596       width: 17px;
 597       height: 17px;
 598       vertical-align: middle;
 599       background: url('../assets/player/images/settings.svg') no-repeat;
 600       background-size: contain;
 601
 602       &::before {
 603         content: '';
 604       }
 605     }
 606   }
 607
 608   .vjs-settings-sub-menu-title {
 609     width: 4em;
 610     text-transform: initial;
 611   }
 612
 613   .vjs-settings-dialog {
 614     position: absolute;
 615     right: .5em;
 616     bottom: 3.5em;
 617     color: $primary-foreground-color;
 618     opacity: $primary-foreground-opacity;
 619     margin: 0 auto;
 620     font-size: $font-size !important;
 621
 622     width: auto;
 623     overflow: hidden;
 624
 625     transition: width $setting-transition-duration $setting-transition-easing,  height $setting-transition-duration $setting-transition-easing;
 626
 627     .vjs-settings-sub-menu-value,
 628     .vjs-settings-sub-menu-title {
 629       display: table-cell;
 630       padding: 0 5px;
 631     }
 632
 633     .vjs-settings-sub-menu-title {
 634       text-align: left;
 635       font-weight: $font-semibold;
 636     }
 637
 638     .vjs-settings-sub-menu-value {
 639       width: 100%;
 640       text-align: right;
 641     }
 642
 643     .vjs-settings-panel {
 644       position: absolute;
 645       bottom: 0;
 646       right: 0;
 647       overflow-y: auto;
 648       overflow-x: hidden;
 649       border-radius: 1px;
 650     }
 651
 652     .vjs-settings-panel-child {
 653       display: flex;
 654
 655       align-items: flex-end;
 656       white-space: nowrap;
 657
 658       &:focus,
 659       &:active {
 660         outline: none;
 661       }
 662
 663       > .vjs-menu {
 664         flex: 1;
 665         min-width: 200px;
 666       }
 667
 668       > .vjs-menu,
 669       > .vjs-settings-sub-menu {
 670         transition: all $setting-transition-duration $setting-transition-easing;
 671
 672         .vjs-menu-item {
 673
 674           &:hover {
 675             background-color: rgba(255, 255, 255, 0.2);
 676           }
 677
 678           &:first-child {
 679             margin-top: 5px;
 680           }
 681
 682           &:last-child {
 683             margin-bottom: 5px;
 684           }
 685         }
 686
 687         li {
 688           font-size: 1em;
 689           text-transform: initial;
 690
 691           &:hover {
 692             cursor: pointer;
 693           }
 694         }
 695       }
 696
 697       > .vjs-menu {
 698         .vjs-menu-item {
 699           padding: 8px 16px;
 700         }
 701
 702         .vjs-settings-sub-menu-value::after {
 703           @include chevron-right(9px, 2px);
 704
 705           margin-left: 5px;
 706         }
 707       }
 708
 709       > .vjs-settings-sub-menu {
 710         width: 80px;
 711
 712         .vjs-menu-item {
 713           outline: 0;
 714           font-weight: $font-semibold;
 715
 716           padding: 5px 8px;
 717           text-align: right;
 718
 719           &.vjs-back-button {
 720             background-color: inherit;
 721             padding: 8px 8px 13px 8px;
 722             margin-bottom: 5px;
 723             border-bottom: 1px solid grey;
 724
 725             &::before {
 726               @include chevron-left(9px, 2px);
 727
 728               margin-right: 5px;
 729             }
 730           }
 731
 732           &.vjs-selected {
 733             background-color: inherit;
 734             color: inherit;
 735             position: relative;
 736
 737             &::before {
 738               @include icon(15px);
 739
 740               position: absolute;
 741               left: 8px;
 742               content: ' ';
 743               margin-top: 1px;
 744               background-image: url('../assets/player/images/tick.svg');
 745             }
 746           }
 747         }
 748       }
 749     }
 750   }
 751 }