implement new subtitles L2S2 interface

3 files changed, 37 insertions, 30 deletions

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%;
+		}
+	}
+}