Version 1

[yaffs-website] / node_modules / video.js / src / css / components / _progress.scss

diff --git a/node_modules/video.js/src/css/components/_progress.scss b/node_modules/video.js/src/css/components/_progress.scss
new file mode 100644 (file)
index 0000000..820b7e7
--- /dev/null
+++ b/node_modules/video.js/src/css/components/_progress.scss
@@ -0,0 +1,176 @@
+//
+// Let's talk pixel math!
+// Start with a base font size of 10px (assuming that hasn't changed)
+// No Hover:
+// - Progress holder is 3px
+// - Progress handle is 9px
+// - Progress handle is pulled up 3px to center it.
+//
+// Hover:
+// - Progress holder becomes 5px
+// - Progress handle becomes 15px
+// - Progress handle is pulled up 5px to center it
+//
+
+.video-js .vjs-progress-control {
+  @include flex(auto);
+  @include display-flex(center);
+  min-width: 4em;
+}
+
+.vjs-live .vjs-progress-control {
+  display: none;
+}
+
+// Box containing play and load progresses. Also acts as seek scrubber.
+.video-js .vjs-progress-holder {
+  @include flex(auto);
+  @include transition(all 0.2s);
+  height: 0.3em;
+}
+
+// We need an increased hit area on hover
+.video-js .vjs-progress-control:hover .vjs-progress-holder {
+  font-size: 1.666666666666666666em;
+}
+
+/* If we let the font size grow as much as everything else, the current time tooltip ends up
+ ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
+ to avoid a weird hitch when you roll off the hover. */
+
+// Also show the current time tooltip
+.video-js .vjs-progress-control:hover .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-mouse-display:after,
+.video-js .vjs-progress-control:hover .vjs-play-progress:after {
+  font-family: $text-font-family;
+  visibility: visible;
+  font-size: 0.6em;
+}
+
+// Progress Bars
+.video-js .vjs-progress-holder .vjs-play-progress,
+.video-js .vjs-progress-holder .vjs-load-progress,
+.video-js .vjs-progress-holder .vjs-tooltip-progress-bar,
+.video-js .vjs-progress-holder .vjs-load-progress div {
+  position: absolute;
+  display: block;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  // updated by javascript during playback
+  width: 0;
+  // Needed for IE6
+  left: 0;
+  top: 0;
+}
+
+.video-js .vjs-mouse-display {
+  @extend .vjs-icon-circle;
+
+  &:before {
+    display: none;
+  }
+}
+.video-js .vjs-play-progress {
+  background-color: $primary-foreground-color;
+  @extend .vjs-icon-circle;
+
+  // Progress handle
+  &:before {
+    position: absolute;
+    top: -0.333333333333333em;
+    right: -0.5em;
+    font-size: 0.9em;
+  }
+}
+
+// Current Time "tooltip"
+// By default this is hidden and only shown when hovering over the progress control
+.video-js .vjs-time-tooltip,
+.video-js .vjs-mouse-display:after,
+.video-js .vjs-play-progress:after {
+  visibility: hidden;
+  pointer-events: none;
+  position: absolute;
+  top: -3.4em;
+  right: -1.9em;
+  font-size: 0.9em;
+  color: #000;
+  content: attr(data-current-time);
+  padding: 6px 8px 8px 8px;
+  @include background-color-with-alpha(#fff, 0.8);
+  @include border-radius(0.3em);
+}
+
+.video-js .vjs-time-tooltip,
+.video-js .vjs-play-progress:before,
+.video-js .vjs-play-progress:after {
+  z-index: 1;
+}
+
+.video-js .vjs-progress-control .vjs-keep-tooltips-inside:after {
+  display: none;
+}
+
+.video-js .vjs-load-progress {
+  // For IE8 we'll lighten the color
+  background: lighten($secondary-background-color, 25%);
+  // Otherwise we'll rely on stacked opacities
+  background: rgba($secondary-background-color, $secondary-background-transparency);
+}
+
+// there are child elements of the load progress bar that represent the
+// specific time ranges that have been buffered
+.video-js .vjs-load-progress div {
+  // For IE8 we'll lighten the color
+  background: lighten($secondary-background-color, 50%);
+  // Otherwise we'll rely on stacked opacities
+  background: rgba($secondary-background-color, 0.75);
+}
+
+.video-js.vjs-no-flex .vjs-progress-control {
+  width: auto;
+}
+
+.video-js .vjs-time-tooltip {
+  display: inline-block;
+  height: 2.4em;
+  position: relative;
+  float: right;
+  right: -1.9em;
+}
+
+.vjs-tooltip-progress-bar {
+  visibility: hidden;
+}
+
+.video-js .vjs-progress-control .vjs-mouse-display {
+  display: none;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #000;
+  z-index: 1;
+}
+.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
+  z-index: 0;
+}
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+  display: block;
+}
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display:after {
+  visibility: hidden;
+  opacity: 0;
+  $trans: visibility 1.0s, opacity 1.0s;
+  @include transition($trans);
+}
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display,
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display:after {
+  display: none;
+}
+.vjs-mouse-display .vjs-time-tooltip,
+.video-js .vjs-progress-control .vjs-mouse-display:after {
+  color: #fff;
+  @include background-color-with-alpha(#000, 0.8);
+}