mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-24 12:37:58 +01:00
92 lines
3.2 KiB
SCSS
92 lines
3.2 KiB
SCSS
$background-color: #131a22;
|
|
$text-color: #e0e0e0;
|
|
|
|
$primary-color: #2e4c80;
|
|
$secondary-color: #434f69;
|
|
$danger-color: #672a21;
|
|
$warning-color: #684f2c;
|
|
$success-color: #25603e;
|
|
$information-color: #205861;
|
|
$purple-color: #561e5e;
|
|
|
|
$upvote-color: #5b9b26;
|
|
$downvote-color: #da3412;
|
|
$fave-color: #a18e27;
|
|
$comment-color: #b099dd;
|
|
$hide-color: #da3412;
|
|
|
|
$tag-default-color: #1b3c21;
|
|
$tag-error-color: #4f181d;
|
|
$tag-rating-color: #113456;
|
|
$tag-origin-color: #1d1858;
|
|
$tag-character-color: #193f47;
|
|
$tag-oc-color: #451f47;
|
|
$tag-species-color: #362118;
|
|
$tag-body-type-color: #393939;
|
|
$tag-content-fanmade-color: #622c4e;
|
|
$tag-content-official-color: #4b491c;
|
|
$tag-spoiler-color: #4f3811;
|
|
|
|
$spoiler-color: #0f0f0f;
|
|
|
|
@mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) {
|
|
--tag-#{$tagname}-color: #{$color};
|
|
--tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)};
|
|
--tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)};
|
|
}
|
|
|
|
@mixin type-color($type, $color) {
|
|
--#{$type}-color: #{$color};
|
|
--#{$type}-border-color: #{lighten(desaturate($color, 20%), 10%)};
|
|
--#{$type}-dark-color: #{darken(desaturate($color, 25%), 12%)};
|
|
--#{$type}-link-color: #{lighten(saturate($color, 10%), 45%)};
|
|
}
|
|
|
|
:root {
|
|
--background-color: #{$background-color};
|
|
--text-color: #{$text-color};
|
|
|
|
--link-color: #{lighten(saturate($primary-color, 7%), 35%)};
|
|
--link-hover-color: #{$text-color};
|
|
|
|
--primary-color: #{$primary-color};
|
|
--primary-border-color: #{lighten(desaturate($primary-color, 20%), 10%)};
|
|
--primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)};
|
|
--primary-dark-color: #{darken(desaturate($primary-color, 15%), 20%)};
|
|
|
|
--secondary-color: #{$secondary-color};
|
|
--secondary-border-color: #{lighten($secondary-color, 10%)};
|
|
--secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)};
|
|
--secondary-dark-color: #{darken($secondary-color, 15%)};
|
|
--secondary-link-color: #{lighten($secondary-color, 55%)};
|
|
|
|
--upvote-color: #{$upvote-color};
|
|
--downvote-color: #{$downvote-color};
|
|
--fave-color: #{$fave-color};
|
|
--comment-color: #{$comment-color};
|
|
--hide-color: #{$hide-color};
|
|
|
|
--spoiler-color: #{$spoiler-color};
|
|
--spoiler-revealed-color: #{lighten($spoiler-color, 20%)};
|
|
|
|
@include type-color(success, $success-color);
|
|
@include type-color(warning, $warning-color);
|
|
@include type-color(danger, $danger-color);
|
|
@include type-color(information, $information-color);
|
|
@include type-color(purple, $purple-color);
|
|
|
|
@include tag-color(default, $tag-default-color);
|
|
@include tag-color(error, $tag-error-color, 37%);
|
|
@include tag-color(rating, $tag-rating-color, 37%);
|
|
@include tag-color(origin, $tag-origin-color, 42%);
|
|
@include tag-color(character, $tag-character-color);
|
|
@include tag-color(oc, $tag-oc-color, 40%);
|
|
@include tag-color(species, $tag-species-color, 37%);
|
|
@include tag-color(body-type, $tag-body-type-color, 45%, 12%);
|
|
@include tag-color(content-fanmade, $tag-content-fanmade-color, 40%);
|
|
@include tag-color(content-official, $tag-content-official-color);
|
|
@include tag-color(spoiler, $tag-spoiler-color);
|
|
|
|
/* Exceptions to mixin colors */
|
|
--tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)};
|
|
}
|