From 2dca69c9f4a4791219f9aa472f98849771ffe4be Mon Sep 17 00:00:00 2001 From: mkelvers Date: Sat, 20 Jun 2026 19:39:22 +0200 Subject: [PATCH] refactor: move shared styles to tailwind utilities --- static/assets/style.css | 57 ++++++++------------------ static/search/render.ts | 9 +++- templates/components/anime_card.gohtml | 4 +- 3 files changed, 26 insertions(+), 44 deletions(-) diff --git a/static/assets/style.css b/static/assets/style.css index 90f8aa7..3527cdd 100644 --- a/static/assets/style.css +++ b/static/assets/style.css @@ -14,6 +14,12 @@ --color-accent: light-dark(#007a85, #00b3c4); --color-on-accent: light-dark(#ffffff, #000000); --color-surface-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05)); + --color-skeleton-base: light-dark(#e5e5e5, #242529); + --color-skeleton-highlight: light-dark(#d4d4d4, #303137); + --color-border: light-dark(rgba(0, 0, 0, 0.08), rgba(244, 241, 234, 0.08)); + --color-border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.04)); + --color-player-segment: #f5c542; + --shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.32)); } @layer base { @@ -26,26 +32,28 @@ } } -.scrollbar-hidden { +@utility scrollbar-hidden { -ms-overflow-style: none; scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } } -.scrollbar-hidden::-webkit-scrollbar { - display: none; +@utility skeleton { + @apply animate-[skeleton-loading_1.5s_infinite] bg-[linear-gradient(90deg,var(--color-skeleton-base)_25%,var(--color-skeleton-highlight)_50%,var(--color-skeleton-base)_75%)] bg-[length:200%_100%]; +} + +@utility skeleton-subtle { + @apply opacity-70; } :root { color-scheme: light dark; - --skeleton-base: light-dark(#e5e5e5, #242529); - --skeleton-highlight: light-dark(#d4d4d4, #303137); - --border: light-dark(rgba(0, 0, 0, 0.08), rgba(244, 241, 234, 0.08)); - --border-light: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.04)); - --shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.32)); --scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(244, 241, 234, 0.05)); --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(244, 241, 234, 0.22)); --scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(244, 241, 234, 0.32)); - --player-segment: #f5c542; } html[data-theme="light"] { @@ -56,27 +64,6 @@ html[data-theme="dark"] { color-scheme: dark; } -html, -body { - background-color: var(--color-background); - color: var(--color-foreground); -} - -.skeleton { - background: linear-gradient( - 90deg, - var(--skeleton-base) 25%, - var(--skeleton-highlight) 50%, - var(--skeleton-base) 75% - ); - background-size: 200% 100%; - animation: skeleton-loading 1.5s infinite; -} - -.skeleton-subtle { - opacity: 0.7; -} - @keyframes skeleton-loading { 0% { background-position: 200% 0; @@ -86,13 +73,3 @@ body { background-position: -200% 0; } } - -[data-watchlist-toggle] .watchlist-icon, -[data-watchlist-toggle] .watchlist-icon path { - fill: none; -} - -[data-watchlist-toggle][data-watchlist-state="in"] .watchlist-icon, -[data-watchlist-toggle][data-watchlist-state="in"] .watchlist-icon path { - fill: currentColor; -} diff --git a/static/search/render.ts b/static/search/render.ts index 3730337..1fae989 100644 --- a/static/search/render.ts +++ b/static/search/render.ts @@ -197,13 +197,18 @@ const buildWatchlistButton = (item: CommandPaletteItem): HTMLButtonElement | nul const inWatchlist = watchlistOverrides.get(malID) ?? item.inWatchlist === true; button.type = "button"; button.className = - "absolute bottom-5 left-5 z-20 text-accent opacity-0 transition hover:text-accent/80 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"; + "group absolute bottom-5 left-5 z-20 text-accent opacity-0 transition hover:text-accent/80 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50"; button.dataset.watchlistToggle = ""; button.dataset.malId = String(malID); button.dataset.watchlistTitle = cleanLabel(item); button.dataset.watchlistState = inWatchlist ? "in" : "out"; button.setAttribute("aria-label", inWatchlist ? "Remove from Watchlist" : "Add to Watchlist"); - button.appendChild(buildSvgIcon(iconPaths.bookmark, "size-6 watchlist-icon")); + button.appendChild( + buildSvgIcon( + iconPaths.bookmark, + "size-6 watchlist-icon fill-none group-data-[watchlist-state=in]:fill-current [&_path]:fill-none group-data-[watchlist-state=in]:[&_path]:fill-current", + ), + ); return button; }; diff --git a/templates/components/anime_card.gohtml b/templates/components/anime_card.gohtml index 98ed7c5..712ccec 100644 --- a/templates/components/anime_card.gohtml +++ b/templates/components/anime_card.gohtml @@ -39,10 +39,10 @@ data-mal-id="{{$anime.MalID}}" data-watchlist-title="{{$anime.DisplayTitle}}" data-watchlist-state="{{if $isWatchlist}}in{{else}}out{{end}}" - class="text-accent hover:text-accent/80 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50 {{if $isWatchlist}}in-watchlist{{end}}" + class="group text-accent hover:text-accent/80 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50 {{if $isWatchlist}}in-watchlist{{end}}" aria-label="{{if $isWatchlist}}Remove from Watchlist{{else}}Add to Watchlist{{end}}" > - +