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

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