aboutsummaryrefslogtreecommitdiff
path: root/assets/css/src
diff options
context:
space:
mode:
authorMaZderMind2014-12-04 23:32:58 +0100
committerMaZderMind2014-12-04 23:32:58 +0100
commit2611f0a86947704f536c55377fae86ed39845035 (patch)
tree388c7cc8a3d3ff2977fdf9e4ba5502a6dabc05c9 /assets/css/src
parenta2f306c46e2ba94e1cfb318dfe46fa6a94aa596e (diff)
implement control factor
Diffstat (limited to 'assets/css/src')
-rw-r--r--assets/css/src/lustige-styles.scss65
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: */