From 0179ddbdf4ba996fb4676ead45ae7c619ec49172 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 3 Apr 2026 15:35:39 +0000 Subject: [PATCH] feat: flat design avec palette Blazing Flame --- static/css/style.css | 524 +++++++----------- static/js/anime-details.js | 2 +- static/js/recommendations.js | 10 +- static/js/series-search.js | 6 +- templates/components/admin_panel.html | 18 +- templates/components/anime_card.html | 4 +- .../components/anime_search_results.html | 34 +- templates/components/downloads_section.html | 2 +- templates/components/episode_list.html | 22 +- templates/components/header.html | 2 +- templates/components/login_prompt.html | 4 +- templates/components/player_embed.html | 4 +- templates/components/series_card.html | 4 +- .../components/series_search_results.html | 32 +- templates/components/settings_section.html | 15 +- templates/components/toast_container.html | 16 +- .../components/watchlist_items_list.html | 54 +- templates/components/watchlist_section.html | 14 +- templates/index.html | 4 +- templates/player.html | 54 +- templates/watchlist.html | 10 +- 21 files changed, 348 insertions(+), 487 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 363d2a7..f604c5f 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,90 +1,20 @@ -/* Ohm Streaming - Material Design Dark Theme */ +/* Ohm Streaming - Flat Design Theme */ :root { - /* ========== EXISTING VARIABLES (kept for compatibility) ========== */ - --bg-dark: #0b0b14; - --bg-card: #161625; - --primary: #00d9ff; - --primary-hover: #00b8d9; - --primary-glow: rgba(0, 217, 255, 0.3); - --secondary: #ff6b6b; - --secondary-hover: #e55a5a; - --text-main: #ffffff; - --text-dim: #a0a0b0; - --accent: #00ff88; - --danger: #ff4d4d; - --card-radius: 12px; - --input-radius: 8px; - --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - - /* ========== MATERIAL DESIGN VARIABLES ========== */ - /* Material Colors */ - --md-primary: #6C63FF; - --md-primary-variant: #5a52d5; - --md-secondary: #00BCD4; - --md-secondary-variant: #0097a7; - --md-surface: #1E1E2E; - --md-surface-variant: #2A2A3C; - --md-background: #12121c; - --md-error: #ff5252; - --md-success: #4caf50; - --md-warning: #ffc107; - --md-on-primary: #ffffff; - --md-on-surface: #e0e0e0; - --md-on-background: #ffffff; - --md-outline: rgba(255, 255, 255, 0.12); - - /* Material Elevation (Box Shadows) */ - --md-elevation-0: none; - --md-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.3); - --md-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.4); - --md-elevation-3: 0 6px 24px rgba(0, 0, 0, 0.5); - --md-elevation-4: 0 8px 32px rgba(0, 0, 0, 0.6); - --md-elevation-hover: 0 12px 40px rgba(0, 0, 0, 0.7); - - /* Material Radius */ - --md-radius: 16px; - --md-radius-sm: 8px; - --md-radius-lg: 24px; - --md-radius-pill: 50px; - - /* Material Transitions */ - --md-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); - --md-transition-standard: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - --md-transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - - /* Material Letter Spacing */ - --md-letter-spacing: 0.5px; - --md-letter-spacing-lg: 1px; - - /* ========== LIGHT THEME VARIABLES (commented, ready for toggle) ========== */ - /* - [data-theme="light"] { - --md-primary: #6C63FF; - --md-primary-variant: #5a52d5; - --md-secondary: #00BCD4; - --md-secondary-variant: #0097a7; - --md-surface: #ffffff; - --md-surface-variant: #f5f5f5; - --md-background: #fafafa; - --md-error: #d32f2f; - --md-success: #388e3c; - --md-warning: #ffa000; - --md-on-primary: #ffffff; - --md-on-surface: #1c1b1f; - --md-on-background: #1c1b1f; - --md-outline: rgba(0, 0, 0, 0.12); - --md-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.15); - --md-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.2); - --md-elevation-3: 0 6px 24px rgba(0, 0, 0, 0.25); - --md-elevation-4: 0 8px 32px rgba(0, 0, 0, 0.3); - --md-elevation-hover: 0 12px 40px rgba(0, 0, 0, 0.35); - --bg-dark: #f5f5f5; - --bg-card: #ffffff; - --primary: #6C63FF; - --text-main: #1c1b1f; - --text-dim: #605d62; - } - */ + /* ========== FLAT DESIGN VARIABLES ========== */ + --primary: #f15025; + --primary-hover: #d94420; + --bg-dark: #ffffff; + --bg-card: #e6e8e6; + --text-main: #191919; + --text-dim: #ced0ce; + --secondary: #ced0ce; + --accent: #f15025; + --danger: #e63946; + --success: #2d936c; + --warning: #f4a261; + --card-radius: 4px; + --input-radius: 4px; + --transition: all 0.2s ease; } /* ========== BASE RESET ========== */ @@ -102,31 +32,31 @@ body { overflow-x: hidden; } -/* ========== CUSTOM SCROLLBAR (Material Design) ========== */ +/* ========== CUSTOM SCROLLBAR ========== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.03); - border-radius: 10px; + background: #e6e8e6; + border-radius: 4px; } ::-webkit-scrollbar-thumb { - background: var(--md-primary); - border-radius: 10px; - transition: var(--md-transition-standard); + background: var(--text-dim); + border-radius: 4px; + transition: var(--transition); } ::-webkit-scrollbar-thumb:hover { - background: var(--md-primary-variant); + background: var(--primary); } /* Firefox scrollbar */ * { scrollbar-width: thin; - scrollbar-color: var(--md-primary) rgba(255, 255, 255, 0.03); + scrollbar-color: var(--text-dim) #e6e8e6; } /* ========== CONTAINER ========== */ @@ -148,9 +78,7 @@ h1 { font-weight: 800; letter-spacing: -1px; margin-bottom: 5px; - background: linear-gradient(90deg, var(--primary), var(--accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + color: var(--primary); } .subtitle { @@ -171,46 +99,26 @@ h1 { font-weight: 700; border-left: 4px solid var(--primary); padding-left: 15px; + color: var(--text-main); } -/* ========== MATERIAL DESIGN BUTTONS ========== */ +/* ========== FLAT BUTTONS ========== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; - border-radius: var(--md-radius-sm); + border-radius: var(--input-radius); font-size: 0.9rem; font-weight: 600; - letter-spacing: var(--md-letter-spacing); cursor: pointer; - transition: var(--md-transition-standard); + transition: var(--transition); border: 1px solid transparent; text-decoration: none; color: #fff; white-space: nowrap; position: relative; - overflow: hidden; -} - -/* Ripple effect (CSS-only) */ -.btn::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - border-radius: 50%; - background: rgba(255, 255, 255, 0.3); - transform: translate(-50%, -50%); - transition: width 0.6s, height 0.6s; -} - -.btn:active::before { - width: 300px; - height: 300px; } .btn:disabled { @@ -218,94 +126,81 @@ h1 { cursor: not-allowed; } -.btn:disabled::before { - display: none; -} - -/* Material Button Variants */ -.btn-contained { - background: var(--md-primary); - color: var(--md-on-primary); - box-shadow: var(--md-elevation-1); -} - -.btn-contained:hover:not(:disabled) { - background: var(--md-primary-variant); - box-shadow: var(--md-elevation-2); - transform: translateY(-2px); -} - -.btn-outlined { - background: transparent; - border: 1px solid var(--md-outline); - color: var(--md-on-surface); -} - -.btn-outlined:hover:not(:disabled) { - background: rgba(108, 99, 255, 0.08); - border-color: var(--md-primary); - color: var(--md-primary); -} - -.btn-text { - background: transparent; - color: var(--md-primary); - padding: 10px 15px; -} - -.btn-text:hover:not(:disabled) { - background: rgba(108, 99, 255, 0.08); -} - -/* Primary Button (legacy compatibility) */ +/* Primary Button */ .btn-primary { background: var(--primary); - color: #000; - box-shadow: var(--md-elevation-1); + color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--primary-hover); - box-shadow: 0 0 15px var(--primary-glow), var(--md-elevation-2); - transform: translateY(-2px); } /* Secondary Button */ .btn-secondary { - background: rgba(255, 255, 255, 0.05); - border-color: rgba(255, 255, 255, 0.1); + background: var(--bg-card); + border-color: var(--text-dim); color: var(--text-main); } .btn-secondary:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: var(--md-elevation-1); + background: var(--text-dim); + border-color: var(--text-main); } /* Accent Button */ .btn-accent { background: var(--accent); - color: #000; - box-shadow: var(--md-elevation-1); + color: #fff; } .btn-accent:hover:not(:disabled) { - box-shadow: var(--md-elevation-2); - transform: translateY(-2px); + background: var(--primary-hover); } /* Danger Button */ .btn-danger { - background: rgba(255, 77, 77, 0.15); - border-color: rgba(255, 77, 77, 0.3); + background: transparent; + border-color: var(--danger); color: var(--danger); } .btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; - box-shadow: var(--md-elevation-2); +} + +/* Contained Button */ +.btn-contained { + background: var(--primary); + color: #fff; +} + +.btn-contained:hover:not(:disabled) { + background: var(--primary-hover); +} + +/* Outlined Button */ +.btn-outlined { + background: transparent; + border: 1px solid var(--text-dim); + color: var(--text-main); +} + +.btn-outlined:hover:not(:disabled) { + border-color: var(--primary); + color: var(--primary); +} + +/* Text Button */ +.btn-text { + background: transparent; + color: var(--primary); + padding: 10px 15px; +} + +.btn-text:hover:not(:disabled) { + background: var(--bg-card); } /* Button Sizes */ @@ -343,42 +238,37 @@ h1 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; - letter-spacing: var(--md-letter-spacing-lg); } .btn-watch { background: var(--primary); - color: #000; - box-shadow: var(--md-elevation-1); -} - -.btn-watch:hover { - box-shadow: var(--md-elevation-2); -} - -.btn-download { - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; } -.btn-download:hover { - background: rgba(255, 255, 255, 0.1); +.btn-watch:hover:not(:disabled) { + background: var(--primary-hover); } -/* ========== MATERIAL DESIGN CARDS ========== */ +.btn-download { + background: var(--bg-card); + border: 1px solid var(--text-dim); + color: var(--text-main); +} + +.btn-download:hover:not(:disabled) { + background: var(--text-dim); +} + +/* ========== FLAT CARDS ========== */ .card, .hc, .download-item { - background: var(--md-surface); - border-radius: var(--md-radius); - border: 1px solid rgba(255, 255, 255, 0.06); - box-shadow: var(--md-elevation-1); - transition: var(--md-transition-standard); + background: var(--bg-card); + border-radius: var(--card-radius); + border: 1px solid var(--text-dim); + transition: var(--transition); } .card:hover, .hc:hover, .download-item:hover { - transform: translateY(-2px); - box-shadow: var(--md-elevation-2); - border-color: rgba(255, 255, 255, 0.1); + border-color: var(--primary); } /* ========== HORIZONTAL SCROLL ROW ========== */ @@ -402,8 +292,8 @@ h1 { .streaming-row::-webkit-scrollbar-thumb, .recommendations-carousel::-webkit-scrollbar-thumb, .releases-carousel::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.1); - border-radius: 10px; + background: var(--text-dim); + border-radius: 4px; } .home-row::-webkit-scrollbar-thumb:hover, @@ -413,25 +303,21 @@ h1 { background: var(--primary); } -/* ========== HOME CARD (Material Card) ========== */ +/* ========== HOME CARD ========== */ .hc { flex: 0 0 180px; display: block; - background: var(--md-surface); - border-radius: var(--md-radius); + background: var(--bg-card); + border-radius: var(--card-radius); overflow: hidden; - transition: var(--md-transition-standard); - border: 1px solid rgba(255, 255, 255, 0.06); + transition: var(--transition); + border: 1px solid var(--text-dim); text-decoration: none; color: inherit; - box-shadow: var(--md-elevation-1); } .hc:hover { - transform: translateY(-2px) scale(1.02); - z-index: 10; border-color: var(--primary); - box-shadow: var(--md-elevation-hover); } .hc-poster { @@ -453,14 +339,12 @@ h1 { position: absolute; top: 8px; right: 8px; - background: rgba(0, 0, 0, 0.85); + background: rgba(0, 0, 0, 0.75); color: #ffcc00; padding: 4px 8px; - border-radius: var(--md-radius-sm); + border-radius: 4px; font-size: 0.7rem; font-weight: 800; - letter-spacing: var(--md-letter-spacing); - backdrop-filter: blur(4px); } .hc-play { @@ -471,19 +355,17 @@ h1 { height: 36px; border-radius: 50%; background: var(--primary); - color: var(--bg-dark); + color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; opacity: 0; - transition: var(--md-transition-standard); - box-shadow: var(--md-elevation-2); + transition: var(--transition); } .hc:hover .hc-play { opacity: 1; - transform: scale(1.1); } .hc-info { @@ -495,7 +377,6 @@ h1 { font-weight: 700; text-transform: uppercase; color: var(--primary); - letter-spacing: var(--md-letter-spacing-lg); display: block; margin-bottom: 4px; } @@ -517,11 +398,11 @@ h1 { gap: 20px; } -/* ========== MATERIAL TABS ========== */ +/* ========== FLAT TABS ========== */ .tabs { display: flex; gap: 20px; - border-bottom: 1px solid var(--md-outline); + border-bottom: 1px solid var(--text-dim); margin-bottom: 30px; overflow-x: auto; } @@ -534,12 +415,11 @@ h1 { font-weight: 600; cursor: pointer; position: relative; - transition: var(--md-transition-standard); + transition: var(--transition); display: flex; align-items: center; gap: 8px; white-space: nowrap; - letter-spacing: var(--md-letter-spacing); } .tab svg { @@ -563,31 +443,28 @@ h1 { width: 100%; height: 3px; background: var(--primary); - box-shadow: 0 0 10px var(--primary-glow); border-radius: 3px 3px 0 0; } -/* ========== MATERIAL INPUTS ========== */ +/* ========== FLAT INPUTS ========== */ .input-group { display: flex; - background: rgba(255, 255, 255, 0.03); - border-radius: var(--md-radius); + background: var(--bg-card); + border-radius: var(--input-radius); padding: 6px; - border: 1px solid var(--md-outline); - transition: var(--md-transition-standard); + border: 1px solid var(--text-dim); + transition: var(--transition); } .input-group:focus-within { border-color: var(--primary); - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 0 15px rgba(0, 217, 255, 0.1); } .input-group input { background: none; border: none; padding: 12px 16px; - color: #fff; + color: var(--text-main); flex-grow: 1; font-size: 1rem; } @@ -603,10 +480,10 @@ h1 { .btn-search { padding: 0 25px; - border-radius: var(--md-radius-sm); + border-radius: var(--input-radius); } -/* Material Underline Input Style */ +/* Flat Input Style */ .form-group { margin-bottom: 24px; position: relative; @@ -618,8 +495,7 @@ h1 { color: var(--text-dim); font-size: 0.85rem; font-weight: 500; - letter-spacing: var(--md-letter-spacing); - transition: var(--md-transition-standard); + transition: var(--transition); } .form-group input { @@ -627,10 +503,10 @@ h1 { padding: 16px 0; background: transparent; border: none; - border-bottom: 2px solid var(--md-outline); - color: #fff; + border-bottom: 2px solid var(--text-dim); + color: var(--text-main); font-size: 1rem; - transition: var(--md-transition-standard); + transition: var(--transition); } .form-group input:focus { @@ -653,34 +529,33 @@ h1 { .auth-panel { margin-bottom: 25px; padding: 16px 20px; - background: linear-gradient(90deg, rgba(0, 217, 255, 0.1), transparent); - border: 1px solid rgba(0, 217, 255, 0.15); - border-radius: var(--md-radius); + background: var(--bg-card); + border: 1px solid var(--primary); + border-radius: var(--card-radius); display: flex; justify-content: space-between; align-items: center; - box-shadow: var(--md-elevation-1); } .auth-container { max-width: 450px; margin: 80px auto; padding: 40px; - background: var(--md-surface); - border-radius: var(--md-radius-lg); - border: 1px solid var(--md-outline); - box-shadow: var(--md-elevation-3); + background: var(--bg-card); + border-radius: 6px; + border: 1px solid var(--text-dim); } .auth-title { text-align: center; margin-bottom: 30px; + color: var(--primary); } .auth-tabs { display: flex; margin-bottom: 30px; - border-bottom: 1px solid var(--md-outline); + border-bottom: 1px solid var(--text-dim); } .auth-tab { @@ -689,7 +564,7 @@ h1 { text-align: center; cursor: pointer; color: var(--text-dim); - transition: var(--md-transition-standard); + transition: var(--transition); font-weight: 600; position: relative; } @@ -718,32 +593,32 @@ h1 { .auth-error, .auth-success { padding: 12px 16px; - border-radius: var(--md-radius-sm); + border-radius: var(--input-radius); margin-bottom: 20px; font-size: 0.9rem; display: none; } .auth-error { - background: rgba(255, 77, 77, 0.1); - border: 1px solid rgba(255, 77, 77, 0.3); + background: rgba(230, 57, 70, 0.1); + border: 1px solid var(--danger); color: var(--danger); } .auth-success { - background: rgba(0, 255, 136, 0.1); - border: 1px solid rgba(0, 255, 136, 0.3); - color: var(--accent); + background: rgba(45, 147, 108, 0.1); + border: 1px solid var(--success); + color: var(--success); } .show { display: block !important; } -/* ========== MATERIAL PROGRESS BARS ========== */ +/* ========== FLAT PROGRESS BARS ========== */ .progress-container { height: 6px; - background: rgba(255, 255, 255, 0.1); + background: var(--text-dim); border-radius: 3px; margin: 12px 0; overflow: hidden; @@ -751,7 +626,7 @@ h1 { .progress-bar { height: 100%; - background: linear-gradient(90deg, var(--primary), var(--accent)); + background: var(--primary); transition: width 0.3s ease; border-radius: 3px; } @@ -761,21 +636,20 @@ h1 { width: 40px; height: 40px; padding: 0; - border-radius: var(--md-radius-sm); - background: rgba(255, 255, 255, 0.05); - border: 1px solid var(--md-outline); + border-radius: var(--input-radius); + background: var(--bg-card); + border: 1px solid var(--text-dim); color: var(--text-main); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; - transition: var(--md-transition-standard); + transition: var(--transition); } .btn-icon:hover { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: var(--md-elevation-1); + background: var(--text-dim); + border-color: var(--text-main); } .btn-icon.danger { @@ -783,17 +657,19 @@ h1 { } .btn-icon.danger:hover { - background: rgba(255, 77, 77, 0.15); - border-color: rgba(255, 77, 77, 0.3); + background: var(--danger); + color: #fff; + border-color: var(--danger); } .btn-icon.success { - color: var(--accent); + color: var(--success); } .btn-icon.success:hover { - background: rgba(0, 255, 136, 0.15); - border-color: rgba(0, 255, 136, 0.3); + background: var(--success); + color: #fff; + border-color: var(--success); } /* ========== DOWNLOAD ITEMS ========== */ @@ -804,20 +680,18 @@ h1 { } .download-item { - background: var(--md-surface); - border-radius: var(--md-radius); + background: var(--bg-card); + border-radius: var(--card-radius); padding: 20px; - border: 1px solid rgba(255, 255, 255, 0.06); - transition: var(--md-transition-standard); - box-shadow: var(--md-elevation-1); + border: 1px solid var(--text-dim); + transition: var(--transition); border-left: 4px solid var(--text-dim); margin-bottom: 10px; } .download-item:hover { border-color: var(--primary); - transform: translateY(-2px); - box-shadow: var(--md-elevation-2); + border-left-color: var(--primary); } .download-info { @@ -852,11 +726,13 @@ h1 { } .download-actions .btn-icon.warning { - color: #f0a500; + color: var(--warning); } .download-actions .btn-icon.warning:hover { - background: rgba(240, 165, 0, 0.2); + background: var(--warning); + color: #fff; + border-color: var(--warning); } /* Download Status Colors */ @@ -866,7 +742,7 @@ h1 { } .download-item.status-completed { - border-left-color: var(--accent); + border-left-color: var(--success); } .download-item.status-failed, @@ -875,7 +751,7 @@ h1 { } .download-item.status-paused { - border-left-color: #f0a500; + border-left-color: var(--warning); } .download-item.status-pending { @@ -887,56 +763,45 @@ h1 { border-left-color: var(--primary); } 50% { - border-left-color: rgba(0, 217, 255, 0.3); + border-left-color: var(--warning); } } -/* Progress bar shimmer */ +/* Progress bar for downloading */ .download-item.status-downloading .progress-bar { - background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary) 100%); - background-size: 200% 100%; - animation: shimmer 1.5s ease-in-out infinite; -} - -@keyframes shimmer { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } + background: var(--primary); } /* ========== BADGE SYSTEM ========== */ .badge-completed { - color: var(--accent); - background: rgba(0, 255, 136, 0.1); + color: var(--success); + background: rgba(45, 147, 108, 0.1); padding: 4px 8px; - border-radius: var(--md-radius-sm); + border-radius: var(--input-radius); } .badge-failed { color: var(--danger); - background: rgba(255, 77, 77, 0.1); + background: rgba(230, 57, 70, 0.1); padding: 4px 8px; - border-radius: var(--md-radius-sm); + border-radius: var(--input-radius); } .badge-downloading { color: var(--primary); - background: rgba(0, 217, 255, 0.1); + background: rgba(241, 80, 37, 0.1); padding: 4px 8px; - border-radius: var(--md-radius-sm); + border-radius: var(--input-radius); } .badge-paused { - color: #ffcc00; - background: rgba(255, 204, 0, 0.1); + color: var(--warning); + background: rgba(244, 162, 97, 0.1); padding: 4px 8px; - border-radius: var(--md-radius-sm); + border-radius: var(--input-radius); } -/* ========== MATERIAL LOADING STATES ========== */ +/* ========== LOADING STATES ========== */ .loading-placeholder, .loading-spinner-container { display: flex; flex-direction: column; @@ -947,12 +812,12 @@ h1 { gap: 15px; } -/* Material Circular Spinner */ +/* Circular Spinner */ .spinner { width: 40px; height: 40px; - border: 3px solid rgba(108, 99, 255, 0.2); - border-top-color: var(--md-primary); + border: 3px solid var(--text-dim); + border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } @@ -963,25 +828,19 @@ h1 { } } -/* Material Skeleton Loading */ +/* Skeleton Loading */ .skeleton { - background: linear-gradient( - 90deg, - var(--md-surface) 0%, - var(--md-surface-variant) 50%, - var(--md-surface) 100% - ); - background-size: 200% 100%; + background: var(--bg-card); animation: skeleton-loading 1.5s ease-in-out infinite; - border-radius: var(--md-radius-sm); + border-radius: var(--input-radius); } @keyframes skeleton-loading { - 0% { - background-position: 200% 0; + 0%, 100% { + opacity: 0.5; } - 100% { - background-position: -200% 0; + 50% { + opacity: 1; } } @@ -998,7 +857,7 @@ h1 { .skeleton-card { height: 200px; - border-radius: var(--md-radius); + border-radius: var(--card-radius); } .empty-state, .no-results { @@ -1029,7 +888,7 @@ h1 { margin-bottom: 50px; } -/* ========== MATERIAL TOAST/SNACKBAR ========== */ +/* ========== FLAT TOAST ========== */ .toast-container { position: fixed; bottom: 24px; @@ -1044,32 +903,33 @@ h1 { .toast { padding: 16px 24px; - background: var(--md-surface); + background: var(--bg-card); border-left: 4px solid var(--primary); - border-radius: var(--md-radius); - box-shadow: var(--md-elevation-3); + border-radius: var(--card-radius); + border: 1px solid var(--text-dim); display: flex; align-items: center; gap: 12px; animation: slide-up 0.3s ease-out; min-width: 300px; max-width: 500px; + color: var(--text-main); } .toast.success { - border-left-color: var(--md-success); + border-left-color: var(--success); } .toast.error { - border-left-color: var(--md-error); + border-left-color: var(--danger); } .toast.warning { - border-left-color: var(--md-warning); + border-left-color: var(--warning); } .toast.info { - border-left-color: var(--md-primary); + border-left-color: var(--primary); } @keyframes slide-up { diff --git a/static/js/anime-details.js b/static/js/anime-details.js index 51d36ca..2cf8d7b 100644 --- a/static/js/anime-details.js +++ b/static/js/anime-details.js @@ -310,7 +310,7 @@ function renderAnimeDetails(anime) {
${season.entries.map(entry => `
- ${entry.type ? `${escapeHtml(entry.type)}` : ''} + ${entry.type ? `${escapeHtml(entry.type)}` : ''} ${escapeHtml(entry.title)} ${entry.url ? `↗` : ''}
diff --git a/static/js/recommendations.js b/static/js/recommendations.js index a6505c2..0dcac55 100644 --- a/static/js/recommendations.js +++ b/static/js/recommendations.js @@ -246,11 +246,11 @@ function renderReleaseCard(anime) { // Get rating color based on score function getRatingColor(score) { - if (score >= 9) return 'linear-gradient(45deg, #ffd700, #ffed4e)'; - if (score >= 8) return 'linear-gradient(45deg, #00ff88, #00d9ff)'; - if (score >= 7) return 'linear-gradient(45deg, #00d9ff, #6c5ce7)'; - if (score >= 6) return 'linear-gradient(45deg, #ffa500, #ff6b6b)'; - return 'linear-gradient(45deg, #666, #888)'; + if (score >= 9) return '#ffd700'; + if (score >= 8) return '#2d936c'; + if (score >= 7) return '#f15025'; + if (score >= 6) return '#f4a261'; + return '#ced0ce'; } // Search anime on providers (redirects to anime tab) diff --git a/static/js/series-search.js b/static/js/series-search.js index 3a51f9d..9da8574 100644 --- a/static/js/series-search.js +++ b/static/js/series-search.js @@ -50,7 +50,7 @@ async function handleSeriesSearch() {
${coverImage ? `
- +
` : ''}
@@ -102,10 +102,10 @@ async function loadSeriesEpisodesDirect(url, title) { if (data.episodes && data.episodes.length > 0) { let html = `
-