From 2611f0a86947704f536c55377fae86ed39845035 Mon Sep 17 00:00:00 2001
From: MaZderMind
Date: Thu, 4 Dec 2014 23:32:58 +0100
Subject: implement control factor

---
 assets/css/src/lustige-styles.scss | 65 +++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 33 deletions(-)

(limited to 'assets/css/src/lustige-styles.scss')

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: */
-- 
cgit v1.2.3