From eb8e1d31c8eec049e96a909d1ec2fb396d086b71 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Mon, 9 Sep 2024 18:47:30 +0900
Subject: [PATCH] Add custom css and rs classes for it

---
 src/lang/en.ts                               |  2 ++
 src/lib/Others/WelcomeRisu.svelte            |  4 +--
 src/lib/Setting/Pages/DisplaySettings.svelte | 28 ++++++++++++--------
 src/lib/Setting/Settings.svelte              |  8 +++---
 src/lib/SideBars/Sidebar.svelte              |  2 +-
 src/ts/gui/colorscheme.ts                    | 11 +++++++-
 src/ts/hotkey.ts                             | 10 ++++++-
 src/ts/storage/database.ts                   |  2 ++
 src/ts/storage/globalApi.ts                  |  4 +--
 src/ts/stores.ts                             | 18 +++++++++++++
 10 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index cb866e62..76144415 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -143,6 +143,7 @@ export const languageEnglish = {
         urllora: "You can use direct download link of the model file. you can make direct url from google drive like website like https://sites.google.com/site/gdocs2direct/ , or use civitai URL, copy the the AIR (looks like `urn:air:flux1:lora:civitai:180891@776656` or just `civitai:180891@776656`) and paste it.",
         namespace: "Namespace is a unique identifier for the module. it is used to prevent conflicts between modules, and for interaction of presets, other modules and etc. if you are not sure what to put, leave it blank.",
         moduleIntergration: "You can enable modules by putting the module namespace in the module intergartion sections. if you want to enable multiple modules, you can seperate them by comma. for example, `module1,module2,module3`. this is for advanced users, who wants to vary the use of modules by presets.",
+        customCSS: "Custom CSS for styling. you can also disable/enable it by pressing (Ctrl + .) if something goes wrong.",
     },
     setup: {
         chooseProvider: "Choose AI Provider",
@@ -703,4 +704,5 @@ export const languageEnglish = {
     miscTools: "Misc Tools",
     promptConvertion: "Prompt Convertion",
     convertionStep1: "Select all file related to the prompt (Context, Instruct and Sampler JSON is supported)",
+    customCSS: "Custom CSS",
 }
\ No newline at end of file
diff --git a/src/lib/Others/WelcomeRisu.svelte b/src/lib/Others/WelcomeRisu.svelte
index 89e09b19..5d0902fb 100644
--- a/src/lib/Others/WelcomeRisu.svelte
+++ b/src/lib/Others/WelcomeRisu.svelte
@@ -5,7 +5,7 @@
     import { DataBase, setPreset } from "src/ts/storage/database";
     import Chat from "../ChatScreens/Chat.svelte";
     import { prebuiltPresets } from "src/ts/process/templates/templates";
-    import { updateTextTheme } from "src/ts/gui/colorscheme";
+    import { updateTextThemeAndCSS } from "src/ts/gui/colorscheme";
 
     let step = 0
     let provider = ''
@@ -65,7 +65,7 @@
             setTimeout(() => {
                 $DataBase = setPreset($DataBase, prebuiltPresets.OAI2)
                 $DataBase.textTheme = 'highcontrast'
-                updateTextTheme()
+                updateTextThemeAndCSS()
                 if(provider === 'openrouter'){
                     $DataBase.aiModel = 'openrouter'
                     $DataBase.subModel = 'openrouter'
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index dac10c73..a425b60e 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -8,11 +8,12 @@
     import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
     import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
     import { updateAnimationSpeed } from "src/ts/gui/animation";
-    import { changeColorScheme, colorSchemeList, exportColorScheme, importColorScheme, updateColorScheme, updateTextTheme } from "src/ts/gui/colorscheme";
+    import { changeColorScheme, colorSchemeList, exportColorScheme, importColorScheme, updateColorScheme, updateTextThemeAndCSS } from "src/ts/gui/colorscheme";
     import { DownloadIcon, FolderUpIcon } from "lucide-svelte";
     import { guiSizeText, updateGuisize } from "src/ts/gui/guisize";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
     import ColorInput from "src/lib/UI/GUI/ColorInput.svelte";
+  import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
 
     const onSchemeInputChange = (e:Event) => {
         changeColorScheme((e.target as HTMLInputElement).value)
@@ -24,7 +25,7 @@
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
 
 {#if submenu !== -1}
-    <div class="flex w-full rounded-md border border-darkborderc mb-4">
+    <div class="flex w-full rounded-md border border-darkborderc mb-4 overflow-x-auto h-16 min-h-16 overflow-y-clip">
         <button on:click={() => {
             submenu = 0
         }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
@@ -128,7 +129,7 @@
     {/if}
 
     <span class="text-textcolor mt-4">{language.textColor}</span>
-    <SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
+    <SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextThemeAndCSS}>
         <OptionInput value="standard" >{language.classicRisu}</OptionInput>
         <OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
         <OptionInput value="custom" >Custom</OptionInput>
@@ -136,40 +137,40 @@
 
     {#if $DataBase.textTheme === "custom"}
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} />
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextThemeAndCSS} />
             <span class="ml-2">Normal Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextTheme} />
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextThemeAndCSS} />
             <span class="ml-2">Italic Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextTheme} />
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextThemeAndCSS} />
             <span class="ml-2">Bold Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextTheme} />
+            <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextThemeAndCSS} />
             <span class="ml-2">Italic Bold Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextTheme} />
+            <ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextThemeAndCSS} />
             <span class="ml-2">Single Quote Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} />
+            <ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextThemeAndCSS} />
             <span class="ml-2">Double Quote Text</span>
         </div>
     {/if}
 
     <span class="text-textcolor mt-4">{language.font}</span>
-    <SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}>
+    <SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextThemeAndCSS}>
         <OptionInput value="default" >Default</OptionInput>
         <OptionInput value="timesnewroman" >Times New Roman</OptionInput>
         <OptionInput value="custom" >Custom</OptionInput>
     </SelectInput>
 
     {#if $DataBase.font === "custom"}
-        <TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} />
+        <TextInput bind:value={$DataBase.customFont} on:change={updateTextThemeAndCSS} />
     {/if}
 
 {/if}
@@ -325,4 +326,9 @@
         </div>
     {/if}
 
+    <span class="text-textcolor mt-4">{language.customCSS}<Help key="customCSS" /></span>
+    <TextAreaInput bind:value={$DataBase.customCSS} onInput={() => {
+        updateTextThemeAndCSS()
+    }} />
+
 {/if}
\ No newline at end of file
diff --git a/src/lib/Setting/Settings.svelte b/src/lib/Setting/Settings.svelte
index a90e9f2f..a847a0cd 100644
--- a/src/lib/Setting/Settings.svelte
+++ b/src/lib/Setting/Settings.svelte
@@ -27,10 +27,10 @@
     }
 
 </script>
-<div class="h-full w-full flex justify-center setting-bg">
-    <div class="h-full max-w-screen-lg w-full flex relative">
+<div class="h-full w-full flex justify-center setting-bg rs-setting-cont">
+    <div class="h-full max-w-screen-lg w-full flex relative rs-setting-cont-2">
         {#if window.innerWidth >= 700 || $SettingsMenuIndex === -1}
-            <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
+            <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative rs-setting-cont-3"
                 class:w-full={window.innerWidth < 700}>
                 <button class="flex gap-2 items-center hover:text-textcolor"
                     class:text-textcolor={$SettingsMenuIndex === 1 || $SettingsMenuIndex === 13}
@@ -141,7 +141,7 @@
         {/if}
         {#if window.innerWidth >= 700 || $SettingsMenuIndex !== -1}
             {#key $SettingsMenuIndex}
-                <div class="flex-grow py-6 px-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
+                <div class="flex-grow py-6 px-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative rs-setting-cont-4">
                     {#if $SettingsMenuIndex === 0}
                         <UserSettings />
                     {:else if $SettingsMenuIndex === 1}
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index 1fb9b2b3..f17548a2 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -337,7 +337,7 @@
 </script>
 
 <div
-  class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-textcolor shadow-lg relative"
+  class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-textcolor shadow-lg relative rs-sidebar"
   class:editMode
   class:risu-sub-sidebar={$sideBarClosing}
   class:risu-sub-sidebar-close={$sideBarClosing}
diff --git a/src/ts/gui/colorscheme.ts b/src/ts/gui/colorscheme.ts
index 32783836..f6abbec7 100644
--- a/src/ts/gui/colorscheme.ts
+++ b/src/ts/gui/colorscheme.ts
@@ -4,6 +4,7 @@ import { downloadFile } from "../storage/globalApi";
 import { BufferToText, selectSingleFile } from "../util";
 import { alertError } from "../alert";
 import { isLite } from "../lite";
+import { CustomCSSStore, SafeModeStore } from "../stores";
 
 export interface ColorScheme{
     bgcolor: string;
@@ -179,7 +180,8 @@ export async function importColorScheme(){
     
     }
 }
-export function updateTextTheme(){
+
+export function updateTextThemeAndCSS(){
     let db = get(DataBase)
     const root = document.querySelector(':root') as HTMLElement;
     if(!root){
@@ -250,4 +252,11 @@ export function updateTextTheme(){
             break
         }
     }
+
+    if(!get(SafeModeStore)){
+        CustomCSSStore.set(db.customCSS ?? '')
+    }
+    else{
+        CustomCSSStore.set('')
+    }
 }
\ No newline at end of file
diff --git a/src/ts/hotkey.ts b/src/ts/hotkey.ts
index 8af7e5e7..161ecda8 100644
--- a/src/ts/hotkey.ts
+++ b/src/ts/hotkey.ts
@@ -1,8 +1,9 @@
 import { get } from "svelte/store"
 import { alertSelect, alertToast, doingAlert } from "./alert"
 import { DataBase, changeToPreset as changeToPreset2  } from "./storage/database"
-import { openPersonaList, openPresetList, selectedCharID, settingsOpen } from "./stores"
+import { openPersonaList, openPresetList, SafeModeStore, selectedCharID, settingsOpen } from "./stores"
 import { language } from "src/lang"
+import { updateTextThemeAndCSS } from "./gui/colorscheme"
 
 export function initHotkey(){
     document.addEventListener('keydown', (ev) => {
@@ -86,6 +87,13 @@ export function initHotkey(){
                     ev.stopPropagation()
                     break
                 }
+                case '.':{
+                    SafeModeStore.set(!get(SafeModeStore))
+                    updateTextThemeAndCSS()
+                    ev.preventDefault()
+                    ev.stopPropagation()
+                    break
+                }
             }
         }
         if(ev.key === 'Escape'){
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index 8713f9fe..86963af3 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -434,6 +434,7 @@ export function setDatabase(data:Database){
     data.translatorInputLanguage ??= 'auto'
     data.falModel ??= 'fal-ai/flux/dev'
     data.falLoraScale ??= 1
+    data.customCSS ??= ''
     changeLanguage(data.language)
     DataBase.set(data)
 }
@@ -726,6 +727,7 @@ export interface Database{
     falLoraName: string
     falLoraScale: number
     moduleIntergration: string
+    customCSS: string
 }
 
 export interface customscript{
diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts
index f06b96e2..3458ac37 100644
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -21,7 +21,7 @@ import { loadRisuAccountData } from "../drive/accounter";
 import { decodeRisuSave, encodeRisuSave } from "./risuSave";
 import { AutoStorage } from "./autoStorage";
 import { updateAnimationSpeed } from "../gui/animation";
-import { updateColorScheme, updateTextTheme } from "../gui/colorscheme";
+import { updateColorScheme, updateTextThemeAndCSS } from "../gui/colorscheme";
 import { saveDbKei } from "../kei/backup";
 import { Capacitor, CapacitorHttp } from '@capacitor/core';
 import * as CapFS from '@capacitor/filesystem'
@@ -525,7 +525,7 @@ export async function loadData() {
             await checkNewFormat()
             const db = get(DataBase);
             updateColorScheme()
-            updateTextTheme()
+            updateTextThemeAndCSS()
             updateAnimationSpeed()
             updateHeightMode()
             updateErrorHandling()
diff --git a/src/ts/stores.ts b/src/ts/stores.ts
index 697a069a..3fe6d4ca 100644
--- a/src/ts/stores.ts
+++ b/src/ts/stores.ts
@@ -45,11 +45,29 @@ export const ShowRealmFrameStore = writable('')
 export const PlaygroundStore = writable(0)
 export const HideIconStore = writable(false)
 export const UserIconProtrait = writable(false)
+export const CustomCSSStore = writable('')
+export const SafeModeStore = writable(false)
+
 let lastGlobalEnabledModules: string[] = []
 let lastChatEnabledModules: string[] = []
 let moduleHideIcon = false
 let characterHideIcon = false
 
+
+CustomCSSStore.subscribe((css) => {
+    console.log(css)
+    const q = document.querySelector('#customcss')
+    if(q){
+        q.innerHTML = css
+    }
+    else{
+        const s = document.createElement('style')
+        s.id = 'customcss'
+        s.innerHTML = css
+        document.body.appendChild(s)
+    }
+})
+
 function createSimpleCharacter(char:character|groupChat){
     if((!char) || char.type === 'group'){
         return null