/* ============================================================================ * Thème "Heroic Fantasy / MMO" (style WoW/Diablo) pour le module Quêtes * ---------------------------------------------------------------------------- * Activation : ajouter la classe `theme-fantasy` sur . * document.body.classList.add('theme-fantasy'); * * Esthétique : sombre, riche, métallique. Liserés dorés, ambiance épique. * Le plus passe-partout des thèmes "atmosphériques" : ni archaïque, ni futuriste. * ============================================================================ */ /* ── Palette ──────────────────────────────────────────────────────────────── * #1a1518 — Fond cartes (noir teinté chaud) * #2a1f24 — Fond légèrement plus clair (gradient end) * #0f0b0d — Fond pane (plus sombre) * #d4c5a9 — Texte principal (parchemin clair) * #ffb84d — Or éclatant (titres, accents) * #c9a050 — Or atténué (bordures, hover) * #7d5a2f — Bronze (bordures normales) * #a335ee — Violet épique (rarity) * #0070dd — Bleu rare * #1eff00 — Vert commun (success) * #ff4040 — Rouge échec/danger * ────────────────────────────────────────────────────────────────────────── */ /* Typographie globale */ body.theme-fantasy #profile-tab-quests, body.theme-fantasy #quests-pane-accessible, body.theme-fantasy #quests-pane-my, body.theme-fantasy #quests-pane-shop { font-family: 'Roboto', 'Segoe UI', sans-serif; color: #d4c5a9; background: #0f0b0d; } /* ── Sous-onglets ────────────────────────────────────────────────────── */ body.theme-fantasy #profileModal-sub-tabs { background: linear-gradient(180deg, #2a1f24 0%, #1a1518 100%) !important; border-bottom: 1px solid #7d5a2f !important; border-left: none !important; border-right: none !important; } body.theme-fantasy #profileModal-sub-tabs .tab-btn { background: transparent; color: #8a7960; font-family: 'Cinzel', 'Roboto', serif; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; border: none; border-bottom: 2px solid transparent; padding: 10px 18px; transition: color 0.2s, border-color 0.2s; } body.theme-fantasy #profileModal-sub-tabs .tab-btn:hover { color: #c9a050; } body.theme-fantasy #profileModal-sub-tabs .tab-btn.active { color: #ffb84d; border-bottom-color: #ffb84d; text-shadow: 0 0 8px rgba(255, 184, 77, 0.5); } /* ── Carte de quête ─────────────────────────────────────────────────── */ body.theme-fantasy .quest-item { background: linear-gradient(135deg, #1a1518 0%, #2a1f24 100%) !important; border: 1px solid #7d5a2f !important; border-radius: 4px !important; color: #d4c5a9 !important; padding: 14px 18px !important; position: relative; box-shadow: inset 0 0 0 1px rgba(255, 184, 77, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4); transition: border-color 0.2s, box-shadow 0.2s; } /* Liseré doré à gauche (style "rarity bar") */ body.theme-fantasy .quest-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #ffb84d 0%, #7d5a2f 100%); } body.theme-fantasy .quest-item:hover { border-color: #c9a050 !important; box-shadow: inset 0 0 0 1px rgba(255, 184, 77, 0.15), 0 4px 16px rgba(255, 184, 77, 0.1); } /* Nom de la quête */ body.theme-fantasy .quest-name { font-family: 'Cinzel', Georgia, serif !important; color: #ffb84d !important; font-weight: 600 !important; font-size: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); letter-spacing: 0.3px; } /* Détails (PO, durée, etc.) */ body.theme-fantasy .quest-item div[style*="color:#666"], body.theme-fantasy .quest-item div[style*="color: #666"] { color: #8a7960 !important; } body.theme-fantasy .quest-item div[style*="color:#777"], body.theme-fantasy .quest-item div[style*="color: #777"] { color: #8a7960 !important; } /* ── Boutons d'action ───────────────────────────────────────────────── */ /* Bouton participer (parchemin doré métallique) */ body.theme-fantasy .quest-participate-btn { background: linear-gradient(180deg, #ffb84d 0%, #c9a050 50%, #7d5a2f 100%) !important; color: #1a1518 !important; border: 1px solid #ffb84d !important; border-radius: 3px !important; font-family: 'Cinzel', serif !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 14px !important; box-shadow: 0 0 8px rgba(255, 184, 77, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: box-shadow 0.2s; } body.theme-fantasy .quest-participate-btn:not(:disabled):hover { box-shadow: 0 0 16px rgba(255, 184, 77, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); } body.theme-fantasy .quest-participate-btn:disabled, body.theme-fantasy .quest-participate-btn-unavailable { background: #3a2f24 !important; color: #6b5a40 !important; border-color: #5a4a30 !important; box-shadow: none !important; opacity: 0.6 !important; } /* Boutons icônes */ body.theme-fantasy .quest-visibility-btn, body.theme-fantasy .quest-edit-btn, body.theme-fantasy .quest-delete-btn, body.theme-fantasy #quest-active-btn { background: #2a1f24 !important; color: #c9a050 !important; border: 1px solid #7d5a2f !important; border-radius: 3px !important; transition: all 0.2s; } body.theme-fantasy .quest-visibility-btn:hover, body.theme-fantasy .quest-edit-btn:hover, body.theme-fantasy #quest-active-btn:hover { background: #c9a050 !important; color: #1a1518 !important; border-color: #ffb84d !important; } body.theme-fantasy .quest-delete-btn:hover { background: #8b1f1f !important; color: #ffb84d !important; border-color: #ff4040 !important; } /* Bouton "Ajouter une quête" */ body.theme-fantasy #add-quest-btn { background: linear-gradient(180deg, #ffb84d 0%, #c9a050 100%) !important; color: #1a1518 !important; border: 1px solid #ffb84d !important; border-radius: 3px !important; font-family: 'Cinzel', serif !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } /* ── Formulaire ──────────────────────────────────────────────────── */ body.theme-fantasy #quest-form { background: linear-gradient(135deg, #1a1518 0%, #2a1f24 100%); border: 1px solid #7d5a2f; border-radius: 4px; padding: 16px; box-shadow: inset 0 0 0 1px rgba(255, 184, 77, 0.05); } body.theme-fantasy #quest-form label { color: #ffb84d; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.5px; } body.theme-fantasy #quest-form input[type="text"], body.theme-fantasy #quest-form input[type="number"], body.theme-fantasy #quest-form textarea, body.theme-fantasy #quest-form select { background: #0f0b0d; border: 1px solid #7d5a2f; border-radius: 3px; color: #d4c5a9; font-family: inherit; padding: 6px 10px; } body.theme-fantasy #quest-form input:focus, body.theme-fantasy #quest-form textarea:focus, body.theme-fantasy #quest-form select:focus { outline: none; border-color: #ffb84d; box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.3); } body.theme-fantasy #quest-form-save-btn { background: linear-gradient(180deg, #1eff00 0%, #15a000 100%) !important; color: #0f0b0d !important; border: 1px solid #1eff00 !important; border-radius: 3px !important; font-weight: 700; } body.theme-fantasy #quest-form-cancel-btn { background: #2a1f24 !important; color: #c9a050 !important; border: 1px solid #7d5a2f !important; border-radius: 3px !important; } /* ── Filtres ─────────────────────────────────────────────────────── */ body.theme-fantasy #quest-filter-commanditaire, body.theme-fantasy #quest-filter-status, body.theme-fantasy #my-quest-filter-active-status { background: #0f0b0d !important; border: 1px solid #7d5a2f !important; border-radius: 3px !important; color: #d4c5a9 !important; padding: 5px 8px !important; } /* ── Compteurs / messages spéciaux ───────────────────────────────── */ body.theme-fantasy .quest-item div[style*="color:#ff9800"] { color: #ffb84d !important; font-weight: 600; } body.theme-fantasy .quest-item div[style*="color:#FF9800"] { color: #ffb84d !important; font-weight: 600; } body.theme-fantasy .quest-timer { color: #ff4040 !important; font-weight: 700; text-shadow: 0 0 4px rgba(255, 64, 64, 0.5); } /* ── Badge d'alignement ──────────────────────────────────────────── */ body.theme-fantasy .quest-alignment-badge { background: rgba(163, 53, 238, 0.2) !important; color: #d4a5ee !important; border: 1px solid #a335ee; border-radius: 3px !important; text-shadow: 0 0 4px rgba(163, 53, 238, 0.5); } /* ── Grille alignement requis ────────────────────────────────────── */ body.theme-fantasy .quest-req-align-cell { background: #0f0b0d !important; border: 1px solid #7d5a2f !important; border-radius: 3px !important; color: #8a7960 !important; font-weight: 600 !important; } body.theme-fantasy .quest-req-align-cell:hover { background: #2a1f24 !important; border-color: #c9a050 !important; color: #c9a050 !important; } body.theme-fantasy .quest-req-align-cell:has(input:checked) { background: linear-gradient(180deg, #ffb84d 0%, #c9a050 100%) !important; border-color: #ffb84d !important; color: #1a1518 !important; } /* ── Diagramme d'alignement ────────────────────────────────────── */ body.theme-fantasy .alignment-chart { background: #0f0b0d !important; border: 1px solid #7d5a2f !important; border-radius: 3px; } body.theme-fantasy .alignment-chart-cell { background: transparent !important; border: 1px solid #3a2f24 !important; color: #6b5a40 !important; } body.theme-fantasy .alignment-chart-cell[data-zone="NN"] { background: rgba(255, 184, 77, 0.05) !important; color: #8a7960 !important; } body.theme-fantasy .alignment-chart-cell[data-current="1"] { background: rgba(255, 184, 77, 0.2) !important; color: #ffb84d !important; border-color: #ffb84d !important; } body.theme-fantasy .alignment-chart-marker { background: #ffb84d !important; border-color: #1a1518 !important; box-shadow: 0 0 0 1px #ffb84d, 0 0 12px rgba(255, 184, 77, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5) !important; } body.theme-fantasy .alignment-chart-title { color: #d4c5a9 !important; } body.theme-fantasy .alignment-chart-title strong { color: #ffb84d !important; text-shadow: 0 0 4px rgba(255, 184, 77, 0.4); } body.theme-fantasy .alignment-chart-axis-x, body.theme-fantasy .alignment-chart-axis-y { color: #8a7960 !important; } /* ── Tooltip ────────────────────────────────────────────────────── */ body.theme-fantasy .tooltip-popup { background-color: #0f0b0d !important; color: #ffb84d !important; border: 1px solid #7d5a2f; border-radius: 3px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 184, 77, 0.1) !important; } /* ── Modal participate ──────────────────────────────────────────── */ body.theme-fantasy #participate-modal #participate-modal-inner { background: linear-gradient(135deg, #1a1518 0%, #2a1f24 100%) !important; border: 1px solid #c9a050; border-radius: 4px !important; color: #d4c5a9 !important; box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.1), 0 25px 60px rgba(0, 0, 0, 0.8); } /* ── Animation de promotion ─────────────────────────────────────── */ @keyframes questItemPromotedFantasy { 0% { box-shadow: 0 0 0 2px #ffb84d, 0 0 24px rgba(255, 184, 77, 0.6), inset 0 0 0 1px rgba(255, 184, 77, 0.3); transform: translateY(-8px); opacity: 0.4; } 25% { box-shadow: 0 0 0 2px #ffb84d, 0 0 24px rgba(255, 184, 77, 0.5), inset 0 0 0 1px rgba(255, 184, 77, 0.2); transform: translateY(0); opacity: 1; } 100% { box-shadow: inset 0 0 0 1px rgba(255, 184, 77, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4); transform: translateY(0); opacity: 1; } } body.theme-fantasy .quest-item-promoted { animation: questItemPromotedFantasy 1.4s ease-out; }