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