axel/wol-dash
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

dark mode adjustments

Browse Source
This commit is contained in:
axel 2025-04-12 22:12:34 +02:00
parent 4d9a6aace0
commit 3acff47663
6 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/forms/InputSelect.svelte
View File

@ -40,7 +40,7 @@
<label for={name} class="block w-1/3 min-w-[300px]">
<p>{label}</p>
{#if sublabel}
<p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>
<p class="text-sm text-neutral-400 dark:text-neutral-500">{sublabel}</p>
{/if}
</label>
<select multiple name={name} class="hidden">
@ -49,7 +49,7 @@
{/each}
</select>
<div class="relative flex gap-10 items-center h-fit rounded border border-gray-300 dark:border-neutral-800 shadow-sm pl-4 pr-2 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
<div class="relative flex gap-10 items-center h-fit rounded border border-gray-300 dark:border-neutral-700 shadow-sm dark:shadow-neutral-800 pl-4 pr-2 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
{#if selectData.length == 0}
<p>None available</p>
{:else}
@ -59,7 +59,7 @@
{/if}
{#if expanded}
<ul transition:slide onmouseleave={() => focused = false} onmouseenter={() => focused = true} class="absolute flex flex-col gap-2 top-[calc(100%+10px)] z-1 left-0 w-full max-h-40 overflow-y-scroll bg-white dark:bg-neutral-950 rounded border border-gray-300 dark:border-neutral-800 shadow-sm p-2 text-xs">
<ul transition:slide onmouseleave={() => focused = false} onmouseenter={() => focused = true} class="absolute flex flex-col gap-2 top-[calc(100%+10px)] z-1 left-0 w-full max-h-40 overflow-y-scroll bg-white dark:bg-neutral-950 rounded border border-gray-300 dark:border-neutral-700 shadow-sm p-2 text-xs">
<div class="flex gap-2 items-center">
<IconSearch class="text-neutral-400"/>
<input type="text" placeholder="Search..." bind:value={search} class="block w-full text-sm !outline-none transition-all duration-300 ease-in-out border-transparent focus:border-b-2 focus:border-indigo-500">

4
src/lib/components/forms/InputText.svelte
View File

@ -12,9 +12,9 @@
<label for={name} class="block w-1/3 min-w-[300px]">
<p>{label}</p>
{#if sublabel}
<p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>
<p class="text-sm text-neutral-400 dark:text-neutral-500">{sublabel}</p>
{/if}
</label>
<input id={name} name={name} type="text" defaultValue={defaultValue} {...others}
class="block h-fit rounded border border-gray-300 dark:border-neutral-800 shadow-sm px-4 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
class="block h-fit rounded border border-gray-300 dark:border-neutral-700 shadow-sm dark:shadow-neutral-800 px-4 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
</div>

2
src/lib/components/forms/InputToggle.svelte
View File

@ -17,7 +17,7 @@
<label for={name} class="block w-1/3 min-w-[300px]">
<p>{label}</p>
{#if sublabel.length > 0}
<p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>
<p class="text-sm text-neutral-400 dark:text-neutral-500">{sublabel}</p>
{/if}
</label>

2
src/lib/components/resources/ResourceCard.svelte
View File

@ -6,7 +6,7 @@
} = $props();
</script>
<div class="flex gap-10 justify-between items-center rounded border border-neutral-200 dark:border-neutral-800 py-4 px-6 shadow">
<div class="flex gap-10 justify-between items-center rounded border border-neutral-200 dark:border-neutral-700 py-4 px-6 shadow dark:shadow-neutral-800">
<div>
<p class="font-medium">{title}</p>
<p class="text-neutral-400">{subtitle}</p>

4
src/lib/components/ui/Button.svelte
View File

@ -24,12 +24,12 @@
"normal": {
"danger": "bg-red-500 hover:bg-red-600 text-white border border-transparent",
"success": "bg-emerald-500 hover:bg-emerald-600 text-white border border-transparent",
"primary": "bg-neutral-800 dark:bg-neutral-700 hover:bg-neutral-600 text-white border border-transparent",
"primary": "bg-neutral-800 dark:bg-neutral-200 hover:bg-neutral-600 dark:hover:bg-neutral-400 text-white dark:text-black border border-transparent",
},
"inverted": {
"danger": "bg-white dark:bg-black hover:bg-red-100 dark:hover:bg-red-950 text-red-500 border border-red-500",
"success": "bg-white hover:bg-emerald-100 text-emerald-500 border border-emerald-500",
"primary": "bg-white dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-800 dark:text-neutral-200 border border-neutral-800",
"primary": "bg-white dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-800 dark:text-neutral-200 border border-neutral-800 dark:border-neutral-700",
},
};

2
src/lib/components/ui/HorizontalSpacer.svelte
View File

@ -1 +1 @@
<div class="w-full h-px bg-neutral-200 dark:bg-neutral-800 my-4"></div>
<div class="w-full h-px bg-neutral-200 dark:bg-neutral-700 my-4"></div>