mkelvers/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: redesign with classic web aesthetic dark theme

Browse Source
This commit is contained in:
mkelvers
2026-04-06 22:51:36 +02:00
parent df0d99dd22
commit caa78cd17e
1 changed files with 193 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
static/css/style.css
View File

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