Stop text displayer from interfering with controls' work.

Position the text container (for the custom text displayer) 'behind' the controls, so it doesn't block other elements. Closes #1874 Closes #1873 Change-Id: I630e447d2c04a3e139a80eb4c646ac195a56bec5
shaka-project · Apr 9, 2019 · 5678bae · 5678bae
1 parent 8459362
commit 5678bae
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/ui/less/buttons.less b/ui/less/buttons.less
@@ -60,9 +60,6 @@
   /* A background color behind the play arrow. */
   background-color: rgba(255, 255, 255, .9);
 
-  /* Overlay the captions */
-  z-index: 1;
-
   /* Actual icon images for the two states this could be in.
    * These will be inlined as data URIs when compiled, and so do not need to be
    * deployed separately from the compiled CSS.

diff --git a/ui/less/containers.less b/ui/less/containers.less
@@ -188,6 +188,10 @@
   width: 100%;
   min-width: 48px;
 
+  /* Position the text container "behind" the overlapping controls
+   * elements, so it doesn't interfere with their work. */
+  z-index: -1;
+
   /* Set the captions in the middle horizontally by default. */
   display: flex;
   justify-content: center;