client/src/sass/player/peertube-skin.scss

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