/** * StoryCraft - Themes * Mode nuit, fonctionnalités avancées et styles spécialisés * @version 2.0 */ /* === MODE NUIT === */ /* Night mode baseline adjusted for WCAG contrast * Key changes: * - Darker interactive brand colors (primary/secondary/accent) to ensure >=4.5:1 with white text. * - Introduced --focus-color separated from --primary-color for clearer outline. * Approximate contrast ratios vs #0d1117 background (computed): * #1f6feb ≈ 5.0:1, #238636 ≈ 4.6:1, #db6d28 ≈ 4.7:1, #8957e5 ≈ 5.1:1 */ .night-mode { /* Core dark surfaces */ --background-primary: #0d1117; /* base canvas */ --background-secondary: #161b22; /* section background */ --background-card: #1e242b; /* slightly darker than before for stronger elevation separation */ /* Text - WCAG AA compliant */ --text-primary: #f0f6fc; /* contrast > 12:1 on dark */ --text-secondary: #c9d1d9; /* brightened for 7:1 contrast on dark */ --text-muted: #8b949e; /* for less important text, 4.5:1 */ --text-on-color: #ffffff; --text-on-color-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Borders / outlines */ --border-color: #30363d; --focus-color: #f0b429; /* warm focus ring distinct from brand blue */ /* Brand / status colors (darkened for white text contrast) */ --primary-color: #1f6feb; /* replaces #58a6ff (old contrast with white failed) */ --secondary-color: #238636; /* replaces #39d353 for white contrast */ --accent-color: #db6d28; /* replaces #f78166 (too bright vs white) */ --success-color: #2ea043; /* darker success for white text */ --warning-color: #b58407; /* darker, better contrast for icons on dark */ --error-color: #da3633; /* accessible red */ /* Fun palette tuned darker for accessibility */ --fun-purple: #8957e5; --fun-orange: #bd561d; --fun-yellow: #9e6a03; /* only use on badges with dark text */ --fun-green: #1f883d; /* Shadows */ --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.35); --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.45); --shadow-heavy: 0 15px 45px rgba(0, 0, 0, 0.55); --shadow-fun: 0 10px 40px rgba(31, 111, 235, 0.35); background: linear-gradient(135deg, #0d1117 0%, #161b22 55%, #1e242b 100%); color: var(--text-primary); } /* Button contrast adjustments for dark mode - couleurs solides */ .night-mode .btn-primary { background: var(--primary-color); color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); font-weight: 600; } .night-mode .btn-primary:hover { background: color-mix(in srgb, var(--primary-color) 80%, white); } .night-mode .btn-secondary { background: var(--secondary-color); color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); font-weight: 600; } .night-mode .btn-secondary:hover { background: color-mix(in srgb, var(--secondary-color) 80%, white); } /* Focus ring for dark mode */ .night-mode *:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; } /* High contrast opt-in layer: combine with .night-mode.high-contrast on */ .night-mode.high-contrast { --background-primary: #000000; --background-secondary: #0f1419; --background-card: #141b23; --text-primary: #ffffff; --text-secondary: #e0e6ec; --border-color: #ffffff; --primary-color: #1f6feb; --secondary-color: #1f883d; --accent-color: #c36212; --focus-color: #f0b429; } .night-mode.high-contrast .card, .night-mode.high-contrast .modal, .night-mode.high-contrast .template-card, .night-mode.high-contrast .book-card { border-width: 3px; box-shadow: 0 0 0 2px #ffffff inset, var(--shadow-medium); } .night-mode.high-contrast .btn-primary, .night-mode.high-contrast .btn-secondary { border: 3px solid #ffffff; } .night-mode.high-contrast *:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; } /* Header en mode nuit */ .night-mode .header { background: linear-gradient(135deg, #21262d 0%, #161b22 100%); border-bottom: 2px solid var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .night-mode .header::before { background: linear-gradient(135deg, #58a6ff 0%, #bc8cff 25%, #39d353 50%, #ffa657 75%, #f78166 100%); opacity: 0.1; } /* Conteneurs en mode nuit */ .night-mode .generation-form, .night-mode .reader-body, .night-mode .modal, .night-mode .card { background: linear-gradient(135deg, var(--background-card) 0%, #30363d 10%, var(--background-card) 100%); border-color: var(--border-color); border-width: 2px; box-shadow: var(--shadow-medium); } /* Cartes en mode nuit */ .night-mode .book-card { background: var(--background-card); border-color: var(--border-color); border-width: 2px; } .night-mode .book-card:hover { background: #30363d; border-color: var(--primary-color); box-shadow: 0 8px 30px rgba(88, 166, 255, 0.2); } .night-mode .template-card { background: linear-gradient(135deg, var(--background-card) 0%, #30363d 100%); border-color: var(--border-color); } .night-mode .template-card:hover { border-color: var(--primary-color); background: linear-gradient(135deg, #30363d 0%, var(--background-card) 100%); } /* Texte amélioré pour mode nuit */ .night-mode .page-text, .night-mode .page-content, .night-mode .book-description { color: var(--text-primary) !important; font-weight: 500; line-height: 1.8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .night-mode .hero-title { background: linear-gradient(135deg, #58a6ff 0%, #bc8cff 25%, #39d353 50%, #ffa657 75%, #f78166 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Formulaires en mode nuit */ .night-mode .form-input, .night-mode .form-textarea, .night-mode .form-select, .night-mode .setting-input, .night-mode .setting-textarea, .night-mode .setting-select { background: var(--background-card); border-color: var(--border-color); color: var(--text-primary); } .night-mode .form-input::placeholder, .night-mode .form-textarea::placeholder, .night-mode .setting-input::placeholder, .night-mode .setting-textarea::placeholder { color: var(--text-secondary); opacity: 0.8; } .night-mode .form-input:hover, .night-mode .form-textarea:hover, .night-mode .form-select:hover, .night-mode .setting-input:hover, .night-mode .setting-textarea:hover, .night-mode .setting-select:hover { border-color: var(--primary-color); background: var(--background-secondary); } .night-mode .form-input:focus, .night-mode .form-textarea:focus, .night-mode .form-select:focus, .night-mode .setting-input:focus, .night-mode .setting-textarea:focus, .night-mode .setting-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.25); background: var(--background-secondary); } /* Boutons en mode nuit */ .night-mode .btn-primary { background: linear-gradient(135deg, var(--primary-color) 0%, var(--fun-purple) 100%); box-shadow: 0 4px 15px rgba(31, 111, 235, 0.3); } .night-mode .btn-secondary { background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%); } /* Scrollbars en mode nuit */ .night-mode ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--primary-color) 0%, var(--fun-purple) 100%); } .night-mode ::-webkit-scrollbar-track { background: var(--background-secondary); } /* === SYSTÈME D'ACHIEVEMENTS === */ .achievements-container { position: fixed; top: 100px; right: 20px; z-index: var(--z-popover); max-width: 300px; } .achievement-notification { background: linear-gradient(135deg, var(--success-color) 0%, #2ecc71 100%); color: white; padding: var(--spacing-lg); border-radius: var(--border-radius); box-shadow: var(--shadow-heavy); margin-bottom: var(--spacing-md); transform: translateX(100%); animation: slideInRight 0.6s ease forwards, slideOutRight 0.6s ease 3s forwards; display: flex; align-items: center; gap: var(--spacing-md); } @keyframes slideInRight { to { transform: translateX(0); } } @keyframes slideOutRight { to { transform: translateX(100%); } } .achievement-icon { font-size: var(--font-size-2xl); animation: bounce 1s ease-in-out infinite; } .achievement-content h4 { margin: 0 0 var(--spacing-xs) 0; font-size: var(--font-size-base); font-weight: 700; } .achievement-content p { margin: 0; font-size: var(--font-size-sm); opacity: 0.9; } /* === BOUTONS DE FAVORIS === */ .favorite-btn { position: absolute; top: var(--spacing-md); right: var(--spacing-md); width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); transition: all var(--animation-duration) ease; box-shadow: var(--shadow-light); z-index: 10; } .favorite-btn:hover { background: var(--primary-color); color: white; transform: scale(1.1); box-shadow: var(--shadow-fun); } .favorite-btn.active { background: var(--error-color); color: white; animation: heartbeat 1s ease-in-out; } @keyframes heartbeat { 0%, 50%, 100% { transform: scale(1); } 25%, 75% { transform: scale(1.2); } } /* === CONFETTIS === */ .confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-popover); overflow: hidden; } .confetti { position: absolute; width: 10px; height: 10px; background: var(--primary-color); animation: confetti-fall 3s linear infinite; } .confetti:nth-child(2n) { background: var(--accent-color); animation-delay: 0.5s; animation-duration: 2.5s; } .confetti:nth-child(3n) { background: var(--success-color); animation-delay: 1s; animation-duration: 3.5s; } .confetti:nth-child(4n) { background: var(--warning-color); animation-delay: 1.5s; animation-duration: 2s; } /* === COLLECTIONS === */ .collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-2xl); } .collection-card { background: var(--background-card); border-radius: var(--border-radius); padding: var(--spacing-lg); box-shadow: var(--shadow-light); transition: all var(--animation-duration) ease; border: 2px solid var(--border-color); position: relative; overflow: hidden; } .collection-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); } .collection-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: var(--primary-color); } .collection-header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .collection-icon { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); color: white; } .collection-info h3 { margin: 0 0 var(--spacing-xs) 0; font-size: var(--font-size-lg); color: var(--text-primary); } .collection-count { font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0; } .collection-description { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; margin-bottom: var(--spacing-md); } .collection-preview { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); } .collection-preview-item { width: 40px; height: 40px; border-radius: var(--border-radius-small); background: var(--background-secondary); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); color: var(--text-secondary); border: 1px solid var(--border-color); } /* === INDICATEURS DE PROGRESSION === */ .reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.1); z-index: var(--z-fixed); } .reading-progress-bar { height: 100%; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); width: 0%; transition: width 0.3s ease; position: relative; } .reading-progress-bar::after { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3)); animation: shine 2s ease-in-out infinite; } /* === MODAL DE PARAMÈTRES === */ .settings-modal { width: 90vw; max-width: 800px; max-height: 85vh; background: var(--background-card); border-radius: var(--border-radius-large); box-shadow: var(--shadow-heavy); overflow: hidden; display: flex; flex-direction: column; } .settings-header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--fun-orange) 100%); color: white; padding: var(--spacing-lg) var(--spacing-xl); display: flex; align-items: center; justify-content: space-between; } .settings-tabs { display: flex; background: var(--background-secondary); border-bottom: 1px solid var(--border-color); } .tab-btn { flex: 1; padding: var(--spacing-md) var(--spacing-lg); background: transparent; border: none; cursor: pointer; font-weight: 600; transition: all var(--animation-duration) ease; position: relative; color: var(--text-secondary); } .tab-btn.active { color: var(--primary-color); background: var(--background-card); } .tab-btn.active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--fun-orange) 100%); } .tab-content { display: none; padding: var(--spacing-xl); overflow-y: auto; flex: 1; } .tab-content.active { display: block; } .settings-content { padding: var(--spacing-xl); overflow-y: auto; flex: 1; } .setting-group { margin-bottom: var(--spacing-xl); } .setting-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); } /* Sliders personnalisés */ .slider-container { display: flex; align-items: center; gap: var(--spacing-md); } .setting-slider { flex: 1; height: 6px; border-radius: 3px; background: var(--background-secondary); outline: none; cursor: pointer; appearance: none; } .setting-slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color) 0%, var(--fun-orange) 100%); cursor: pointer; box-shadow: var(--shadow-light); transition: all var(--animation-duration) ease; } .setting-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: var(--shadow-fun); } .slider-value { min-width: 40px; text-align: center; font-weight: 600; color: var(--primary-color); background: var(--background-secondary); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-small); } /* Custom Model Selector Styles (Intégration des styles déjà créés) */ .custom-model-selector { position: relative; width: 100%; margin-bottom: var(--spacing-md); } .model-selector-header { background: linear-gradient(135deg, var(--background-card) 0%, var(--background-secondary) 100%); border: 2px solid var(--border-color); border-radius: var(--border-radius); padding: var(--spacing-md); cursor: pointer; transition: all var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-light); position: relative; overflow: hidden; } .model-selector-header.active { border-color: var(--primary-color); background: linear-gradient(135deg, var(--primary-color) 0%, var(--fun-orange) 100%); color: white; box-shadow: var(--shadow-fun); } .model-selector-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--background-card); border: 2px solid var(--border-color); border-top: none; border-radius: 0 0 var(--border-radius) var(--border-radius); box-shadow: var(--shadow-heavy); z-index: var(--z-dropdown); max-height: 0; overflow: hidden; transition: all var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: translateY(-10px); } .model-selector-dropdown.show { max-height: 500px; opacity: 1; transform: translateY(0); } /* Mode nuit pour les paramètres */ .night-mode .settings-modal { background: var(--background-card); border: 2px solid var(--border-color); } .night-mode .settings-tabs { background: var(--background-secondary); border-color: var(--border-color); } .night-mode .tab-btn { color: var(--text-secondary); } .night-mode .tab-btn.active { background: var(--background-card); color: var(--primary-color); } /* Night mode form styles already defined above - removed duplicate */ .night-mode .setting-slider { background: var(--background-secondary); } .night-mode .slider-value { background: var(--background-secondary); color: var(--primary-color); } /* Mode nuit pour les switchers */ .night-mode .setting-checkbox { background: var(--background-card); border-color: var(--border-color); } .night-mode .setting-checkbox:hover { background: var(--background-secondary); border-color: var(--primary-color); } .night-mode .setting-checkbox.checked { background: linear-gradient(135deg, rgba(88, 166, 255, 0.1) 0%, rgba(188, 140, 255, 0.1) 100%); border-color: var(--primary-color); } .night-mode .switch { background: var(--background-secondary); border-color: var(--border-color); } .night-mode .setting-checkbox input:checked + label + .switch { background: linear-gradient(135deg, var(--primary-color) 0%, var(--fun-purple) 100%); border-color: var(--primary-color); } /* === RESPONSIVE POUR THÈMES === */ @media (max-width: 768px) { .achievements-container { right: var(--spacing-md); max-width: 280px; } .achievement-notification { padding: var(--spacing-md); } .collections-grid { grid-template-columns: 1fr; } .settings-modal { width: 95vw; max-height: 90vh; } .settings-tabs { flex-wrap: wrap; } .tab-btn { min-width: 33.333%; } .setting-row { grid-template-columns: 1fr; } .slider-container { flex-direction: column; align-items: stretch; } } /* === PRÉFÉRENCES UTILISATEUR === */ /* Réduction des animations pour les utilisateurs sensibles */ @media (prefers-reduced-motion: reduce) { .night-mode * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Contraste élevé */ @media (prefers-contrast: high) { .night-mode { --border-color: #ffffff; --text-secondary: #ffffff; } .night-mode .card, .night-mode .modal, .night-mode .btn { border-width: 3px; } } /* === THÈMES SAISONNIERS === */ /* Thème de Noël (optionnel) */ .christmas-theme { --primary-color: #d42c2c; --secondary-color: #228b22; --accent-color: #ffd700; --fun-orange: #ff6b35; } .christmas-theme .hero-section::before { content: "🎄🎅🎁⭐🦌🔔❄️🎊"; } /* Thème d'Halloween (optionnel) */ .halloween-theme { --primary-color: #ff6b35; --secondary-color: #8b008b; --accent-color: #32cd32; --background-primary: #1a0d1a; } .halloween-theme .hero-section::before { content: "🎃👻🦇🕷️🕸️🍭🧙‍♀️💀"; } /* ======================================== 🎨 SYSTÈME DE THÈMES COULEURS - 8 Thèmes Inspiré par la Famille Royale Elysia 💜💙🌿 ======================================== */ /* === THÈME CATPPUCCIN 🍫 === */ [data-theme="catppuccin"] { --background-primary: #1e1e2e; --background-secondary: #181825; --background-card: #313244; --text-primary: #cdd6f4; --text-secondary: #bac2de; /* 6.5:1 contrast on #313244 */ --text-muted: #9399b2; /* 4.5:1 contrast */ --text-on-color: #11111b; /* dark text on light colors */ --text-on-color-shadow: none; --primary-color: #f5c2e7; --secondary-color: #94e2d5; --accent-color: #fab387; --success-color: #a6e3a1; --warning-color: #f9e2af; --error-color: #f38ba8; --border-color: #585b70; --fun-purple: #cba6f7; --fun-orange: #fab387; --shadow-light: 0 4px 15px rgba(30, 30, 46, 0.3); --shadow-medium: 0 8px 30px rgba(30, 30, 46, 0.5); } /* === THÈME DRACULA 🧛 === */ [data-theme="dracula"] { --background-primary: #282a36; --background-secondary: #1e1f29; --background-card: #44475a; --text-primary: #f8f8f2; --text-secondary: #bfc7d5; /* brightened from #6272a4 for 4.5:1 */ --text-muted: #8b93a8; /* 4.5:1 minimum */ --text-on-color: #282a36; /* dark text on bright colors */ --text-on-color-shadow: none; --primary-color: #ff79c6; --secondary-color: #50fa7b; --accent-color: #8be9fd; --success-color: #50fa7b; --warning-color: #f1fa8c; --error-color: #ff5555; --border-color: #6272a4; --fun-purple: #bd93f9; --fun-orange: #ffb86c; --shadow-light: 0 4px 15px rgba(40, 42, 54, 0.3); --shadow-medium: 0 8px 30px rgba(40, 42, 54, 0.5); } /* === THÈME TOKYO NIGHT 🌃 === */ [data-theme="tokyo-night"] { --background-primary: #1a1b26; --background-secondary: #16161e; --background-card: #24283b; --text-primary: #c0caf5; --text-secondary: #a9b1d6; /* brightened for 5:1 contrast */ --text-muted: #7982a9; /* 4.5:1 minimum */ --text-on-color: #1a1b26; --text-on-color-shadow: none; --primary-color: #7aa2f7; --secondary-color: #9ece6a; --accent-color: #bb9af7; --success-color: #9ece6a; --warning-color: #e0af68; --error-color: #f7768e; --border-color: #565f89; --fun-purple: #bb9af7; --fun-orange: #ff9e64; --shadow-light: 0 4px 15px rgba(26, 27, 38, 0.3); --shadow-medium: 0 8px 30px rgba(26, 27, 38, 0.5); } /* === THÈME NORD ❄️ === */ [data-theme="nord"] { --background-primary: #2e3440; --background-secondary: #242933; --background-card: #3b4252; --text-primary: #eceff4; --text-secondary: #d8dee9; /* good contrast on #3b4252 */ --text-muted: #8fbcbb; /* 4.5:1 on dark */ --text-on-color: #2e3440; --text-on-color-shadow: none; --primary-color: #88c0d0; --secondary-color: #a3be8c; --accent-color: #81a1c1; --success-color: #a3be8c; --warning-color: #ebcb8b; --error-color: #bf616a; --border-color: #4c566a; --fun-purple: #b48ead; --fun-orange: #d08770; --shadow-light: 0 4px 15px rgba(46, 52, 64, 0.3); --shadow-medium: 0 8px 30px rgba(46, 52, 64, 0.5); } /* === THÈME GRUVBOX 🍂 === */ [data-theme="gruvbox"] { --background-primary: #282828; --background-secondary: #1d2021; --background-card: #3c3836; --text-primary: #ebdbb2; --text-secondary: #d5c4a1; /* brightened from #a89984 for 5:1 */ --text-muted: #a89984; /* 4.5:1 minimum */ --text-on-color: #282828; --text-on-color-shadow: none; --primary-color: #fe8019; --secondary-color: #b8bb26; --accent-color: #83a598; --success-color: #b8bb26; --warning-color: #fabd2f; --error-color: #fb4934; --border-color: #504945; --fun-purple: #d3869b; --fun-orange: #fe8019; --shadow-light: 0 4px 15px rgba(40, 40, 40, 0.3); --shadow-medium: 0 8px 30px rgba(40, 40, 40, 0.5); } /* === THÈME SYNTHWAVE '84 🌆 === */ [data-theme="synthwave"] { --background-primary: #262335; --background-secondary: #1a1726; --background-card: #34294f; --text-primary: #f0e6ff; --text-secondary: #cfc4e0; /* brightened from #b4a8c8 for 5:1 */ --text-muted: #9d90b8; /* 4.5:1 */ --text-on-color: #262335; --text-on-color-shadow: none; --primary-color: #ff7edb; --secondary-color: #72f1b8; --accent-color: #36f9f6; --success-color: #72f1b8; --warning-color: #fede5d; --error-color: #fe4450; --border-color: #495495; --fun-purple: #b893ff; --fun-orange: #ff8b39; --shadow-light: 0 4px 15px rgba(38, 35, 53, 0.3); --shadow-medium: 0 8px 30px rgba(255, 126, 219, 0.2); } [data-theme="synthwave"] .hero-title, [data-theme="synthwave"] .logo { text-shadow: 0 0 10px #ff7edb, 0 0 20px #ff7edb, 0 0 40px #ff7edb; } /* === THÈME ROSÉ PINE 🌹 === */ [data-theme="rose-pine"] { --background-primary: #191724; --background-secondary: #1f1d2e; --background-card: #26233a; --text-primary: #e0def4; --text-secondary: #c4c3d4; /* brightened from #908caa for 5:1 */ --text-muted: #908caa; /* 4.5:1 */ --text-on-color: #191724; --text-on-color-shadow: none; --primary-color: #ebbcba; --secondary-color: #31748f; --accent-color: #9ccfd8; --success-color: #9ccfd8; --warning-color: #f6c177; --error-color: #eb6f92; --border-color: #524f67; /* brightened for visibility */ --fun-purple: #c4a7e7; --fun-orange: #f6c177; --shadow-light: 0 4px 15px rgba(25, 23, 36, 0.3); --shadow-medium: 0 8px 30px rgba(235, 188, 186, 0.15); } /* === STYLES COMMUNS THÈMES SOMBRES === */ [data-theme="catppuccin"], [data-theme="dracula"], [data-theme="tokyo-night"], [data-theme="nord"], [data-theme="gruvbox"], [data-theme="synthwave"], [data-theme="rose-pine"] { color-scheme: dark; } [data-theme="catppuccin"] .header, [data-theme="dracula"] .header, [data-theme="tokyo-night"] .header, [data-theme="nord"] .header, [data-theme="gruvbox"] .header, [data-theme="synthwave"] .header, [data-theme="rose-pine"] .header, [data-theme="catppuccin"] .page-header, [data-theme="dracula"] .page-header, [data-theme="tokyo-night"] .page-header, [data-theme="nord"] .page-header, [data-theme="gruvbox"] .page-header, [data-theme="synthwave"] .page-header, [data-theme="rose-pine"] .page-header { background: linear-gradient(135deg, var(--background-card) 0%, var(--background-secondary) 100%); border-bottom: 2px solid var(--border-color); } /* Button styles for color themes - use solid colors with appropriate text */ [data-theme="catppuccin"] .btn-primary, [data-theme="dracula"] .btn-primary, [data-theme="tokyo-night"] .btn-primary, [data-theme="nord"] .btn-primary, [data-theme="gruvbox"] .btn-primary, [data-theme="synthwave"] .btn-primary, [data-theme="rose-pine"] .btn-primary { background: var(--primary-color); color: var(--text-on-color); text-shadow: var(--text-on-color-shadow); font-weight: 600; } [data-theme="catppuccin"] .btn-primary:hover, [data-theme="dracula"] .btn-primary:hover, [data-theme="tokyo-night"] .btn-primary:hover, [data-theme="nord"] .btn-primary:hover, [data-theme="gruvbox"] .btn-primary:hover, [data-theme="synthwave"] .btn-primary:hover, [data-theme="rose-pine"] .btn-primary:hover { background: color-mix(in srgb, var(--primary-color) 85%, black); } [data-theme="catppuccin"] .btn-secondary, [data-theme="dracula"] .btn-secondary, [data-theme="tokyo-night"] .btn-secondary, [data-theme="nord"] .btn-secondary, [data-theme="gruvbox"] .btn-secondary, [data-theme="synthwave"] .btn-secondary, [data-theme="rose-pine"] .btn-secondary { background: var(--secondary-color); color: var(--text-on-color); text-shadow: var(--text-on-color-shadow); font-weight: 600; } [data-theme="catppuccin"] .form-input, [data-theme="catppuccin"] .form-textarea, [data-theme="catppuccin"] .form-select, [data-theme="dracula"] .form-input, [data-theme="dracula"] .form-textarea, [data-theme="dracula"] .form-select, [data-theme="tokyo-night"] .form-input, [data-theme="tokyo-night"] .form-textarea, [data-theme="tokyo-night"] .form-select, [data-theme="nord"] .form-input, [data-theme="nord"] .form-textarea, [data-theme="nord"] .form-select, [data-theme="gruvbox"] .form-input, [data-theme="gruvbox"] .form-textarea, [data-theme="gruvbox"] .form-select, [data-theme="synthwave"] .form-input, [data-theme="synthwave"] .form-textarea, [data-theme="synthwave"] .form-select, [data-theme="rose-pine"] .form-input, [data-theme="rose-pine"] .form-textarea, [data-theme="rose-pine"] .form-select { background: var(--background-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="catppuccin"] .card, [data-theme="catppuccin"] .modal, [data-theme="catppuccin"] .generation-form, [data-theme="dracula"] .card, [data-theme="dracula"] .modal, [data-theme="dracula"] .generation-form, [data-theme="tokyo-night"] .card, [data-theme="tokyo-night"] .modal, [data-theme="tokyo-night"] .generation-form, [data-theme="nord"] .card, [data-theme="nord"] .modal, [data-theme="nord"] .generation-form, [data-theme="gruvbox"] .card, [data-theme="gruvbox"] .modal, [data-theme="gruvbox"] .generation-form, [data-theme="synthwave"] .card, [data-theme="synthwave"] .modal, [data-theme="synthwave"] .generation-form, [data-theme="rose-pine"] .card, [data-theme="rose-pine"] .modal, [data-theme="rose-pine"] .generation-form { background: var(--background-card); border-color: var(--border-color); } /* Scrollbars pour thèmes sombres */ [data-theme="catppuccin"] ::-webkit-scrollbar-thumb, [data-theme="dracula"] ::-webkit-scrollbar-thumb, [data-theme="tokyo-night"] ::-webkit-scrollbar-thumb, [data-theme="nord"] ::-webkit-scrollbar-thumb, [data-theme="gruvbox"] ::-webkit-scrollbar-thumb, [data-theme="synthwave"] ::-webkit-scrollbar-thumb, [data-theme="rose-pine"] ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--primary-color) 0%, var(--fun-purple) 100%); } [data-theme="catppuccin"] ::-webkit-scrollbar-track, [data-theme="dracula"] ::-webkit-scrollbar-track, [data-theme="tokyo-night"] ::-webkit-scrollbar-track, [data-theme="nord"] ::-webkit-scrollbar-track, [data-theme="gruvbox"] ::-webkit-scrollbar-track, [data-theme="synthwave"] ::-webkit-scrollbar-track, [data-theme="rose-pine"] ::-webkit-scrollbar-track { background: var(--background-secondary); } /* === THEME SELECTOR UI === */ .theme-selector { position: relative; display: inline-block; } .theme-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--background-card); border: 2px solid var(--border-color); cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .theme-btn:hover { border-color: var(--primary-color); transform: scale(1.1); } .theme-dropdown { position: absolute; top: 100%; right: 0; background: var(--background-card); border: 2px solid var(--border-color); border-radius: 12px; padding: 0.5rem; min-width: 180px; box-shadow: var(--shadow-medium); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; } .theme-dropdown.show { opacity: 1; visibility: visible; transform: translateY(5px); } .theme-option { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.6rem 0.8rem; background: transparent; border: none; border-radius: 8px; cursor: pointer; font-size: 0.9rem; color: var(--text-primary); transition: all 0.2s ease; text-align: left; } .theme-option:hover { background: var(--background-secondary); } .theme-option.active { background: var(--primary-color); color: var(--background-primary); }