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