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