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