video-js-custom.scss

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