/* ============================================================================ * Thème "Moderne / Structuré" (Notion/Linear-like) pour le module Quêtes * ---------------------------------------------------------------------------- * Activation : ajouter la classe `theme-modern` sur . * document.body.classList.add('theme-modern'); * * Esthétique : épuré, fonctionnel, hiérarchie visuelle claire. Subtilité avant * la décoration. Excellent pour mobile et pour les utilisateurs qui veulent * de la productivité. * ============================================================================ */ /* ── Palette ──────────────────────────────────────────────────────────────── * #ffffff — Fond carte * #fafafa — Fond pane * #1a1a1a — Texte profond * #4b5563 — Texte secondaire (gray-600) * #9ca3af — Texte tertiaire (gray-400) * #e5e7eb — Bordures (gray-200) * #d1d5db — Bordures hover (gray-300) * #2563eb — Bleu accent (blue-600) * #1d4ed8 — Bleu hover (blue-700) * #10b981 — Vert success (emerald-500) * #ef4444 — Rouge danger (red-500) * #f59e0b — Orange warning (amber-500) * ────────────────────────────────────────────────────────────────────────── */ /* Typographie globale */ body.theme-modern #profile-tab-quests, body.theme-modern #quests-pane-accessible, body.theme-modern #quests-pane-my, body.theme-modern #quests-pane-shop { font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #1a1a1a; -webkit-font-smoothing: antialiased; } /* ── Sous-onglets ────────────────────────────────────────────────────── */ body.theme-modern #profileModal-sub-tabs { background: #ffffff !important; border-bottom: 1px solid #e5e7eb !important; border-left: none !important; border-right: none !important; } body.theme-modern #profileModal-sub-tabs .tab-btn { background: transparent; color: #6b7280; font-weight: 500; border: none; border-bottom: 2px solid transparent; padding: 10px 16px; transition: color 0.15s, border-color 0.15s; } body.theme-modern #profileModal-sub-tabs .tab-btn:hover { color: #1a1a1a; } body.theme-modern #profileModal-sub-tabs .tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; } /* ── Carte de quête ─────────────────────────────────────────────────── */ body.theme-modern .quest-item { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; color: #1a1a1a; padding: 14px 16px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: border-color 0.15s, box-shadow 0.15s; margin-bottom: 12px !important; } body.theme-modern .quest-item:hover { border-color: #d1d5db !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } /* Nom de la quête */ body.theme-modern .quest-name { font-size: 15px !important; font-weight: 600 !important; color: #111827 !important; letter-spacing: -0.01em; } /* Détails secondaires */ body.theme-modern .quest-item div[style*="color:#666"], body.theme-modern .quest-item div[style*="color: #666"] { color: #6b7280 !important; font-size: 13px; } body.theme-modern .quest-item div[style*="color:#777"], body.theme-modern .quest-item div[style*="color: #777"] { color: #9ca3af !important; } /* ── Boutons d'action ───────────────────────────────────────────────── */ /* Bouton participer */ body.theme-modern .quest-participate-btn { background: #2563eb !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; font-weight: 500; font-size: 13px; padding: 6px 14px !important; transition: background 0.15s; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2); } body.theme-modern .quest-participate-btn:not(:disabled):hover { background: #1d4ed8 !important; } body.theme-modern .quest-participate-btn:disabled, body.theme-modern .quest-participate-btn-unavailable { background: #f3f4f6 !important; color: #9ca3af !important; box-shadow: none !important; } /* Boutons icônes secondaires */ body.theme-modern .quest-visibility-btn, body.theme-modern .quest-edit-btn, body.theme-modern .quest-delete-btn, body.theme-modern #quest-active-btn { background: #f9fafb !important; color: #4b5563 !important; border: 1px solid #e5e7eb !important; border-radius: 6px !important; padding: 4px 8px; transition: background 0.15s, color 0.15s; } body.theme-modern .quest-visibility-btn:hover, body.theme-modern .quest-edit-btn:hover, body.theme-modern #quest-active-btn:hover { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; } body.theme-modern .quest-delete-btn:hover { background: #ef4444 !important; color: #ffffff !important; border-color: #ef4444 !important; } /* Bouton "Ajouter une quête" */ body.theme-modern #add-quest-btn { background: #2563eb !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; font-weight: 500; padding: 8px 16px !important; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2); } body.theme-modern #add-quest-btn:hover { background: #1d4ed8 !important; } /* ── Formulaire ─────────────────────────────────────────────────────── */ body.theme-modern #quest-form { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; } body.theme-modern #quest-form label { color: #374151; font-weight: 500; font-size: 13px; } body.theme-modern #quest-form input[type="text"], body.theme-modern #quest-form input[type="number"], body.theme-modern #quest-form textarea, body.theme-modern #quest-form select { background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; color: #1a1a1a; font-family: inherit; font-size: 14px; padding: 6px 10px; transition: border-color 0.15s, box-shadow 0.15s; } body.theme-modern #quest-form input:focus, body.theme-modern #quest-form textarea:focus, body.theme-modern #quest-form select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } body.theme-modern #quest-form-save-btn { background: #10b981 !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; padding: 6px 14px !important; } body.theme-modern #quest-form-save-btn:hover { background: #059669 !important; } body.theme-modern #quest-form-cancel-btn { background: #f3f4f6 !important; color: #6b7280 !important; border: 1px solid #e5e7eb !important; border-radius: 6px !important; } /* ── Filtres ────────────────────────────────────────────────────────── */ body.theme-modern #quest-filter-commanditaire, body.theme-modern #quest-filter-status, body.theme-modern #my-quest-filter-active-status { background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; color: #1a1a1a !important; font-family: inherit !important; padding: 6px 10px !important; font-size: 13px; } /* ── Compteurs colorés ──────────────────────────────────────────────── */ body.theme-modern .quest-item div[style*="color:#ff9800"] { color: #f59e0b !important; font-weight: 500; } body.theme-modern .quest-item div[style*="color:#FF9800"] { color: #f59e0b !important; } body.theme-modern .quest-timer { color: #ef4444 !important; font-variant-numeric: tabular-nums; } /* ── Badge d'alignement ───────────────────────────────────────────── */ body.theme-modern .quest-alignment-badge { background: #f3f4f6 !important; color: #4b5563 !important; border: 1px solid #e5e7eb; border-radius: 4px !important; font-weight: 500 !important; } /* ── Grille alignement requis ──────────────────────────────────────── */ body.theme-modern .quest-req-align-cell { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 6px !important; color: #6b7280 !important; } body.theme-modern .quest-req-align-cell:hover { background: #f9fafb !important; border-color: #d1d5db !important; } body.theme-modern .quest-req-align-cell:has(input:checked) { background: #eff6ff !important; border-color: #2563eb !important; color: #2563eb !important; } /* ── Diagramme d'alignement ────────────────────────────────────────── */ body.theme-modern .alignment-chart { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 4px; } body.theme-modern .alignment-chart-cell { background: transparent !important; border: 1px solid #f3f4f6 !important; color: #9ca3af !important; } body.theme-modern .alignment-chart-cell[data-zone="NN"] { background: #f9fafb !important; } body.theme-modern .alignment-chart-cell[data-current="1"] { background: #eff6ff !important; color: #2563eb !important; border-color: #2563eb !important; } body.theme-modern .alignment-chart-marker { background: #2563eb !important; border-color: #ffffff !important; box-shadow: 0 0 0 1px #2563eb, 0 2px 4px rgba(37, 99, 235, 0.3) !important; } body.theme-modern .alignment-chart-title strong { color: #2563eb !important; } /* ── Tooltip ─────────────────────────────────────────────────────── */ body.theme-modern .tooltip-popup { background-color: #1f2937 !important; color: #f9fafb !important; font-family: inherit !important; border-radius: 6px !important; font-size: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; } /* ── Modal participate ───────────────────────────────────────────── */ body.theme-modern #participate-modal #participate-modal-inner { background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); } /* ── Animation de promotion ──────────────────────────────────────── */ @keyframes questItemPromotedModern { 0% { box-shadow: 0 0 0 3px #2563eb, 0 4px 12px rgba(37, 99, 235, 0.3); transform: translateY(-6px); opacity: 0.4; } 25% { box-shadow: 0 0 0 3px #2563eb, 0 4px 12px rgba(37, 99, 235, 0.2); transform: translateY(0); opacity: 1; } 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transform: translateY(0); opacity: 1; } } body.theme-modern .quest-item-promoted { animation: questItemPromotedModern 1.4s ease-out; }