From 6ae95bfe534896a752f4b1b68ea881f6d2ddadfc Mon Sep 17 00:00:00 2001
From: bdim404 <i@bdim.moe>
Date: Tue, 10 Mar 2026 18:19:15 +0800
Subject: [PATCH] feat(audiobook): improve styling for character and chapter
 sections in ProjectCard component

---
 qwen3-tts-frontend/src/pages/Audiobook.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/qwen3-tts-frontend/src/pages/Audiobook.tsx b/qwen3-tts-frontend/src/pages/Audiobook.tsx
index 47df9c6..0a35674 100644
--- a/qwen3-tts-frontend/src/pages/Audiobook.tsx
+++ b/qwen3-tts-frontend/src/pages/Audiobook.tsx
@@ -602,11 +602,11 @@ function ProjectCard({ project, onRefresh }: { project: AudiobookProject; onRefr
       )}
 
       {expanded && (
-        <div className="space-y-4 pt-2 border-t">
+        <div className="space-y-3 pt-2 border-t">
           {detail && detail.characters.length > 0 && (
-            <div>
+            <div className="rounded-lg border border-blue-500/20 bg-blue-500/5 px-3 py-2">
               <button
-                className="flex items-center gap-1 text-xs font-medium text-muted-foreground mb-2 hover:text-foreground transition-colors w-full text-left"
+                className="flex items-center gap-1 text-xs font-medium text-blue-400/80 mb-2 hover:text-blue-300 transition-colors w-full text-left"
                 onClick={() => setCharsCollapsed(v => !v)}
               >
                 {charsCollapsed ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}
@@ -677,10 +677,10 @@ function ProjectCard({ project, onRefresh }: { project: AudiobookProject; onRefr
           )}
 
           {detail && detail.chapters.length > 0 && ['ready', 'generating', 'done'].includes(status) && (
-            <div>
+            <div className="rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-3 py-2">
               <div className="flex items-center justify-between mb-2">
                 <button
-                  className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors text-left"
+                  className="flex items-center gap-1 text-xs font-medium text-emerald-400/80 hover:text-emerald-300 transition-colors text-left"
                   onClick={() => setChaptersCollapsed(v => !v)}
                 >
                   {chaptersCollapsed ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}