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