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/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'}