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