summaryrefslogtreecommitdiff
path: root/resources/src/mediawiki.less
diff options
context:
space:
mode:
authorPierre Schmitz <pierre@archlinux.de>2014-12-27 15:41:37 +0100
committerPierre Schmitz <pierre@archlinux.de>2014-12-31 11:43:28 +0100
commitc1f9b1f7b1b77776192048005dcc66dcf3df2bfb (patch)
tree2b38796e738dd74cb42ecd9bfd151803108386bc /resources/src/mediawiki.less
parentb88ab0086858470dd1f644e64cb4e4f62bb2be9b (diff)
Update to MediaWiki 1.24.1
Diffstat (limited to 'resources/src/mediawiki.less')
-rw-r--r--resources/src/mediawiki.less/mediawiki.mixins.animation.less12
-rw-r--r--resources/src/mediawiki.less/mediawiki.mixins.less61
-rw-r--r--resources/src/mediawiki.less/mediawiki.mixins.rotation.less33
-rw-r--r--resources/src/mediawiki.less/mediawiki.ui/mixins.less122
-rw-r--r--resources/src/mediawiki.less/mediawiki.ui/variables.less62
5 files changed, 290 insertions, 0 deletions
diff --git a/resources/src/mediawiki.less/mediawiki.mixins.animation.less b/resources/src/mediawiki.less/mediawiki.mixins.animation.less
new file mode 100644
index 00000000..ec3cddc6
--- /dev/null
+++ b/resources/src/mediawiki.less/mediawiki.mixins.animation.less
@@ -0,0 +1,12 @@
+.animation (...) {
+ -webkit-animation: @arguments;
+ -moz-animation: @arguments;
+ -o-animation: @arguments;
+ animation: @arguments;
+}
+
+.transform-rotate (@deg) {
+ -webkit-transform: rotate(@deg);
+ -moz-transform: rotate(@deg);
+ transform: rotate(@deg);
+} \ No newline at end of file
diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
new file mode 100644
index 00000000..c360e1f4
--- /dev/null
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -0,0 +1,61 @@
+/**
+ * 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);
+}
+
+.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+
+ background-image: -webkit-gradient( linear, left top, left bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Safari 5.1+, Chrome 10+
+ 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.
+ */
+.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);
+}
+
+.list-style-image(@url) {
+ list-style-image: e('/* @embed */') url(@url);
+}
+
+.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
+ -o-transition: @value; // Opera 10.5-12.0
+ transition: @value; // Chrome 26+, Firefox 16+, IE 10+, Safari 6.1+, Opera 12.1+, iOS 7+, Android 4.4+
+}
+
+.box-sizing(@value) {
+ -webkit-box-sizing: @value; // Safari 3.1-5.0, iOS 3.2-4.3, Android 2.1-3.0
+ -moz-box-sizing: @value; // Firefox 4-28,
+ box-sizing: @value; // Chrome 10+, Firefox 29+, IE 8+, Safari 5.1+, Opera 10+, iOS 5+, Android 4+
+}
+
+.box-shadow(@value) {
+ -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+
+}
diff --git a/resources/src/mediawiki.less/mediawiki.mixins.rotation.less b/resources/src/mediawiki.less/mediawiki.mixins.rotation.less
new file mode 100644
index 00000000..e28b333f
--- /dev/null
+++ b/resources/src/mediawiki.less/mediawiki.mixins.rotation.less
@@ -0,0 +1,33 @@
+// This is a separate file because importing the mixin causes
+// the keyframes blocks to be included in the output, regardless
+// of whether .rotation is used.
+@import "mediawiki.mixins.animation";
+
+.rotate-frames () {
+ from {
+ .transform-rotate(0deg);
+ }
+ to {
+ .transform-rotate(360deg);
+ }
+}
+
+@-webkit-keyframes rotate {
+ .rotate-frames;
+}
+
+@-moz-keyframes rotate {
+ .rotate-frames;
+}
+
+@-o-keyframes rotate {
+ .rotate-frames;
+}
+
+@keyframes rotate {
+ .rotate-frames;
+}
+
+.rotation( @time ) {
+ .animation(rotate, @time, infinite, linear);
+}
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
new file mode 100644
index 00000000..ec9888f2
--- /dev/null
+++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
@@ -0,0 +1,122 @@
+// ----------------------------------------------------------------------------
+// Form styling mixins
+// ----------------------------------------------------------------------------
+.agora-label-styling() {
+ font-size: 0.9em;
+ color: @colorText;
+
+ * {
+ font-weight: normal;
+ }
+}
+
+.agora-inline-label-styling() {
+ margin-bottom: 0.5em;
+ cursor: pointer;
+ vertical-align: bottom;
+ line-height: normal;
+
+ font-weight: normal;
+
+ & > input[type="checkbox"],
+ & > input[type="radio"] {
+ width: auto;
+ height: auto;
+ margin: 0 0.1em 0 0;
+ padding: 0;
+ border: 1px solid @colorFieldBorder;
+ cursor: pointer;
+ }
+}
+
+// ----------------------------------------------------------------------------
+// Button styling
+// ----------------------------------------------------------------------------
+
+.button-colors(@bgColor) {
+ background: @bgColor;
+
+ &:hover,
+ &:focus {
+ // 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%);
+ outline: none;
+ // remove outline in Firefox
+ &::-moz-focus-inner {
+ border-color: transparent;
+ }
+ }
+
+ &:active,
+ &.mw-ui-checked {
+ // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
+ // it passes it through, then ResourceLoader drops it.
+ // background: shade(@bgColor, 20%);
+ background: mix(#000, @bgColor, 20%);
+ box-shadow: none;
+ }
+}
+
+.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
+ color: @colorButtonText;
+ border: 1px solid @colorGray12;
+
+ &:disabled {
+ color: @colorDisabledText;
+
+ // make sure disabled buttons don't have hover and active states
+ &:hover,
+ &:active {
+ background: @bgColor;
+ box-shadow: none;
+ }
+ }
+}
+
+.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)
+ 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;
+
+ // make sure disabled buttons don't have hover and active states
+ &:hover,
+ &:active,
+ &.mw-ui-checked {
+ box-shadow: none;
+ }
+ }
+}
+
+.button-colors-quiet(@textColor) {
+ // Quiet buttons all start gray, and reveal
+ // constructive/progressive/destructive color on hover and active.
+ color: @colorButtonText;
+
+ &:hover,
+ &:focus {
+ // lessphp doesn't implement tint, see above
+ // color: tint(@textColor, 20%);
+ color: mix(#fff, @textColor, 20%);
+ }
+
+ &:active,
+ &.mw-ui-checked {
+ // lessphp doesn't implement shade, see above
+ // color: shade(@textColor, 20%);
+ color: mix(#000, @textColor, 20%);
+ }
+
+ &:disabled {
+ color: @colorDisabledText;
+ }
+}
diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
new file mode 100644
index 00000000..e91302be
--- /dev/null
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -0,0 +1,62 @@
+// Colors for use in mediawiki.ui and elsewhere
+
+// Although this defines many shades, be parsimonious in your own use of grays. Prefer
+// colors already in use in MediaWiki. Prefer semantic color names such as "@colorText".
+@colorGray1: #111; // darkest
+@colorGray2: #222;
+@colorGray3: #333;
+@colorGray4: #444;
+@colorGray5: #555;
+@colorGray6: #666;
+@colorGray7: #777;
+@colorGray8: #888;
+@colorGray9: #999;
+@colorGray10: #AAA;
+@colorGray11: #BBB;
+@colorGray12: #CCC;
+@colorGray13: #DDD;
+@colorGray14: #EEE;
+@colorGray15: #F9F9F9; // lightest
+
+// Semantic background colors
+// Blue; for contextual use of a continuing action
+@colorProgressive: #347bff;
+// Green; for contextual use of a positive finalizing action
+@colorConstructive: #00af89;
+// Orange; for contextual use of returning to a past action
+@colorRegressive: #FF5D00;
+// Red; for contextual use of a negative action of high severity
+@colorDestructive: #d11d13;
+// Orange; for contextual use of a potentially negative action of medium severity
+@colorMediumSevere: #FF5D00;
+// Yellow; for contextual use of a potentially negative action of low severity
+@colorLowSevere: #FFB50D;
+
+// Used in mixins to darken contextual colors by the same amount (eg. focus)
+@colorDarkenPercentage: 13.5%;
+// Used in mixins to lighten contextual colors by the same amount (eg. hover)
+@colorLightenPercentage: 13.5%;
+
+// Text colors
+@colorText: @colorGray2;
+@colorTextLight: @colorGray6;
+@colorButtonText: @colorGray5;
+@colorDisabledText: @colorGray12;
+@colorErrorText: #CC0000;
+
+// UI colors
+@colorFieldBorder: @colorGray12;
+@colorShadow: @colorGray14;
+@colorPlaceholder: @colorGray10;
+@colorNeutral: @colorGray7;
+
+// The following rules are deprecated
+@colorWhite: #fff;
+@colorOffWhite: #fafafa;
+@colorGrayDark: #898989;
+@colorGrayLight: #ccc;
+@colorGrayLighter: #ddd;
+@colorGrayLightest: #eee;
+
+// Global border radius to be used to buttons and inputs
+@borderRadius: 2px;