From a439f454df31093157aaa773e549f5bacc5584c1 Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Sun, 20 Dec 2015 15:29:09 +0100 Subject: implement new subtitles L2S2 interface --- assets/css/_mejs_hacks.less | 30 ------------------------------ assets/css/_structure.less | 1 + assets/css/_subtitles.less | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 30 deletions(-) create mode 100644 assets/css/_subtitles.less (limited to 'assets/css') diff --git a/assets/css/_mejs_hacks.less b/assets/css/_mejs_hacks.less index 5a58c58..b89ee96 100644 --- a/assets/css/_mejs_hacks.less +++ b/assets/css/_mejs_hacks.less @@ -1,34 +1,4 @@ .mejs-container { - .mejs-subs-line { - position: absolute; - bottom: 50px; - height: 85px; - width: 100%; - background-color: fade(white, 85%); - color: black; - font-size: 65px; - text-align: center; - opacity: 0; - display: none; - padding: 5px 0; - overflow: hidden; - - .silence { - font-size: 49%; - opacity: 0; - display: none; - color: #555; - } - &.silence .silence { opacity: 1; display: block; } - - .error { - color: red; - opacity: 0; - display: none; - } - &.error .error { opacity: 1; display: block; } - } - &.mejs-video .mejs-controls { @factor: 1.5; diff --git a/assets/css/_structure.less b/assets/css/_structure.less index d6e4257..422bfab 100644 --- a/assets/css/_structure.less +++ b/assets/css/_structure.less @@ -89,3 +89,4 @@ body { @import "_embed.less"; @import "_feedback.less"; @import "_allconferences.less"; +@import "_subtitles.less"; diff --git a/assets/css/_subtitles.less b/assets/css/_subtitles.less new file mode 100644 index 0000000..81c776e --- /dev/null +++ b/assets/css/_subtitles.less @@ -0,0 +1,36 @@ +.mejs-container.mejs-video .mejs-controls .mejs-button.mejs-subtitles { + button { + background-image: url(../img/subtitles-controls.svg); + background-size: 240px 48px !important; + } + + &.mejs-subtitles-button button { + background-position: -174px -24px; + } + &.mejs-subtitles-popup-button button { + background-position: -202px -24px; + } +} + +.mejs-container.mejs-video { + .mejs-subtitles-lines { + position: absolute; + bottom: 40px; + height: 182px !important; + width: 100%; + background-color: fade(white, 85%); + color: black; + font-size: 42px; + text-align: center; + padding: 5px 0; + overflow: hidden; + + display: none; + + .mejs-subtitles-lines-inner { + position: absolute; + bottom: 0; + width: 100%; + } + } +} -- cgit v1.2.3