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

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