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

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