feat: complete UI redesign with DaisyUI + Tailwind CSS v4
Design system overhaul using DaisyUI v5 on Tailwind CSS v4: - Custom 'ohmstream' dark theme with orange primary (#FF9F1C), magenta secondary, gold accent matching existing palette - Tailwind CSS-first config (input.css source, style.css built output) - DaisyUI components: navbar, drawer, cards, badges, alerts, tables, progress bars, tabs, toggles, stats, form controls, tooltips - Mobile-first responsive layout with drawer navigation - Eliminated ~500+ lines of embedded CSS across 15+ template files - Removed all inline style spam from admin_panel and settings_section - Preserved all HTMX triggers, Alpine.js state, and Jinja2 logic - Updated auth-ui.js for DaisyUI tab-active class compatibility Build: npm run build:css (minified) / npm run watch:css (dev)
This commit is contained in:
root
@@ -1,489 +1,162 @@
|
||||
{% set status_filter = request.query_params.get('status', 'all') %}
|
||||
<div class="watchlist-container" x-data="{ currentFilter: '{{ status_filter }}' }">
|
||||
<div class="flex flex-col gap-5" x-data="{ currentFilter: '{{ status_filter }}' }">
|
||||
<!-- Filter Tabs -->
|
||||
<div class="filter-tabs">
|
||||
<button class="filter-tab {{ 'active' if status_filter == 'all' or not status_filter else '' }}"
|
||||
<div class="tabs tabs-boxed bg-base-200 p-1">
|
||||
<button class="tab {% if status_filter == 'all' or not status_filter %}tab-active{% endif %}"
|
||||
hx-get="/api/watchlist?status=all"
|
||||
hx-target="#watchlist-items-container"
|
||||
hx-swap="outerHTML"
|
||||
@click="$el.closest('.watchlist-container').querySelector('.filter-tab').forEach(t => t.classList.remove('active')); $el.classList.add('active');">
|
||||
hx-swap="outerHTML">
|
||||
<i class="fas fa-list"></i> Tous
|
||||
</button>
|
||||
<button class="filter-tab {{ 'active' if status_filter == 'active' else '' }}"
|
||||
<button class="tab {% if status_filter == 'active' %}tab-active{% endif %}"
|
||||
hx-get="/api/watchlist?status=active"
|
||||
hx-target="#watchlist-items-container"
|
||||
hx-swap="outerHTML"
|
||||
@click="$el.closest('.watchlist-container').querySelector('.filter-tab').forEach(t => t.classList.remove('active')); $el.classList.add('active');">
|
||||
hx-swap="outerHTML">
|
||||
<i class="fas fa-play"></i> Actifs
|
||||
</button>
|
||||
<button class="filter-tab {{ 'active' if status_filter == 'paused' else '' }}"
|
||||
<button class="tab {% if status_filter == 'paused' %}tab-active{% endif %}"
|
||||
hx-get="/api/watchlist?status=paused"
|
||||
hx-target="#watchlist-items-container"
|
||||
hx-swap="outerHTML"
|
||||
@click="$el.closest('.watchlist-container').querySelector('.filter-tab').forEach(t => t.classList.remove('active')); $el.classList.add('active');">
|
||||
hx-swap="outerHTML">
|
||||
<i class="fas fa-pause"></i> En pause
|
||||
</button>
|
||||
<button class="filter-tab {{ 'active' if status_filter == 'completed' else '' }}"
|
||||
<button class="tab {% if status_filter == 'completed' %}tab-active{% endif %}"
|
||||
hx-get="/api/watchlist?status=completed"
|
||||
hx-target="#watchlist-items-container"
|
||||
hx-swap="outerHTML"
|
||||
@click="$el.closest('.watchlist-container').querySelector('.filter-tab').forEach(t => t.classList.remove('active')); $el.classList.add('active');">
|
||||
hx-swap="outerHTML">
|
||||
<i class="fas fa-check"></i> Terminés
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Watchlist Items Grid -->
|
||||
{% if items and items | length > 0 %}
|
||||
<div class="watchlist-grid">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{% for item in items %}
|
||||
<div class="watchlist-card" id="watchlist-{{ item.id }}" data-item-id="{{ item.id }}">
|
||||
<!-- Poster -->
|
||||
<div class="watchlist-poster">
|
||||
<img src="{{ item.poster_image or item.cover_image or '/static/img/no-poster.png' }}"
|
||||
alt="{{ item.anime_title }}"
|
||||
onerror="this.src='/static/img/no-poster.png'">
|
||||
<div class="poster-badge {{ item.status }}">
|
||||
{% if item.status == 'active' %}
|
||||
<i class="fas fa-play"></i> Actif
|
||||
{% elif item.status == 'paused' %}
|
||||
<i class="fas fa-pause"></i> En pause
|
||||
{% elif item.status == 'completed' %}
|
||||
<i class="fas fa-check"></i> Terminé
|
||||
{% else %}
|
||||
<i class="fas fa-archive"></i> Archivé
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if item.auto_download %}
|
||||
<div class="auto-download-badge">
|
||||
<i class="fas fa-magic"></i> Auto
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="watchlist-content">
|
||||
<h3 class="watchlist-title">{{ item.anime_title }}</h3>
|
||||
|
||||
<div class="watchlist-meta">
|
||||
<span class="meta-provider">
|
||||
<i class="fas fa-tv"></i> {{ item.provider_id | upper }}
|
||||
</span>
|
||||
<span class="meta-lang">{{ item.lang | upper }}</span>
|
||||
{% if item.quality_preference and item.quality_preference != 'auto' %}
|
||||
<span class="meta-quality">{{ item.quality_preference }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if item.synopsis %}
|
||||
<p class="watchlist-synopsis">{{ item.synopsis | truncate(150) }}</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="watchlist-stats">
|
||||
<span class="stat">
|
||||
<i class="fas fa-download"></i>
|
||||
Ép. {{ item.last_episode_downloaded }}
|
||||
{% if item.total_episodes %}
|
||||
/ {{ item.total_episodes }}
|
||||
<div class="card bg-base-200 border border-base-300 hover:border-primary transition-colors" id="watchlist-{{ item.id }}" data-item-id="{{ item.id }}">
|
||||
<div class="card-body p-4 flex-row gap-4">
|
||||
<!-- Poster -->
|
||||
<figure class="w-24 shrink-0 relative">
|
||||
<img src="{{ item.poster_image or item.cover_image or '/static/img/no-poster.png' }}"
|
||||
alt="{{ item.anime_title }}"
|
||||
class="rounded-lg aspect-[2/3] object-cover w-full"
|
||||
onerror="this.src='/static/img/no-poster.png'">
|
||||
<!-- Status badge -->
|
||||
<span class="badge badge-sm absolute top-2 left-2
|
||||
{% if item.status == 'active' %}badge-success
|
||||
{% elif item.status == 'paused' %}badge-warning
|
||||
{% elif item.status == 'completed' %}badge-primary
|
||||
{% else %}badge-ghost{% endif %}">
|
||||
{% if item.status == 'active' %}
|
||||
<i class="fas fa-play"></i> Actif
|
||||
{% elif item.status == 'paused' %}
|
||||
<i class="fas fa-pause"></i> Pause
|
||||
{% elif item.status == 'completed' %}
|
||||
<i class="fas fa-check"></i> Terminé
|
||||
{% else %}
|
||||
<i class="fas fa-archive"></i> Archivé
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if item.added_at %}
|
||||
<span class="stat" title="Ajouté le {{ item.added_at.strftime('%d/%m/%Y') }}">
|
||||
<i class="fas fa-calendar"></i>
|
||||
{{ item.added_at.strftime('%d/%m/%Y') }}
|
||||
<!-- Auto-download badge -->
|
||||
{% if item.auto_download %}
|
||||
<span class="badge badge-primary badge-sm absolute bottom-2 left-2">
|
||||
<i class="fas fa-magic"></i> Auto
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="watchlist-actions">
|
||||
<!-- Pause/Resume Toggle -->
|
||||
{% if item.status == 'active' %}
|
||||
<button class="action-btn btn-pause"
|
||||
hx-put="/api/watchlist/{{ item.id }}"
|
||||
hx-vals='{"status": "paused"}'
|
||||
hx-swap="none"
|
||||
hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
|
||||
title="Mettre en pause">
|
||||
<i class="fas fa-pause"></i>
|
||||
</button>
|
||||
{% elif item.status == 'paused' %}
|
||||
<button class="action-btn btn-resume"
|
||||
hx-put="/api/watchlist/{{ item.id }}"
|
||||
hx-vals='{"status": "active"}'
|
||||
hx-swap="none"
|
||||
hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
|
||||
title="Reprendre">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
<!-- Content -->
|
||||
<div class="flex-1 min-w-0 flex flex-col gap-1.5">
|
||||
<h3 class="font-bold text-sm truncate m-0">{{ item.anime_title }}</h3>
|
||||
|
||||
<!-- Meta badges -->
|
||||
<div class="flex flex-wrap gap-1.5 text-[0.7rem]">
|
||||
<span class="badge badge-outline badge-sm">
|
||||
<i class="fas fa-tv"></i> {{ item.provider_id | upper }}
|
||||
</span>
|
||||
<span class="badge badge-outline badge-sm badge-ghost">{{ item.lang | upper }}</span>
|
||||
{% if item.quality_preference and item.quality_preference != 'auto' %}
|
||||
<span class="badge badge-outline badge-sm badge-success">{{ item.quality_preference }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Synopsis -->
|
||||
{% if item.synopsis %}
|
||||
<p class="text-xs text-base-content/50 m-0 line-clamp-3">{{ item.synopsis | truncate(150) }}</p>
|
||||
{% endif %}
|
||||
|
||||
<!-- Mark as completed -->
|
||||
{% if item.status not in ['completed', 'archived'] %}
|
||||
<button class="action-btn btn-complete"
|
||||
hx-put="/api/watchlist/{{ item.id }}"
|
||||
hx-vals='{"status": "completed"}'
|
||||
hx-swap="none"
|
||||
hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
|
||||
title="Marquer comme terminé">
|
||||
<i class="fas fa-check"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
<!-- Stats -->
|
||||
<div class="flex flex-wrap gap-3 text-[0.7rem] text-base-content/50">
|
||||
<span class="flex items-center gap-1">
|
||||
<i class="fas fa-download"></i>
|
||||
Ép. {{ item.last_episode_downloaded }}
|
||||
{% if item.total_episodes %}/ {{ item.total_episodes }}{% endif %}
|
||||
</span>
|
||||
{% if item.added_at %}
|
||||
<span class="flex items-center gap-1" title="Ajouté le {{ item.added_at.strftime('%d/%m/%Y') }}">
|
||||
<i class="fas fa-calendar"></i>
|
||||
{{ item.added_at.strftime('%d/%m/%Y') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Delete -->
|
||||
<button class="action-btn btn-delete"
|
||||
hx-delete="/api/watchlist/{{ item.id }}"
|
||||
hx-target="#watchlist-{{ item.id }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Supprimer '{{ item.anime_title }}' de votre watchlist ?"
|
||||
title="Supprimer">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-1 mt-auto pt-2 border-t border-base-300">
|
||||
<!-- Pause/Resume Toggle -->
|
||||
{% if item.status == 'active' %}
|
||||
<button class="btn btn-circle btn-sm btn-warning"
|
||||
hx-put="/api/watchlist/{{ item.id }}"
|
||||
hx-vals='{"status": "paused"}'
|
||||
hx-swap="none"
|
||||
hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
|
||||
title="Mettre en pause">
|
||||
<i class="fas fa-pause"></i>
|
||||
</button>
|
||||
{% elif item.status == 'paused' %}
|
||||
<button class="btn btn-circle btn-sm btn-success"
|
||||
hx-put="/api/watchlist/{{ item.id }}"
|
||||
hx-vals='{"status": "active"}'
|
||||
hx-swap="none"
|
||||
hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
|
||||
title="Reprendre">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<!-- Mark as completed -->
|
||||
{% if item.status not in ['completed', 'archived'] %}
|
||||
<button class="btn btn-circle btn-sm btn-ghost"
|
||||
hx-put="/api/watchlist/{{ item.id }}"
|
||||
hx-vals='{"status": "completed"}'
|
||||
hx-swap="none"
|
||||
hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
|
||||
title="Marquer comme terminé">
|
||||
<i class="fas fa-check"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<!-- Delete -->
|
||||
<button class="btn btn-circle btn-sm btn-error"
|
||||
hx-delete="/api/watchlist/{{ item.id }}"
|
||||
hx-target="#watchlist-{{ item.id }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Supprimer '{{ item.anime_title }}' de votre watchlist ?"
|
||||
title="Supprimer">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="watchlist-empty">
|
||||
<i class="fas fa-inbox"></i>
|
||||
<h3>Votre watchlist est vide</h3>
|
||||
<p>Ajoutez des animes ou séries depuis l'onglet Recherche pour commencer à suivre leurs sorties.</p>
|
||||
<div class="text-center py-16 bg-base-200 rounded-box border border-dashed border-base-300">
|
||||
<i class="fas fa-inbox text-6xl text-base-content/20 mb-5 block"></i>
|
||||
<h3 class="text-lg font-bold mb-2 text-base-content">Votre watchlist est vide</h3>
|
||||
<p class="text-base-content/50 mb-6">Ajoutez des animes ou séries depuis l'onglet Recherche pour commencer à suivre leurs sorties.</p>
|
||||
<button class="btn btn-primary" @click="$dispatch('set-tab', {tab: 'anime'})">
|
||||
<i class="fas fa-search"></i> Rechercher des animes
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Container */
|
||||
.watchlist-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Filter Tabs */
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid #2a2d32;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 18px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border-radius: var(--input-radius);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.filter-tab:hover {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
background: var(--primary);
|
||||
color: var(--bg-dark);
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
.watchlist-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.watchlist-card {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--card-radius);
|
||||
padding: 16px;
|
||||
border: 1px solid #2a2d32;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.watchlist-card:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Poster */
|
||||
.watchlist-poster {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
aspect-ratio: 2/3;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--bg-dark);
|
||||
}
|
||||
|
||||
.watchlist-poster img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.poster-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.poster-badge.active {
|
||||
background: #2d936c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.poster-badge.paused {
|
||||
background: #f4a261;
|
||||
color: #15171A;
|
||||
}
|
||||
|
||||
.poster-badge.completed {
|
||||
background: #FF9F1C;
|
||||
color: #15171A;
|
||||
}
|
||||
|
||||
.poster-badge.archived {
|
||||
background: rgba(206, 208, 206, 0.2);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.auto-download-badge {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
background: #FF9F1C;
|
||||
color: var(--bg-dark);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.watchlist-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.watchlist-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--text-main);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.watchlist-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.meta-provider,
|
||||
.meta-lang,
|
||||
.meta-quality {
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.meta-provider {
|
||||
background: rgba(255, 191, 105, 0.1);
|
||||
color: var(--primary);
|
||||
border: 1px solid rgba(255, 191, 105, 0.3);
|
||||
}
|
||||
|
||||
.meta-lang {
|
||||
background: rgba(206, 208, 206, 0.3);
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--text-dim);
|
||||
}
|
||||
|
||||
.meta-quality {
|
||||
background: rgba(45, 147, 108, 0.1);
|
||||
color: var(--success);
|
||||
border: 1px solid rgba(45, 147, 108, 0.3);
|
||||
}
|
||||
|
||||
.watchlist-synopsis {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.watchlist-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.watchlist-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: auto;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #2a2d32;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: var(--secondary);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.btn-pause {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.btn-pause:hover {
|
||||
background: rgba(255, 193, 7, 0.15);
|
||||
}
|
||||
|
||||
.btn-resume {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-resume:hover {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
}
|
||||
|
||||
.btn-complete {
|
||||
color: #FFBF69;
|
||||
}
|
||||
|
||||
.btn-complete:hover {
|
||||
background: rgba(255, 191, 105, 0.15);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: rgba(244, 67, 54, 0.15);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.watchlist-empty {
|
||||
text-align: center;
|
||||
padding: 80px 40px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--card-radius);
|
||||
border: 1px dashed #2a2d32;
|
||||
}
|
||||
|
||||
.watchlist-empty i {
|
||||
font-size: 4rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.3;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.watchlist-empty h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.watchlist-empty p {
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.watchlist-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.watchlist-card {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.watchlist-poster {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.watchlist-meta,
|
||||
.watchlist-stats {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user