From caa78cd17ef5586bd3364bcf7254fc29738299da Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 6 Apr 2026 22:51:36 +0200
Subject: [PATCH] ui: redesign with classic web aesthetic dark theme

---
 static/css/style.css | 346 ++++++++++++++++++++++++-------------------
 1 file changed, 193 insertions(+), 153 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 9d48b51..e377cf8 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,12 +1,13 @@
 :root {
-  --bg: #0a0a0a;
-  --surface: #141414;
-  --surface-hover: #1f1f1f;
-  --border: #262626;
-  --text: #f0f0f0;
-  --text-muted: #737373;
-  --link: #a3a3a3;
-  --link-hover: #ffffff;
+  --bg: #1a1a1a;
+  --surface: #262626;
+  --surface-hover: #303030;
+  --border: #404040;
+  --text: #e8e8e8;
+  --text-muted: #999999;
+  --link: #4a9eff;
+  --link-hover: #6bb3ff;
+  --link-active: #9966ff;
 }
 
 * {
@@ -16,21 +17,19 @@
 body {
   background-color: var(--bg);
   color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-size: 14px;
   line-height: 1.5;
   margin: 0;
   padding: 0;
   min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
 }
 
 /* Header */
 header {
-  padding: 0 32px;
-  height: 56px;
+  padding: 8px 16px;
+  background: var(--surface);
   border-bottom: 1px solid var(--border);
-  background: var(--bg);
   position: sticky;
   top: 0;
   z-index: 100;
@@ -39,21 +38,21 @@ header {
 .header-top {
   display: flex;
   align-items: center;
-  height: 100%;
-  gap: 32px;
+  gap: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
 .header-left {
   display: flex;
   align-items: center;
-  gap: 32px;
+  gap: 24px;
 }
 
 .logo {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 700;
   color: var(--text);
-  letter-spacing: -0.02em;
 }
 
 .logo:hover {
@@ -62,17 +61,19 @@ header {
 
 .nav {
   display: flex;
-  gap: 24px;
+  gap: 16px;
+  border-left: 1px solid var(--border);
+  padding-left: 16px;
 }
 
 .nav a {
   font-size: 13px;
-  font-weight: 500;
-  color: var(--text-muted);
+  color: var(--link);
+  text-decoration: none;
 }
 
 .nav a:hover {
-  color: var(--text);
+  text-decoration: underline;
 }
 
 .header-search {
@@ -83,15 +84,15 @@ header {
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text);
-  padding: 8px 12px;
+  padding: 6px 8px;
   font-size: 13px;
-  width: 240px;
+  width: 200px;
   font-family: inherit;
 }
 
 .search-input:focus {
   outline: none;
-  border-color: var(--text-muted);
+  border-color: var(--link);
 }
 
 .search-input::placeholder {
@@ -100,8 +101,8 @@ header {
 
 /* Main */
 main {
-  padding: 32px;
-  max-width: 1200px;
+  padding: 16px;
+  max-width: 1400px;
   margin: 0 auto;
 }
 
@@ -111,20 +112,24 @@ a {
 }
 
 a:hover {
-  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+a:visited {
+  color: var(--link-active);
 }
 
 /* Grid */
 .catalog-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 12px;
 }
 
 .catalog-item {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 }
 
 .catalog-thumb {
@@ -136,7 +141,7 @@ a:hover {
 }
 
 .catalog-thumb:hover {
-  opacity: 0.8;
+  border-color: var(--link);
 }
 
 .no-image {
@@ -152,8 +157,7 @@ a:hover {
 }
 
 .catalog-title {
-  font-size: 13px;
-  font-weight: 500;
+  font-size: 12px;
   color: var(--text);
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -171,8 +175,8 @@ a:hover {
 }
 
 .loading-dot {
-  width: 4px;
-  height: 4px;
+  width: 3px;
+  height: 3px;
   background: var(--text-muted);
   animation: pulse 1.5s ease-in-out infinite;
 }
@@ -191,12 +195,12 @@ a:hover {
 /* Empty State */
 .empty-state {
   text-align: center;
-  padding: 64px 32px;
+  padding: 48px 16px;
 }
 
 .empty-state-title {
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--text);
   margin-bottom: 8px;
 }
@@ -207,73 +211,81 @@ a:hover {
 }
 
 .empty-state a {
-  color: var(--text);
+  color: var(--link);
+}
+
+.empty-state a:hover {
   text-decoration: underline;
 }
 
 /* Login */
 .login-container {
-  max-width: 320px;
-  margin: 80px auto;
+  max-width: 280px;
+  margin: 60px auto;
+  border: 1px solid var(--border);
+  padding: 16px;
+  background: var(--surface);
 }
 
 .login-container h2 {
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 600;
-  margin: 0 0 8px 0;
+  margin: 0 0 4px 0;
 }
 
 .login-subtitle {
   color: var(--text-muted);
-  font-size: 14px;
-  margin: 0 0 32px 0;
+  font-size: 12px;
+  margin: 0 0 16px 0;
 }
 
 .login-form {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
 }
 
 .form-group label {
-  font-size: 13px;
-  color: var(--text-muted);
+  font-size: 12px;
+  color: var(--text);
+  font-weight: 500;
 }
 
 .form-group input {
-  padding: 10px 12px;
+  padding: 6px 8px;
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text);
-  font-size: 14px;
+  font-size: 13px;
   font-family: inherit;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: var(--text-muted);
+  border-color: var(--link);
 }
 
 .login-button {
-  padding: 10px;
-  background: var(--text);
-  color: var(--bg);
-  border: none;
-  font-size: 14px;
+  padding: 6px;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  font-size: 13px;
   font-weight: 500;
   cursor: pointer;
-  margin-top: 8px;
+  margin-top: 4px;
   font-family: inherit;
 }
 
 .login-button:hover {
-  background: var(--link-hover);
+  background: var(--surface-hover);
+  border-color: var(--link);
 }
 
 /* Watchlist */
@@ -281,11 +293,11 @@ a:hover {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .watchlist-header h2 {
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 600;
   margin: 0;
 }
@@ -294,6 +306,7 @@ a:hover {
   display: flex;
   align-items: center;
   gap: 16px;
+  font-size: 13px;
 }
 
 .text-link {
@@ -301,14 +314,14 @@ a:hover {
   font-family: inherit;
   background: none;
   border: none;
-  color: var(--text-muted);
+  color: var(--link);
   cursor: pointer;
   text-decoration: none;
   padding: 0;
 }
 
 .text-link:hover {
-  color: var(--text);
+  text-decoration: underline;
 }
 
 .view-toggle {
@@ -317,45 +330,51 @@ a:hover {
 }
 
 .view-toggle a {
-  padding: 6px 12px;
-  font-size: 13px;
-  color: var(--text-muted);
+  padding: 4px 8px;
+  font-size: 12px;
+  color: var(--link);
+  border-right: 1px solid var(--border);
+  text-decoration: none;
+}
+
+.view-toggle a:last-child {
+  border-right: none;
 }
 
 .view-toggle a:hover {
-  color: var(--text);
-  background: var(--surface);
+  background: var(--surface-hover);
 }
 
 .view-toggle a.active {
-  color: var(--bg);
-  background: var(--text);
+  background: var(--link);
+  color: white;
 }
 
 .status-tabs {
   display: flex;
   gap: 0;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   border-bottom: 1px solid var(--border);
   overflow-x: auto;
 }
 
 .status-tabs a {
-  padding: 12px 16px;
-  font-size: 13px;
-  color: var(--text-muted);
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--link);
   white-space: nowrap;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
+  text-decoration: none;
 }
 
 .status-tabs a:hover {
-  color: var(--text);
+  text-decoration: underline;
 }
 
 .status-tabs a.active {
-  color: var(--text);
-  border-bottom-color: var(--text);
+  border-bottom-color: var(--link);
+  font-weight: 600;
 }
 
 .watchlist-item {
@@ -364,18 +383,18 @@ a:hover {
 
 .watchlist-item .remove-btn {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
+  top: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.8);
+  background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text-muted);
   cursor: pointer;
-  font-size: 14px;
+  font-size: 12px;
   opacity: 0;
   transition: opacity 0.15s;
 }
@@ -385,42 +404,45 @@ a:hover {
 }
 
 .watchlist-item .remove-btn:hover {
-  color: #ef4444;
-  border-color: #ef4444;
+  color: #cc0000;
+  border-color: #cc0000;
 }
 
 .watchlist-status {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-muted);
 }
 
 .watchlist-table {
   width: 100%;
   border-collapse: collapse;
+  border: 1px solid var(--border);
 }
 
 .watchlist-table th {
   text-align: left;
-  padding: 12px 16px;
+  padding: 8px 12px;
   font-size: 12px;
-  font-weight: 500;
-  color: var(--text-muted);
+  font-weight: 600;
+  color: var(--text);
   border-bottom: 1px solid var(--border);
+  background: var(--surface-hover);
 }
 
 .watchlist-table td {
-  padding: 12px 16px;
+  padding: 8px 12px;
   border-bottom: 1px solid var(--border);
   vertical-align: middle;
+  font-size: 13px;
 }
 
 .watchlist-table tr:hover {
-  background: var(--surface);
+  background: var(--surface-hover);
 }
 
 .watchlist-table .thumb {
-  width: 40px;
-  height: 60px;
+  width: 32px;
+  height: 48px;
   object-fit: cover;
   border: 1px solid var(--border);
 }
@@ -431,26 +453,29 @@ a:hover {
 
 .watchlist-table .status-cell {
   color: var(--text-muted);
+  font-size: 12px;
 }
 
 .watchlist-table .remove-link {
-  color: var(--text-muted);
-  font-size: 13px;
+  color: var(--link);
+  font-size: 12px;
   background: none;
   border: none;
   cursor: pointer;
   font-family: inherit;
+  padding: 0;
+  text-decoration: none;
 }
 
 .watchlist-table .remove-link:hover {
-  color: #ef4444;
+  text-decoration: underline;
 }
 
 /* Anime Page */
 .anime-page {
   display: flex;
-  gap: 40px;
-  max-width: 1100px;
+  gap: 24px;
+  max-width: 1200px;
 }
 
 .anime-main {
@@ -460,13 +485,13 @@ a:hover {
 
 .anime-hero {
   display: flex;
-  gap: 24px;
-  margin-bottom: 32px;
+  gap: 16px;
+  margin-bottom: 24px;
 }
 
 .anime-poster {
   flex-shrink: 0;
-  width: 180px;
+  width: 140px;
 }
 
 .anime-poster img {
@@ -480,55 +505,53 @@ a:hover {
 }
 
 .anime-info h1 {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 600;
   margin: 0 0 4px 0;
-  letter-spacing: -0.02em;
 }
 
 .anime-alt-title {
-  font-size: 14px;
+  font-size: 12px;
   color: var(--text-muted);
-  margin: 0 0 16px 0;
+  margin: 0 0 12px 0;
 }
 
 .anime-quick-info {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .info-tag {
-  padding: 4px 10px;
-  background: var(--surface);
+  padding: 2px 6px;
+  background: var(--surface-hover);
   border: 1px solid var(--border);
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 11px;
   color: var(--text-muted);
 }
 
 .anime-actions {
-  margin-top: 16px;
+  margin-top: 12px;
 }
 
 .anime-synopsis {
-  margin-bottom: 32px;
+  margin-bottom: 24px;
 }
 
 .anime-synopsis h3,
 .anime-relations h3 {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-muted);
+  color: var(--text);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin: 0 0 12px 0;
 }
 
 .anime-synopsis p {
-  font-size: 14px;
-  line-height: 1.7;
+  font-size: 13px;
+  line-height: 1.6;
   color: var(--text);
   margin: 0;
 }
@@ -541,13 +564,13 @@ a:hover {
 .relations-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
-  gap: 16px;
+  gap: 12px;
 }
 
 .relation-card {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 }
 
 .relation-card.current {
@@ -557,8 +580,8 @@ a:hover {
 .relation-card.current::before {
   content: '';
   position: absolute;
-  inset: -4px;
-  border: 2px solid var(--text);
+  inset: -2px;
+  border: 2px solid var(--link);
   pointer-events: none;
 }
 
@@ -570,12 +593,11 @@ a:hover {
 }
 
 .relation-card:hover .relation-thumb {
-  opacity: 0.8;
+  border-color: var(--link);
 }
 
 .relation-title {
-  font-size: 12px;
-  font-weight: 500;
+  font-size: 11px;
   color: var(--text);
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -586,11 +608,11 @@ a:hover {
 /* Anime Sidebar */
 .anime-sidebar {
   flex-shrink: 0;
-  width: 280px;
+  width: 240px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 20px;
+  padding: 12px;
   background: var(--surface);
   border: 1px solid var(--border);
   height: fit-content;
@@ -603,13 +625,14 @@ a:hover {
 }
 
 .sidebar-label {
-  font-size: 13px;
+  font-size: 11px;
   font-weight: 600;
   color: var(--text);
+  text-transform: uppercase;
 }
 
 .sidebar-value {
-  font-size: 13px;
+  font-size: 12px;
   color: var(--text-muted);
   line-height: 1.4;
 }
@@ -621,14 +644,14 @@ a:hover {
 .sidebar-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 4px;
 }
 
 .sidebar-tag {
-  padding: 4px 10px;
+  padding: 2px 6px;
   background: var(--surface-hover);
   border: 1px solid var(--border);
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text);
 }
 
@@ -641,18 +664,19 @@ a:hover {
 .dropdown-trigger {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
+  gap: 6px;
+  padding: 6px 12px;
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text);
-  font-size: 14px;
+  font-size: 13px;
   font-family: inherit;
   cursor: pointer;
 }
 
 .dropdown-trigger:hover {
-  border-color: var(--text-muted);
+  background: var(--surface-hover);
+  border-color: var(--link);
 }
 
 .dropdown-arrow {
@@ -665,11 +689,12 @@ a:hover {
   top: 100%;
   left: 0;
   right: 0;
-  min-width: 180px;
+  min-width: 160px;
   background: var(--surface);
   border: 1px solid var(--border);
   display: none;
   z-index: 50;
+  margin-top: -1px;
 }
 
 .dropdown.open .dropdown-menu {
@@ -681,14 +706,19 @@ a:hover {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 10px 16px;
+  padding: 8px 12px;
   background: none;
   border: none;
   color: var(--text);
-  font-size: 14px;
+  font-size: 13px;
   font-family: inherit;
   cursor: pointer;
   text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+
+.dropdown-item:last-child {
+  border-bottom: none;
 }
 
 .dropdown-item:hover {
@@ -696,22 +726,23 @@ a:hover {
 }
 
 .dropdown-item.active {
-  color: var(--text);
+  background: var(--surface-hover);
+  font-weight: 600;
 }
 
 .dropdown-item .check {
-  color: var(--text-muted);
+  color: var(--link);
   font-size: 12px;
 }
 
 .dropdown-item.remove {
-  color: #ef4444;
+  color: #cc0000;
 }
 
 .dropdown-divider {
   height: 1px;
   background: var(--border);
-  margin: 4px 0;
+  margin: 0;
 }
 
 /* Responsive */
@@ -732,19 +763,28 @@ a:hover {
 
 @media (max-width: 768px) {
   header {
-    padding: 0 16px;
+    padding: 8px 12px;
   }
 
   .header-top {
     flex-wrap: wrap;
-    height: auto;
-    padding: 16px 0;
-    gap: 16px;
+    gap: 12px;
+  }
+
+  .header-left {
+    gap: 12px;
+  }
+
+  .nav {
+    border-left: none;
+    padding-left: 0;
+    flex: 1;
+    order: 3;
   }
 
   .header-search {
     width: 100%;
-    margin-left: 0;
+    order: 4;
   }
 
   .search-input {
@@ -752,29 +792,29 @@ a:hover {
   }
 
   main {
-    padding: 16px;
+    padding: 12px;
   }
 
   .catalog-grid {
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 8px;
   }
 
   .anime-hero {
     flex-direction: column;
-    gap: 16px;
+    gap: 12px;
   }
 
   .anime-poster {
-    width: 140px;
+    width: 100px;
   }
 
   .anime-info h1 {
-    font-size: 20px;
+    font-size: 16px;
   }
 
   .relations-grid {
     grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
+    gap: 8px;
   }
 }