Match Kaizoku theme cards

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.1.1 - 2026-09-15
+
+- Matched the library list and poster treatment more closely to Kaizoku's web theme, using the same purple card gradients, hover states, and cover fallback styling.
+
 ## 1.1.0 - 2026-09-15
 
 - Restyled the web UI to match Kaizoku's dark purple glass-panel design.

README.md

@@ -1,6 +1,6 @@
 # Kaizoku-Styled Private Anime Library
 
-A small local web app for browsing a folder-based private video collection. The interface uses a Kaizoku-inspired dark purple glass-panel design, but the app remains a standalone private library browser. It does not integrate with Plex, Jellyfin, Kodi, or any external metadata provider.
+A small local web app for browsing a folder-based private video collection. The interface follows Kaizoku's dark purple glass-panel design, including the same card gradients, rounded controls, cover fallback treatment, and accent colors. The app remains a standalone private library browser and does not integrate with Plex, Jellyfin, Kodi, or any external metadata provider.
 
 ## Folder Layout
 

VERSION

@@ -1 +1 @@
-1.1.0
+1.1.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "private-anime-library",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "description": "A small private web app for browsing a folder-based video collection.",
   "scripts": {

public/assets/styles.css

@@ -34,7 +34,7 @@ body {
     radial-gradient(circle at top right, rgba(117, 201, 255, 0.12), transparent 24%),
     linear-gradient(180deg, #120c1d 0%, #0b0813 56%, #07050d 100%);
   color: var(--text);
-  font: 15px/1.5 "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font: 15px/1.5 "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 body::before {
@@ -240,24 +240,36 @@ label {
 
 .title-list {
   display: grid;
-  gap: 8px;
+  gap: 12px;
   min-width: 0;
 }
 
 .title-button {
   display: grid;
-  gap: 0.2rem;
+  gap: 12px;
   width: 100%;
-  min-height: 62px;
+  min-height: auto;
-  border-radius: 16px;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background: linear-gradient(180deg, rgba(32, 24, 54, 0.9) 0%, rgba(17, 13, 29, 0.96) 100%);
+  box-shadow: 0 18px 38px rgba(5, 2, 15, 0.32);
+  padding: 14px;
   text-align: left;
-  background: rgba(255, 255, 255, 0.03);
+  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+}
+
+.title-button:hover {
+  border-color: var(--line-strong);
+  background: linear-gradient(180deg, rgba(38, 28, 64, 0.94) 0%, rgba(19, 14, 32, 0.98) 100%);
+  transform: translateY(-2px);
 }
 
 .title-button.is-active {
-  border-color: rgba(157, 123, 255, 0.34);
+  border-color: rgba(157, 123, 255, 0.58);
-  background: var(--accent-soft);
+  background: linear-gradient(180deg, rgba(48, 36, 80, 0.96), rgba(20, 15, 35, 0.96));
-  box-shadow: inset 0 0 0 1px rgba(157, 123, 255, 0.16);
+  box-shadow:
+    inset 0 0 0 1px rgba(157, 123, 255, 0.16),
+    0 18px 38px rgba(5, 2, 15, 0.32);
 }
 
 .title-button__name {
@@ -308,16 +320,16 @@ label {
 }
 
 .poster {
-  aspect-ratio: 2 / 3;
+  aspect-ratio: 3 / 4;
-  border: 1px solid var(--line);
+  position: relative;
-  border-radius: 20px;
+  border: 1px solid rgba(157, 123, 255, 0.16);
+  border-radius: 16px;
   background:
-    radial-gradient(circle at 35% 20%, rgba(157, 123, 255, 0.28), transparent 34%),
+    radial-gradient(circle at top, rgba(157, 123, 255, 0.28), transparent 44%),
-    linear-gradient(180deg, rgba(32, 24, 54, 0.9), rgba(17, 13, 29, 0.96));
+    linear-gradient(180deg, #221734 0%, #0c0915 100%);
   overflow: hidden;
   display: grid;
   place-items: center;
-  box-shadow: 0 16px 36px rgba(5, 2, 15, 0.3);
 }
 
 .poster img {
@@ -327,9 +339,16 @@ label {
 }
 
 .poster span {
-  color: var(--accent);
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: #d8e5ef;
   font-size: clamp(2.5rem, 7vw, 5rem);
   font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  background: linear-gradient(180deg, rgba(157, 123, 255, 0.24), rgba(9, 7, 15, 0.18));
 }
 
 .summary {