implement control factor

1 files changed, 32 insertions, 33 deletions

diff --git a/assets/css/src/lustige-styles.scss b/assets/css/src/lustige-styles.scss
index 1e57321..2f56ca9 100644
--- a/assets/css/src/lustige-styles.scss
+++ b/assets/css/src/lustige-styles.scss
@@ -387,43 +387,42 @@ a.inverted {
 
 }
 
-/* extra large mejs controls on tablet & phone */
-@media only screen and (max-device-width: 768px)
-{
-  .mejs-container .mejs-controls {
-    height: 48px;
-    div {
-      width: 52px;
-      height: 52px;
-    }
-    .mejs-button button {
-      background-size: 288px 64px !important;
-      width: 32px;
-      height: 32px;
-    }
-    .mejs-playpause-button {
-      &.mejs-play button {
-        background-position: 0 0;
-      }
-      &.mejs-pause button {
-        background-position: 0 -32px;
-      }
+
+.mejs-container .mejs-controls {
+  $factor: 1.5;
+
+  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;
     }
-    .mejs-volume-button {
-      &.mejs-mute button {
-        background-position: -32px -32px;
-      }
-      &.mejs-unmute button {
-        background-position: -32px 0;
-      }
-      .mejs-volume-slider {
-        left: 8px;
-      }
+    &.mejs-pause button {
+      background-position: 0 -16px * $factor;
+    }
+  }
+  .mejs-volume-button {
+    &.mejs-mute button {
+      background-position: -16px * $factor -16px * $factor;
+    }
+    &.mejs-unmute button {
+      background-position: -16px * $factor 0;
     }
-    .mejs-fullscreen-button button {
-      background-position: -64px 0;
+    .mejs-volume-slider {
+      left: 4px * $factor;
     }
   }
+  .mejs-fullscreen-button button {
+    background-position: -32px * $factor 0;
+  }
 }
 
 /* and now for medium screens: */