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: $control-bar-height;
 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: $control-bar-height;
 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: 42px;
 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: -1px;
 282         width: 100%;
 283         height: 100%;
 284         text-align: center;
 285         box-sizing: inherit;
 286       }
 287
 288       .vjs-resolution-button {
 289         outline: 0 !important;
 290       }
 291
 292       .vjs-menu {
 293         top: 20px;
 294
 295         .vjs-menu-content {
 296           width: 4em;
 297           left: 50%; /* Center the menu, in it's parent */
 298           margin-left: -2em; /* half of width, to center */
 299         }
 300
 301         li {
 302           text-transform: none;
 303           font-size: 13px;
 304         }
 305       }
 306     }
 307   }
 308
 309   @media screen and (max-width: 450px) {
 310     .vjs-webtorrent-displayed {
 311       display: none !important;
 312     }
 313   }
 314 }
 315
 316 // Thanks: https://projects.lukehaas.me/css-loaders/
 317 .vjs-loading-spinner {
 318   left: 50%;
 319   font-size: 10px;
 320   text-indent: -9999em;
 321   border: 0.7em solid rgba(255, 255, 255, 0.2);
 322   border-left-color: #ffffff;
 323   transform: translateZ(0);
 324   animation: spinner 1.4s infinite linear;
 325
 326   &:before {
 327     animation: none !important;
 328   }
 329
 330   &:after {
 331     border-radius: 50%;
 332     width: 6em;
 333     height: 6em;
 334     animation: none !important;
 335   }
 336
 337   @keyframes spinner {
 338     0% {
 339       transform: rotate(0deg);
 340     }
 341     100% {
 342       transform: rotate(360deg);
 343     }
 344   }
 345 }
 346