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