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