client/src/sass/player/control-bar.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4 @use './_player-variables' as *;
   5
   6 .video-js.vjs-peertube-skin .vjs-control-bar {
   7   z-index: 100;
   8
   9   height: $control-bar-height;
  10   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  11   box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
  12   text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  13   transition: visibility 0.3s, opacity 0.3s !important;
  14
  15   &.control-bar-hidden {
  16     display: none !important;
  17   }
  18
  19   > button:first-child {
  20     @include margin-left($first-control-bar-element-margin-left);
  21   }
  22
  23   > button:last-child {
  24     @include margin-right($first-control-bar-element-margin-left);
  25   }
  26
  27   .vjs-progress-control,
  28   .vjs-play-control,
  29   .vjs-playback-rate,
  30   .vjs-mute-control,
  31   .vjs-volume-control,
  32   .vjs-resolution-control,
  33   .vjs-fullscreen-control,
  34   .vjs-peertube-link,
  35   .vjs-theater-control,
  36   .vjs-settings {
  37     color: pvar(--embedForegroundColor) !important;
  38
  39     opacity: $primary-foreground-opacity;
  40     transition: opacity .1s;
  41
  42     &:hover {
  43       opacity: $primary-foreground-opacity-hover;
  44     }
  45   }
  46
  47   .vjs-current-time,
  48   .vjs-duration,
  49   .vjs-peertube {
  50     color: pvar(--embedForegroundColor);
  51     opacity: $primary-foreground-opacity;
  52   }
  53
  54   .vjs-progress-control {
  55     @include margin-left($progress-margin);
  56
  57     position: absolute;
  58     top: $control-bar-slider-top;
  59     z-index: 100; // On top of the progress bar
  60     width: calc(100% - (2 * #{$progress-margin}));
  61     height: 20px;
  62
  63     .vjs-slider {
  64       margin: 0;
  65       border-radius: 0;
  66       background-color: rgba(255, 255, 255, .2);
  67       height: 3px;
  68       transition: none;
  69
  70       .vjs-play-progress {
  71         background: pvar(--embedForegroundColor);
  72
  73         // Not display the circle if the progress is not hovered
  74         &::before {
  75           opacity: 0;
  76           transition: opacity 0.1s ease;
  77           font-size: 14px;
  78
  79           top: -0.3em;
  80         }
  81
  82         .vjs-time-tooltip {
  83           display: none;
  84         }
  85       }
  86
  87       .vjs-load-progress {
  88         &,
  89         div {
  90           background: rgba(255, 255, 255, .2);
  91         }
  92       }
  93     }
  94   }
  95
  96   .vjs-progress-control:hover .vjs-slider,
  97   .vjs-progress-control .vjs-slider.vjs-sliding {
  98     height: 5px;
  99
 100     .vjs-play-progress::before {
 101       opacity: 1;
 102     }
 103   }
 104
 105   .vjs-play-control {
 106     @include disable-outline;
 107
 108     cursor: pointer;
 109     width: $control-bar-button-width;
 110
 111     .vjs-icon-placeholder::before {
 112       font-size: $control-bar-play-font-size;
 113       line-height: unset;
 114       position: relative;
 115       top: -1px;
 116     }
 117   }
 118
 119   .vjs-time-control {
 120     line-height: inherit;
 121
 122     &.vjs-current-time {
 123       @include margin-left(.5em);
 124
 125       font-size: $control-bar-font-size;
 126       display: inline-block;
 127       padding: 0;
 128
 129       .vjs-current-time-display {
 130         line-height: calc(#{$control-bar-height} - 1px);
 131
 132         &::after {
 133           @include margin(0, 1px, 0, 2px);
 134
 135           content: '/';
 136         }
 137       }
 138     }
 139
 140     &.vjs-duration {
 141       font-size: $control-bar-font-size;
 142       display: inline-block;
 143       padding: 0;
 144
 145       .vjs-duration-display {
 146         line-height: calc(#{$control-bar-height} - 1px);
 147       }
 148     }
 149
 150     &.vjs-remaining-time {
 151       display: none;
 152     }
 153   }
 154
 155   .vjs-live-control {
 156     line-height: $control-bar-height;
 157     min-width: 4em;
 158     width: inherit;
 159   }
 160
 161   .vjs-peertube {
 162     @include margin-right(6px);
 163
 164     width: 100%;
 165     line-height: $control-bar-height;
 166     text-align: end;
 167     overflow: hidden;
 168     font-size: $control-bar-font-size;
 169
 170     .vjs-peertube-displayed {
 171       display: block;
 172     }
 173
 174     .vjs-peertube-hidden {
 175       display: none;
 176     }
 177
 178     .download-speed-number,
 179     .upload-speed-number,
 180     .peers-number,
 181     .http-fallback {
 182       font-weight: $font-semibold;
 183     }
 184
 185     .download-speed-text,
 186     .upload-speed-text,
 187     .peers-text,
 188     .http-fallback {
 189       @include margin-right(15px);
 190     }
 191
 192     .icon {
 193       @include margin-right(2px);
 194
 195       display: inline-block;
 196       width: 15px;
 197       height: 15px;
 198       background-size: contain;
 199       vertical-align: middle;
 200       background-repeat: no-repeat;
 201       position: relative;
 202       top: -1px;
 203
 204       &.icon-download {
 205         background-image: url('#{$assets-path}/player/images/arrow-down.svg');
 206       }
 207
 208       &.icon-upload {
 209         background-image: url('#{$assets-path}/player/images/arrow-up.svg');
 210       }
 211     }
 212   }
 213
 214   .vjs-next-video,
 215   .vjs-previous-video {
 216     width: $control-bar-button-width - 4px;
 217
 218     &.vjs-disabled {
 219       cursor: default;
 220     }
 221
 222     .icon {
 223       &.icon-next,
 224       &.icon-previous {
 225         mask-image: url('#{$assets-path}/player/images/next.svg');
 226         -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
 227         mask-size: cover;
 228         -webkit-mask-size: cover;
 229
 230         background-color: #fff;
 231         width: $control-bar-next-previous-play-font-size;
 232         height: $control-bar-next-previous-play-font-size;
 233         display: inline-block;
 234       }
 235
 236       &.icon-previous {
 237         transform: rotate(180deg);
 238       }
 239     }
 240   }
 241
 242   .vjs-mute-control {
 243     @include disable-outline;
 244
 245     padding: 0;
 246     width: $control-bar-icon-size;
 247
 248     .vjs-icon-placeholder {
 249       display: inline-block;
 250       width: $control-bar-icon-size;
 251       height: $control-bar-icon-size;
 252       vertical-align: middle;
 253       background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
 254       background-size: contain;
 255
 256       &::before {
 257         content: '';
 258       }
 259     }
 260
 261     &.vjs-vol-0 .vjs-icon-placeholder {
 262       background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
 263       background-size: contain;
 264     }
 265   }
 266
 267   .vjs-volume-control {
 268     @include margin(0, 5px, 0, 5px);
 269
 270     width: $control-bar-icon-size;
 271     display: flex;
 272     align-items: center;
 273   }
 274
 275   .vjs-volume-bar {
 276     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
 277     background-size: $control-bar-icon-size $control-bar-volume-slider-height;
 278     height: 100%;
 279     width: 100%;
 280     max-width: $control-bar-icon-size;
 281     max-height: $control-bar-volume-slider-height;
 282     margin: 0;
 283     border-radius: 0;
 284
 285     .vjs-volume-level {
 286       background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
 287       background-size: $control-bar-icon-size $control-bar-volume-slider-height;
 288       max-width: $control-bar-icon-size;
 289       height: 100%;
 290       max-height: $control-bar-volume-slider-height;
 291
 292       &::before {
 293         // Remove circle
 294         content: '';
 295       }
 296     }
 297
 298     &:focus {
 299       text-shadow: none;
 300       box-shadow: none;
 301     }
 302   }
 303
 304   .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
 305   .vjs-volume-panel.vjs-volume-panel-horizontal:active,
 306   .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
 307   .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
 308     width: 6em;
 309     transition-property: none;
 310   }
 311
 312   .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
 313     width: 3em;
 314     height: auto;
 315   }
 316
 317   .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
 318     transition-property: none;
 319   }
 320
 321   .vjs-volume-panel {
 322     .vjs-mute-control {
 323       width: 2em;
 324       z-index: 1;
 325       padding: 0;
 326     }
 327
 328     .vjs-volume-control {
 329       display: inline-block;
 330       position: relative;
 331       left: 5px;
 332       opacity: 1;
 333       width: 3em;
 334       height: auto;
 335     }
 336   }
 337
 338   .vjs-settings {
 339     @include disable-outline;
 340
 341     cursor: pointer;
 342     width: $control-bar-button-width;
 343
 344     .vjs-icon-placeholder {
 345       display: inline-block;
 346       height: $control-bar-icon-size - 5px;
 347       width: $control-bar-icon-size - 5px;
 348       vertical-align: middle;
 349       background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
 350       background-size: contain;
 351
 352       &::before {
 353         content: '';
 354       }
 355     }
 356   }
 357
 358   .vjs-peertube-link {
 359     @include disable-outline;
 360     @include disable-default-a-behaviour;
 361
 362     text-decoration: none;
 363     line-height: $control-bar-height;
 364     font-weight: $font-semibold;
 365     padding: 0 5px;
 366   }
 367
 368   .vjs-theater-control {
 369     @include disable-outline;
 370
 371     width: $control-bar-button-width;
 372     cursor: pointer;
 373
 374     .vjs-icon-placeholder {
 375       transition: transform 0.2s ease;
 376       display: inline-block;
 377       width: $control-bar-icon-size;
 378       height: $control-bar-icon-size;
 379       vertical-align: middle;
 380       background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
 381       background-size: contain;
 382
 383       &::before {
 384         content: '';
 385       }
 386     }
 387   }
 388
 389   .vjs-fullscreen-control {
 390     @include disable-outline;
 391
 392     width: $control-bar-button-width;
 393
 394     .vjs-icon-placeholder {
 395       display: inline-block;
 396       width: $control-bar-icon-size;
 397       height: $control-bar-icon-size;
 398       vertical-align: middle;
 399       background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
 400       background-size: contain;
 401
 402       &::before {
 403         content: '';
 404       }
 405     }
 406   }
 407
 408   @media screen and (max-width: $screen-width-750) {
 409     .vjs-theater-control {
 410       display: none;
 411     }
 412
 413     .vjs-peertube {
 414       .icon,
 415       .download-speed-text,
 416       .upload-speed-text {
 417         display: none !important;
 418       }
 419     }
 420   }
 421
 422   @media screen and (max-width: $screen-width-570) {
 423     .vjs-peertube {
 424       padding: 0 !important;
 425
 426       .vjs-peertube-displayed {
 427         display: none !important;
 428       }
 429     }
 430
 431     &.vjs-live {
 432       .vjs-duration {
 433         display: none !important;
 434       }
 435
 436       .vjs-peertube {
 437         display: none !important;
 438       }
 439     }
 440   }
 441
 442   @media screen and (max-width: $screen-width-350) {
 443     .vjs-volume-control,
 444     .vjs-next-video,
 445     .vjs-previous-video {
 446       display: none !important;
 447     }
 448
 449     .vjs-peertube-link {
 450       padding: 0 !important;
 451     }
 452
 453     > button:first-child {
 454       @include margin-left($first-control-bar-element-margin-left-small-width);
 455     }
 456
 457     > button:last-child {
 458       @include margin-right($first-control-bar-element-margin-left-small-width);
 459     }
 460
 461     &.vjs-live {
 462       .vjs-current-time {
 463         display: none !important;
 464       }
 465     }
 466   }
 467 }