Rework css for time display.

No z-index for time display when vjs-no-flex is set. This is so that on devices like IE8, the time display will always show up behind the play progress and current time display.
videojs · Sep 14, 2015 · ffc0ac5 · ffc0ac5
1 parent fb845fb
commit ffc0ac5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss
@@ -73,7 +73,6 @@
     font-size: 0.9em;
     height: 1em;
     line-height: 1em;
-    z-index: 1;
   }
 }
 
@@ -91,6 +90,9 @@
   padding: 0.2em 0.5em;
   @include background-color-with-alpha($primary-text, 0.8);
   @include border-radius(0.3em);
+}
+.video-js .vjs-play-progress:before,
+.video-js .vjs-play-progress:after {
   z-index: 1;
 }
 
@@ -115,7 +117,10 @@ specific time ranges that have been buffered */
   width: 1px;
   height: 100%;
   background-color: $primary-bg;
-  opacity: 0.9;
+  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;

diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
@@ -127,8 +127,8 @@ class SeekBar extends Slider {
 SeekBar.prototype.options_ = {
   children: {
     'loadProgressBar': {},
-    'playProgressBar': {},
-    'mouseTimeDisplay': {}
+    'mouseTimeDisplay': {},
+    'playProgressBar': {}
   },
   'barName': 'playProgressBar'
 };