diff options
Diffstat (limited to 'www/wiki/skins/chameleon/resources/styles/mixins.less')
| -rw-r--r-- | www/wiki/skins/chameleon/resources/styles/mixins.less | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/www/wiki/skins/chameleon/resources/styles/mixins.less b/www/wiki/skins/chameleon/resources/styles/mixins.less new file mode 100644 index 00000000..e7bb7f06 --- /dev/null +++ b/www/wiki/skins/chameleon/resources/styles/mixins.less @@ -0,0 +1,64 @@ +/** + * Mixins used for the Chameleon skin styles + * + * This file is part of the MediaWiki skin Chameleon. + * + * @copyright 2013 - 2014, Stephan Gambke + * @license GNU General Public License, version 3 (or any later version) + * + * The Chameleon skin is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by the Free + * Software Foundation, either version 3 of the License, or (at your option) any + * later version. + * + * The Chameleon skin is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more + * details. + * + * You should have received a copy of the GNU General Public License along + * with this program. If not, see <http://www.gnu.org/licenses/>. + * + * @author Stephan Gambke + * @since 1.0 + * @ingroup Skins + */ + +/** + * Colors for links + * + * :hover MUST come after :link and :visited + * :active MUST come after :hover + */ +.link( @color ) { + &:link { + color: @color; + } + &:visited { + color: darken(@color, 20%); + } + &:focus { + color: darken(@color, 15%); + } + &:hover { + color: darken(@color, 15%); + } + &:active { + color: difference(@color, #ffffff); + } + &:visited:focus { + color: darken(@color, 30%); + } + &:visited:hover { + color: darken(@color, 30%); + } +} + +// Produces an SVG bullet with the diameter equal to the minimum from @width +// and @height; the bullet is centered horizontally and placed at 65% from the +// top vertically (or as far down as possible given the diameter) +.bullet( @color: @list-bullet-color, @width: @list-bullet-size, @height: @font-size-base ) { + list-style: outside disc e(%('url("data:image/svg+xml;charset=UTF-8,%s")', escape( %('<svg width="%s" height="%s" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="%s" cy="%s" r="%s" fill="@{color}"/></svg>', unit(@width), unit(@height), unit(@width/2), unit(min(@height - min(@width, @height)/2, 0.65*@height)), unit( min(@width, @height) )/2)))); + // IE hack: IE < 9 does not properly work with SVGs. Serve them some fallback PNG. + list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAJCAYAAAARml2dAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABUSURBVAiZdY4xDsAgFELB2J0DdnbwQI5OHvDfgC62SY0yvhAetI1dWEq5JN0kKwDYbhEx8oT9a5JdEtLb/M2QNW0FAJLttkLbLUfEkIRVztPdo+MBm8UkW9Zxc20AAAAASUVORK5CYII=")e("\9"); +} |