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