diff --git a/public/.gitkeep b/public/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/public/tauri.svg b/public/tauri.svg deleted file mode 100644 index 31b62c9..0000000 --- a/public/tauri.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json index 4cdbf49..a5dc0f4 100644 --- a/src-tauri/capabilities/default.json +++ b/src-tauri/capabilities/default.json @@ -2,9 +2,12 @@ "$schema": "../gen/schemas/desktop-schema.json", "identifier": "default", "description": "Capability for the main window", - "windows": ["main"], + "windows": [ + "main" + ], "permissions": [ "core:default", - "opener:default" + "opener:default", + "core:window:allow-start-dragging" ] -} +} \ No newline at end of file diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 0cfd0c2..6475839 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -13,8 +13,14 @@ "windows": [ { "title": "comfy-downloader", - "width": 800, - "height": 600 + "width": 1200, + "height": 800, + "minWidth": 1200, + "minHeight": 800, + "resizable": true, + "hiddenTitle": true, + "titleBarStyle": "Overlay", + "theme": "Dark" } ], "security": { @@ -32,4 +38,4 @@ "icons/icon.ico" ] } -} +} \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 233df20..0000000 --- a/src/App.css +++ /dev/null @@ -1,116 +0,0 @@ -.logo.vite:hover { - filter: drop-shadow(0 0 2em #747bff); -} - -.logo.solid:hover { - filter: drop-shadow(0 0 2em #2f5d90); -} -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - - color: #0f0f0f; - background-color: #f6f6f6; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -.container { - margin: 0; - padding-top: 10vh; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: 0.75s; -} - -.logo.tauri:hover { - filter: drop-shadow(0 0 2em #24c8db); -} - -.row { - display: flex; - justify-content: center; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - -h1 { - text-align: center; -} - -input, -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - color: #0f0f0f; - background-color: #ffffff; - transition: border-color 0.25s; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -} - -button { - cursor: pointer; -} - -button:hover { - border-color: #396cd8; -} -button:active { - border-color: #396cd8; - background-color: #e8e8e8; -} - -input, -button { - outline: none; -} - -#greet-input { - margin-right: 5px; -} - -@media (prefers-color-scheme: dark) { - :root { - color: #f6f6f6; - background-color: #2f2f2f; - } - - a:hover { - color: #24c8db; - } - - input, - button { - color: #ffffff; - background-color: #0f0f0f98; - } - button:active { - background-color: #0f0f0f69; - } -} diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 128013f..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { createSignal } from "solid-js"; -import logo from "./assets/logo.svg"; -import { invoke } from "@tauri-apps/api/core"; -import "./App.css"; - -function App() { - const [greetMsg, setGreetMsg] = createSignal(""); - const [name, setName] = createSignal(""); - - async function greet() { - // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/ - setGreetMsg(await invoke("greet", { name: name() })); - } - - return ( -
-

Welcome to Tauri + Solid

- -
- - - - - - - - - -
-

Click on the Tauri, Vite, and Solid logos to learn more.

- -
{ - e.preventDefault(); - greet(); - }} - > - setName(e.currentTarget.value)} - placeholder="Enter a name..." - /> - -
-

{greetMsg()}

-
- ); -} - -export default App; diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index 025aa30..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..1d0b498 --- /dev/null +++ b/src/index.css @@ -0,0 +1,16 @@ +@import 'tailwindcss'; +@import './theme.css'; + +@layer base { + html, + body { + @apply scheme-dark size-full bg-surface text-on-surface select-none overflow-hidden; + &[data-scheme='dark'] { + @apply scheme-dark; + } + } + + #root { + @apply size-full overflow-hidden; + } +} diff --git a/src/index.tsx b/src/index.tsx index 26b5517..6f34038 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,9 @@ /* @refresh reload */ -import { render } from "solid-js/web"; -import App from "./App"; +// Load global styles first. +import './index.css'; -render(() => , document.getElementById("root") as HTMLElement); +// Load components. +import { Router } from '@solidjs/router'; +import { render } from 'solid-js/web'; + +render(() => , document.getElementById('root') as HTMLElement); diff --git a/src/theme.css b/src/theme.css new file mode 100644 index 0000000..5726533 --- /dev/null +++ b/src/theme.css @@ -0,0 +1,277 @@ +@theme inline { + --color-primary: light-dark(#9d0035, #9d0035); + --color-primary-hover: light-dark(#dd1b65, #dd1b65); + --color-primary-active: light-dark(#7f0020, #7f0020); + --color-primary-focus: light-dark(#ff5088, #ff5088); + --color-primary-disabled: light-dark(#766568, #766568); + --color-on-primary: light-dark(#ffffff, #ffffff); + --color-on-primary-disabled: light-dark(#ffffff, #ffffff); + --color-swatch-primary-10: light-dark(#2f0000, #2f0000); + --color-swatch-primary-15: light-dark(#410000, #410000); + --color-swatch-primary-20: light-dark(#530005, #530005); + --color-swatch-primary-25: light-dark(#65000f, #65000f); + --color-swatch-primary-30: light-dark(#76001a, #76001a); + --color-swatch-primary-35: light-dark(#880026, #880026); + --color-swatch-primary-40: light-dark(#9a0033, #9a0033); + --color-swatch-primary-50: light-dark(#be004d, #be004d); + --color-swatch-primary-60: light-dark(#e32469, #e32469); + --color-swatch-primary-70: light-dark(#ff4f87, #ff4f87); + --color-swatch-primary-75: light-dark(#ff6196, #ff6196); + --color-swatch-primary-80: light-dark(#ff72a5, #ff72a5); + --color-swatch-primary-85: light-dark(#ff83b5, #ff83b5); + --color-swatch-primary-90: light-dark(#ff95c5, #ff95c5); + --color-swatch-primary-95: light-dark(#ffa6d5, #ffa6d5); + --color-swatch-primary-98: light-dark(#ffb0df, #ffb0df); + --color-secondary: light-dark(#890073, #890073); + --color-secondary-hover: light-dark(#c630aa, #c630aa); + --color-secondary-active: light-dark(#6e005b, #6e005b); + --color-secondary-focus: light-dark(#f05bd1, #f05bd1); + --color-secondary-disabled: light-dark(#73666f, #73666f); + --color-on-secondary: light-dark(#fffffe, #fffffe); + --color-on-secondary-disabled: light-dark(#ffffff, #ffffff); + --color-swatch-secondary-10: light-dark(#23001d, #23001d); + --color-swatch-secondary-15: light-dark(#34002a, #34002a); + --color-swatch-secondary-20: light-dark(#450038, #450038); + --color-swatch-secondary-25: light-dark(#550046, #550046); + --color-swatch-secondary-30: light-dark(#660054, #660054); + --color-swatch-secondary-35: light-dark(#760063, #760063); + --color-swatch-secondary-40: light-dark(#870071, #870071); + --color-swatch-secondary-50: light-dark(#a90090, #a90090); + --color-swatch-secondary-60: light-dark(#cc36af, #cc36af); + --color-swatch-secondary-70: light-dark(#ef5ad0, #ef5ad0); + --color-swatch-secondary-75: light-dark(#ff6be0, #ff6be0); + --color-swatch-secondary-80: light-dark(#ff7cf1, #ff7cf1); + --color-swatch-secondary-85: light-dark(#ff8cff, #ff8cff); + --color-swatch-secondary-90: light-dark(#ff9dff, #ff9dff); + --color-swatch-secondary-95: light-dark(#ffaeff, #ffaeff); + --color-swatch-secondary-98: light-dark(#ffb8ff, #ffb8ff); + --color-tertiary: light-dark(#a00000, #a00000); + --color-tertiary-hover: light-dark(#e02b00, #e02b00); + --color-tertiary-active: light-dark(#820000, #820000); + --color-tertiary-focus: light-dark(#ff5b1f, #ff5b1f); + --color-tertiary-disabled: light-dark(#776661, #776661); + --color-on-tertiary: light-dark(#ffffff, #ffffff); + --color-on-tertiary-disabled: light-dark(#ffffff, #ffffff); + --color-swatch-tertiary-10: light-dark(#310000, #310000); + --color-swatch-tertiary-15: light-dark(#440000, #440000); + --color-swatch-tertiary-20: light-dark(#560000, #560000); + --color-swatch-tertiary-25: light-dark(#680000, #680000); + --color-swatch-tertiary-30: light-dark(#790000, #790000); + --color-swatch-tertiary-35: light-dark(#8b0000, #8b0000); + --color-swatch-tertiary-40: light-dark(#9d0000, #9d0000); + --color-swatch-tertiary-50: light-dark(#c10000, #c10000); + --color-swatch-tertiary-60: light-dark(#e63300, #e63300); + --color-swatch-tertiary-70: light-dark(#ff591d, #ff591d); + --color-swatch-tertiary-75: light-dark(#ff6b34, #ff6b34); + --color-swatch-tertiary-80: light-dark(#ff7c47, #ff7c47); + --color-swatch-tertiary-85: light-dark(#ff8e59, #ff8e59); + --color-swatch-tertiary-90: light-dark(#ff9f6a, #ff9f6a); + --color-swatch-tertiary-95: light-dark(#ffb07b, #ffb07b); + --color-swatch-tertiary-98: light-dark(#ffba85, #ffba85); + --color-accent: light-dark(#00685d, #00685d); + --color-accent-hover: light-dark(#00a091, #00a091); + --color-accent-active: light-dark(#004f47, #004f47); + --color-accent-focus: light-dark(#00c7b6, #00c7b6); + --color-accent-disabled: light-dark(#5c6f6c, #5c6f6c); + --color-on-accent: light-dark(#ffffff, #ffffff); + --color-on-accent-disabled: light-dark(#ffffff, #ffffff); + --color-swatch-accent-10: light-dark(#000c0f, #000c0f); + --color-swatch-accent-15: light-dark(#001b1b, #001b1b); + --color-swatch-accent-20: light-dark(#002927, #002927); + --color-swatch-accent-25: light-dark(#003833, #003833); + --color-swatch-accent-30: light-dark(#004740, #004740); + --color-swatch-accent-35: light-dark(#00564e, #00564e); + --color-swatch-accent-40: light-dark(#00665c, #00665c); + --color-swatch-accent-50: light-dark(#008578, #008578); + --color-swatch-accent-60: light-dark(#00a596, #00a596); + --color-swatch-accent-70: light-dark(#00c6b5, #00c6b5); + --color-swatch-accent-75: light-dark(#00d7c5, #00d7c5); + --color-swatch-accent-80: light-dark(#00e8d5, #00e8d5); + --color-swatch-accent-85: light-dark(#00f9e6, #00f9e6); + --color-swatch-accent-90: light-dark(#00fff6, #00fff6); + --color-swatch-accent-95: light-dark(#00ffff, #00ffff); + --color-swatch-accent-98: light-dark(#00ffff, #00ffff); + --color-neutral: light-dark(#908f8e, #3c3a3a); + --color-neutral-hover: light-dark(#b0afae, #71706f); + --color-neutral-active: light-dark(#696968, #2a2828); + --color-neutral-focus: light-dark(#c6c5c4, #989696); + --color-neutral-disabled: light-dark(#a4a4a4, #5e5d5d); + --color-on-neutral: light-dark(#000000, #ebebea); + --color-on-neutral-disabled: light-dark(#000000, #ffffff); + --color-neutral-variant: light-dark(#727170, #565554); + --color-neutral-variant-hover: light-dark(#9b9999, #868484); + --color-neutral-variant-active: light-dark(#535251, #3e3d3c); + --color-neutral-variant-focus: light-dark(#b7b5b4, #a7a6a5); + --color-neutral-variant-disabled: light-dark(#8c8c8c, #747474); + --color-on-neutral-variant: light-dark(#ffffff, #ffffff); + --color-on-neutral-variant-disabled: light-dark(#ffffff, #ffffff); + --color-surface: light-dark(#f8f9f8, #040303); + --color-surface-hover: light-dark(#fafbfa, #413f40); + --color-surface-active: light-dark(#b8b9b8, #020202); + --color-surface-focus: light-dark(#fbfcfb, #737172); + --color-surface-disabled: light-dark(#fafafa, #292929); + --color-on-surface: light-dark(#000000, #b7b7b6); + --color-on-surface-disabled: light-dark(#000000, #b4b4b3); + --color-surface-variant: light-dark(#cececd, #171616); + --color-surface-variant-hover: light-dark(#dcdcdb, #545252); + --color-surface-variant-active: light-dark(#989897, #0e0d0d); + --color-surface-variant-focus: light-dark(#e6e6e5, #818080); + --color-surface-variant-disabled: light-dark(#d7d7d7, #3d3d3d); + --color-on-surface-variant: light-dark(#000000, #c4c4c3); + --color-on-surface-variant-disabled: light-dark(#000000, #d1d1d0); + --color-shadow: light-dark(#040303, #040303); + --color-overlay: light-dark(#040304, #020202); + --color-outline: light-dark(#0b090a, #040304); + --color-outline-variant: light-dark(#0f0e0e, #010101); + --color-progressive: light-dark(#9c0000, #9c0000); + --color-progressive-hover: light-dark(#dc3021, #dc3021); + --color-progressive-active: light-dark(#7f0000, #7f0000); + --color-progressive-focus: light-dark(#ff5d49, #ff5d49); + --color-progressive-disabled: light-dark(#766663, #766663); + --color-on-progressive: light-dark(#ffffff, #ffffff); + --color-on-progressive-disabled: light-dark(#ffffff, #ffffff); + --color-swatch-progressive-10: light-dark(#2f0000, #2f0000); + --color-swatch-progressive-15: light-dark(#410000, #410000); + --color-swatch-progressive-20: light-dark(#530000, #530000); + --color-swatch-progressive-25: light-dark(#650000, #650000); + --color-swatch-progressive-30: light-dark(#770000, #770000); + --color-swatch-progressive-35: light-dark(#880000, #880000); + --color-swatch-progressive-40: light-dark(#9a0000, #9a0000); + --color-swatch-progressive-50: light-dark(#be0000, #be0000); + --color-swatch-progressive-60: light-dark(#e23627, #e23627); + --color-swatch-progressive-70: light-dark(#ff5c48, #ff5c48); + --color-swatch-progressive-75: light-dark(#ff6d58, #ff6d58); + --color-swatch-progressive-80: light-dark(#ff7e68, #ff7e68); + --color-swatch-progressive-85: light-dark(#ff8f77, #ff8f77); + --color-swatch-progressive-90: light-dark(#ffa087, #ffa087); + --color-swatch-progressive-95: light-dark(#ffb197, #ffb197); + --color-swatch-progressive-98: light-dark(#ffbba1, #ffbba1); + --color-defensive: light-dark(#004c89, #004c89); + --color-defensive-hover: light-dark(#2d81c2, #2d81c2); + --color-defensive-active: light-dark(#003470, #003470); + --color-defensive-focus: light-dark(#55a6ea, #55a6ea); + --color-defensive-disabled: light-dark(#646b71, #646b71); + --color-on-defensive: light-dark(#ffffff, #ffffff); + --color-on-defensive-disabled: light-dark(#ffffff, #ffffff); + --color-swatch-defensive-10: light-dark(#00002e, #00002e); + --color-swatch-defensive-15: light-dark(#00003d, #00003d); + --color-swatch-defensive-20: light-dark(#00104b, #00104b); + --color-swatch-defensive-25: light-dark(#001f5a, #001f5a); + --color-swatch-defensive-30: light-dark(#002d69, #002d69); + --color-swatch-defensive-35: light-dark(#003c78, #003c78); + --color-swatch-defensive-40: light-dark(#004a87, #004a87); + --color-swatch-defensive-50: light-dark(#0567a7, #0567a7); + --color-swatch-defensive-60: light-dark(#3386c8, #3386c8); + --color-swatch-defensive-70: light-dark(#54a5e9, #54a5e9); + --color-swatch-defensive-75: light-dark(#64b5fa, #64b5fa); + --color-swatch-defensive-80: light-dark(#74c5ff, #74c5ff); + --color-swatch-defensive-85: light-dark(#84d5ff, #84d5ff); + --color-swatch-defensive-90: light-dark(#95e6ff, #95e6ff); + --color-swatch-defensive-95: light-dark(#a5f7ff, #a5f7ff); + --color-swatch-defensive-98: light-dark(#afffff, #afffff); + + --breakpoint-*: initial; + --breakpoint-md: 600px; + --breakpoint-exp: 840px; + --breakpoint-lg: 1200px; + --breakpoint-xl: 1600px; + + --font-sans: 'Noto Sans CJK', 'Roboto', 'Inter', Avenir, Helvetica, Arial, ui-sans-serif, + system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-serif: 'Noto Serif CJK', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --base-font-size: 16px; + + --text-*: initial; + --text-display-lg: 3.5625rem; + --text-display-lg--line-height: 4rem; + --text-display-lg--font-weight: 400; + + --text-display-md: 2.8125rem; + --text-display-md--line-height: 3.25rem; + --text-display-md--font-weight: 400; + + --text-display-sm: 2.25rem; + --text-display-sm--line-height: 2.75rem; + --text-display-sm--font-weight: 400; + + --text-headline-lg: 2rem; + --text-headline-lg--line-height: 2.5rem; + --text-headline-lg--font-weight: 400; + + --text-headline-md: 1.75rem; + --text-headline-md--line-height: 2.25rem; + --text-headline-md--font-weight: 400; + + --text-headline-sm: 1.5rem; + --text-headline-sm--line-height: 2rem; + --text-headline-sm--font-weight: 400; + + --text-title-lg: 1.375rem; + --text-title-lg--line-height: 1.75rem; + --text-title-lg--font-weight: 400; + + --text-title-md: 1rem; + --text-title-md--line-height: 1.5rem; + --text-title-md--font-weight: 400; + + --text-title-sm: 0.875rem; + --text-title-sm--line-height: 1.25rem; + --text-title-sm--font-weight: 500; + + --text-body-lg: 1rem; + --text-body-lg--line-height: 1.5rem; + --text-body-lg--font-weight: 400; + + --text-body-md: 0.875rem; + --text-body-md--line-height: 1.25rem; + --text-body-md--font-weight: 400; + + --text-body-sm: 0.75rem; + --text-body-sm--line-height: 1rem; + --text-body-sm--font-weight: 400; + + --text-body-xs: 0.625rem; + --text-body-xs--line-height: 0.75rem; + --text-body-xs--font-weight: 400; + + --text-label-lg: 0.875rem; + --text-label-lg--line-height: 1.25rem; + --text-label-lg--font-weight: 500; + + --text-label-md: 0.75rem; + --text-label-md--line-height: 1rem; + --text-label-md--font-weight: 500; + --text-label-md--text-transform: none; + + --text-label-sm: 0.6875rem; + --text-label-sm--line-height: 1rem; + --text-label-sm--font-weight: 500; + + --elevation-0: none; + --elevation-1: 0 1px 3px 1px --alpha(var(--color-shadow) / 15%), + 0 1px 2px 0 --alpha(var(--color-shadow) / 30%); + --elevation-2: 0 2px 6px 2px --alpha(var(--color-shadow) / 15%), + 0 1px 2px 0 --alpha(var(--color-shadow) / 30%); + --elevation-3: 0 4px 8px 3px --alpha(var(--color-shadow) / 15%), + 0 1px 3px 0 --alpha(var(--color-shadow) / 30%); + --elevation-4: 0 6px 10px 4px --alpha(var(--color-shadow) / 15%), + 0 2px 3px 0 --alpha(var(--color-shadow) / 30%); + --elevation-5: 0 8px 12px 6px --alpha(var(--color-shadow) / 15%), + 0 4px 4px 0 --alpha(var(--color-shadow) / 30%); + + --radius-*: initial; + --basis-radius: 0.5; + --radius-none: 0; + --radius-xs: calc(0.25rem * var(--basis-radius)); + --radius-sm: calc(0.5rem * var(--basis-radius)); + --radius-md: calc(0.75rem * var(--basis-radius)); + --radius-lg: calc(1rem * var(--basis-radius)); + --radius-xl: calc(1.75rem * var(--basis-radius)); + --radius-full: calc(infinity * 1px); +} + +/* prettier-ignore */ +@utility elevation-* { + box-shadow: --value(--elevation-*); +}