refactor: use tailwind theme utilities

This commit is contained in:
2026-06-20 19:39:34 +02:00
committed by Milas Holsting
parent 2dca69c9f4
commit 2593a45cc3
10 changed files with 21 additions and 22 deletions

View File

@@ -25,7 +25,7 @@
{{define "anime_themes_dialog"}}
<div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-themes-dialog aria-hidden="true">
<div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-(--shadow-card)" role="dialog" aria-modal="true" aria-label="Theme Songs">
<div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-card" role="dialog" aria-modal="true" aria-label="Theme Songs">
<div class="flex items-center justify-between px-6 py-4">
<h2 class="text-base font-normal text-foreground">Theme Songs</h2>
<button type="button" data-themes-close class="px-2 py-1 text-xs text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Close</button>

View File

@@ -53,7 +53,7 @@
<svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 w-72 overflow-hidden bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2">
<div data-content class="hidden absolute z-50 w-72 overflow-hidden bg-background-button rounded-none shadow-card left-0 top-full mt-2">
<div class="p-2">
<input id="studio-search" type="text" placeholder="Search studios..." class=" w-full bg-background-sidebar px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1 focus:ring-accent"
hx-get="/api/jikan/producers"
@@ -97,7 +97,7 @@
<svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button shadow-(--shadow-card) left-0 top-full mt-2 scrollbar-hidden">
<div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button shadow-card left-0 top-full mt-2 scrollbar-hidden">
<form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content" hx-select="#browse-content" hx-swap="outerHTML" class="flex flex-col">
<input type="hidden" name="q" value="{{.Query}}">
{{if .Studio}}<input type="hidden" name="studio" value="{{.Studio}}">{{end}}
@@ -127,7 +127,7 @@
<svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2 ">
<div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-card left-0 top-full mt-2 ">
<div class="flex flex-col">
{{range $statusOptions}}
<a href='{{browseURL $ (dict "status" .Value)}}' class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">{{.Label}}</a>
@@ -143,7 +143,7 @@
<svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2 ">
<div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-card left-0 top-full mt-2 ">
<div class="flex flex-col">
{{range $typeOptions}}
<a href='{{browseURL $ (dict "type" .Value)}}' class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">{{.Label}}</a>
@@ -160,7 +160,7 @@
<svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2 ">
<div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-card left-0 top-full mt-2 ">
<div class="flex flex-col">
{{range $sortOptions}}
<a href='{{browseURL $ (dict "order_by" .Value)}}' class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">{{.Label}}</a>

View File

@@ -56,7 +56,7 @@
<svg class="size-6 transition-transform duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-(--shadow-card) ring-1 ring-black/10 right-0 bottom-full mb-2">
<div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-card ring-1 ring-black/10 right-0 bottom-full mb-2">
<div class="flex flex-col">
<div class="flex items-center justify-between px-5 py-2.5">
<span class="text-[15px] font-normal text-foreground">Autoplay</span>

View File

@@ -21,7 +21,7 @@
</button>
</div>
<div data-content class="hidden absolute z-50 min-w-40 bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2">
<div data-content class="hidden absolute z-50 min-w-40 bg-background-button rounded-none shadow-card left-0 top-full mt-2">
<div class="flex flex-col">
<button
data-unstyled-button