191 lines
4.2 KiB
Plaintext
191 lines
4.2 KiB
Plaintext
/*
|
|
Less colors
|
|
*/
|
|
#yellow {
|
|
#short {
|
|
color: #fea;
|
|
}
|
|
#long {
|
|
color: #ffeeaa;
|
|
}
|
|
}
|
|
#blue {
|
|
#short {
|
|
color: #00f;
|
|
}
|
|
#long {
|
|
color: #0000ff;
|
|
}
|
|
}
|
|
#overflow {
|
|
.a { color: #111111 - #444444; } // #000000
|
|
.b { color: #eee + #fff; } // #ffffff
|
|
.c { color: #aaa * 3; } // #ffffff
|
|
.d { color: #00ee00 + #009900; } // #00ff00
|
|
}
|
|
#grey {
|
|
color: rgb(200, 200, 200);
|
|
}
|
|
/*
|
|
Colors as ID's
|
|
*/
|
|
#808080 {
|
|
color: hsl(50, 0%, 50%);
|
|
}
|
|
#00ff00 {
|
|
color: hsl(120, 100%, 50%);
|
|
}
|
|
/*
|
|
color functions
|
|
*/
|
|
.hsl {
|
|
color: hsl(0, 100%, 100%);
|
|
color: hsl(100, 100%, 100%);
|
|
color: hsl(0, 0%, 0%);
|
|
color: hsl(100, 0%, 0%);
|
|
}
|
|
.saturate {
|
|
color: saturate(#555, 1%);
|
|
color: saturate(#555, 10%);
|
|
color: saturate(#555, 20%);
|
|
color: saturate(#555, 40%);
|
|
color: saturate(#555, 60%);
|
|
color: saturate(#555, 100%);
|
|
color: saturate(#000, 100%);
|
|
color: saturate(#000, 0%);
|
|
color: saturate(#fff, 100%);
|
|
color: saturate(#fff, 0%);
|
|
color: saturate(#29332f, 1%);
|
|
color: saturate(#29332f, 10%);
|
|
color: saturate(#29332f, 20%);
|
|
color: saturate(#29332f, 40%);
|
|
color: saturate(#29332f, 60%);
|
|
color: saturate(#29332f, 100%);
|
|
}
|
|
.desaturate {
|
|
color: desaturate(#555, 1%);
|
|
color: desaturate(#555, 10%);
|
|
color: desaturate(#555, 20%);
|
|
color: desaturate(#555, 40%);
|
|
color: desaturate(#555, 60%);
|
|
color: desaturate(#555, 100%);
|
|
color: desaturate(#000, 100%);
|
|
color: desaturate(#000, 0%);
|
|
color: desaturate(#fff, 100%);
|
|
color: desaturate(#fff, 0%);
|
|
color: desaturate(#29332f, 1%);
|
|
color: desaturate(#29332f, 10%);
|
|
color: desaturate(#29332f, 20%);
|
|
color: desaturate(#29332f, 40%);
|
|
color: desaturate(#29332f, 60%);
|
|
color: desaturate(#29332f, 100%);
|
|
}
|
|
.lighten {
|
|
color: lighten(#555, 1%);
|
|
color: lighten(#555, 10%);
|
|
color: lighten(#555, 20%);
|
|
color: lighten(#555, 40%);
|
|
color: lighten(#555, 60%);
|
|
color: lighten(#555, 100%);
|
|
color: lighten(#000, 100%);
|
|
color: lighten(#000, 0%);
|
|
color: lighten(#fff, 100%);
|
|
color: lighten(#fff, 0%);
|
|
color: lighten(#29332f, 1%);
|
|
color: lighten(#29332f, 10%);
|
|
color: lighten(#29332f, 20%);
|
|
color: lighten(#29332f, 40%);
|
|
color: lighten(#29332f, 60%);
|
|
color: lighten(#29332f, 100%);
|
|
}
|
|
.darken {
|
|
color: darken(#555, 1%);
|
|
color: darken(#555, 10%);
|
|
color: darken(#555, 20%);
|
|
color: darken(#555, 40%);
|
|
color: darken(#555, 60%);
|
|
color: darken(#555, 100%);
|
|
color: darken(#000, 100%);
|
|
color: darken(#000, 0%);
|
|
color: darken(#fff, 100%);
|
|
color: darken(#fff, 0%);
|
|
color: darken(#29332f, 1%);
|
|
color: darken(#29332f, 10%);
|
|
color: darken(#29332f, 20%);
|
|
color: darken(#29332f, 40%);
|
|
color: darken(#29332f, 60%);
|
|
color: darken(#29332f, 100%);
|
|
}
|
|
.spin {
|
|
color: spin(#555, 1);
|
|
color: spin(#555, -10);
|
|
color: spin(#555, 20);
|
|
color: spin(#555, -40);
|
|
color: spin(#555, 60);
|
|
color: spin(#555, -100);
|
|
color: spin(#000, 100);
|
|
color: spin(#000, 0);
|
|
color: spin(#fff, 100);
|
|
color: spin(#fff, 0);
|
|
color: spin(#29332f, 1);
|
|
color: spin(#29332f, -10);
|
|
color: spin(#29332f, 20);
|
|
color: spin(#29332f, -40);
|
|
color: spin(#29332f, 60);
|
|
color: spin(#29332f, 100);
|
|
}
|
|
.grayscale {
|
|
color: grayscale(#000, 100%);
|
|
color: grayscale(#000, 0%);
|
|
color: grayscale(#fff, 100%);
|
|
color: grayscale(#fff, 0%);
|
|
color: grayscale(#29332f, 1%);
|
|
color: grayscale(#29332f, 10%);
|
|
color: grayscale(#29332f, 20%);
|
|
color: grayscale(#29332f, 40%);
|
|
color: grayscale(#29332f, 60%);
|
|
color: grayscale(#29332f, 100%);
|
|
}
|
|
.mix {
|
|
color: mix(#f00, #00f);
|
|
color: mix(#f00, #0ff);
|
|
color: mix(#f70, #0aa);
|
|
color: mix(#f00, #00f, 25%);
|
|
color: mix(#f00, #00f, 100%);
|
|
color: mix(#f00, #00f, 0%);
|
|
}
|
|
/*
|
|
Variables
|
|
*/
|
|
@base: #f04615;
|
|
.vars {
|
|
color: saturate(@base, 5%);
|
|
background-color: lighten(spin(@base, 8), 25%);
|
|
@new: hsl(hue(@base), 45%, 90%);
|
|
color: @new;
|
|
}
|
|
/*
|
|
Color names
|
|
*/
|
|
.names {
|
|
color: red;
|
|
color: darken(blue, 10%);
|
|
}
|
|
.alpha {
|
|
color: rgb(200, 200, 200, 100);
|
|
color: rgb(201, 200, 200, 0.5);
|
|
color: rgb(202, 200, 200, 0.0);
|
|
color: rgba(200, 201, 200, 100);
|
|
color: rgba(201, 200, 200, 0.5);
|
|
color: rgba(202, 200, 200, 0.0);
|
|
}
|
|
.fraction {
|
|
color: darken(#29332f, 45.3%);
|
|
color: lighten(#000, 93.5%);
|
|
color: mix(#f00, #00f, 98.9%);
|
|
color: spin(#29332f, 45.5);
|
|
color: greyscale(#29332f, 98.5%);
|
|
color: saturate(#29332f, 99.9%);
|
|
color: desaturate(#555, 1.5%);
|
|
}
|