UI: Standardize buttons and design system across the application
CI / Test (Python 3.11) (push) Has been cancelled
CI / Test (Python 3.12) (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Type Check (push) Has been cancelled
CI / Summary (push) Has been cancelled

- 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.
This commit is contained in:
root
2026-03-26 10:46:18 +00:00
parent 9f85908ff3
commit b6f12b2162
13 changed files with 635 additions and 460 deletions
+5 -5
View File
@@ -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 %}