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       .download-speed-number, .upload-speed-number, .peers-number {
 142         font-weight: $font-semibold;
 143       }
 144
 145       .download-speed-text, .upload-speed-text, .peers-text {
 146         margin-right: 15px;
 147       }
 148
 149       .icon {
 150         display: inline-block;
 151         width: 15px;
 152         height: 15px;
 153         background-size: contain;
 154         vertical-align: middle;
 155         background-repeat: no-repeat;
 156         margin-right: 6px;
 157         position: relative;
 158         top: -1px;
 159
 160         &.icon-download {
 161           background-image: url('../assets/player/images/arrow-down.svg');
 162         }
 163
 164         &.icon-upload {
 165           background-image: url('../assets/player/images/arrow-up.svg');
 166         }
 167       }
 168     }
 169
 170     .vjs-mute-control {
 171       .vjs-icon-placeholder {
 172         display: inline-block;
 173         width: 22px;
 174         height: 22px;
 175         vertical-align: middle;
 176         background: url('../assets/player/images/volume.svg') no-repeat;
 177         background-size: contain;
 178
 179         &::before {
 180           content: '';
 181         }
 182       }
 183
 184       &.vjs-vol-0 .vjs-icon-placeholder {
 185         background: url('../assets/player/images/volume-mute.svg') no-repeat;
 186         background-size: contain;
 187       }
 188     }
 189
 190     .vjs-volume-menu-button,
 191     .vjs-volume-panel {
 192       width: 6em;
 193       position: absolute;
 194       right: 0;
 195       margin-right: 65px;
 196     }
 197
 198     .vjs-volume-bar {
 199       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
 200       background-size: 22px 14px;
 201       height: 100%;
 202       width: 100%;
 203       max-width: 22px;
 204       max-height: 14px;
 205       margin: 7px 4px;
 206       border-radius: 0;
 207       top: 3px;
 208
 209       .vjs-volume-level {
 210         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
 211         background-size: 22px 14px;
 212         max-width: 22px;
 213         max-height: 14px;
 214         height: 100%;
 215       }
 216     }
 217
 218     .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
 219     .vjs-volume-panel.vjs-volume-panel-horizontal:active,
 220     .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
 221     .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
 222       width: 6em;
 223       transition-property: none;
 224     }
 225
 226     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
 227       width: 3em;
 228       height: auto;
 229     }
 230
 231     .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
 232       transition-property: none;
 233     }
 234
 235     .vjs-volume-panel {
 236       .vjs-mute-control {
 237         width: 2em;
 238         z-index: 1;
 239         padding: 0;
 240       }
 241
 242       .vjs-volume-control {
 243         display: inline-block;
 244         position: relative;
 245         left: 5px;
 246         opacity: 1;
 247         width: 3em;
 248         height: auto;
 249       }
 250     }
 251
 252     .vjs-fullscreen-control {
 253       width: 37px;
 254
 255       .vjs-icon-placeholder {
 256         display: inline-block;
 257         width: 22px;
 258         height: 22px;
 259         vertical-align: middle;
 260         background: url('../assets/player/images/fullscreen.svg') no-repeat;
 261         background-size: contain;
 262
 263         &::before {
 264           content: '';
 265         }
 266       }
 267     }
 268
 269     .vjs-menu-button-popup {
 270       font-size: 13px;
 271       font-weight: $font-semibold;
 272       width: 42px;
 273
 274       // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
 275       .vjs-resolution-button-label {
 276         line-height: $control-bar-height;
 277         position: absolute;
 278         top: 0;
 279         left: -1px;
 280         width: 100%;
 281         height: 100%;
 282         text-align: center;
 283         box-sizing: inherit;
 284       }
 285
 286       .vjs-resolution-button {
 287         outline: 0 !important;
 288       }
 289
 290       .vjs-menu {
 291         top: 20px;
 292
 293         .vjs-menu-content {
 294           width: 4em;
 295           left: 50%; /* Center the menu, in it's parent */
 296           margin-left: -2em; /* half of width, to center */
 297         }
 298
 299         li {
 300           text-transform: none;
 301           font-size: 13px;
 302         }
 303       }
 304     }
 305   }
 306 }
 307
 308 // Thanks: https://projects.lukehaas.me/css-loaders/
 309 .vjs-loading-spinner {
 310   margin: 0 !important;
 311   //position: absolute;
 312   // 15px is the nav bar height
 313   top: calc(50% - 15px);
 314   left: 50%;
 315   font-size: 10px;
 316   position: relative;
 317   text-indent: -9999em;
 318   border: 0.7em solid rgba(255, 255, 255, 0.2);
 319   border-left-color: #ffffff;
 320   transform: translateZ(0);
 321   animation: spinner 1.4s infinite linear;
 322
 323   &:before {
 324     animation: none !important;
 325   }
 326
 327   &:after {
 328     border-radius: 50%;
 329     width: 6em;
 330     height: 6em;
 331     animation: none !important;
 332   }
 333
 334   @keyframes spinner {
 335     0% {
 336       transform: rotate(0deg);
 337     }
 338     100% {
 339       transform: rotate(360deg);
 340     }
 341   }
 342 }