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