Video-Player placement & fixes

3 files changed, 101 insertions, 4 deletions

diff --git a/assets/css/_mejs_hacks.less b/assets/css/_mejs_hacks.less
new file mode 100644
index 0000000..32767a8
--- /dev/null
+++ b/assets/css/_mejs_hacks.less
@@ -0,0 +1,96 @@
+.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-controls {
+		@factor: 1.5;
+		visibility: visible !important;
+
+		.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;
+			}
+			&.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-volume-slider {
+				left: 4px * @factor;
+			}
+		}
+		.mejs-fullscreen-button button {
+			background-position: -32px * @factor 0;
+		}
+
+		@top: @factor * 12px - 12px;
+		.mejs-time {
+			padding-top: @top + 8px;
+		}
+		.mejs-horizontal-volume-slider {
+			width: 110px;
+			top: @top;
+			.mejs-horizontal-volume-total {
+				width: 100px;
+			}
+		}
+	}
+
+	&.mejs-audio {
+		margin: 0 auto;
+	}
+	.mejs-overlay-loading {
+		background: none !important;
+	}
+}
diff --git a/assets/css/_room.less b/assets/css/_room.less
index 3bb9d81..a0a9bdf 100644
--- a/assets/css/_room.less
+++ b/assets/css/_room.less
@@ -1,7 +1,3 @@
-video, audio {
-	display: block;
-}
-
 .tab-content {
 	border-left: 1px solid #ddd;
 	border-bottom: 1px solid #ddd;
@@ -23,3 +19,7 @@ video, audio {
 .player-wrap {
 	margin-bottom: 60px;
 }
+
+.video-wrap {
+	margin: 0 auto;
+}
diff --git a/assets/css/_structure.less b/assets/css/_structure.less
index 970425d..ae4dcca 100644
--- a/assets/css/_structure.less
+++ b/assets/css/_structure.less
@@ -1,5 +1,6 @@
 @import "fa/font-awesome.less";
 @import "_bootstrap-selection.less";
+@import "_mejs_hacks.less";
 @import "_footer.less";
 
 @img: '../img/';