From 5fcd49ade5b4b1d7dc7ea224be6c658cce13bbf4 Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Sat, 13 Dec 2014 01:16:26 +0100 Subject: fix ugly loading indicator --- assets/css/src/lustige-styles.scss | 122 +++++++++++++++++++------------------ 1 file changed, 64 insertions(+), 58 deletions(-) (limited to 'assets/css/src') 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; } } -- cgit v1.2.3