style: migrate z-index/scrollbar in continue_watching, size shorthands in login

This commit is contained in:
2026-06-07 17:45:08 +02:00
parent 102317c9b0
commit e355933ba8
2 changed files with 7 additions and 7 deletions

View File

@@ -3,7 +3,7 @@
<h2 class="mb-3 text-base font-normal text-foreground">Continue Watching</h2> <h2 class="mb-3 text-base font-normal text-foreground">Continue Watching</h2>
<div class="relative overflow-hidden"> <div class="relative overflow-hidden">
<div id="continue-watching-items" data-continue-watching-track class="flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"> <div id="continue-watching-items" data-continue-watching-track class="flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth pb-4 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden">
{{range .}} {{range .}}
{{$title := .TitleOriginal}} {{$title := .TitleOriginal}}
{{if .TitleEnglish.Valid}}{{$title = .TitleEnglish.String}}{{end}} {{if .TitleEnglish.Valid}}{{$title = .TitleEnglish.String}}{{end}}
@@ -42,12 +42,12 @@
</div> </div>
{{end}} {{end}}
</div> </div>
<div data-continue-watching-prev-fade class="pointer-events-none absolute inset-y-0 left-0 z-[70] hidden w-20 bg-linear-to-r from-background via-background/80 to-transparent" aria-hidden="true"></div> <div data-continue-watching-prev-fade class="pointer-events-none absolute inset-y-0 left-0 z-70 hidden w-20 bg-linear-to-r from-background via-background/80 to-transparent" aria-hidden="true"></div>
<div data-continue-watching-next-fade class="pointer-events-none absolute inset-y-0 right-0 z-[70] hidden w-20 bg-linear-to-l from-background via-background/80 to-transparent" aria-hidden="true"></div> <div data-continue-watching-next-fade class="pointer-events-none absolute inset-y-0 right-0 z-70 hidden w-20 bg-linear-to-l from-background via-background/80 to-transparent" aria-hidden="true"></div>
<button type="button" data-unstyled-button data-continue-watching-prev class="pointer-events-auto absolute left-0 top-[42%] z-[80] hidden h-16 w-14 -translate-y-1/2 cursor-pointer items-center justify-center text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" aria-label="Scroll continue watching left" aria-hidden="true" tabindex="-1"> <button type="button" data-unstyled-button data-continue-watching-prev class="pointer-events-auto absolute left-0 top-[42%] z-80 hidden h-16 w-14 -translate-y-1/2 cursor-pointer items-center justify-center text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" aria-label="Scroll continue watching left" aria-hidden="true" tabindex="-1">
<svg class="pointer-events-auto size-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"></polyline></svg> <svg class="pointer-events-auto size-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"></polyline></svg>
</button> </button>
<button type="button" data-unstyled-button data-continue-watching-next class="pointer-events-auto absolute right-0 top-[42%] z-[80] hidden h-16 w-14 -translate-y-1/2 cursor-pointer items-center justify-center text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" aria-label="Scroll continue watching right" aria-hidden="true" tabindex="-1"> <button type="button" data-unstyled-button data-continue-watching-next class="pointer-events-auto absolute right-0 top-[42%] z-80 hidden h-16 w-14 -translate-y-1/2 cursor-pointer items-center justify-center text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" aria-label="Scroll continue watching right" aria-hidden="true" tabindex="-1">
<svg class="pointer-events-auto size-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg> <svg class="pointer-events-auto size-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg>
</button> </button>
</div> </div>

View File

@@ -2,7 +2,7 @@
{{define "scripts"}}{{end}} {{define "scripts"}}{{end}}
{{define "content"}} {{define "content"}}
<main class="flex min-h-dvh items-center justify-center bg-[url(/static/images/background.png)] bg-cover bg-center px-3 py-4 sm:px-4 sm:py-8"> <main class="flex min-h-dvh items-center justify-center bg-[url(/static/images/background.png)] bg-cover bg-center px-3 py-4 sm:px-4 sm:py-8">
<div class="mx-auto w-full max-w-[31.25rem] bg-background-surface px-5 pb-6 pt-7 shadow-sm sm:px-8 sm:pb-8 sm:pt-11 lg:px-12"> <div class="mx-auto w-full max-w-125 bg-background-surface px-5 pb-6 pt-7 shadow-sm sm:px-8 sm:pb-8 sm:pt-11 lg:px-12">
<h1 class="mb-6 text-2xl font-normal leading-tight tracking-[-0.02em] text-foreground sm:mb-8 sm:text-3xl sm:leading-none"> <h1 class="mb-6 text-2xl font-normal leading-tight tracking-[-0.02em] text-foreground sm:mb-8 sm:text-3xl sm:leading-none">
Sign in to your account Sign in to your account
</h1> </h1>
@@ -89,7 +89,7 @@
<button <button
type="submit" type="submit"
class="mt-1 h-10 w-full rounded-[2px] bg-[#cccccc] font-normal text-black transition hover:bg-[#bfbfbf] active:bg-[#b3b3b3] sm:h-9" class="mt-1 h-10 w-full rounded-xs bg-[#cccccc] font-normal text-black transition hover:bg-[#bfbfbf] active:bg-[#b3b3b3] sm:h-9"
> >
Sign In Sign In
</button> </button>