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