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