diff options
Diffstat (limited to 'assets/css/src')
| -rw-r--r-- | assets/css/src/lustige-styles.scss | 65 |
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: */ |