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           mask-size: cover;
 358           -webkit-mask-size: cover;
 359
 360           background-color: #fff;
 361           width: 11px;
 362           height: 11px;
 363           margin-top: -2px;
 364           display: inline-block;
 365         }
 366
 367         &.icon-previous {
 368           transform: rotate(180deg);
 369         }
 370       }
 371     }
 372
 373     .vjs-peertube {
 374       .icon {
 375         display: inline-block;
 376         width: 15px;
 377         height: 15px;
 378         background-size: contain;
 379         vertical-align: middle;
 380         background-repeat: no-repeat;
 381         position: relative;
 382         top: -1px;
 383       }
 384     }
 385
 386     .vjs-playback-rate {
 387       font-size: 10px;
 388       width: 37px !important;
 389
 390       .vjs-playback-rate-value {
 391         font-size: 13px;
 392         line-height: $control-bar-height;
 393       }
 394
 395       .vjs-menu .vjs-menu-content {
 396         width: 37px !important;
 397       }
 398     }
 399
 400     .vjs-mute-control {
 401       @include disable-outline;
 402
 403       padding: 0;
 404       width: 30px;
 405
 406       .vjs-icon-placeholder {
 407         display: inline-block;
 408         width: 22px;
 409         height: 22px;
 410         vertical-align: middle;
 411         background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
 412         background-size: contain;
 413
 414         &::before {
 415           content: '';
 416         }
 417       }
 418
 419       &.vjs-vol-0 .vjs-icon-placeholder {
 420         background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
 421         background-size: contain;
 422       }
 423     }
 424
 425     .vjs-volume-control {
 426       @include margin(0, 5px, 0, 0);
 427
 428       width: 30px;
 429     }
 430
 431     .vjs-volume-bar {
 432       background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
 433       background-size: 22px 14px;
 434       height: 100%;
 435       width: 100%;
 436       max-width: 22px;
 437       max-height: 14px;
 438       margin: 7px 4px;
 439       border-radius: 0;
 440       top: 3px;
 441
 442       .vjs-volume-level {
 443         background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
 444         background-size: 22px 14px;
 445         max-width: 22px;
 446         max-height: 14px;
 447         height: 100%;
 448       }
 449
 450       &:focus {
 451         text-shadow: none;
 452         box-shadow: none;
 453       }
 454     }
 455
 456     .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
 457     .vjs-volume-panel.vjs-volume-panel-horizontal:active,
 458     .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
 459     .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
 460       width: 6em;
 461       transition-property: none;
 462     }
 463
 464     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
 465       width: 3em;
 466       height: auto;
 467     }
 468
 469     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
 470       transition-property: none;
 471     }
 472
 473     .vjs-volume-panel {
 474       .vjs-mute-control {
 475         width: 2em;
 476         z-index: 1;
 477         padding: 0;
 478       }
 479
 480       .vjs-volume-control {
 481         display: inline-block;
 482         position: relative;
 483         left: 5px;
 484         opacity: 1;
 485         width: 3em;
 486         height: auto;
 487       }
 488     }
 489
 490     .vjs-peertube-link {
 491       @include disable-outline;
 492       @include disable-default-a-behaviour;
 493
 494       text-decoration: none;
 495       line-height: $control-bar-height;
 496       font-weight: $font-semibold;
 497       padding: 0 5px;
 498     }
 499
 500     .vjs-theater-control {
 501       @include disable-outline;
 502       @include margin-right(1px);
 503
 504       width: 37px;
 505       cursor: pointer;
 506
 507       .vjs-icon-placeholder {
 508         transition: transform 0.2s ease;
 509         display: inline-block;
 510         width: 22px;
 511         height: 22px;
 512         vertical-align: middle;
 513         background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
 514         background-size: contain;
 515
 516         &::before {
 517           content: '';
 518         }
 519       }
 520     }
 521
 522     .vjs-fullscreen-control {
 523       @include disable-outline;
 524       @include margin-left($first-control-bar-element-margin-left);
 525
 526       width: 37px;
 527
 528       .vjs-icon-placeholder {
 529         display: inline-block;
 530         width: 22px;
 531         height: 22px;
 532         vertical-align: middle;
 533         background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
 534         background-size: contain;
 535
 536         &::before {
 537           content: '';
 538         }
 539       }
 540     }
 541
 542     .vjs-menu-button-popup {
 543       font-weight: $font-semibold;
 544       width: 50px;
 545
 546       .vjs-resolution-button {
 547         @include disable-outline;
 548       }
 549
 550       .vjs-menu {
 551         top: 20px;
 552         left: 0;
 553
 554         .vjs-menu-content {
 555           width: 50px;
 556           bottom: 20px;
 557         }
 558
 559         li {
 560           text-transform: none;
 561           font-size: 13px;
 562         }
 563       }
 564     }
 565   }
 566
 567   @media screen and (max-width: 750px) {
 568     .vjs-theater-control {
 569       display: none;
 570     }
 571
 572     .vjs-dock-text {
 573       font-size: 16px;
 574     }
 575
 576     .vjs-dock-description {
 577       font-size: 9px;
 578     }
 579
 580     .vjs-big-play-button {
 581       font-size: 5em;
 582       border-width: 3px;
 583
 584       .vjs-icon-placeholder::before {
 585         @include big-play-button-triangle-size(32px);
 586       }
 587     }
 588   }
 589
 590   @media screen and (max-width: 570px) {
 591     .vjs-dock-text {
 592       font-size: 14px;
 593     }
 594
 595     .vjs-big-play-button {
 596       font-size: 4.5em;
 597       border-width: 2.5px;
 598
 599       .vjs-icon-placeholder::before {
 600         @include big-play-button-triangle-size(27px);
 601       }
 602     }
 603
 604     .vjs-peertube {
 605       padding: 0 !important;
 606
 607       .vjs-peertube-displayed {
 608         display: none !important;
 609       }
 610     }
 611
 612     &.vjs-live {
 613       .vjs-duration {
 614         display: none !important;
 615       }
 616
 617       .vjs-peertube {
 618         display: none !important;
 619       }
 620     }
 621   }
 622
 623   @media screen and (max-width: 350px) {
 624     .vjs-dock-text {
 625       font-size: 13px;
 626     }
 627
 628     .vjs-big-play-button {
 629       font-size: 3em;
 630       border-width: 2px;
 631
 632       .vjs-icon-placeholder::before {
 633         @include big-play-button-triangle-size(20px);
 634       }
 635     }
 636
 637     .vjs-volume-control,
 638     .vjs-next-video,
 639     .vjs-previous-video {
 640       display: none !important;
 641     }
 642
 643     .vjs-peertube-link {
 644       padding: 0 !important;
 645     }
 646
 647     .vjs-settings {
 648       width: 33px;
 649     }
 650
 651     .vjs-control-bar {
 652       > button:first-child {
 653         @include margin-left($first-control-bar-element-margin-left-small-width);
 654       }
 655     }
 656
 657     .vjs-fullscreen-control {
 658       @include margin-right($first-control-bar-element-margin-left-small-width);
 659     }
 660
 661     &.vjs-live {
 662       .vjs-current-time {
 663         display: none !important;
 664       }
 665     }
 666   }
 667
 668   // Theater mode is enabled
 669   &.vjs-theater-enabled {
 670     .vjs-theater-control {
 671       width: 30px;
 672
 673       .vjs-icon-placeholder {
 674         transform: scale(0.8);
 675       }
 676     }
 677   }
 678
 679   // On fullscreen, hide theater control
 680   &.vjs-fullscreen {
 681     .vjs-theater-control {
 682       display: none;
 683     }
 684   }
 685 }
 686
 687 // Play/pause animations
 688 .vjs-has-started .vjs-play-control {
 689   &.vjs-playing {
 690     animation: remove-pause-button 0.25s ease;
 691   }
 692
 693   &.vjs-paused {
 694     animation: add-play-button 0.25s ease;
 695   }
 696
 697   @keyframes remove-pause-button {
 698     0% {
 699       transform: rotate(90deg);
 700     }
 701     100% {
 702       transform: rotate(0deg);
 703     }
 704   }
 705
 706   @keyframes add-play-button {
 707     0% {
 708       transform: rotate(-90deg);
 709     }
 710     100% {
 711       transform: rotate(0deg);
 712     }
 713   }
 714 }
 715
 716 // Error display disabled
 717 .vjs-error:not(.vjs-error-display-enabled) {
 718   .vjs-error-display {
 719     display: none;
 720   }
 721
 722   .vjs-loading-spinner {
 723     display: block;
 724   }
 725 }
 726
 727 // Error display enabled
 728 .vjs-error.vjs-error-display-enabled {
 729   .vjs-error-display {
 730     display: block;
 731   }
 732 }
 733
 734 .vjs-no-next-in-playlist {
 735   .vjs-next-video {
 736     cursor: default;
 737
 738     .icon {
 739       background-color: rgba(255, 255, 255, 0.5);
 740     }
 741   }
 742 }