client/src/sass/player/peertube-skin.scss

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