diff options
author | Pierre Schmitz <pierre@archlinux.de> | 2014-12-27 15:41:37 +0100 |
---|---|---|
committer | Pierre Schmitz <pierre@archlinux.de> | 2014-12-31 11:43:28 +0100 |
commit | c1f9b1f7b1b77776192048005dcc66dcf3df2bfb (patch) | |
tree | 2b38796e738dd74cb42ecd9bfd151803108386bc /resources/src/mediawiki.less | |
parent | b88ab0086858470dd1f644e64cb4e4f62bb2be9b (diff) |
Update to MediaWiki 1.24.1
Diffstat (limited to 'resources/src/mediawiki.less')
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; |