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