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.
This commit is contained in:
+9
-9
@@ -36,10 +36,10 @@ function renderSeriesRecommendationCard(series) {
|
||||
</div>
|
||||
|
||||
<div class="anime-card-actions">
|
||||
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
|
||||
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
|
||||
🔗 Voir sur FS7
|
||||
</button>
|
||||
<button class="btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
|
||||
<button class="btn btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
|
||||
📥 Voir les épisodes
|
||||
</button>
|
||||
</div>
|
||||
@@ -98,10 +98,10 @@ function renderSeriesReleaseCard(series) {
|
||||
</div>
|
||||
|
||||
<div class="anime-card-actions">
|
||||
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
|
||||
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
|
||||
🔗 Voir sur FS7
|
||||
</button>
|
||||
<button class="btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
|
||||
<button class="btn btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
|
||||
📥 Voir les épisodes
|
||||
</button>
|
||||
</div>
|
||||
@@ -238,7 +238,7 @@ async function loadSeriesReleases() {
|
||||
<div class="no-results">
|
||||
<p>❌ Erreur lors du chargement des séries</p>
|
||||
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
|
||||
<button class="btn-secondary btn-small" onclick="loadSeriesReleases()" style="margin-top: 10px;">
|
||||
<button class="btn btn-secondary btn-small" onclick="loadSeriesReleases()" style="margin-top: 10px;">
|
||||
🔄 Réessayer
|
||||
</button>
|
||||
</div>`;
|
||||
@@ -280,11 +280,11 @@ async function loadProvidersGrid() {
|
||||
` : ''}
|
||||
<div class="anime-card-actions">
|
||||
${domains.length > 0 ? `
|
||||
<button class="btn-primary btn-small" onclick="window.open('https://${domains[0]}', '_blank')">
|
||||
<button class="btn btn-primary btn-small" onclick="window.open('https://${domains[0]}', '_blank')">
|
||||
🔗 Visiter le site
|
||||
</button>
|
||||
` : ''}
|
||||
<button class="btn-secondary btn-small" onclick="showProviderSearch('${id}')">
|
||||
<button class="btn btn-secondary btn-small" onclick="showProviderSearch('${id}')">
|
||||
🔍 Rechercher
|
||||
</button>
|
||||
</div>
|
||||
@@ -310,7 +310,7 @@ async function loadProvidersGrid() {
|
||||
<div class="anime-card-title">${host.icon} ${host.name}</div>
|
||||
</div>
|
||||
<div class="anime-card-actions">
|
||||
<button class="btn-secondary btn-small" onclick="showDownloadInfo()">
|
||||
<button class="btn btn-secondary btn-small" onclick="showDownloadInfo()">
|
||||
📥 Télécharger un fichier
|
||||
</button>
|
||||
</div>
|
||||
@@ -332,7 +332,7 @@ async function loadProvidersGrid() {
|
||||
<div class="no-results">
|
||||
<p>❌ Erreur lors du chargement des fournisseurs</p>
|
||||
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
|
||||
<button class="btn-secondary btn-small" onclick="loadProvidersGrid()" style="margin-top: 10px;">
|
||||
<button class="btn btn-secondary btn-small" onclick="loadProvidersGrid()" style="margin-top: 10px;">
|
||||
🔄 Réessayer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user