refactor(consolidate): IconButton + Badge-solid + @layer base + Massen-Migration
E: app.css Base-h1–h6 in @layer base → text-*!-Hacks in Titeln entfernt. Neue Atoms: IconButton (runde Icon-Buttons), Badge solid-Variante + uppercase. Migrationen (6 parallele Pässe): - IconButton: 19 runde Nav/Close-Buttons (Carousel, Galleries, QuoteCarousel, PostOverview, Organisations, ImageModal). - Badge: Kategorie/Status-Pills (PostCard, BlogOverview, kalender, Comments, CalendarBlock, FilesBlock, SearchableText, Stellingnahme). - ui-Atome: Formular-Inputs (Comments, termin-melden, Stellingnahme) → TextInput/ Textarea/Checkbox/SearchField; dunkle NewsletterInline bewusst raw. - Button-Atom: ~20 inline Buttons in StellingnahmeGeneratorBlock. - Radius-Sweep: Cards→rounded-lg (viele via .card-surface), Buttons/Inputs→rounded-md, Chips→rounded-full; StrommixBlock/Calendar/Files/Adressbuch u.a. svelte-check 0 errors, voller Prod-Build grün. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,7 @@
|
||||
import { useTranslate } from "$lib/translations";
|
||||
import { T } from "$lib/translations";
|
||||
import RustyImage from "$lib/components/RustyImage.svelte";
|
||||
import IconButton from "$lib/components/IconButton.svelte";
|
||||
import { extractCmsImageField } from "$lib/rusty-image";
|
||||
|
||||
const t = useTranslate();
|
||||
@@ -256,31 +257,10 @@
|
||||
</a>
|
||||
</div>
|
||||
{#if withUrl.length > 1}
|
||||
<button
|
||||
type="button"
|
||||
class="absolute left-2 top-1/2 -translate-y-1/2 inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||||
onclick={modalPrev}
|
||||
aria-label={t(T.image_gallery_prev_aria)}
|
||||
>
|
||||
<Icon icon="lucide:chevron-left" class="text-2xl" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||||
onclick={modalNext}
|
||||
aria-label={t(T.image_gallery_next_aria)}
|
||||
>
|
||||
<Icon icon="lucide:chevron-right" class="text-2xl" aria-hidden="true" />
|
||||
</button>
|
||||
<IconButton icon="lucide:chevron-left" label={t(T.image_gallery_prev_aria)} variant="surface" size="md" onclick={modalPrev} class="absolute left-2 top-1/2 -translate-y-1/2" />
|
||||
<IconButton icon="lucide:chevron-right" label={t(T.image_gallery_next_aria)} variant="surface" size="md" onclick={modalNext} class="absolute right-2 top-1/2 -translate-y-1/2" />
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
class="absolute -top-2 -right-2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white text-stein-900 shadow-md hover:bg-stein-100 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||||
onclick={closeModal}
|
||||
aria-label={t(T.image_gallery_close)}
|
||||
>
|
||||
<Icon icon="lucide:x" class="text-lg" aria-hidden="true" />
|
||||
</button>
|
||||
<IconButton icon="lucide:x" label={t(T.image_gallery_close)} variant="ghost" size="md" onclick={closeModal} class="absolute -top-2 -right-2" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -344,22 +324,8 @@
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="absolute left-2 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-opacity focus:outline-none focus:ring-2 focus:ring-wald-500 lg:opacity-0 lg:group-hover:opacity-100"
|
||||
aria-label={t(T.image_gallery_prev_aria)}
|
||||
onclick={prev}
|
||||
>
|
||||
<Icon icon="lucide:chevron-left" class="text-2xl" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-opacity focus:outline-none focus:ring-2 focus:ring-wald-500 lg:opacity-0 lg:group-hover:opacity-100"
|
||||
aria-label={t(T.image_gallery_next_aria)}
|
||||
onclick={next}
|
||||
>
|
||||
<Icon icon="lucide:chevron-right" class="text-2xl" aria-hidden="true" />
|
||||
</button>
|
||||
<IconButton icon="lucide:chevron-left" label={t(T.image_gallery_prev_aria)} variant="surface" size="sm" onclick={prev} class="absolute left-2 top-1/2 -translate-y-1/2 transition-opacity lg:opacity-0 lg:group-hover:opacity-100" />
|
||||
<IconButton icon="lucide:chevron-right" label={t(T.image_gallery_next_aria)} variant="surface" size="sm" onclick={next} class="absolute right-2 top-1/2 -translate-y-1/2 transition-opacity lg:opacity-0 lg:group-hover:opacity-100" />
|
||||
|
||||
<div class="flex justify-center gap-1.5 mt-2" role="tablist" aria-label={t(T.image_gallery_position_aria)}>
|
||||
{#each withUrl as _, i}
|
||||
|
||||
Reference in New Issue
Block a user