yaffs.net Git - yaffs-website/blob - node_modules/video.js/src/css/components/_progress.scss

   1 //
   2 // Let's talk pixel math!
   3 // Start with a base font size of 10px (assuming that hasn't changed)
   4 // No Hover:
   5 // - Progress holder is 3px
   6 // - Progress handle is 9px
   7 // - Progress handle is pulled up 3px to center it.
   8 //
   9 // Hover:
  10 // - Progress holder becomes 5px
  11 // - Progress handle becomes 15px
  12 // - Progress handle is pulled up 5px to center it
  13 //
  14
  15 .video-js .vjs-progress-control {
  16   @include flex(auto);
  17   @include display-flex(center);
  18   min-width: 4em;
  19 }
  20
  21 .vjs-live .vjs-progress-control {
  22   display: none;
  23 }
  24
  25 // Box containing play and load progresses. Also acts as seek scrubber.
  26 .video-js .vjs-progress-holder {
  27   @include flex(auto);
  28   @include transition(all 0.2s);
  29   height: 0.3em;
  30 }
  31
  32 // We need an increased hit area on hover
  33 .video-js .vjs-progress-control:hover .vjs-progress-holder {
  34   font-size: 1.666666666666666666em;
  35 }
  36
  37 /* If we let the font size grow as much as everything else, the current time tooltip ends up
  38  ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
  39  to avoid a weird hitch when you roll off the hover. */
  40
  41 // Also show the current time tooltip
  42 .video-js .vjs-progress-control:hover .vjs-time-tooltip,
  43 .video-js .vjs-progress-control:hover .vjs-mouse-display:after,
  44 .video-js .vjs-progress-control:hover .vjs-play-progress:after {
  45   font-family: $text-font-family;
  46   visibility: visible;
  47   font-size: 0.6em;
  48 }
  49
  50 // Progress Bars
  51 .video-js .vjs-progress-holder .vjs-play-progress,
  52 .video-js .vjs-progress-holder .vjs-load-progress,
  53 .video-js .vjs-progress-holder .vjs-tooltip-progress-bar,
  54 .video-js .vjs-progress-holder .vjs-load-progress div {
  55   position: absolute;
  56   display: block;
  57   height: 100%;
  58   margin: 0;
  59   padding: 0;
  60   // updated by javascript during playback
  61   width: 0;
  62   // Needed for IE6
  63   left: 0;
  64   top: 0;
  65 }
  66
  67 .video-js .vjs-mouse-display {
  68   @extend .vjs-icon-circle;
  69
  70   &:before {
  71     display: none;
  72   }
  73 }
  74 .video-js .vjs-play-progress {
  75   background-color: $primary-foreground-color;
  76   @extend .vjs-icon-circle;
  77
  78   // Progress handle
  79   &:before {
  80     position: absolute;
  81     top: -0.333333333333333em;
  82     right: -0.5em;
  83     font-size: 0.9em;
  84   }
  85 }
  86
  87 // Current Time "tooltip"
  88 // By default this is hidden and only shown when hovering over the progress control
  89 .video-js .vjs-time-tooltip,
  90 .video-js .vjs-mouse-display:after,
  91 .video-js .vjs-play-progress:after {
  92   visibility: hidden;
  93   pointer-events: none;
  94   position: absolute;
  95   top: -3.4em;
  96   right: -1.9em;
  97   font-size: 0.9em;
  98   color: #000;
  99   content: attr(data-current-time);
 100   padding: 6px 8px 8px 8px;
 101   @include background-color-with-alpha(#fff, 0.8);
 102   @include border-radius(0.3em);
 103 }
 104
 105 .video-js .vjs-time-tooltip,
 106 .video-js .vjs-play-progress:before,
 107 .video-js .vjs-play-progress:after {
 108   z-index: 1;
 109 }
 110
 111 .video-js .vjs-progress-control .vjs-keep-tooltips-inside:after {
 112   display: none;
 113 }
 114
 115 .video-js .vjs-load-progress {
 116   // For IE8 we'll lighten the color
 117   background: lighten($secondary-background-color, 25%);
 118   // Otherwise we'll rely on stacked opacities
 119   background: rgba($secondary-background-color, $secondary-background-transparency);
 120 }
 121
 122 // there are child elements of the load progress bar that represent the
 123 // specific time ranges that have been buffered
 124 .video-js .vjs-load-progress div {
 125   // For IE8 we'll lighten the color
 126   background: lighten($secondary-background-color, 50%);
 127   // Otherwise we'll rely on stacked opacities
 128   background: rgba($secondary-background-color, 0.75);
 129 }
 130
 131 .video-js.vjs-no-flex .vjs-progress-control {
 132   width: auto;
 133 }
 134
 135 .video-js .vjs-time-tooltip {
 136   display: inline-block;
 137   height: 2.4em;
 138   position: relative;
 139   float: right;
 140   right: -1.9em;
 141 }
 142
 143 .vjs-tooltip-progress-bar {
 144   visibility: hidden;
 145 }
 146
 147 .video-js .vjs-progress-control .vjs-mouse-display {
 148   display: none;
 149   position: absolute;
 150   width: 1px;
 151   height: 100%;
 152   background-color: #000;
 153   z-index: 1;
 154 }
 155 .vjs-no-flex .vjs-progress-control .vjs-mouse-display {
 156   z-index: 0;
 157 }
 158 .video-js .vjs-progress-control:hover .vjs-mouse-display {
 159   display: block;
 160 }
 161 .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
 162 .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display:after {
 163   visibility: hidden;
 164   opacity: 0;
 165   $trans: visibility 1.0s, opacity 1.0s;
 166   @include transition($trans);
 167 }
 168 .video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display,
 169 .video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display:after {
 170   display: none;
 171 }
 172 .vjs-mouse-display .vjs-time-tooltip,
 173 .video-js .vjs-progress-control .vjs-mouse-display:after {
 174   color: #fff;
 175   @include background-color-with-alpha(#000, 0.8);
 176 }