mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-23 20:18:00 +01:00
simplify themes
This commit is contained in:
Luna D.
parent
bb45fcc651
commit
c9846820ff
8 changed files with 266 additions and 245 deletions
84
assets/css/themes/base/dark.css
Normal file
84
assets/css/themes/base/dark.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
$text-color: #e0e0e0;
|
||||
|
||||
$danger-color: #6d2a20;
|
||||
$warning-color: #6d421a;
|
||||
$success-color: #25603e;
|
||||
$information-color: #1c606a;
|
||||
$special-color: #65206e;
|
||||
|
||||
$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;
|
||||
|
||||
@define-mixin tag-color $tagname, $color, $text-percentage: 35, $border-percentage: 15 {
|
||||
--tag-$(tagname)-color: $(color);
|
||||
--tag-$(tagname)-border-color: hsl(from $color h s calc(l + $border-percentage));
|
||||
--tag-$(tagname)-text-color: hsl(from $color h s calc(l + $text-percentage));
|
||||
}
|
||||
|
||||
@define-mixin type-color $type, $color {
|
||||
--$(type)-color: $color;
|
||||
--$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 10));
|
||||
--$(type)-muted-color: hsl(from $color h calc(s - 10) calc(l - 7));
|
||||
--$(type)-dark-color: hsl(from $color h calc(s - 30) calc(l - 11));
|
||||
--$(type)-link-color: hsl(from $color h calc(s + 10) calc(l + 45));
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--text-color: $text-color;
|
||||
--text-light-color: $text-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-hover-color: $text-color;
|
||||
|
||||
/* Interaction (vote) colors */
|
||||
--upvote-color: $upvote-color;
|
||||
--downvote-color: $downvote-color;
|
||||
--fave-color: $fave-color;
|
||||
--comment-color: $comment-color;
|
||||
--hide-color: $hide-color;
|
||||
|
||||
/* Spoiler colors */
|
||||
--spoiler-color: $spoiler-color;
|
||||
--spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
|
||||
|
||||
/* The invisible color */
|
||||
--invisible-color: #00000000;
|
||||
|
||||
/* Type (information category) colors */
|
||||
@mixin type-color success, $success-color;
|
||||
@mixin type-color warning, $warning-color;
|
||||
@mixin type-color danger, $danger-color;
|
||||
@mixin type-color information, $information-color;
|
||||
@mixin type-color special, $special-color;
|
||||
|
||||
/* Tag colors */
|
||||
@mixin tag-color default, $tag-default-color;
|
||||
@mixin tag-color error, $tag-error-color, 37;
|
||||
@mixin tag-color rating, $tag-rating-color, 37;
|
||||
@mixin tag-color origin, $tag-origin-color, 42;
|
||||
@mixin tag-color character, $tag-character-color;
|
||||
@mixin tag-color oc, $tag-oc-color, 40;
|
||||
@mixin tag-color species, $tag-species-color, 37;
|
||||
@mixin tag-color body-type, $tag-body-type-color, 45, 12;
|
||||
@mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
|
||||
@mixin tag-color content-official, $tag-content-official-color;
|
||||
@mixin tag-color spoiler, $tag-spoiler-color;
|
||||
}
|
||||
83
assets/css/themes/base/light.css
Normal file
83
assets/css/themes/base/light.css
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
$text-color: #121212;
|
||||
|
||||
$danger-color: #e78f82;
|
||||
$warning-color: #edb76c;
|
||||
$success-color: #8de3b1;
|
||||
$information-color: #90dce7;
|
||||
$special-color: #dc77e9;
|
||||
|
||||
$upvote-color: #67af2b;
|
||||
$downvote-color: #cf0001;
|
||||
$fave-color: #c4b246;
|
||||
$comment-color: #9273d0;
|
||||
$hide-color: #cf0001;
|
||||
|
||||
$tag-default-color: #84dd96;
|
||||
$tag-error-color: #eb848c;
|
||||
$tag-rating-color: #9cc6f0;
|
||||
$tag-origin-color: #b5b0ed;
|
||||
$tag-character-color: #b6e4ed;
|
||||
$tag-oc-color: #efaaf2;
|
||||
$tag-species-color: #e1997a;
|
||||
$tag-body-type-color: #bcbcbc;
|
||||
$tag-content-fanmade-color: #e388c2;
|
||||
$tag-content-official-color: #ebe9b3;
|
||||
$tag-spoiler-color: #dcb879;
|
||||
|
||||
$spoiler-color: #0f0f0f;
|
||||
|
||||
@define-mixin tag-color $tagname, $color, $text-percentage: 40, $border-percentage: 15 {
|
||||
--tag-$(tagname)-color: $(color);
|
||||
--tag-$(tagname)-border-color: hsl(from $color h s calc(l - $border-percentage));
|
||||
--tag-$(tagname)-text-color: hsl(from $color h s calc(l - $text-percentage));
|
||||
}
|
||||
|
||||
@define-mixin type-color $type, $color {
|
||||
--$(type)-color: $color;
|
||||
--$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 5));
|
||||
--$(type)-muted-color: hsl(from $color h calc(s - 7) calc(l - 12));
|
||||
--$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l + 20));
|
||||
--$(type)-link-color: hsl(from $color h calc(s + 50) calc(l - 47));
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--text-color: $text-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-hover-color: $text-color;
|
||||
|
||||
/* Interaction (vote) colors */
|
||||
--upvote-color: $upvote-color;
|
||||
--downvote-color: $downvote-color;
|
||||
--fave-color: $fave-color;
|
||||
--comment-color: $comment-color;
|
||||
--hide-color: $hide-color;
|
||||
|
||||
/* Spoiler colors */
|
||||
--spoiler-color: $spoiler-color;
|
||||
--spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
|
||||
|
||||
/* The invisible color */
|
||||
--invisible-color: #00000000;
|
||||
|
||||
/* Type (information category) colors */
|
||||
@mixin type-color success, $success-color;
|
||||
@mixin type-color warning, $warning-color;
|
||||
@mixin type-color danger, $danger-color;
|
||||
@mixin type-color information, $information-color;
|
||||
@mixin type-color special, $special-color;
|
||||
|
||||
/* Tag colors */
|
||||
@mixin tag-color default, $tag-default-color;
|
||||
@mixin tag-color error, $tag-error-color, 37;
|
||||
@mixin tag-color rating, $tag-rating-color, 37;
|
||||
@mixin tag-color origin, $tag-origin-color, 42;
|
||||
@mixin tag-color character, $tag-character-color;
|
||||
@mixin tag-color oc, $tag-oc-color, 40;
|
||||
@mixin tag-color species, $tag-species-color, 37;
|
||||
@mixin tag-color body-type, $tag-body-type-color, 45, 12;
|
||||
@mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
|
||||
@mixin tag-color content-official, $tag-content-official-color;
|
||||
@mixin tag-color spoiler, $tag-spoiler-color;
|
||||
}
|
||||
|
|
@ -1,57 +1,15 @@
|
|||
$background-color: #0f161e;
|
||||
$text-color: #e0e0e0;
|
||||
@import "themes/base/dark";
|
||||
|
||||
$background-color: #0f161e;
|
||||
$primary-color: #284371;
|
||||
$secondary-color: #546c99;
|
||||
$danger-color: #6d2a20;
|
||||
$warning-color: #6d421a;
|
||||
$success-color: #25603e;
|
||||
$information-color: #1c606a;
|
||||
$special-color: #65206e;
|
||||
|
||||
$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;
|
||||
|
||||
@define-mixin tag-color $tagname, $color, $text-percentage: 35, $border-percentage: 15 {
|
||||
--tag-$(tagname)-color: $(color);
|
||||
--tag-$(tagname)-border-color: hsl(from $color h s calc(l + $border-percentage));
|
||||
--tag-$(tagname)-text-color: hsl(from $color h s calc(l + $text-percentage));
|
||||
}
|
||||
|
||||
@define-mixin type-color $type, $color {
|
||||
--$(type)-color: $color;
|
||||
--$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 10));
|
||||
--$(type)-muted-color: hsl(from $color h calc(s - 10) calc(l - 7));
|
||||
--$(type)-dark-color: hsl(from $color h calc(s - 30) calc(l - 11));
|
||||
--$(type)-link-color: hsl(from $color h calc(s + 10) calc(l + 45));
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-color: $text-color;
|
||||
--text-light-color: $text-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 10) calc(l + 40));
|
||||
--link-hover-color: $text-color;
|
||||
|
||||
/* Primary color (block backgrounds and such) */
|
||||
--primary-color: $primary-color;
|
||||
|
|
@ -66,38 +24,4 @@ $spoiler-color: #0f0f0f;
|
|||
--secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 25));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
|
||||
|
||||
/* Interaction (vote) colors */
|
||||
--upvote-color: $upvote-color;
|
||||
--downvote-color: $downvote-color;
|
||||
--fave-color: $fave-color;
|
||||
--comment-color: $comment-color;
|
||||
--hide-color: $hide-color;
|
||||
|
||||
/* Spoiler colors */
|
||||
--spoiler-color: $spoiler-color;
|
||||
--spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
|
||||
|
||||
/* The invisible color */
|
||||
--invisible-color: #00000000;
|
||||
|
||||
/* Type (information category) colors */
|
||||
@mixin type-color success, $success-color;
|
||||
@mixin type-color warning, $warning-color;
|
||||
@mixin type-color danger, $danger-color;
|
||||
@mixin type-color information, $information-color;
|
||||
@mixin type-color special, $special-color;
|
||||
|
||||
/* Tag colors */
|
||||
@mixin tag-color default, $tag-default-color;
|
||||
@mixin tag-color error, $tag-error-color, 37;
|
||||
@mixin tag-color rating, $tag-rating-color, 37;
|
||||
@mixin tag-color origin, $tag-origin-color, 42;
|
||||
@mixin tag-color character, $tag-character-color;
|
||||
@mixin tag-color oc, $tag-oc-color, 40;
|
||||
@mixin tag-color species, $tag-species-color, 37;
|
||||
@mixin tag-color body-type, $tag-body-type-color, 45, 12;
|
||||
@mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
|
||||
@mixin tag-color content-official, $tag-content-official-color;
|
||||
@mixin tag-color spoiler, $tag-spoiler-color;
|
||||
}
|
||||
|
|
|
|||
31
assets/css/themes/dark-green.css
Normal file
31
assets/css/themes/dark-green.css
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
@import "themes/base/dark";
|
||||
|
||||
$background-color: #131513;
|
||||
$primary-color: #235c36;
|
||||
$secondary-color: #3f7a64;
|
||||
$success-color: #1c7843;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s - 10) calc(l + 40));
|
||||
|
||||
/* Primary color (block backgrounds and such) */
|
||||
--primary-color: $primary-color;
|
||||
--primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
|
||||
--primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 10));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 15));
|
||||
--primary-link-color: var(--link-color); /* for consistency */
|
||||
|
||||
/* Secondary color (most buttons) */
|
||||
--secondary-color: $secondary-color;
|
||||
--secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
|
||||
--secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 23));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
|
||||
|
||||
/* Type (information category) colors */
|
||||
@mixin type-color success, $success-color;
|
||||
}
|
||||
|
|
@ -1,57 +1,15 @@
|
|||
$background-color: #15121a;
|
||||
$text-color: #e0e0e0;
|
||||
@import "themes/base/dark";
|
||||
|
||||
$background-color: #15121a;
|
||||
$primary-color: #36274e;
|
||||
$secondary-color: #785b99;
|
||||
$danger-color: #6d2a20;
|
||||
$warning-color: #715227;
|
||||
$success-color: #25603e;
|
||||
$information-color: #1c606a;
|
||||
$special-color: #65206e;
|
||||
|
||||
$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;
|
||||
|
||||
@define-mixin tag-color $tagname, $color, $text-percentage: 35, $border-percentage: 15 {
|
||||
--tag-$(tagname)-color: $(color);
|
||||
--tag-$(tagname)-border-color: hsl(from $color h s calc(l + $border-percentage));
|
||||
--tag-$(tagname)-text-color: hsl(from $color h s calc(l + $text-percentage));
|
||||
}
|
||||
|
||||
@define-mixin type-color $type, $color {
|
||||
--$(type)-color: $color;
|
||||
--$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 10));
|
||||
--$(type)-muted-color: hsl(from $color h calc(s - 10) calc(l - 7));
|
||||
--$(type)-dark-color: hsl(from $color h calc(s - 30) calc(l - 11));
|
||||
--$(type)-link-color: hsl(from $color h calc(s + 10) calc(l + 45));
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-color: $text-color;
|
||||
--text-light-color: $text-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 10) calc(l + 50));
|
||||
--link-hover-color: $text-color;
|
||||
|
||||
/* Primary color (block backgrounds and such) */
|
||||
--primary-color: $primary-color;
|
||||
|
|
@ -66,38 +24,4 @@ $spoiler-color: #0f0f0f;
|
|||
--secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 25));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
|
||||
|
||||
/* Interaction (vote) colors */
|
||||
--upvote-color: $upvote-color;
|
||||
--downvote-color: $downvote-color;
|
||||
--fave-color: $fave-color;
|
||||
--comment-color: $comment-color;
|
||||
--hide-color: $hide-color;
|
||||
|
||||
/* Spoiler colors */
|
||||
--spoiler-color: $spoiler-color;
|
||||
--spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
|
||||
|
||||
/* The invisible color */
|
||||
--invisible-color: #00000000;
|
||||
|
||||
/* Type (information category) colors */
|
||||
@mixin type-color success, $success-color;
|
||||
@mixin type-color warning, $warning-color;
|
||||
@mixin type-color danger, $danger-color;
|
||||
@mixin type-color information, $information-color;
|
||||
@mixin type-color special, $special-color;
|
||||
|
||||
/* Tag colors */
|
||||
@mixin tag-color default, $tag-default-color;
|
||||
@mixin tag-color error, $tag-error-color, 37;
|
||||
@mixin tag-color rating, $tag-rating-color, 37;
|
||||
@mixin tag-color origin, $tag-origin-color, 42;
|
||||
@mixin tag-color character, $tag-character-color;
|
||||
@mixin tag-color oc, $tag-oc-color, 40;
|
||||
@mixin tag-color species, $tag-species-color, 37;
|
||||
@mixin tag-color body-type, $tag-body-type-color, 45, 12;
|
||||
@mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
|
||||
@mixin tag-color content-official, $tag-content-official-color;
|
||||
@mixin tag-color spoiler, $tag-spoiler-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +1,16 @@
|
|||
$background-color: #f7f7f7;
|
||||
$text-color: #121212;
|
||||
@import "themes/base/light";
|
||||
|
||||
$background-color: #f7f7f7;
|
||||
$primary-color: #4b9ad3;
|
||||
$secondary-color: #62a7d9;
|
||||
$danger-color: #e78f82;
|
||||
$warning-color: #edb76c;
|
||||
$success-color: #8de3b1;
|
||||
$information-color: #90dce7;
|
||||
$special-color: #dc77e9;
|
||||
|
||||
$upvote-color: #67af2b;
|
||||
$downvote-color: #cf0001;
|
||||
$fave-color: #c4b246;
|
||||
$comment-color: #9273d0;
|
||||
$hide-color: #cf0001;
|
||||
|
||||
$tag-default-color: #84dd96;
|
||||
$tag-error-color: #eb848c;
|
||||
$tag-rating-color: #9cc6f0;
|
||||
$tag-origin-color: #b5b0ed;
|
||||
$tag-character-color: #b6e4ed;
|
||||
$tag-oc-color: #efaaf2;
|
||||
$tag-species-color: #e1997a;
|
||||
$tag-body-type-color: #bcbcbc;
|
||||
$tag-content-fanmade-color: #e388c2;
|
||||
$tag-content-official-color: #ebe9b3;
|
||||
$tag-spoiler-color: #dcb879;
|
||||
|
||||
$spoiler-color: #0f0f0f;
|
||||
|
||||
@define-mixin tag-color $tagname, $color, $text-percentage: 40, $border-percentage: 15 {
|
||||
--tag-$(tagname)-color: $(color);
|
||||
--tag-$(tagname)-border-color: hsl(from $color h s calc(l - $border-percentage));
|
||||
--tag-$(tagname)-text-color: hsl(from $color h s calc(l - $text-percentage));
|
||||
}
|
||||
|
||||
@define-mixin type-color $type, $color {
|
||||
--$(type)-color: $color;
|
||||
--$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 5));
|
||||
--$(type)-muted-color: hsl(from $color h calc(s - 7) calc(l - 12));
|
||||
--$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l + 20));
|
||||
--$(type)-link-color: hsl(from $color h calc(s + 50) calc(l - 47));
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-color: $text-color;
|
||||
--text-light-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 25) calc(l - 25));
|
||||
--link-hover-color: $text-color;
|
||||
|
||||
/* Primary color (block backgrounds and such) */
|
||||
--primary-color: $primary-color;
|
||||
|
|
@ -66,58 +25,14 @@ $spoiler-color: #0f0f0f;
|
|||
--secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 25));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
|
||||
/* Interaction (vote) colors */
|
||||
--upvote-color: $upvote-color;
|
||||
--downvote-color: $downvote-color;
|
||||
--fave-color: $fave-color;
|
||||
--comment-color: $comment-color;
|
||||
--hide-color: $hide-color;
|
||||
|
||||
/* Spoiler colors */
|
||||
--spoiler-color: $spoiler-color;
|
||||
--spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
|
||||
|
||||
/* The invisible color */
|
||||
--invisible-color: #00000000;
|
||||
|
||||
/* Type (information category) colors */
|
||||
@mixin type-color success, $success-color;
|
||||
@mixin type-color warning, $warning-color;
|
||||
@mixin type-color danger, $danger-color;
|
||||
@mixin type-color information, $information-color;
|
||||
@mixin type-color special, $special-color;
|
||||
|
||||
/* Tag colors */
|
||||
@mixin tag-color default, $tag-default-color;
|
||||
@mixin tag-color error, $tag-error-color, 37;
|
||||
@mixin tag-color rating, $tag-rating-color, 37;
|
||||
@mixin tag-color origin, $tag-origin-color, 42;
|
||||
@mixin tag-color character, $tag-character-color;
|
||||
@mixin tag-color oc, $tag-oc-color, 40;
|
||||
@mixin tag-color species, $tag-species-color, 37;
|
||||
@mixin tag-color body-type, $tag-body-type-color, 45, 12;
|
||||
@mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
|
||||
@mixin tag-color content-official, $tag-content-official-color;
|
||||
@mixin tag-color spoiler, $tag-spoiler-color;
|
||||
}
|
||||
|
||||
header {
|
||||
nav.header__secondary {
|
||||
/* Apparently people will put me on a cross if
|
||||
I don't use Trixie colors, so here you go! */
|
||||
background-color: #e2ebf2;
|
||||
}
|
||||
|
||||
/* Sigh... my poor poor pretty CSS... */
|
||||
.header__search {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.header__search * {
|
||||
color: var(--text-light-color) !important;
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.header__search > .input:hover {
|
||||
nav.header__secondary .header__link {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
|
|
|||
32
assets/css/themes/light-green.css
Normal file
32
assets/css/themes/light-green.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
@import "themes/base/light";
|
||||
|
||||
$background-color: #f7f7f7;
|
||||
$primary-color: #43b268;
|
||||
$secondary-color: #88c3ac;
|
||||
$success-color: #6be49d;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-light-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h s calc(l - 12));
|
||||
|
||||
/* Primary color (block backgrounds and such) */
|
||||
--primary-color: $primary-color;
|
||||
--primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
|
||||
--primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 35));
|
||||
--primary-dark-color: hsl(from $primary-color h s calc(l + 45));
|
||||
--primary-link-color: var(--link-color); /* for consistency */
|
||||
|
||||
/* Secondary color (most buttons) */
|
||||
--secondary-color: $secondary-color;
|
||||
--secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
|
||||
--secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s + 5) calc(l + 23));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
|
||||
/* Type (information category) colors */
|
||||
@mixin type-color success, $success-color;
|
||||
}
|
||||
28
assets/css/themes/light-purple.css
Normal file
28
assets/css/themes/light-purple.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
@import "themes/base/light";
|
||||
|
||||
$background-color: #f7f7f7;
|
||||
$primary-color: #9c72e0;
|
||||
$secondary-color: #9f74cf;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-light-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h s calc(l - 7));
|
||||
|
||||
/* Primary color (block backgrounds and such) */
|
||||
--primary-color: $primary-color;
|
||||
--primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
|
||||
--primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 20));
|
||||
--primary-dark-color: hsl(from $primary-color h s calc(l + 28));
|
||||
--primary-link-color: var(--link-color); /* for consistency */
|
||||
|
||||
/* Secondary color (most buttons) */
|
||||
--secondary-color: $secondary-color;
|
||||
--secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
|
||||
--secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s + 5) calc(l + 23));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
}
|
||||
Loading…
Reference in a new issue