1 files changed, 105 insertions, 0 deletions
diff --git a/www/wiki/extensions/MultimediaViewer/resources/mmv/mmv.lightboxinterface.less b/www/wiki/extensions/MultimediaViewer/resources/mmv/mmv.lightboxinterface.less
new file mode 100644
index 00000000..77d93546
--- /dev/null
+++ b/www/wiki/extensions/MultimediaViewer/resources/mmv/mmv.lightboxinterface.less
@@ -0,0 +1,105 @@
+@import 'mmv.globals';
+@import 'mmv.mixins';
+
+.mw-mmv-wrapper {
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 1001;
+	position: absolute;
+	bottom: auto;
+
+	.skin-monobook & {
+		font-size: medium;
+	}
+}
+
+.mw-mmv-main {
+	width: 100%;
+	height: auto;
+	position: relative;
+
+	.jq-fullscreened {
+		background-color: #000;
+	}
+}
+
+.mw-mmv-image-wrapper {
+	position: fixed;
+	top: 0;
+	bottom: @metadatabar-above-fold-height;
+	left: 0;
+	right: 0;
+	overflow-y: hidden;
+}
+
+.mw-mmv-image-inner-wrapper {
+	display: table;
+	width: 100%;
+	height: 100%;
+}
+
+.mw-mmv-pre-image {
+	position: absolute;
+	top: 0;
+	height: 32px;
+	width: 100%;
+	z-index: 1;
+}
+
+.mw-mmv-post-image {
+	position: absolute;
+	width: 100%;
+	bottom: auto;
+	height: auto;
+	color: #222;
+	background-color: @panel-above-fold-background-color;
+	min-height: ( @metadatabar-above-fold-inner-height + 1 );
+	z-index: 1005;
+}
+
+// above-the-fold part of the metadata panel
+.mw-mmv-above-fold {
+	width: 100%;
+	height: @metadatabar-above-fold-inner-height;
+	// min-height is used when the height is changed to auto to display long texts, to make sure the layout
+	// is not messed up wheen the text is short and does not fill the available place. It is also used by
+	// JavaScript to get the "default" height.
+	min-height: @metadatabar-above-fold-inner-height;
+	position: relative;
+	// make sure there is no content in the part which is overlapped by the revealed part of the below-fold content
+	// also used in JavaScript for the height calculations
+	padding-bottom: @metadatabar-below-fold-pushup-height;
+
+	.mw-mmv-untruncated & {
+		height: auto;
+	}
+}
+
+// Fullscreen styles
+
+.cursor-hidden {
+	cursor: none;
+}
+
+.mw-mmv-main.jq-fullscreened {
+	background-color: #000;
+}
+
+.jq-fullscreened {
+	.mw-mmv-image-wrapper, // make the image occupy the whole screen
+	.mw-mmv-post-image { // make sure the panel fits in the screen and does not cause scrollbars to appear
+		bottom: 0;
+	}
+
+	.mw-mmv-post-image {
+		position: fixed;
+		min-height: 0;
+		.opacity( 0 );
+		transition: opacity 0.25s;
+
+		&:hover {
+			.opacity( 1 );
+		}
+	}
+}