style: choose font colour based on background colour (#3402)

This commit is contained in:
Frédéric Péters 2013-07-31 15:37:08 +02:00
parent 1cd8795a95
commit d40afd6944
3 changed files with 68 additions and 2 deletions

View File

@ -41,6 +41,10 @@ div.rssHeader {
text-align: center;
}
li.dark-bg {
color: #ddd;
}
div.rssHeader a,
ul li h2 {
margin-top: 0;
@ -52,6 +56,11 @@ ul li h2 {
font-weight: normal;
}
li.dark-bg div.rssHeader a,
ul li.dark-bg h2 {
color: white;
}
#wrap {
margin: 0 auto;
width: 1000px;
@ -184,6 +193,12 @@ li:hover .close {
display: block;
}
li.dark-bg:hover .color,
li.dark-bg:hover .close {
display: block;
color: white;
}
.welcome {
padding: 1ex;
}

View File

@ -0,0 +1,33 @@
/*
Copyright 2010 Enideo. Released under dual MIT and GPL licenses.
*/
(function(e){function l(a,c,b){if(c in a)return a[c](b);else if(c=="RGB"||"RGB"in f.convertModels[c]){if(c!="RGB")b=f.convertModels[c].RGB(b);for(var d in a)if(d=="RGB"||d in f.convertModels.RGB){if(d!="RGB")b=f.convertModels.RGB[d](b);b=e.colors.formats.array3Octet1Normalized.fromModel.RGB(b);return a[d](b)}}throw"No valid conversion methods for this color model: "+c;}function o(a,c){var b=e.colors.models[this.currentModel].parameterIndexes,d=this.currentModel=="RGB"?this.format("array3Octet1Normalized"):
this.color;if(a){a=a.toLowerCase();if(a in b)if(c!==undefined){this.color[b[a]]=c;this.color=e.colors.models[this.currentModel].sanitize(this.color)}else return d[b[a]];else throw"Parameter not in the current color model: "+a;}else return d;return this}var f=function(a,c,b){if(this instanceof f===false)return new f(a,c,b);if(a&&a instanceof f)return a;this.currentModel=f.defaultModel;if(a){if(typeof a=="string")a=e.trim(a);this.inputColor=a;if(c&&c in f.formats&&f.formats[c].validate(a)===true)this.inputFormat=
c;else{if(b===undefined)b=c;for(c in f.formats)if(f.formats[c].validate(a)===true){this.inputFormat=c;break}}if(this.inputFormat){c=f.formats[c];this.inputModel=b||c.model||f.defaultInputModel;a=l(c.toModel,this.inputModel,a);if(this.inputModel!=this.currentModel){a=f.models[this.inputModel].sanitize(a);a=l(f.convertModels[this.inputModel],this.currentModel,a)}this.color=f.models[this.currentModel].sanitize(a)}}else this.color=f.models[this.currentModel].sanitize();if(this.color)return this;else throw"Color format unknown: "+
a;};f.fn=f.prototype={get:o,set:o,model:function(a){if(a===undefined)return this.currentModel;else if(a==this.currentModel)return this;else if(a in f.models){this.color=l(f.convertModels[this.currentModel],a,this.color);this.currentModel=a;return this}else throw"Model does not exist";},format:function(a){var c=this.currentModel=="RGB"&&a!=="array3Octet1Normalized"?this.format("array3Octet1Normalized"):this.color;if(a&&a in f.formats)return l(f.formats[a].fromModel,this.currentModel,c);else throw"Format does not exist";
},toString:function(a){if(!a||a in f.formats===false)a=f.defaultString;try{return this.format(a).toString()}catch(c){return this.format(f.defaultString).toString()}},isFormat:function(a){if(a&&a in f.formats)return f.formats[a].validate(this.inputColor);else throw"Format does not exist";}};f.formats={array3Octet:{validate:function(a,c){var b=0;c=c||3;if(e.isArray(a)&&a.length==c){for(;b<c;)if(typeof a[b]=="number"&&a[b]>=0&&b<3&&a[b]<=255&&/^\d+$/.test(a[b].toString())||b==3&&a[b]<=1)b++;else break;
if(b==c)return true}return false},toModel:{RGB:function(a){return a.slice(0,3)}},fromModel:{RGB:function(a){return a.slice(0,3)}}},array3Octet1Normalized:{validate:function(a){return f.formats.array3Octet.validate(a,4)},toModel:{RGB:function(a){return a.slice(0,4)}},fromModel:{RGB:function(a){var c=0;for(a=a.slice(0,4);c<3;){a[c]=Math.round(a[c]);c++}return a}}},rgb:{validate:function(a,c){var b=1,d;if(a&&typeof a=="string"&&(d=/^rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)$/.exec(a))){for(;b<
4;){d[b]=parseInt(d[b]);if(d[b]<256)b++;else break}if(b==4)if(c){d.shift();return d.slice(0)}else return true}return false},fromModel:{RGB:function(a){return"rgb("+a[0]+","+a[1]+","+a[2]+")"}},toModel:{RGB:function(a){a=f.formats.rgb.validate(a,true);return a===false?null:a}},model:"RGB"}};f.models={RGB:{sanitize:function(a){var c;if(!a||!e.isArray(a))a=[Math.floor(256*Math.random()),Math.floor(256*Math.random()),Math.floor(256*Math.random()),Math.random()];for(;a.length<4;)a.length==3?a.push(1):
a.push(0);a=a.slice(0,4);for(c=0;c<a.length;c++){a[c]||(a[c]=0);if(c<3){if(a[c]>255)a[c]=255;if(a[c]<0)a[c]=0}else if(c==3){a[c]=parseFloat(a[c]);if(a[c]>1)a[c]=1;if(a[c]<0)a[c]=0}}return a},parameterIndexes:{r:0,g:1,b:2,a:3,red:0,green:1,blue:2,alpha:3}}};f.convertModels={};f.defaultInputModel=f.defaultModel="RGB";f.defaultString="rgb";e.colors===undefined&&e.extend({colors:f});e.extend(e.colors.formats,{rgba:{validate:function(a,c){var b=1,d;if(a&&typeof a=="string"&&(d=/^rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*(0|1|0\.[0-9]+)\s*\)$/.exec(a))){for(;b<
4;){d[b]=parseInt(d[b]);if(d[b]<256)b++;else break}if(b==4&&d[4]>=0&&d[4]<=1){d[b]=parseFloat(d[b]);b++}if(b==5)if(c){d.shift();return d.slice(0)}else return true}return false},fromModel:{RGB:function(a){return"rgba("+a[0]+","+a[1]+","+a[2]+","+a[3]+")"}},toModel:{RGB:function(a){a=f.formats.rgba.validate(a,true);return a===false?null:a}},model:"RGB"}});e.extend(e.colors.formats,{array3Normalized:{validate:function(a,c){var b=0;c=c||3;if(e.isArray(a)&&a.length==c){for(;b<c;)if(typeof a[b]=="number"&&
a[b]<=1&&a[b]>=0)b++;else break;if(b==c)return true}return false},toModel:{RGB:function(a){return[a[0]*255,a[1]*255,a[2]*255]}},fromModel:{RGB:function(a){return[a[0]/255,a[1]/255,a[2]/255]}}},array4Normalized:{validate:function(a){return f.formats.array3Normalized.validate(a,4)},toModel:{RGB:function(a){return[a[0]*255,a[1]*255,a[2]*255,a[3]]}},fromModel:{RGB:function(a){var c;a=a.slice(0);for(c in a)if(c!=3&&a[c]){a[c]+=1;a[c]/=256}return[a[0],a[1],a[2],a[3]]}}}});var p={hex:{validate:function(a,
c){var b;if(a&&typeof a=="string")if(b=/^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/.exec(a))return c?[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16)]:true;else if(b=/^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/.exec(a))return c?[parseInt(b[1]+b[1],16),parseInt(b[2]+b[2],16),parseInt(b[3]+b[3],16)]:true;return false},fromModel:{RGB:function(a){return"#"+(a[0]<16?"0":"")+a[0].toString(16)+(a[1]<16?"0":"")+a[1].toString(16)+(a[2]<16?"0":"")+a[2].toString(16)}},toModel:{RGB:function(a){a=
p.hex.validate(a,true);return a===false?null:a}},model:"RGB"}};e.extend(e.colors.formats,p);e.extend(e.colors.formats,{transparent:{validate:function(a){return a&&typeof a=="string"&&/^transparent$/i.test(a)},fromModel:{RGB:function(a){if(a[3]==0)return"transparent";else throw"Color is not transparent: "+a.toString();}},toModel:{RGB:function(){return[255,255,255,0]}}}});var m={name:{list:{aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],
beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,
0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,
220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,
211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,
104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,
218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,
128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},validate:function(a){if(!a||typeof a!="string"||/^\w+$/.test(a)==false)return false;a=a.toLowerCase();return a in this.list},fromModel:{RGB:function(a){var c;a=a.slice(0,3).toString();for(c in m.name.list)if(m.name.list[c].toString()==a)return c;throw"No name corresponds to the color: "+a.toString();
}},toModel:{RGB:function(a){a=a.toLowerCase();return m.name.list[a]}}}};e.extend(e.colors.formats,m);e.colors.fn.mixWith=function(a,c){var b=0,d,g,h,i;if(typeof c=="number")i=c;d=this.get();h=this.model();if(e.isArray(a))try{g=f(a)}catch(j){for(b=0;b<a.length;b++){if(a[b]instanceof f==false)a[b]=f(a[b]);g=b==0?a[b].model(h):g.mixWith(a[b],b/(b+1))}}else{if(a instanceof f==false)a=f(a);g=a}g=g.model(h).get();d=d.slice(0);g=g.slice(0);if(i==undefined)i=b?1/(b+1):0.5;for(b=0;b<d.length;b++){if("cycleMixes"in
f.models[h]&&f.models[h].cycleMixes[b])if(f.models[h].cycleMixes[b]>0)for(;d[b]>g[b];)g[b]+=f.models[h].cycleMixes[b];else for(;d[b]<g[b];)g[b]+=f.models[h].cycleMixes[b];d[b]=d[b]*i+g[b]*(1-i)}d=f.models[h].sanitize(d);return e.extend(e.colors(),{color:d,currentModel:h})};e.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(a,c){e.fx.step[c]=function(b){var d;if(!b.colorInit){b.colorInit=true;b.start=e.colors(e(b.elem).visibleColor(c));
if(/^(|transparent)$/i.test(e.curCSS(b.elem,c))){b.start.model("RGB").set("alpha",0);d="RGB"}if(b.end=="transparent"){b.middle=e.colors(e(b.elem).parent().visibleColor(c));b.middle.model("RGB").set("alpha",0);d="RGB"}else if(b.end==""){e(b.elem).css(c,"");b.middle=e.colors(e(b.elem).css(c))}else b.middle=e.colors(b.end);if(b.options.mixModel!==undefined)d=b.options.mixModel;if(d!==undefined){b.start.model(d);b.middle.model(d)}}b.elem.style[c]=b.pos!=1?b.start.mixWith(b.middle,Math.max(Math.min(1-
b.pos,1),0)).toString():b.end}});jQuery.fn.visibleColor=function(a){var c,b=this.get(0);do{c=e.curCSS(b,a);if(c!=""&&c!="transparent")break;if(e.nodeName(b,"body")){c="transparent";break}a="backgroundColor"}while(b=b.parentNode);return c};e.extend(e.support,{rgba:/rgba/.test(e("<div/>").attr("style","background:#f00;background:rgba(0,0,0,0.5);").css("background-color")),hsl:/hsl/.test(e("<div/>").attr("style","background:#f00;background:hsl(0,0,0);").css("background-color")),hsla:/hsla/.test(e("<div/>").attr("style",
"background:#f00;background:hsla(0,0,0,0.5);").css("background-color"))});if("rgba"in e.support&&e.support.rgba)e.colors.defaultString="rgba";var r={HSL:{sanitize:function(a){var c;if(!a||!e.isArray(a))a=[Math.floor(361*Math.random()),Math.floor(101*Math.random()),Math.floor(101*Math.random()),Math.random()];for(;a.length<4;)a.length==3?a.push(1):a.push(0);a=a.slice(0,4);for(c=0;c<a.length;c++){a[c]||(a[c]=0);a[c]=parseFloat(a[c]);if(c==0){for(;a[c]>360;)a[c]-=360;if(a[c]<0)a[c]+=360}else if(c<3){for(;a[c]>
100;)a[c]=100;if(a[c]<0)a[c]=0}else if(c==3){if(a[c]>1)a[c]=1;if(a[c]<0)a[c]=0}}return a},parameterIndexes:{h:0,s:1,l:2,a:3,hue:0,saturation:1,lightness:2,alpha:3},cycleMixes:[360,0,0,0],reverseCylce:function(a){this.cycleMixes[this.parameterIndexes[a]]*=-1}}},q={array1Circle2Percentage:{validate:function(a,c){var b=0;c=c||3;if(e.isArray(a)&&a.length==c){for(;b<c;)if(typeof a[b]=="number"&&a[b]>=0&&(b==0&&a[b]<=360||(b==1||b==2)&&a[b]<=100||b==3&&a[b]<=1))b++;else break;if(b==c)return true}return false},
toModel:{HSL:function(a){return a.slice(0,3)}},fromModel:{HSL:function(a){return a.slice(0,3)}}},array1Circle2Percentage1Normalized:{validate:function(a){return q.array1Circle2Percentage.validate(a,4)},toModel:{HSL:function(a){return a.slice(0,4)}},fromModel:{HSL:function(a){return a.slice(0,4)}}}};e.extend(true,e.colors.convertModels,{RGB:{HSL:function(a){var c=a[0]/255,b=a[1]/255,d=a[2]/255,g=Math.max(c,b,d),h=Math.min(c,b,d),i=g-h,j=(g+h)/2;if(g==h)c=h=0;else{h=j>0.5?i/(2-g-h):i/(g+h);c=g==c?(b-
d)/i+(b<d?6:0):g==b?(d-c)/i+2:(c-b)/i+4;c/=6}return[c*360,h*100,j*100,a[3]]}},HSL:{RGB:function(a){function c(j,n,k){if(k<0)k+=1;if(k>1)k-=1;return k<1/6?j+(n-j)*6*k:k<0.5?n:k<2/3?j+(n-j)*(2/3-k)*6:j}var b,d,g,h,i;g=a[0]/360;d=a[1]/100;b=a[2]/100;if(d==0)b=d=g=b;else{h=b<0.5?b*(1+d):b+d-b*d;i=2*b-h;b=c(i,h,g+1/3);d=c(i,h,g);g=c(i,h,g-1/3)}return[b*255,d*255,g*255,a[3]]}}});e.extend(e.colors.models,r);e.extend(e.colors.formats,q);e.extend(e.colors.formats,{hsl:{validate:function(a,c){var b=1,d;if(a&&
typeof a=="string"&&(d=/^hsl\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})%\s*,\s*([0-9]{1,3})%\s*\)$/.exec(a))){for(;b<4;){d[b]=parseInt(d[b]);if(b==0&&d[b]<=360||b>0&&d[b]<=100)b++;else break}if(b==4)if(c){d.shift();return d.slice(0)}else return true}return false},fromModel:{HSL:function(a){return"hsl("+Math.round(a[0])+","+Math.round(a[1])+","+Math.round(a[2])+")"}},toModel:{HSL:function(a){a=e.colors.formats.hsl.validate(a,true);return a===false?null:a}},model:"HSL"}});e.extend(e.colors.formats,{hsla:{validate:function(a,
c){var b=1,d;if(a&&typeof a=="string"&&(d=/^hsla\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})%\s*,\s*([0-9]{1,3})%\s*,\s*(0|1|0\.[0-9]+)\s*\)$/.exec(a))){for(;b<4;){d[b]=parseInt(d[b]);if(b==0&&d[b]<=360||b>0&&d[b]<=100)b++;else break}if(b==4&&d[4]>=0&&d[4]<=1){d[b]=parseFloat(d[b]);b++}if(b==5)return c?d.slice(1):true}return false},fromModel:{HSL:function(a){return"hsla("+Math.round(a[0])+","+Math.round(a[1])+","+Math.round(a[2])+","+a[3]+")"}},toModel:{HSL:function(a){a=e.colors.formats.hsla.validate(a,
true);return a===false?null:a}},model:"HSL"}});e.extend(true,e.colors.formats,{array3Normalized:{toModel:{HSL:function(a){return[a[0]*360,a[1]*100,a[2]*100]}},fromModel:{HSL:function(a){return[a[0]/360,a[1]/100,a[2]/100]}}},array4Normalized:{toModel:{HSL:function(a){return[Math.round(a[0]*360),a[1]*100,a[2]*100,a[3]]}},fromModel:{HSL:function(a){return[a[0]/360,a[1]/100,a[2]/100,a[3]]}}}})})(jQuery);

View File

@ -8,6 +8,7 @@
<script src="{{ STATIC_URL }}js/jquery.zrssfeed.js"></script>
<script src="{{ STATIC_URL }}js/jquery.clock.js"></script>
<script src="{{ STATIC_URL }}js/jquery.simple-color.js"></script>
<script src="{{ STATIC_URL }}js/jquery.colors.bundle.min.js"></script>
<script src="{{ STATIC_URL }}js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/jquery.gridster.css">
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/analog.css">
@ -45,6 +46,22 @@ Univcloud
<script>
function update_colour_class(idx, li)
{
var color = $.colors($(li).css('background-color'));
var r = color.get('red');
var g = color.get('green');
var b = color.get('blue');
var a = 1 - (r*0.299 + g*0.587 + b*0.114) / 255;
if (a < 0.5) {
$(li).removeClass('dark-bg');
$(li).addClass('bright-bg');
} else {
$(li).removeClass('bright-bg');
$(li).addClass('dark-bg');
};
}
$(function(){ //DOM Ready
var gridster = $(".gridster ul").gridster({
widget_margins: [10, 10],
@ -81,7 +98,6 @@ $('.close').click(function() {
$('.simple_color').simpleColor();
$('.color').click(function() {
console.log('parent:', $(this).parent());
var app_id = $(this).next().next().attr('id');
var li = $(this).parent();
@ -93,6 +109,7 @@ $('.color').click(function() {
buttons: {
"Sélectionner": function() {
$(li).css('background-color', $('.simple_color').val()).css('border-color', $('.simple_color').val());
update_colour_class(-1, li)
$.ajax('color/' + app_id, {data: {'bg': $('.simple_color').val()}});
$( this ).dialog( "close" );
},
@ -101,9 +118,10 @@ $('.color').click(function() {
}
}
});
});
$('li.gs_w').each(update_colour_class);
});
</script>