1 files changed, 392 insertions, 0 deletions
diff --git a/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.metadataPanel.less b/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.metadataPanel.less
new file mode 100644
index 00000000..9d3e3911
--- /dev/null
+++ b/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.metadataPanel.less
@@ -0,0 +1,392 @@
+@import '../mmv.globals';
+@import '../mmv.mixins';
+
+@panel-below-fold-background-color: #f8f9fa;
+
+@fold-separator-border-width: 1px;
+@vertical-padding: 10px;
+@horizontal-padding: 20px;
+@space-above-credit: 2px;
+
+.mw-mmv-info-box {
+	display: inline-block;
+	overflow: hidden;
+	border: 1px solid #c8ccd1;
+	border-radius: @border-radius;
+	background-color: #fff;
+}
+
+.mw-mmv-title-contain {
+	position: relative;
+}
+
+.mw-mmv-title-para {
+	@height: @metadatabar-above-fold-inner-height - 2 * @vertical-padding; // needs explicit height for text truncation logic
+	margin: 0 0 @vertical-padding; // use margin instead of padding for bottom so text is not visible
+	padding: @vertical-padding @horizontal-padding 0 @horizontal-padding;
+	height: @height;
+	line-height: @height;
+
+	&.mw-mmv-ttf-normal {
+		font-size: 20px;
+	}
+	&.mw-mmv-title-small {
+		font-size: 18px;
+	}
+	&.mw-mmv-title-smaller {
+		@vertical-padding: 6px;
+		@height: @metadatabar-above-fold-inner-height - 2 * @vertical-padding;
+		height: @height;
+		margin: 0 0 @horizontal-padding;
+		padding: @vertical-padding @horizontal-padding 0 @horizontal-padding;
+		line-height: floor( @height / 2 );  // two lines
+		font-size: 16px;
+	}
+
+	// this should be after the size-specific styles so it can override any height set there
+	&.mw-mmv-ttf-untruncated {
+		height: auto;
+	}
+
+	.mw-mmv-ttf-ellipsis {
+		right: @horizontal-padding;
+		bottom: 3px;
+		background-color: @panel-above-fold-background-color; // clip text
+
+		&:before {
+			.fade-out-horizontal( @panel-above-fold-background-color );
+		}
+	}
+}
+
+.mw-mmv-credit {
+	@padding-right: 5px;
+	margin: 0;
+	color: #54595d;
+	padding: 0 0 @padding-right;
+	font-size: 0.85em;
+
+	.metadata-panel-is-closed {
+		height: @metadatabar-below-fold-pushup-height - @space-above-credit - @fold-separator-border-width; // needs explicit height for text truncation logic
+		line-height: @metadatabar-below-fold-pushup-height - @space-above-credit - @fold-separator-border-width;
+	}
+
+	&.empty {
+		height: 0.85em;
+	}
+
+	.mw-mmv-ttf-ellipsis {
+		right: @padding-right;
+		bottom: 13px;
+		background-color: @panel-below-fold-background-color; // clip text
+
+		&:before {
+			.fade-out-horizontal( @panel-below-fold-background-color );
+		}
+	}
+}
+
+.mw-mmv-source-author {
+	line-height: 1.8em;
+}
+
+.mw-mmv-title {
+	// this element is the click target for text untruncation; with the default display:inline it would be an
+	// inline box which can have "gaps" between the lines, making clicks seem to have no effect
+	display: inline-block;
+}
+
+.mw-mmv-image-metadata {
+	width: 100%;
+	position: relative;
+	margin-top: -@metadatabar-below-fold-pushup-height;
+	border-top: @fold-separator-border-width solid #c8ccd1;
+	background-color: @panel-below-fold-background-color;
+	padding-top: @space-above-credit;
+
+	.jq-fullscreened & {
+		// Make sure content fits into the screen. This assumes no paddings.
+		height: @metadatabar-below-fold-pushup-height - @fold-separator-border-width - @space-above-credit;
+		overflow: hidden;
+	}
+	.jq-fullscreened .mw-mmv-untruncated & {
+		height: auto;
+	}
+}
+
+.mw-mmv-author:before {
+	display: inline-block;
+	vertical-align: middle;
+	height: 16px;
+	width: 16px;
+	content: ' ';
+	margin-right: 7px;
+	margin-bottom: 2px;
+	background-size: contain;
+	background-position: center center;
+	background-repeat: no-repeat;
+	/* @embed */
+	background-image: url( img/user-ltr.svg );
+}
+
+.mw-mmv-image-desc-div {
+	overflow-y: auto;
+	max-height: 150px;
+	margin-bottom: 15px;
+
+	&.empty {
+		display: none;
+	}
+}
+
+.mw-mmv-image-desc-div,
+.mw-mmv-image-links-div {
+	display: inline-block;
+	vertical-align: top;
+}
+
+@littlefont: 0.85em;
+@mediumfont: 0.95em;
+
+.mw-mmv-image-desc {
+	font-size: @mediumfont;
+	color: #54595d;
+}
+
+.mw-mmv-image-links {
+	margin: 0 20px;
+
+	li {
+		list-style: none;
+		font-size: @littlefont;
+		color: #3f4040;
+
+		&.empty {
+			display: none;
+		}
+
+		// Make sure the next list item is not visible when the
+		// metadata panel is closed
+		.metadata-panel-is-closed &.mw-mmv-license-li {
+			height: @metadatabar-below-fold-pushup-height - @space-above-credit;
+			line-height: @metadatabar-below-fold-pushup-height - @space-above-credit;
+		}
+
+		&:before {
+			display: inline-block;
+			vertical-align: middle;
+			height: 16px;
+			width: 16px;
+			content: ' ';
+			margin-right: 7px;
+			margin-bottom: 2px;
+			background-size: contain;
+			background-position: right center;
+			background-repeat: no-repeat;
+		}
+
+		&.mw-mmv-license-li:before {
+			/* @embed */
+			background-image: url( img/license.svg );
+		}
+
+		&.mw-mmv-license-li.cc-license:before {
+			/* @embed */
+			background-image: url( img/cc.svg );
+		}
+
+		&.mw-mmv-license-li.pd-license:before {
+			/* @embed */
+			background-image: url( img/pd.svg );
+		}
+
+		&.mw-mmv-filename-li:before {
+			/* @embed */
+			background-image: url( img/file.svg );
+		}
+
+		&.mw-mmv-datetime-li:before {
+			/* @embed */
+			background-image: url( img/time.svg );
+		}
+
+		&.mw-mmv-location-li:before {
+			/* @embed */
+			background-image: url( img/location.svg );
+		}
+
+		&.empty:before {
+			background-image: none !important; /* stylelint-disable-line declaration-no-important */
+		}
+	}
+}
+
+.mw-mmv-license-contain,
+.mw-mmv-license {
+	text-align: right;
+}
+
+.mw-mmv-filename-prefix {
+	padding-right: 4px;
+	cursor: text;
+}
+
+.mw-mmv-title-para,
+.mw-mmv-credit,
+.mw-mmv-image-desc {
+	padding-left: @horizontal-padding;
+}
+
+.mw-mmv-about-links {
+	font-size: @littlefont;
+	padding: @horizontal-padding;
+	width: 50%;
+	clear: both;
+}
+
+.mw-mmv-label {
+	background-color: #eaecf0;
+	color: #222;
+	margin-left: 6px;
+	margin-top: 1px;
+	border-radius: @border-radius;
+	padding: 2px 5px;
+	font-size: 0.9em;
+
+	&:hover {
+		background-color: #c8ccd1;
+	}
+}
+
+.mw-mmv-image-metadata-column {
+	float: left;
+}
+
+.mw-mmv-image-metadata-desc-column {
+	width: 66.5%;
+}
+
+.mw-mmv-image-metadata-links-column {
+	max-width: 33.5%;
+	width: 25%;
+	text-align: right;
+	float: right;
+	transition: width 0.2s ease-out;
+
+	.mw-mmv-untruncated & {
+		width: 33.5%;
+		text-align: left;
+	}
+
+}
+
+.mw-mmv-restrictions {
+	display: inline-block;
+	line-height: 14px;
+}
+
+.mw-mmv-restriction-label {
+	&,
+	&:hover {
+		background-color: #fc6;
+	}
+
+	cursor: default;
+	display: inline-block;
+	height: 16px;
+}
+
+.mw-mmv-restriction-label-inner {
+	display: inline-block;
+	width: 14px;
+	height: 14px;
+	text-indent: -9999px;
+	text-align: left;
+	background-size: contain;
+	&:after {
+		float: right;
+		text-indent: 0;
+	}
+}
+
+.mw-mmv-restriction-2257 {
+	/* @embed */
+	background-image: url( img/restrict-2257.svg );
+}
+
+.mw-mmv-restriction-aus-reserve {
+	/* @embed */
+	background-image: url( img/restrict-aus-reserve.svg );
+}
+
+.mw-mmv-restriction-communist {
+	/* @embed */
+	background-image: url( img/restrict-communist.svg );
+}
+
+.mw-mmv-restriction-costume {
+	/* @embed */
+	background-image: url( img/restrict-costume.svg );
+}
+
+.mw-mmv-restriction-currency {
+	/* @embed */
+	background-image: url( img/restrict-currency.svg );
+}
+
+.mw-mmv-restriction-design {
+	/* @embed */
+	background-image: url( img/restrict-design.svg );
+}
+
+.mw-mmv-restriction-fan-art {
+	/* @embed */
+	background-image: url( img/restrict-fan-art.svg );
+}
+
+.mw-mmv-restriction-ihl {
+	/* @embed */
+	background-image: url( img/restrict-ihl.svg );
+}
+
+.mw-mmv-restriction-insignia {
+	/* @embed */
+	background-image: url( img/restrict-insignia.svg );
+}
+
+.mw-mmv-restriction-ita-mibac {
+	/* @embed */
+	background-image: url( img/restrict-ita-mibac.svg );
+}
+
+.mw-mmv-restriction-nazi {
+	/* @embed */
+	background-image: url( img/restrict-nazi.svg );
+}
+
+.mw-mmv-restriction-personality {
+	/* @embed */
+	background-image: url( img/restrict-personality.svg );
+}
+
+.mw-mmv-restriction-trademarked:after {
+	content: '\002122';
+}
+
+.mw-mmv-restriction-default {
+	/* @embed */
+	background-image: url( img/restrict-default.svg );
+}
+
+.mw-mmv-permission-link {
+	cursor: pointer;
+
+	.jq-fullscreened & {
+		display: none;
+	}
+}
+
+.mw-mmv-optout-link.pending {
+	cursor: wait;
+	color: #54595d;
+}