Add custom css and rs classes for it

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",
 }

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'

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}

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 w-full flex justify-center setting-bg rs-setting-cont">
-    <div class="h-full max-w-screen-lg w-full flex relative">
+    <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}

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}

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('')
+    }
 }

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'){

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{

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()

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