/* ============================================================================ * Thème "Cyberpunk / Neo-arcane" pour le module Quêtes * ---------------------------------------------------------------------------- * Activation : ajouter la classe `theme-cyberpunk` sur . * document.body.classList.add('theme-cyberpunk'); * * Esthétique : sombre néon. Lignes nettes, angles coupés, glow magique. * Mix improbable de techno et arcane — pour un univers où la magie hacke * la réalité. Marquant, mais peut détonner avec un setting D&D pur. * ============================================================================ */ /* ── Palette ──────────────────────────────────────────────────────────────── * #0d1117 — Fond ardoise profond * #161b22 — Fond carte (légèrement plus clair) * #1f2933 — Fond hover * #e6edf3 — Texte clair * #8b96a3 — Texte secondaire * #00d9ff — Cyan néon (accent principal) * #ff00d9 — Magenta arcane (accent secondaire) * #8b5cf6 — Violet runique (warnings) * #00ff88 — Vert glitch (success) * #ff3366 — Rouge laser (danger) * ────────────────────────────────────────────────────────────────────────── */ /* Typographie globale */ body.theme-cyberpunk #profile-tab-quests, body.theme-cyberpunk #quests-pane-accessible, body.theme-cyberpunk #quests-pane-my, body.theme-cyberpunk #quests-pane-shop { font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif; color: #e6edf3; background: #0d1117; } /* ── Sous-onglets ────────────────────────────────────────────────── */ body.theme-cyberpunk #profileModal-sub-tabs { background: #0d1117 !important; border-bottom: 1px solid #00d9ff !important; border-left: none !important; border-right: none !important; } body.theme-cyberpunk #profileModal-sub-tabs .tab-btn { background: transparent; color: #8b96a3; font-family: 'Orbitron', 'Rajdhani', monospace; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; border: none; border-bottom: 2px solid transparent; padding: 10px 18px; transition: color 0.2s, text-shadow 0.2s, border-color 0.2s; } body.theme-cyberpunk #profileModal-sub-tabs .tab-btn:hover { color: #00d9ff; text-shadow: 0 0 4px rgba(0, 217, 255, 0.4); } body.theme-cyberpunk #profileModal-sub-tabs .tab-btn.active { color: #00d9ff; border-bottom-color: #00d9ff; text-shadow: 0 0 8px rgba(0, 217, 255, 0.6); } /* ── Carte de quête (angles coupés via clip-path) ──────────────── */ body.theme-cyberpunk .quest-item { background: rgba(22, 27, 34, 0.9) !important; border: 1px solid #00d9ff !important; border-radius: 0 !important; color: #e6edf3 !important; padding: 14px 18px !important; position: relative; box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.1) inset, 0 0 16px rgba(0, 217, 255, 0.15); /* Angles coupés en haut à droite et bas à gauche — esthétique cyber */ clip-path: polygon( 0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px) ); transition: box-shadow 0.2s; } body.theme-cyberpunk .quest-item:hover { box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.3) inset, 0 0 24px rgba(0, 217, 255, 0.35); } /* Nom de la quête */ body.theme-cyberpunk .quest-name { font-family: 'Orbitron', 'Rajdhani', monospace !important; color: #00d9ff !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; text-shadow: 0 0 8px rgba(0, 217, 255, 0.5); } /* Détails secondaires */ body.theme-cyberpunk .quest-item div[style*="color:#666"], body.theme-cyberpunk .quest-item div[style*="color: #666"] { color: #8b96a3 !important; } body.theme-cyberpunk .quest-item div[style*="color:#777"], body.theme-cyberpunk .quest-item div[style*="color: #777"] { color: #8b96a3 !important; } /* ── Boutons d'action ──────────────────────────────────────────── */ /* Bouton participer (ghost button avec fill au hover) */ body.theme-cyberpunk .quest-participate-btn { background: transparent !important; color: #00d9ff !important; border: 1px solid #00d9ff !important; border-radius: 0 !important; font-family: 'Orbitron', monospace !important; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-size: 12px; padding: 5px 14px !important; transition: all 0.2s; text-shadow: 0 0 4px rgba(0, 217, 255, 0.4); } body.theme-cyberpunk .quest-participate-btn:not(:disabled):hover { background: #00d9ff !important; color: #0d1117 !important; box-shadow: 0 0 16px rgba(0, 217, 255, 0.6); text-shadow: none; } body.theme-cyberpunk .quest-participate-btn:disabled, body.theme-cyberpunk .quest-participate-btn-unavailable { background: transparent !important; color: #4a5563 !important; border-color: #4a5563 !important; text-shadow: none !important; opacity: 0.6 !important; } /* Boutons icônes */ body.theme-cyberpunk .quest-visibility-btn, body.theme-cyberpunk .quest-edit-btn, body.theme-cyberpunk .quest-delete-btn, body.theme-cyberpunk #quest-active-btn { background: transparent !important; color: #8b96a3 !important; border: 1px solid #8b96a3 !important; border-radius: 0 !important; transition: all 0.2s; } body.theme-cyberpunk .quest-visibility-btn:hover, body.theme-cyberpunk .quest-edit-btn:hover, body.theme-cyberpunk #quest-active-btn:hover { color: #00d9ff !important; border-color: #00d9ff !important; box-shadow: 0 0 12px rgba(0, 217, 255, 0.4); } body.theme-cyberpunk .quest-delete-btn:hover { color: #ff3366 !important; border-color: #ff3366 !important; box-shadow: 0 0 12px rgba(255, 51, 102, 0.5); } /* Bouton "Ajouter une quête" */ body.theme-cyberpunk #add-quest-btn { background: transparent !important; color: #ff00d9 !important; border: 1px solid #ff00d9 !important; border-radius: 0 !important; font-family: 'Orbitron', monospace !important; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; padding: 8px 16px !important; text-shadow: 0 0 4px rgba(255, 0, 217, 0.4); } body.theme-cyberpunk #add-quest-btn:hover { background: #ff00d9 !important; color: #0d1117 !important; box-shadow: 0 0 20px rgba(255, 0, 217, 0.6); text-shadow: none; } /* ── Formulaire ────────────────────────────────────────────────── */ body.theme-cyberpunk #quest-form { background: rgba(22, 27, 34, 0.7); border: 1px solid #00d9ff; border-radius: 0; padding: 16px; box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.1) inset; } body.theme-cyberpunk #quest-form label { color: #00d9ff; font-family: 'Orbitron', 'Rajdhani', monospace; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; font-weight: 500; } body.theme-cyberpunk #quest-form input[type="text"], body.theme-cyberpunk #quest-form input[type="number"], body.theme-cyberpunk #quest-form textarea, body.theme-cyberpunk #quest-form select { background: #0d1117; border: 1px solid #00d9ff; border-radius: 0; color: #e6edf3; font-family: 'Rajdhani', sans-serif; padding: 6px 10px; } body.theme-cyberpunk #quest-form input:focus, body.theme-cyberpunk #quest-form textarea:focus, body.theme-cyberpunk #quest-form select:focus { outline: none; border-color: #ff00d9; box-shadow: 0 0 12px rgba(255, 0, 217, 0.4); } body.theme-cyberpunk #quest-form-save-btn { background: transparent !important; color: #00ff88 !important; border: 1px solid #00ff88 !important; border-radius: 0 !important; font-family: 'Orbitron', monospace !important; text-transform: uppercase; letter-spacing: 2px; } body.theme-cyberpunk #quest-form-save-btn:hover { background: #00ff88 !important; color: #0d1117 !important; box-shadow: 0 0 16px rgba(0, 255, 136, 0.5); } body.theme-cyberpunk #quest-form-cancel-btn { background: transparent !important; color: #8b96a3 !important; border: 1px solid #8b96a3 !important; border-radius: 0 !important; } /* ── Filtres ─────────────────────────────────────────────────────── */ body.theme-cyberpunk #quest-filter-commanditaire, body.theme-cyberpunk #quest-filter-status, body.theme-cyberpunk #my-quest-filter-active-status { background: #0d1117 !important; border: 1px solid #00d9ff !important; border-radius: 0 !important; color: #e6edf3 !important; font-family: 'Rajdhani', sans-serif !important; padding: 5px 8px !important; } /* ── Compteurs / messages spéciaux ───────────────────────────────── */ body.theme-cyberpunk .quest-item div[style*="color:#ff9800"] { color: #ff00d9 !important; font-family: 'Orbitron', monospace !important; font-weight: 500; text-shadow: 0 0 4px rgba(255, 0, 217, 0.4); } body.theme-cyberpunk .quest-item div[style*="color:#FF9800"] { color: #ff00d9 !important; } body.theme-cyberpunk .quest-timer { color: #ff3366 !important; font-family: 'Orbitron', monospace !important; font-weight: 600; text-shadow: 0 0 6px rgba(255, 51, 102, 0.5); } /* ── Badge d'alignement ──────────────────────────────────────────── */ body.theme-cyberpunk .quest-alignment-badge { background: transparent !important; color: #8b5cf6 !important; border: 1px solid #8b5cf6; border-radius: 0 !important; font-family: 'Orbitron', monospace !important; text-shadow: 0 0 4px rgba(139, 92, 246, 0.5); } /* ── Grille alignement requis ────────────────────────────────────── */ body.theme-cyberpunk .quest-req-align-cell { background: #0d1117 !important; border: 1px solid #8b96a3 !important; border-radius: 0 !important; color: #8b96a3 !important; font-family: 'Orbitron', monospace !important; font-weight: 500; } body.theme-cyberpunk .quest-req-align-cell:hover { border-color: #00d9ff !important; color: #00d9ff !important; box-shadow: 0 0 8px rgba(0, 217, 255, 0.3); } body.theme-cyberpunk .quest-req-align-cell:has(input:checked) { background: #ff00d9 !important; border-color: #ff00d9 !important; color: #0d1117 !important; box-shadow: 0 0 12px rgba(255, 0, 217, 0.5); } /* ── Diagramme d'alignement ──────────────────────────────────────── */ body.theme-cyberpunk .alignment-chart { background: #0d1117 !important; border: 1px solid #00d9ff !important; border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.1) inset; } body.theme-cyberpunk .alignment-chart-cell { background: transparent !important; border: 1px solid #1f2933 !important; color: #4a5563 !important; font-family: 'Orbitron', monospace !important; } body.theme-cyberpunk .alignment-chart-cell[data-zone="NN"] { background: rgba(0, 217, 255, 0.04) !important; color: #8b96a3 !important; } body.theme-cyberpunk .alignment-chart-cell[data-current="1"] { background: rgba(255, 0, 217, 0.15) !important; color: #ff00d9 !important; border-color: #ff00d9 !important; text-shadow: 0 0 4px rgba(255, 0, 217, 0.5); } body.theme-cyberpunk .alignment-chart-marker { background: #ff00d9 !important; border-color: #0d1117 !important; box-shadow: 0 0 0 1px #ff00d9, 0 0 16px rgba(255, 0, 217, 0.8) !important; } body.theme-cyberpunk .alignment-chart-title { color: #e6edf3 !important; font-family: 'Orbitron', monospace !important; text-transform: uppercase; letter-spacing: 1px; font-size: 11px !important; } body.theme-cyberpunk .alignment-chart-title strong { color: #00d9ff !important; text-shadow: 0 0 4px rgba(0, 217, 255, 0.5); } body.theme-cyberpunk .alignment-chart-axis-x, body.theme-cyberpunk .alignment-chart-axis-y { color: #8b96a3 !important; font-family: 'Orbitron', monospace !important; } /* ── Tooltip ─────────────────────────────────────────────────────── */ body.theme-cyberpunk .tooltip-popup { background-color: #0d1117 !important; color: #00d9ff !important; font-family: 'Rajdhani', monospace !important; border: 1px solid #00d9ff; border-radius: 0 !important; box-shadow: 0 0 16px rgba(0, 217, 255, 0.3) !important; text-shadow: 0 0 4px rgba(0, 217, 255, 0.3); } /* ── Modal participate ───────────────────────────────────────────── */ body.theme-cyberpunk #participate-modal #participate-modal-inner { background: rgba(13, 17, 23, 0.98) !important; border: 1px solid #00d9ff; border-radius: 0 !important; color: #e6edf3 !important; box-shadow: 0 0 24px rgba(0, 217, 255, 0.3), 0 0 0 1px rgba(0, 217, 255, 0.1) inset; } /* ── Animation de promotion ──────────────────────────────────────── */ @keyframes questItemPromotedCyber { 0% { box-shadow: 0 0 0 2px #ff00d9, 0 0 32px rgba(255, 0, 217, 0.6); transform: translateY(-8px); opacity: 0.4; } 25% { box-shadow: 0 0 0 2px #ff00d9, 0 0 32px rgba(255, 0, 217, 0.5); transform: translateY(0); opacity: 1; } 100% { box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.1) inset, 0 0 16px rgba(0, 217, 255, 0.15); transform: translateY(0); opacity: 1; } } body.theme-cyberpunk .quest-item-promoted { animation: questItemPromotedCyber 1.4s ease-out; }