NEW THEMES. looks pretty
This commit is contained in:
parent
dfbb6a6d9c
commit
4301584467
15 changed files with 68 additions and 51 deletions
|
@ -10,6 +10,7 @@
|
||||||
"format": "prettier --write ."
|
"format": "prettier --write ."
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@catppuccin/tailwindcss": "^0.1.6",
|
||||||
"@sveltejs/adapter-node": "^5.0.1",
|
"@sveltejs/adapter-node": "^5.0.1",
|
||||||
"@sveltejs/kit": "^2.0.0",
|
"@sveltejs/kit": "^2.0.0",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||||
|
|
15
src/app.css
15
src/app.css
|
@ -4,18 +4,15 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
html {
|
html,
|
||||||
@apply dark:bg-neutral-950;
|
body {
|
||||||
@apply dark:text-neutral-200;
|
@apply bg-base;
|
||||||
@apply transition-colors;
|
@apply text-text;
|
||||||
|
|
||||||
|
@apply transition-all;
|
||||||
|
|
||||||
font-family: 'Nunito', sans-serif;
|
font-family: 'Nunito', sans-serif;
|
||||||
font-optical-sizing: auto;
|
font-optical-sizing: auto;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
|
||||||
@apply dark:text-white;
|
|
||||||
@apply transition-colors;
|
|
||||||
}
|
|
||||||
|
|
|
@ -14,11 +14,11 @@
|
||||||
<Menu class="w-5 h-5"></Menu>
|
<Menu class="w-5 h-5"></Menu>
|
||||||
</button>
|
</button>
|
||||||
{#if visible}
|
{#if visible}
|
||||||
<button
|
<div
|
||||||
transition:slide
|
transition:slide
|
||||||
class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-neutral-200 dark:bg-neutral-900 rounded-lg origin-top right-0 absolute transition-all"
|
class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-crust rounded-lg origin-top right-0 absolute transition-all shadow-md"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</button>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,9 +2,6 @@
|
||||||
export let href = '';
|
export let href = '';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a
|
<a {href} class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-overlay0">
|
||||||
{href}
|
|
||||||
class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
|
|
||||||
>
|
|
||||||
<slot />
|
<slot />
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -113,7 +113,7 @@
|
||||||
<ButtonText>Register</ButtonText>
|
<ButtonText>Register</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-center text-neutral-500/50 dark:text-white/30">
|
<p class="text-xs text-center text-overlay1">
|
||||||
By registering an account you agree to the <br />
|
By registering an account you agree to the <br />
|
||||||
<a class="underline" href="/terms" data-sveltekit-reload>Terms of Service</a> and
|
<a class="underline" href="/terms" data-sveltekit-reload>Terms of Service</a> and
|
||||||
<a class="underline" href="/privacy" data-sveltekit-reload>Privacy Policy</a>.
|
<a class="underline" href="/privacy" data-sveltekit-reload>Privacy Policy</a>.
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex place-content-between px-4 my-2 w-full h-full rounded-xl transition-colors py-auto bg-neutral-200 dark:bg-neutral-900"
|
class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
|
||||||
>
|
>
|
||||||
<div class="flex my-auto space-x-6">
|
<div class="flex my-auto space-x-6">
|
||||||
<a
|
<a
|
||||||
|
@ -30,7 +30,7 @@
|
||||||
<Dropdown>
|
<Dropdown>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
class="flex px-3 py-1.5 space-x-1.5 w-full transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
|
class="flex px-3 py-1.5 space-x-1.5 w-full transition-all hover:bg-overlay0"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
$darkMode = !$darkMode;
|
$darkMode = !$darkMode;
|
||||||
}}
|
}}
|
||||||
|
@ -43,10 +43,7 @@
|
||||||
<p>Theme</p>
|
<p>Theme</p>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<DropdownButton>
|
<DropdownButton href="/settings">
|
||||||
<p class="my-auto">ShareX Profile</p>
|
|
||||||
</DropdownButton>
|
|
||||||
<DropdownButton>
|
|
||||||
<p class="my-auto">Settings</p>
|
<p class="my-auto">Settings</p>
|
||||||
</DropdownButton>
|
</DropdownButton>
|
||||||
<DropdownButton href="/api/auth/logout">
|
<DropdownButton href="/api/auth/logout">
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
{disabled}
|
{disabled}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 bg-neutral-200 hover:border-neutral-500 hover:group-disabled/button:border-neutral-400 dark:border-neutral-700 dark:bg-neutral-900 hover:dark:border-neutral-500 hover:group-disabled/button:dark:border-neutral-700"
|
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors hadow-md bg-crust border-overlay2"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,14 +7,12 @@
|
||||||
<!-- insane that i have to do this because -->
|
<!-- insane that i have to do this because -->
|
||||||
<!-- 'type' attribute cannot be dynamic if input uses two-way binding -->
|
<!-- 'type' attribute cannot be dynamic if input uses two-way binding -->
|
||||||
{#if type === 'username'}
|
{#if type === 'username'}
|
||||||
<div class="flex p-2 space-x-1 rounded-lg transition-colors bg-neutral-200 dark:bg-neutral-900">
|
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
|
||||||
<div
|
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
|
||||||
class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700"
|
|
||||||
>
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900 peer"
|
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
|
||||||
type="username"
|
type="username"
|
||||||
{name}
|
{name}
|
||||||
{id}
|
{id}
|
||||||
|
@ -22,22 +20,20 @@
|
||||||
{required}
|
{required}
|
||||||
bind:value
|
bind:value
|
||||||
/>
|
/>
|
||||||
<div class="peer-invalid:flex hidden my-auto">
|
<div class="hidden my-auto peer-invalid:flex">
|
||||||
<CircleAlert />
|
<CircleAlert />
|
||||||
</div>
|
</div>
|
||||||
<div class="peer-invalid:hidden my-auto">
|
<div class="my-auto peer-invalid:hidden">
|
||||||
<Check />
|
<Check />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else if type === 'email'}
|
{:else if type === 'email'}
|
||||||
<div class="flex p-2 space-x-1 rounded-lg transition-colors bg-neutral-200 dark:bg-neutral-900">
|
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
|
||||||
<div
|
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
|
||||||
class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700"
|
|
||||||
>
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900 peer"
|
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
|
||||||
type="email"
|
type="email"
|
||||||
{name}
|
{name}
|
||||||
{id}
|
{id}
|
||||||
|
@ -45,22 +41,20 @@
|
||||||
{required}
|
{required}
|
||||||
bind:value
|
bind:value
|
||||||
/>
|
/>
|
||||||
<div class="peer-invalid:flex hidden my-auto">
|
<div class="hidden my-auto peer-invalid:flex">
|
||||||
<CircleAlert />
|
<CircleAlert />
|
||||||
</div>
|
</div>
|
||||||
<div class="peer-invalid:hidden my-auto">
|
<div class="my-auto peer-invalid:hidden">
|
||||||
<Check />
|
<Check />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else if type === 'password'}
|
{:else if type === 'password'}
|
||||||
<div class="flex p-2 space-x-1 rounded-lg transition-colors bg-neutral-200 dark:bg-neutral-900">
|
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
|
||||||
<div
|
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
|
||||||
class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700"
|
|
||||||
>
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900 peer"
|
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
|
||||||
type="password"
|
type="password"
|
||||||
{name}
|
{name}
|
||||||
{id}
|
{id}
|
||||||
|
@ -68,10 +62,10 @@
|
||||||
{required}
|
{required}
|
||||||
bind:value
|
bind:value
|
||||||
/>
|
/>
|
||||||
<div class="peer-invalid:flex hidden my-auto">
|
<div class="hidden my-auto peer-invalid:flex">
|
||||||
<CircleAlert />
|
<CircleAlert />
|
||||||
</div>
|
</div>
|
||||||
<div class="peer-invalid:hidden my-auto">
|
<div class="my-auto peer-invalid:hidden">
|
||||||
<Check />
|
<Check />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
viewBox="0 0 1200 628"
|
viewBox="0 0 1200 628"
|
||||||
version="1.1"
|
version="1.1"
|
||||||
id="svg1"
|
id="svg1"
|
||||||
|
class="transition-colors fill-text"
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
xmlns:
|
xmlns:
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
Before Width: | Height: | Size: 291 KiB After Width: | Height: | Size: 291 KiB |
|
@ -15,9 +15,11 @@
|
||||||
if ($darkMode) {
|
if ($darkMode) {
|
||||||
console.log('[ThemeHandler.svelte] Setting dark mode from store');
|
console.log('[ThemeHandler.svelte] Setting dark mode from store');
|
||||||
html.classList.add('dark');
|
html.classList.add('dark');
|
||||||
|
html.classList.add('frappe');
|
||||||
} else {
|
} else {
|
||||||
console.log('[ThemeHandler.svelte] Setting light mode from store');
|
console.log('[ThemeHandler.svelte] Setting light mode from store');
|
||||||
html.classList.remove('dark');
|
html.classList.remove('dark');
|
||||||
|
html.classList.remove('frappe');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -31,9 +33,11 @@
|
||||||
if (darkMode) {
|
if (darkMode) {
|
||||||
console.log('[ThemeHandler.svelte] Setting dark mode from localStorage');
|
console.log('[ThemeHandler.svelte] Setting dark mode from localStorage');
|
||||||
html.classList.add('dark');
|
html.classList.add('dark');
|
||||||
|
html.classList.add('frappe');
|
||||||
} else {
|
} else {
|
||||||
console.log('[ThemeHandler.svelte] Setting light mode from localStorage');
|
console.log('[ThemeHandler.svelte] Setting light mode from localStorage');
|
||||||
html.classList.remove('dark');
|
html.classList.remove('dark');
|
||||||
|
html.classList.remove('frappe');
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
import Footer from '$lib/components/Footer.svelte';
|
import Footer from '$lib/components/Footer.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="w-full min-h-screen">
|
<div class="my-2 w-full min-h-screen">
|
||||||
<div class="w-full h-12">
|
<div class="w-full h-12">
|
||||||
<Header></Header>
|
<Header></Header>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
|
||||||
import { Toaster } from 'svelte-sonner';
|
import { Toaster } from 'svelte-sonner';
|
||||||
|
import { CircleAlert, TriangleAlert, Info, Check, Loader } from 'lucide-svelte';
|
||||||
|
|
||||||
import { darkMode, user } from '$lib/stores.js';
|
import { darkMode, user } from '$lib/stores.js';
|
||||||
import ThemeHandler from '$lib/components/ThemeHandler.svelte';
|
import ThemeHandler from '$lib/components/ThemeHandler.svelte';
|
||||||
|
@ -14,7 +15,25 @@
|
||||||
|
|
||||||
<PageMeta title="cirro's file uploader" />
|
<PageMeta title="cirro's file uploader" />
|
||||||
<ThemeHandler />
|
<ThemeHandler />
|
||||||
<Toaster theme={$darkMode ? 'dark' : 'light'} position={'bottom-center'} />
|
<Toaster
|
||||||
|
position={'bottom-center'}
|
||||||
|
toastOptions={{
|
||||||
|
classes: {
|
||||||
|
toast: '!bg-crust !fill-text !border-crust',
|
||||||
|
title: '!text-text',
|
||||||
|
description: '!text-subtext0',
|
||||||
|
actionButton: 'bg-zinc-400',
|
||||||
|
cancelButton: 'bg-orange-400',
|
||||||
|
closeButton: 'bg-lime-400'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Loader size="20" class="animate-spin text-text" slot="loading-icon" />
|
||||||
|
<Check size="20" class="text-text" slot="success-icon" />
|
||||||
|
<CircleAlert size="20" class="text-text" slot="error-icon" />
|
||||||
|
<Info size="20" class="text-text" slot="info-icon" />
|
||||||
|
<TriangleAlert size="20" class="text-text" slot="warning-icon" />
|
||||||
|
</Toaster>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
@ -30,9 +30,7 @@
|
||||||
<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
|
<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
|
||||||
<div class="flex flex-col space-y-1.5">
|
<div class="flex flex-col space-y-1.5">
|
||||||
<div>
|
<div>
|
||||||
<div class="transition-colors fill-black dark:fill-white">
|
<Logo />
|
||||||
<Logo />
|
|
||||||
</div>
|
|
||||||
<p>Currently hosting <strong>0</strong> files.</p>
|
<p>Currently hosting <strong>0</strong> files.</p>
|
||||||
<p class="italic">The best file uploader <strong>ever!!!</strong></p>
|
<p class="italic">The best file uploader <strong>ever!!!</strong></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,5 +6,9 @@ export default {
|
||||||
extend: {},
|
extend: {},
|
||||||
container: { center: true }
|
container: { center: true }
|
||||||
},
|
},
|
||||||
plugins: []
|
plugins: [
|
||||||
|
require('@catppuccin/tailwindcss')({
|
||||||
|
defaultFlavour: 'latte'
|
||||||
|
})
|
||||||
|
]
|
||||||
};
|
};
|
||||||
|
|
|
@ -15,6 +15,11 @@
|
||||||
"@jridgewell/gen-mapping" "^0.3.5"
|
"@jridgewell/gen-mapping" "^0.3.5"
|
||||||
"@jridgewell/trace-mapping" "^0.3.24"
|
"@jridgewell/trace-mapping" "^0.3.24"
|
||||||
|
|
||||||
|
"@catppuccin/tailwindcss@^0.1.6":
|
||||||
|
version "0.1.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/@catppuccin/tailwindcss/-/tailwindcss-0.1.6.tgz#d97c491e1523ead83009e32d0a34c364c2a0ca5b"
|
||||||
|
integrity sha512-V+Y0AwZ5SSyvOVAcDl7Ng30xy+m82OKnEJ+9+kcZZ7lRyXuZrAb2GScdq9XR3v+ggt8qiZ/G4TvaC9cJ88AAXA==
|
||||||
|
|
||||||
"@esbuild/aix-ppc64@0.19.12":
|
"@esbuild/aix-ppc64@0.19.12":
|
||||||
version "0.19.12"
|
version "0.19.12"
|
||||||
resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
|
resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
|
||||||
|
|
Loading…
Reference in a new issue