1 files changed, 68 insertions, 0 deletions
diff --git a/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.stripeButtons.less b/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.stripeButtons.less
new file mode 100644
index 00000000..e9d4f66c
--- /dev/null
+++ b/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.stripeButtons.less
@@ -0,0 +1,68 @@
+@import '../mmv.globals';
+@import '../mmv.mixins';
+
+@button-vertical-padding: 20px;
+@button-height: 25px;
+@repo-button-width: 50px;
+
+// The buttons need to be positioned to the bottom right corner of .mw-mmv-title-contain, and
+// other text in that element must not overlap them. Their width is not known (depends on the
+// translation) so we float them to the right and calculate the top margin required to make them
+// full height.
+.mw-mmv-stripe-button {
+	@button-text-color: #888;
+
+	float: right;
+	margin-top: @metadatabar-above-fold-inner-height - ( @button-height + 2 * @button-vertical-padding );
+
+	.unselectable;
+	font-size: 1.25em;
+	color: @button-text-color;
+	cursor: pointer;
+	transition: opacity 0.25s;
+
+	&.empty {
+		display: none;
+	}
+
+	&:before {
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+
+		// fix odd position caused by bottom of icon and bottom of SVG not being aligned
+		position: relative;
+		top: 0.1em;
+
+		background-size: 100% 100%;
+		content: ' ';
+		vertical-align: baseline;
+
+		/* @embed */
+		background-image: url( img/page.svg );
+
+		margin-right: 0.7em;
+	}
+	&.has-label:before {
+		margin-right: 0.25em;
+	}
+
+	&.mw-mmv-description-page-button,
+	&.mw-mmv-description-page-button:active,
+	&.mw-mmv-description-page-button:visited {
+		border-radius: @border-radius;
+		color: #fff;
+		padding: 7px 16px;
+		margin: 7px 10px;
+	}
+
+	&.mw-mmv-description-page-button.mw-mmv-repo-button-commons:before {
+		/* @embed */
+		background-image: url( img/commons_white.svg );
+		width: 1.3em;
+		height: 1.3em;
+		position: relative;
+		top: 0.15em;
+		margin: -0.3em 0.4em 0 0;
+	}
+}