1 files changed, 74 insertions, 0 deletions
diff --git a/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.truncatableTextField.less b/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.truncatableTextField.less
new file mode 100644
index 00000000..f3a5f77e
--- /dev/null
+++ b/www/wiki/extensions/MultimediaViewer/resources/mmv/ui/mmv.ui.truncatableTextField.less
@@ -0,0 +1,74 @@
+@import 'mediawiki.mixins';
+@import '../mmv.globals';
+@import '../mmv.mixins';
+
+.mw-mmv-ttf-container {
+	position: relative;
+	overflow: hidden; // need to create a block formatting context, otherwise adjacent floats would be problematic
+
+	&.mw-mmv-ttf-small {
+		font-size: 90%;
+	}
+
+	&.mw-mmv-ttf-smaller {
+		font-size: 80%;
+	}
+
+	&.mw-mmv-ttf-smallest {
+		font-size: 65%;
+	}
+
+	// used on containers which have been shortened and can be expanded
+	&.mw-mmv-ttf-truncated {
+		cursor: pointer;
+	}
+
+	// used on containers which have been expanded
+	&.mw-mmv-ttf-untruncated {
+		height: auto;
+	}
+
+	.mw-mmv-ttf-ellipsis {
+		display: block;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		height: 1em; // make it scale with the font
+		width: 1.5em; // SVG image has ~1.5 aspect ratio
+		text-indent: -9999px;
+		border-radius: @border-radius;
+		background-size: contain;
+		background-position: center center;
+		background-repeat: no-repeat;
+		/* @embed */
+		background-image: url( img/ellipsis_lightgray.svg );
+		.box-shadow( -4px 6px 0 0 #fff );
+
+		// Hovering over .mw-mmv-ttf-ellipsis-container will make the ellipsis more visible to attract
+		// attention to it. Since it has to be set on a parent element which is not under control of
+		// TruncatableTextField, setting it is the caller's responsibility.
+		.mw-mmv-ttf-ellipsis-container:hover & {
+			background-color: #eaecf0;
+			/* @embed */
+			background-image: url( img/ellipsis_gray.svg );
+		}
+		// second rule + ordering needed for specificity
+		&:hover,
+		.mw-mmv-ttf-ellipsis-container &:hover {
+			background-color: #c8ccd1;
+			/* @embed */
+			background-image: url( img/ellipsis_darkgray.svg );
+		}
+
+		&:before {
+			@fade-length: 2em;
+
+			display: block;
+			content: '';
+			height: 1.6em; // 1em would not cover high glyphs
+			width: @fade-length;
+			margin-left: -@fade-length;
+			.fade-out-horizontal();
+		}
+	}
+}