/* ============================================================================ * Thème "Médiéval / Parchemin" pour le module Quêtes * ---------------------------------------------------------------------------- * Activation : ajouter la classe `theme-medieval` sur . * document.body.classList.add('theme-medieval'); * Désactivation : retirer la classe. * document.body.classList.remove('theme-medieval'); * * Ce fichier n'altère aucun fichier existant. Il utilise une spécificité élevée * (sélecteur `body.theme-medieval .xxx`) pour battre les règles par défaut sans * recourir à `!important` quand ce n'est pas indispensable. * ============================================================================ */ /* ── Palette ──────────────────────────────────────────────────────────────── * #f4e8d0 — Parchemin clair (fond des cartes) * #e8d9b8 — Parchemin légèrement plus sombre (hover, alternance) * #3a2418 — Encre brune (texte principal) * #6b4423 — Brun moyen (texte secondaire) * #c9a050 — Doré héraldique (bordures, titres) * #8b2635 — Rouge bordeaux (boutons d'action, accents) * #5d7a4a — Vert sceau (succès) * #a05a2c — Brun foncé (icônes, séparateurs) * ────────────────────────────────────────────────────────────────────────── */ /* Typographie globale du module */ body.theme-medieval #profile-tab-quests, body.theme-medieval #quests-pane-accessible, body.theme-medieval #quests-pane-my, body.theme-medieval #quests-pane-shop { font-family: Georgia, 'Times New Roman', serif; color: #3a2418; } /* ── Sous-onglets (Quêtes accessibles / Mes quêtes / Boutique) ──────────── */ body.theme-medieval #profileModal-sub-tabs { background: #e8d9b8 !important; border-bottom: 2px solid #c9a050 !important; border-left: none !important; border-right: none !important; } body.theme-medieval #profileModal-sub-tabs .tab-btn { background: transparent; color: #6b4423; font-family: Georgia, serif; font-weight: 600; letter-spacing: 0.5px; border: none; border-bottom: 3px solid transparent; padding: 8px 16px; transition: color 0.2s, border-color 0.2s, background 0.2s; } body.theme-medieval #profileModal-sub-tabs .tab-btn:hover { background: rgba(201, 160, 80, 0.15); color: #3a2418; } body.theme-medieval #profileModal-sub-tabs .tab-btn.active { color: #8b2635; border-bottom-color: #8b2635; background: rgba(201, 160, 80, 0.1); } /* ── Carte de quête (élément central) ───────────────────────────────────── * Effet parchemin : fond crème + ombre interne dorée + bordure ornementée. * Coins non arrondis pour un rendu rustique. */ body.theme-medieval .quest-item { background: #f4e8d0 !important; background-image: radial-gradient(ellipse at top left, rgba(201, 160, 80, 0.08), transparent 60%), radial-gradient(ellipse at bottom right, rgba(139, 38, 53, 0.05), transparent 60%); border: 2px solid #c9a050 !important; border-radius: 0 !important; color: #3a2418; padding: 16px 20px !important; box-shadow: 0 2px 6px rgba(58, 36, 24, 0.18), inset 0 0 32px rgba(201, 160, 80, 0.08); position: relative; } /* Ornement floral en haut à gauche (fleur de lys stylisée) */ body.theme-medieval .quest-item::before { content: '⚜'; position: absolute; top: 2px; left: 6px; color: #c9a050; font-size: 14px; opacity: 0.6; } body.theme-medieval .quest-item::after { content: '⚜'; position: absolute; bottom: 2px; right: 6px; color: #c9a050; font-size: 14px; opacity: 0.6; } /* Nom de la quête */ body.theme-medieval .quest-name { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; color: #3a2418; font-size: 15px; letter-spacing: 0.3px; } /* Détails (PO, durée, etc.) */ body.theme-medieval .quest-item div[style*="color:#666"], body.theme-medieval .quest-item div[style*="color: #666"] { color: #6b4423 !important; } /* ── Boutons d'action ───────────────────────────────────────────────────── */ /* Bouton "participer" : sceau de cire rouge */ body.theme-medieval .quest-participate-btn { background: linear-gradient(180deg, #a8334a 0%, #8b2635 50%, #6b1d28 100%) !important; color: #f4e8d0 !important; border: 1px solid #5a1820 !important; border-radius: 0 !important; font-family: Georgia, serif !important; font-weight: 600; letter-spacing: 1px; padding: 6px 14px !important; box-shadow: 0 2px 4px rgba(58, 36, 24, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } body.theme-medieval .quest-participate-btn:not(:disabled):hover { background: linear-gradient(180deg, #b8425a 0%, #9b3645 50%, #7b2d38 100%) !important; } body.theme-medieval .quest-participate-btn:disabled, body.theme-medieval .quest-participate-btn-unavailable { background: #d4c5a9 !important; color: #6b4423 !important; border-color: #a08760 !important; opacity: 0.7 !important; } /* Boutons œil (visibilité), éditer, supprimer */ body.theme-medieval .quest-visibility-btn, body.theme-medieval .quest-edit-btn, body.theme-medieval .quest-delete-btn, body.theme-medieval #quest-active-btn { background: #e8d9b8 !important; color: #6b4423 !important; border: 1px solid #c9a050 !important; border-radius: 0 !important; } body.theme-medieval .quest-visibility-btn:hover, body.theme-medieval .quest-edit-btn:hover, body.theme-medieval .quest-delete-btn:hover { background: #c9a050 !important; color: #f4e8d0 !important; } body.theme-medieval .quest-delete-btn:hover { background: #8b2635 !important; } /* Bouton "Ajouter une quête" */ body.theme-medieval #add-quest-btn, body.theme-medieval #reset-quest-assignments-btn { background: linear-gradient(180deg, #d4b266 0%, #c9a050 100%) !important; color: #3a2418 !important; border: 1px solid #a08240 !important; border-radius: 0 !important; font-family: Georgia, serif !important; font-weight: 600; } /* ── Formulaire de création/édition de quête ──────────────────────────── */ body.theme-medieval #quest-form { background: #f4e8d0; border: 2px solid #c9a050; border-radius: 0; padding: 16px; box-shadow: inset 0 0 24px rgba(201, 160, 80, 0.1); } body.theme-medieval #quest-form label { color: #3a2418; font-family: Georgia, serif; font-weight: 700; } body.theme-medieval #quest-form input[type="text"], body.theme-medieval #quest-form input[type="number"], body.theme-medieval #quest-form textarea, body.theme-medieval #quest-form select { background: #fcf5e6; border: 1px solid #a08760; border-radius: 0; color: #3a2418; font-family: Georgia, serif; padding: 6px 8px; } body.theme-medieval #quest-form input:focus, body.theme-medieval #quest-form textarea:focus, body.theme-medieval #quest-form select:focus { outline: none; border-color: #8b2635; box-shadow: 0 0 0 2px rgba(139, 38, 53, 0.2); } /* Boutons enregistrer / annuler du formulaire */ body.theme-medieval #quest-form-save-btn { background: #5d7a4a !important; color: #f4e8d0 !important; border: 1px solid #4a6238 !important; border-radius: 0 !important; } body.theme-medieval #quest-form-cancel-btn { background: #d4c5a9 !important; color: #3a2418 !important; border: 1px solid #a08760 !important; border-radius: 0 !important; } /* ── Filtres en haut de chaque sous-onglet ────────────────────────────── */ body.theme-medieval #quest-filter-commanditaire, body.theme-medieval #quest-filter-status, body.theme-medieval #my-quest-filter-active-status { background: #fcf5e6; border: 1px solid #a08760; border-radius: 0; color: #3a2418; font-family: Georgia, serif; padding: 4px 8px; } /* Checkboxes "Quêtes faisables uniquement" */ body.theme-medieval #quests-pane-accessible label, body.theme-medieval #quests-pane-my label { color: #3a2418; } /* ── Compteur "Réussites restantes possibles" ─────────────────────────── */ body.theme-medieval .quest-item div[style*="color:#ff9800"] { color: #a05a2c !important; font-family: Georgia, serif; font-weight: 700; } /* ── Participant en quête (avec timer) ────────────────────────────────── */ body.theme-medieval .quest-item div[style*="color:#FF9800"] { color: #8b2635 !important; font-family: Georgia, serif; font-weight: 600; } body.theme-medieval .quest-timer { color: #8b2635 !important; font-family: Georgia, serif; font-weight: 700; } /* ── Quête prérequise (badge en haut de la card) ──────────────────────── */ body.theme-medieval .quest-item div[style*="color:#d32f2f"], body.theme-medieval .quest-item div[style*="color: #d32f2f"] { color: #8b2635 !important; } body.theme-medieval .quest-item div[style*="color:#2e7d32"], body.theme-medieval .quest-item div[style*="color: #2e7d32"] { color: #5d7a4a !important; } /* ── Badge d'alignement ───────────────────────────────────────────────── */ body.theme-medieval .quest-alignment-badge { background: #6b4423 !important; color: #f4e8d0 !important; border: 1px solid #c9a050; border-radius: 0 !important; font-family: Georgia, serif !important; } /* ── Grille d'alignement requis dans le form ─────────────────────────── */ body.theme-medieval .quest-req-align-cell { background: #fcf5e6 !important; border: 1px solid #a08760 !important; border-radius: 0 !important; color: #6b4423 !important; font-family: Georgia, serif !important; } body.theme-medieval .quest-req-align-cell:hover { background: #e8d9b8 !important; border-color: #c9a050 !important; } body.theme-medieval .quest-req-align-cell:has(input:checked) { background: #c9a050 !important; border-color: #8b2635 !important; color: #3a2418 !important; } /* ── Diagramme d'alignement (onglet Profil) ──────────────────────────── */ body.theme-medieval .alignment-chart { background: #fcf5e6 !important; border: 2px solid #c9a050 !important; } body.theme-medieval .alignment-chart-cell { background: transparent !important; border: 1px solid #a08760 !important; color: #6b4423 !important; font-family: Georgia, serif !important; } body.theme-medieval .alignment-chart-cell[data-zone="NN"] { background: rgba(201, 160, 80, 0.15) !important; } body.theme-medieval .alignment-chart-cell[data-current="1"] { background: #c9a050 !important; color: #3a2418 !important; border-color: #8b2635 !important; } body.theme-medieval .alignment-chart-marker { background: #8b2635 !important; border-color: #f4e8d0 !important; box-shadow: 0 0 0 1px #8b2635, 0 1px 3px rgba(0, 0, 0, 0.5) !important; } body.theme-medieval .alignment-chart-title { color: #3a2418 !important; font-family: Georgia, serif !important; } body.theme-medieval .alignment-chart-title strong { color: #8b2635 !important; } body.theme-medieval .alignment-chart-axis-x, body.theme-medieval .alignment-chart-axis-y { color: #6b4423 !important; font-family: Georgia, serif !important; } /* ── Tooltip stylisée ────────────────────────────────────────────────── */ body.theme-medieval .tooltip-popup { background-color: #3a2418 !important; color: #f4e8d0 !important; font-family: Georgia, serif !important; border: 1px solid #c9a050; border-radius: 0 !important; } /* ── Modal "Envoyer un personnage" ───────────────────────────────────── */ body.theme-medieval #participate-modal #participate-modal-inner { background: #f4e8d0 !important; border: 2px solid #c9a050; border-radius: 0 !important; color: #3a2418; font-family: Georgia, serif; } /* ── Animation de promotion (quête qui passe en tête de liste) ─────── */ @keyframes questItemPromotedMedieval { 0% { box-shadow: 0 0 0 3px #c9a050, inset 0 0 32px rgba(139, 38, 53, 0.3); transform: translateY(-6px); opacity: 0.4; } 25% { box-shadow: 0 0 0 3px #c9a050, inset 0 0 32px rgba(139, 38, 53, 0.2); transform: translateY(0); opacity: 1; } 100% { box-shadow: 0 0 0 0 rgba(201, 160, 80, 0), inset 0 0 32px rgba(201, 160, 80, 0.08); transform: translateY(0); opacity: 1; } } body.theme-medieval .quest-item-promoted { animation: questItemPromotedMedieval 1.4s ease-out; }