135 lines
4.4 KiB
SCSS
135 lines
4.4 KiB
SCSS
//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";
|