108 lines
2.4 KiB
CSS
108 lines
2.4 KiB
CSS
/* --- 00. COLORS --- */
|
|
|
|
/*
|
|
* La gestion des couleurs dans le theme. Cette partie de la stylesheet est
|
|
* automatique et n'a pas besoin d'être modifiée
|
|
*/
|
|
|
|
// FUNCTIONS TO GET MORE EASILY COLORS
|
|
@function get-color($name) {
|
|
@if map-has-key($semantics, $name) {
|
|
@return map-get($palette, map-get($semantics, $name));
|
|
} @else {
|
|
@return map-get($palette, $name);
|
|
}
|
|
}
|
|
|
|
@function list-colors() {
|
|
$newmap: map-merge($palette, $semantics);
|
|
@return $newmap;
|
|
}
|
|
|
|
@function luminance($color) {
|
|
$c_red: red($color);
|
|
$c_grn: green($color);
|
|
$c_blu: blue($color);
|
|
|
|
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
|
|
|
|
@return $luminance
|
|
}
|
|
|
|
@function getFontColor() {
|
|
@return getTextColorFromBackground(get-color("background-alt"));
|
|
}
|
|
|
|
@function getTextColorFromBackground($background-color) {
|
|
@if (luminance($background-color) < 255 * $whiteness_value) {
|
|
@return $color-font-light;
|
|
} @else {
|
|
@return $color-font;
|
|
}
|
|
}
|
|
|
|
// Couleurs du theme
|
|
|
|
$color-link: get-color("link");
|
|
$color-selection: get-color("selection");
|
|
$color-mark: get-color("mark");
|
|
$color-font: get-color("font");
|
|
$color-font-light: get-color("font-light");
|
|
|
|
$color-primary: get-color("primary");
|
|
$color-secondary: get-color("secondary");
|
|
$color-warning: get-color("warning");
|
|
$color-danger: get-color("danger");
|
|
$color-info: get-color("info");
|
|
$color-success: get-color("success");
|
|
|
|
$color-muted: get-color("muted");
|
|
|
|
$color-background: get-color("background");
|
|
$color-background-alt: get-color("background-alt");
|
|
|
|
// fonction texte et background
|
|
|
|
@mixin text-color($text-color) {
|
|
color: $text-color;
|
|
}
|
|
|
|
@mixin background-color($background-color) {
|
|
background-color: $background-color;
|
|
color: getTextColorFromBackground($background-color);
|
|
}
|
|
|
|
// Colorize important elements
|
|
// Direct uses of colors
|
|
|
|
a, a:hover, a:active {
|
|
color: $color-link;
|
|
}
|
|
|
|
::selection {
|
|
@include background-color($color-selection);
|
|
}
|
|
::-moz-selection {
|
|
@include background-color($color-selection);
|
|
}
|
|
|
|
mark {
|
|
background-color: lighten($color-mark, 30%)
|
|
}
|
|
|
|
blockquote, pre {
|
|
border-color: $color-primary;
|
|
}
|
|
|
|
.bg {
|
|
@each $name, $color in list-colors() {
|
|
&-#{$name} { @include background-color(get-color($name)); }
|
|
}
|
|
}
|
|
|
|
.text {
|
|
@each $name, $color in list-colors() {
|
|
&-#{$name} { @include text-color(get-color($name)); }
|
|
}
|
|
}
|