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