mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat] add color scheme

Browse Source
This commit is contained in:
kwaroran
2023-08-03 08:58:36 +09:00
parent 7d369221dc
commit 0e0601642a
57 changed files with 622 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/UI/BaseRoundedButton.svelte
View File

@@ -8,7 +8,7 @@
on:click={onClick}
class="flex h-[56px] w-[56px] cursor-pointer select-none items-center justify-center
transition-colors rounded-full
border border-gray-500 text-gray-300
border border-textcolor2 text-gray-300
hover:border-gray-300
{isDisabled ? '!cursor-not-allowed' : ''}"
>

2
src/lib/UI/GUI/Button.svelte
View File

@@ -1,6 +1,6 @@
<button
on:click
class="{selected ? 'bg-borderc' : 'bg-gray-700'} border border-gray-600 text-white rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
class="{selected ? 'bg-borderc' : 'bg-darkbutton'} border border-darkborderc text-textcolor rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
class:px-4 = {size == "md"}
class:px-2 = {size == "sm"}
class:px-6 = {size == "lg"}

4
src/lib/UI/GUI/CheckInput.svelte
View File

@@ -9,7 +9,7 @@
</script>
<label
class="flex items-center space-x-2 cursor-pointer text-white"
class="flex items-center space-x-2 cursor-pointer text-textcolor"
class:mr-2={margin}
aria-describedby="{name} {check ? 'abled' : 'disabled'}"
>
@@ -23,7 +23,7 @@
}}
/>
<span
class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-gray-600 flex justify-center items-center {check ? 'bg-borderc' : 'bg-gray-700'} transition-colors duration-200"
class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-darkborderc flex justify-center items-center {check ? 'bg-borderc' : 'bg-darkbutton'} transition-colors duration-200"
aria-hidden="true"
>
{#if check}

2
src/lib/UI/GUI/NumberInput.svelte
View File

@@ -1,5 +1,5 @@
<input
class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}

2
src/lib/UI/GUI/SelectInput.svelte
View File

@@ -1,5 +1,5 @@
<select
class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}

4
src/lib/UI/GUI/SideBarArrow.svelte
View File

@@ -5,14 +5,14 @@
</script>
{#if $sideBarStore && !$DynamicGUI}
<button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 z-20">
<button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor z-20">
<ArrowLeft />
</button>
{:else}
<button on:click={() => {
sideBarClosing.set(false);
sideBarStore.set(true)}
} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 opacity-50 hover:opacity-90 z-20">
} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor opacity-50 hover:opacity-90 z-20">
<ArrowRight />
</button>
{/if}

4
src/lib/UI/GUI/SliderInput.svelte
View File

@@ -1,5 +1,5 @@
<input
class="text-neutral-200 bg-transparent input-text"
class="text-textcolor bg-transparent input-text"
class:mb-4={marginBottom}
type="range"
min={min}
@@ -11,7 +11,7 @@
<!-- <div class="p-6 max-w-sm mx-auto bg-gray-800 rounded-xl shadow-md flex items-center space-x-4 w-full" class:mb-4={marginBottom}>
<div
class="relative w-full h-2 bg-gray-700 rounded-full cursor-pointer"
class="relative w-full h-2 bg-darkbutton rounded-full cursor-pointer"
on:click={changeValue}
>
<div

4
src/lib/UI/GUI/TextAreaInput.svelte
View File

@@ -1,6 +1,6 @@
{#if optimaizedInput}
<textarea
class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}
@@ -36,7 +36,7 @@
/>
{:else}
<textarea
class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}

2
src/lib/UI/GUI/TextAreaResizable.svelte
View File

@@ -29,7 +29,7 @@
resize: none;
box-sizing: border-box;
background: transparent;
color: white;
color: var(--risu-theme-textcolor);
border: 1px solid rgba(98, 114, 164, 0.5);
max-width: calc(95% - 2rem);
padding: 1rem;

2
src/lib/UI/GUI/TextInput.svelte
View File

@@ -1,5 +1,5 @@
<input
class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}

18
src/lib/UI/MainMenu.svelte
View File

@@ -12,26 +12,26 @@
</script>
<div class="h-full w-full flex flex-col overflow-y-auto items-center">
{#if !openHub}
<h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
<h2 class="text-4xl text-textcolor mb-0 mt-6 font-black">RisuAI</h2>
{#if (!isTauri) && (!isNodeServer)}
<h3 class="text-gray-500 mt-1">Version {appVer}{webAppSubVer}</h3>
<h3 class="text-textcolor2 mt-1">Version {appVer}{webAppSubVer}</h3>
{:else}
<h3 class="text-gray-500 mt-1">Version {appVer}</h3>
<h3 class="text-textcolor2 mt-1">Version {appVer}</h3>
{/if}
<GithubStars />
{/if}
<div class="w-full flex p-4 flex-col text-white max-w-4xl">
<div class="w-full flex p-4 flex-col text-textcolor max-w-4xl">
{#if !openHub}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
openURL("https://github.com/kwaroran/RisuAI/wiki")
}}>
<h1 class="text-2xl font-bold text-start">{language.officialWiki}</h1>
<span class="mt-2 text-gray-400 text-start">{language.officialWikiDesc}</span>
<span class="mt-2 text-textcolor2 text-start">{language.officialWikiDesc}</span>
</button>
<button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {openURL("https://discord.gg/JzP8tB9ZK8")}}>
<h1 class="text-2xl font-bold text-start">{language.officialDiscord}</h1>
<span class="mt-2 text-gray-400 text-start">{language.officialDiscordDesc}</span>
<span class="mt-2 text-textcolor2 text-start">{language.officialDiscordDesc}</span>
</button>
</div>
<div class="mt-4 mb-4 w-full border-t border-t-selected"></div>
@@ -52,15 +52,15 @@
{/each}
</div>
{:else}
<div class="text-gray-500">Failed to load {language.hub}...</div>
<div class="text-textcolor2">Failed to load {language.hub}...</div>
{/if}
{/await}
{:else}
<div class="text-gray-500">{language.hideRealm}</div>
<div class="text-textcolor2">{language.hideRealm}</div>
{/if}
{:else}
<div class="flex items-center mt-4">
<button class="mr-2 text-gray-400 hover:text-green-500" on:click={() => (openHub = false)}>
<button class="mr-2 text-textcolor2 hover:text-green-500" on:click={() => (openHub = false)}>
<ArrowLeft/>
</button>
</div>

2
src/lib/UI/ModelList.svelte
View File

@@ -74,7 +74,7 @@
}}>
<div class="w-96 max-w-full max-h-full overflow-y-auto overflow-x-hidden bg-bgcolor p-4 flex flex-col" on:click|stopPropagation>
<h1 class="font-bold text-xl">{language.model}
<!-- <button class="float-right text-sm font-light text-gray-500 hover:text-green-300"
<!-- <button class="float-right text-sm font-light text-textcolor2 hover:text-green-300"
class:text-green-500={openAdv} on:click={() => {
openAdv = !openAdv
}}>

10
src/lib/UI/Realm/RealmHubIcon.svelte
View File

@@ -12,8 +12,8 @@
<button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={onClick}> <div class="flex gap-2 w-full">
<img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
<div class="flex flex-col flex-grow min-w-0">
<span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
<span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
<span class="text-textcolor text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
<span class="text-textcolor2 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
<div class="flex flex-wrap">
{#each chara.tags as tag, i}
{#if i < 4}
@@ -26,13 +26,13 @@
<div class="flex-grow"></div>
<div class="flex flex-wrap w-full flex-row-reverse gap-1">
{#if chara.hasEmotion}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
{/if}
{#if chara.hasAsset}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional assets")}}><ImageIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional assets")}}><ImageIcon /></button>
{/if}
{#if chara.hasLore}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
{/if}
</div>
</div>

2
src/lib/UI/Realm/RealmLicense.svelte
View File

@@ -13,7 +13,7 @@
openURL(`https://creativecommons.org/licenses/${CCLicenseData[license][0]}/4.0/`)
}}>
<img alt="creative commons" class="cc" src="https://i.creativecommons.org/l/{CCLicenseData[license][0]}/4.0/88x31.png" />
<span class="text-gray-500">
<span class="text-textcolor2">
Licensed with {CCLicenseData[license][2]}
</span>

2
src/lib/UI/Realm/RealmMain.svelte
View File

@@ -120,7 +120,7 @@
<span>
Menu
</span>
<button class="float-right text-gray-400 hover:text-green-500" on:click={() => {menuOpen = false}}>
<button class="float-right text-textcolor2 hover:text-green-500" on:click={() => {menuOpen = false}}>
<XIcon />
</button>
</h1>

18
src/lib/UI/Realm/RealmPopUp.svelte
View File

@@ -14,7 +14,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-white" on:click={() => {
<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-textcolor" on:click={() => {
openedData = null
}}>
<div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto">
@@ -25,7 +25,7 @@
{/if}
<div class="flex justify-start gap-4 mt-4">
<img class="h-36 w-36 rounded-md object-top object-cover" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
<span class="text-gray-400 break-words text-base chattext prose prose-invert">
<span class="text-textcolor2 break-words text-base chattext prose prose-invert">
{@html parseMarkdownSafe(openedData.desc)}
</span>
</div>
@@ -37,24 +37,24 @@
{/each}
</div>
<div class="flex flex-wrap w-full flex-row gap-1 mt-2">
<span class="text-gray-500">
<span class="text-textcolor2">
{language.popularityLevel.replace('{}', openedData.download.toString())}
</span>
<div class="border-l-selected border-l ml-1 mr-1"></div>
{#if openedData.hasEmotion}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
{/if}
{#if openedData.hasAsset}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional Assets")}}><ImageIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional Assets")}}><ImageIcon /></button>
{/if}
{#if openedData.hasLore}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
{/if}
</div>
</div>
<div class="flex flex-row-reverse gap-2">
<button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
<button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
const conf = await alertConfirm('Report this character?')
if(conf){
const report = await alertInput('Write a report text that would be sent to the admin')
@@ -71,7 +71,7 @@
<FlagIcon />
</button>
{#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
<button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
<button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
const conf = await alertConfirm('Do you want to remove this character from Realm?')
if(conf){
const da = await fetch(hubURL + '/hub/remove', {
@@ -87,7 +87,7 @@
<TrashIcon />
</button>
{/if}
<button class="text-gray-400 hover:text-green-500" on:click|stopPropagation={async () => {
<button class="text-textcolor2 hover:text-green-500" on:click|stopPropagation={async () => {
await navigator.clipboard.writeText(`https://risuai.xyz/?realm=${openedData.id}`)
alertNormal("Copied to clipboard")
}}>

22
src/lib/UI/Realm/RealmUpload.svelte
View File

@@ -4,35 +4,35 @@
{#if !$DataBase.account}
<span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span>
<span class="text-gray-500">You can login in app settings 🡲 account</span>
<span class="text-textcolor2">You can login in app settings 🡲 account</span>
<button on:click={async () => {
close()
}} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
}} class="text-textcolor mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
{:else}
<h1 class="font-bold text-2xl w-full">
<span>
Share {char.name} to {language.hub}
</span>
<button class="float-right text-gray-400 hover:text-green-500" on:click={close}>
<button class="float-right text-textcolor2 hover:text-green-500" on:click={close}>
<XIcon />
</button>
</h1>
<div class="mb-2 mt-2 w-full border-t-2 border-t-bgcolor"></div>
<span class="text-neutral-200">{language.creatorNotes}</span>
<span class="text-gray-400 text-sm">A description that displays when you search and when you first open a bot.</span>
<span class="text-gray-400 text-sm">More than 20 characters.</span>
<span class="text-textcolor">{language.creatorNotes}</span>
<span class="text-textcolor2 text-sm">A description that displays when you search and when you first open a bot.</span>
<span class="text-textcolor2 text-sm">More than 20 characters.</span>
<TextAreaInput autocomplete="off" bind:value={char.creatorNotes} height={"20"} />
<span class="text-neutral-200">{language.tags}</span>
<span class="text-gray-400 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
<span class="text-textcolor">{language.tags}</span>
<span class="text-textcolor2 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
<TextInput placeholder="" bind:value={tags} on:input={() => {
tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase()
}} />
{#if char.license !== 'CC BY-NC-SA 4.0' && char.license !== 'CC BY-SA 4.0'}
<span class="text-neutral-200 mt-4">License</span>
<span class="text-gray-400 text-sm">You can choose license for the downloaders to limit the usages of your card's prompt.</span>
<span class="text-textcolor mt-4">License</span>
<span class="text-textcolor2 text-sm">You can choose license for the downloaders to limit the usages of your card's prompt.</span>
<SelectInput bind:value={license}>
<OptionInput value="">None</OptionInput>
{#each Object.keys(CCLicenseData) as ccl}
@@ -50,7 +50,7 @@
<button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={nsfwMode} on:click={() => {nsfwMode = true}}>🔞 NSFW</button>
</div>
{#if nsfwMode}
<span class="text-gray-400 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
<span class="text-textcolor2 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
{/if}
<Button on:click={async () => {
if(char.creatorNotes.length < 20){