mediawiki-extensions-MultimediaViewer/resources/mmv/mmv.lightboxinterface.less

@import "mmv.globals";
@import "mmv.mixins";

@bottom-height: (@metadatabar-top-content-height + @metadatabar-drag-height);
@metadata-background: rgb(251, 251, 251);

.mw-mmv-wrapper {
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 1001;
	position: absolute;
	bottom: auto;
}

.mw-mmv-main {
	width: 100%;
	height: auto;
	position: relative;

	.jq-fullscreened {
		background-color: black;
	}
}

.mw-mmv-image-wrapper,
.mw-mmv-controls {
	top: 0px;
	bottom: @bottom-height;
}

.mw-mmv-image-wrapper {
	position: fixed;
	left: 0px;
	right: 0px;
}

.mw-mmv-image-inner-wrapper {
	display: table;
	width: 100%;
	height: 100%;
}

.mw-mmv-pre-image {
	position: absolute;
	top: 0px;
	height: 32px;
	width: 100%;
	z-index: 1;
}

.mw-mmv-post-image {
	position: absolute;
	width: 100%;
	bottom: auto;
	height: auto;
	color: #333333;
	background-color: @metadata-background;
	min-height: (@bottom-height + 1);
	z-index: 2;
}

.mw-mmv-controls {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #cccccc;
}

/* Fullscreen styles */

.cursor-hidden {
	cursor: none;
}

.mw-mmv-main.jq-fullscreened {
	background-color: black;
}

.jq-fullscreened {
	.mw-mmv-image-wrapper,
	.mw-mmv-post-image,
	.mw-mmv-controls {
		bottom: 0px;
	}

	.mw-mmv-drag-affordance {
		display: none;
	}

	.mw-mmv-post-image,
	.mw-mmv-controls {
		@fullscreen-padding: 10px;
		padding: (@fullscreen-padding / 2) 0;
		height: (@metadatabar-top-content-height + @fullscreen-padding);
		background-color: rgba(251, 251, 251, 0);
		transition: background-color 0.25s;
		min-height: 0;

		&:hover {
			background-color: @metadata-background;
		}
	}

	.mw-mmv-post-image {
		position: fixed;
	}

	.mw-mmv-controls {
		opacity: 0;
		transition: opacity 0.25s;

		&:hover {
			opacity: 1;
		}
	}
}