From 1421152a9356c7def86143dfb31a3586d5491d55 Mon Sep 17 00:00:00 2001 From: Wolfgang Müller Date: Fri, 14 Feb 2025 11:57:03 +0100 Subject: frontend: Migrate to Tailwind 4.0 --- frontend/src/app.css | 285 ++++++++++++--------- frontend/src/lib/components/Badge.svelte | 2 +- frontend/src/lib/components/Card.svelte | 2 +- frontend/src/lib/components/Cardlet.svelte | 2 +- frontend/src/lib/components/Dropdown.svelte | 2 +- frontend/src/lib/components/Spinner.svelte | 25 +- frontend/src/lib/containers/Cardlets.svelte | 2 +- frontend/src/lib/containers/Cards.svelte | 2 +- frontend/src/lib/filter/ComicFilterForm.svelte | 16 +- frontend/src/lib/filter/components/Filter.svelte | 27 +- .../src/lib/filter/components/FilterForm.svelte | 4 +- frontend/src/lib/gallery/GalleryPage.svelte | 2 +- frontend/src/lib/icons/Artist.svelte | 1 + frontend/src/lib/icons/Character.svelte | 1 + frontend/src/lib/icons/Circle.svelte | 1 + frontend/src/lib/icons/World.svelte | 1 + frontend/src/lib/pagination/Target.svelte | 5 +- frontend/src/lib/pills/AssociationPill.svelte | 34 ++- frontend/src/lib/pills/Pill.svelte | 4 +- .../src/lib/reader/components/PageIndicator.svelte | 2 +- .../lib/scraper/components/SelectorButton.svelte | 2 +- frontend/src/lib/selection/SelectionOverlay.svelte | 4 +- frontend/src/lib/statistics/StatGroup.svelte | 2 +- frontend/src/lib/tabs/AddOverlay.svelte | 2 +- frontend/src/lib/tabs/Tabs.svelte | 12 +- frontend/src/lib/toolbar/MarkSelection.svelte | 2 +- 26 files changed, 210 insertions(+), 234 deletions(-) create mode 100644 frontend/src/lib/icons/Artist.svelte create mode 100644 frontend/src/lib/icons/Character.svelte create mode 100644 frontend/src/lib/icons/Circle.svelte create mode 100644 frontend/src/lib/icons/World.svelte (limited to 'frontend/src') diff --git a/frontend/src/app.css b/frontend/src/app.css index f8322d0..ea2f05a 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -1,213 +1,242 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; +@config '../tailwind.config.cjs'; +@plugin "@iconify/tailwind4"; + +@theme { + --breakpoint-3xl: 120rem; +} @layer base { - body { - display: grid; - grid-template-columns: 3rem 1fr; - scrollbar-color: theme('colors.gray.500') rgba(0, 0, 0, 0); - font-family: 'Noto Sans', sans-serif; + button:not(:disabled), + [role='button']:not(:disabled) { + cursor: pointer; } +} - input, - textarea { - @apply w-full rounded bg-slate-900 p-[.4rem]; - } +@utility btn { + @apply focus-thick focus-slate flex items-center justify-center rounded-xs p-2 text-white transition-colors disabled:opacity-40; +} - input, - textarea, - select { - @apply focus-thin focus-slate; - } +@utility btn-xs { + @apply btn rounded-xs p-0.5 py-0; +} - button { - @apply focus-thick focus-slate; - } +@utility btn-blue { + @apply btn bg-blue-700 hover:bg-blue-600 disabled:bg-blue-900; +} - a { - @apply focus-thick focus-blue; - } +@utility btn-rose { + @apply btn bg-rose-700 hover:bg-rose-600 disabled:bg-rose-900; +} - label { - @apply mb-0.5 inline-block; - } +@utility btn-slate { + @apply btn bg-slate-700 hover:bg-slate-600 disabled:bg-slate-800; +} - form { - @apply flex flex-col gap-4 p-px text-sm; - } +@utility btn-indigo { + @apply btn bg-indigo-700 hover:bg-indigo-600 disabled:bg-indigo-800; +} - .rounded-group > * { - @apply rounded-none first:rounded-l-sm last:rounded-r-sm !important; - } +@utility icon-xs { + @apply text-[18px]; +} - .rounded-group-start > * { - @apply rounded-none first:rounded-l-sm !important; - } +@utility icon-base { + @apply text-[24px]; +} - .rounded-group-end > * { - @apply rounded-none last:rounded-r-sm !important; - } +@utility icon-lg { + @apply text-[28px]; +} - .grid-labels { - @apply grid grid-cols-[1fr_5fr] gap-2; +@utility icon-2xl { + @apply text-[48px]; +} + +@utility icon-gray { + &.hoverable:hover { + @apply text-gray-200/80; } - header { - grid-area: header; + &.dim { + @apply text-gray-100/40; } +} - aside { - overflow: auto; - grid-area: sidebar; - @apply lg:w-[28rem] xl:w-[32rem] min-[1920px]:w-[36rem]; +@utility hoverable { + &.icon-gray:hover { + @apply text-gray-200/80; } - main { - grid-area: main; + &.icon-yellow:hover { + @apply text-yellow-300/80; } } -@layer components { - .btn { - @apply focus-thick focus-slate flex items-center justify-center rounded-sm p-2 text-white transition-colors disabled:opacity-40; +@utility dim { + &.icon-gray { + @apply text-gray-100/40; } - .btn-xs { - @apply btn rounded-sm p-0.5 py-0; + &.icon-yellow { + @apply text-slate-100/40; } +} - .btn-blue { - @apply btn bg-blue-700 hover:bg-blue-600 disabled:bg-blue-900; - } +@utility icon-yellow { + @apply text-yellow-300; - .btn-rose { - @apply btn bg-rose-700 hover:bg-rose-600 disabled:bg-rose-900; + &.hoverable:hover { + @apply text-yellow-300/80; } - .btn-slate { - @apply btn bg-slate-700 hover:bg-slate-600 disabled:bg-slate-800; + &.dim { + @apply text-slate-100/40; } +} - .btn-indigo { - @apply btn bg-indigo-700 hover:bg-indigo-600 disabled:bg-indigo-800; - } +@utility toggled { + @apply bg-indigo-700 hover:bg-indigo-600; +} - .icon-xs { - @apply text-[18px]; - } +@utility floating { + @apply rounded-full bg-black/50 p-1 text-white/80 backdrop-blur-xs hover:bg-black/50 hover:text-white; +} - .icon-base { - @apply text-[24px]; - } +@utility ellipsis-nowrap { + @apply overflow-hidden text-ellipsis whitespace-nowrap; +} - .icon-lg { - @apply text-[28px]; - } +@utility rounded-inherit { + border-radius: inherit; +} - .icon-2xl { - @apply text-[48px]; - } +@utility grid-card-h { + grid-template-columns: 210px 1fr; + grid-template-rows: 300px; +} - .icon-gray.hoverable:hover { - @apply text-gray-200/80; - } +@utility grid-card-cover-only { + @apply !grid-card-h; +} - .icon-gray.dim { - @apply text-gray-100/40; - } +@utility grid-card-v { + grid-template-columns: 1fr; + grid-template-rows: 500px 1fr; +} - .icon-yellow { - @apply text-yellow-300; - } +@utility focus-thin { + @apply focus:isolate focus:outline; +} - .icon-yellow.hoverable:hover { - @apply text-yellow-300/80; +@utility focus-thick { + @apply focus-visible:isolate focus-visible:outline; +} + +@utility focus-background { + @apply focus-visible:bg-indigo-600 focus-visible:outline-hidden; +} + +@utility focus-slate { + @apply focus:outline-slate-400 focus-visible:outline-slate-400; +} + +@utility focus-blue { + @apply focus:outline-blue-600 focus-visible:outline-blue-600; +} + +@layer base { + body { + display: grid; + grid-template-columns: 3rem 1fr; + scrollbar-color: var(--color-gray-500) rgba(0, 0, 0, 0); + font-family: 'Noto Sans', sans-serif; } - .icon-yellow.dim { - @apply text-slate-100/40; + input, + textarea { + @apply w-full rounded-sm bg-slate-900 p-[.4rem]; } -} -@layer utilities { - .toggled { - @apply bg-indigo-700 hover:bg-indigo-600; + input, + textarea, + select { + @apply focus-thin focus-slate; } - .floating { - @apply rounded-full bg-black/50 p-1 text-white/80 backdrop-blur-sm hover:bg-black/50 hover:text-white; + button { + @apply focus-thick focus-slate; } - .ellipsis-nowrap { - @apply overflow-hidden text-ellipsis whitespace-nowrap; + a { + @apply focus-thick focus-blue; } - .rounded-inherit { - border-radius: inherit; + label { + @apply mb-0.5 inline-block; } - .grid-card-h { - grid-template-columns: 210px 1fr; - grid-template-rows: 300px; + form { + @apply flex flex-col gap-4 p-px text-sm; } - .grid-card-cover-only { - @apply !grid-card-h; + .rounded-group > * { + @apply rounded-none! first:rounded-l-xs! last:rounded-r-xs!; } - .grid-card-v { - grid-template-columns: 1fr; - grid-template-rows: 500px 1fr; + .rounded-group-start > * { + @apply rounded-none! first:rounded-l-xs!; } - .focus-thin { - @apply focus:isolate focus:outline focus:outline-1; + .rounded-group-end > * { + @apply rounded-none! last:rounded-r-xs!; } - .focus-thick { - @apply focus-visible:isolate focus-visible:outline; + .grid-labels { + @apply grid grid-cols-[1fr_5fr] gap-2; } - .focus-background { - @apply focus-visible:bg-indigo-600 focus-visible:outline-none; + header { + grid-area: header; } - .focus-slate { - @apply focus:outline-slate-400 focus-visible:outline-slate-400; + aside { + overflow: auto; + grid-area: sidebar; + @apply 3xl:w-[36rem] lg:w-[28rem] xl:w-[32rem]; } - .focus-blue { - @apply focus:outline-blue-600 focus-visible:outline-blue-600; + main { + grid-area: main; } } .svelecte { - --sv-bg: theme(colors.slate.900); - --sv-disabled-bg: theme(colors.slate.900); + --sv-bg: var(--color-slate-900); + --sv-disabled-bg: var(--color-slate-900); --sv-border: 1px solid rgba(0, 0, 0, 0); - --sv-dropdown-active-bg: theme(colors.indigo.800); - --sv-item-selected-bg: theme(colors.indigo.800); - --sv-item-btn-bg-hover: theme(colors.rose.900); - --sv-item-btn-color-hover: theme(colors.rose.100); - --sv-separator-bg: theme(colors.gray.700); + --sv-dropdown-active-bg: var(--color-indigo-800); + --sv-item-selected-bg: var(--color-indigo-800); + --sv-item-btn-bg-hover: var(--color-rose-900); + --sv-item-btn-color-hover: var(--color-rose-100); + --sv-separator-bg: var(--color-gray-700); --sv-min-height: 38px; --sv-item-wrap-padding: 3px 3px 3px 5px; --sv-selection-multi-wrap-padding: 3px 3px 3px 5px; } .svelecte.is-focused { - --sv-border: 1px solid theme(colors.slate.400); + --sv-border: 1px solid var(--color-slate-400); } .svelecte input::placeholder { - color: theme(colors.gray.500); + color: var(--color-gray-500); } .exclude .svelecte { - --sv-border: 1px solid theme(colors.red.900); - --sv-item-selected-bg: theme(colors.rose.800); - --sv-dropdown-active-bg: theme(colors.rose.800); + --sv-border: 1px solid var(--color-red-900); + --sv-item-selected-bg: var(--color-rose-800); + --sv-dropdown-active-bg: var(--color-rose-800); } .sv-item--btn { diff --git a/frontend/src/lib/components/Badge.svelte b/frontend/src/lib/components/Badge.svelte index 60cf727..8de5e34 100644 --- a/frontend/src/lib/components/Badge.svelte +++ b/frontend/src/lib/components/Badge.svelte @@ -7,7 +7,7 @@ {#if number > 0} {number} diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte index 45e1662..8066b42 100644 --- a/frontend/src/lib/components/Card.svelte +++ b/frontend/src/lib/components/Card.svelte @@ -49,7 +49,7 @@ (visible = !visible))} {#if visible}
{@render children?.()} diff --git a/frontend/src/lib/components/Spinner.svelte b/frontend/src/lib/components/Spinner.svelte index 1a471a7..d85c4f4 100644 --- a/frontend/src/lib/components/Spinner.svelte +++ b/frontend/src/lib/components/Spinner.svelte @@ -9,28 +9,7 @@ {#if show}
- +
{/if} - - diff --git a/frontend/src/lib/containers/Cardlets.svelte b/frontend/src/lib/containers/Cardlets.svelte index 5997a69..107ebee 100644 --- a/frontend/src/lib/containers/Cardlets.svelte +++ b/frontend/src/lib/containers/Cardlets.svelte @@ -6,7 +6,7 @@
{@render children?.()} diff --git a/frontend/src/lib/containers/Cards.svelte b/frontend/src/lib/containers/Cards.svelte index 36a4b86..ab1f0fb 100644 --- a/frontend/src/lib/containers/Cards.svelte +++ b/frontend/src/lib/containers/Cards.svelte @@ -5,6 +5,6 @@ let { children } = $props(); -
+
{@render children?.()}
diff --git a/frontend/src/lib/filter/ComicFilterForm.svelte b/frontend/src/lib/filter/ComicFilterForm.svelte index 7f0058d..8bf7af3 100644 --- a/frontend/src/lib/filter/ComicFilterForm.svelte +++ b/frontend/src/lib/filter/ComicFilterForm.svelte @@ -25,13 +25,7 @@ 0}> {#snippet include(type)} - + @@ -42,13 +36,7 @@ {/snippet} {#snippet exclude(type)} - + diff --git a/frontend/src/lib/filter/components/Filter.svelte b/frontend/src/lib/filter/components/Filter.svelte index c164cbb..4b39589 100644 --- a/frontend/src/lib/filter/components/Filter.svelte +++ b/frontend/src/lib/filter/components/Filter.svelte @@ -8,15 +8,16 @@ type: FilterType; options: ListItem[] | undefined; filter: Association | Enum; + wide?: boolean; } - let { title, type, options, filter }: Props = $props(); + let { title, type, options, filter, wide = false }: Props = $props(); let exclude = $derived(type === 'exclude'); const id = `${type}-${title.toLowerCase()}`; -
+
@@ -25,7 +26,7 @@ type="button" title="matches all" class:active={filter.mode === 'all'} - class="btn btn-xs" + class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800" onclick={() => (filter.mode = 'all')} > ∀ @@ -34,7 +35,7 @@ type="button" title="matches any of" class:active={filter.mode === 'any'} - class="btn btn-xs" + class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800" onclick={() => (filter.mode = 'any')} > ∃ @@ -43,7 +44,7 @@ type="button" title="matches exactly" class:active={filter.mode === 'exact'} - class="btn btn-xs" + class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800" onclick={() => (filter.mode = 'exact')} > = @@ -54,7 +55,7 @@ type="button" title="empty" class:active={filter.empty} - class="btn btn-xs" + class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800" onclick={() => (filter.empty = !filter.empty)} > ∅ @@ -63,17 +64,3 @@