feat: add light mode support across all templates
This commit is contained in:
@@ -17,7 +17,7 @@
|
||||
{{$displayTitle := $anime.DisplayTitle}}
|
||||
|
||||
<div class="flex w-full flex-col gap-2" data-id="{{$dataId}}">
|
||||
<a href="/anime/{{$anime.MalID}}" class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-white/5 after:absolute after:inset-0 {{if $withActions}}after:bg-black/80 after:opacity-0 hover:after:opacity-100{{else}}after:bg-linear-to-t after:from-black/80 after:via-black/20 after:to-transparent after:opacity-80 hover:after:opacity-100{{end}} after:transition-opacity">
|
||||
<a href="/anime/{{$anime.MalID}}" class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-background-surface after:absolute after:inset-0 {{if $withActions}}after:bg-black/80 after:opacity-0 hover:after:opacity-100{{else}}after:bg-linear-to-t after:from-black/80 after:via-black/20 after:to-transparent after:opacity-80 hover:after:opacity-100{{end}} after:transition-opacity">
|
||||
<img src="{{$imageUrl}}" alt="{{$displayTitle}}" class="h-full w-full object-cover" loading="lazy" />
|
||||
|
||||
{{if $withActions}}
|
||||
@@ -67,7 +67,7 @@
|
||||
{{end}}
|
||||
</a>
|
||||
{{if and $withActions (not $hideTitle)}}
|
||||
<h3 class="line-clamp-2 text-sm font-medium text-neutral-200">
|
||||
<h3 class="line-clamp-2 text-sm font-medium text-foreground">
|
||||
{{$displayTitle}}
|
||||
</h3>
|
||||
{{end}}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{{define "filter_bar"}}
|
||||
{{$selectedGenreIDs := .Genres}}
|
||||
{{$selectedCount := len $selectedGenreIDs}}
|
||||
<div class="flex flex-wrap items-center gap-3 bg-white/5 p-3">
|
||||
<div class="flex flex-wrap items-center gap-3 bg-background-surface p-3 ring-1 ring-border">
|
||||
<div class="min-w-50 flex-1">
|
||||
<form action="/browse" method="GET" id="browse-search-form">
|
||||
<input
|
||||
@@ -10,7 +10,7 @@
|
||||
type="text"
|
||||
value="{{.Query}}"
|
||||
placeholder="Search anime..."
|
||||
class="focus:ring-accent w-full bg-black/20 px-3 py-2 text-sm text-white placeholder-neutral-500 outline-none focus:ring-1"
|
||||
class="focus:ring-accent w-full bg-background-button px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1"
|
||||
onkeydown="if(event.key === 'Enter'){this.form.submit()}"
|
||||
/>
|
||||
{{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
|
||||
@@ -22,11 +22,11 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm text-white bg-black/20">
|
||||
<div class="flex items-center gap-2 px-3 py-2 text-sm text-foreground bg-background-button ring-1 ring-border">
|
||||
<label class="flex cursor-pointer items-center gap-2">
|
||||
<div class="flex h-4 w-4 items-center justify-center border-2 transition-colors {{if .SFW}}border-accent bg-accent{{else}}border-zinc-500 bg-transparent{{end}}">
|
||||
<div class="flex h-4 w-4 items-center justify-center border-2 transition-colors {{if .SFW}}border-accent bg-accent{{else}}border-border bg-transparent{{end}}">
|
||||
{{if .SFW}}
|
||||
<svg class="h-3 w-3 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
|
||||
<svg class="h-3 w-3 text-on-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
|
||||
{{end}}
|
||||
</div>
|
||||
<input type="checkbox" class="sr-only" name="sfw" value="true" {{if .SFW}}checked{{end}}
|
||||
@@ -37,12 +37,12 @@
|
||||
|
||||
<ui-dropdown class="relative block" data-align="left" data-width="w-48">
|
||||
<div data-trigger class="cursor-pointer">
|
||||
<button class="flex items-center gap-2 bg-black/20 px-3 py-2 text-sm text-white hover:bg-black/30">
|
||||
<button class="flex items-center gap-2 bg-background-button ring-1 ring-border px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors">
|
||||
{{if $selectedCount}}Genres ({{$selectedCount}}){{else}}Genres{{end}}
|
||||
<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 rounded-none shadow-2xl left-0 top-full mt-2">
|
||||
<div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ring-1 ring-border">
|
||||
<form action="/browse" method="GET" class="flex flex-col py-1">
|
||||
<input type="hidden" name="q" value="{{.Query}}">
|
||||
{{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
|
||||
@@ -53,10 +53,10 @@
|
||||
{{range .GenresList}}
|
||||
{{$genreID := .MalID}}
|
||||
{{$isSelected := hasGenre $genreID $selectedGenreIDs}}
|
||||
<label class="flex cursor-pointer items-center gap-3 rounded-sm px-2 py-1.5 text-sm text-neutral-300 hover:bg-white/5 hover:text-white">
|
||||
<div class="flex h-4 w-4 items-center justify-center border-2 transition-colors {{if $isSelected}}border-accent bg-accent{{else}}border-zinc-500 bg-transparent{{end}}">
|
||||
<label class="flex cursor-pointer items-center gap-3 rounded-sm px-2 py-1.5 text-sm text-foreground-muted hover:bg-surface-hover hover:text-foreground">
|
||||
<div class="flex h-4 w-4 items-center justify-center border-2 transition-colors {{if $isSelected}}border-accent bg-accent{{else}}border-border bg-transparent{{end}}">
|
||||
{{if $isSelected}}
|
||||
<svg class="h-3 w-3 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
|
||||
<svg class="h-3 w-3 text-on-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5" /></svg>
|
||||
{{end}}
|
||||
</div>
|
||||
<input type="checkbox" class="sr-only" name="genres" value="{{.MalID}}" {{if $isSelected}}checked{{end}} onchange="this.form.submit()">
|
||||
@@ -69,36 +69,36 @@
|
||||
|
||||
<ui-dropdown class="relative block" data-align="left" data-width="w-40">
|
||||
<div data-trigger class="cursor-pointer">
|
||||
<button class="flex items-center gap-2 bg-black/20 px-3 py-2 text-sm text-white hover:bg-black/30">
|
||||
<button class="flex items-center gap-2 bg-background-button ring-1 ring-border px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors">
|
||||
{{if .Status}}{{.Status}}{{else}}Any Status{{end}}
|
||||
<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-2xl left-0 top-full mt-2">
|
||||
<div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ring-1 ring-border">
|
||||
<div class="flex flex-col py-1">
|
||||
<a href="?status=&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Any Status</a>
|
||||
<a href="?status=airing&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Airing</a>
|
||||
<a href="?status=complete&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Complete</a>
|
||||
<a href="?status=upcoming&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Upcoming</a>
|
||||
<a href="?status=&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Any Status</a>
|
||||
<a href="?status=airing&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Airing</a>
|
||||
<a href="?status=complete&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Complete</a>
|
||||
<a href="?status=upcoming&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Upcoming</a>
|
||||
</div>
|
||||
</div>
|
||||
</ui-dropdown>
|
||||
|
||||
<ui-dropdown class="relative block" data-align="left" data-width="w-40">
|
||||
<div data-trigger class="cursor-pointer">
|
||||
<button class="flex items-center gap-2 bg-black/20 px-3 py-2 text-sm text-white hover:bg-black/30">
|
||||
<button class="flex items-center gap-2 bg-background-button ring-1 ring-border px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors">
|
||||
{{if .Type}}{{.Type}}{{else}}Any Type{{end}}
|
||||
<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-2xl left-0 top-full mt-2">
|
||||
<div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ring-1 ring-border">
|
||||
<div class="flex flex-col py-1">
|
||||
<a href="?type=&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Any Type</a>
|
||||
<a href="?type=tv&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">TV</a>
|
||||
<a href="?type=movie&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Movie</a>
|
||||
<a href="?type=ova&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">OVA</a>
|
||||
<a href="?type=special&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Special</a>
|
||||
<a href="?type=ona&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">ONA</a>
|
||||
<a href="?type=&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Any Type</a>
|
||||
<a href="?type=tv&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">TV</a>
|
||||
<a href="?type=movie&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Movie</a>
|
||||
<a href="?type=ova&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">OVA</a>
|
||||
<a href="?type=special&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Special</a>
|
||||
<a href="?type=ona&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">ONA</a>
|
||||
</div>
|
||||
</div>
|
||||
</ui-dropdown>
|
||||
@@ -106,24 +106,24 @@
|
||||
<div class="flex items-center gap-1">
|
||||
<ui-dropdown class="relative block" data-align="left" data-width="w-48">
|
||||
<div data-trigger class="cursor-pointer">
|
||||
<button class="flex items-center gap-2 bg-black/20 px-3 py-2 text-sm text-white hover:bg-black/30">
|
||||
<button class="flex items-center gap-2 bg-background-button ring-1 ring-border px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors">
|
||||
Sort: {{if .OrderBy}}{{.OrderBy}}{{else}}Default{{end}}
|
||||
<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-2xl left-0 top-full mt-2">
|
||||
<div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ring-1 ring-border">
|
||||
<div class="flex flex-col py-1">
|
||||
<a href="?order_by=&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Default</a>
|
||||
<a href="?order_by=popularity&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Popularity</a>
|
||||
<a href="?order_by=score&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Score</a>
|
||||
<a href="?order_by=title&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Title</a>
|
||||
<a href="?order_by=start_date&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Start Date</a>
|
||||
<a href="?order_by=episodes&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 text-sm text-white">Episodes</a>
|
||||
<a href="?order_by=&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Default</a>
|
||||
<a href="?order_by=popularity&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Popularity</a>
|
||||
<a href="?order_by=score&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Score</a>
|
||||
<a href="?order_by=title&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Title</a>
|
||||
<a href="?order_by=start_date&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Start Date</a>
|
||||
<a href="?order_by=episodes&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Episodes</a>
|
||||
</div>
|
||||
</div>
|
||||
</ui-dropdown>
|
||||
|
||||
<a href="?sort={{if eq .Sort "asc"}}desc{{else}}asc{{end}}&q={{.Query}}&status={{.Status}}&type={{.Type}}&order_by={{.OrderBy}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex h-9 w-9 items-center justify-center bg-black/20 text-neutral-300 hover:text-white">
|
||||
<a href="?sort={{if eq .Sort "asc"}}desc{{else}}asc{{end}}&q={{.Query}}&status={{.Status}}&type={{.Type}}&order_by={{.OrderBy}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex h-9 w-9 items-center justify-center bg-background-button ring-1 ring-border text-foreground-muted hover:text-foreground transition-colors">
|
||||
{{if eq .Sort "asc"}}
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
|
||||
{{else}}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
{{define "footer"}}
|
||||
<footer class="mt-auto border-t border-neutral-800 bg-background-sidebar py-8 px-6 md:px-12">
|
||||
<footer class="mt-auto border-t border-border bg-background-sidebar py-8 px-6 md:px-12">
|
||||
<div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="/static/readme-logo-light.svg" alt="MAL" class="h-6 w-6" />
|
||||
<span class="text-neutral-300 font-semibold text-lg tracking-tight">MyAnimeList</span>
|
||||
<span class="text-foreground-muted font-semibold text-lg tracking-tight">MyAnimeList</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button
|
||||
id="footer-theme-toggle"
|
||||
class="text-neutral-500 transition-colors hover:text-neutral-300 focus:outline-none"
|
||||
class="text-neutral-500 transition-colors hover:text-foreground focus:outline-none"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<svg class="theme-icon-dark size-5" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
|
||||
|
||||
@@ -1,35 +1,34 @@
|
||||
{{define "header"}}
|
||||
<header class="bg-background-header flex flex-col border-b border-white/5 relative z-50">
|
||||
<header class="bg-background-header flex flex-col border-b border-border relative z-50">
|
||||
<div class="flex h-16 items-center justify-between px-4 md:px-6">
|
||||
<div class="flex items-center gap-4 lg:w-72">
|
||||
<button onclick="toggleMobileMenu()" class="block text-neutral-400 transition-colors hover:text-white focus:outline-none md:hidden">
|
||||
<div class="flex items-center gap-4">
|
||||
<button onclick="toggleMobileMenu()" class="block text-neutral-400 transition-colors hover:text-foreground focus:outline-none md:hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
|
||||
</button>
|
||||
<button onclick="toggleSidebar()" class="hidden text-neutral-400 transition-colors hover:text-white focus:outline-none lg:block">
|
||||
<button onclick="toggleSidebar()" class="hidden text-neutral-400 transition-colors hover:text-foreground focus:outline-none lg:block">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
|
||||
</button>
|
||||
<a href="/" class="group flex items-center gap-2.5 focus:outline-none">
|
||||
<img src="/static/readme-logo-light.svg" alt="MAL" class="h-8 w-8 transition-transform group-hover:scale-110" />
|
||||
<span class="text-xl font-bold tracking-tight text-white hidden sm:block">MyAnime<span class="text-accent">List</span></span>
|
||||
<span class="text-xl font-bold tracking-tight text-foreground">MyAnime<span class="text-accent">List</span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hidden max-w-3xl flex-1 items-center justify-center px-4 md:flex">
|
||||
<div class="hidden max-w-2xl flex-1 items-center justify-center px-4 md:flex">
|
||||
<form action="/browse" method="GET" class="w-full max-w-lg">
|
||||
<div class="focus-within:border-accent bg-background-surface flex h-10 w-full items-center overflow-hidden border border-transparent transition-colors">
|
||||
<div class="focus-within:border-accent bg-background-surface flex h-10 w-full items-center overflow-hidden border border-border transition-colors">
|
||||
<div class="pr-2 pl-4 text-neutral-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
||||
</div>
|
||||
<input type="text" name="q" placeholder="Search..." class="h-full w-full bg-transparent px-1 text-sm text-white focus:outline-none" />
|
||||
<input type="text" name="q" placeholder="Search..." class="h-full w-full bg-transparent px-1 text-sm text-foreground focus:outline-none" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 lg:w-72 relative">
|
||||
<div class="flex items-center gap-2 relative justify-end">
|
||||
<button
|
||||
id="theme-toggle"
|
||||
class="rounded-full p-1.5 text-neutral-400 transition-colors hover:bg-white/5 hover:text-white focus:outline-none"
|
||||
aria-label="Toggle theme"
|
||||
class="rounded-full p-1.5 text-neutral-400 transition-colors hover:bg-surface-hover hover:text-foreground focus:outline-none"
|
||||
>
|
||||
<svg class="theme-icon-dark size-5" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
||||
@@ -41,7 +40,7 @@
|
||||
</button>
|
||||
<ui-dropdown class="relative block">
|
||||
<div data-trigger class="cursor-pointer">
|
||||
<button class="flex items-center gap-1 rounded-full p-1 transition-colors hover:bg-white/5 focus:outline-none">
|
||||
<button class="flex items-center gap-1 rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-none">
|
||||
{{if .User}}
|
||||
<div class="bg-accent flex h-8 w-8 items-center justify-center overflow-hidden rounded-full text-sm font-semibold text-white">
|
||||
{{slice .User.Username 0 1}}
|
||||
@@ -64,9 +63,9 @@
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="/login" class="flex w-full items-center px-5 py-3.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10">
|
||||
<a href="/login" class="flex w-full items-center px-5 py-3.5 transition-colors focus:outline-none hover:bg-surface-hover focus:bg-surface-hover">
|
||||
<div class="flex w-full items-center justify-between text-left">
|
||||
<span class="font-medium text-[15px] text-white">Log in</span>
|
||||
<span class="font-medium text-[15px] text-foreground">Log in</span>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
@@ -76,14 +75,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex border-t border-white/5 p-3 md:hidden">
|
||||
<div class="flex border-t border-border p-3 md:hidden">
|
||||
<form action="/browse" method="GET" class="w-full">
|
||||
<div class="focus-within:border-accent bg-background-surface flex h-10 w-full items-center overflow-hidden border border-transparent transition-colors">
|
||||
<div class="pr-2 pl-4 text-neutral-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
||||
<div class="focus-within:border-accent bg-background-surface flex h-10 w-full items-center overflow-hidden border border-border transition-colors">
|
||||
<div class="pr-2 pl-4 text-neutral-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
||||
</div>
|
||||
<input type="text" name="q" placeholder="Search..." class="h-full w-full bg-transparent px-1 text-sm text-foreground focus:outline-none" />
|
||||
</div>
|
||||
<input type="text" name="q" placeholder="Search..." class="h-full w-full bg-transparent px-1 text-sm text-white focus:outline-none" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -8,32 +8,32 @@
|
||||
"watchlist" (dict "href" "/watchlist" "label" "Watchlist")
|
||||
}}
|
||||
|
||||
<nav class="bg-background-sidebar h-full py-6">
|
||||
<nav class="bg-background-sidebar h-full py-6 border-r border-border">
|
||||
<div class="flex flex-col">
|
||||
{{/* Home */}}
|
||||
{{$isActive := eq $currentPath "/"}}
|
||||
<a href="/" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-white/5" {{if $isCollapsed}}title="Home"{{end}}>
|
||||
<a href="/" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Home"{{end}}>
|
||||
{{if $isActive}}
|
||||
<div class="bg-accent absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_rgba(163,230,53,0.6)]"></div>
|
||||
<div class="bg-accent absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_var(--color-accent)]"></div>
|
||||
{{end}}
|
||||
<svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
</svg>
|
||||
<div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
|
||||
<div class="overflow-hidden min-w-0">
|
||||
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Home</span>
|
||||
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">Home</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{{/* Browse */}}
|
||||
{{$isActive := eq $currentPath "/browse"}}
|
||||
<a href="/browse" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-white/5" {{if $isCollapsed}}title="Browse"{{end}}>
|
||||
<a href="/browse" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Browse"{{end}}>
|
||||
{{if $isActive}}
|
||||
<div class="bg-accent absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_rgba(163,230,53,0.6)]"></div>
|
||||
<div class="bg-accent absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_var(--color-accent)]"></div>
|
||||
{{end}}
|
||||
<svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="2" width="20" height="20" rx="2" ry="2" />
|
||||
<line x1="7" y1="2" x2="7" y2="22" />
|
||||
<line x1="17" y1="2" x2="17" y2="22" />
|
||||
@@ -45,40 +45,40 @@
|
||||
</svg>
|
||||
<div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
|
||||
<div class="overflow-hidden min-w-0">
|
||||
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Browse</span>
|
||||
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">Browse</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{{/* Discover */}}
|
||||
{{$isActive := eq $currentPath "/discover"}}
|
||||
<a href="/discover" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-white/5" {{if $isCollapsed}}title="Discover"{{end}}>
|
||||
<a href="/discover" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Discover"{{end}}>
|
||||
{{if $isActive}}
|
||||
<div class="bg-accent absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_rgba(163,230,53,0.6)]"></div>
|
||||
<div class="bg-accent absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_var(--color-accent)]"></div>
|
||||
{{end}}
|
||||
<svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" 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="10" />
|
||||
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
|
||||
</svg>
|
||||
<div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
|
||||
<div class="overflow-hidden min-w-0">
|
||||
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Discover</span>
|
||||
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">Discover</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{{/* Watchlist */}}
|
||||
{{$isActive := eq $currentPath "/watchlist"}}
|
||||
<a href="/watchlist" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-white/5" {{if $isCollapsed}}title="Watchlist"{{end}}>
|
||||
<a href="/watchlist" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Watchlist"{{end}}>
|
||||
{{if $isActive}}
|
||||
<div class="bg-accent absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_rgba(163,230,53,0.6)]"></div>
|
||||
<div class="bg-accent absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_var(--color-accent)]"></div>
|
||||
{{end}}
|
||||
<svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}" viewBox="0 0 24 24" fill="currentColor">
|
||||
<svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M17 18.113l-3.256-2.326A2.989 2.989 0 0 0 12 15.228c-.629 0-1.232.194-1.744.559L7 18.113V4h10v14.113zM18 2H6a1 1 0 0 0-1 1v17.056c0 .209.065.412.187.581a.994.994 0 0 0 1.394.233l4.838-3.455a1 1 0 0 1 1.162 0l4.838 3.455A1 1 0 0 0 19 20.056V3a1 1 0 0 0-1-1z" />
|
||||
</svg>
|
||||
<div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
|
||||
<div class="overflow-hidden min-w-0">
|
||||
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted{{end}}">Watchlist</span>
|
||||
<span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">Watchlist</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user