168 lines
4.7 KiB
CSS
168 lines
4.7 KiB
CSS
/* ============================================================
|
|
LYCOSTORRENT - Système de Thèmes
|
|
============================================================ */
|
|
|
|
/* ============================================================
|
|
THÈME SOMBRE (par défaut)
|
|
============================================================ */
|
|
[data-theme="dark"] {
|
|
--bg-primary: #1a1a2e;
|
|
--bg-secondary: #16213e;
|
|
--bg-card: #1f2940;
|
|
--text-primary: #eaeaea;
|
|
--text-secondary: #a0a0a0;
|
|
--accent-primary: #e94560;
|
|
--accent-secondary: #0f3460;
|
|
--success: #4ade80;
|
|
--warning: #fbbf24;
|
|
--danger: #ef4444;
|
|
--border-color: #2d3748;
|
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* ============================================================
|
|
THÈME CLAIR
|
|
============================================================ */
|
|
[data-theme="light"] {
|
|
--bg-primary: #f5f5f5;
|
|
--bg-secondary: #ffffff;
|
|
--bg-card: #ffffff;
|
|
--text-primary: #1a1a2e;
|
|
--text-secondary: #666666;
|
|
--accent-primary: #e94560;
|
|
--accent-secondary: #e8e8e8;
|
|
--success: #22c55e;
|
|
--warning: #f59e0b;
|
|
--danger: #dc2626;
|
|
--border-color: #e0e0e0;
|
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* ============================================================
|
|
THÈME BLEU OCÉAN
|
|
============================================================ */
|
|
[data-theme="ocean"] {
|
|
--bg-primary: #0a192f;
|
|
--bg-secondary: #112240;
|
|
--bg-card: #1d3557;
|
|
--text-primary: #e6f1ff;
|
|
--text-secondary: #8892b0;
|
|
--accent-primary: #64ffda;
|
|
--accent-secondary: #233554;
|
|
--success: #64ffda;
|
|
--warning: #ffd700;
|
|
--danger: #ff6b6b;
|
|
--border-color: #233554;
|
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ============================================================
|
|
THÈME VIOLET NUIT
|
|
============================================================ */
|
|
[data-theme="purple"] {
|
|
--bg-primary: #13111c;
|
|
--bg-secondary: #1e1a2e;
|
|
--bg-card: #2a2440;
|
|
--text-primary: #e8e6f0;
|
|
--text-secondary: #9d99b0;
|
|
--accent-primary: #a855f7;
|
|
--accent-secondary: #3b3256;
|
|
--success: #4ade80;
|
|
--warning: #fbbf24;
|
|
--danger: #f472b6;
|
|
--border-color: #3b3256;
|
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ============================================================
|
|
THÈME VERT NATURE
|
|
============================================================ */
|
|
[data-theme="nature"] {
|
|
--bg-primary: #1a2f1a;
|
|
--bg-secondary: #0f2010;
|
|
--bg-card: #243524;
|
|
--text-primary: #e8f5e9;
|
|
--text-secondary: #a5d6a7;
|
|
--accent-primary: #4caf50;
|
|
--accent-secondary: #2e4a2e;
|
|
--success: #81c784;
|
|
--warning: #ffb74d;
|
|
--danger: #e57373;
|
|
--border-color: #2e4a2e;
|
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ============================================================
|
|
THÈME ORANGE SUNSET
|
|
============================================================ */
|
|
[data-theme="sunset"] {
|
|
--bg-primary: #1f1510;
|
|
--bg-secondary: #2d1f15;
|
|
--bg-card: #3d2a1a;
|
|
--text-primary: #fff3e0;
|
|
--text-secondary: #bcaaa4;
|
|
--accent-primary: #ff7043;
|
|
--accent-secondary: #4a3228;
|
|
--success: #81c784;
|
|
--warning: #ffb74d;
|
|
--danger: #ef5350;
|
|
--border-color: #4a3228;
|
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ============================================================
|
|
THÈME CYBERPUNK
|
|
============================================================ */
|
|
[data-theme="cyberpunk"] {
|
|
--bg-primary: #0d0d0d;
|
|
--bg-secondary: #1a1a1a;
|
|
--bg-card: #262626;
|
|
--text-primary: #00ff9f;
|
|
--text-secondary: #00cc7f;
|
|
--accent-primary: #ff00ff;
|
|
--accent-secondary: #330033;
|
|
--success: #00ff9f;
|
|
--warning: #ffff00;
|
|
--danger: #ff0066;
|
|
--border-color: #333333;
|
|
--shadow: 0 0 20px rgba(255, 0, 255, 0.3);
|
|
}
|
|
|
|
/* ============================================================
|
|
THÈME NORD
|
|
============================================================ */
|
|
[data-theme="nord"] {
|
|
--bg-primary: #2e3440;
|
|
--bg-secondary: #3b4252;
|
|
--bg-card: #434c5e;
|
|
--text-primary: #eceff4;
|
|
--text-secondary: #d8dee9;
|
|
--accent-primary: #88c0d0;
|
|
--accent-secondary: #4c566a;
|
|
--success: #a3be8c;
|
|
--warning: #ebcb8b;
|
|
--danger: #bf616a;
|
|
--border-color: #4c566a;
|
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* ============================================================
|
|
TRANSITIONS FLUIDES
|
|
============================================================ */
|
|
body,
|
|
.container,
|
|
.header,
|
|
.search-box,
|
|
.results-table,
|
|
.filter-bar,
|
|
.admin-card,
|
|
.modal-content,
|
|
.nav-link,
|
|
button,
|
|
input,
|
|
select {
|
|
transition: background-color 0.3s ease,
|
|
color 0.3s ease,
|
|
border-color 0.3s ease,
|
|
box-shadow 0.3s ease;
|
|
} |