diff options
Diffstat (limited to 'frontend/src')
26 files changed, 210 insertions, 234 deletions
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} <span - class="absolute -right-[3px] -top-[6px] z-[1] rounded-sm bg-teal-600 px-1 text-xs font-semibold drop-shadow" + class="absolute -top-1.5 -right-1 z-1 rounded-xs bg-teal-600 px-1 text-xs font-semibold drop-shadow-sm" transition:fade={fadeDefault} > {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 @@ <a {href} - class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30" + class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded-sm bg-slate-900 shadow-md shadow-slate-950/30" class:compact class:grid-card-cover-only={coverOnly} {onclick} diff --git a/frontend/src/lib/components/Cardlet.svelte b/frontend/src/lib/components/Cardlet.svelte index d0c0509..cfbbd58 100644 --- a/frontend/src/lib/components/Cardlet.svelte +++ b/frontend/src/lib/components/Cardlet.svelte @@ -14,7 +14,7 @@ <button type="button" - class="relative flex overflow-hidden rounded bg-slate-900 text-left shadow-md shadow-slate-950/20" + class="relative flex overflow-hidden rounded-sm bg-slate-900 text-left shadow-md shadow-slate-950/20" {title} {onclick} {onauxclick} diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte index ddd20a0..e2979e6 100644 --- a/frontend/src/lib/components/Dropdown.svelte +++ b/frontend/src/lib/components/Dropdown.svelte @@ -28,7 +28,7 @@ {@render button(() => (visible = !visible))} {#if visible} <div - class="absolute z-[1] mt-1 w-max rounded bg-slate-700 p-1 shadow-sm shadow-slate-900" + class="absolute z-1 mt-1 w-max rounded-sm bg-slate-700 p-1 shadow-xs shadow-slate-900" transition:fade={fadeFast} > {@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} <div class="flex h-full w-full items-center justify-center"> - <span class="spinner"></span> + <span class="h-16 w-16 animate-spin rounded-full border-4 border-white/80 border-b-transparent" + ></span> </div> {/if} - -<style lang="postcss"> - .spinner { - width: 64px; - height: 64px; - border: 5px solid theme(colors.gray.200); - border-bottom-color: transparent; - border-radius: 50%; - display: inline-block; - box-sizing: border-box; - animation: rotation 1s linear infinite; - } - - @keyframes rotation { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } -</style> 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 @@ </script> <div - class="grid gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 min-[1600px]:grid-cols-8 min-[1920px]:grid-cols-10" + class="3xl:grid-cols-10 grid gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8" in:fade={fadeDefault} > {@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(); </script> -<div class="grid gap-4 xl:grid-cols-2 min-[1920px]:grid-cols-3" in:fade|global={fadeDefault}> +<div class="3xl:grid-cols-3 grid gap-4 xl:grid-cols-2" in:fade|global={fadeDefault}> {@render children?.()} </div> 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 @@ <FilterForm type="grid" apply={filter.apply} expanded={filter.excludes > 0}> {#snippet include(type)} - <Filter - {type} - title="Tags" - options={tags} - filter={filter.include.tags} - --grid-column="span 2" - /> + <Filter {type} wide title="Tags" options={tags} filter={filter.include.tags} /> <Filter {type} title="Artists" options={artists} filter={filter.include.artists} /> <Filter {type} title="Circles" options={circles} filter={filter.include.circles} /> <Filter {type} title="Characters" options={characters} filter={filter.include.characters} /> @@ -42,13 +36,7 @@ <Filter {type} title="Languages" options={languages} filter={filter.include.languages} /> {/snippet} {#snippet exclude(type)} - <Filter - {type} - title="Tags" - options={tags} - filter={filter.exclude.tags} - --grid-column="span 2" - /> + <Filter {type} wide title="Tags" options={tags} filter={filter.exclude.tags} /> <Filter {type} title="Artists" options={artists} filter={filter.exclude.artists} /> <Filter {type} title="Circles" options={circles} filter={filter.exclude.circles} /> <Filter {type} title="Characters" options={characters} filter={filter.exclude.characters} /> 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<string> | Enum<string>; + 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()}`; </script> -<div class:exclude class="filter-container"> +<div class:exclude class:wide class="filter-container [&.wide]:col-span-2"> <div class="flex gap-2"> <label for={id}>{title}</label> <div class="ml-auto flex items-center gap-1 self-center text-xs"> @@ -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 @@ </div> <Select multi clearable {options} {id} bind:value={filter.values} /> </div> - -<style lang="postcss"> - button:hover { - @apply bg-slate-700; - } - - button.active { - @apply bg-indigo-800; - } - - .filter-container { - grid-column: var(--grid-column); - } -</style> diff --git a/frontend/src/lib/filter/components/FilterForm.svelte b/frontend/src/lib/filter/components/FilterForm.svelte index ed58ed9..a32faf8 100644 --- a/frontend/src/lib/filter/components/FilterForm.svelte +++ b/frontend/src/lib/filter/components/FilterForm.svelte @@ -38,9 +38,7 @@ </div> {/if} {:else} - <div - class="flex flex-wrap justify-center gap-2 [&>*]:basis-full xl:[&>*]:basis-1/3 2xl:[&>*]:basis-1/5" - > + <div class="flex flex-wrap justify-center gap-2 *:basis-full xl:*:basis-1/3 2xl:*:basis-1/5"> <div class="p-2"> {@render include?.('include')} </div> diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte index 3169d6d..f8a81a6 100644 --- a/frontend/src/lib/gallery/GalleryPage.svelte +++ b/frontend/src/lib/gallery/GalleryPage.svelte @@ -56,7 +56,7 @@ class:dim role="button" tabindex="0" - class="{span} focus-thick focus-blue relative overflow-hidden rounded" + class="{span} focus-thick focus-blue relative overflow-hidden rounded-sm" onclick={press} onkeydown={press} > diff --git a/frontend/src/lib/icons/Artist.svelte b/frontend/src/lib/icons/Artist.svelte new file mode 100644 index 0000000..04886ce --- /dev/null +++ b/frontend/src/lib/icons/Artist.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--person] -mx-px"></span> diff --git a/frontend/src/lib/icons/Character.svelte b/frontend/src/lib/icons/Character.svelte new file mode 100644 index 0000000..fbb3ecc --- /dev/null +++ b/frontend/src/lib/icons/Character.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--face]"></span> diff --git a/frontend/src/lib/icons/Circle.svelte b/frontend/src/lib/icons/Circle.svelte new file mode 100644 index 0000000..b54135c --- /dev/null +++ b/frontend/src/lib/icons/Circle.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--group] mx-px"></span> diff --git a/frontend/src/lib/icons/World.svelte b/frontend/src/lib/icons/World.svelte new file mode 100644 index 0000000..2d0320f --- /dev/null +++ b/frontend/src/lib/icons/World.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--public]"></span> diff --git a/frontend/src/lib/pagination/Target.svelte b/frontend/src/lib/pagination/Target.svelte index 6cbacbb..76e0d9e 100644 --- a/frontend/src/lib/pagination/Target.svelte +++ b/frontend/src/lib/pagination/Target.svelte @@ -19,9 +19,8 @@ <button {onclick} - class:bg-slate-700={active} - class:bg-slate-800={!active} - class="flex h-8 w-8 items-center justify-center rounded-sm p-0 text-base hover:text-white disabled:text-slate-600" + class:active + class="flex h-8 w-8 items-center justify-center rounded-sm p-0 text-base font-medium hover:bg-slate-700/50 hover:text-white disabled:text-slate-600 disabled:hover:bg-inherit [&.active]:bg-slate-700 [&:not(active)]:bg-slate-800" {disabled} > {@render children?.()} diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte index ffbc8c4..fec59b8 100644 --- a/frontend/src/lib/pills/AssociationPill.svelte +++ b/frontend/src/lib/pills/AssociationPill.svelte @@ -1,31 +1,27 @@ <script lang="ts"> + import Artist from '$lib/icons/Artist.svelte'; + import Character from '$lib/icons/Character.svelte'; + import Circle from '$lib/icons/Circle.svelte'; + import World from '$lib/icons/World.svelte'; + import type { Component } from 'svelte'; import Pill from './Pill.svelte'; type Association = 'artist' | 'circle' | 'world' | 'character'; let { name, type }: { name: string; type: Association } = $props(); + + const icons: Record<Association, Component> = { + artist: Artist, + character: Character, + circle: Circle, + world: World + }; + + const Icon = icons[type]; </script> <Pill {name}> {#snippet icon()} - <span class={`${type} icon-xs`}></span> + <Icon /> {/snippet} </Pill> - -<style lang="postcss"> - .artist { - @apply icon-[material-symbols--person] -mx-px; - } - - .character { - @apply icon-[material-symbols--face]; - } - - .circle { - @apply icon-[material-symbols--group] mx-px; - } - - .world { - @apply icon-[material-symbols--public]; - } -</style> diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte index 24d617d..5d5b5a8 100644 --- a/frontend/src/lib/pills/Pill.svelte +++ b/frontend/src/lib/pills/Pill.svelte @@ -15,12 +15,14 @@ let { name, tooltip, colour = 'zinc', icon }: Props = $props(); </script> -<div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}> +<div class="flex items-center rounded-sm border p-0.5 {colour}" title={tooltip}> {@render icon?.()} <span>{name}</span> </div> <style lang="postcss"> + @reference "tailwindcss/theme" + .pink { @apply border-pink-800 bg-pink-800/20 text-pink-200; } diff --git a/frontend/src/lib/reader/components/PageIndicator.svelte b/frontend/src/lib/reader/components/PageIndicator.svelte index 35190b3..3b11389 100644 --- a/frontend/src/lib/reader/components/PageIndicator.svelte +++ b/frontend/src/lib/reader/components/PageIndicator.svelte @@ -4,6 +4,6 @@ const reader = getReaderContext(); </script> -<div class="floating !p-2"> +<div class="floating p-2!"> {reader.page + 1}/{reader.pages.length} </div> diff --git a/frontend/src/lib/scraper/components/SelectorButton.svelte b/frontend/src/lib/scraper/components/SelectorButton.svelte index e976f91..48b2d66 100644 --- a/frontend/src/lib/scraper/components/SelectorButton.svelte +++ b/frontend/src/lib/scraper/components/SelectorButton.svelte @@ -6,7 +6,7 @@ <button type="button" - class="ml-1 flex rounded-sm border-slate-700 bg-slate-900 hover:brightness-110" + class="ml-1 flex rounded-xs border-slate-700 bg-slate-900 hover:brightness-110" onclick={selector.toggle} > <div class="flex self-center pl-1"> diff --git a/frontend/src/lib/selection/SelectionOverlay.svelte b/frontend/src/lib/selection/SelectionOverlay.svelte index 97421b0..e172e16 100644 --- a/frontend/src/lib/selection/SelectionOverlay.svelte +++ b/frontend/src/lib/selection/SelectionOverlay.svelte @@ -11,9 +11,9 @@ {#if selected} <div class:items-center={centered} - class="{position} pointer-events-none absolute z-[1] flex bg-emerald-700/95" + class="{position} pointer-events-none absolute z-1 flex bg-emerald-700/95" > - <span class="icon-base icon-[material-symbols--check] text-[2rem]"></span> + <span class="icon-[material-symbols--check] text-[2rem]"></span> </div> {/if} diff --git a/frontend/src/lib/statistics/StatGroup.svelte b/frontend/src/lib/statistics/StatGroup.svelte index e84c555..91f8d3d 100644 --- a/frontend/src/lib/statistics/StatGroup.svelte +++ b/frontend/src/lib/statistics/StatGroup.svelte @@ -5,7 +5,7 @@ </script> <section - class="flex flex-col gap-2 rounded bg-slate-900 p-2 font-medium shadow-md shadow-slate-950/30" + class="flex flex-col gap-2 rounded-sm bg-slate-900 p-2 font-medium shadow-md shadow-slate-950/30" > <h2 class="text-2xl">{title}</h2> <div class="flex flex-row flex-wrap gap-10"> diff --git a/frontend/src/lib/tabs/AddOverlay.svelte b/frontend/src/lib/tabs/AddOverlay.svelte index 329b259..4d5ec49 100644 --- a/frontend/src/lib/tabs/AddOverlay.svelte +++ b/frontend/src/lib/tabs/AddOverlay.svelte @@ -28,7 +28,7 @@ <div class="absolute left-1 top-1" transition:fade={fadeDefault}> <button type="button" - class="btn-blue rounded-full shadow-sm shadow-black" + class="btn-blue rounded-full shadow-xs shadow-black" title="Add to this comic" aria-label="Add to this comic" {onclick} diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte index 1ae7c32..3c5611e 100644 --- a/frontend/src/lib/tabs/Tabs.svelte +++ b/frontend/src/lib/tabs/Tabs.svelte @@ -30,18 +30,18 @@ <div class="flex h-full max-h-full flex-col"> <nav> - <ul class="me-3 ms-1 flex border-b-2 border-slate-700 text-sm"> + <ul class="ms-1 me-3 flex border-b-2 border-slate-700 text-sm"> {#each Object.entries(context.tabs) as [id, { title }]} <li class="-mb-0.5"> <button type="button" class:active={context.current === id} - class="focus-background relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200" + class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200 [&.active]:border-b-2 [&.active]:border-indigo-500" onclick={() => (context.current = id)} > {#if badges[id]} <div - class="absolute right-0 top-1 h-2 w-2 rounded-full bg-emerald-400" + class="absolute top-1 right-0 h-2 w-2 rounded-full bg-emerald-400" title="There are pending changes" transition:fade={fadeFast} ></div> @@ -54,9 +54,3 @@ </nav> {@render children?.()} </div> - -<style lang="postcss"> - button.active { - @apply border-b-2 border-indigo-500; - } -</style> diff --git a/frontend/src/lib/toolbar/MarkSelection.svelte b/frontend/src/lib/toolbar/MarkSelection.svelte index 1af36ca..8985369 100644 --- a/frontend/src/lib/toolbar/MarkSelection.svelte +++ b/frontend/src/lib/toolbar/MarkSelection.svelte @@ -9,7 +9,7 @@ {#snippet button(onclick)} <button type="button" - class="btn-slate rounded-inherit relative hover:bg-blue-700 [&:not(:only-child)]:bg-blue-700" + class="btn-slate rounded-inherit relative not-only:bg-blue-700 hover:bg-blue-700" title="Set flag..." aria-label="Set flag..." {onclick} |