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