UI: Standardize buttons and design system across the application

- Created a unified button system in style.css with primary, secondary, and icon variants.
- Standardized cards, inputs, and layout components for a more premium look.
- Refactored header, login, anime/series cards, and watchlist/downloads sections to use the new design system.
- Cleaned up inline styles and redundant local style blocks in templates.
- Updated JS-generated buttons to follow the new global styling.

templates/components/anime_card.html

@@ -16,7 +16,7 @@
 
         <div class="anime-overlay">
             <div class="overlay-buttons">
-                <button class="btn-circle" 
+                <button class="btn btn-primary btn-circle" 
                         hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
                         hx-target="#player-container"
                         hx-swap="innerHTML"
@@ -38,13 +38,13 @@
         </div>
         
         <div class="anime-card-buttons">
-            <button class="btn-card btn-watch" 
+            <button class="btn btn-primary btn-small" 
                     hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
                 <i class="fas fa-eye"></i> <span>Regarder</span>
             </button>
-            <button class="btn-card btn-download" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/anime/episodes?url={{ anime.url | urlencode }}" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
@@ -53,7 +53,7 @@
         </div>
 
         {% if not in_watchlist %}
-        <button class="btn-add-watchlist"
+        <button class="btn btn-secondary btn-small btn-block"
                 hx-post="/api/watchlist"
                 hx-vals='{"anime_url": "{{ anime.url }}", "anime_title": "{{ anime.title }}", "provider_id": "{{ anime.provider_id }}"}'
                 hx-swap="none"
@@ -61,7 +61,7 @@
             <i class="fas fa-plus"></i> Watchlist
         </button>
         {% else %}
-        <button class="btn-add-watchlist followed" disabled>
+        <button class="btn btn-secondary btn-small btn-block followed" disabled>
             <i class="fas fa-check"></i> Suivi
         </button>
         {% endif %}

templates/components/downloads_list.html

@@ -4,7 +4,7 @@
             <div class="download-item task-{{ task.status }}">
                 <div class="download-info">
                     <span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
-                    <span class="badge badge-{{ task.status }}">{{ task.status }}</span>
+                    <span class="badge badge-{{ task.status }}">{{ task.status | upper }}</span>
                 </div>
                 
                 <div class="progress-container">
@@ -23,21 +23,25 @@
                             <i class="fas fa-pause"></i>
                         </button>
                     {% elif task.status == 'paused' %}
-                        <button class="btn-icon" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none">
+                        <button class="btn-icon success" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none">
                             <i class="fas fa-play"></i>
                         </button>
                     {% endif %}
                     
                     {% if task.status == 'completed' %}
-                        <a href="/video/{{ task.id }}" class="btn-icon success">
+                        <a href="/video/{{ task.id }}" class="btn-icon success" title="Voir la vidéo">
                             <i class="fas fa-external-link-alt"></i>
                         </a>
+                        <a href="/downloads/{{ task.filename }}" class="btn-icon" download title="Télécharger le fichier">
+                            <i class="fas fa-file-download"></i>
+                        </a>
                     {% endif %}
                     
                     <button class="btn-icon danger" 
                             hx-delete="/api/downloads/{{ task.id }}" 
                             hx-confirm="Supprimer ce téléchargement ?"
-                            hx-swap="none">
+                            hx-swap="none"
+                            title="Supprimer">
                         <i class="fas fa-trash"></i>
                     </button>
                 </div>
@@ -45,52 +49,8 @@
         {% endfor %}
     </div>
 {% else %}
-    <div class="empty-state">
+    <div class="empty-state" style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
+        <i class="fas fa-cloud-download-alt" style="font-size: 3rem; margin-bottom: 20px; opacity: 0.1; display: block;"></i>
         <p>Aucun téléchargement en cours</p>
     </div>
 {% endif %}
-
-<style>
-.downloads-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 15px;
-}
-.download-item {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 10px;
-    padding: 15px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.progress-container {
-    height: 8px;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    margin: 10px 0;
-    overflow: hidden;
-}
-.progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, #00d9ff, #00ff88);
-    transition: width 0.3s ease;
-}
-.download-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
-.download-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
-.download-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #aaa; }
-.download-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
-.btn-icon {
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    color: white;
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-}
-.badge-completed { color: #00ff88; }
-.badge-failed { color: #ff4444; }
-.badge-downloading { color: #00d9ff; }
-</style>

templates/components/episode_list.html

@@ -1,23 +1,26 @@
-<div class="episode-list-container card" x-data="{ view: 'grid' }">
-    <div class="episode-header">
-        <div class="header-info">
-            <h3>{{ anime_title }}</h3>
-            <span class="episode-count">{{ episodes|length }} épisodes disponibles</span>
+<div class="episode-list-container section-container" x-data="{ view: 'grid' }">
+    <div class="section-header">
+        <div>
+            <h2 style="border: none; padding: 0; margin-bottom: 5px;">{{ anime_title }}</h2>
+            <span class="badge">{{ episodes|length }} épisodes disponibles</span>
         </div>
-        <div class="header-actions">
-            <button class="btn btn-icon" @click="view = 'grid'" :class="{ 'active': view === 'grid' }">
+        <div class="header-actions" style="display: flex; gap: 10px;">
+            <button class="btn btn-icon" @click="view = 'grid'" :class="{ 'btn-primary': view === 'grid' }">
                 <i class="fas fa-th"></i>
             </button>
-            <button class="btn btn-icon" @click="view = 'list'" :class="{ 'active': view === 'list' }">
+            <button class="btn btn-icon" @click="view = 'list'" :class="{ 'btn-primary': view === 'list' }">
                 <i class="fas fa-list"></i>
             </button>
-            <button class="btn btn-close" onclick="document.getElementById('player-container').innerHTML = ''">
+            <button class="btn btn-icon danger" onclick="document.getElementById('player-container').innerHTML = ''">
                 <i class="fas fa-times"></i>
             </button>
         </div>
     </div>
 
-    <div class="episodes-content" :class="'view-' + view">
+    <!-- Zone d'affichage du player vidéo (Placé en haut pour une meilleure visibilité lors de la sélection) -->
+    <div id="video-player-display"></div>
+
+    <div class="episodes-content" :class="'view-' + view" style="margin-top: 25px;">
         {% if episodes %}
             {% for ep in episodes %}
                 <div class="episode-item">
@@ -26,105 +29,103 @@
                         {{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}
                     </div>
                     <div class="ep-actions">
-                        <button class="btn-play-small" 
+                        <button class="btn btn-primary btn-small" 
                                 hx-get="/api/player/embed?url={{ ep.url | urlencode }}" 
                                 hx-target="#video-player-display"
                                 hx-swap="innerHTML"
                                 onclick="document.getElementById('video-player-display').scrollIntoView({behavior: 'smooth'})">
                             <i class="fas fa-play"></i> Regarder
                         </button>
-                        <button class="btn-download-small"
+                        <button class="btn btn-secondary btn-icon btn-small"
                                 hx-post="/api/anime/download?url={{ ep.url | urlencode }}"
-                                hx-swap="none">
+                                hx-swap="none"
+                                title="Télécharger cet épisode">
                             <i class="fas fa-download"></i>
                         </button>
                     </div>
                 </div>
             {% endfor %}
         {% else %}
-            <p class="empty-msg">Aucun épisode trouvé pour ce lien.</p>
+            <div class="no-results">
+                <i class="fas fa-exclamation-circle"></i>
+                <p>Aucun épisode trouvé pour cette source.</p>
+            </div>
         {% endif %}
     </div>
-
-    <!-- Zone d'affichage du player vidéo -->
-    <div id="video-player-display"></div>
 </div>
 
 <style>
 .episode-list-container {
-    margin-top: 20px;
-    background: #1e1e2e;
-    border: 1px solid #333;
-    padding: 20px;
+    margin-top: 30px;
+    background: var(--bg-card);
+    border-radius: var(--card-radius);
+    padding: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
     animation: fadeIn 0.3s ease-out;
 }
-.episode-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #333;
-}
-.episode-header h3 { margin: 0; color: #00d9ff; }
-.episode-count { font-size: 0.8rem; color: #888; }
 
 .episodes-content.view-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 15px;
 }
+
 .view-grid .episode-item {
-    background: #252538;
-    padding: 15px;
-    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 20px 15px;
+    border-radius: 12px;
     text-align: center;
-    transition: all 0.2s;
+    transition: var(--transition);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
-.view-grid .episode-item:hover { background: #2d2d4a; transform: translateY(-2px); }
+
+.view-grid .episode-item:hover { 
+    background: rgba(255, 255, 255, 0.07); 
+    border-color: var(--primary);
+    transform: translateY(-3px); 
+}
+
 .view-grid .ep-title { display: none; }
-.view-grid .ep-number { font-weight: bold; font-size: 1.2rem; margin-bottom: 10px; }
+.view-grid .ep-number { font-weight: 800; font-size: 1.2rem; color: var(--primary); }
+.view-grid .ep-actions { display: flex; flex-direction: column; gap: 8px; }
+.view-grid .ep-actions .btn { width: 100%; }
 
 .episodes-content.view-list {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 10px;
 }
+
 .view-list .episode-item {
     display: flex;
     align-items: center;
-    gap: 15px;
-    background: #252538;
-    padding: 10px 15px;
-    border-radius: 6px;
+    gap: 20px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 12px 20px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: var(--transition);
 }
-.view-list .ep-number { font-weight: bold; width: 50px; }
-.view-list .ep-title { flex: 1; color: #ccc; }
 
-.btn-play-small {
-    background: #00d9ff;
-    color: #000;
-    border: none;
-    padding: 5px 12px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.8rem;
-    font-weight: bold;
+.view-list .episode-item:hover {
+    background: rgba(255, 255, 255, 0.07);
+    border-color: var(--primary);
 }
-.btn-download-small {
-    background: transparent;
-    color: #888;
-    border: 1px solid #444;
-    padding: 5px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-}
-.btn-download-small:hover { color: #fff; border-color: #fff; }
+
+.view-list .ep-number { font-weight: 800; width: 60px; color: var(--primary); }
+.view-list .ep-title { flex: 1; color: var(--text-main); font-weight: 500; }
+.view-list .ep-actions { display: flex; gap: 10px; }
 
 #video-player-display:not(:empty) {
-    margin-top: 30px;
-    padding-top: 20px;
-    border-top: 2px dashed #333;
+    margin: 20px 0 30px 0;
+    padding: 25px;
+    background: #000;
+    border-radius: 12px;
+    border: 1px solid var(--primary);
+    box-shadow: 0 0 30px rgba(0, 217, 255, 0.15);
 }
 
 @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

templates/components/header.html

@@ -1,70 +1,69 @@
-<h1>⚡ Ohm Stream Downloader</h1>
-<p class="subtitle">Téléchargez vos vidéos, animes et séries depuis vos hébergeurs préférés</p>
+<header>
+    <h1>⚡ Ohm Stream Downloader</h1>
+    <p class="subtitle">Téléchargez vos vidéos, animes et séries depuis vos hébergeurs préférés</p>
 
-<!-- User info and logout button -->
-<div id="userInfo" 
-     x-show="isAuthenticated" 
-     style="margin-bottom: 15px; padding: 10px; background: rgba(0, 217, 255, 0.1); border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
-    <div style="display: flex; align-items: center; gap: 10px;">
-        <span style="color: #00d9ff;">👤</span>
-        <span style="color: #fff; font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: #00d9ff;">-</strong></span>
+    <!-- User info and logout button -->
+    <div id="userInfo" x-show="isAuthenticated" class="auth-panel" x-cloak>
+        <div style="display: flex; align-items: center; gap: 10px;">
+            <span style="color: var(--primary); font-size: 1.2rem;">👤</span>
+            <span style="color: #fff; font-size: 14px;">Connecté en tant que <strong x-text="username" style="color: var(--primary);">-</strong></span>
+        </div>
+        <button class="btn btn-secondary btn-small" 
+                hx-post="/api/auth/logout"
+                hx-on::after-request="isAuthenticated = false; window.location.reload()">
+            🚪 Déconnexion
+        </button>
     </div>
-    <button class="btn-secondary btn-small" 
-            hx-post="/api/auth/logout"
-            hx-on::after-request="isAuthenticated = false; window.location.reload()"
-            style="padding: 5px 15px; font-size: 12px;">
-        🚪 Déconnexion
-    </button>
-</div>
 
-<!-- Login prompt (shown when not logged in) -->
-<div id="loginPrompt" 
-     x-show="!isAuthenticated" 
-     style="margin-bottom: 15px; padding: 15px; background: rgba(0, 217, 255, 0.1); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 8px; text-align: center;">
-    <p style="color: #00d9ff; margin: 0 0 10px 0;">👋 Bienvenue! <a href="/login" style="color: #00d9ff; text-decoration: underline;">Connectez-vous</a> pour télécharger des vidéos</p>
-</div>
+    <!-- Login prompt (shown when not logged in) -->
+    <div id="loginPrompt" x-show="!isAuthenticated" class="auth-panel" style="justify-content: center;" x-cloak>
+        <p style="color: var(--primary); margin: 0;">
+            👋 Bienvenue! <a href="/login" class="btn btn-secondary btn-small" style="margin-left: 10px;">Se connecter</a> pour accéder à toutes les fonctionnalités.
+        </p>
+    </div>
 
-<!-- Tabs - Robust navigation -->
-<div id="mainTabs" class="tabs" style="display: flex !important; visibility: visible !important;">
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'home' }" 
-            @click="activeTab = 'home'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'home' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-        </svg>
-        Accueil
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'anime' }" 
-            @click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
-        Anime
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'series' }" 
-            @click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
-        </svg>
-        Série
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'watchlist' }" 
-            @click="activeTab = 'watchlist'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'watchlist' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
-        </svg>
-        Watchlist
-    </button>
-    <button class="tab" 
-            :class="{ 'active': activeTab === 'downloads' }" 
-            @click="activeTab = 'downloads'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'downloads' } }))">
-        <svg style="width:16px;height:16px;vertical-align:middle;margin-right:5px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
-        </svg>
-        Téléchargements
-    </button>
-</div>
+    <!-- Tabs - Robust navigation -->
+    <nav id="mainTabs" class="tabs">
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'home' }" 
+                @click="activeTab = 'home'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'home' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+            </svg>
+            Accueil
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'anime' }" 
+                @click="activeTab = 'anime'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'anime' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            Anime
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'series' }" 
+                @click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
+            </svg>
+            Série
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'watchlist' }" 
+                @click="activeTab = 'watchlist'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'watchlist' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2m0 0a2 2 0 00-2 2h10a2 2 0 002-2V7a2 2 0 00-2-2"></path>
+            </svg>
+            Watchlist
+        </button>
+        <button class="tab" 
+                :class="{ 'active': activeTab === 'downloads' }" 
+                @click="activeTab = 'downloads'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'downloads' } }))">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+            </svg>
+            Téléchargements
+        </button>
+    </nav>
+</header>

templates/components/home_section.html

@@ -7,7 +7,7 @@
     <div class="section-container">
         <div class="section-header">
             <h2>🎯 Recommandé pour vous</h2>
-            <button class="btn-secondary btn-small" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/recommendations" 
                     hx-target="#recommendationsList">
                 <i class="fas fa-sync-alt"></i> Actualiser
@@ -25,7 +25,7 @@
     <div class="section-container">
         <div class="section-header">
             <h2>🔥 Dernières sorties</h2>
-            <button class="btn-secondary btn-small" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/releases/latest" 
                     hx-target="#releasesList">
                 <i class="fas fa-sync-alt"></i> Actualiser

templates/components/series_card.html

@@ -8,7 +8,7 @@
              onerror="this.src='https://placehold.co/400x600/161625/ff6b6b?text=Image+Error'; this.onerror=null;">
         <div class="anime-overlay">
             <div class="overlay-buttons">
-                <button class="btn-circle" 
+                <button class="btn btn-primary btn-circle" 
                         hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf" 
                         hx-target="#player-container"
                         hx-swap="innerHTML"
@@ -25,13 +25,13 @@
         </div>
         
         <div class="anime-card-buttons">
-            <button class="btn-card btn-watch" 
+            <button class="btn btn-primary btn-small" 
                     hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
                 <i class="fas fa-eye"></i> <span>Regarder</span>
             </button>
-            <button class="btn-card btn-download" 
+            <button class="btn btn-secondary btn-small" 
                     hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang=vf" 
                     hx-target="#player-container"
                     hx-swap="innerHTML">
@@ -40,7 +40,7 @@
         </div>
 
         {% if not in_watchlist %}
-        <button class="btn-add-watchlist"
+        <button class="btn btn-secondary btn-small btn-block"
                 hx-post="/api/watchlist"
                 hx-vals='{"anime_url": "{{ series.url }}", "anime_title": "{{ series.title }}", "provider_id": "fs7", "lang": "vf"}'
                 hx-swap="none"
@@ -48,7 +48,7 @@
             <i class="fas fa-plus"></i> Watchlist
         </button>
         {% else %}
-        <button class="btn-add-watchlist followed" disabled>
+        <button class="btn btn-secondary btn-small btn-block followed" disabled>
             <i class="fas fa-check"></i> Suivi
         </button>
         {% endif %}