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

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