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