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-peertube-link {
 478       padding: 0 !important;
 479     }
 480
 481     .vjs-settings {
 482       width: 33px;
 483     }
 484   }
 485 }
 486
 487 // Play/pause animations
 488 .vjs-has-started .vjs-play-control {
 489   &.vjs-playing {
 490     animation: remove-pause-button 0.25s ease;
 491   }
 492
 493   &.vjs-paused {
 494     animation: add-play-button 0.25s ease;
 495   }
 496
 497   @keyframes remove-pause-button {
 498     0% {
 499       transform: rotate(90deg);
 500     }
 501     100% {
 502       transform: rotate(0deg);
 503     }
 504   }
 505
 506   @keyframes add-play-button {
 507     0% {
 508       transform: rotate(-90deg);
 509     }
 510     100% {
 511       transform: rotate(0deg);
 512     }
 513   }
 514 }
 515
 516 // Thanks: https://projects.lukehaas.me/css-loaders/
 517 .vjs-loading-spinner {
 518   left: 50%;
 519   font-size: 10px;
 520   text-indent: -9999em;
 521   border: 0.7em solid rgba(255, 255, 255, 0.2);
 522   border-left-color: #ffffff;
 523   transform: translateZ(0);
 524   animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important;
 525   overflow: hidden;
 526   visibility: hidden;
 527
 528   &::before {
 529     animation: none !important;
 530   }
 531
 532   &::after {
 533     border-radius: 50%;
 534     width: 6em;
 535     height: 6em;
 536     animation: none !important;
 537   }
 538
 539   @keyframes spinner {
 540     0% {
 541       transform: rotate(0deg);
 542     }
 543     100% {
 544       transform: rotate(360deg);
 545     }
 546   }
 547
 548   @keyframes vjs-spinner-show {
 549     0% {
 550       display: none;
 551       opacity: 0;
 552     }
 553
 554     1% {
 555       display: block;
 556       visibility: visible;
 557       opacity: 0;
 558     }
 559
 560     100% {
 561       display: block;
 562       visibility: visible;
 563       opacity: 1;
 564     }
 565   }
 566 }
 567
 568 // Error display disabled
 569 .vjs-error:not(.vjs-error-display-enabled) {
 570   .vjs-error-display {
 571     display: none;
 572   }
 573
 574   .vjs-loading-spinner {
 575     display: block;
 576   }
 577 }
 578
 579 // Error display enabled
 580 .vjs-error.vjs-error-display-enabled {
 581   .vjs-error-display {
 582     display: block;
 583   }
 584 }
 585
 586
 587 /* Sass for videojs-settings-menu */
 588
 589 .video-js {
 590
 591   .vjs-settings {
 592     @include disable-outline;
 593
 594     cursor: pointer;
 595     width: 37px;
 596
 597     .vjs-icon-placeholder {
 598       display: inline-block;
 599       width: 17px;
 600       height: 17px;
 601       vertical-align: middle;
 602       background: url('../assets/player/images/settings.svg') no-repeat;
 603       background-size: contain;
 604
 605       &::before {
 606         content: '';
 607       }
 608     }
 609   }
 610
 611   .vjs-settings-sub-menu-title {
 612     width: 4em;
 613     text-transform: initial;
 614   }
 615
 616   .vjs-settings-dialog {
 617     position: absolute;
 618     right: .5em;
 619     bottom: 3.5em;
 620     color: $primary-foreground-color;
 621     opacity: $primary-foreground-opacity;
 622     margin: 0 auto;
 623     font-size: $font-size !important;
 624
 625     width: auto;
 626     overflow: hidden;
 627
 628     transition: width $setting-transition-duration $setting-transition-easing,  height $setting-transition-duration $setting-transition-easing;
 629
 630     .vjs-settings-sub-menu-value,
 631     .vjs-settings-sub-menu-title {
 632       display: table-cell;
 633       padding: 0 5px;
 634     }
 635
 636     .vjs-settings-sub-menu-title {
 637       text-align: left;
 638       font-weight: $font-semibold;
 639     }
 640
 641     .vjs-settings-sub-menu-value {
 642       width: 100%;
 643       text-align: right;
 644
 645       small {
 646         font-size: 0.85em;
 647         opacity: 0.8;
 648       }
 649     }
 650
 651     .vjs-settings-panel {
 652       position: absolute;
 653       bottom: 0;
 654       right: 0;
 655       overflow-y: auto;
 656       overflow-x: hidden;
 657       border-radius: 1px;
 658     }
 659
 660     .vjs-settings-panel-child {
 661       display: flex;
 662
 663       align-items: flex-end;
 664       white-space: nowrap;
 665
 666       &:focus,
 667       &:active {
 668         outline: none;
 669       }
 670
 671       > .vjs-menu {
 672         flex: 1;
 673         min-width: 200px;
 674       }
 675
 676       > .vjs-menu,
 677       > .vjs-settings-sub-menu {
 678         transition: all $setting-transition-duration $setting-transition-easing;
 679
 680         .vjs-menu-item {
 681
 682           &:hover {
 683             background-color: rgba(255, 255, 255, 0.2);
 684           }
 685
 686           &:first-child {
 687             margin-top: 5px;
 688           }
 689
 690           &:last-child {
 691             margin-bottom: 5px;
 692           }
 693         }
 694
 695         li {
 696           font-size: 1em;
 697           text-transform: initial;
 698
 699           &:hover {
 700             cursor: pointer;
 701           }
 702         }
 703       }
 704
 705       > .vjs-menu {
 706         .vjs-menu-item {
 707           padding: 8px 16px;
 708         }
 709
 710         .vjs-settings-sub-menu-value::after {
 711           @include chevron-right(9px, 2px);
 712
 713           margin-left: 5px;
 714         }
 715       }
 716
 717       > .vjs-settings-sub-menu {
 718         width: 80px;
 719
 720         .vjs-menu-item {
 721           outline: 0;
 722           font-weight: $font-semibold;
 723
 724           padding: 5px 8px;
 725           text-align: right;
 726
 727           &.vjs-back-button {
 728             background-color: inherit;
 729             padding: 8px 8px 13px 8px;
 730             margin-bottom: 5px;
 731             border-bottom: 1px solid grey;
 732
 733             &::before {
 734               @include chevron-left(9px, 2px);
 735
 736               margin-right: 5px;
 737             }
 738           }
 739
 740           &.vjs-selected {
 741             background-color: inherit;
 742             color: inherit;
 743             position: relative;
 744
 745             &::before {
 746               @include icon(15px);
 747
 748               position: absolute;
 749               left: 8px;
 750               content: ' ';
 751               margin-top: 1px;
 752               background-image: url('../assets/player/images/tick.svg');
 753             }
 754           }
 755         }
 756       }
 757     }
 758   }
 759 }