www.aleph1.co.uk Git - yaffs-website/blob - node_modules/video.js/src/css/components/_volume.scss

   1 .video-js .vjs-mute-control,
   2 .video-js .vjs-volume-menu-button {
   3   cursor: pointer;
   4   @include flex(none);
   5   @extend .vjs-icon-volume-high;
   6 }
   7
   8 .video-js .vjs-mute-control.vjs-vol-0,
   9 .video-js .vjs-volume-menu-button.vjs-vol-0 {
  10   @extend .vjs-icon-volume-mute;
  11 }
  12 .video-js .vjs-mute-control.vjs-vol-1,
  13 .video-js .vjs-volume-menu-button.vjs-vol-1 {
  14   @extend .vjs-icon-volume-low;
  15 }
  16 .video-js .vjs-mute-control.vjs-vol-2,
  17 .video-js .vjs-volume-menu-button.vjs-vol-2 {
  18   @extend .vjs-icon-volume-mid;
  19 }
  20
  21 .video-js .vjs-volume-control {
  22   width: 5em;
  23   @include flex(none);
  24   @include display-flex(center);
  25 }
  26
  27 .video-js .vjs-volume-bar {
  28   margin: 1.35em 0.45em;
  29 }
  30
  31 .vjs-volume-bar.vjs-slider-horizontal {
  32   width: 5em;
  33   height: 0.3em;
  34 }
  35
  36 .vjs-volume-bar.vjs-slider-vertical {
  37   width: 0.3em;
  38   height: 5em;
  39   margin: 1.35em auto;
  40 }
  41
  42 .video-js .vjs-volume-level {
  43   position: absolute;
  44   bottom: 0;
  45   left: 0;
  46
  47   background-color: $primary-foreground-color;
  48
  49   @extend .vjs-icon-circle;
  50
  51   // Volume handle
  52   &:before {
  53     position: absolute;
  54     font-size: 0.9em; // Doing this to match the handle on play progress.
  55   }
  56 }
  57
  58 .vjs-slider-vertical .vjs-volume-level {
  59   width: 0.3em;
  60
  61   // Volume handle
  62   &:before {
  63     top: -0.5em;
  64     left: -0.3em;
  65   }
  66 }
  67 .vjs-slider-horizontal .vjs-volume-level {
  68   height: 0.3em;
  69
  70   // Volume handle
  71   &:before {
  72     top: -0.3em;
  73     right: -0.5em;
  74   }
  75 }
  76
  77 // Assumes volume starts at 1.0.
  78 .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
  79   height: 100%;
  80 }
  81
  82 .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
  83   width: 100%;
  84 }
  85
  86 // The volume menu button is like menu buttons (captions/subtitles) but works
  87 // a little differently. It needs to be possible to tab to the volume slider
  88 // without hitting space bar on the menu button. To do this we're not using
  89 // display:none to hide the slider menu by default, and instead setting the
  90 // width and height to zero.
  91 .vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
  92   display: block;
  93   width: 0;
  94   height: 0;
  95   border-top-color: transparent;
  96 }
  97
  98 .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
  99   left: 0.5em;
 100   height: 8em;
 101 }
 102 .vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
 103   left: -2em;
 104 }
 105
 106 .vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu-content {
 107   height: 0;
 108   width: 0;
 109
 110   // Avoids unnecessary scrollbars in the menu content. Primarily noticed in Chrome on Linux.
 111   overflow-x: hidden;
 112   overflow-y: hidden;
 113 }
 114
 115 .vjs-volume-menu-button-vertical:hover .vjs-menu-content,
 116 .vjs-volume-menu-button-vertical:focus .vjs-menu-content,
 117 .vjs-volume-menu-button-vertical.vjs-slider-active .vjs-menu-content,
 118 .vjs-volume-menu-button-vertical .vjs-lock-showing .vjs-menu-content {
 119   height: 8em;
 120   width: 2.9em;
 121 }
 122
 123 .vjs-volume-menu-button-horizontal:hover .vjs-menu-content,
 124 .vjs-volume-menu-button-horizontal:focus .vjs-menu-content,
 125 .vjs-volume-menu-button-horizontal .vjs-slider-active .vjs-menu-content,
 126 .vjs-volume-menu-button-horizontal .vjs-lock-showing .vjs-menu-content {
 127   height: 2.9em;
 128   width: 8em;
 129 }
 130
 131 .vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
 132   // An inline volume should never have a menu background color.
 133   //  This protects it from external changes to background colors.
 134   background-color: transparent !important;
 135 }