Adds Dracula and Dark Dimmed themes
This commit is contained in:
FatCat Client
parent
0d3d111f8c
commit
abe49e0c5b
|
|
@ -35,6 +35,11 @@ sup {
|
|||
|
||||
$theme-is-dark: false !default;
|
||||
|
||||
input:checked {
|
||||
accent-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "OpenMojiDemoFont";
|
||||
//The url is checked from the theme file, so we have to use this absolutely bonkers relative path.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
@import "~bootstrap/scss/functions";
|
||||
@import "../../functions";
|
||||
@import "../variables/dark_dimmed_variables";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "../../flist_derived";
|
||||
@import "../variables/default_derived";
|
||||
|
||||
// Apply variables to theme.
|
||||
@import "../chat";
|
||||
|
||||
* {
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 2px $card-border-color;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
|
||||
background-color: $gray-300;
|
||||
&:hover {
|
||||
background-color: $gray-500;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colorblindMode {
|
||||
@import "../colorblind";
|
||||
@import "../../rising";
|
||||
|
||||
@each $varName, $value in $risingVariables {
|
||||
--#{$varName}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
//@import "../../util/accecss";
|
||||
//
|
||||
//@include accecss(
|
||||
// 'html body',
|
||||
// false,
|
||||
// false,
|
||||
// tritanopia
|
||||
//);
|
||||
|
||||
// deuteranomaly
|
||||
// protanomaly
|
||||
// protanopia
|
||||
// deuteranopia
|
||||
// tritanomaly
|
||||
// tritanopia
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
@import "~bootstrap/scss/functions";
|
||||
@import "../../functions";
|
||||
@import "../variables/dracula_variables";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "../../flist_derived";
|
||||
@import "../variables/dracula_derived";
|
||||
|
||||
// Apply variables to theme.
|
||||
@import "../chat";
|
||||
|
||||
* {
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 2px $card-border-color;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
|
||||
background-color: $gray-300;
|
||||
&:hover {
|
||||
background-color: $gray-500;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$genders: (
|
||||
"shemale": $dracula-purple,
|
||||
"herm": lighten(saturate($dracula-purple, 0.36), 10.78),
|
||||
"none": $dracula-comment,
|
||||
"female": $dracula-pink,
|
||||
"male": $dracula-cyan,
|
||||
"male-herm": darken(saturate($dracula-cyan, 0.45), 36.86),
|
||||
"transgender": $dracula-orange,
|
||||
"cunt-boy": $dracula-green
|
||||
);
|
||||
|
||||
$red-color: $dracula-red;
|
||||
$green-color: $dracula-green;
|
||||
$blue-color: darken(saturate($dracula-cyan, 0.45), 36.86);
|
||||
$yellow-color: $dracula-yellow;
|
||||
$purple-color: lighten(saturate($dracula-purple, 0.36), 10.78);
|
||||
$cyan-color: $dracula-cyan;
|
||||
$white-color: $dracula-foreground;
|
||||
$black-color: #000;
|
||||
$brown-color: #8a6d3b;
|
||||
$pink-color: $dracula-pink;
|
||||
$gray-color: #ccc;
|
||||
$orange-color: $dracula-orange;
|
||||
|
||||
.btn-primary, .btn-primary:hover, .list-group-item.active {
|
||||
color: $dracula-bg;
|
||||
}
|
||||
|
||||
@each $gender, $color in $genders {
|
||||
.gender-#{$gender} {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.message-event .gender-#{$gender} {
|
||||
color: lighten($color, 5%)
|
||||
}
|
||||
}
|
||||
|
||||
.colorblindMode {
|
||||
@import "../colorblind";
|
||||
@import "../../rising";
|
||||
|
||||
@each $varName, $value in $risingVariables {
|
||||
--#{$varName}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import "~bootstrap/scss/functions";
|
||||
@import "../../functions";
|
||||
@import "../variables/dracula_variables";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "../../flist_derived";
|
||||
@import "../variables/dracula_derived";
|
||||
|
||||
// Apply variables to theme.
|
||||
@import "../site";
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import "~bootstrap/scss/functions";
|
||||
@import "../../functions";
|
||||
@import "../variables/default_variables";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "../../flist_derived";
|
||||
@import "../variables/default_derived";
|
||||
|
||||
// Apply variables to theme.
|
||||
@import "../site";
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
// Base colors, used for pretty much everything.
|
||||
// On dark based themes these are inverted in order to cooperate with bootstrap which assumes that all themes are light based.
|
||||
$gray-base: #0d0d0d;
|
||||
$white: $gray-base;
|
||||
$gray-100: lighten($gray-base, 10%);
|
||||
$gray-200: lighten($gray-base, 20%);
|
||||
$gray-300: lighten($gray-base, 30%);
|
||||
$gray-400: lighten($gray-base, 40%);
|
||||
$gray-500: lighten($gray-base, 50%);
|
||||
$gray-600: lighten($gray-base, 60%);
|
||||
$gray-700: lighten($gray-base, 70%);
|
||||
$gray-800: lighten($gray-base, 80%);
|
||||
$gray-900: lighten($gray-base, 90%);
|
||||
$black: #fff;
|
||||
|
||||
// Theme and brand colors
|
||||
$primary: rgb(89, 89, 89);
|
||||
$secondary: $gray-400;
|
||||
$success: darken(#009900, 5%);
|
||||
$info: #0447af;
|
||||
$warning: #f29c00;
|
||||
$danger: #930300;
|
||||
$light: $gray-200;
|
||||
$text-muted: $gray-500;
|
||||
$text-dark: $gray-600;
|
||||
$component-active-color: $gray-900;
|
||||
|
||||
// Core page element colors
|
||||
$body-bg: $gray-100;
|
||||
$link-color: $gray-800;
|
||||
$link-hover-color: lighten($link-color, 15%);
|
||||
$dropdown-bg: $gray-200;
|
||||
$dropdown-divider-bg: $gray-300;
|
||||
|
||||
// Modal Dialogs
|
||||
$modal-backdrop-bg: $white;
|
||||
$modal-content-bg: $gray-100;
|
||||
$modal-header-border-color: $gray-300;
|
||||
|
||||
// Fix YIQ(automatic text contrast) preferring black over white on dark themes.
|
||||
$yiq-text-light: $gray-800;
|
||||
|
||||
// Reduce default padding slightly between columns in grids.
|
||||
$grid-gutter-width: 20px;
|
||||
|
||||
// Form Elements
|
||||
$input-bg: $gray-200;
|
||||
$input-color: $black;
|
||||
$custom-select-bg: $gray-200;
|
||||
|
||||
// List groups
|
||||
$list-group-bg: $gray-200;
|
||||
|
||||
// Pagination
|
||||
$pagination-active-color: $link-color;
|
||||
|
||||
// F-List specific color helpers to help make monochromatic themes easier to deal with.
|
||||
$text-background-color: $gray-200;
|
||||
$text-background-color-disabled: $gray-100;
|
||||
|
||||
// F-List Rising
|
||||
$scoreUnicornMatchBg: rgb(0, 173, 173);
|
||||
$scoreUnicornMatchFg: rgb(29, 154, 154);
|
||||
$scoreMatchBg: rgb(0, 142, 0);
|
||||
$scoreMatchFg: rgb(0, 113, 0);
|
||||
$scoreWeakMatchBg: rgb(0, 80, 0);
|
||||
$scoreWeakMatchFg: rgb(0, 64, 0);
|
||||
$scoreWeakMismatchBg: rgb(152, 134, 0);
|
||||
$scoreWeakMismatchFg: rgb(142, 126, 0);
|
||||
$scoreMismatchBg: rgb(171, 0, 0);
|
||||
$scoreMismatchFg: rgb(128, 0, 0);
|
||||
$scoreTitleColor: white;
|
||||
$scoreMinimizeButtonFg: rgba(255, 255, 255, 0.7);
|
||||
$scoreMinimizeButtonBg: rgba(0,0,0,0.2);
|
||||
$scoreReportBg: rgba(0,0,0,0.2);
|
||||
|
||||
$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
|
||||
$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
|
||||
$scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
|
||||
$scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
|
||||
$scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
|
||||
$scoreFadedWeakMatchFg: adjust-color($scoreWeakMatchFg, $alpha: -0.6);
|
||||
$scoreFadedWeakMismatchBg: adjust-color($scoreWeakMismatchBg, $alpha: -0.6);
|
||||
$scoreFadedWeakMismatchFg: adjust-color($scoreWeakMismatchFg, $alpha: -0.6);
|
||||
$scoreFadedMismatchBg: adjust-color($scoreMismatchBg, $alpha: -0.6);
|
||||
$scoreFadedMismatchFg: adjust-color($scoreMismatchFg, $alpha: -0.6);
|
||||
|
||||
$scoreStandoutMatchBorderColor: #048a04;
|
||||
$scoreStandoutMatchBgColor: rgba(0, 110, 0, 0.47);
|
||||
$scoreStandoutWeakMatchBorderColor: #014a01;
|
||||
$scoreStandoutWeakMatchBgColor: rgba(0, 79, 0, 0.4);
|
||||
$scoreStandoutNeutralBorderColor: #555;
|
||||
$scoreStandoutWeakMismatchBorderColor: rgb(138, 123, 0);
|
||||
$scoreStandoutWeakMismatchBgColor: rgba(208, 188, 0, 0.0);
|
||||
$scoreStandoutMismatchBorderColor: #841a1a;
|
||||
|
||||
$characterImageWrapperBg: rgba(0,0,0, 0.2);
|
||||
$characterGuestbookPostBg: rgba(0,0,0,0.15);
|
||||
$characterGuestbookPostBorderColor: rgba(255, 255, 255, 0.1);
|
||||
$characterGuestbookReplyBg: rgba(0,0,0, 0.1);
|
||||
$characterGuestbookTimestampFg: rgba(255, 255, 255, 0.3);
|
||||
$characterKinkCustomColor: #f2cd00;
|
||||
$characterKinkCustomBorderColor: rgba(255, 255, 255, 0.1);
|
||||
$characterKinkStockColor: #ededf6;
|
||||
$characterKinkStockHighlightedColor: #ffffff;
|
||||
$characterInfotagColor: rgba(255, 255, 255, 0.7);
|
||||
|
||||
$messageTimeBgColor: #4f4f61;
|
||||
$messageTimeFgColor: #dadada;
|
||||
|
||||
$headerBackgroundMaskColor: $gray-200;
|
||||
|
||||
$linkForcedColor: $gray-200;
|
||||
$tabSecondaryFgColor: rgba(255, 255, 255, 0.5);
|
||||
|
||||
|
||||
@import "invert";
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
$blue-color: $blue-color;
|
||||
|
||||
.blackText {
|
||||
@include text-outline($gray-600);
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
//Dracula colors
|
||||
$dracula-purple: #BD93F9;
|
||||
$dracula-bg: #282A36;
|
||||
$dracula-current-line: #44475A;
|
||||
$dracula-foreground: #F8F8F2;
|
||||
$dracula-comment: #6272A4;
|
||||
$dracula-cyan: #8BE9FD;
|
||||
$dracula-green: #50FA7B;
|
||||
$dracula-orange: #FFB86C;
|
||||
$dracula-pink: #FF79C6;
|
||||
$dracula-purple: #BD93F9;
|
||||
$dracula-red: #FF5555;
|
||||
$dracula-yellow: #F1FA8C;
|
||||
|
||||
// Base colors, used for pretty much everything.
|
||||
// On dark based themes these are inverted in order to cooperate with bootstrap which assumes that all themes are light based.
|
||||
$gray-base: darken($dracula-bg, 10%);
|
||||
$white: $gray-base;
|
||||
$gray-100: lighten($gray-base, 10%);
|
||||
$gray-200: lighten($gray-base, 20%);
|
||||
$gray-300: lighten($gray-base, 30%);
|
||||
$gray-400: lighten($gray-base, 40%);
|
||||
$gray-500: lighten($gray-base, 50%);
|
||||
$gray-600: lighten($gray-base, 60%);
|
||||
$gray-700: lighten($gray-base, 70%);
|
||||
$gray-800: lighten($gray-base, 80%);
|
||||
$gray-900: lighten($gray-base, 90%);
|
||||
$black: $dracula-foreground;
|
||||
|
||||
// Theme and brand colors
|
||||
$primary: $dracula-purple;
|
||||
$secondary: $gray-400;
|
||||
$success: $dracula-green;
|
||||
$info: $dracula-comment;
|
||||
$warning: $dracula-orange;
|
||||
$danger: $dracula-red;
|
||||
$light: $gray-200;
|
||||
$text-muted: $gray-500;
|
||||
$text-dark: $gray-600;
|
||||
$component-active-color: $gray-900;
|
||||
|
||||
|
||||
|
||||
// Core page element colors
|
||||
$body-bg: $gray-100;
|
||||
$link-color: $black;
|
||||
$link-hover-color: lighten($link-color, 15%);
|
||||
$dropdown-bg: $gray-200;
|
||||
$dropdown-divider-bg: $gray-300;
|
||||
|
||||
// Modal Dialogs
|
||||
$modal-backdrop-bg: $white;
|
||||
$modal-content-bg: $gray-100;
|
||||
$modal-header-border-color: $gray-300;
|
||||
|
||||
// Fix YIQ(automatic text contrast) preferring black over white on dark themes.
|
||||
$yiq-text-light: $black;
|
||||
|
||||
// Reduce default padding slightly between columns in grids.
|
||||
$grid-gutter-width: 20px;
|
||||
|
||||
// Form Elements
|
||||
$input-bg: $gray-200;
|
||||
$input-color: $black;
|
||||
$custom-select-bg: $gray-200;
|
||||
$form-check-input-checked-bg-color: $primary;
|
||||
|
||||
// List groups
|
||||
$list-group-bg: $gray-200;
|
||||
|
||||
// Pagination
|
||||
$pagination-active-color: $link-color;
|
||||
|
||||
// F-List specific color helpers to help make monochromatic themes easier to deal with.
|
||||
$text-background-color: $gray-200;
|
||||
$text-background-color-disabled: $gray-100;
|
||||
|
||||
// F-List Rising
|
||||
$scoreUnicornMatchBg: rgb(0, 173, 173);
|
||||
$scoreUnicornMatchFg: rgb(29, 154, 154);
|
||||
$scoreMatchBg: rgb(0, 142, 0);
|
||||
$scoreMatchFg: rgb(0, 113, 0);
|
||||
$scoreWeakMatchBg: rgb(0, 80, 0);
|
||||
$scoreWeakMatchFg: rgb(0, 64, 0);
|
||||
$scoreWeakMismatchBg: rgb(152, 134, 0);
|
||||
$scoreWeakMismatchFg: rgb(142, 126, 0);
|
||||
$scoreMismatchBg: rgb(171, 0, 0);
|
||||
$scoreMismatchFg: rgb(128, 0, 0);
|
||||
$scoreTitleColor: white;
|
||||
$scoreMinimizeButtonFg: set-alpha($dracula-foreground,0.7);
|
||||
$scoreMinimizeButtonBg: rgba(0,0,0,0.2);
|
||||
$scoreReportBg: rgba(0,0,0,0.2);
|
||||
|
||||
$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
|
||||
$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
|
||||
$scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
|
||||
$scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
|
||||
$scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
|
||||
$scoreFadedWeakMatchFg: adjust-color($scoreWeakMatchFg, $alpha: -0.6);
|
||||
$scoreFadedWeakMismatchBg: adjust-color($scoreWeakMismatchBg, $alpha: -0.6);
|
||||
$scoreFadedWeakMismatchFg: adjust-color($scoreWeakMismatchFg, $alpha: -0.6);
|
||||
$scoreFadedMismatchBg: adjust-color($scoreMismatchBg, $alpha: -0.6);
|
||||
$scoreFadedMismatchFg: adjust-color($scoreMismatchFg, $alpha: -0.6);
|
||||
|
||||
$scoreStandoutMatchBorderColor: $dracula-green;
|
||||
$scoreStandoutMatchBgColor: set-alpha(darken(saturate($dracula-green, 5.63), 5.88), 0.471);
|
||||
$scoreStandoutWeakMatchBorderColor: #014a01;
|
||||
$scoreStandoutWeakMatchBgColor: rgba(0, 79, 0, 0.4);
|
||||
$scoreStandoutNeutralBorderColor: $gray-100;
|
||||
$scoreStandoutWeakMismatchBorderColor: #8a7b00;
|
||||
$scoreStandoutWeakMismatchBgColor: rgba(208, 188, 0, 0.0);
|
||||
$scoreStandoutMismatchBorderColor: #841a1a;
|
||||
|
||||
$characterImageWrapperBg: rgba(0,0,0, 0.2);
|
||||
$characterGuestbookPostBg: rgba(0,0,0,0.15);
|
||||
$characterGuestbookPostBorderColor: rgba(255, 255, 255, 0.1);
|
||||
$characterGuestbookReplyBg: rgba(0,0,0, 0.1);
|
||||
$characterGuestbookTimestampFg: rgba(255, 255, 255, 0.3);
|
||||
$characterKinkCustomColor: $dracula-yellow;
|
||||
$characterKinkCustomBorderColor: rgba(255, 255, 255, 0.1);
|
||||
$characterKinkStockColor: #ededf6;
|
||||
$characterKinkStockHighlightedColor: #ffffff;
|
||||
$characterInfotagColor: rgba(255, 255, 255, 0.7);
|
||||
|
||||
$messageTimeBgColor: $dracula-current-line;
|
||||
$messageTimeFgColor: $dracula-foreground;
|
||||
|
||||
$headerBackgroundMaskColor: $gray-200;
|
||||
|
||||
$linkForcedColor: $dracula-foreground;
|
||||
$tabSecondaryFgColor: set-alpha($dracula-foreground, 0.5);
|
||||
|
||||
|
||||
@import "invert";
|
||||
Loading…
Reference in New Issue