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
  42   &.vjs-has-started .vjs-big-play-button {
  43     display: block;
  44     visibility: hidden;
  45     opacity: 0;
  46     transition: visibility 0.5s, opacity 0.5s;
  47   }
  48
  49   .vjs-loading-spinner {
  50     display: block;
  51     visibility: hidden;
  52     opacity: 0;
  53     transition-delay: 0.5s;
  54     transition: visibility 0.5s, opacity 0.5s;
  55   }
  56
  57   &.vjs-waiting .vjs-loading-spinner {
  58     visibility: visible;
  59     opacity: 1;
  60
  61   }
  62
  63   .vjs-control-bar,
  64   .vjs-big-play-button,
  65   .vjs-menu-button .vjs-menu-content {
  66     background-color: rgba($primary-background-color, 0.5);
  67   }
  68
  69   $slider-bg-color: lighten($primary-background-color, 33%);
  70
  71   .vjs-slider {
  72     background-color: rgba(255, 255, 255, .3);
  73     border-radius: 2px;
  74     height: 5px;
  75   }
  76
  77   /* The slider bar color is used for the progress bar and the volume bar
  78      (the first two can be removed after a fix that's coming) */
  79   .vjs-volume-level,
  80   .vjs-play-progress,
  81   .vjs-slider-bar {
  82     background: $primary-foreground-color;
  83   }
  84
  85   .vjs-load-progress {
  86     background: rgba($slider-bg-color, 0.5);
  87   }
  88
  89   .vjs-load-progress div {
  90     background: rgba($slider-bg-color, 0.75);
  91   }
  92
  93   .vjs-poster {
  94     outline: none; /* Remove Blue Outline on Click*/
  95     outline: 0;
  96   }
  97
  98   .vjs-control-bar {
  99     height: $control-bar-height;
 100
 101     .vjs-progress-control {
 102       bottom: 34px;
 103       width: 100%;
 104       position: absolute;
 105       height: 5px;
 106
 107       .vjs-progress-holder {
 108         margin: 0;
 109         border-radius: 0;
 110       }
 111     }
 112
 113     .vjs-play-control {
 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       .vjs-icon-placeholder {
 195         display: inline-block;
 196         width: 22px;
 197         height: 22px;
 198         vertical-align: middle;
 199         background: url('../assets/player/images/volume.svg') no-repeat;
 200         background-size: contain;
 201
 202         &::before {
 203           content: '';
 204         }
 205       }
 206
 207       &.vjs-vol-0 .vjs-icon-placeholder {
 208         background: url('../assets/player/images/volume-mute.svg') no-repeat;
 209         background-size: contain;
 210       }
 211     }
 212
 213     .vjs-volume-menu-button,
 214     .vjs-volume-panel {
 215       width: 6em;
 216       position: absolute;
 217       right: 0;
 218       margin-right: 65px;
 219     }
 220
 221     .vjs-volume-bar {
 222       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
 223       background-size: 22px 14px;
 224       height: 100%;
 225       width: 100%;
 226       max-width: 22px;
 227       max-height: 14px;
 228       margin: 7px 4px;
 229       border-radius: 0;
 230       top: 3px;
 231
 232       .vjs-volume-level {
 233         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
 234         background-size: 22px 14px;
 235         max-width: 22px;
 236         max-height: 14px;
 237         height: 100%;
 238       }
 239     }
 240
 241     .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
 242     .vjs-volume-panel.vjs-volume-panel-horizontal:active,
 243     .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
 244     .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
 245       width: 6em;
 246       transition-property: none;
 247     }
 248
 249     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
 250       width: 3em;
 251       height: auto;
 252     }
 253
 254     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
 255       transition-property: none;
 256     }
 257
 258     .vjs-volume-panel {
 259       .vjs-mute-control {
 260         width: 2em;
 261         z-index: 1;
 262         padding: 0;
 263       }
 264
 265       .vjs-volume-control {
 266         display: inline-block;
 267         position: relative;
 268         left: 5px;
 269         opacity: 1;
 270         width: 3em;
 271         height: auto;
 272       }
 273     }
 274
 275     .vjs-fullscreen-control {
 276       width: 37px;
 277
 278       .vjs-icon-placeholder {
 279         display: inline-block;
 280         width: 22px;
 281         height: 22px;
 282         vertical-align: middle;
 283         background: url('../assets/player/images/fullscreen.svg') no-repeat;
 284         background-size: contain;
 285
 286         &::before {
 287           content: '';
 288         }
 289       }
 290     }
 291
 292     .vjs-menu-button-popup {
 293       font-size: 13px;
 294       font-weight: $font-semibold;
 295       width: 50px;
 296
 297       // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
 298       .vjs-resolution-button-label {
 299         line-height: $control-bar-height;
 300         position: absolute;
 301         top: 0;
 302         left: 4px;
 303         width: 100%;
 304         height: 100%;
 305         text-align: center;
 306         box-sizing: inherit;
 307         text-align: center;
 308       }
 309
 310       .vjs-resolution-button {
 311         outline: 0 !important;
 312       }
 313
 314       .vjs-menu {
 315         top: 20px;
 316
 317         .vjs-menu-content {
 318           width: 50px;
 319           left: 50%; /* Center the menu, in it's parent */
 320           margin-left: -21px;
 321         }
 322
 323         li {
 324           text-transform: none;
 325           font-size: 13px;
 326         }
 327       }
 328     }
 329   }
 330
 331   @media screen and (max-width: 550px) {
 332     .vjs-big-play-button {
 333       font-size: 6.5em;
 334     }
 335
 336     .vjs-webtorrent {
 337       padding: 0 !important;
 338
 339       .vjs-webtorrent-displayed {
 340         display: none !important;
 341       }
 342     }
 343   }
 344
 345   @media screen and (max-width: 300px) {
 346     .vjs-dock-text {
 347       font-size: 1.5em;
 348     }
 349
 350     .vjs-big-play-button {
 351       font-size: 5em;
 352     }
 353
 354     .vjs-volume-control {
 355       display: none !important;
 356     }
 357
 358     .vjs-volume-panel {
 359       width: 26px !important;
 360       margin-right: 83px !important;
 361     }
 362   }
 363 }
 364
 365 // Thanks: https://projects.lukehaas.me/css-loaders/
 366 .vjs-loading-spinner {
 367   left: 50%;
 368   font-size: 10px;
 369   text-indent: -9999em;
 370   border: 0.7em solid rgba(255, 255, 255, 0.2);
 371   border-left-color: #ffffff;
 372   transform: translateZ(0);
 373   animation: spinner 1.4s infinite linear;
 374   overflow: hidden;
 375
 376   &:before {
 377     animation: none !important;
 378   }
 379
 380   &:after {
 381     border-radius: 50%;
 382     width: 6em;
 383     height: 6em;
 384     animation: none !important;
 385   }
 386
 387   @keyframes spinner {
 388     0% {
 389       transform: rotate(0deg);
 390     }
 391     100% {
 392       transform: rotate(360deg);
 393     }
 394   }
 395 }
 396