2 files changed, 70 insertions, 32 deletions
diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index c360e1f4..3366f1e1 100644
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -1,19 +1,26 @@
-/**
- * Common LESS mixin library for MediaWiki
- *
- * By default the folder containing this file is included in $wgResourceLoaderLESSImportPaths,
- * which makes this file importable by all less files via '@import "mediawiki.mixins";'.
- *
- * The mixins included below are considered a public interface for MediaWiki extensions.
- * The signatures of parametrized mixins should be kept as stable as possible.
- *
- * See <http://lesscss.org/#-mixins> for more information about how to write mixins.
- */
+// Common LESS mixin library for MediaWiki
+//
+// By default the folder containing this file is included in $wgResourceLoaderLESSImportPaths,
+// which makes this file importable by all less files via '@import "mediawiki.mixins";'.
+//
+// The mixins included below are considered a public interface for MediaWiki extensions.
+// The signatures of parametrized mixins should be kept as stable as possible.
+//
+// See <http://lesscss.org/#-mixins> for more information about how to write mixins.
 
 .background-image(@url) {
 	background-image: e('/* @embed */') url(@url);
 }
 
+.background-size(@width, @height) {
+	// Vendor prefix for certain older opera browsers e.g. nintendo ds
+	-o-background-size: @width @height;
+	// Vendor prefix is added to support Android 2
+	-webkit-background-size: @width @height;
+	background-size: @width @height;
+}
+
+
 .vertical-gradient(@startColor: gray, @endColor: white, @startPos: 0, @endPos: 100%) {
 	background-color: @endColor;
 	background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
@@ -22,26 +29,32 @@
 	background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard
 }
 
-/*
- * SVG support using a transparent gradient to guarantee cross-browser
- * compatibility (browsers able to understand gradient syntax support also SVG).
- * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique
- *
- * We use gzip compression, which means that it is okay to embed twice.
- *
- * We do not embed the fallback image on the assumption that the gain for old browsers
- * is not worth the harm done to modern ones.
- */
+// SVG support using a transparent gradient to guarantee cross-browser
+// compatibility (browsers able to understand gradient syntax support also SVG).
+// http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique
+//
+// We use gzip compression, which means that it is okay to embed twice.
+//
+// We do not embed the fallback image on the assumption that the gain for old browsers
+// is not worth the harm done to modern ones.
 .background-image-svg(@svg, @fallback) {
 	background-image: url(@fallback);
 	background-image: -webkit-linear-gradient(transparent, transparent), e('/* @embed */') url(@svg);
 	background-image: linear-gradient(transparent, transparent), e('/* @embed */') url(@svg);
+	// Do not serve SVG to Opera 12, bad rendering with border-radius or background-size (T87504)
+	background-image: -o-linear-gradient(transparent, transparent), url(@fallback);
 }
 
 .list-style-image(@url) {
 	list-style-image: e('/* @embed */') url(@url);
 }
 
+.list-style-image-svg(@svg, @fallback) {
+	list-style-image: e('/* @embed */') url(@svg);
+	/* Fallback to PNG bullet for IE 8 and below using CSS hack */
+	list-style-image: e('/* @embed */') url(@fallback)\9;
+}
+
 .transition(@value) {
 	-webkit-transition: @value; // Safari 3.1-6.0, iOS 3.2-6.1, Android 2.1-4.3
 	-moz-transition: @value; // Firefox 4-15
@@ -59,3 +72,21 @@
 	-webkit-box-shadow: @value; // Safari 3.1-5.0, iOS 3.2-4.3, Android 2.1-3.0
 	box-shadow: @value; // Chrome 10+, Firefox 4+, IE 9+, Safari 5.1+, Opera 11+, iOS 5+, Android 4+
 }
+
+.column-count(@value) {
+	-webkit-column-count: @value;
+	-moz-column-count: @value;
+	column-count: @value;
+}
+
+.column-width(@value) {
+	-webkit-column-width: @value;// Chrome Any, Safari 3+, Opera 11.1+
+	-moz-column-width: @value;// Firefox 1.5+
+	column-width: @value;// IE 10+
+}
+
+.column-break-inside-avoid {
+	-webkit-column-break-inside: avoid; // Chrome Any, Safari 3+, Opera 11.1+
+	page-break-inside: avoid; // Firefox 1.5+
+	break-inside: avoid-column; // IE 10+
+}
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
index ec9888f2..2d684572 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -36,11 +36,16 @@
 .button-colors(@bgColor) {
 	background: @bgColor;
 
-	&:hover,
-	&:focus {
+	&:hover {
 		// The inner bottom bevel should match the active background color.
 		box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
 		border-bottom-color: mix(#000, @bgColor, 20%);
+	}
+
+	&:focus {
+		border-color: rgba(0,0,0,0.2);
+		box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
+
 		outline: none;
 		// remove outline in Firefox
 		&::-moz-focus-inner {
@@ -62,6 +67,13 @@
 	color: @colorButtonText;
 	border: 1px solid @colorGray12;
 
+	&:hover,
+	&:active,
+	&:visited {
+		// make sure that is isn't inheriting from a general rule
+		color: @colorButtonText;
+	}
+
 	&:disabled {
 		color: @colorDisabledText;
 
@@ -77,16 +89,13 @@
 .button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
 	color: #fff;
 	// border of the same color as background so that light background and
-	// dark background buttons are the same height (only top and bottom to
-	// make box shadow on hover cover the corners too)
+	// dark background buttons are the same height and width
 	border: 1px solid @bgColor;
-	border-left: none;
-	border-right: none;
 	text-shadow: 0 1px rgba(0, 0, 0, .1);
 
 	&:disabled {
-		background: @colorGray12;
-		border-color: @colorGray12;
+		background: @colorGray13;
+		border-color: @colorGray13;
 
 		// make sure disabled buttons don't have hover and active states
 		&:hover,
@@ -104,9 +113,7 @@
 
 	&:hover,
 	&:focus {
-		// lessphp doesn't implement tint, see above
-		// color: tint(@textColor, 20%);
-		color: mix(#fff, @textColor, 20%);
+		color: @textColor;
 	}
 
 	&:active,