extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 16:03:47 +01:00
Code Issues Packages Projects Releases Wiki Activity
96dff06453
egroupware_official/pixelegg/less/def_gradient.less

163 lines
7.9 KiB
Plaintext
Raw Blame History

/**
* EGroupware: Stylite Pixelegg template
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
* @package pixelegg
* @version $Id: pixelegg.less 3017 2014-04-15 08:35:38Z ralfbecker $
## Definitions of all gradients
*/
@import "definitions.less";
// #############################
// Verlauf
.background_verlauf_diagonal_gray (@i: #d8d8d8, @j: #a3a3a3) {
background: -webkit-gradient(linear, 0 0, 0 bottom, @i, @j),
-moz-linear-gradient(@i, @j),
-o-linear-gradient(@i, @j),
linear-gradient(@i, @j);
-pie-background: linear-gradient(@i, @j);
behavior: url(/PIE.htc);
}
.background_linear_gradient(@i: #ffb76b, @j: #ff7f04) {
background: -webkit-gradient(linear, 0 0, 0 bottom, @i, @j),
-moz-linear-gradient(@i, @j),
-o-linear-gradient(@i, @j),
linear-gradient(@i, @j);
-pie-background: linear-gradient(@i, @j);
behavior: url(/PIE.htc);
}
.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
background: @color,
-webkit-gradient(linear,
left bottom,
left top,
color-stop(0, @start),
color-stop(1, @stop)),
-ms-linear-gradient(bottom, @start, @stop),
-moz-linear-gradient(center bottom, @start 0%, @stop 100%),
-o-linear-gradient(@stop, @start);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}
.bw_gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
background: @color,
-webkit-gradient(linear,
left bottom,
left top,
color-stop(0, rgb(@start,@start,@start)),
color-stop(1, rgb(@stop,@stop,@stop))),
-ms-linear-gradient(bottom,
rgb(@start,@start,@start) 0%,
rgb(@stop,@stop,@stop) 100%),
-moz-linear-gradient(center bottom,
rgb(@start,@start,@start) 0%,
rgb(@stop,@stop,@stop) 100%),
-o-linear-gradient(rgb(@stop,@stop,@stop),
rgb(@start,@start,@start));
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
}
// Graufiler
.img_filter_gray{
/*filter grey*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-moz-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-ms-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
-o-filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
filter: grayscale(100%) brightness(100%) contrast(1%) saturate(0%);
/*filter: url(grayscale.svg); Firefox 4+ */
filter: gray; /* IE 6-9 */
}
// kein Filter
.img_filter_none{
/*filter grey*/
filter: none;
-webkit-filter: initial;
-moz-filter: initial;
-ms-filter: initial;
-o-filter: initial;
filter: initial;
/*filter: url(grayscale.svg); Firefox 4+ */
filter: initial; /* IE 6-9 */
}
/* ##################################################### */
.gradient_thead{
/*.background-color-5-gray;*/
background: -moz-linear-gradient(top, rgba(240,240,240,0) 0%, rgba(191,191,191,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,0)), color-stop(100%,rgba(191,191,191,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,240,240,0) 0%,rgba(191,191,191,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,240,240,0) 0%,rgba(191,191,191,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240,240,240,0) 0%,rgba(191,191,191,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(240,240,240,0) 0%,rgba(191,191,191,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f0f0f0', endColorstr='#a6bfbfbf',GradientType=0 ); /* IE6-9 */
}
// Vertical gradient using CSS where possible, and base64-encoded SVG for IE9 (enables use of this in combination with border-radius)
// Based on this by Phil Brown: http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/
// Also based on a mixin from Twitter Bootstrap: https://github.com/twitter/bootstrap
.gradient_vertical(@startColor, @endColor) {
// IE9 prep
@dataPrefix: ~"url(data:image/svg+xml;base64,";
@dataSuffix: ~")";
@dataContent: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g743" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"><stop stop-color="@{startColor}" offset="0"/><stop stop-color="@{endColor}" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g743)"/></svg>';
@b64Out: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataPrefix}','@{dataContent}','@{dataSuffix}')`;
background-color: mix(@startColor, @endColor, 60%); // Base solid colour fallback
background-image: ~"@{b64Out}"; // IE9
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
background-repeat: repeat-x;
}
.span_tool_group {
float: left;
margin: 0 6px 5px 0;
padding: 2px 2px 2px 5px;
border: 1px solid #a6a6a6;
border-bottom-color: #979797;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.5),0 0 2px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.15) inset;
background: #e4e4e4;
background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#e4e4e4));
background-image: -moz-linear-gradient(top,#fff,#e4e4e4);
background-image: -webkit-linear-gradient(top,#fff,#e4e4e4);
background-image: -o-linear-gradient(top,#fff,#e4e4e4);
background-image: -ms-linear-gradient(top,#fff,#e4e4e4);
background-image: linear-gradient(top,#fff,#e4e4e4);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#ffffff',endColorstr='#e4e4e4');
}
Reference in New Issue View Git Blame Copy Permalink