mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-27 13:47:58 +01:00
the remaining themes
This commit is contained in:
parent
7bb79bc17f
commit
774072945a
12 changed files with 366 additions and 0 deletions
27
assets/css/themes/dark-cyan.css
Normal file
27
assets/css/themes/dark-cyan.css
Normal file
|
@ -0,0 +1,27 @@
|
|||
@import "themes/base/dark";
|
||||
|
||||
$background-color: #0c1519;
|
||||
$primary-color: #28728f;
|
||||
$secondary-color: #4a8486;
|
||||
|
||||
: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 - 15));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 25));
|
||||
--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 - 20));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
|
||||
}
|
27
assets/css/themes/dark-orange.css
Normal file
27
assets/css/themes/dark-orange.css
Normal file
|
@ -0,0 +1,27 @@
|
|||
@import "themes/base/dark";
|
||||
|
||||
$background-color: #1b1511;
|
||||
$primary-color: #8c4010;
|
||||
$secondary-color: #a1654d;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 15) 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 - 5) calc(l - 14));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 19));
|
||||
--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 - 15));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s + 10) calc(l - 28));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
|
||||
}
|
27
assets/css/themes/dark-pink.css
Normal file
27
assets/css/themes/dark-pink.css
Normal file
|
@ -0,0 +1,27 @@
|
|||
@import "themes/base/dark";
|
||||
|
||||
$background-color: #1a0f14;
|
||||
$primary-color: #871647;
|
||||
$secondary-color: #7e4953;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 20) 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 - 12));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 19));
|
||||
--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 - 20));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
|
||||
}
|
27
assets/css/themes/dark-red.css
Normal file
27
assets/css/themes/dark-red.css
Normal file
|
@ -0,0 +1,27 @@
|
|||
@import "themes/base/dark";
|
||||
|
||||
$background-color: #1a1212;
|
||||
$primary-color: #842c2c;
|
||||
$secondary-color: #99685b;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 10) calc(l + 50));
|
||||
|
||||
/* 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 - 11));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 18));
|
||||
--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 - 25));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
|
||||
}
|
27
assets/css/themes/dark-silver.css
Normal file
27
assets/css/themes/dark-silver.css
Normal file
|
@ -0,0 +1,27 @@
|
|||
@import "themes/base/dark";
|
||||
|
||||
$background-color: #131618;
|
||||
$primary-color: #36454f;
|
||||
$secondary-color: #444444;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s - 15) 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 - 14));
|
||||
--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 - 5));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 10));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
|
||||
}
|
27
assets/css/themes/dark-yellow.css
Normal file
27
assets/css/themes/dark-yellow.css
Normal file
|
@ -0,0 +1,27 @@
|
|||
@import "themes/base/dark";
|
||||
|
||||
$background-color: #191810;
|
||||
$primary-color: #7a7200;
|
||||
$secondary-color: #7e6b36;
|
||||
|
||||
: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 - 16));
|
||||
--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 - 10));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 15));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
|
||||
}
|
36
assets/css/themes/light-cyan.css
Normal file
36
assets/css/themes/light-cyan.css
Normal file
|
@ -0,0 +1,36 @@
|
|||
@import "themes/base/light";
|
||||
|
||||
$background-color: #f7f7f7;
|
||||
$primary-color: #5bcefa;
|
||||
$secondary-color: #74c7c7;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-light-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 25) calc(l - 35));
|
||||
|
||||
/* 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 + 22));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 29));
|
||||
--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 + 22));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
}
|
||||
|
||||
.header__link {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
nav.header__secondary .header__link {
|
||||
color: var(--text-color) !important;
|
||||
}
|
28
assets/css/themes/light-orange.css
Normal file
28
assets/css/themes/light-orange.css
Normal file
|
@ -0,0 +1,28 @@
|
|||
@import "themes/base/light";
|
||||
|
||||
$background-color: #f7f7f7;
|
||||
$primary-color: #f48906;
|
||||
$secondary-color: #e2a344;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-light-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 10) calc(l - 25));
|
||||
|
||||
/* 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 + 33));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 44));
|
||||
--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 + 14));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 20));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
}
|
36
assets/css/themes/light-pink.css
Normal file
36
assets/css/themes/light-pink.css
Normal file
|
@ -0,0 +1,36 @@
|
|||
@import "themes/base/light";
|
||||
|
||||
$background-color: #f7f7f7;
|
||||
$primary-color: #f5a9b8;
|
||||
$secondary-color: #cd6994;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-light-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 20) calc(l - 35));
|
||||
|
||||
/* 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 + 10) calc(l + 9));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 14));
|
||||
--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 + 25));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
}
|
||||
|
||||
.header__link {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
nav.header__secondary .header__link {
|
||||
color: var(--text-color) !important;
|
||||
}
|
32
assets/css/themes/light-red.css
Normal file
32
assets/css/themes/light-red.css
Normal file
|
@ -0,0 +1,32 @@
|
|||
@import "themes/base/light";
|
||||
|
||||
$background-color: #f7f7f7;
|
||||
$primary-color: #e35a5a;
|
||||
$secondary-color: #ea7363;
|
||||
$danger-color: #df5858;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-light-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 10) calc(l - 25));
|
||||
|
||||
/* 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 + 22));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 32));
|
||||
--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 + 14));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 20));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
|
||||
/* Type (information category) colors */
|
||||
@mixin type-color danger, $danger-color;
|
||||
}
|
36
assets/css/themes/light-silver.css
Normal file
36
assets/css/themes/light-silver.css
Normal file
|
@ -0,0 +1,36 @@
|
|||
@import "themes/base/light";
|
||||
|
||||
$background-color: #f7f7f7;
|
||||
$primary-color: #c0c0c0; /* i'm a chicken :D */
|
||||
$secondary-color: #c7c7c7;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-light-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h s calc(l - 50));
|
||||
|
||||
/* Primary color (block backgrounds and such) */
|
||||
--primary-color: $primary-color;
|
||||
--primary-border-color: hsl(from $primary-color h s calc(l - 5));
|
||||
--primary-muted-color: hsl(from $primary-color h s calc(l + 10));
|
||||
--primary-dark-color: hsl(from $primary-color h s calc(l + 17));
|
||||
--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 s calc(l + 2));
|
||||
--secondary-dark-color: hsl(from $secondary-color h s calc(l + 5));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
}
|
||||
|
||||
.header__link {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
nav.header__secondary .header__link {
|
||||
color: var(--text-color) !important;
|
||||
}
|
36
assets/css/themes/light-yellow.css
Normal file
36
assets/css/themes/light-yellow.css
Normal file
|
@ -0,0 +1,36 @@
|
|||
@import "themes/base/light";
|
||||
|
||||
$background-color: #f7f7f7;
|
||||
$primary-color: #efe00a;
|
||||
$secondary-color: #cac467;
|
||||
|
||||
:root {
|
||||
/* Main colors */
|
||||
--background-color: $background-color;
|
||||
--text-light-color: $background-color;
|
||||
|
||||
/* Link colors */
|
||||
--link-color: hsl(from $primary-color h calc(s + 45) calc(l - 32));
|
||||
|
||||
/* 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 + 27));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s + 10) calc(l + 46));
|
||||
--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 + 22));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
}
|
||||
|
||||
.header__link {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
nav.header__secondary .header__link {
|
||||
color: var(--text-color) !important;
|
||||
}
|
Loading…
Reference in a new issue