kittyfangs
/
fchat-rising
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dark and light theme support

This commit is contained in:
Mr. Stallion 2020-04-03 18:48:39 -05:00
parent 859151750c
commit c40b507a67
16 changed files with 306 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
chat/CharacterSearchHistory.vue
View File

@ -115,15 +115,20 @@
} }
.form-row:hover { .form-row:hover {
background-color: #20203e; // background-color: #20203e;
border: 1px solid #2d2d6b; // border: 1px solid #2d2d6b;
backdrop-filter: invert(30%) !important;
border-radius: 2px; border-radius: 2px;
} }
.selected-row, .selected-row,
.form-row.selected-row:hover { .form-row.selected-row:hover {
background-color: #343461; /*background-color: #343461;*/
border: 1px solid #6565b2; /*border: 1px solid #6565b2;*/
backdrop-filter: invert(20%) !important;
border-radius: 2px; border-radius: 2px;
} }
} }

38
chat/ConversationView.vue
View File

@ -613,7 +613,7 @@
a.btn { a.btn {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
color: #cbcbe5; // color: #cbcbe5;
i { i {
margin-right: 0.4rem; margin-right: 0.4rem;
@ -731,8 +731,8 @@
.message-time, .message-time,
.message .message-time, .message .message-time,
.ad-viewer .message-time { .ad-viewer .message-time {
background-color: #4f4f61; background-color: var(--messageTimeBgColor);
color: #dadada; color: var(--messageTimeFgColor);
border-radius: 3px; border-radius: 3px;
padding-left: 3px; padding-left: 3px;
padding-right: 3px; padding-right: 3px;
@ -775,23 +775,23 @@
text-transform: uppercase; text-transform: uppercase;
&.match { &.match {
background-color: rgb(0, 142, 0); background-color: var(--scoreMatchBg);
border: solid 1px rgb(0, 113, 0); border: solid 1px var(--scoreMatchFg);
} }
&.weak-match { &.weak-match {
background-color: rgb(0, 80, 0); background-color: var(--scoreWeakMatchBg);
border: 1px solid rgb(0, 64, 0); border: 1px solid var(--scoreWeakMatchFg);
} }
&.weak-mismatch { &.weak-mismatch {
background-color: rgb(152, 134, 0); background-color: var(--scoreWeakMismatchBg);
border: 1px solid rgb(142, 126, 0); border: 1px solid var(--scoreWeakMismatchFg);
} }
&.mismatch { &.mismatch {
background-color: rgb(171, 0, 0); background-color: var(--scoreMismatchBg);
border: 1px solid rgb(128, 0, 0); border: 1px solid var(--scoreMismatchFg);
} }
} }
} }
@ -814,15 +814,15 @@
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
&.match { &.match {
border-left: 12px solid #048a04; border-left: 12px solid var(--scoreStandoutMatchBorderColor);
background-color: rgba(0, 110, 0, 0.47); background-color: var(--scoreStandoutMatchBgColor);
// border-left: 12px solid #027b02; // border-left: 12px solid #027b02;
// background-color: rgba(1, 115, 1, 0.45); // background-color: rgba(1, 115, 1, 0.45);
} }
&.weak-match { &.weak-match {
border-left: 12px solid #014a01; border-left: 12px solid var(--scoreStandoutWeakMatchBorderColor);
background-color: rgba(0, 79, 0, 0.4); background-color: var(--scoreStandoutWeakMatchBgColor);
.bbcode { .bbcode {
filter: grayscale(0.25); filter: grayscale(0.25);
@ -831,7 +831,7 @@
} }
&.neutral { &.neutral {
border-left: 12px solid #555; border-left: 12px solid var(--scoreStandoutNeutralBorderColor);
.bbcode { .bbcode {
filter: grayscale(0.5); filter: grayscale(0.5);
@ -845,8 +845,8 @@
}; };
&.weak-mismatch { &.weak-mismatch {
background-color: rgba(208, 188, 0, 0.0); border-left: 12px solid var(--scoreStandoutWeakMismatchBorderColor);
border-left: 12px solid rgb(138, 123, 0); background-color: var(--scoreStandoutWeakMismatchBgColor);
.bbcode { .bbcode {
filter: grayscale(0.7); filter: grayscale(0.7);
@ -860,7 +860,7 @@
} }
&.mismatch { &.mismatch {
border-left: 12px solid #841a1a; border-left: 12px solid var(--scoreStandoutMismatchBorderColor);
.bbcode { .bbcode {
filter: grayscale(0.8); filter: grayscale(0.8);

10
chat/StatusPicker.vue
View File

@ -100,15 +100,17 @@
} }
.form-row:hover { .form-row:hover {
background-color: #20203e; /*background-color: #20203e;*/
border: 1px solid #2d2d6b; /*border: 1px solid #2d2d6b;*/
backdrop-filter: invert(30%) !important;
border-radius: 2px; border-radius: 2px;
} }
.selected-row, .selected-row,
.form-row.selected-row:hover { .form-row.selected-row:hover {
background-color: #343461; /*background-color: #343461;*/
border: 1px solid #6565b2; /*border: 1px solid #6565b2;*/
backdrop-filter: invert(20%);
border-radius: 2px; border-radius: 2px;
} }
} }

2
chat/preview/test-urls.txt
View File

@ -76,3 +76,5 @@ http://gfycatporn.com/deepthroat.php
Derpibooru Derpibooru
Pornhub GIFS Pornhub GIFS
https://multporn.net/authors_comics/sefeiren

8
electron/Index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div @mouseover="onMouseOver" id="page" style="position:relative;padding:5px 10px 10px" @auxclick.prevent> <div @mouseover="onMouseOver" id="page" style="position:relative;padding:5px 10px 10px" :class="getThemeClass()" @auxclick.prevent>
<div v-html="styling"></div> <div v-html="styling"></div>
<div v-if="!characters" style="display:flex; align-items:center; justify-content:center; height: 100%;"> <div v-if="!characters" style="display:flex; align-items:center; justify-content:center; height: 100%;">
<div class="card bg-light" style="width: 400px;"> <div class="card bg-light" style="width: 400px;">
@ -313,6 +313,12 @@
(this.$refs.characterPage as any).reload(); (this.$refs.characterPage as any).reload();
} }
getThemeClass(): string {
return `theme-${this.settings.theme}`;
}
get styling(): string { get styling(): string {
try { try {
return `<style>${fs.readFileSync(path.join(__dirname, `themes/${this.settings.theme}.css`), 'utf8').toString()}</style>`; return `<style>${fs.readFileSync(path.join(__dirname, `themes/${this.settings.theme}.css`), 'utf8').toString()}</style>`;

4
scss/_bbcode.scss
View File

@ -136,12 +136,12 @@ div.indentText {
.bbcode { .bbcode {
.fa-link { .fa-link {
color: white; color: var(--linkForcedColor);
margin-right: 2px; margin-right: 2px;
} }
a.user-link { a.user-link {
color: white; color: var(--linkForcedColor);
} }
} }

3
scss/_chat.scss
View File

@ -167,6 +167,7 @@
.message { .message {
word-wrap: break-word; word-wrap: break-word;
padding-bottom: 1px; padding-bottom: 1px;
padding-left: 5px;
} }
.message-block { .message-block {
@ -322,4 +323,4 @@ $genders: (
.nav-link { .nav-link {
cursor: pointer; cursor: pointer;
} }

52
scss/_rising.scss Normal file
View File

@ -0,0 +1,52 @@
:root {
--scoreMatchBg: #{$scoreMatchBg};
--scoreMatchFg: #{$scoreMatchFg};
--scoreWeakMatchBg: #{$scoreWeakMatchBg};
--scoreWeakMatchFg: #{$scoreWeakMatchFg};
--scoreWeakMismatchBg: #{$scoreWeakMismatchBg};
--scoreWeakMismatchFg: #{$scoreWeakMismatchFg};
--scoreMismatchBg: #{$scoreMismatchBg};
--scoreMismatchFg: #{$scoreMismatchFg};
--scoreTitleColor: #{$scoreTitleColor};
--scoreMinimizeButtonFg: #{$scoreMinimizeButtonFg};
--scoreMinimizeButtonBg: #{$scoreMinimizeButtonBg};
--scoreReportBg: #{$scoreReportBg};
--scoreFadedMatchBg: #{$scoreFadedMatchBg};
--scoreFadedMatchFg: #{$scoreFadedMatchFg};
--scoreFadedWeakMatchBg: #{$scoreFadedWeakMatchBg};
--scoreFadedWeakMatchFg: #{$scoreFadedWeakMatchFg};
--scoreFadedWeakMismatchBg: #{$scoreFadedWeakMismatchBg};
--scoreFadedWeakMismatchFg: #{$scoreFadedWeakMismatchFg};
--scoreFadedMismatchBg: #{$scoreFadedMismatchBg};
--scoreFadedMismatchFg: #{$scoreFadedMismatchFg};
--scoreStandoutMatchBorderColor: #{$scoreStandoutMatchBorderColor};
--scoreStandoutMatchBgColor: #{$scoreStandoutMatchBgColor};
--scoreStandoutWeakMatchBorderColor: #{$scoreStandoutWeakMatchBorderColor};
--scoreStandoutWeakMatchBgColor: #{$scoreStandoutWeakMatchBgColor};
--scoreStandoutNeutralBorderColor: #{$scoreStandoutNeutralBorderColor};
--scoreStandoutWeakMismatchBorderColor: #{$scoreStandoutWeakMismatchBorderColor};
--scoreStandoutWeakMismatchBgColor: #{$scoreStandoutWeakMismatchBgColor};
--scoreStandoutMismatchBorderColor: #{$scoreStandoutMismatchBorderColor};
--characterImageWrapperBg: #{$characterImageWrapperBg};
--characterGuestbookPostBg: #{$characterGuestbookPostBg};
--characterGuestbookPostBorderColor: #{$characterGuestbookPostBorderColor};
--characterGuestbookReplyBg: #{$characterGuestbookReplyBg};
--characterGuestbookTimestampFg: #{$characterGuestbookTimestampFg};
--characterKinkCustomColor: #{$characterKinkCustomColor};
--characterKinkCustomBorderColor: #{$characterKinkCustomBorderColor};
--characterKinkStockColor: #{$characterKinkStockColor};
--characterKinkStockHighlightedColor: #{$characterKinkStockHighlightedColor};
--characterInfotagColor: #{$characterInfotagColor};
--messageTimeBgColor: #{$messageTimeBgColor};
--messageTimeFgColor: #{$messageTimeFgColor};
--headerBackgroundMaskColor: #{$headerBackgroundMaskColor};
--linkForcedColor: #{$linkForcedColor};
--tabSecondaryFgColor: #{$tabSecondaryFgColor};
}

1
scss/themes/_chat.scss
View File

@ -32,6 +32,7 @@
@import "../bbcode_editor"; @import "../bbcode_editor";
@import "../bbcode"; @import "../bbcode";
@import "../flist_overrides"; @import "../flist_overrides";
@import "../rising";
* { * {
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {

2
scss/themes/chat/dark.scss
View File

@ -30,4 +30,4 @@
background-color: $gray-700; background-color: $gray-700;
} }
} }
} }

2
scss/themes/chat/default.scss
View File

@ -30,4 +30,4 @@
background-color: $gray-700; background-color: $gray-700;
} }
} }
} }

2
scss/themes/chat/light.scss
View File

@ -30,4 +30,4 @@
background-color: $gray-500; background-color: $gray-500;
} }
} }
} }

53
scss/themes/variables/_dark_variables.scss
View File

@ -59,4 +59,55 @@ $pagination-active-color: $link-color;
$text-background-color: $gray-100; $text-background-color: $gray-100;
$text-background-color-disabled: $gray-200; $text-background-color-disabled: $gray-200;
@import "invert"; // F-List Rising
$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);
$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: #202020;
$linkForcedColor: white;
$tabSecondaryFgColor: rgba(255, 255, 255, 0.5);
@import "invert";

54
scss/themes/variables/_default_variables.scss
View File

@ -58,4 +58,56 @@ $pagination-active-color: $link-color;
$text-background-color: $gray-200; $text-background-color: $gray-200;
$text-background-color-disabled: $gray-100; $text-background-color-disabled: $gray-100;
@import "invert"; // F-List Rising
$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);
$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: #2a2a54;
$linkForcedColor: white;
$tabSecondaryFgColor: rgba(255, 255, 255, 0.5);
@import "invert";

55
scss/themes/variables/_light_variables.scss
View File

@ -11,4 +11,57 @@ $gray-900: #191919 !default;
$secondary: $gray-400; $secondary: $gray-400;
$body-bg: $gray-100; $body-bg: $gray-100;
$text-muted: $gray-500; $text-muted: $gray-500;
// F-List Rising
$scoreMatchBg: rgba(0, 180, 0, 0.65);
$scoreMatchFg: rgba(0, 133, 0, 0.4);
$scoreWeakMatchBg: rgba(0, 180, 0, 0.22);
$scoreWeakMatchFg: rgba(0, 133, 0, 0.20);
$scoreWeakMismatchBg: rgba(227, 189, 0, 0.5);
$scoreWeakMismatchFg: rgba(192, 160, 0, 0.5);
$scoreMismatchBg: rgba(192, 0, 0, 0.35);
$scoreMismatchFg: rgba(148, 0, 0, 0.3);
$scoreTitleColor: black;
$scoreMinimizeButtonFg: rgba(255, 255, 255, 0.6);
$scoreMinimizeButtonBg: rgba(0,0,0,0.1);
$scoreReportBg: rgba(0,0,0,0.08);
$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: #059e05;
$scoreStandoutMatchBgColor: rgba(53, 225, 53, 0.4);
$scoreStandoutWeakMatchBorderColor: #016c01;
$scoreStandoutWeakMatchBgColor: rgba(85, 191, 85, 0.2);
$scoreStandoutNeutralBorderColor: #888;
$scoreStandoutWeakMismatchBorderColor: #c18f02;
$scoreStandoutWeakMismatchBgColor: rgba(208, 188, 0, 0.0);
$scoreStandoutMismatchBorderColor: #a01a1a;
$characterImageWrapperBg: rgba(0,0,0, 0.2);
$characterGuestbookPostBg: rgba(0,0,0,0.08);
$characterGuestbookPostBorderColor: rgba(0, 0, 0, 0.06);
$characterGuestbookReplyBg: rgba(0,0,0, 0.05);
$characterGuestbookTimestampFg: rgba(0, 0, 0, 0.4);
$characterKinkCustomColor: #0072ec;
$characterKinkCustomBorderColor: rgba(0, 0, 0, 0.1);
$characterKinkStockColor: #444444;
$characterKinkStockHighlightedColor: #333333;
$characterInfotagColor: rgba(0, 0, 0, 0.7);
$messageTimeBgColor: #dadada;
$messageTimeFgColor: #4f4f61;
$headerBackgroundMaskColor: #e5e5e5;
$linkForcedColor: #007bff;
$tabSecondaryFgColor: rgba(0, 0, 0, 0.4);

98
site/character_page/character_page.vue
View File

@ -468,18 +468,18 @@
.kink-name { .kink-name {
font-weight: bold; font-weight: bold;
color: #f2cd00; color: var(--characterKinkCustomColor);
} }
i { i {
color: #f2cd00; color: var(--characterKinkCustomColor);
} }
margin-top: 7px; margin-top: 7px;
margin-bottom: 7px; margin-bottom: 7px;
margin-left: -6px; margin-left: -6px;
margin-right: -6px; margin-right: -6px;
border: 1px rgba(255, 255, 255, 0.1) solid; border: 1px var(--characterKinkCustomBorderColor) solid;
border-radius: 2px; border-radius: 2px;
/* border-collapse: collapse; */ /* border-collapse: collapse; */
padding: 5px; padding: 5px;
@ -488,14 +488,14 @@
.stock-kink { .stock-kink {
.kink-name, i { .kink-name, i {
color: #ededf6; color: var(--characterKinkStockColor);
font-weight: normal; font-weight: normal;
} }
&.highlighted { &.highlighted {
.kink-name, i { .kink-name, i {
font-weight: bold; font-weight: bold;
color: #ffffff; color: var(--characterKinkStockHighlightedColor);
} }
} }
} }
@ -521,7 +521,7 @@
display: block; display: block;
font-weight: normal; font-weight: normal;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7); color: var(--characterInfotagColor);
line-height: 125%; line-height: 125%;
} }
@ -532,7 +532,7 @@
font-weight: normal !important; font-weight: normal !important;
line-height: 120%; line-height: 120%;
font-size: 85%; font-size: 85%;
color: rgba(255, 255, 255, 0.7); color: var(--characterInfotagColor);
} }
@ -554,29 +554,29 @@
font-weight: normal !important; font-weight: normal !important;
line-height: 120%; line-height: 120%;
font-size: 85%; font-size: 85%;
color: rgba(255, 255, 255, 0.7); color: var(--characterInfotagColor);
} }
.quick-info { .quick-info {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7); color: var(--characterInfotagColor);
} }
.guestbook-post { .guestbook-post {
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 15px; margin-top: 15px;
background-color: rgba(0,0,0,0.15); background-color: var(--characterGuestbookPostBg);
border-radius: 5px; border-radius: 5px;
padding: 15px; padding: 15px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--characterGuestbookPostBorderColor);
.characterLink { .characterLink {
font-size: 20pt; font-size: 20pt;
} }
.guestbook-timestamp { .guestbook-timestamp {
color: rgba(255, 255, 255, 0.3); color: var(--characterGuestbookTimestampFg);
font-size: 85% font-size: 85%
} }
@ -587,7 +587,7 @@
.guestbook-reply { .guestbook-reply {
margin-top: 20px; margin-top: 20px;
background-color: rgba(0,0,0, 0.1); background-color: var(--characterGuestbookReplyBg);
padding: 15px; padding: 15px;
border-radius: 4px; border-radius: 4px;
} }
@ -630,7 +630,7 @@
.character-image-wrapper { .character-image-wrapper {
display: inline-block; display: inline-block;
background-color: rgba(0,0,0, 0.2); background-color: var(--characterImageWrapperBg);
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
margin: 5px; margin: 5px;
@ -682,7 +682,7 @@
.match-report { .match-report {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: rgba(0,0,0,0.2); background-color: var(--scoreReportBg);
/* width: 100%; */ /* width: 100%; */
margin-top: -1.2rem; margin-top: -1.2rem;
margin-left: -1.2rem; margin-left: -1.2rem;
@ -719,12 +719,12 @@
position: absolute; position: absolute;
display: block; display: block;
right: 0.5rem; right: 0.5rem;
background-color: rgba(0,0,0,0.2); background-color: var(--scoreMinimizeButtonBg);
padding: 0.4rem; padding: 0.4rem;
padding-top: 0.2rem; padding-top: 0.2rem;
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7); color: var(--scoreMinimizeButtonFg);
border-radius: 4px; border-radius: 4px;
z-index: 1000; z-index: 1000;
} }
@ -757,7 +757,7 @@
padding-right: 4px; padding-right: 4px;
span { span {
color: white; color: var(--scoreTitleColor);
font-weight: bold; font-weight: bold;
} }
} }
@ -777,84 +777,74 @@
} }
} }
$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);
.character-kinks-block .character-kink.comparison-favorite, .character-kinks-block .character-kink.comparison-favorite,
.match-report .scores .match-score.match, .match-report .scores .match-score.match,
.infotag.match { .infotag.match {
background-color: $scoreMatchBg; background-color: var(--scoreMatchBg);
border: solid 1px $scoreMatchFg; border: solid 1px var(--scoreMatchFg);
} }
.character-kinks-block .character-kink.comparison-yes, .character-kinks-block .character-kink.comparison-yes,
.match-report .scores .match-score.weak-match, .match-report .scores .match-score.weak-match,
.infotag.weak-match { .infotag.weak-match {
background-color: $scoreWeakMatchBg; background-color: var(--scoreWeakMatchBg);
border: 1px solid $scoreWeakMatchFg; border: 1px solid var(--scoreWeakMatchFg);
} }
.character-kinks-block .character-kink.comparison-maybe, .character-kinks-block .character-kink.comparison-maybe,
.match-report .scores .match-score.weak-mismatch, .match-report .scores .match-score.weak-mismatch,
.infotag.weak-mismatch { .infotag.weak-mismatch {
background-color: $scoreWeakMismatchBg; background-color: var(--scoreWeakMismatchBg);
border: 1px solid $scoreWeakMismatchFg; border: 1px solid var(--scoreWeakMismatchFg);
} }
.character-kinks-block .character-kink.comparison-no, .character-kinks-block .character-kink.comparison-no,
.match-report .scores .match-score.mismatch, .match-report .scores .match-score.mismatch,
.infotag.mismatch { .infotag.mismatch {
background-color: $scoreMismatchBg; background-color: var(--scoreMismatchBg);
border: 1px solid $scoreMismatchFg; border: 1px solid var(--scoreMismatchFg);
} }
.character-kinks-block .highlighting { .character-kinks-block .highlighting {
.character-kink { .character-kink {
&.comparison-favorite { &.comparison-favorite {
background-color: adjust-color($scoreMatchBg, $alpha: -0.6); background-color: var(--scoreFadedMatchBg);
border-color: adjust-color($scoreMatchFg, $alpha: -0.6); border-color: var(--scoreFadedMatchFg);
&.highlighted { &.highlighted {
background-color: $scoreMatchBg; background-color: var(--scoreMatchBg);
border-color: $scoreMatchFg; border-color: var(--scoreMatchFg);
} }
} }
&.comparison-yes { &.comparison-yes {
background-color: adjust-color($scoreWeakMatchBg, $alpha: -0.6); background-color: var(--scoreWeakMatchBg);
border-color: adjust-color($scoreWeakMatchFg, $alpha: -0.6); border-color: var(--scoreWeakMatchFg);
&.highlighted { &.highlighted {
background-color: $scoreWeakMatchBg; background-color: var(--scoreWeakMatchBg);
border-color: $scoreWeakMatchFg; border-color: var(--scoreWeakMatchFg);
} }
} }
&.comparison-maybe { &.comparison-maybe {
background-color: adjust-color($scoreWeakMismatchBg, $alpha: -0.6); background-color: var(--scoreWeakMismatchBg);
border-color: adjust-color($scoreWeakMismatchFg, $alpha: -0.6); border-color: var(--scoreWeakMismatchFg);
&.highlighted { &.highlighted {
background-color: $scoreWeakMismatchBg; background-color: var(--scoreWeakMismatchBg);
border-color: $scoreWeakMismatchFg; border-color: var(--scoreWeakMismatchFg);
} }
} }
&.comparison-no { &.comparison-no {
background-color: adjust-color($scoreMismatchBg, $alpha: -0.6); background-color: var(--scoreMismatchBg);
border-color: adjust-color($scoreMismatchFg, $alpha: -0.6); border-color: var(--scoreMismatchFg);
&.highlighted { &.highlighted {
background-color: $scoreMismatchBg; background-color: var(--scoreMismatchBg);
border-color: $scoreMismatchFg; border-color: var(--scoreMismatchFg);
} }
} }
} }
@ -862,7 +852,7 @@
.tab-count { .tab-count {
color: rgba(255, 255, 255, 0.5); color: var(--tabSecondaryFgColor);
} }
@ -870,7 +860,7 @@
position: sticky; position: sticky;
top: -1rem; top: -1rem;
z-index: 10000; z-index: 10000;
background: #2a2a54 !important; background: var(--headerBackgroundMaskColor) !important;
} }
</style> </style>