fix ugly loading indicator

1 files changed, 64 insertions, 58 deletions

diff --git a/assets/css/src/lustige-styles.scss b/assets/css/src/lustige-styles.scss
index 3af08f8..69bc4fb 100644
--- a/assets/css/src/lustige-styles.scss
+++ b/assets/css/src/lustige-styles.scss
@@ -403,76 +403,82 @@ a.inverted {
   }
 
 }
-.mejs-container .mejs-subs-line {
-  position: absolute;
-  bottom: 50px;
-  height: 85px;
-  width: 100%;
-  background-color: rgba(white, .85);
-  color: black;
-  font-size: 65px;
-  text-align: center;
-  opacity: 0;
-  padding: 5px 0;
-  overflow: hidden;
-
-  .silence {
-    font-size: 49%;
+.mejs-container {
+  .mejs-subs-line {
+    position: absolute;
+    bottom: 50px;
+    height: 85px;
+    width: 100%;
+    background-color: rgba(white, .85);
+    color: black;
+    font-size: 65px;
+    text-align: center;
     opacity: 0;
-    color: #555;
-  }
-  &.silence .silence { opacity: 1; }
+    padding: 5px 0;
+    overflow: hidden;
 
-  .error {
-    color: red;
-    opacity: 0;
+    .silence {
+      font-size: 49%;
+      opacity: 0;
+      color: #555;
+    }
+    &.silence .silence { opacity: 1; }
+
+    .error {
+      color: red;
+      opacity: 0;
+    }
+    &.error .error { opacity: 1; }
   }
-  &.error .error { opacity: 1; }
-}
 
-.mejs-container .mejs-controls {
-  $factor: 1.5;
-  visibility: visible !important;
+  .mejs-controls {
+    $factor: 1.5;
+    visibility: visible !important;
 
-  .mejs-subs-button > span {
-    cursor: pointer;
-    color: #e3e3e3;
-    font-size: 28px;
-    padding-top: 5px;
-    padding-left: 5px;
-  }
+    .mejs-subs-button > span {
+      cursor: pointer;
+      color: #e3e3e3;
+      font-size: 28px;
+      padding-top: 5px;
+      padding-left: 5px;
+    }
 
-  height: 12px + 18px * $factor;
-  div {
-    width: 26px * $factor;
-    height: 26px * $factor;
-  }
-  .mejs-button button {
-    background-size: 144px * $factor 32px * $factor !important;
-    width: 16px * $factor;
-    height: 16px * $factor;
-  }
-  .mejs-playpause-button {
-    &.mejs-play button {
-      background-position: 0 0;
+    height: 12px + 18px * $factor;
+    div {
+      width: 26px * $factor;
+      height: 26px * $factor;
     }
-    &.mejs-pause button {
-      background-position: 0 -16px * $factor;
+    .mejs-button button {
+      background-size: 144px * $factor 32px * $factor !important;
+      width: 16px * $factor;
+      height: 16px * $factor;
     }
-  }
-  .mejs-volume-button {
-    &.mejs-mute button {
-      background-position: -16px * $factor -16px * $factor;
+    .mejs-playpause-button {
+      &.mejs-play button {
+        background-position: 0 0;
+      }
+      &.mejs-pause button {
+        background-position: 0 -16px * $factor;
+      }
     }
-    &.mejs-unmute button {
-      background-position: -16px * $factor 0;
+    .mejs-volume-button {
+      &.mejs-mute button {
+        background-position: -16px * $factor -16px * $factor;
+      }
+      &.mejs-unmute button {
+        background-position: -16px * $factor 0;
+      }
+      .mejs-volume-slider {
+        left: 4px * $factor;
+      }
     }
-    .mejs-volume-slider {
-      left: 4px * $factor;
+    .mejs-fullscreen-button button {
+      background-position: -32px * $factor 0;
     }
   }
-  .mejs-fullscreen-button button {
-    background-position: -32px * $factor 0;
+
+  .mejs-overlay-loading {
+    background: none !important;
   }
 }