client/src/sass/video-js-custom.scss

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