From dcde92d11885bbabb9d75469b89da0b8e5f89fc3 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sun, 1 Mar 2026 22:15:58 +0500
Subject: [PATCH] Flatten all UI buttons: remove background fills, use
 text-only styling

All filled/pill buttons across home, ranking, book detail, and chapter
pages now use transparent backgrounds with colored text only, consistent
with the chapter reader nav bar style:
- Home: Browse Rankings (amber text), Scrape (amber text)
- Ranking: View Markdown, page numbers, fetch buttons, Scrape/Source on cards
- Book detail: Source, Refresh, Resume, chapter pagination
- Chapter: bottom Prev/Next nav, article-end nav links
---
 scraper/internal/server/ui.go | 40 +++++++++++++++++------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/scraper/internal/server/ui.go b/scraper/internal/server/ui.go
index f734fdf..34cd58d 100644
--- a/scraper/internal/server/ui.go
+++ b/scraper/internal/server/ui.go
@@ -123,7 +123,7 @@ const homeTmpl = `
 <div class="max-w-4xl mx-auto px-4 py-10" hx-history="false">
   <div class="flex items-center justify-between mb-2">
     <h1 class="text-3xl font-bold text-zinc-100">libnovel</h1>
-    <a href="/ranking" hx-get="/ranking" hx-target="#main-content" hx-push-url="true" hx-swap="innerHTML" class="text-sm px-3 py-1.5 rounded-lg bg-amber-700 hover:bg-amber-600 text-white">Browse Rankings</a>
+    <a href="/ranking" hx-get="/ranking" hx-target="#main-content" hx-push-url="true" hx-swap="innerHTML" class="text-sm px-3 py-1.5 rounded-lg text-amber-400 hover:text-amber-300 transition-colors">Browse Rankings</a>
   </div>
   <p class="text-zinc-400 mb-2">{{len .Books}} book{{if ne (len .Books) 1}}s{{end}} on disk</p>
 
@@ -158,7 +158,7 @@ const homeTmpl = `
         </ul>
       </div>
       <button type="submit"
-              class="px-4 py-2 rounded-lg bg-amber-600 hover:bg-amber-500 text-white text-sm font-medium transition-colors whitespace-nowrap">
+              class="px-4 py-2 rounded-lg text-amber-400 hover:text-amber-300 text-sm font-medium transition-colors whitespace-nowrap">
         Scrape
       </button>
     </form>
@@ -540,7 +540,7 @@ const rankingTmpl = `
          hx-target="#main-content"
          hx-push-url="true"
          hx-swap="innerHTML"
-         class="text-sm px-3 py-1.5 rounded-lg bg-zinc-700 hover:bg-zinc-600 text-white inline-flex items-center gap-1">
+         class="text-sm px-3 py-1.5 rounded-lg text-zinc-400 hover:text-zinc-200 transition-colors inline-flex items-center gap-1">
         View Markdown
       </a>
     </div>
@@ -567,14 +567,14 @@ const rankingTmpl = `
       {{if eq .Num 0}}
       <span class="text-xs text-zinc-600 px-1 select-none">…</span>
       {{else if eq .Num $cur}}
-      <span class="text-xs w-8 h-7 rounded-lg bg-amber-700 border border-amber-600 text-white flex items-center justify-center font-semibold">{{.Num}}</span>
+      <span class="text-xs w-8 h-7 rounded-lg text-amber-400 font-semibold flex items-center justify-center">{{.Num}}</span>
       {{else}}
       <a href="/ranking?page={{.Num}}"
          hx-get="/ranking?page={{.Num}}"
          hx-target="#main-content"
          hx-push-url="true"
          hx-swap="innerHTML"
-         class="text-xs w-8 h-7 rounded-lg bg-zinc-800 hover:bg-amber-700 border border-zinc-700 hover:border-amber-600 text-zinc-300 hover:text-white transition-colors flex items-center justify-center">
+         class="text-xs w-8 h-7 rounded-lg text-zinc-400 hover:text-zinc-200 transition-colors flex items-center justify-center">
         {{.Num}}
       </a>
       {{end}}
@@ -602,7 +602,7 @@ const rankingTmpl = `
               hx-swap="innerHTML">
           <input type="hidden" name="pages" value="{{.Num}}">
           <button type="submit"
-            class="text-xs w-8 h-7 rounded-lg bg-zinc-800 hover:bg-amber-700 border border-zinc-700 hover:border-amber-600 text-zinc-300 hover:text-white transition-colors text-center">
+            class="text-xs w-8 h-7 rounded-lg text-zinc-400 hover:text-zinc-200 transition-colors text-center">
             {{.Num}}
           </button>
         </form>
@@ -646,7 +646,7 @@ const rankingTmpl = `
         {{if .SourceURL}}
         <div class="mt-2">
           <button onclick="event.preventDefault();event.stopPropagation();window.open('{{.SourceURL}}','_blank','noopener,noreferrer')"
-             class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors cursor-pointer border-0">
+             class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded text-zinc-400 hover:text-zinc-200 transition-colors cursor-pointer border-0">
             <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
             </svg>
@@ -677,12 +677,12 @@ const rankingTmpl = `
           <form hx-post="/ui/scrape/book" hx-swap="outerHTML" hx-target="closest div">
             <input type="hidden" name="url" value="{{.SourceURL}}">
             <button type="submit"
-              class="text-xs px-2 py-0.5 rounded bg-amber-700 hover:bg-amber-600 text-white">
+              class="text-xs px-2 py-0.5 rounded text-amber-400 hover:text-amber-300 transition-colors border-0 bg-transparent cursor-pointer">
               Scrape
             </button>
           </form>
           <a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
-             class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
+             class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded text-zinc-400 hover:text-zinc-200 transition-colors">
             <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
             </svg>
@@ -1057,7 +1057,7 @@ const bookTmpl = `
         {{if .Meta.SourceURL}}
         <a href="{{.Meta.SourceURL}}" target="_blank" rel="noopener noreferrer"
            title="View on novelfire.net"
-           class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
+           class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded text-zinc-400 hover:text-zinc-200 transition-colors">
           <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
             <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
           </svg>
@@ -1066,7 +1066,7 @@ const bookTmpl = `
         <form hx-post="/ui/scrape/book" hx-swap="outerHTML" hx-target="closest div">
           <input type="hidden" name="url" value="{{.Meta.SourceURL}}">
           <button type="submit"
-            class="text-xs px-2 py-1 rounded bg-amber-700 hover:bg-amber-600 text-white"
+            class="text-xs px-2 py-1 rounded text-amber-400 hover:text-amber-300 transition-colors border-0 bg-transparent cursor-pointer"
             title="Re-scrape from source">
             Refresh
           </button>
@@ -1091,7 +1091,7 @@ const bookTmpl = `
        hx-target="#main-content"
        hx-push-url="true"
        hx-swap="innerHTML"
-       class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-amber-700 hover:bg-amber-600 text-white text-sm font-medium transition-colors cursor-pointer">
+       class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-amber-400 hover:text-amber-300 text-sm font-medium transition-colors cursor-pointer">
       ▶ Resume — Chapter <span id="resume-chapter-num"></span>
     </a>
   </div>
@@ -1128,18 +1128,18 @@ const bookTmpl = `
        hx-swap="innerHTML"
        hx-push-url="/books/{{.Slug}}?page={{prev .CurrentPage}}"
        hx-on::after-request="applyProgress('{{.Slug}}')"
-       class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm transition-colors cursor-pointer">«</a>
+       class="px-3 py-1.5 rounded-lg text-zinc-400 hover:text-zinc-200 text-sm transition-colors cursor-pointer">«</a>
     {{end}}
     {{range pages .TotalPages}}
     {{if eq . $.CurrentPage}}
-    <span class="px-3 py-1.5 rounded-lg bg-amber-700 text-white text-sm font-semibold">{{.}}</span>
+    <span class="px-3 py-1.5 rounded-lg text-amber-400 text-sm font-semibold">{{.}}</span>
     {{else}}
     <a hx-get="/books/{{$.Slug}}/chapters-page?page={{.}}"
        hx-target="#chapter-list"
        hx-swap="innerHTML"
        hx-push-url="/books/{{$.Slug}}?page={{.}}"
        hx-on::after-request="applyProgress('{{$.Slug}}')"
-       class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm transition-colors cursor-pointer">{{.}}</a>
+       class="px-3 py-1.5 rounded-lg text-zinc-400 hover:text-zinc-200 text-sm transition-colors cursor-pointer">{{.}}</a>
     {{end}}
     {{end}}
     {{if lt .CurrentPage .TotalPages}}
@@ -1148,7 +1148,7 @@ const bookTmpl = `
        hx-swap="innerHTML"
        hx-push-url="/books/{{.Slug}}?page={{next .CurrentPage}}"
        hx-on::after-request="applyProgress('{{.Slug}}')"
-       class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm transition-colors cursor-pointer">»</a>
+       class="px-3 py-1.5 rounded-lg text-zinc-400 hover:text-zinc-200 text-sm transition-colors cursor-pointer">»</a>
     {{end}}
   </div>
   {{end}}
@@ -1287,7 +1287,7 @@ const chapterPageTmpl = `{{range .Chapters}}
      hx-swap="innerHTML"
      hx-push-url="/books/{{.Slug}}?page={{prev .CurrentPage}}"
      hx-on::after-request="applyProgress('{{.Slug}}')"
-     class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm transition-colors cursor-pointer">«</a>
+     class="px-3 py-1.5 rounded-lg text-zinc-400 hover:text-zinc-200 text-sm transition-colors cursor-pointer">«</a>
   {{end}}
   {{range pages .TotalPages}}
   {{if eq . $.CurrentPage}}
@@ -1307,7 +1307,7 @@ const chapterPageTmpl = `{{range .Chapters}}
      hx-swap="innerHTML"
      hx-push-url="/books/{{.Slug}}?page={{next .CurrentPage}}"
      hx-on::after-request="applyProgress('{{.Slug}}')"
-     class="px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm transition-colors cursor-pointer">»</a>
+     class="px-3 py-1.5 rounded-lg text-zinc-400 hover:text-zinc-200 text-sm transition-colors cursor-pointer">»</a>
   {{end}}
 </div>`
 
@@ -1532,7 +1532,7 @@ const chapterTmpl = `
        hx-target="#main-content"
        hx-push-url="true"
        hx-swap="innerHTML"
-       class="text-sm px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition-colors">
+       class="text-sm px-4 py-2 rounded-lg text-zinc-400 hover:text-zinc-200 transition-colors">
       ← Previous chapter
     </a>
     {{else}}<span></span>{{end}}
@@ -1542,7 +1542,7 @@ const chapterTmpl = `
        hx-target="#main-content"
        hx-push-url="true"
        hx-swap="innerHTML"
-       class="text-sm px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition-colors">
+       class="text-sm px-4 py-2 rounded-lg text-zinc-400 hover:text-zinc-200 transition-colors">
       Next chapter →
     </a>
     {{else}}<span></span>{{end}}