/* Google Fonts - Inter & JetBrains Mono (replacing Geist which is not available on CDN) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* =================================== DESIGN TOKENS - Industrial Pro 2026 =================================== */ /* === SPACING SCALE (8pt Grid) === */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* === TYPOGRAPHY SCALE === */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ /* === FONT WEIGHTS === */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* === TRANSITIONS === */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* === SAFE AREAS (iOS/Android) === */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* === Z-INDEX LAYERS === */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; --z-max: 9999; /* === Pear OS Light Edition Palette === */ --bg-body: #F5F5F7; --bg-surface: #FFFFFF; --bg-surface-alt: #F2F2F7; --bg-header: rgba(255, 255, 255, 0.95); --border-color: #E5E5EA; /* Text - Improved contrast for accessibility (WCAG AA) */ --text-main: #1D1D1F; --text-muted: #6E6E73; /* Improved from #86868b for better contrast ratio */ --text-link: #4D7A0F; --text-link-hover: #3A5E0B; /* Accents */ --accent-primary: #A8C545; --accent-secondary: #8EAF35; --accent-danger: #FF3B30; --accent-warning: #FF9500; --accent-success: #34C759; --accent-blue: #007AFF; /* Components - Compact radii */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.12); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Radius squircle pour avatars (entre rond et carré) */ --radius-squircle: 30%; --quote-bg: #F9F9F9; --quote-border: #A8C545; --spoiler-bg: #E5E5EA; --input-bg: #F2F2F7; --input-border: transparent; /* Focus ring for accessibility */ --focus-ring-color: rgba(168, 197, 69, 0.5); --focus-ring-offset: 2px; /* === INPUT VALIDATION TOKENS (R5) === */ --input-error-border: var(--accent-danger); --input-error-bg: rgba(255, 59, 48, 0.05); --input-error-text: #D32F2F; --input-success-border: var(--accent-success); --input-success-bg: rgba(52, 199, 89, 0.05); --input-warning-border: var(--accent-warning); --input-warning-bg: rgba(255, 149, 0, 0.05); /* Topic & Post defaults */ --topic-title-color: var(--text-main); --topic-title-shadow: none; --post-content-color: var(--text-main); } [data-theme="dark"] { --bg-body: #121212; --bg-surface: #1C1C1E; /* Slightly lighter for posts */ --bg-surface-alt: #2C2C2E; --bg-header: rgba(30, 30, 30, 0.95); --border-color: #38383A; --text-main: #F5F5F7; /* Brighter white */ --text-muted: #A1A1A6; --text-link: #B5D455; --text-link-hover: #C8E06A; --quote-bg: #252525; --quote-border: #A8C545; --spoiler-bg: #48484A; --input-bg: #2C2C2E; /* --- Ombres teintées (harmonisation R1) --- */ /* Ombre bleutée froide au lieu de noir pur, comme deep-ether */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(10, 15, 30, 0.2); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(10, 20, 50, 0.15); --shadow-floating: 0 20px 50px -10px rgba(0, 0, 0, 0.6); /* Glow subtil pour les éléments interactifs */ --glow-border: rgba(181, 212, 85, 0.15); /* Topic & Post specific */ --topic-title-color: #FFFFFF; --topic-title-shadow: none; --post-content-color: #E0E0E2; /* Validation tokens dark */ --input-error-bg: rgba(255, 59, 48, 0.1); --input-success-bg: rgba(52, 199, 89, 0.1); --input-warning-bg: rgba(255, 149, 0, 0.1); } [data-theme="deep-ether"] { /* Deep Ether Palette - P3 Fallback */ --primary-azure: #0D66FF; --surface-void: #05050A; --surface-glass: rgba(10, 20, 40, 0.7); --bg-body: var(--surface-void); --bg-surface: #0A0F1E; --bg-surface-alt: #151A2D; --bg-header: var(--surface-glass); --border-color: rgba(255, 255, 255, 0.1); /* Premium glassmorphism enhancements */ --glow-border: rgba(255, 255, 255, 0.08); --glow-shadow: 0 0 30px rgba(13, 102, 255, 0.15); --text-main: #E5E5E7; --text-muted: #8AA0C0; --text-link: var(--primary-azure); --text-link-hover: #00D4FF; --accent-primary: var(--primary-azure); --accent-secondary: #00D4FF; --accent-danger: #FF3B30; --accent-blue: #007AFF; --quote-bg: rgba(10, 20, 50, 0.5); --quote-border: var(--primary-azure); --spoiler-bg: rgba(20, 40, 80, 0.5); --input-bg: rgba(10, 20, 40, 0.5); --shadow-depth: 0 20px 40px -10px rgba(10, 20, 50, 0.5); --shadow-card: var(--shadow-depth); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Topic & Post specific colors */ --topic-title-color: #FFFFFF; --topic-title-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --post-content-color: #C8C8C8; } /* Deep Ether - Premium glassmorphism effects */ [data-theme="deep-ether"] .post { border-top: 1px solid var(--glow-border); box-shadow: var(--shadow-card), var(--glow-shadow); backdrop-filter: blur(10px); background: linear-gradient(135deg, rgba(30, 30, 45, 0.85) 0%, rgba(20, 25, 40, 0.9) 100%); } [data-theme="deep-ether"] .post:hover { box-shadow: var(--shadow-card), 0 0 40px rgba(13, 102, 255, 0.2); background: linear-gradient(135deg, rgba(35, 35, 55, 0.9) 0%, rgba(25, 30, 50, 0.95) 100%); } [data-theme="deep-ether"] .topic-card.active { box-shadow: 0 0 0 1px var(--primary-azure), 0 4px 20px rgba(13, 102, 255, 0.25); border-color: var(--primary-azure); } /* Premium accent bar for active elements */ [data-theme="deep-ether"] .topic-card.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--primary-azure) 0%, #00D4FF 100%); border-radius: 3px 0 0 3px; } /* Deep Ether topic card enhancements */ [data-theme="deep-ether"] .topic-card { background: rgba(20, 25, 40, 0.6); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, 0.06); } [data-theme="deep-ether"] .topic-card:hover { background: rgba(30, 35, 55, 0.8); border-color: rgba(13, 102, 255, 0.3); box-shadow: 0 0 20px rgba(13, 102, 255, 0.15); } [data-theme="deep-ether"] .topic-card:hover .reply-count { background: var(--primary-azure); box-shadow: 0 0 12px rgba(13, 102, 255, 0.4); } [data-theme="deep-ether"] .topic-card.pinned { background: linear-gradient(135deg, rgba(20, 25, 40, 0.7) 0%, rgba(13, 102, 255, 0.1) 100%); border-color: rgba(13, 102, 255, 0.2); } @supports (color: color(display-p3 1 1 1)) { [data-theme="deep-ether"] { --primary-azure: color(display-p3 0.05 0.4 1); } } /* ================================================================== */ /* === THEME: LIGHT ETHER ("Organic Ceramic" Edition) === */ /* === Direction: Papier d'art, Ombres teintes, Confort visuel === */ /* ================================================================== */ [data-theme="light-ether"] { /* --- Palette Fondations (Warm) --- */ /* Le fond n'est plus gris, mais un "Albâtre" très subtil */ --bg-body: #F9F8F6; /* Les surfaces restent blanches pour le "Pop" et le contraste */ --bg-surface: #FFFFFF; --bg-surface-alt: #F2F0EB; /* Beige "Sable" pour les zones secondaires (sidebar/inputs) */ /* Header : Effet "Lait Givré" (Porcelaine) */ --bg-header: rgba(255, 255, 255, 0.85); /* Bordures : Pierre chaude (Stone) */ --border-color: #E6E4DF; /* --- Typographie "Encre Douce" --- */ /* Jamais de noir pur (#000000) sur fond clair, ça fatigue l'Å“il */ --text-main: #2D2B28; --text-muted: #767169; /* Gris chaud (Taupe) */ /* --- ACCESSIBILITÉ CRITIQUE --- */ /* Liens bleus pour meilleure lisibilité */ --text-link: #0055CC; --text-link-hover: #003D99; /* --- Accents & Branding --- */ /* Bleu Azure comme couleur principale en mode clair */ --primary-azure: #0D66FF; --accent-primary: #0D66FF; /* Bleu vif pour boutons/badges */ --accent-secondary: #0055CC; --accent-danger: #E05D52; /* Rouge brique (plus naturel) */ --accent-warning: #F5A623; /* Orange Safran */ --accent-success: #50A14F; /* Vert Feuille */ --accent-blue: #007AFF; /* --- Ombres "Lumière Naturelle" --- */ /* Secret pro : Les ombres ne sont pas grises, elles sont brunes/orangées à très faible opacité */ --shadow-card: 0 2px 4px rgba(45, 40, 35, 0.03), 0 8px 16px rgba(45, 40, 35, 0.03); --shadow-elevated: 0 4px 12px rgba(45, 40, 35, 0.06), 0 12px 32px rgba(13, 102, 255, 0.12); /* Lueur bleue très subtile */ --shadow-floating: 0 20px 50px -10px rgba(45, 40, 35, 0.15); /* Composants Spécifiques */ --quote-bg: #FDFCF8; --quote-border: var(--accent-primary); --spoiler-bg: #E6E4DF; --input-bg: #FFFFFF; /* Micro-interactions */ --glow-border: rgba(13, 102, 255, 0.3); /* Topic Specifics */ --topic-title-color: #1A1917; --topic-title-shadow: none; --post-content-color: #2D2B28; } /* --- 1. TEXTURE PAPIER (L'Effet "Premium") --- */ /* Ajoute un grain invisible qui enlève le côté "plastique" des écrans */ [data-theme="light-ether"]::before { content: ""; position: fixed; inset: 0; /* Bruit SVG en base64 */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; z-index: -1; mix-blend-mode: multiply; /* Incrustation naturelle */ } /* --- 2. HEADER & GLASSMORPHISM CÉRAMIQUE --- */ [data-theme="light-ether"] header { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 4px 20px rgba(13, 102, 255, 0.03); /* Lueur bleue imperceptible */ } /* --- 3. SIDEBAR & NAVIGATION --- */ [data-theme="light-ether"] .sidebar { background: #F7F6F3; /* Texture papier légèrement plus foncée */ border-right: 1px solid var(--border-color); } [data-theme="light-ether"] .sidebar-action-bar { background: #FFFFFF; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } /* Bouton Créer : Dégradé Azure */ [data-theme="light-ether"] .btn-create-topic { background: linear-gradient(135deg, #0D66FF 0%, #0055CC 100%); box-shadow: 0 4px 10px rgba(13, 102, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3); border: none; color: white !important; } [data-theme="light-ether"] .btn-create-topic:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13, 102, 255, 0.35); filter: brightness(1.05); } /* --- 4. TOPIC CARDS (Cartes Flottantes) --- */ [data-theme="light-ether"] .topic-card { background: #FFFFFF; border: 1px solid transparent; /* Ombre double pour simuler la lumière ambiante */ box-shadow: 0 2px 4px rgba(45, 40, 35, 0.02), 0 1px 0 rgba(45, 40, 35, 0.02); border-radius: var(--radius-lg); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease; } [data-theme="light-ether"] .topic-card:hover { transform: translateY(-3px) scale(1.005); box-shadow: var(--shadow-elevated); border-color: rgba(13, 102, 255, 0.3); /* Bordure bleue subtile au survol */ z-index: 2; } /* Topic Actif : Style "Marqué au feutre" */ [data-theme="light-ether"] .topic-card.active { background: linear-gradient(to right, #EBF3FF, #FFFFFF); border-color: var(--accent-primary); box-shadow: 0 4px 12px rgba(13, 102, 255, 0.15); } /* --- 5. POSTS (Le cÅ“ur du contenu) --- */ [data-theme="light-ether"] .post { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.03); box-shadow: var(--shadow-card); border-radius: 16px; } [data-theme="light-ether"] .post:hover { box-shadow: var(--shadow-elevated); } /* Header Message : Dégradé ultra-subtil */ [data-theme="light-ether"] .post-header-row { background: linear-gradient(to bottom, #FFFFFF, #FAFAF9); border-bottom: 1px solid #F0EFE9; border-radius: 16px 16px 0 0; } /* Contenu : Lisibilité Maximale */ [data-theme="light-ether"] .post-content { color: #2D2D2A; } /* Citations Modernes */ [data-theme="light-ether"] .post-content blockquote { background: #F9F8F6; border-left: 3px solid var(--accent-primary); color: var(--text-muted); border-radius: 0 8px 8px 0; box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.01); } /* --- 6. INPUTS & FORMULAIRES (Style "Enfoncé") --- */ [data-theme="light-ether"] input, [data-theme="light-ether"] textarea, [data-theme="light-ether"] .chat-editor-wrapper { background: #FFFFFF; border: 1px solid #DCDAD4; color: var(--text-main); /* Ombre interne pour créer la profondeur */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } [data-theme="light-ether"] input:focus, [data-theme="light-ether"] textarea:focus, [data-theme="light-ether"] .chat-editor:focus { background: #FFFFFF; border-color: var(--accent-primary); box-shadow: 0 0 0 4px rgba(13, 102, 255, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.01); } /* --- 7. BOUTONS & ELEMENTS DIVERS --- */ [data-theme="light-ether"] .btn:not(.btn-create-topic) { background: linear-gradient(135deg, #0D66FF 0%, #0055CC 100%); color: white !important; box-shadow: 0 2px 5px rgba(13, 102, 255, 0.3); border: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } [data-theme="light-ether"] .btn:not(.btn-create-topic):hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(13, 102, 255, 0.4); } /* Badges */ [data-theme="light-ether"] .reply-count { background: #EFECE6; color: var(--text-muted); font-weight: 600; } [data-theme="light-ether"] .reply-count.hot { background: linear-gradient(135deg, #FF8A65 0%, #FF5722 100%); color: white; box-shadow: 0 2px 8px rgba(255, 87, 34, 0.2); } /* Scrollbars "Sable" */ [data-theme="light-ether"] ::-webkit-scrollbar-track { background: #F9F8F6; } [data-theme="light-ether"] ::-webkit-scrollbar-thumb { background-color: #D1CCC4; border: 3px solid #F9F8F6; border-radius: 10px; } [data-theme="light-ether"] ::-webkit-scrollbar-thumb:hover { background-color: #0D66FF; } /* Boutons Outline (avec background transparent) - Fix pour le bouton Connexion */ [data-theme="light-ether"] .btn[style*="transparent"] { background: transparent !important; color: #0D66FF !important; border: 1px solid #0D66FF !important; box-shadow: none !important; } [data-theme="light-ether"] .btn[style*="transparent"]:hover { background: rgba(13, 102, 255, 0.1) !important; color: #0055CC !important; border-color: #0055CC !important; } /* ======================================= GLOBAL RESET & ACCESSIBILITY ======================================= */ /* Smooth scrolling with reduced-motion respect */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Reduced motion - disable all animations for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } html, body { height: 100%; height: 100dvh; /* Dynamic viewport height - adapts when mobile browser bar hides/shows */ margin: 0; padding: 0; overflow: hidden; /* Prevent body scroll, handle in columns */ } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-feature-settings: 'tnum', 'cv05'; background-color: var(--bg-body); color: var(--text-main); font-size: var(--text-base); line-height: 1.6; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ======================================= FOCUS MANAGEMENT - Accessibility ======================================= */ /* Modern focus-visible support */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: var(--focus-ring-offset, 2px); border-radius: var(--radius-sm); } /* Specific focus styles for interactive elements */ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-ring-color); } /* Skip to main content link (screen reader) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only-focusable:focus, .sr-only-focusable:active { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* ======================================= UTILITY CLASSES ======================================= */ /* ======================================= PERFORMANCE OPTIMIZATIONS (MAJOR FIX) ======================================= */ /* GPU-accelerated scrolling containers */ #posts-container { contain: content; /* Isolate paint/layout to improve scroll performance */ } /* Optimize elements that animate/move */ .post, .topic-card { contain: layout style; /* Prevent layout/style recalc from affecting siblings */ } /* GPU layer promotion for animated elements */ .nav-btn, .new-messages-toast, .floating-btn { will-change: transform, opacity; transform: translateZ(0); /* Force GPU layer */ } /* Skeleton loading styles */ .skeleton-post { background: var(--bg-surface); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-sm); animation: skeleton-pulse 1.5s ease-in-out infinite; } .skeleton-line { height: 1em; background: linear-gradient(90deg, var(--bg-surface-alt) 25%, var(--border-color) 50%, var(--bg-surface-alt) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: 4px; margin-bottom: 8px; } .skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface-alt); } .skeleton-name { width: 120px; } .skeleton-date { width: 60px; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* No-animation class for prepended posts */ .no-anim, .no-anim * { animation: none !important; transition: none !important; } /* ======================================= NETWORK ERROR TOAST (MODERATE FIX) ======================================= */ .network-error-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(100px); z-index: var(--z-toast, 1080); background: var(--accent-danger, #FF3B30); color: white; border-radius: var(--radius-md, 10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transition: all 0.3s var(--ease-out-expo, ease); } .network-error-toast.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .network-error-toast .toast-content { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .network-error-toast .toast-content i:first-child { font-size: 18px; } .network-error-toast .toast-message { flex: 1; font-size: 14px; font-weight: 500; } .network-error-toast button { background: rgba(255, 255, 255, 0.2); border: none; color: white; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: background 0.2s; } .network-error-toast button:hover { background: rgba(255, 255, 255, 0.3); } .network-error-toast .toast-dismiss { padding: 6px 8px; } /* Dark theme adjustments */ [data-theme="dark"] .network-error-toast, [data-theme="deep-ether"] .network-error-toast { background: #d32f2f; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } /* Visibility utilities */ .hidden { display: none !important; } .invisible { visibility: hidden !important; } .opacity-0 { opacity: 0 !important; } /* Interactive state */ .interactive { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } /* Text utilities */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* Spacing utilities */ .m-0 { margin: 0 !important; } .p-0 { padding: 0 !important; } .mt-auto { margin-top: auto !important; } .mb-auto { margin-bottom: auto !important; } /* Flex utilities */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } h1, h2, h3, h4, h5, h6 { line-height: 1.1; } a { color: var(--text-link); text-decoration: none; font-weight: 500; transition: color 0.2s; } a:hover { text-decoration: none; opacity: 0.8; } /* Online presence indicator animation */ @keyframes pulse-online { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } } /* Header (Global) */ header { background-color: var(--bg-header); border-bottom: 1px solid var(--border-color); height: 50px; flex-shrink: 0; z-index: 1000; } header .container { height: 100%; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; max-width: none; /* Full width header */ } /* Logo */ .logo a { color: var(--text-main); font-weight: 700; font-size: 16px; letter-spacing: -0.5px; display: flex; align-items: center; } /* .logo a::before { content: '🍐'; margin-right: 6px; font-size: 18px; } */ /* Navigation / User Panel */ .user-panel ul { display: flex; gap: 15px; list-style: none; margin: 0; padding: 0; align-items: center; } /* Search Bar (Header) */ .search-bar { flex-grow: 1; max-width: 300px; margin: 0 20px; position: relative; } .search-bar input { width: 100%; background: var(--input-bg); padding-left: 32px; padding-top: 6px; padding-bottom: 6px; border-radius: var(--radius-md); font-size: 13px; border: none; color: var(--text-main); } .search-bar::before { content: '🔍'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: 0.5; pointer-events: none; color: var(--text-main); } /* --- Master-Detail Layout --- */ .app-layout { display: flex; flex: 1; overflow: hidden; background: var(--bg-body); } /* Sidebar (Left) */ .sidebar { width: 320px; background: var(--bg-surface-alt); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; } .sidebar-header { padding: 10px; border-bottom: 1px solid var(--border-color); background: var(--bg-surface); } .sidebar-actions { display: flex; gap: 5px; align-items: center; } /* Sidebar Search */ #search-container { padding: 10px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); } #sidebar-search-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; color: var(--text-main); box-sizing: border-box; transition: border-color 0.2s ease, background 0.2s ease; } #sidebar-search-input:focus { outline: none; border-color: var(--accent-primary); background: var(--bg-surface); } #sidebar-topics { flex: 1; overflow-y: auto; padding: 10px; } /* Main Content (Right) */ .main-content { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--bg-body); display: flex; flex-direction: column; } .topic-container { max-width: 100%; margin: 0 auto; padding: 0 15px; width: 100%; box-sizing: border-box; } /* =================================== SIDEBAR ACTION BAR - Premium 2026 Design Glassmorphisme + Micro-interactions =================================== */ .sidebar-action-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; /* Surface moderne */ background: var(--bg-surface); border-radius: 16px; border: 1px solid var(--border-color); /* Profondeur subtile */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* Glassmorphisme */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-bottom: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Anneau de focus accessible */ .sidebar-action-bar:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(168, 197, 69, 0.15); } /* CTA Primaire - Nouveau Sujet */ .btn-create-topic { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; /* Typographie */ font-weight: 600; font-size: 14px; letter-spacing: -0.01em; /* Dégradé vivant */ background: linear-gradient(135deg, var(--accent-primary) 0%, #8EAF35 100%); color: white !important; text-decoration: none !important; /* Forme */ border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); overflow: hidden; cursor: pointer; transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.2s ease; } /* Effet Shimmer au survol */ .btn-create-topic::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); transition: left 0.5s ease; } .btn-create-topic:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(168, 197, 69, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25); filter: brightness(1.05); } .btn-create-topic:hover::after { left: 100%; } .btn-create-topic:active { transform: translateY(0) scale(0.98); } .btn-create-topic i { font-size: 12px; } /* Bouton Recherche - Ghost Style */ .sidebar-search-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; color: var(--text-muted); border: 1px solid transparent; border-radius: 12px; font-size: 15px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .sidebar-search-btn:hover { background: var(--bg-surface-alt); color: var(--text-main); border-color: var(--border-color); transform: rotate(5deg); } .sidebar-search-btn:active { transform: scale(0.92); } /* ===== Deep Ether Theme ===== */ [data-theme="deep-ether"] .sidebar-action-bar { background: rgba(20, 25, 45, 0.7); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="deep-ether"] .sidebar-action-bar:focus-within { border-color: var(--primary-azure); box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.15); } [data-theme="deep-ether"] .btn-create-topic { background: linear-gradient(135deg, var(--primary-azure) 0%, #0055CC 100%); border-color: rgba(255, 255, 255, 0.15); } [data-theme="deep-ether"] .btn-create-topic:hover { box-shadow: 0 6px 16px rgba(13, 102, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); } [data-theme="deep-ether"] .sidebar-search-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--primary-azure); border-color: rgba(13, 102, 255, 0.3); box-shadow: 0 0 15px rgba(13, 102, 255, 0.15); } /* ===== Light Ether Theme ===== */ [data-theme="light-ether"] .sidebar-action-bar { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); } [data-theme="light-ether"] .sidebar-action-bar:focus-within { border-color: var(--primary-azure); box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.1); } [data-theme="light-ether"] .btn-create-topic { background: linear-gradient(135deg, var(--primary-azure) 0%, #0055CC 100%); } [data-theme="light-ether"] .btn-create-topic:hover { box-shadow: 0 6px 12px rgba(13, 102, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3); } [data-theme="light-ether"] .sidebar-search-btn { color: #64748B; } [data-theme="light-ether"] .sidebar-search-btn:hover { background: #F1F5F9; color: var(--primary-azure); border-color: #E2E8F0; } /* ===== Mobile Compact Sidebar Action Bar ===== */ @media (max-width: 768px) { .sidebar-action-bar { padding: 3px 5px; gap: 5px; border-radius: 6px; margin-bottom: 4px; } .btn-create-topic { height: 24px; font-size: 10px; gap: 4px; border-radius: 5px; padding: 0 8px; } .btn-create-topic i { font-size: 8px; } .sidebar-search-btn { width: 24px; height: 24px; font-size: 10px; border-radius: 5px; } } /* =================================== SIDEBAR TOPICS - PREMIUM REDESIGN 2026 =================================== */ /* --- Carte de base - VERSION CONDENSÉE 2026 --- */ .topic-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 10px; padding-right: 50px; /* Espace pour le badge en haut à droite */ margin-bottom: 5px; cursor: pointer; position: relative; overflow: hidden; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; box-shadow: none; line-height: 1.3; } /* Effet au survol - subtil pour version condensée */ .topic-card:hover { background: var(--bg-surface-alt); border-color: rgba(168, 197, 69, 0.35); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .topic-card:active { transform: scale(0.99); } /* =================================== ACTIVE TOPIC - "Glow Dot" Design 2026 Point lumineux + lueur externe subtile =================================== */ .topic-card.active { background: linear-gradient(135deg, rgba(168, 197, 69, 0.06) 0%, rgba(168, 197, 69, 0.02) 100%); border-color: rgba(168, 197, 69, 0.25); box-shadow: 0 0 20px rgba(168, 197, 69, 0.12); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* Dot indicator au lieu d'une barre */ .topic-card.active::before { content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--accent-primary); border-radius: 50%; box-shadow: 0 0 8px var(--accent-primary), 0 0 16px rgba(168, 197, 69, 0.5); animation: glowPulse 2s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 8px var(--accent-primary), 0 0 16px rgba(168, 197, 69, 0.5); opacity: 1; } 50% { box-shadow: 0 0 12px var(--accent-primary), 0 0 24px rgba(168, 197, 69, 0.7); opacity: 0.9; } } /* --- GESTION DES ÉPINGLÉS (Pinned) - Fond teinté subtil --- */ .topic-card.pinned { background: linear-gradient(135deg, rgba(168, 197, 69, 0.05) 0%, transparent 100%); border-color: rgba(168, 197, 69, 0.3); } .topic-card.pinned .topic-pin-badge { color: var(--accent-primary); filter: drop-shadow(0 0 5px rgba(168, 197, 69, 0.3)); transform: rotate(45deg); display: inline-block; } /* --- GESTION DES TENDANCES (Hot) - Style gradient comme les épinglés --- */ .topic-card.hot { background: linear-gradient(135deg, rgba(255, 87, 34, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%); border-color: rgba(255, 87, 34, 0.5); box-shadow: 0 0 8px rgba(255, 87, 34, 0.1); position: relative; z-index: 1; /* Prevent shadow bleed onto card below */ } .topic-card.hot:hover { background: linear-gradient(135deg, rgba(255, 87, 34, 0.15) 0%, rgba(255, 152, 0, 0.08) 100%); border-color: rgba(255, 87, 34, 0.65); box-shadow: 0 0 12px rgba(255, 87, 34, 0.18); } /* Bump flash animation - uses outline-based flash to avoid background conflicts */ .topic-card.bump-flash { animation: bumpFlash 1s ease-out; } /* Hot topics get their own bump flash (orange) to avoid gradient/bg conflicts */ .topic-card.hot.bump-flash { animation: bumpFlashHot 1s ease-out; } @keyframes bumpFlash { 0% { box-shadow: 0 0 0 2px rgba(168, 197, 69, 0.5), 0 0 16px rgba(168, 197, 69, 0.25); } 100% { box-shadow: none; } } @keyframes bumpFlashHot { 0% { box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.5), 0 0 16px rgba(255, 87, 34, 0.25); } 100% { box-shadow: 0 0 8px rgba(255, 87, 34, 0.1); } } /* Topic Card Body - Condensé */ .topic-card-body { display: flex; flex-direction: column; gap: 3px; } /* Topic Card Header - Condensé */ .topic-card-header { display: flex; align-items: center; gap: 8px; } /* Topic Author Avatar - Mini squircle */ .topic-author-avatar { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-color); background: var(--bg-surface-alt); transition: transform 0.15s ease, border-color 0.15s ease; } .topic-card:hover .topic-author-avatar { border-color: var(--accent-primary); transform: scale(1.05); } /* Pin badge - Style moderne avec rotation */ .topic-pin-badge { flex-shrink: 0; color: var(--accent-primary); font-size: 11px; opacity: 0.9; margin-right: 3px; transition: transform 0.2s ease; } /* Topic title - Condensé (2 lignes max) */ .topic-card-title { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--text-main); flex: 1; word-wrap: break-word; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .topic-card:hover .topic-card-title { color: var(--accent-primary); } /* Participated indicator */ .topic-participated { flex-shrink: 0; color: var(--accent-primary); font-size: 9px; margin-left: 5px; vertical-align: middle; } /* Topic Card Footer - Condensé inline */ .topic-card-footer { display: flex; justify-content: flex-start; align-items: center; gap: 8px; } /* Author info - Inline condensé */ .topic-author { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; flex: 1; } .author-name { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; } /* Author role colors */ .author-name.author-admin { color: #E53935; font-weight: 600; } .author-name.author-mod { color: #43A047; font-weight: 600; } /* =================================== LAST POSTER BADGE - Dual Display Pattern Shows "→ LastPoster" badge next to author when topic is bumped Note: .topic-author base styles are defined above (lines ~964-970) =================================== */ /* Inline wrapper for author name + badge */ .author-line { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; } .author-line .author-name { flex-shrink: 1; min-width: 0; } /* Badge base style - starts hidden */ .last-poster-badge { display: inline-flex; align-items: center; gap: 4px; /* Size & spacing */ padding: 2px 8px; font-size: 11px; font-weight: 600; /* Appearance */ background: linear-gradient(135deg, rgba(168, 197, 69, 0.15) 0%, rgba(168, 197, 69, 0.08) 100%); color: var(--accent-primary); border: 1px solid rgba(168, 197, 69, 0.25); border-radius: 10px; /* Start invisible for animation */ opacity: 0; transform: translateX(-10px) scale(0.9); transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* Icon styling */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .last-poster-badge i { font-size: 9px; opacity: 0.8; } /* Badge visible state - slide in and glow */ .last-poster-badge.last-poster-badge-visible { opacity: 1; transform: translateX(0) scale(1); animation: lastPosterGlow 2s ease-in-out infinite; } @keyframes lastPosterGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(168, 197, 69, 0); border-color: rgba(168, 197, 69, 0.25); } 50% { box-shadow: 0 0 12px 2px rgba(168, 197, 69, 0.25); border-color: rgba(168, 197, 69, 0.5); } } /* Badge exit animation - fade out and shrink */ .last-poster-badge.last-poster-badge-exit { opacity: 0; transform: translateX(10px) scale(0.8); transition: opacity 0.4s ease-out, transform 0.4s ease-out; animation: none; } /* Role-specific badge colors */ .last-poster-badge.last-poster-admin { color: #E53935; background: linear-gradient(135deg, rgba(229, 57, 53, 0.12) 0%, rgba(229, 57, 53, 0.05) 100%); border-color: rgba(229, 57, 53, 0.3); } .last-poster-badge.last-poster-admin.last-poster-badge-visible { animation: lastPosterGlowAdmin 2s ease-in-out infinite; } @keyframes lastPosterGlowAdmin { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); border-color: rgba(229, 57, 53, 0.3); } 50% { box-shadow: 0 0 12px 2px rgba(229, 57, 53, 0.2); border-color: rgba(229, 57, 53, 0.5); } } .last-poster-badge.last-poster-mod { color: #43A047; background: linear-gradient(135deg, rgba(67, 160, 71, 0.12) 0%, rgba(67, 160, 71, 0.05) 100%); border-color: rgba(67, 160, 71, 0.3); } .last-poster-badge.last-poster-mod.last-poster-badge-visible { animation: lastPosterGlowMod 2s ease-in-out infinite; } @keyframes lastPosterGlowMod { 0%, 100% { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0); border-color: rgba(67, 160, 71, 0.3); } 50% { box-shadow: 0 0 12px 2px rgba(67, 160, 71, 0.2); border-color: rgba(67, 160, 71, 0.5); } } /* ===== Deep Ether Theme ===== */ [data-theme="deep-ether"] .last-poster-badge { color: var(--primary-azure); background: linear-gradient(135deg, rgba(13, 102, 255, 0.12) 0%, rgba(13, 102, 255, 0.05) 100%); border-color: rgba(13, 102, 255, 0.25); } [data-theme="deep-ether"] .last-poster-badge.last-poster-badge-visible { animation: lastPosterGlowDeep 2s ease-in-out infinite; } @keyframes lastPosterGlowDeep { 0%, 100% { box-shadow: 0 0 0 0 rgba(13, 102, 255, 0); border-color: rgba(13, 102, 255, 0.25); } 50% { box-shadow: 0 0 12px 2px rgba(13, 102, 255, 0.2); border-color: rgba(13, 102, 255, 0.5); } } /* ===== Light Ether Theme ===== */ [data-theme="light-ether"] .last-poster-badge { color: var(--primary-azure); background: linear-gradient(135deg, rgba(13, 102, 255, 0.08) 0%, rgba(13, 102, 255, 0.03) 100%); border-color: rgba(13, 102, 255, 0.2); } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { .last-poster-badge { transition: opacity 0.15s ease; transform: none; } .last-poster-badge.last-poster-badge-visible { animation: none; box-shadow: 0 0 8px 1px rgba(168, 197, 69, 0.15); } .last-poster-badge.last-poster-badge-exit { transform: none; } } .topic-date { font-size: 9px; color: var(--text-muted); opacity: 0.6; white-space: nowrap; } /* Topic stats - Position absolue haut-droite */ .topic-stats { position: absolute; top: 6px; right: 8px; flex-shrink: 0; } /* Reply count badge - Compact */ .reply-count { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; background: var(--bg-surface-alt); border-radius: 8px; font-size: 10px; font-weight: 600; color: var(--text-muted); transition: background 0.15s ease, color 0.15s ease; } .reply-count i { font-size: 8px; opacity: 0.7; } .topic-card:hover .reply-count { background: var(--accent-primary); color: white; } .topic-card:hover .reply-count i { opacity: 1; } /* Hot badge (20+ replies) - Identique aux autres au repos, illuminé au survol */ .reply-count.hot { /* État par défaut : IDENTIQUE aux autres badges (neutre) */ /* Le seul indicateur est l'icône de feu */ background: var(--bg-surface-alt); color: var(--text-muted); transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .reply-count.hot i { opacity: 0.7; color: var(--text-muted); transition: opacity 0.3s ease, color 0.3s ease; } /* Au survol de la CARTE : le badge s'illumine en orange */ .topic-card:hover .reply-count.hot { background: linear-gradient(135deg, #FF6B35 0%, #FF3B30 100%); color: white; box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4); animation: pulseHot 1.5s ease-in-out infinite; } .topic-card:hover .reply-count.hot i { opacity: 1; color: white; } @keyframes pulseHot { 0%, 100% { box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4); } 50% { box-shadow: 0 2px 12px rgba(255, 59, 48, 0.6); } } /* --- Ajustements Spécifiques Deep Ether --- */ [data-theme="deep-ether"] .topic-card { background: rgba(255, 255, 255, 0.03); /* Glassmorphism */ border-color: rgba(255, 255, 255, 0.06); } [data-theme="deep-ether"] .topic-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(13, 102, 255, 0.4); } [data-theme="deep-ether"] .topic-card:hover .topic-author-avatar { border-color: var(--primary-azure); } [data-theme="deep-ether"] .topic-card.active { background: linear-gradient(135deg, rgba(13, 102, 255, 0.08) 0%, rgba(13, 102, 255, 0.02) 100%); border-color: rgba(13, 102, 255, 0.25); box-shadow: 0 0 20px rgba(13, 102, 255, 0.15); } /* Dot Azure pour Deep Ether */ [data-theme="deep-ether"] .topic-card.active::before { background: var(--primary-azure); box-shadow: 0 0 8px var(--primary-azure), 0 0 16px rgba(13, 102, 255, 0.6); } [data-theme="deep-ether"] .topic-card.pinned .topic-pin-badge { color: var(--primary-azure); filter: drop-shadow(0 0 5px rgba(13, 102, 255, 0.4)); } [data-theme="deep-ether"] .topic-card.hot { border-left: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="deep-ether"] .topic-card:hover .reply-count:not(.hot) { background: var(--primary-azure); } /* --- Ajustements Spécifiques Light Ether --- */ [data-theme="light-ether"] .topic-card { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } [data-theme="light-ether"] .topic-card:hover { background: white; border-color: rgba(13, 102, 255, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } [data-theme="light-ether"] .topic-card:hover .topic-author-avatar { border-color: var(--primary-azure); } [data-theme="light-ether"] .topic-card.active { background: linear-gradient(135deg, rgba(13, 102, 255, 0.06) 0%, rgba(13, 102, 255, 0.02) 100%); border-color: rgba(13, 102, 255, 0.2); box-shadow: 0 0 16px rgba(13, 102, 255, 0.1); } /* Dot Azure pour Light Ether */ [data-theme="light-ether"] .topic-card.active::before { background: var(--primary-azure); box-shadow: 0 0 6px var(--primary-azure), 0 0 12px rgba(13, 102, 255, 0.5); } [data-theme="light-ether"] .topic-card:hover .reply-count:not(.hot) { background: var(--primary-azure); } /* Legacy support - hide old elements */ .topic-card-icon, .folder-yellow, .folder-red, .topic-card-content, .topic-card-meta, .meta-left, .meta-right, .meta-author, .meta-date, .meta-replies, .icon-participated { display: none; } /* =================================== MOBILE COMPACT TOPIC CARDS Ultra-compact for maximum topics visible =================================== */ @media (max-width: 768px) { /* Ultra compact card padding */ .topic-card { padding: 3px 5px; padding-right: 30px; margin-bottom: 1px; border-radius: 3px; } /* Tiny avatar */ .topic-author-avatar { width: 18px; height: 18px; border-radius: 3px; } /* Minimal header spacing */ .topic-card-header { gap: 3px; } /* Compact title */ .topic-card-title { font-size: 11px; line-height: 1.15; -webkit-line-clamp: 2; line-clamp: 2; } /* Ultra compact footer */ .topic-card-footer { gap: 3px; font-size: 8px; margin-top: 1px; } /* Smaller author info */ .topic-author-name { font-size: 8px; } .topic-date { font-size: 7px; } /* No body gap */ .topic-card-body { gap: 0; } /* Smaller reply count badge */ .reply-count { padding: 1px 3px; font-size: 8px; min-width: 20px; top: 3px; right: 3px; } /* Tiny pin badge */ .topic-pin-badge { font-size: 7px; padding: 1px 3px; } } /* Extra small screens - even more compact */ @media (max-width: 400px) { .topic-card { padding: 2px 4px; padding-right: 26px; } .topic-author-avatar { width: 16px; height: 16px; } .topic-card-title { font-size: 10px; } .topic-card-footer { font-size: 7px; } .reply-count { font-size: 7px; min-width: 18px; } } /* Topic View Styles */ .topic-header { margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 10; background-color: var(--bg-body); margin-top: 0; padding-top: 8px; } .topic-title { font-size: 32px; font-weight: 800; margin: 0 0 12px 0; color: var(--topic-title-color, var(--text-main)); text-shadow: var(--topic-title-shadow, none); letter-spacing: -0.5px; line-height: 1.2; } /* --- New Message (Card) Design - Neo-Glass --- */ .post { /* Fond semi-transparent + flou (Glassmorphism) */ background: rgba(30, 30, 40, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Bordures et Ombres douces */ border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); border-radius: 16px; /* Squircle moderne */ margin-bottom: 10px; display: flex; flex-direction: column; overflow: visible; /* Pour les badges qui dépassent */ scroll-margin-top: 180px; /* Transition pour le hover */ transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease, box-shadow 0.2s ease; /* --- FIX CRITIQUE SCROLL --- */ /* SUPPRIMÉ: content-visibility: auto; et contain-intrinsic-size - faussaient les calculs de hauteur */ /* À LA PLACE, optimisation sûre : */ contain: layout style; overflow: visible; /* Assure que la hauteur est calculable immédiatement */ } /* Supprimer la marge du dernier post pour coller à la zone de reply */ .post:last-child, #posts-container>.post:last-child { margin-bottom: 0; } /* Effet de survol subtil (Desktop uniquement) */ @media (hover: hover) { .post:hover { background: rgba(40, 40, 55, 0.8); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } } /* Entry animation for posts */ @keyframes slideIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Animation for real-time new messages (socket) */ @keyframes slideUpFade { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .post-enter-active { animation: slideUpFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; border-left: 3px solid var(--accent-primary); /* Marqueur visuel temporaire */ } /* Shimmer animation for loading skeletons */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } /* Consecutive posts from the same author */ .post.consecutive-post { margin-top: -14px; /* Overlap with previous post */ border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .post.consecutive-post .post-header-row { display: none; /* Hide the header for consecutive posts */ } /* Exception: Show post-actions for staff-moderated consecutive posts */ .post.consecutive-post.staff-moderated .post-header-row { display: flex; justify-content: flex-end; padding: 4px 0; margin-bottom: 0; } .post.consecutive-post.staff-moderated .post-header-row .post-author-info { display: none; } .post.consecutive-post .post-content { padding-top: 10px; /* Less top padding since no header */ border-top: 1px dashed var(--border-color); } /* The post before a consecutive one should have no bottom radius */ .post.has-consecutive-next { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .post.highlight { animation: highlight 2s ease-out; } @keyframes highlight { 0% { background-color: rgba(168, 197, 69, 0.2); } 100% { background-color: transparent; } } /* Note: Les règles overflow-anchor sont définies dans la section "FIX SCROLL INFINI BIDIRECTIONNEL" à la fin du fichier */ /* Skeleton loading posts with shimmer effect */ .skeleton-post { background: var(--bg-surface); border-radius: 16px; padding: 20px; height: 140px; margin-bottom: 16px; } .skeleton-line, .skeleton-avatar { background: #2a2a2e; background-image: linear-gradient(to right, #2a2a2e 0%, #3a3a3e 20%, #2a2a2e 40%, #2a2a2e 100%); background-repeat: no-repeat; background-size: 1000px 100%; animation: shimmer 2s infinite linear forwards; border-radius: 6px; } .skeleton-avatar { width: 32px; height: 32px; border-radius: var(--radius-squircle); } .skeleton-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .skeleton-meta { display: flex; flex-direction: column; gap: 6px; } .skeleton-name { width: 100px; height: 14px; } .skeleton-date { width: 60px; height: 10px; } .skeleton-content .skeleton-line { height: 12px; margin-bottom: 8px; } /* Post Header (Avatar + Info + Date) */ .post-header-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: transparent; /* Neo-Glass: header transparent */ border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 13px; flex-wrap: wrap; gap: 8px; } .post-author-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .author-avatar-small { width: 32px; height: 32px; border-radius: var(--radius-squircle); /* Ni rond, ni carré - moderne */ object-fit: cover; border: 1px solid var(--border-color); flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .author-avatar-small:hover { transform: scale(1.1) rotate(5deg); /* Feedback ludique */ } .author-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .author-username { font-weight: 700; color: var(--text-main); font-size: 14px; } .author-stats { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 3px; background: transparent; padding: 0; margin-left: 5px; } /* Level badge used by template */ .author-level-badge { position: relative; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .author-level-badge svg { position: absolute; top: 0; left: 0; } .author-level-badge .level-text { position: relative; color: white; font-size: 9px; font-weight: bold; z-index: 1; } .post-date { color: var(--text-muted); font-size: 12px; white-space: nowrap; } .post-actions { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 5px; } /* Mobile adjustments for posts */ @media (max-width: 768px) { .post-header-row { padding: 8px 12px; gap: 5px; } .post-date { font-size: 11px; } .post-actions { margin-left: 0; } /* Show only 2 clans on mobile */ .author-clans a:nth-child(n+3) { display: none !important; } .author-avatar-small { width: 28px; height: 28px; } .author-username { font-size: 13px; } } /* Post Content */ .post-content { padding: 12px 20px 16px; color: var(--post-content-color, var(--text-main)); font-size: 17px; line-height: 1.75; letter-spacing: 0.2px; /* Préserve les sauts de ligne (\n) même sans balise
*/ white-space: pre-wrap; overflow-wrap: break-word; } .post-content img { max-width: 100%; border-radius: var(--radius-sm); cursor: zoom-in; } .post-content blockquote { margin: 10px 0; padding: 10px 15px; background: var(--quote-bg); border-left: 3px solid var(--quote-border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; font-size: 14px; color: var(--text-main); } .quote-jump-link { font-size: 0.8em; margin-left: 5px; opacity: 0.6; text-decoration: none; cursor: pointer; } .quote-jump-link:hover { opacity: 1; } .post-signature { margin: 0 20px 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); color: var(--text-muted); font-size: 12px; } /* Buttons */ .btn, button, .btn-new { background-color: var(--accent-primary); color: #fff; border: none; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .btn:hover, button:hover, .btn-new:hover { background-color: var(--accent-secondary); color: white; } .filter-btn { background: transparent; color: var(--text-muted); box-shadow: none; border: 1px solid transparent; } .filter-btn:hover { background: rgba(128, 128, 128, 0.1); color: var(--text-main); } .filter-btn.active { background: var(--bg-surface); color: var(--accent-primary); border-color: var(--border-color); box-shadow: var(--shadow-card); } .btn-new { font-size: 18px; padding: 0; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; } /* Forms */ .reply-form { background: var(--bg-surface); padding: 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-card); margin-top: 20px; border: 1px solid var(--border-color); } .editor-toolbar { background: var(--bg-surface-alt); padding: 8px; border: 1px solid var(--border-color); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; display: flex; gap: 5px; } textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 12px; font-family: inherit; font-size: 14px; box-sizing: border-box; resize: vertical; min-height: 100px; color: var(--text-main); } textarea:focus { outline: none; border-color: var(--accent-primary); background: var(--bg-surface); } /* Empty State */ .empty-state { display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-align: center; } .empty-message h2 { color: var(--text-main); margin-bottom: 10px; } /* Mobile Responsiveness (Switch View) */ @media (max-width: 768px) { .app-layout { flex-direction: column; overflow: hidden; /* Prevent body scroll, handle inside components */ } body { height: 100%; overflow: hidden; } @media (max-width: 768px) { html, body { overflow-y: auto; /* Enable native scroll on mobile for pull-to-refresh */ } } /* By default (Sidebar Mode), hide content, show sidebar full */ .sidebar { width: 100%; height: 100%; border-right: none; display: flex; z-index: 10; } .main-content { display: none; width: 100%; height: 100%; } /* When Content Mode is active */ body.mobile-view-content .sidebar { display: none; } body.mobile-view-content .main-content { display: flex; } .sidebar-resizer { display: none; } } /* Mobile Navigation Bar (Back Button) */ #mobile-nav-bar { display: none; /* Hidden by default (desktop) */ } @media (max-width: 768px) { #mobile-nav-bar { display: flex !important; padding: 10px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); align-items: center; gap: 10px; flex-shrink: 0; position: sticky; top: 0; z-index: 100; } /* Hide mobile-nav-bar on full-content pages (like logs-stats, profile, etc.) */ /* These pages use the global header for navigation */ .full-content-page #mobile-nav-bar { display: none !important; } /* Adjust Main Content to not hide under nav if needed, but since it's flex column, it should just stack */ .main-content { flex-direction: column; height: auto !important; /* Allow body scroll */ overflow: visible !important; /* Allow body scroll */ } /* Tweaks for topic header to sit below mobile nav - ONLY FOR TOPICS */ .topic-layout .topic-header { top: 55px; /* Sticky relative to container, below nav bar */ z-index: 90; } /* Pages without sidebar (clans, logs, messaging, team, etc.) - always show content with scroll */ .app-layout.full-content-page { overflow-y: auto !important; -webkit-overflow-scrolling: touch; height: auto; } .app-layout.full-content-page .sidebar { display: none !important; } .app-layout.full-content-page .main-content { display: flex !important; flex-direction: column; overflow-y: visible !important; -webkit-overflow-scrolling: touch; min-height: auto; height: auto; padding-bottom: 80px; /* Space for mobile nav */ } /* Remove sticky header behavior for non-topic pages on mobile */ .app-layout.full-content-page .topic-header, .app-layout.full-content-page .page-header { position: relative; top: auto; } /* Also handle pages that have no sidebar at all */ .app-layout:not(:has(.sidebar)) .main-content, .app-layout .main-content:only-child { display: flex !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* Page Container - for non-topic pages (clans, stats, admin, etc.) */ .page-container { background: var(--bg-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); width: 100%; box-sizing: border-box; } @media (max-width: 768px) { .page-container { margin: 10px auto !important; padding: 15px !important; max-width: 100% !important; border-radius: 0; } } /* --- New Styles (Appended) --- */ .post-content img { max-width: 250px; max-height: 250px; height: auto; border-radius: var(--radius-sm); cursor: pointer; object-fit: contain; } .post-content img.expanded { max-width: 100%; max-height: none; cursor: zoom-out; } /* Responsive Embeds (YouTube, Video) */ .post-content iframe, .post-content video, .post-content embed, .post-content object { max-width: 100%; height: auto; /* Allow height to adjust if aspect ratio is handled */ border-radius: var(--radius-sm); } /* Fix Vocaroo Height */ .post-content iframe[src*="vocaroo.com"] { height: 60px !important; width: 300px; max-width: 100%; } /* Fix Streamable Size */ .post-content iframe[src*="streamable.com"] { width: 100%; max-width: 560px; height: auto; min-height: 315px; aspect-ratio: 16 / 9; overflow-anchor: none; contain: layout style; } /* Fix YouTube Size */ .post-content iframe[src*="youtube.com"] { width: 100%; max-width: 560px; height: auto; min-height: 315px; aspect-ratio: 16 / 9; overflow-anchor: none; contain: layout style; } /* Fix SoundCloud Size */ .post-content iframe[src*="soundcloud.com"] { width: 100%; max-width: 560px; /* Height is usually controlled by the iframe attribute (166px) but max-width fixes the "too wide" issue */ } /* Optional: if you wrap videos in a container for 16:9 ratio */ .video-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .post-separator { border-top: 1px solid var(--border-color); margin: 15px 0; padding-top: 5px; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 11px; } .btn-quote-inline { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); font-size: 11px; padding: var(--space-sm) var(--space-md); min-height: 36px; min-width: 36px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn-quote-inline:hover { background: var(--bg-surface-alt); color: var(--text-main); border-color: var(--accent-primary); } .btn-quote-inline:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } @media (max-width: 768px) { .btn-quote-inline { min-height: 44px; min-width: 44px; padding: var(--space-sm); } } .quote-avatar { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-right: 5px; object-fit: cover; } /* Main Editor Content Area (Standard) */ .editor-content { min-height: 300px; padding: 15px; background: var(--input-bg); border: 1px solid var(--border-color); border-top: none; /* Connected to toolbar */ border-radius: 0 0 var(--radius-sm) var(--radius-sm); outline: none; color: var(--text-main); font-size: 15px; line-height: 1.6; overflow-y: auto; } .editor-content:focus { background: var(--bg-surface); border-color: var(--accent-primary); } /* Chat Mode Editor (Compact) */ .chat-editor { min-height: 40px; max-height: 150px; overflow-y: auto; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px; color: var(--text-main); font-size: 14px; outline: none; } .chat-editor:focus { background: var(--bg-surface); border-color: var(--accent-primary); } /* Notifications */ .notif-item { padding: 12px 15px; border-bottom: 1px solid var(--border-color); background: var(--bg-surface); transition: background 0.2s; font-size: 13px; display: flex; flex-direction: column; gap: 4px; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--bg-surface-alt); } .notif-item.unread { background: var(--bg-surface-alt); border-left: 3px solid var(--accent-primary); } /* In dark mode, highlight color needs to be distinct. Using bg-surface-alt is fine. */ .notif-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); } .notif-content { color: var(--text-main); } .notif-link { font-weight: 600; color: var(--text-link); } .notif-link:hover { text-decoration: underline; } /* Editor Styles */ .wysiwyg-container { border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-surface); display: flex; flex-direction: column; } .editor-toolbar { background: var(--bg-surface-alt); padding: 8px; border-bottom: 1px solid var(--border-color); display: flex; gap: 5px; flex-wrap: wrap; } .editor-content { min-height: 200px; padding: 15px; outline: none; overflow-y: auto; font-size: 14px; line-height: 1.5; color: var(--text-main); } .editor-content:empty:before { content: attr(placeholder); color: var(--text-muted); } .editor-btn { background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; padding: 4px 8px; font-size: 13px; color: var(--text-main); } .editor-btn:hover { background: rgba(128, 128, 128, 0.1); border-color: var(--border-color); } /* Create Topic Title Input */ #title { font-size: 18px; font-weight: 500; padding: 12px; width: 100%; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--input-bg); margin-bottom: 10px; color: var(--text-main); } /* Reply Context Block (Topic View) */ .post-reply-context { background: var(--quote-bg); /* Use quote bg for reply context */ padding: 8px 15px; border-bottom: 1px solid var(--border-color); font-size: 12px; display: flex; align-items: center; gap: 8px; color: var(--text-muted); transition: background 0.2s; } .post-reply-context:hover { background: var(--bg-surface-alt); } .reply-context-avatar { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; } .reply-context-text strong { color: var(--text-main); } .hidden-input { display: none !important; } /* Editor specific overrides */ .editor-content img { max-width: 150px; max-height: 150px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border-color); } /* Interactive Spoiler */ .spoiler { background-color: #000; color: #000; cursor: pointer; border-radius: 3px; padding: 0 4px; user-select: none; transition: background-color 0.2s ease, color 0.2s ease; } .spoiler.revealed { background-color: var(--spoiler-bg); color: var(--text-main); user-select: text; } /* === @Mention Links === */ .mention-link { display: inline; color: var(--accent-primary) !important; font-weight: 600; text-decoration: none !important; transition: color 0.2s ease, opacity 0.2s ease; cursor: pointer; } .mention-link:hover { text-decoration: underline !important; opacity: 0.85; } /* Mention tag in editor (non-editable badge) */ .mention-tag { display: inline; color: var(--accent-primary); font-weight: 600; } /* Notification Refactor */ #notif-dropdown { width: 350px; right: 0; max-height: 400px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-color); /* Added border for contrast */ } .notif-item { display: flex; flex-direction: row; /* Ensure row layout */ align-items: center; /* Center vertically */ gap: 12px; padding: 12px; border-bottom: 1px solid var(--border-color); background: var(--bg-surface); transition: background 0.1s; } .notif-item:hover { background: var(--bg-surface-alt); } .notif-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .notif-details { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; /* For truncation if needed */ } .notif-text { font-size: 13px; color: var(--text-main); line-height: 1.4; } .notif-topic-title { color: var(--text-link); font-weight: 500; } .notif-date { font-size: 11px; color: var(--text-muted); } @keyframes highlight { 0% { background-color: rgba(168, 197, 69, 0.2); } 100% { background-color: transparent; } } .highlight { animation: highlight 2s ease-out; } /* Lightbox Overlay */ #lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 2000; } #lightbox-img { max-width: 90%; max-height: 90%; border-radius: 4px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .lightbox-close { position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; cursor: pointer; background: rgba(0, 0, 0, 0.5); width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; user-select: none; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.2); } .merged-post { position: relative; /* transition for highlight */ transition: background-color 0.5s; } /* Stickers - Style Village.cx / Onche.org */ .post-content img.sticker, .editor-content img.sticker, img.sticker { height: 50px !important; width: auto !important; max-width: 200px; max-height: 60px; vertical-align: text-bottom; display: inline; margin: 0 3px; object-fit: contain; border-radius: 0 !important; cursor: default; border: none !important; box-shadow: none !important; } /* Stickers dans les signatures - plus petits */ .post-signature img.sticker { height: 30px !important; max-height: 35px; } /* Editor Sticker Picker */ .sticker-tab-btn { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 5px 10px; cursor: pointer; font-weight: 500; color: var(--text-muted); } .sticker-tab-btn:hover { color: var(--text-main); } .sticker-tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); } .sticker-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 150px; overflow-y: auto; justify-content: center; } .sticker-thumb { height: 60px; cursor: pointer; border-radius: 4px; border: 1px solid var(--border-color); /* use var */ transition: transform 0.1s; } .sticker-thumb:hover { transform: scale(1.05); } .sticker-star { position: absolute; top: 2px; right: 2px; color: #ccc; font-size: 12px; cursor: pointer; text-shadow: 0 0 2px black; opacity: 0.5; transition: opacity 0.2s; } .sticker-star:hover { opacity: 1; } .sticker-star.active { color: gold; opacity: 1; } /* Context Menu */ .context-menu { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); padding: 5px 0; min-width: 150px; color: var(--text-main); z-index: 10000; flex-direction: column; } .context-item { padding: 8px 15px; cursor: pointer; font-size: 13px; transition: background 0.2s; } .context-item:hover { background: var(--bg-surface-alt); } .context-item.text-danger { color: var(--accent-danger); } .context-item.text-danger:hover { background: rgba(239, 83, 80, 0.1); } .separator { height: 1px; background: var(--border-color); margin: 4px 0; } /* Floating Navigation */ .floating-nav { position: fixed; bottom: 100px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 9990; pointer-events: auto; } /* Base nav button styling - Modern glassmorphism */ .nav-btn { position: fixed; width: 44px; height: 44px; border-radius: 12px; /* Liquid Glass Effect */ background: rgba(20, 25, 45, 0.6); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05); color: var(--text-muted); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); outline: none; z-index: 10000; opacity: 0.8; } /* Top button (scroll to top) - positioned at TOP right of screen */ .nav-btn-top { top: 100px; bottom: auto; right: 20px; } /* Bottom button (scroll to bottom) - positioned above reply area */ .nav-btn-bottom { bottom: 100px; right: 20px; } /* Hover state - becomes more visible */ .nav-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); transform: scale(1.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); color: var(--text-main); } /* Active/pressed state */ .nav-btn:active { transform: scale(0.95); opacity: 1; } /* Dark theme adjustments */ [data-theme="deep-ether"] .nav-btn, [data-theme="dark"] .nav-btn { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.1); } [data-theme="deep-ether"] .nav-btn:hover, [data-theme="dark"] .nav-btn:hover { background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.25); } /* Light theme adjustments */ [data-theme="light-ether"] .nav-btn { background: rgba(255, 255, 255, 0.5); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } [data-theme="light-ether"] .nav-btn:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.15); } /* Highlight Animation (Yellow Override) */ @keyframes highlight-yellow { 0% { background-color: rgba(255, 235, 59, 0.5); } 100% { background-color: transparent; } } .highlight-yellow { animation: highlight-yellow 2s ease-out; } /* --- Moderation Logs --- */ .logs-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg-surface); } .logs-table th { text-align: left; padding: 12px 15px; background: var(--bg-surface-alt); color: var(--text-muted); font-weight: 600; border-bottom: 2px solid var(--border-color); } .logs-table td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: middle; } .logs-table tr:hover { background-color: var(--bg-surface-alt); } .mod-info { display: inline-flex; align-items: center; gap: 8px; color: var(--text-main); font-weight: 600; text-decoration: none; transition: color 0.2s; } .mod-info:hover { color: var(--accent-primary); text-decoration: none; } .mod-avatar-logs { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); } .log-icon-wrapper { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px; background: var(--bg-surface-alt); color: var(--text-muted); } /* Icon Variants */ .log-icon-ban { background: rgba(198, 40, 40, 0.1); color: #c62828; } .log-icon-unban { background: rgba(46, 125, 50, 0.1); color: #2e7d32; } .log-icon-promote { background: rgba(46, 125, 50, 0.1); color: #2e7d32; } .log-icon-demote { background: rgba(198, 40, 40, 0.1); color: #c62828; } .log-icon-delete { background: rgba(239, 83, 80, 0.1); color: #ef5350; } .log-icon-eradicate { background: #000; color: #fff; } [data-theme="dark"] .log-icon-eradicate { background: #fff; color: #000; } .log-icon-edit { background: rgba(0, 122, 255, 0.1); color: #007AFF; } .log-icon-pin { background: rgba(255, 193, 7, 0.1); color: #FFC107; } .log-icon-lock { background: rgba(255, 152, 0, 0.1); color: #FF9800; } .log-icon-password { background: rgba(0, 150, 136, 0.1); color: #009688; } .log-target-link { font-weight: 600; color: var(--text-main); } .log-target-link:hover { text-decoration: underline; } /* --- Poll Redesign --- */ .poll-card { background: var(--bg-surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 15px; margin: 15px 0; /* Changed margin to have bottom spacing */ max-width: 600px; clear: both; /* Ensure it clears floats */ display: block; /* Ensure block layout */ position: relative; /* Contain children */ } .poll-question { margin: 0 0 15px 0; font-size: 16px; color: var(--text-main); } .poll-options-container { display: flex; flex-direction: column; gap: 10px; } .poll-option-row { position: relative; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; overflow: hidden; transition: transform 0.1s; } .poll-option-row:hover { border-color: var(--border-color); } .poll-bar-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.15; pointer-events: none; } .poll-bar-fill { height: 100%; background-color: var(--accent-primary); transition: width 0.5s ease; } .poll-option-content { position: relative; z-index: 1; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .poll-label { font-size: 14px; font-weight: 500; color: var(--text-main); flex: 1; } .poll-meta { display: flex; align-items: center; gap: 12px; } .poll-avatars-preview { display: flex; align-items: center; } .poll-avatar-mini { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bg-surface); margin-left: -8px; object-fit: cover; } .poll-avatar-mini:first-child { margin-left: 0; } .poll-more-count { font-size: 10px; color: var(--text-muted); margin-left: 5px; font-weight: 600; } .poll-percent { font-size: 14px; font-weight: 700; color: var(--text-main); min-width: 40px; text-align: right; } .poll-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-muted); display: flex; align-items: center; justify-content: center; transition: all 0.2s; cursor: pointer; background: var(--bg-surface); } .poll-radio:hover { border-color: var(--accent-primary); } .poll-radio.checked { border-color: var(--accent-primary); background: var(--accent-primary); } .poll-radio-inner { width: 8px; height: 8px; border-radius: 50%; background: white; display: none; } .poll-radio.checked .poll-radio-inner { display: block; } .poll-voters-list { background: var(--bg-surface); border-top: 1px solid var(--border-color); padding: 10px; max-height: 200px; overflow-y: auto; /* Custom Scrollbar */ scrollbar-width: thin; scrollbar-color: var(--text-muted) transparent; } .poll-voters-list::-webkit-scrollbar { width: 6px; } .poll-voters-list::-webkit-scrollbar-track { background: transparent; } .poll-voters-list::-webkit-scrollbar-thumb { background-color: var(--text-muted); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } .poll-voter-item { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--text-main); } .poll-voter-item:hover { background: var(--bg-surface-alt); } .poll-avatar-small { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .poll-footer { margin-top: 10px; font-size: 12px; color: var(--text-muted); text-align: right; display: flex; justify-content: space-between; } /* --- Global Scrollbars --- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #d1d1d6; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: #aeaeb2; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #636366; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #8e8e93; } /* --- Sidebar Resizer --- */ .sidebar-resizer { width: 4px; cursor: col-resize; background-color: transparent; transition: background-color 0.2s; flex-shrink: 0; z-index: 100; /* Ensure it works with the flex layout */ height: 100%; } .sidebar-resizer:hover, .sidebar-resizer.active { background-color: var(--accent-primary); } /* --- Sidebar Menu (App Menu) --- */ .sidebar-menu-item { display: flex; align-items: center; gap: 15px; padding: 12px 15px; color: var(--text-main); font-size: 14px; font-weight: 500; text-decoration: none; border-radius: var(--radius-sm); transition: background-color 0.2s, color 0.2s; margin-bottom: 2px; } .sidebar-menu-item:hover { background-color: rgba(128, 128, 128, 0.1); color: var(--text-main); text-decoration: none; } .sidebar-menu-item i { color: var(--text-muted); transition: color 0.2s; } .sidebar-menu-item:hover i { color: var(--accent-primary); } /* --- Community Banner in Sidebar Menu --- */ .sidebar-community-banner { margin: 12px 8px 8px; border-radius: var(--radius-md); overflow: hidden; position: relative; } .sidebar-community-banner a { display: block; position: relative; text-decoration: none; border-radius: var(--radius-md); overflow: hidden; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .sidebar-community-banner a:hover { transform: scale(1.02); } .sidebar-community-banner img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); object-fit: cover; max-height: 160px; } .sidebar-community-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%); color: white; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; border-radius: 0 0 var(--radius-md) var(--radius-md); } /* User Profile Section in Sidebar */ .sidebar-user-profile { /* Sticky footer logic handled by flex parent */ box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); } .sidebar-user-profile:hover { background-color: var(--bg-surface-alt) !important; } /* Notification List in Sidebar */ #notif-list-container .notif-item:hover { background-color: rgba(128, 128, 128, 0.05); } /* --- Header Controls --- */ #header-notif-btn:hover, #header-theme-toggle:hover { background-color: rgba(128, 128, 128, 0.1) !important; border-radius: 50%; } /* Arrow Animation */ #menu-arrow { margin-left: 5px; } #menu-arrow.open { transform: rotate(-90deg); } /* Ensure notifications container in sidebar is visible when active */ #notif-list-container { transition: all 0.2s; } /* --- Notification Dropdown --- */ #notif-dropdown { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Ensure responsiveness on small screens */ width: 320px !important; max-width: 90vw; } @media (max-width: 768px) { #notif-dropdown { left: 0; /* Adjust if needed to fit screen, maybe position fixed or right-aligned if overflows */ } } /* --- Sidebar Footer --- */ .sidebar-footer { padding: 15px; border-top: 1px solid var(--border-color); background: var(--bg-surface); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; } .sidebar-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; } /* Home Icon Hover */ .sidebar-user-profile a[title="Accueil"]:hover { color: var(--accent-primary) !important; } /* Fix sidebar positioning context for absolute children (e.g. user menu) */ .sidebar { position: relative; } /* New Topic Button */ .btn-create-topic { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background-color: var(--accent-primary); color: #fff !important; border-radius: var(--radius-md); font-weight: 600; margin-bottom: 5px; box-shadow: var(--shadow-card); text-decoration: none; box-sizing: border-box; transition: background-color 0.2s; } .btn-create-topic:hover { background-color: var(--accent-secondary); color: #fff !important; text-decoration: none; } /* Fix for mobile context menu interference */ @media (max-width: 768px) { .post { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } } /* Sidebar Footer Visibility Logic */ .sidebar:not(.sidebar-menu-active) .sidebar-user-profile.logged-in { display: none !important; } /* Mobile Topic View Styles */ @media (max-width: 768px) { body.mobile-topic-view header { display: none !important; } #mobile-topic-back { display: block !important; } /* Reset sticky position since header is gone */ body.mobile-topic-view .topic-header { top: 0 !important; padding-top: 10px; padding-bottom: 5px; } body.mobile-topic-view .topic-title { font-size: 18px; /* Reduced from 24px */ line-height: 1.3; } } /* Hide mobile nav bar when in topic view */ @media (max-width: 768px) { body.mobile-topic-view #mobile-nav-bar { display: none !important; } } /* --- Chat Mode Editor (Fixed Bottom) --- */ .topic-layout { overflow: hidden !important; display: flex; flex-direction: column; } .topic-scroll-container { flex: 1; overflow-y: auto; padding-bottom: 0; display: flex; flex-direction: column; overscroll-behavior: contain; } .fixed-reply-form { background: var(--bg-surface); border-top: 1px solid var(--border-color); padding: 4px 10px 6px 10px; position: relative; z-index: 100; } .chat-input-bar { display: flex; align-items: flex-end; /* Align to bottom so textarea grows up */ gap: 6px; width: 100%; } .chat-editor-wrapper { flex: 1; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 6px 12px; min-height: 36px; /* roughly one line */ display: flex; align-items: center; } .chat-editor { width: 100%; max-height: 150px; overflow-y: auto; outline: none; font-size: 14px; line-height: 1.4; color: var(--text-main); } .chat-editor:empty:before { content: attr(placeholder); color: var(--text-muted); } .chat-actions { display: flex; gap: 4px; align-items: center; padding-bottom: 4px; /* Alignment fix if using flex-end */ } .chat-action-btn { background: transparent; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px; border-radius: 50%; transition: color 0.2s, background 0.2s; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .chat-action-btn:hover { color: var(--text-main); background: rgba(128, 128, 128, 0.1); } .chat-send-btn { background: transparent; border: none; color: var(--accent-primary); font-size: 18px; cursor: pointer; padding: 4px; padding-bottom: 4px; } .chat-send-btn:hover { color: var(--accent-secondary); } /* Picker Container (Stickers/Polls) - Above Editor */ .chat-picker-container { position: absolute; bottom: 100%; left: 0; width: 100%; background: var(--bg-surface-alt); border-top: 1px solid var(--border-color); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); display: none; /* Toggled via JS */ z-index: 99; flex-direction: column; } /* Formatting Toolbar (Below Editor or Floating) */ .chat-formatting-toolbar { margin-top: 5px; padding: 5px; display: flex; gap: 5px; justify-content: center; background: var(--bg-surface-alt); border-radius: 8px; border: 1px solid var(--border-color); /* Hidden by default, shown on selection */ display: none; } /* --- Refinements based on Feedback --- */ /* Scroll Button Position */ #scroll-bottom-btn { bottom: 130px !important; /* Above the editor bar (approx 60-70px height) */ right: 20px; z-index: 101; /* Above editor if needed */ } /* Restrict Image Size in Chat Editor (Desktop & Mobile) */ .chat-editor img { max-height: 50px !important; width: auto !important; vertical-align: middle; border-radius: 4px; cursor: default; display: inline-block; } /* Mobile Layout Adjustments */ @media (max-width: 768px) { body.mobile-topic-view .topic-title { font-size: 18px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } /* Chat Input Bar - Mobile Layout (Stacked) */ .chat-input-bar { flex-wrap: wrap !important; gap: 6px; padding: 4px; background: var(--bg-surface); /* Ensure background for the bar */ } /* Editor Wrapper - Full Width on Top */ /* Ensure box-sizing matches to prevent overflow with 100% width + padding */ .chat-editor-wrapper { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; margin-bottom: 2px !important; order: 1; box-sizing: border-box !important; } /* Actions - Below */ .chat-actions { order: 2; flex: 1; justify-content: flex-start; padding-bottom: 0; } /* Send Button - Below Right */ .chat-send-btn { order: 3; flex: 0 0 auto; padding-bottom: 0; margin-left: auto; /* Push to right */ } /* Prevent Zoom on Mobile Inputs - CRITICAL */ .chat-editor, textarea, input[type="text"] { font-size: 16px !important; } /* Ensure Fixed Editor respects Sidebar */ .fixed-reply-form { width: 100%; /* Ensure it does not overflow */ box-sizing: border-box; } } /* Deep Ether Components */ /* Prism Card */ .prism-card { border: 1px solid transparent; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 40%); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-radius: var(--radius-md); position: relative; box-shadow: var(--shadow-card); } .prism-card::before { content: ""; position: absolute; inset: -1px; border-radius: var(--radius-md); padding: 1px; background: linear-gradient(to right, var(--primary-azure), #00d4ff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .prism-card:hover { box-shadow: 0 0 15px rgba(0, 212, 255, 0.3); } .prism-card .separator { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* Button Ether (Weightless Feel) */ .btn-ether { background-color: var(--accent-primary); color: #fff; border: none; padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .btn-ether:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(10, 20, 50, 0.3); color: #fff; } /* Ripple Effect */ .btn-ether:active::after { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; background: rgba(255, 255, 255, 0.1); border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 0.4s linear; pointer-events: none; } @keyframes ripple { from { opacity: 1; transform: translate(-50%, -50%) scale(0); } to { opacity: 0; transform: translate(-50%, -50%) scale(1); } } /* Deep Ether Inputs & General Button overrides */ [data-theme="deep-ether"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="deep-ether"] textarea, [data-theme="deep-ether"] .btn, [data-theme="deep-ether"] button:not(.btn-ether):not(.filter-btn):not(.chat-action-btn):not(.header-controls button):not(.nav-btn) { transition: transform 0.2s, box-shadow 0.2s; } [data-theme="deep-ether"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="deep-ether"] textarea { background-color: var(--input-bg); color: var(--text-main); border: 1px solid var(--border-color); } [data-theme="deep-ether"] .btn:hover, [data-theme="deep-ether"] button:not(.btn-ether):not(.filter-btn):not(.chat-action-btn):not(.header-controls button):not(.nav-btn):hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(10, 20, 50, 0.4); } [data-theme="deep-ether"] input:focus, [data-theme="deep-ether"] textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(50, 100, 255, 0.2), 0 0 20px rgba(50, 100, 255, 0.15); /* Glow Ring */ border-color: transparent; } /* Gradient Text */ .gradient-text, [data-theme="deep-ether"] h1, [data-theme="deep-ether"] h2 { background: linear-gradient(to right, var(--primary-azure), #00d4ff); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } @supports not (background-clip: text) { .gradient-text, [data-theme="deep-ether"] h1, [data-theme="deep-ether"] h2 { background: none; color: var(--text-main); } } [data-theme="light-ether"] { /* Light Ether Palette - White/Blue */ --primary-azure: #0D66FF; --bg-body: #F4F6F9; --bg-surface: #FFFFFF; --bg-surface-alt: #F0F4FF; /* Very light blue tint */ --bg-header: rgba(255, 255, 255, 0.9); --border-color: #E2E8F0; --text-main: #0B1120; --text-muted: #64748B; --text-link: var(--primary-azure); --text-link-hover: #004ECB; --accent-primary: var(--primary-azure); --accent-secondary: #004ECB; --accent-danger: #FF3B30; --accent-blue: #007AFF; --quote-bg: #F8FAFC; --quote-border: var(--primary-azure); --spoiler-bg: #E2E8F0; --input-bg: #FFFFFF; --shadow-depth: 0 20px 40px -10px rgba(10, 20, 50, 0.1); --shadow-card: 0 4px 12px rgba(10, 20, 50, 0.05); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Topic & Post specific colors for light theme */ --topic-title-color: #0B1120; --topic-title-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --post-content-color: #1E293B; } @supports (color: color(display-p3 1 1 1)) { [data-theme="light-ether"] { --primary-azure: color(display-p3 0.05 0.4 1); } } /* Light Ether Component Overrides */ [data-theme="light-ether"] .prism-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%); border: 1px solid rgba(13, 102, 255, 0.1); box-shadow: 0 8px 32px rgba(13, 102, 255, 0.05); } [data-theme="light-ether"] .prism-card::before { /* Make the gradient border softer on light theme */ opacity: 0.5; } [data-theme="light-ether"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="light-ether"] textarea { background-color: var(--input-bg); color: var(--text-main); border: 1px solid var(--border-color); } [data-theme="light-ether"] input:focus, [data-theme="light-ether"] textarea:focus { box-shadow: 0 0 0 4px rgba(13, 102, 255, 0.1), 0 0 20px rgba(13, 102, 255, 0.1); border-color: var(--primary-azure); } /* Light Ether Premium Enhancements */ [data-theme="light-ether"] .post { background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.04); } [data-theme="light-ether"] .post:hover { box-shadow: 0 4px 16px rgba(13, 102, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06); border-color: rgba(13, 102, 255, 0.1); } [data-theme="light-ether"] .topic-card { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); } [data-theme="light-ether"] .topic-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(13, 102, 255, 0.04); border-color: rgba(13, 102, 255, 0.15); } [data-theme="light-ether"] .topic-card.active { background: #FFFFFF; border-color: var(--primary-azure); box-shadow: 0 0 0 1px var(--primary-azure), 0 4px 16px rgba(13, 102, 255, 0.12); } [data-theme="light-ether"] .topic-card.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--primary-azure) 0%, #00A3FF 100%); border-radius: 3px 0 0 3px; } [data-theme="light-ether"] .sidebar { background: #FAFBFC; } [data-theme="light-ether"] header { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-theme="light-ether"] .mobile-bottom-nav { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Light Ether topic card enhancements */ [data-theme="light-ether"] .topic-card:hover .reply-count { background: var(--primary-azure); color: white; box-shadow: 0 2px 8px rgba(13, 102, 255, 0.25); } [data-theme="light-ether"] .topic-card.pinned { background: linear-gradient(135deg, #FFFFFF 0%, rgba(13, 102, 255, 0.03) 100%); border-color: rgba(13, 102, 255, 0.15); } [data-theme="light-ether"] .topic-card.hot { background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 87, 34, 0.08) 100%); border-color: rgba(255, 87, 34, 0.4); box-shadow: 0 0 12px rgba(255, 87, 34, 0.1); } [data-theme="light-ether"] .topic-card.hot:hover { background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 87, 34, 0.12) 100%); border-color: rgba(255, 87, 34, 0.55); box-shadow: 0 0 18px rgba(255, 87, 34, 0.15); } [data-theme="light-ether"] .reply-count { background: #F0F4FF; color: var(--primary-azure); } [data-theme="light-ether"] .reply-count.hot { background: linear-gradient(135deg, #FF6B35 0%, #FF3B30 100%); color: white; } @media (max-width: 768px) { .topic-title { cursor: pointer; } } /* ======================================== SPA Router Styles ======================================== */ /* Transition classes */ .spa-fade-out { opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; } .spa-fade-in { opacity: 1; transform: translateY(0); animation: spaFadeIn 0.2s ease-out; } @keyframes spaFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Progress Bar */ #spa-progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary, #60a5fa), var(--accent-primary)); background-size: 200% 100%; animation: progressGlow 1.5s ease infinite; z-index: 100000; transition: width 0.15s ease, opacity 0.15s ease; pointer-events: none; box-shadow: 0 0 8px var(--accent-primary), 0 1px 4px rgba(0, 0, 0, 0.2); } @keyframes progressGlow { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } /* Ensure smooth transitions on main content */ .main-content { transition: opacity 0.2s ease-out; } /* SPA-enabled body marker */ body.spa-enabled .topic-card { cursor: pointer; } /* Highlight animation for posts (when navigating to specific post) */ .highlight-yellow { animation: highlightPulse 2s ease-out; } @keyframes highlightPulse { 0% { background-color: rgba(255, 215, 0, 0.3); box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); } 100% { background-color: transparent; box-shadow: none; } } /* Mobile back button visibility for SPA */ @media (max-width: 768px) { body.mobile-topic-view #mobile-topic-back { display: flex !important; } } /* Topic layout adjustments for SPA */ .topic-layout { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .topic-scroll-container { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } /* Note: floating-nav styles are defined earlier in this file */ /* Lightbox Overlay */ #lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 100000; cursor: zoom-out; } #lightbox-overlay img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox-close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; transition: transform 0.2s; } .lightbox-close:hover { transform: scale(1.2); } /* Reply context bar styling - hidden by default, shown via inline style */ .reply-context-bar { align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-surface-alt); border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 12px; border-left: 3px solid var(--accent-primary); } /* When visible (display: flex is set via JS) */ .reply-context-bar[style*="display: flex"] { display: flex !important; } /* Editor compact toolbar */ .editor-toolbar-compact .editor-btn { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-main); cursor: pointer; transition: all 0.2s; } .editor-toolbar-compact .editor-btn:hover { background: var(--accent-primary); color: white; border-color: var(--accent-primary); } @media (max-width: 768px) { .editor-toolbar-compact { justify-content: flex-start !important; /* Allow scroll or wrap better */ gap: 2px !important; overflow-x: auto; /* Enable horizontal scroll if needed */ max-width: 100vw; padding: 0 5px; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; /* Force single line scrollable */ } /* Hide scrollbar */ .editor-toolbar-compact::-webkit-scrollbar { display: none; } } /* Editor zone styling */ #editor-zone { min-height: 40px; max-height: 150px; overflow-y: auto; padding: 10px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm); outline: none; font-size: 14px; color: var(--text-main); transition: border-color 0.2s, box-shadow 0.2s; } #editor-zone:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.1); } #editor-zone:empty::before { content: attr(placeholder); color: var(--text-muted); pointer-events: none; } #editor-zone img { max-width: 100px; max-height: 100px; border-radius: var(--radius-sm); vertical-align: middle; } /* Toast Notifications (Pro Style) */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--bg-surface); color: var(--text-main); padding: 12px 20px; border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 12px; min-width: 250px; max-width: 350px; transform: translateX(120%); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-left: 4px solid var(--accent-primary); } .toast.show { transform: translateX(0); } .toast.error { border-left-color: var(--accent-danger); } .toast.success { border-left-color: var(--accent-success); } .toast.info { border-left-color: var(--accent-primary); } .toast-icon { font-size: 18px; } .toast.error .toast-icon { color: var(--accent-danger); } .toast.success .toast-icon { color: var(--accent-success); } .toast-content { flex: 1; } .toast-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; } .toast-message { font-size: 13px; color: var(--text-muted); } .toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0; margin-left: 8px; } .toast-close:hover { color: var(--text-main); } @media (max-width: 768px) { /* Prevent auto-zoom on mobile inputs by using 16px */ input, textarea, select, .chat-editor { font-size: 16px !important; } } /* ======================================== Upload Overlay - Modern Image Upload UI ======================================== */ .upload-overlay { position: fixed; bottom: 100px; right: 20px; z-index: 10000; max-width: 350px; width: calc(100% - 40px); max-height: 400px; overflow: hidden; animation: slideUpFade 0.3s ease; } @keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .upload-overlay-content { background: rgba(30, 30, 40, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); overflow: hidden; } [data-theme="light-ether"] .upload-overlay-content { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } .upload-overlay-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 600; font-size: 14px; color: var(--text-main); } .upload-overlay-header i { color: var(--accent-primary); font-size: 16px; } .upload-overlay-header span { flex: 1; } .upload-close-btn { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s; } .upload-close-btn:hover { color: var(--text-main); } .upload-items { max-height: 300px; overflow-y: auto; padding: 8px; } .upload-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; transition: all 0.3s ease; } .upload-item:last-child { margin-bottom: 0; } .upload-item.uploading { border-left: 3px solid var(--accent-primary); } .upload-item.success { border-left: 3px solid var(--accent-success); background: rgba(76, 175, 80, 0.1); } .upload-item.error { border-left: 3px solid var(--accent-danger); background: rgba(239, 83, 80, 0.1); } .upload-item-preview { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: rgba(0, 0, 0, 0.2); } .upload-item-preview img { width: 100%; height: 100%; object-fit: cover; } .upload-item-info { flex: 1; min-width: 0; } .upload-item-name { font-size: 13px; font-weight: 500; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; } .upload-item-status { display: flex; align-items: center; gap: 8px; } .upload-progress-bar { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; } .upload-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-primary), #66bb6a); border-radius: 2px; width: 60%; animation: progressPulse 1.5s infinite ease-in-out; } .upload-item.success .upload-progress-fill { animation: none; background: var(--accent-success); } .upload-item.error .upload-progress-fill { animation: none; background: var(--accent-danger); } @keyframes progressPulse { 0%, 100% { opacity: 1; width: 30%; } 50% { opacity: 0.7; width: 80%; } } .status-text { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .upload-item.success .status-text { color: var(--accent-success); } .upload-item.error .status-text { color: var(--accent-danger); } .upload-item-actions { display: flex; gap: 6px; flex-shrink: 0; } .upload-action-btn { width: 32px; height: 32px; border-radius: 8px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; font-size: 12px; } .upload-action-btn.cancel-btn { background: rgba(239, 83, 80, 0.15); color: var(--accent-danger); } .upload-action-btn.cancel-btn:hover { background: rgba(239, 83, 80, 0.3); } .upload-action-btn.success-btn { background: rgba(76, 175, 80, 0.2); color: var(--accent-success); cursor: default; } .upload-action-btn.retry-btn { background: rgba(255, 193, 7, 0.15); color: #ffc107; } .upload-action-btn.retry-btn:hover { background: rgba(255, 193, 7, 0.3); } .upload-action-btn.remove-btn { background: rgba(239, 83, 80, 0.15); color: var(--accent-danger); } .upload-action-btn.remove-btn:hover { background: rgba(239, 83, 80, 0.3); } /* Mobile adjustments for upload overlay */ @media (max-width: 768px) { .upload-overlay { bottom: 80px; right: 10px; left: 10px; max-width: none; width: auto; } .upload-item { padding: 8px 10px; } .upload-item-preview { width: 36px; height: 36px; } } /* =================================== SCROLL ANCHORING - Prevents jumps during prepend =================================== */ #posts-container { overflow-anchor: none; /* REMPLACEZ auto PAR none */ } #top-spacer, #bottom-spacer { overflow-anchor: none; } /* =================================== SKELETON LOADING - Modern placeholder animation =================================== */ @keyframes skeletonShimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .skeleton-post { pointer-events: none; animation: skeletonFadeIn 0.3s ease-out both; } /* Staggered entrance for skeleton posts */ .skeleton-post:nth-child(1) { animation-delay: 0ms; } .skeleton-post:nth-child(2) { animation-delay: 50ms; } .skeleton-post:nth-child(3) { animation-delay: 100ms; } .skeleton-post:nth-child(4) { animation-delay: 150ms; } .skeleton-post:nth-child(5) { animation-delay: 200ms; } @keyframes skeletonFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Smooth content reveal when real posts replace skeletons */ .post:not(.skeleton-post):not(.no-anim) { animation: postReveal 0.25s ease-out both; } @keyframes postReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Connection Status - Subtle shimmer for the thin top line */ @keyframes connShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-post .skeleton-header { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: var(--bg-surface-alt); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(90deg, var(--bg-surface-alt) 0px, rgba(255, 255, 255, 0.1) 50%, var(--bg-surface-alt) 100%); background-size: 200px 100%; animation: skeletonShimmer 1.0s infinite ease-in-out; } .skeleton-meta { display: flex; flex-direction: column; gap: 6px; flex: 1; } .skeleton-line { height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--bg-surface-alt) 0px, rgba(255, 255, 255, 0.08) 50%, var(--bg-surface-alt) 100%); background-size: 200px 100%; animation: skeletonShimmer 1.0s infinite ease-in-out; } .skeleton-name { width: 120px; height: 14px; } .skeleton-date { width: 60px; height: 10px; } .skeleton-content { display: flex; flex-direction: column; gap: 10px; padding: 15px 20px; } .skeleton-content .skeleton-line { height: 14px; } /* Dark theme skeleton adjustments */ [data-theme="dark"] .skeleton-avatar, [data-theme="dark"] .skeleton-line, [data-theme="deep-ether"] .skeleton-avatar, [data-theme="deep-ether"] .skeleton-line { background: linear-gradient(90deg, var(--bg-surface-alt) 0px, rgba(255, 255, 255, 0.05) 50%, var(--bg-surface-alt) 100%); background-size: 200px 100%; } /* =================================== LOADING OVERLAY - Improved styling =================================== */ .topic-loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: none; justify-content: center; align-items: center; } .loading-spinner-container { background: var(--bg-surface); padding: 24px 32px; border-radius: var(--radius-lg); text-align: center; color: var(--text-main); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); } .loading-spinner { width: 36px; height: 36px; border: 3px solid var(--border-color); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 12px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* =================================== MOBILE BOTTOM NAVIGATION BAR =================================== */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: var(--bg-surface); border-top: 1px solid var(--border-color); z-index: 9998; justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom, 0); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); } .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); transition: all 0.2s ease; font-size: 9px; gap: 2px; min-width: 48px; } .mobile-nav-item i { font-size: 16px; transition: transform 0.2s ease; } .mobile-nav-item:hover, .mobile-nav-item.active { color: var(--accent-primary); } .mobile-nav-item:active i { transform: scale(0.9); } /* Floating Action Button (FAB) style for new topic */ .mobile-nav-item.fab { background: var(--accent-primary); color: white; width: 52px; height: 52px; border-radius: 50%; transform: translateY(-14px); box-shadow: 0 4px 16px rgba(168, 197, 69, 0.4); padding: 0; transition: all 0.2s ease; } .mobile-nav-item.fab i { font-size: 22px; } .mobile-nav-item.fab:hover { transform: translateY(-16px); box-shadow: 0 6px 24px rgba(168, 197, 69, 0.5); } .mobile-nav-item.fab:active { transform: translateY(-12px) scale(0.95); } /* Badge for notifications/messages on mobile nav */ .mobile-nav-badge { position: absolute; top: 0; right: 4px; background: var(--accent-danger); color: white; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 6px rgba(239, 83, 80, 0.4); } /* Avatar in mobile bottom nav */ .mobile-nav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); transition: transform 0.2s ease, border-color 0.2s ease; } .mobile-nav-profile:hover .mobile-nav-avatar, .mobile-nav-profile.active .mobile-nav-avatar { border-color: var(--accent-primary); transform: scale(1.1); } /* Blue badge variant for messages */ .mobile-nav-badge-blue { background: #2196F3 !important; box-shadow: 0 2px 6px rgba(33, 150, 243, 0.4) !important; } /* Mobile Messages Dropdown */ .mobile-msg-dropdown { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25); width: 280px; max-width: 85vw; margin-bottom: 10px; z-index: 2000; overflow: hidden; } .mobile-msg-dropdown .msg-item { cursor: pointer; padding: 12px; border-bottom: 1px solid var(--border-color); display: flex; gap: 10px; align-items: center; transition: background 0.2s; } .mobile-msg-dropdown .msg-item:hover { background: var(--bg-surface-alt); } .mobile-msg-dropdown .msg-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .mobile-msg-dropdown .msg-item-name { font-size: 13px; font-weight: bold; color: var(--text-main); } .mobile-msg-dropdown .msg-item-preview { font-size: 11px; color: var(--text-muted); } /* Hide elements on mobile (show in bottom nav instead) */ @media (max-width: 768px) { .hide-on-mobile { display: none !important; } } /* Show elements only on mobile */ .show-on-mobile { display: none !important; } @media (max-width: 768px) { .show-on-mobile { display: block !important; } } /* Show mobile nav on small screens */ @media (max-width: 768px) { .mobile-bottom-nav { display: flex; } /* Hide mobile nav when in topic view - editor is already at bottom */ body.mobile-topic-view .mobile-bottom-nav, body.mobile-view-content .mobile-bottom-nav { display: none !important; } /* Adjust main content to not be hidden by bottom nav */ .main-content { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important; } /* When in topic view, less padding needed since no bottom nav */ body.mobile-topic-view .main-content, body.mobile-view-content .main-content { padding-bottom: 0 !important; } } /* Dark theme adjustments for mobile nav */ [data-theme="dark"] .mobile-bottom-nav, [data-theme="deep-ether"] .mobile-bottom-nav { background: rgba(28, 28, 30, 0.95); border-top-color: rgba(255, 255, 255, 0.1); } /* =================================== MOBILE SEARCH OVERLAY =================================== */ .mobile-search-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-main); z-index: 10001; display: flex; flex-direction: column; animation: slideUpFade 0.25s ease-out; } .mobile-search-header { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); padding-top: calc(12px + env(safe-area-inset-top, 0)); } .mobile-search-close { background: transparent; border: none; color: var(--text-main); font-size: 20px; padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mobile-search-overlay input[type="text"] { flex: 1; padding: 12px 16px; border-radius: 24px; border: 1px solid var(--border-color); background: var(--bg-surface-alt); color: var(--text-main); font-size: 16px; outline: none; } .mobile-search-overlay input[type="text"]:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(168, 197, 69, 0.15); } .mobile-search-filters { display: flex; gap: 8px; padding: 12px 15px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); overflow-x: auto; } .mobile-filter-btn { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-surface-alt); color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; } .mobile-filter-btn:hover { background: var(--bg-surface); border-color: var(--accent-primary); } .mobile-filter-btn.active { background: var(--accent-primary); color: white; border-color: var(--accent-primary); } .mobile-search-results { flex: 1; overflow-y: auto; padding: 10px; } .mobile-search-results .topic-card { margin-bottom: 8px; } .mobile-search-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--text-muted); text-align: center; } .mobile-search-empty i { font-size: 48px; margin-bottom: 16px; opacity: 0.5; } /* Button style in bottom nav (for search) */ .mobile-bottom-nav button.mobile-nav-item { background: transparent; border: none; cursor: pointer; } /* =================================== NEW MESSAGES TOAST NOTIFICATION =================================== */ .new-messages-toast { position: fixed; bottom: 150px; /* Plus haut pour éviter la zone d'écriture */ left: 50%; transform: translateX(-50%) translateY(100px); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 24px; padding: 10px 20px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 9990; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; font-weight: 500; color: var(--text-main); } .new-messages-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .new-messages-toast:hover { background: var(--bg-surface-alt); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .new-messages-toast:active { transform: translateX(-50%) scale(0.98); } .new-messages-toast i { color: var(--accent-primary); animation: bounceArrow 1s infinite; } @keyframes bounceArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* =================================== TYPING INDICATOR - Simple et discret Juste une petite écriture centrée =================================== */ #typing-indicator { color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 500; font-style: italic; text-align: center; padding: 4px 0; display: none; /* Hidden par défaut */ } #typing-indicator:empty { display: none !important; } /* Animation des points "..." */ #typing-indicator::after { content: ''; animation: typingDots 1.4s infinite; } @keyframes typingDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } } /* Mobile adjustment for toast - PLUS HAUT pour éviter la zone d'écriture */ @media (max-width: 768px) { .new-messages-toast { bottom: calc(140px + env(safe-area-inset-bottom, 0)); /* Beaucoup plus haut */ max-width: calc(100% - 40px); } } /* =================================== IMPROVED POST CARD STYLING =================================== */ .post { background: var(--bg-surface); border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); margin-bottom: 10px; display: flex; flex-direction: column; overflow: hidden; border: none; transition: transform 0.2s ease, box-shadow 0.2s ease; scroll-margin-top: 180px; } /* Subtle hover effect for posts */ .post:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } /* Post header - transparent for lighter feel */ .post-header-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.04); font-size: 13px; flex-wrap: wrap; gap: 8px; } [data-theme="dark"] .post-header-row, [data-theme="deep-ether"] .post-header-row { border-bottom-color: rgba(255, 255, 255, 0.05); } /* Squircle avatar style */ .author-avatar-small { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; border: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); flex-shrink: 0; transition: transform 0.2s ease; } .author-avatar-small:hover { transform: scale(1.05); } /* Better spacing for post content */ .post-content { padding: 14px 20px 18px; color: var(--post-content-color, var(--text-main)); font-size: 16px; line-height: 1.7; letter-spacing: 0.1px; } /* Dark theme post adjustments */ [data-theme="dark"] .post, [data-theme="deep-ether"] .post { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); } [data-theme="dark"] .post:hover, [data-theme="deep-ether"] .post:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } /* =================================== DARK THEME — Premium Enhancements (R1) =================================== */ /* Dark: Topic cards — hover glow & transitions harmonisées */ [data-theme="dark"] .topic-card { transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } [data-theme="dark"] .topic-card:hover { background: var(--bg-surface-alt); border-color: rgba(181, 212, 85, 0.3); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(181, 212, 85, 0.08); } /* Dark: Topic card pinned — gradient subtil */ [data-theme="dark"] .topic-card.pinned { background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(181, 212, 85, 0.06) 100%); border-color: rgba(181, 212, 85, 0.15); } /* Dark: Topic card active — accent bar gauche */ [data-theme="dark"] .topic-card.active { border-color: var(--accent-primary); box-shadow: 0 0 0 1px rgba(181, 212, 85, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .topic-card.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); border-radius: 3px 0 0 3px; } /* Dark: Post header — dégradé subtil comme light-ether */ [data-theme="dark"] .post-header-row { background: linear-gradient(to bottom, var(--bg-surface), rgba(44, 44, 46, 0.5)); border-bottom-color: rgba(255, 255, 255, 0.05); } /* Dark: Input focus — glow ring vert */ [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(181, 212, 85, 0.15); } /* Dark: Reply count hover illumination */ [data-theme="dark"] .topic-card:hover .reply-count { background: var(--accent-primary); color: #1D1D1F; box-shadow: 0 0 10px rgba(181, 212, 85, 0.3); } /* Dark: Scrollbar harmonisée (vert accent) */ [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--accent-primary); } /* =================================== INPUT VALIDATION UTILITIES (R5) =================================== */ /* Erreur */ input.input-error, textarea.input-error, select.input-error { border-color: var(--input-error-border) !important; background-color: var(--input-error-bg); } input.input-error:focus, textarea.input-error:focus { box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2); } /* Succès */ input.input-success, textarea.input-success, select.input-success { border-color: var(--input-success-border) !important; background-color: var(--input-success-bg); } input.input-success:focus, textarea.input-success:focus { box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2); } /* Warning */ input.input-warning, textarea.input-warning, select.input-warning { border-color: var(--input-warning-border) !important; background-color: var(--input-warning-bg); } input.input-warning:focus, textarea.input-warning:focus { box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.2); } /* Message d'aide sous l'input */ .input-help { font-size: var(--text-xs); margin-top: 4px; color: var(--text-muted); } .input-help.error { color: var(--input-error-text, var(--accent-danger)); } .input-help.success { color: var(--accent-success); } /* =================================== POST CONTENT — Max-Width Readability (R4) =================================== */ /* Longueur de ligne optimale : 65-75 caractères (Chipman Ch.6) */ .post-content { max-width: 700px; } /* =================================== FLOATING NAVIGATION BUTTONS (Scroll) =================================== */ .nav-btn { position: fixed; right: 20px; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--bg-surface); color: var(--text-main); font-size: 18px; cursor: pointer; z-index: 2000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, opacity 0.3s ease, background 0.2s ease, visibility 0.3s ease; display: flex; align-items: center; justify-content: center; opacity: 0.9; } .nav-btn:hover { background: var(--bg-surface-alt); transform: scale(1.1); } .nav-btn:active { transform: scale(0.95); } .nav-btn.hidden, .nav-btn.idle { opacity: 0; pointer-events: none; transform: scale(0.5); visibility: hidden; /* Ensure it doesn't block clicks */ } /* Mobile adjustments for nav buttons */ @media (max-width: 768px) { .nav-btn { right: 12px; width: 44px; height: 44px; font-size: 16px; /* CRITICAL: Must be above EVERYTHING (z-index: 20000) */ z-index: 20000 !important; /* Glassmorphism effect for visibility */ background: rgba(30, 30, 40, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .nav-btn:active { background: var(--accent-primary); transform: scale(0.95); } /* Scroll to bottom button - positioned above reply form and mobile nav */ #scroll-bottom-btn, .nav-btn-bottom { bottom: calc(220px + env(safe-area-inset-bottom)) !important; top: auto !important; } /* Scroll to top button - positioned at TOP of screen */ .nav-btn-top { top: calc(70px + env(safe-area-inset-top)); bottom: auto !important; } /* When editor is focused, move bottom button higher */ body.editor-focused #scroll-bottom-btn, body.editor-focused .nav-btn-bottom { bottom: calc(320px + env(safe-area-inset-bottom)) !important; } /* Make sure visible state works */ .nav-btn:not(.hidden) { opacity: 1 !important; pointer-events: auto !important; display: flex !important; } } /* =================================== SWIPE-TO-REPLY INDICATOR (Mobile) =================================== */ .swipe-reply-indicator { position: absolute; left: -50px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: var(--accent-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; opacity: 0; transition: opacity 0.15s ease; box-shadow: 0 2px 8px rgba(168, 197, 69, 0.4); z-index: 10; } .post { position: relative; /* Ensure transform doesn't clip indicator */ overflow: visible; } /* Touch feedback visual */ @media (hover: none) and (pointer: coarse) { .post:active { background: var(--bg-surface-alt); } } /* =================================== CONTEXT MENU =================================== */ .context-menu { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); min-width: 160px; overflow: hidden; z-index: 10000; flex-direction: column; } .context-item { padding: 10px 16px; cursor: pointer; font-size: 14px; color: var(--text-main); transition: background 0.15s ease; } .context-item:hover { background: var(--bg-surface-alt); } .context-item.text-danger { color: var(--accent-danger); } .context-menu .separator { height: 1px; background: var(--border-color); margin: 4px 0; } /* Mobile: Transform context menu into bottom sheet */ @media (max-width: 768px) { .context-menu { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; width: 100% !important; border-radius: 20px 20px 0 0; padding: 20px 0 calc(40px + env(safe-area-inset-bottom, 0px)) 0; background: var(--bg-surface-alt); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); min-width: unset; z-index: 10000; } /* Barre de "drag" visuelle */ .context-menu::before { content: ''; display: block; width: 40px; height: 4px; background: rgba(255, 255, 255, 0.2); margin: 0 auto 15px; border-radius: 2px; } .context-item { padding: 15px 25px; font-size: 16px; display: flex; align-items: center; gap: 10px; } .context-menu .separator { margin: 8px 0; } /* CRITICAL: Disable native iOS context menu on posts */ .post { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Re-enable text selection on post content so users can still select text */ .post-content { -webkit-user-select: text; user-select: text; } } /* =================================== ANIMATIONS =================================== */ @keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* =================================== ⭐ PREMIUM ENHANCEMENTS Professional polish & fluid animations =================================== */ /* --- Smooth Scroll Behavior --- */ html { scroll-behavior: smooth; } /* Reduced motion for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- Topic Cards: Premium Hover & Staggered Load --- */ .topic-card { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, background-color 0.2s ease; animation: cardFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards; } /* Staggered animation for topic cards */ .topic-card:nth-child(1) { animation-delay: 0ms; } .topic-card:nth-child(2) { animation-delay: 30ms; } .topic-card:nth-child(3) { animation-delay: 60ms; } .topic-card:nth-child(4) { animation-delay: 90ms; } .topic-card:nth-child(5) { animation-delay: 120ms; } .topic-card:nth-child(6) { animation-delay: 150ms; } .topic-card:nth-child(7) { animation-delay: 180ms; } .topic-card:nth-child(8) { animation-delay: 210ms; } .topic-card:nth-child(9) { animation-delay: 240ms; } .topic-card:nth-child(10) { animation-delay: 270ms; } @keyframes cardFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Enhanced topic card hover */ .topic-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); } .topic-card:active { transform: translateY(0) scale(0.99); } /* Active topic card glow effect */ .topic-card.active { box-shadow: 0 0 0 1px var(--accent-primary), 0 4px 16px rgba(168, 197, 69, 0.2), 0 8px 32px rgba(168, 197, 69, 0.1); } /* Deep Ether theme: subtle glow on active cards */ [data-theme="deep-ether"] .topic-card.active { box-shadow: 0 0 0 1px var(--primary-azure), 0 0 20px rgba(13, 102, 255, 0.15), 0 8px 32px rgba(13, 102, 255, 0.1); } /* --- Posts: Enhanced Animation & Polish --- */ .post { animation: postSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards; will-change: transform, opacity; } /* Staggered post loading */ .post:nth-child(1) { animation-delay: 0ms; } .post:nth-child(2) { animation-delay: 50ms; } .post:nth-child(3) { animation-delay: 100ms; } .post:nth-child(4) { animation-delay: 150ms; } .post:nth-child(5) { animation-delay: 200ms; } @keyframes postSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Subtle hover lift for posts */ @media (hover: hover) { .post:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08); } } /* --- Buttons: Micro-interactions --- */ .btn, button, .btn-new, .btn-create-topic, .filter-btn { position: relative; overflow: hidden; transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .btn:active, button:active, .btn-new:active, .btn-create-topic:active { transform: scale(0.97); } /* Ripple effect on click */ .btn::after, .btn-create-topic::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease; opacity: 0; pointer-events: none; } .btn:active::after, .btn-create-topic:active::after { width: 200%; height: 200%; opacity: 1; transition: width 0s, height 0s, opacity 0.4s ease; } /* Enhanced focus states for accessibility */ .btn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent-primary); } /* --- Inputs: Premium Focus Effects --- */ input:not([type="checkbox"]):not([type="radio"]), textarea, #sidebar-search-input, #editor-zone { transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, #sidebar-search-input:focus, #editor-zone:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(168, 197, 69, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08); } [data-theme="deep-ether"] input:focus, [data-theme="deep-ether"] textarea:focus { box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.2), 0 0 20px rgba(13, 102, 255, 0.1); } /* --- Skeleton Loader: Premium Shimmer --- */ @keyframes premiumShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton-avatar, .skeleton-line { background: linear-gradient(90deg, var(--bg-surface-alt) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 70%, var(--bg-surface-alt) 100%); background-size: 800px 100%; animation: premiumShimmer 1.8s infinite linear; } /* --- Links: Underline Animation --- */ a:not(.btn):not(.topic-card):not(.sidebar-menu-item):not(.mobile-nav-item) { position: relative; text-decoration: none; } a:not(.btn):not(.topic-card):not(.sidebar-menu-item):not(.mobile-nav-item)::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); } a:not(.btn):not(.topic-card):not(.sidebar-menu-item):not(.mobile-nav-item):hover::after { width: 100%; } /* --- Sidebar Menu Items: Smooth Transitions --- */ .sidebar-menu-item { transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .sidebar-menu-item:hover { transform: translateX(4px); } .sidebar-menu-item i { transition: color 0.2s ease, transform 0.2s ease; } .sidebar-menu-item:hover i { transform: scale(1.1); } /* --- Avatar Hover Effects --- */ .author-avatar-small, .mobile-nav-avatar, img[alt*="Avatar"] { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease; } .author-avatar-small:hover, img[alt*="Avatar"]:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } /* --- Floating Nav Buttons: Enhanced --- */ .nav-btn { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .nav-btn:hover { transform: scale(1.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .nav-btn:active { transform: scale(0.95); } /* --- Header & Dropdowns: Glass Effect Enhancement --- */ header { transition: backdrop-filter 0.3s ease; } #notif-dropdown, #msg-dropdown, #profile-dropdown, .mobile-msg-dropdown { animation: dropdownFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* --- Bottom Navigation: Premium Feedback --- */ .mobile-nav-item { transition: color 0.2s ease, transform 0.15s ease; } .mobile-nav-item:active { transform: scale(0.92); } .mobile-nav-item i { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-nav-item:active i { transform: scale(0.85); } /* FAB bounce on hover */ .mobile-nav-item.fab:hover { animation: fabBounce 0.4s ease; } @keyframes fabBounce { 0%, 100% { transform: translateY(-14px); } 50% { transform: translateY(-18px); } } /* --- Flash Messages: Improved Animation --- */ .flash-msg { animation: flashSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes flashSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } /* --- Loading Spinner: Smoother --- */ .loading-spinner { animation: spinSmooth 0.7s linear infinite; } @keyframes spinSmooth { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* --- Context Menu: Smooth Appearance --- */ .context-menu { animation: contextSlide 0.2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes contextSlide { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* --- Tooltips & Badges: Subtle Animations --- */ .mobile-nav-badge, #notif-badge, #msg-badge { animation: badgePop 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes badgePop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } } /* --- Image Loading: Fade In --- */ .post-content img, .author-avatar-small { opacity: 0; animation: imageLoad 0.3s ease forwards; } .post-content img[src], .author-avatar-small[src] { opacity: 1; } @keyframes imageLoad { from { opacity: 0; } to { opacity: 1; } } /* --- Highlight Effect: Refined --- */ @keyframes highlightGlow { 0% { background-color: rgba(168, 197, 69, 0.25); box-shadow: 0 0 20px rgba(168, 197, 69, 0.3); } 100% { background-color: transparent; box-shadow: none; } } .post.highlight, .highlight-yellow { animation: highlightGlow 2.5s cubic-bezier(0.4, 0, 0.2, 1); } /* --- Modal & Overlay: Premium Backdrop --- */ #welcome-modal, #lightbox-overlay, .topic-loading-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* --- Scrollbar: Smoother Appearance --- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.3); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; transition: background-color 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.5); } /* --- GPU Acceleration for Smooth Animations --- */ .topic-card, .post, .nav-btn, .btn, .sidebar-menu-item, .mobile-nav-item { backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* --- Selection Color --- */ ::selection { background: var(--accent-primary); color: white; } ::-moz-selection { background: var(--accent-primary); color: white; } /* --- Print Styles: Clean Output --- */ @media print { .sidebar, .mobile-bottom-nav, .nav-btn, header, .fixed-reply-form { display: none !important; } .main-content { width: 100% !important; padding: 0 !important; } .post { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc !important; } } /* ======================================= STICKER QUICK ACTION BAR ======================================= */ #sticker-quick-action-bar { animation: quickActionPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes quickActionPop { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } #sticker-quick-action-bar button:active { transform: scale(0.9); } /* ======================================= CONTEXT MENU OVERLAY (Mobile) ======================================= */ .context-menu-overlay { touch-action: none; } /* Stickers in posts - show pointer cursor to indicate interactivity */ .post-content .sticker { cursor: pointer; transition: transform 0.15s ease; /* Meilleur alignement des stickers avec le texte */ vertical-align: middle; } .post-content .sticker:hover { transform: scale(1.05); } .post-content .sticker:active { transform: scale(0.95); } /* ═══════════════════════════════════════════════════════════ NSFW FILTER — Blur & Click-to-Reveal for Risibank stickers ═══════════════════════════════════════════════════════════ */ .nsfw-container { position: relative; display: inline-block; cursor: pointer; border-radius: 8px; overflow: hidden; } .nsfw-container .nsfw-blur { filter: blur(25px) brightness(0.7); transition: filter 0.4s ease, transform 0.3s ease; pointer-events: none; } /* NSFW Label overlay */ .nsfw-container .nsfw-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(220, 38, 38, 0.85); color: #fff; padding: 4px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; z-index: 2; pointer-events: none; white-space: nowrap; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: opacity 0.3s ease; } /* Revealed state — user clicked to reveal */ .nsfw-container.revealed .nsfw-blur { filter: none; pointer-events: auto; } .nsfw-container.revealed .nsfw-label { opacity: 0; pointer-events: none; } /* Hover hint on blurred */ .nsfw-container:not(.revealed):hover .nsfw-blur { filter: blur(18px) brightness(0.8); } .nsfw-container:not(.revealed):hover .nsfw-label { background: rgba(220, 38, 38, 0.95); } /* Data attribute category styling variants */ .nsfw-container[data-nsfw="hard"] .nsfw-label { background: rgba(185, 28, 28, 0.9); } .nsfw-container[data-nsfw="degen"] .nsfw-label { background: rgba(146, 64, 14, 0.9); } /* Ensure context menu items have icons aligned */ .context-item { display: flex; align-items: center; } /* ======================================= PREMIUM BUTTON ENHANCEMENTS ======================================= */ /* Ripple effect for buttons */ .btn-ripple { position: relative; overflow: hidden; } .btn-ripple::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255, 255, 255, 0.3) 0%, transparent 60%); opacity: 0; transition: opacity var(--duration-normal, 250ms); pointer-events: none; } .btn-ripple:active::after { opacity: 1; transition: none; } /* Button active state feedback */ .btn:active, .editor-btn:active { transform: scale(0.97); } /* Enhanced button hover */ .btn:hover { transform: translateY(-1px); } /* ======================================= STAT CARDS - For Dashboard/Stats ======================================= */ .stat-card { flex: 1; min-width: 200px; text-align: center; padding: var(--space-lg, 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); } .stat-value { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; font-feature-settings: 'tnum' 1; color: var(--text-main); line-height: 1.2; } .stat-label { font-size: var(--text-sm, 0.8125rem); color: var(--text-muted); margin-top: var(--space-sm, 8px); text-transform: uppercase; letter-spacing: 0.05em; } /* ======================================= TOAST NOTIFICATIONS (Global) ======================================= */ .sticker-toast, .toast-notification { position: fixed; bottom: calc(20px + var(--safe-area-bottom, 0px)); left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: var(--radius-full, 24px); font-size: var(--text-sm, 0.8125rem); font-weight: 500; z-index: var(--z-toast, 10001); display: flex; align-items: center; gap: var(--space-sm, 8px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); animation: toastSlideIn 0.3s var(--ease-spring) forwards; } .toast-success { background: linear-gradient(135deg, rgba(52, 199, 89, 0.95) 0%, rgba(48, 176, 80, 0.95) 100%); color: white; } .toast-error { background: linear-gradient(135deg, rgba(255, 59, 48, 0.95) 0%, rgba(215, 40, 30, 0.95) 100%); color: white; } .toast-info { background: linear-gradient(135deg, rgba(13, 102, 255, 0.95) 0%, rgba(0, 122, 255, 0.95) 100%); color: white; } .toast-warning { background: linear-gradient(135deg, rgba(255, 149, 0, 0.95) 0%, rgba(255, 128, 0, 0.95) 100%); color: white; } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(20px); } } /* ======================================= LOADING STATES ======================================= */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border-color); border-radius: 50%; border-top-color: var(--accent-primary); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Premium shimmer skeleton */ .skeleton-shimmer { background: linear-gradient(90deg, var(--bg-surface) 0%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 80%, var(--bg-surface) 100%); background-size: 2000px 100%; animation: shimmer 2s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } /* ======================================= BADGE COMPONENTS ======================================= */ .badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; font-size: var(--text-xs, 0.75rem); font-weight: 600; border-radius: var(--radius-full, 9999px); white-space: nowrap; } .badge-primary { background: var(--accent-primary); color: white; } .badge-danger { background: var(--accent-danger); color: white; } .badge-success { background: var(--accent-success, #34C759); color: white; } .badge-info { background: var(--accent-blue); color: white; } .badge-muted { background: var(--bg-surface-alt); color: var(--text-muted); } /* ======================================= CARD HOVER EFFECTS ======================================= */ .card-hover { transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); } [data-theme="deep-ether"] .card-hover:hover { border-color: rgba(13, 102, 255, 0.3); box-shadow: 0 8px 30px rgba(13, 102, 255, 0.15); } /* ======================================= ANIMATION UTILITIES ======================================= */ .animate-fade-in { animation: fadeIn 0.3s ease forwards; } .animate-slide-up { animation: slideUp 0.4s var(--ease-spring) forwards; } .animate-scale-in { animation: scaleIn 0.3s var(--ease-spring) forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ======================================= PREMIUM SKELETON LOADERS ======================================= */ @keyframes premiumShimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-surface) 0%, rgba(255, 255, 255, 0.03) 20%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 80%, var(--bg-surface) 100%); background-size: 2000px 100%; animation: premiumShimmer 2s ease-in-out infinite; border-radius: var(--radius-sm); } .skeleton-text { height: 14px; margin-bottom: 8px; border-radius: var(--radius-sm); } .skeleton-text-sm { height: 10px; width: 60%; } .skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; } .skeleton-card { padding: var(--space-md); border-radius: var(--radius-md); min-height: 80px; } /* Light theme skeleton */ [data-theme="light-ether"] .skeleton { background: linear-gradient(90deg, var(--bg-surface-alt) 0%, rgba(0, 0, 0, 0.02) 20%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.02) 80%, var(--bg-surface-alt) 100%); background-size: 2000px 100%; } /* ======================================= BUTTON RIPPLE EFFECT ======================================= */ .btn-ripple { position: relative; overflow: hidden; } .btn-ripple::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255, 255, 255, 0.3) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .btn-ripple:active::after { opacity: 1; transition: none; } /* ======================================= STAT CARD COMPONENTS ======================================= */ .stat-card { flex: 1; min-width: 250px; text-align: center; padding: var(--space-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); } [data-theme="deep-ether"] .stat-card { background: rgba(20, 25, 45, 0.6); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.08); } [data-theme="deep-ether"] .stat-card:hover { box-shadow: 0 8px 30px rgba(13, 102, 255, 0.15); } .stat-value { font-size: clamp(32px, 5vw, 48px); font-weight: 700; font-feature-settings: "tnum" 1; line-height: 1.2; } .stat-value-primary { color: var(--accent-primary); } .stat-value-blue { color: var(--accent-blue); } .stat-value-danger { color: var(--accent-danger); } .stat-value-success { color: var(--accent-success); } .stat-label { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-sm); text-transform: uppercase; letter-spacing: 0.05em; } /* Stat grid container */ .stat-grid { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); } @media (max-width: 768px) { .stat-grid { flex-direction: column; } .stat-card { min-width: 100%; } } /* ======================================= PAGE CONTAINER UTILITY ======================================= */ .page-container { max-width: 1000px; margin: var(--space-lg) auto; padding: var(--space-md); } .page-title { margin-bottom: var(--space-lg); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-main); } /* ======================================= LEADERBOARD ROW UTILITY ======================================= */ .leaderboard-container { position: relative; display: inline-block; } .leaderboard-tooltip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: var(--bg-surface); border: 1px solid var(--border-color); padding: var(--space-md); border-radius: var(--radius-md); z-index: var(--z-tooltip); min-width: 240px; max-width: 280px; text-align: left; box-shadow: var(--shadow-floating); font-size: var(--text-sm); color: var(--text-main); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s var(--ease-spring); } .leaderboard-container:hover .leaderboard-tooltip, .leaderboard-tooltip:hover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-4px); } .leaderboard-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-color); } .leaderboard-row:last-child { border-bottom: none; } .leaderboard-user { display: flex; align-items: center; gap: var(--space-sm); } .leaderboard-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; } .leaderboard-rank { font-weight: var(--font-bold); width: 15px; } .leaderboard-count { font-weight: var(--font-bold); } /* ======================================= FORM UTILITIES ======================================= */ .form-card { background: var(--bg-surface); padding: var(--space-lg); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } [data-theme="deep-ether"] .form-card { background: rgba(20, 25, 45, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); } .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; margin-bottom: var(--space-sm); font-weight: var(--font-semibold); color: var(--text-main); } .form-input { width: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-main); font-size: var(--text-base); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .form-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring-color); } .form-textarea { min-height: 100px; resize: vertical; } /* User rank badge */ .rank-badge { font-size: 0.5em; background: #e65100; color: white; padding: 3px 6px; border-radius: var(--radius-sm); vertical-align: middle; text-transform: uppercase; font-weight: var(--font-semibold); } /* Moderation action buttons */ .mod-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); } .mod-btn { padding: var(--space-sm) var(--space-md); border: none; border-radius: var(--radius-sm); color: white; font-weight: var(--font-medium); cursor: pointer; transition: filter 0.2s, transform 0.2s; } .mod-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } .mod-btn:active { transform: translateY(0); } .mod-btn-danger { background: #d32f2f; } .mod-btn-success { background: #4caf50; } .mod-btn-warning { background: #e65100; } .mod-btn-info { background: #1976D2; } .mod-btn-muted { background: #757575; } .mod-btn-secondary { background: #607d8b; } /* ======================================= HEADER CONTROLS - Premium 2026 Refactored from inline styles ======================================= */ .header-controls { display: flex; align-items: center; gap: var(--space-md); width: 100%; } .header-logo { /* Logo à gauche, mais ne pousse plus tout à droite */ flex-shrink: 0; } .header-logo-link { cursor: pointer; display: flex; align-items: center; text-decoration: none; color: var(--text-main); transition: opacity 0.2s ease; } .header-logo-link:hover { opacity: 0.85; } .header-logo-img { height: 36px; width: auto; object-fit: cover; margin-right: var(--space-sm); border-radius: var(--radius-sm); } .header-logo-text { font-weight: 700; margin-right: 6px; } .header-menu-arrow { font-size: 12px; transition: transform 0.3s var(--ease-out-expo); color: var(--text-muted); } .header-menu-arrow.open { transform: rotate(-90deg); } .header-right-actions { display: flex; align-items: center; gap: var(--space-md); /* Poussé vers la gauche avec margin-left auto sur le logo */ margin-left: auto; margin-right: auto; /* Centrage sur desktop */ } /* Sur desktop, centrer les actions */ @media (min-width: 769px) { .header-controls { justify-content: flex-start; } .header-logo { margin-right: 40px; /* Espace entre logo et icônes */ } .header-right-actions { margin-left: 0; margin-right: auto; /* Pousse vers la gauche */ } } /* ======================================= ICON BUTTONS - Touch Friendly (44x44) ======================================= */ .icon-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; font-size: 18px; cursor: pointer; color: var(--text-main); padding: 0; border-radius: var(--radius-sm); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; position: relative; } .icon-btn:hover { background: var(--bg-surface-alt); color: var(--accent-primary); } .icon-btn:active { transform: scale(0.92); } [data-theme="deep-ether"] .icon-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--primary-azure); } /* Icon button badge */ .icon-btn-badge { position: absolute; top: 4px; right: 4px; background: var(--accent-danger); color: white; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; line-height: 16px; text-align: center; font-weight: 600; } .icon-btn-badge.blue { background: #2196F3; } .icon-btn-badge:empty, .icon-btn-badge[data-count="0"] { display: none; } /* ======================================= DROPDOWN PANELS - Animated ======================================= */ .dropdown-panel { position: absolute; top: 100%; right: 0; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); z-index: var(--z-dropdown); margin-top: var(--space-sm); max-height: 400px; overflow-y: auto; /* Animation */ opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo); } .dropdown-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .dropdown-panel-wide { width: 300px; max-width: 85vw; } .dropdown-panel-narrow { width: 200px; max-width: 85vw; } [data-theme="deep-ether"] .dropdown-panel { background: rgba(20, 25, 45, 0.95); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.1); } /* Dropdown loading state */ .dropdown-loading { padding: var(--space-md); text-align: center; color: var(--text-muted); font-size: var(--text-sm); } /* Dropdown empty state */ .dropdown-empty { padding: var(--space-md); text-align: center; color: var(--text-muted); font-size: var(--text-sm); } /* Dropdown item */ .dropdown-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); color: var(--text-main); text-decoration: none; transition: background 0.2s ease; cursor: pointer; border-bottom: 1px solid var(--border-color); } .dropdown-item:last-child { border-bottom: none; } .dropdown-item:hover { background: var(--bg-surface-alt); } .dropdown-item i { width: 20px; text-align: center; color: var(--text-muted); } /* Dropdown header */ .dropdown-header { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-color); font-weight: 600; color: var(--text-main); text-align: center; } /* Dropdown footer link */ .dropdown-footer { display: block; padding: var(--space-sm) var(--space-md); text-align: center; font-size: var(--text-sm); color: var(--accent-primary); border-top: 1px solid var(--border-color); text-decoration: none; background: var(--bg-surface-alt); } .dropdown-footer:hover { background: var(--bg-surface); } /* ======================================= TOPIC HEADER - Refactored ======================================= */ .topic-header-row { display: flex; align-items: center; gap: var(--space-sm); } .topic-header-content { flex: 1; display: flex; justify-content: space-between; align-items: center; min-width: 0; } .topic-admin-actions { display: flex; gap: var(--space-sm); align-items: center; } /* Mobile back button */ .topic-back-btn { background: transparent; border: none; padding: 0; color: var(--text-main); font-size: 18px; cursor: pointer; display: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } @media (max-width: 768px) { .topic-back-btn { display: flex; } } /* ======================================= ADMIN BUTTONS - Theme Aware ======================================= */ .btn-admin { padding: 4px 10px; font-size: var(--text-xs); font-weight: 600; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: filter 0.2s, transform 0.2s, box-shadow 0.2s; color: white; text-transform: uppercase; letter-spacing: 0.02em; } .btn-admin:hover { filter: brightness(1.1); transform: translateY(-1px); } .btn-admin:active { transform: translateY(0); } /* Pin button */ .btn-admin-pin { background: linear-gradient(135deg, #757575 0%, #616161 100%); } .btn-admin-pin.active { background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%); box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3); } /* Lock button */ .btn-admin-lock { background: linear-gradient(135deg, #757575 0%, #616161 100%); } .btn-admin-lock.active { background: linear-gradient(135deg, #F44336 0%, #D32F2F 100%); box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3); } [data-theme="deep-ether"] .btn-admin { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* ======================================= ALERT BARS - System Messages ======================================= */ .alert-bar { padding: var(--space-md); text-align: center; border-top: 1px solid; z-index: 100; font-size: var(--text-base); } .alert-bar i { margin-right: var(--space-sm); } .alert-bar-danger { background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(211, 47, 47, 0.15) 100%); color: #B71C1C; border-color: var(--accent-danger); } [data-theme="deep-ether"] .alert-bar-danger, [data-theme="dark"] .alert-bar-danger { background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(211, 47, 47, 0.25) 100%); color: #EF5350; } .alert-bar-info { background: var(--bg-surface-alt); color: var(--text-muted); border-color: var(--border-color); } .alert-bar-info a { color: var(--accent-primary); font-weight: 600; } .alert-bar strong { font-weight: 700; } /* ======================================= FLEX ROW UTILITIES ======================================= */ .flex-row { display: flex; flex-direction: row; } .flex-row-center { display: flex; align-items: center; } .flex-row-between { display: flex; justify-content: space-between; align-items: center; } .flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ======================================= FLASH MESSAGES - Refactored ======================================= */ .flash-messages-container { position: fixed; top: 60px; right: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-end; pointer-events: none; } .flash-msg { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); min-width: 250px; max-width: 450px; display: flex; align-items: center; gap: 10px; animation: flashSlideIn 0.3s var(--ease-out-expo); pointer-events: auto; font-size: var(--text-sm); line-height: 1.4; } .flash-msg i.flash-icon { font-size: 18px; flex-shrink: 0; } .flash-msg .flash-text { flex: 1; } .flash-msg .flash-dismiss { background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; padding: 2px 6px; font-size: 18px; line-height: 1; flex-shrink: 0; transition: opacity 0.2s; } .flash-msg .flash-dismiss:hover { opacity: 1; } .flash-msg-success { background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); color: #155724; border: 1px solid #c3e6cb; } .flash-msg-error { background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); color: #721c24; border: 1px solid #f5c6cb; } /* Dark theme flash messages */ [data-theme="dark"] .flash-msg-success, [data-theme="deep-ether"] .flash-msg-success { background: linear-gradient(135deg, rgba(52, 199, 89, 0.2) 0%, rgba(52, 199, 89, 0.1) 100%); color: #6ee7a0; border: 1px solid rgba(52, 199, 89, 0.3); } [data-theme="dark"] .flash-msg-error, [data-theme="deep-ether"] .flash-msg-error { background: linear-gradient(135deg, rgba(255, 59, 48, 0.2) 0%, rgba(255, 59, 48, 0.1) 100%); color: #ff8a84; border: 1px solid rgba(255, 59, 48, 0.3); } @keyframes flashSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ======================================= TOAST MANAGER — In-page notifications ======================================= */ .toast-container { position: fixed; top: 70px; right: 20px; z-index: var(--z-toast, 9500); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; max-width: 420px; } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md, 10px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); pointer-events: auto; font-size: 0.9rem; line-height: 1.4; opacity: 0; transform: translateX(100%); transition: opacity 0.3s ease, transform 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); min-width: 260px; max-width: 100%; backdrop-filter: blur(8px); } .toast-visible { opacity: 1; transform: translateX(0); } .toast-exit { animation: toastSlideOut 0.3s ease forwards; } @keyframes toastSlideOut { to { transform: translateX(120%); opacity: 0; } } .toast-icon { font-size: 18px; flex-shrink: 0; } .toast-text { flex: 1; } .toast-action { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; padding: 4px 12px; color: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; } .toast-action:hover { background: rgba(255, 255, 255, 0.3); } .toast-dismiss { background: none; border: none; color: inherit; opacity: 0.5; cursor: pointer; padding: 2px 4px; font-size: 18px; line-height: 1; flex-shrink: 0; transition: opacity 0.2s; } .toast-dismiss:hover { opacity: 1; } /* Toast type variants */ .toast-success { background: linear-gradient(135deg, rgba(52, 199, 89, 0.95), rgba(48, 180, 82, 0.95)); color: white; } .toast-error { background: linear-gradient(135deg, rgba(255, 59, 48, 0.95), rgba(220, 50, 42, 0.95)); color: white; } .toast-warning { background: linear-gradient(135deg, rgba(255, 149, 0, 0.95), rgba(230, 135, 0, 0.95)); color: white; } .toast-info { background: linear-gradient(135deg, rgba(0, 122, 255, 0.95), rgba(0, 105, 220, 0.95)); color: white; } /* Light theme — softer toasts */ [data-theme="light-ether"] .toast-success { background: linear-gradient(135deg, #d4edda, #c3e6cb); color: #155724; } [data-theme="light-ether"] .toast-error { background: linear-gradient(135deg, #f8d7da, #f5c6cb); color: #721c24; } [data-theme="light-ether"] .toast-warning { background: linear-gradient(135deg, #fff3cd, #ffeaa7); color: #856404; } [data-theme="light-ether"] .toast-info { background: linear-gradient(135deg, #cce5ff, #b8daff); color: #004085; } [data-theme="light-ether"] .toast-action { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.15); } [data-theme="light-ether"] .toast-action:hover { background: rgba(0, 0, 0, 0.12); } /* Confirm modal */ .toast-confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; } .toast-confirm-modal { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 16px); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3); padding: 28px 24px 20px; max-width: 380px; width: 100%; } .toast-confirm-text { font-size: 1rem; color: var(--text-main); line-height: 1.5; margin: 0 0 20px; text-align: center; } .toast-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; } .toast-confirm-btn { padding: 9px 20px; border-radius: var(--radius-sm, 8px); font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border-color); transition: all 0.2s ease; } .toast-confirm-cancel { background: var(--bg-surface-alt); color: var(--text-muted); } .toast-confirm-cancel:hover { background: var(--bg-surface); color: var(--text-main); } .toast-confirm-ok { background: var(--accent-primary); color: white; border-color: transparent; } .toast-confirm-ok:hover { filter: brightness(1.1); transform: translateY(-1px); } .toast-confirm-danger { background: var(--accent-danger, #dc3545); } /* Mobile toast positioning */ @media (max-width: 768px) { .toast-container { top: auto; bottom: 80px; right: 10px; left: 10px; align-items: stretch; } .toast { min-width: 0; } } /* ======================================= USER AVATAR - Header ======================================= */ .header-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; cursor: pointer; border: 2px solid var(--border-color); transition: border-color 0.2s ease, transform 0.2s ease; } .header-avatar:hover { border-color: var(--accent-primary); transform: scale(1.05); } /* ======================================= MOBILE BOTTOM NAV - Enhanced ======================================= */ .mobile-nav-item { position: relative; } .mobile-nav-item:active { transform: scale(0.92); } .mobile-nav-item.active { color: var(--accent-primary); } .mobile-nav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--accent-primary); border-radius: var(--radius-full); } [data-theme="deep-ether"] .mobile-nav-item.active { color: var(--primary-azure); } [data-theme="deep-ether"] .mobile-nav-item.active::before { background: var(--primary-azure); } /* Mobile message dropdown enhancement */ .mobile-msg-dropdown { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 280px; max-width: 90vw; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); margin-bottom: var(--space-sm); z-index: var(--z-dropdown); overflow: hidden; } [data-theme="deep-ether"] .mobile-msg-dropdown { background: rgba(20, 25, 45, 0.95); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.1); } /* Message item in dropdown */ .msg-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; transition: background 0.2s ease; border-bottom: 1px solid var(--border-color); } .msg-item:last-child { border-bottom: none; } .msg-item:hover { background: var(--bg-surface-alt); } .msg-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .msg-item-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-main); } .msg-item-preview { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ======================================= NOTIFICATION ITEM - Enhanced ======================================= */ .notif-item { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s ease; } .notif-item:hover { background: var(--bg-surface-alt); } .notif-item.unread { background: rgba(168, 197, 69, 0.05); } [data-theme="deep-ether"] .notif-item.unread { background: rgba(13, 102, 255, 0.1); } .notif-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .notif-topic-title { color: var(--text-muted); font-style: italic; } /* ======================================= LEADERBOARD - Enhanced Touch ======================================= */ .leaderboard-trigger { height: 50px; width: 50px; border-radius: 50%; object-fit: cover; cursor: pointer; border: 2px solid var(--accent-danger); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; } .leaderboard-trigger:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(244, 67, 54, 0.3); } /* Leaderboard tooltip header */ .leaderboard-tooltip-header { font-weight: 700; margin-bottom: var(--space-sm); text-align: center; color: var(--accent-danger); } .leaderboard-count { font-weight: 700; color: var(--accent-danger); } /* ======================================= PAGE ICON ACCENT ======================================= */ .page-icon { margin-right: var(--space-sm); color: var(--accent-primary); } [data-theme="deep-ether"] .page-icon { color: var(--primary-azure); } /* ======================================= RESPONSIVE DROPDOWN FIXES ======================================= */ @media (max-width: 480px) { .dropdown-panel { position: fixed !important; top: 60px !important; left: 5% !important; right: 5% !important; width: 90% !important; max-width: none !important; transform: none !important; } .dropdown-panel.open { transform: none !important; } } /* ======================================= HIDE/SHOW MOBILE UTILITIES ======================================= */ .hide-on-mobile { display: flex; } .show-on-mobile { display: none !important; } @media (max-width: 768px) { .hide-on-mobile { display: none !important; } .show-on-mobile { display: block !important; } .show-on-mobile.flex { display: flex !important; } } /* ======================================= 🎨 UI/UX PREMIUM ENHANCEMENTS 2026 Senior-level improvements for production ======================================= */ /* =================================== 1. ENHANCED CONTRAST - ACCESSIBILITY Deep Ether theme improved text-muted =================================== */ [data-theme="deep-ether"] { --text-muted: #9CA3AF; /* Improved from #8AA0C0 for better WCAG AA contrast */ } [data-theme="light-ether"] { --text-muted: #64748B; /* Slate-500 for better readability */ } /* =================================== 2. PREMIUM SKELETON LOADERS Multi-stop gradient shimmer effect =================================== */ .skeleton, .skeleton-line, .skeleton-avatar, .skeleton-post { background: linear-gradient(90deg, var(--bg-surface) 0%, var(--bg-surface) 25%, rgba(255, 255, 255, 0.08) 50%, var(--bg-surface) 75%, var(--bg-surface) 100%); background-size: 400% 100%; animation: premiumShimmer 1.8s infinite ease-in-out; } /* Note: @keyframes premiumShimmer is defined earlier in the file (line ~6044) */ /* Dark theme skeleton */ [data-theme="dark"] .skeleton, [data-theme="dark"] .skeleton-line, [data-theme="deep-ether"] .skeleton, [data-theme="deep-ether"] .skeleton-line { background: linear-gradient(90deg, var(--bg-surface-alt) 0%, var(--bg-surface-alt) 25%, rgba(255, 255, 255, 0.05) 50%, var(--bg-surface-alt) 75%, var(--bg-surface-alt) 100%); background-size: 400% 100%; } /* Skeleton avatar with proper shape */ .skeleton-avatar { border-radius: var(--radius-squircle); } .skeleton-avatar.round { border-radius: 50%; } /* Skeleton text lines */ .skeleton-text { height: 14px; border-radius: 4px; margin-bottom: 8px; } .skeleton-text.short { width: 60%; } .skeleton-text.medium { width: 80%; } .skeleton-text.full { width: 100%; } /* =================================== 3. EMPTY STATES - Premium Design For when there's no content =================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-3xl) var(--space-xl); text-align: center; min-height: 300px; } .empty-state-icon { font-size: 72px; color: var(--text-muted); opacity: 0.25; margin-bottom: var(--space-lg); } [data-theme="deep-ether"] .empty-state-icon { color: var(--primary-azure); opacity: 0.3; } .empty-state-title { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-main); margin: 0 0 var(--space-sm) 0; } .empty-state-description { font-size: var(--text-base); color: var(--text-muted); max-width: 400px; margin: 0 0 var(--space-lg) 0; line-height: 1.6; } .empty-state-action { margin-top: var(--space-md); } /* Empty state illustration animation */ .empty-state-icon i { animation: emptyStatePulse 3s ease-in-out infinite; } @keyframes emptyStatePulse { 0%, 100% { transform: scale(1); opacity: 0.25; } 50% { transform: scale(1.05); opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .empty-state-icon i { animation: none; } } /* =================================== 4. MICRO-FEEDBACK & HAPTIC TOUCHES Enhanced tactile interactions =================================== */ /* Button tactile flash */ .btn:active, .btn-primary:active, .btn-secondary:active, .btn-ripple:active { background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)); transition: background-image 0.05s ease; } /* Nav button tactile feedback */ .nav-btn:active { background: var(--accent-primary) !important; transform: scale(0.92) !important; } [data-theme="deep-ether"] .nav-btn:active { background: var(--primary-azure) !important; } /* Mobile bottom nav tactile */ .mobile-nav-item:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.1); } .mobile-nav-item:active i { color: var(--accent-primary); } [data-theme="deep-ether"] .mobile-nav-item:active i { color: var(--primary-azure); } /* Card press feedback */ .topic-card:active, .post-item:active, .stat-card:active { transform: scale(0.98); transition: transform 0.1s ease; } /* Interactive element highlight on focus */ .interactive:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* =================================== 5. PAGE TRANSITIONS - SPA Navigation Smooth entry animations for pages =================================== */ .page-enter { animation: pageEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes pageEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .page-exit { animation: pageExit 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes pageExit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* Fade transition variant */ .fade-enter { animation: fadeEnter 0.25s ease-out; } @keyframes fadeEnter { from { opacity: 0; } to { opacity: 1; } } /* Fade + Slide animation for expandable panels */ @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* =================================== 6. UTILITY CLASSES - Replace Inline Styles Standardized spacing and layout utilities =================================== */ /* Icon margins */ .icon-mr { margin-right: var(--space-sm); } .icon-mr-xs { margin-right: var(--space-xs); } .icon-mr-md { margin-right: var(--space-md); } .icon-ml { margin-left: var(--space-sm); } /* Flex utilities */ .flex-col-center { display: flex; flex-direction: column; align-items: center; } .flex-row-center { display: flex; flex-direction: row; align-items: center; } .flex-row-center.gap-md { gap: var(--space-md); } .flex-row-center.gap-sm { gap: var(--space-sm); } .flex-row-center.gap-lg { gap: var(--space-lg); } /* Fixed heights for images */ .img-height-50 { height: 50px; } .img-height-40 { height: 40px; } .img-height-32 { height: 32px; } /* Text utilities */ .text-pre-wrap { white-space: pre-wrap; } .min-height-auto { min-height: auto; } /* =================================== 7. HOME PAGE STYLES Extracted from home.ejs for consistency =================================== */ .home-hero { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: var(--space-xl); position: relative; overflow: hidden; } .home-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 20%, rgba(168, 197, 69, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(13, 102, 255, 0.06) 0%, transparent 50%); pointer-events: none; } [data-theme="deep-ether"] .home-hero::before { background: radial-gradient(ellipse at 30% 20%, rgba(13, 102, 255, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%); } .home-hero-content { text-align: center; max-width: 700px; position: relative; z-index: 1; } .home-logo-wrapper { position: relative; display: inline-block; margin-bottom: var(--space-lg); } .home-logo { width: 220px; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-floating); animation: logoFloat 4s ease-in-out infinite; object-fit: contain; } .home-logo-glow { position: absolute; inset: -20px; background: radial-gradient(circle, rgba(168, 197, 69, 0.3) 0%, transparent 70%); filter: blur(20px); animation: glowPulse 3s ease-in-out infinite; z-index: -1; } [data-theme="deep-ether"] .home-logo-glow { background: radial-gradient(circle, rgba(13, 102, 255, 0.4) 0%, transparent 70%); } @keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes glowPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .home-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin: 0 0 var(--space-md); color: var(--text-main); letter-spacing: -0.02em; line-height: 1.2; } .home-title-accent { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary, #8EAF35) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="deep-ether"] .home-title-accent { background: linear-gradient(135deg, var(--primary-azure) 0%, #00D4FF 100%); -webkit-background-clip: text; background-clip: text; } .home-subtitle { font-size: var(--text-lg); color: var(--text-muted); margin: 0 0 var(--space-xl); line-height: 1.6; } .home-stats { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-xl); } .home-stat-card { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; } .home-stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); } [data-theme="deep-ether"] .home-stat-card { background: rgba(20, 25, 45, 0.6); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.08); } .home-stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(168, 197, 69, 0.1); color: var(--accent-primary); display: flex; align-items: center; justify-content: center; font-size: 18px; } .home-stat-icon.success { background: rgba(52, 199, 89, 0.1); color: var(--accent-success); } [data-theme="deep-ether"] .home-stat-icon { background: rgba(13, 102, 255, 0.15); color: var(--primary-azure); } .home-stat-content { display: flex; flex-direction: column; text-align: left; } .home-stat-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .home-stat-value { font-size: var(--text-lg); font-weight: 700; color: var(--text-main); font-feature-settings: 'tnum' 1; } .home-stat-value.success { color: var(--accent-success); } .home-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-xl); } .home-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 600; text-decoration: none; transition: all 0.3s var(--ease-spring); cursor: pointer; } .home-btn-primary { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary, #8EAF35) 100%); color: white; box-shadow: 0 4px 15px rgba(168, 197, 69, 0.3); } .home-btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 25px rgba(168, 197, 69, 0.4); color: white; } [data-theme="deep-ether"] .home-btn-primary { background: linear-gradient(135deg, var(--primary-azure) 0%, #0055CC 100%); box-shadow: 0 4px 15px rgba(13, 102, 255, 0.3); } [data-theme="deep-ether"] .home-btn-primary:hover { box-shadow: 0 8px 25px rgba(13, 102, 255, 0.4); } .home-btn-secondary { background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); } .home-btn-secondary:hover { background: var(--bg-surface-alt); transform: translateY(-2px); } [data-theme="deep-ether"] .home-btn-secondary { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } .home-features { display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; } .home-feature { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-muted); font-size: var(--text-sm); } .home-feature i { color: var(--accent-primary); font-size: 14px; } [data-theme="deep-ether"] .home-feature i { color: var(--primary-azure); } /* Home page responsive */ @media (max-width: 768px) { .home-hero { padding: var(--space-lg); } .home-stats { flex-direction: column; align-items: center; } .home-stat-card { width: 100%; max-width: 280px; justify-content: flex-start; } .home-features { flex-direction: column; align-items: center; } } /* Home page reduced motion */ @media (prefers-reduced-motion: reduce) { .home-logo, .home-logo-glow { animation: none; } } /* =================================== 8. PROFILE PAGE ENHANCEMENTS Premium profile hero section =================================== */ .profile-hero { position: relative; padding: var(--space-2xl); background: linear-gradient(135deg, rgba(168, 197, 69, 0.08) 0%, rgba(168, 197, 69, 0.02) 100%); border-radius: var(--radius-lg); margin-bottom: var(--space-xl); overflow: hidden; } [data-theme="deep-ether"] .profile-hero { background: linear-gradient(135deg, rgba(13, 102, 255, 0.12) 0%, rgba(13, 102, 255, 0.04) 100%); } .profile-hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(168, 197, 69, 0.15) 0%, transparent 70%); filter: blur(40px); pointer-events: none; } [data-theme="deep-ether"] .profile-hero::before { background: radial-gradient(circle, rgba(13, 102, 255, 0.2) 0%, transparent 70%); } .profile-avatar-large { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--accent-primary); box-shadow: 0 8px 32px rgba(168, 197, 69, 0.25); } [data-theme="deep-ether"] .profile-avatar-large { border-color: var(--primary-azure); box-shadow: 0 8px 32px rgba(13, 102, 255, 0.25); } /* =================================== 9. STAT CARD ENHANCEMENTS For stats.ejs and dashboard =================================== */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl); } .stat-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card); text-align: center; transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; border: 1px solid var(--border-color); } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); } [data-theme="deep-ether"] .stat-card { background: rgba(20, 25, 45, 0.6); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.08); } .stat-value { font-size: var(--text-3xl); font-weight: 700; font-feature-settings: 'tnum' 1; margin-bottom: var(--space-xs); } .stat-value-primary { color: var(--accent-primary); } .stat-value-blue { color: var(--accent-blue); } .stat-value-danger { color: var(--accent-danger); } .stat-value-success { color: var(--accent-success); } [data-theme="deep-ether"] .stat-value-primary { color: var(--primary-azure); } .stat-label { font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* =================================== 10. LEADERBOARD THEME OVERRIDES Deep-ether enhancements for stats.ejs =================================== */ [data-theme="deep-ether"] .leaderboard-tooltip { background: rgba(20, 25, 45, 0.95); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.1); } /* ======================================= STATS PAGE - PREMIUM 2026 REDESIGN Hero, Podium, Animations, Glassmorphism ======================================= */ /* --- Stats Hero Section --- */ .stats-hero { position: relative; padding: var(--space-2xl) var(--space-xl); margin-bottom: var(--space-xl); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(13, 102, 255, 0.15) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(244, 67, 54, 0.1) 100%); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; } .stats-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%); background-size: 200% 100%; animation: heroShimmer 8s ease-in-out infinite; } @keyframes heroShimmer { 0%, 100% { background-position: -200% 0; } 50% { background-position: 200% 0; } } .stats-hero-title { position: relative; z-index: 1; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--text-main); margin: 0 0 var(--space-sm) 0; display: flex; align-items: center; gap: var(--space-md); } .stats-hero-title i { color: var(--accent-primary); font-size: 0.9em; } .stats-hero-subtitle { position: relative; z-index: 1; color: var(--text-muted); font-size: var(--text-base); margin: 0; } .stats-hero-date { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(255, 255, 255, 0.05); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--accent-primary); margin-top: var(--space-md); } /* Deep ether theme hero */ [data-theme="deep-ether"] .stats-hero { background: linear-gradient(135deg, rgba(13, 102, 255, 0.12) 0%, rgba(139, 92, 246, 0.08) 50%, rgba(244, 67, 54, 0.06) 100%); backdrop-filter: blur(20px); } /* --- Stats Cards Premium --- */ .stats-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-2xl); } .stats-card { position: relative; padding: var(--space-xl); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-card); text-align: center; overflow: hidden; transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease, border-color 0.3s ease; /* Stagger animation */ opacity: 0; transform: translateY(30px); animation: statsCardEnter 0.6s var(--ease-spring) forwards; } .stats-card:nth-child(1) { animation-delay: 0.1s; } .stats-card:nth-child(2) { animation-delay: 0.2s; } .stats-card:nth-child(3) { animation-delay: 0.3s; } @keyframes statsCardEnter { to { opacity: 1; transform: translateY(0); } } .stats-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-elevated); } .stats-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-accent, var(--accent-primary)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; opacity: 0; transition: opacity 0.3s ease; } .stats-card:hover::before { opacity: 1; } .stats-card--primary { --card-accent: var(--accent-primary); } .stats-card--blue { --card-accent: var(--accent-blue); } .stats-card--danger { --card-accent: var(--accent-danger); } .stats-card--success { --card-accent: var(--accent-success); } /* Deep ether cards */ [data-theme="deep-ether"] .stats-card { background: rgba(20, 25, 45, 0.7); backdrop-filter: blur(16px); border-color: rgba(255, 255, 255, 0.06); } [data-theme="deep-ether"] .stats-card:hover { border-color: var(--card-accent); box-shadow: 0 12px 40px rgba(13, 102, 255, 0.15); } /* --- Card Icon --- */ .stats-card-icon { width: 56px; height: 56px; margin: 0 auto var(--space-md); display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(var(--card-accent-rgb, 13, 102, 255), 0.15) 0%, rgba(var(--card-accent-rgb, 13, 102, 255), 0.05) 100%); color: var(--card-accent, var(--accent-primary)); transition: transform 0.3s var(--ease-spring); } .stats-card:hover .stats-card-icon { transform: scale(1.1) rotate(-5deg); } .stats-card--primary .stats-card-icon { background: linear-gradient(135deg, rgba(13, 102, 255, 0.2) 0%, rgba(13, 102, 255, 0.05) 100%); color: var(--accent-primary); } .stats-card--blue .stats-card-icon { background: linear-gradient(135deg, rgba(33, 150, 243, 0.2) 0%, rgba(33, 150, 243, 0.05) 100%); color: var(--accent-blue); } .stats-card--danger .stats-card-icon { background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(244, 67, 54, 0.05) 100%); color: var(--accent-danger); } /* --- Card Value --- */ .stats-card-value { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; font-feature-settings: "tnum" 1; line-height: 1; margin-bottom: var(--space-xs); background: linear-gradient(135deg, var(--card-accent) 0%, var(--text-main) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stats-card--primary .stats-card-value { background: linear-gradient(135deg, var(--accent-primary) 0%, #60a5fa 100%); -webkit-background-clip: text; background-clip: text; } .stats-card--blue .stats-card-value { background: linear-gradient(135deg, var(--accent-blue) 0%, #38bdf8 100%); -webkit-background-clip: text; background-clip: text; } .stats-card--danger .stats-card-value { background: linear-gradient(135deg, var(--accent-danger) 0%, #fb923c 100%); -webkit-background-clip: text; background-clip: text; } /* --- Card Label --- */ .stats-card-label { font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* ======================================= STATS PODIUM - Leaderboard Premium ======================================= */ .stats-podium-section { margin-top: var(--space-xl); } .stats-podium-header { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-size: var(--text-lg); font-weight: 700; color: var(--text-main); } .stats-podium-header i { color: #FFD700; } /* Podium Container */ .stats-podium { display: flex; justify-content: center; align-items: flex-end; gap: var(--space-md); padding: var(--space-xl) var(--space-md); background: linear-gradient(180deg, transparent 0%, rgba(255, 215, 0, 0.03) 100%); border-radius: var(--radius-lg); } /* Podium Place */ .podium-place { display: flex; flex-direction: column; align-items: center; padding: var(--space-md); background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color); min-width: 100px; transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; /* Stagger animation */ opacity: 0; animation: podiumEnter 0.5s var(--ease-spring) forwards; } .podium-place:nth-child(1) { animation-delay: 0.3s; } /* 2nd place */ .podium-place:nth-child(2) { animation-delay: 0.1s; } /* 1st place */ .podium-place:nth-child(3) { animation-delay: 0.5s; } /* 3rd place */ @keyframes podiumEnter { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .podium-place:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); } /* 1st Place - Gold */ .podium-place--gold { order: 2; padding-bottom: var(--space-xl); background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, var(--bg-surface) 100%); border-color: rgba(255, 215, 0, 0.3); } .podium-place--gold:hover { box-shadow: 0 8px 30px rgba(255, 215, 0, 0.2); } /* 2nd Place - Silver */ .podium-place--silver { order: 1; } /* 3rd Place - Bronze */ .podium-place--bronze { order: 3; } [data-theme="deep-ether"] .podium-place { background: rgba(20, 25, 45, 0.8); backdrop-filter: blur(12px); } [data-theme="deep-ether"] .podium-place--gold { background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, rgba(20, 25, 45, 0.8) 100%); } /* Medal */ .podium-medal { position: relative; font-size: 2rem; margin-bottom: var(--space-sm); } .podium-place--gold .podium-medal { animation: crownFloat 3s ease-in-out infinite; } @keyframes crownFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } } /* Crown for #1 */ .podium-crown { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 1rem; animation: crownGlow 2s ease-in-out infinite; } @keyframes crownGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6)); transform: translateX(-50%) scale(1); } 50% { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)); transform: translateX(-50%) scale(1.1); } } /* Podium Avatar */ .podium-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-color); margin-bottom: var(--space-xs); transition: transform 0.3s var(--ease-spring), border-color 0.3s ease; } .podium-place--gold .podium-avatar { width: 64px; height: 64px; border-color: #FFD700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); } .podium-place--silver .podium-avatar { border-color: #C0C0C0; } .podium-place--bronze .podium-avatar { border-color: #CD7F32; } .podium-place:hover .podium-avatar { transform: scale(1.1); } /* Podium Username */ .podium-username { font-weight: 600; font-size: var(--text-sm); color: var(--text-main); margin-bottom: var(--space-xs); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Podium Count */ .podium-count { font-size: var(--text-lg); font-weight: 800; font-feature-settings: "tnum" 1; color: var(--accent-danger); } .podium-place--gold .podium-count { color: #FFD700; } /* --- Rest of leaderboard (4+) --- */ .stats-leaderboard-rest { margin-top: var(--space-lg); background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow: hidden; } .leaderboard-rest-header { padding: var(--space-sm) var(--space-md); background: var(--bg-surface-alt); font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-color); } .leaderboard-rest-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-color); transition: background 0.2s ease; } .leaderboard-rest-row:last-child { border-bottom: none; } .leaderboard-rest-row:hover { background: var(--bg-surface-alt); } .leaderboard-rest-user { display: flex; align-items: center; gap: var(--space-sm); } .leaderboard-rest-rank { font-weight: 700; color: var(--text-muted); min-width: 24px; font-feature-settings: "tnum" 1; } .leaderboard-rest-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .leaderboard-rest-name { font-weight: 500; color: var(--text-main); } .leaderboard-rest-count { font-weight: 700; color: var(--accent-danger); font-feature-settings: "tnum" 1; } [data-theme="deep-ether"] .stats-leaderboard-rest { background: rgba(20, 25, 45, 0.6); backdrop-filter: blur(12px); } /* --- Empty State for Podium --- */ .stats-empty-state { text-align: center; padding: var(--space-2xl); color: var(--text-muted); } .stats-empty-icon { font-size: 3rem; margin-bottom: var(--space-md); opacity: 0.5; } /* --- Mobile Responsive --- */ @media (max-width: 768px) { .stats-hero { padding: var(--space-lg); text-align: center; } .stats-hero-title { justify-content: center; font-size: 1.5rem; } .stats-card-grid { grid-template-columns: 1fr; } .stats-podium { flex-direction: column; align-items: center; gap: var(--space-sm); } .podium-place { order: unset !important; width: 100%; max-width: 200px; } .podium-place--gold { margin-bottom: var(--space-sm); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .stats-card, .podium-place { animation: none; opacity: 1; transform: none; } .stats-hero::before { animation: none; } .podium-place--gold .podium-medal, .podium-crown { animation: none; } } /* =================================== 11. PAGE CONTAINER & TITLE Standardized page layout =================================== */ .page-container { max-width: 1000px; margin: 0 auto; padding: var(--space-xl); } .page-title { font-size: var(--text-2xl); font-weight: 700; color: var(--text-main); margin: 0 0 var(--space-xl) 0; display: flex; align-items: center; gap: var(--space-sm); } .page-title .page-icon { color: var(--accent-primary); } [data-theme="deep-ether"] .page-title .page-icon { color: var(--primary-azure); } /* =================================== 12. FORM ENHANCEMENTS Consistent form styling =================================== */ .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-main); margin-bottom: var(--space-sm); } .form-input { width: 100%; padding: var(--space-sm) var(--space-md); background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: var(--text-base); color: var(--text-main); transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .form-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring-color); } [data-theme="deep-ether"] .form-input:focus { border-color: var(--primary-azure); box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.15); } .form-textarea { min-height: 120px; resize: vertical; } /* =================================== 13. MODERATION BUTTONS For admin/mod actions =================================== */ .mod-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .mod-btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; cursor: pointer; border: none; transition: all 0.2s ease; } .mod-btn:hover { transform: translateY(-1px); } .mod-btn:active { transform: scale(0.98); } .mod-btn-danger { background: rgba(255, 59, 48, 0.1); color: var(--accent-danger); border: 1px solid rgba(255, 59, 48, 0.3); } .mod-btn-danger:hover { background: rgba(255, 59, 48, 0.2); } .mod-btn-success { background: rgba(52, 199, 89, 0.1); color: var(--accent-success); border: 1px solid rgba(52, 199, 89, 0.3); } .mod-btn-success:hover { background: rgba(52, 199, 89, 0.2); } .mod-btn-warning { background: rgba(255, 149, 0, 0.1); color: var(--accent-warning); border: 1px solid rgba(255, 149, 0, 0.3); } .mod-btn-warning:hover { background: rgba(255, 149, 0, 0.2); } .mod-btn-info { background: rgba(0, 122, 255, 0.1); color: var(--accent-blue); border: 1px solid rgba(0, 122, 255, 0.3); } .mod-btn-info:hover { background: rgba(0, 122, 255, 0.2); } .mod-btn-muted { background: var(--bg-surface-alt); color: var(--text-muted); border: 1px solid var(--border-color); } .mod-btn-muted:hover { background: var(--bg-surface); color: var(--text-main); } .mod-btn-secondary { background: var(--bg-surface-alt); color: var(--text-main); border: 1px solid var(--border-color); } .mod-btn-secondary:hover { background: var(--bg-surface); } /* =================================== 14. RANK BADGE For user ranks/roles =================================== */ .rank-badge { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm); background: rgba(168, 197, 69, 0.1); color: var(--accent-primary); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } [data-theme="deep-ether"] .rank-badge { background: rgba(13, 102, 255, 0.15); color: var(--primary-azure); } .rank-badge.admin { background: rgba(255, 59, 48, 0.1); color: var(--accent-danger); } .rank-badge.mod { background: rgba(52, 199, 89, 0.1); color: var(--accent-success); } /* =================================== 15. POST LIST - Profile Posts For displaying user's recent posts =================================== */ .post-list { display: flex; flex-direction: column; gap: var(--space-sm); } /* =================================== PIN VAULT - Secure PIN Code System Premium randomized numpad interface =================================== */ /* Modal Overlay */ .pin-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .pin-modal-overlay.visible { opacity: 1; visibility: visible; } /* Modal Container */ .pin-modal { position: relative; background: var(--bg-surface); border-radius: var(--radius-xl, 20px); padding: var(--space-xl) var(--space-lg); width: 90%; max-width: 360px; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05); transform: scale(0.9) translateY(20px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; } .pin-modal-overlay.visible .pin-modal { transform: scale(1) translateY(0); } /* Gradient background decoration */ .pin-modal::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 180deg at 50% 50%, rgba(168, 197, 69, 0.15) 0deg, transparent 60deg, rgba(13, 102, 255, 0.1) 180deg, transparent 240deg, rgba(168, 197, 69, 0.1) 360deg); animation: pinGradientRotate 15s linear infinite; pointer-events: none; z-index: -1; } [data-theme="deep-ether"] .pin-modal::before { background: conic-gradient(from 180deg at 50% 50%, rgba(13, 102, 255, 0.2) 0deg, transparent 60deg, rgba(0, 212, 255, 0.15) 180deg, transparent 240deg, rgba(13, 102, 255, 0.15) 360deg); } @keyframes pinGradientRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Header */ .pin-modal-header { text-align: center; margin-bottom: var(--space-lg); } .pin-lock-icon { width: 72px; height: 72px; margin: 0 auto var(--space-md); background: linear-gradient(135deg, rgba(168, 197, 69, 0.15) 0%, rgba(168, 197, 69, 0.05) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-primary); box-shadow: 0 8px 32px rgba(168, 197, 69, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } [data-theme="deep-ether"] .pin-lock-icon { background: linear-gradient(135deg, rgba(13, 102, 255, 0.2) 0%, rgba(13, 102, 255, 0.05) 100%); color: var(--primary-azure); box-shadow: 0 8px 32px rgba(13, 102, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .pin-modal-title { font-size: var(--text-xl); font-weight: 700; color: var(--text-main); margin: 0 0 var(--space-xs); letter-spacing: -0.02em; } .pin-modal-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin: 0; transition: all 0.3s ease; } .pin-subtitle-confirm { color: var(--accent-primary); font-weight: 600; } [data-theme="deep-ether"] .pin-subtitle-confirm { color: var(--primary-azure); } /* PIN Dots */ .pin-dots-container { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-xl); padding: var(--space-sm) 0; } .pin-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-surface-alt); border: 2px solid var(--border-color); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .pin-dot.filled { background: var(--accent-primary); border-color: var(--accent-primary); transform: scale(1.15); box-shadow: 0 0 12px rgba(168, 197, 69, 0.5); } [data-theme="deep-ether"] .pin-dot.filled { background: var(--primary-azure); border-color: var(--primary-azure); box-shadow: 0 0 12px rgba(13, 102, 255, 0.5); } /* Shake animation for wrong PIN */ .pin-dots-container.shake { animation: pinShake 0.5s ease-in-out; } @keyframes pinShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(8px); } } /* Numpad Grid */ .pin-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); max-width: 280px; margin: 0 auto var(--space-lg); } .pin-key { aspect-ratio: 1; width: 100%; max-width: 80px; border: none; border-radius: var(--radius-lg); background: var(--bg-surface-alt); color: var(--text-main); font-size: var(--text-2xl); font-weight: 600; font-feature-settings: 'tnum' 1; cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); -webkit-tap-highlight-color: transparent; user-select: none; } .pin-key:hover { background: var(--bg-surface); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .pin-key:active, .pin-key.pressed { transform: scale(0.95); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1); } /* Reshuffling animation */ .pin-key.reshuffled { animation: pinKeyReshuffle 0.3s ease-out; } @keyframes pinKeyReshuffle { 0% { opacity: 0; transform: scale(0.8) rotateY(90deg); } 100% { opacity: 1; transform: scale(1) rotateY(0); } } /* Action keys (clear, confirm) */ .pin-key-action { background: rgba(168, 197, 69, 0.1); color: var(--accent-primary); } .pin-key-action:hover { background: rgba(168, 197, 69, 0.2); } [data-theme="deep-ether"] .pin-key-action { background: rgba(13, 102, 255, 0.15); color: var(--primary-azure); } [data-theme="deep-ether"] .pin-key-action:hover { background: rgba(13, 102, 255, 0.25); } /* Confirm button - special styling */ .pin-key-confirm { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary, #8EAF35) 100%); color: white; box-shadow: 0 4px 15px rgba(168, 197, 69, 0.3); } .pin-key-confirm:hover { box-shadow: 0 6px 20px rgba(168, 197, 69, 0.4); background: linear-gradient(135deg, #B8D74D 0%, var(--accent-primary) 100%); } .pin-key-confirm:disabled { background: var(--bg-surface-alt); color: var(--text-muted); box-shadow: none; cursor: not-allowed; opacity: 0.5; } [data-theme="deep-ether"] .pin-key-confirm { background: linear-gradient(135deg, var(--primary-azure) 0%, #0055CC 100%); box-shadow: 0 4px 15px rgba(13, 102, 255, 0.3); } [data-theme="deep-ether"] .pin-key-confirm:hover { box-shadow: 0 6px 20px rgba(13, 102, 255, 0.4); } /* Error message */ .pin-error { text-align: center; color: var(--accent-danger); font-size: var(--text-sm); font-weight: 500; min-height: 20px; margin-bottom: var(--space-sm); opacity: 0; transform: translateY(-5px); transition: all 0.3s ease; } .pin-error.visible { opacity: 1; transform: translateY(0); } /* Modal Footer */ .pin-modal-footer { display: flex; justify-content: center; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding-top: var(--space-md); border-top: 1px solid var(--border-color); } .pin-text-btn { background: none; border: none; color: var(--text-muted); font-size: var(--text-sm); cursor: pointer; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); transition: all 0.2s ease; } .pin-text-btn:hover { color: var(--text-main); background: var(--bg-surface-alt); } .pin-text-btn-danger:hover { color: var(--accent-danger); background: rgba(255, 59, 48, 0.1); } .pin-separator { color: var(--text-muted); opacity: 0.5; } /* Loading Overlay */ .pin-loading { position: absolute; inset: 0; background: rgba(var(--bg-surface-rgb, 30, 30, 30), 0.95); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; } .pin-loading.visible { opacity: 1; visibility: visible; } .pin-spinner { width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--accent-primary); border-radius: 50%; animation: pinSpin 0.8s linear infinite; } [data-theme="deep-ether"] .pin-spinner { border-top-color: var(--primary-azure); } @keyframes pinSpin { to { transform: rotate(360deg); } } .pin-loading p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; } /* Password Prompt (for setup) */ .pin-password-prompt { position: absolute; inset: 0; background: rgba(var(--bg-surface-rgb, 30, 30, 30), 0.98); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: var(--space-lg); z-index: 20; animation: fadeSlideIn 0.3s ease-out; } .pin-password-content { width: 100%; text-align: center; } .pin-password-content h4 { font-size: var(--text-lg); font-weight: 600; color: var(--text-main); margin: 0 0 var(--space-xs); } .pin-password-content p { margin: 0 0 var(--space-md); } .pin-password-content input { width: 100%; padding: var(--space-md); background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: var(--text-base); color: var(--text-main); text-align: center; margin-bottom: var(--space-md); } .pin-password-content input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring-color); } [data-theme="deep-ether"] .pin-password-content input:focus { border-color: var(--primary-azure); box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.15); } .pin-password-actions { display: flex; gap: var(--space-sm); justify-content: center; } /* Mobile optimizations */ @media (max-width: 480px) { .pin-modal { padding: var(--space-lg) var(--space-md); border-radius: var(--radius-lg); max-width: 320px; } .pin-numpad { gap: var(--space-xs); max-width: 240px; } .pin-key { max-width: 70px; font-size: var(--text-xl); } .pin-dots-container { gap: var(--space-sm); } .pin-dot { width: 14px; height: 14px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .pin-modal::before { animation: none; } .pin-key.reshuffled { animation: none; } .pin-dots-container.shake { animation: none; } } /* ======================================= FLEX UTILITIES - Global Layout Helpers ======================================= */ .flex-row-center { display: flex; flex-direction: row; align-items: center; justify-content: center; } .flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } /* Gap utilities */ .gap-xs { gap: var(--space-xs); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .gap-xl { gap: var(--space-xl); } /* Image height utilities */ .img-height-50 { height: 50px; width: auto; object-fit: contain; } /* =================================== TEAM PAGE - Premium Profile Cards 2026 Redesign with banner + overlapping avatar =================================== */ .team-page { width: 100%; max-width: none; margin: 0; padding: var(--space-xl) var(--space-md); } /* --- Hero Header --- */ .team-header-block { text-align: center; margin-bottom: 50px; } .team-header-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; background: linear-gradient(135deg, var(--text-main) 0%, var(--text-muted) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; } .team-header-subtitle { color: var(--text-muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; line-height: 1.5; } /* --- Sections --- */ .team-section { margin-bottom: 60px; } .team-section:last-child { margin-bottom: 0; } .team-section-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); } .team-section-title { font-size: 1.5rem; font-weight: 700; color: var(--text-main); margin: 0; } .team-badge-count { background: var(--bg-surface-alt); color: var(--text-muted); padding: 2px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; border: 1px solid var(--border-color); } /* --- Responsive Grid --- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } /* --- TEAM CARD - Premium Profile Card --- */ .team-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; position: relative; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow-card); /* Staggered entrance animation */ animation: teamCardPopIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; } /* Cascade animation delays */ .team-card:nth-child(1) { animation-delay: 0.05s; } .team-card:nth-child(2) { animation-delay: 0.1s; } .team-card:nth-child(3) { animation-delay: 0.15s; } .team-card:nth-child(4) { animation-delay: 0.2s; } .team-card:nth-child(5) { animation-delay: 0.25s; } .team-card:nth-child(6) { animation-delay: 0.3s; } .team-card:nth-child(7) { animation-delay: 0.35s; } .team-card:nth-child(8) { animation-delay: 0.4s; } @keyframes teamCardPopIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .team-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); border-color: var(--accent-primary); z-index: 2; } .team-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-ring-color); } /* Banner at top */ .team-card-banner { height: 85px; width: 100%; position: relative; } /* Admin Banner: Red gradient */ .team-card.admin .team-card-banner { background: linear-gradient(135deg, #EF5350 0%, #B71C1C 100%); } .team-card.admin:hover { border-color: #EF5350; } /* Mod Banner: Green/Teal gradient */ .team-card.mod .team-card-banner { background: linear-gradient(135deg, #4DB6AC 0%, #00695C 100%); } .team-card.mod:hover { border-color: #4DB6AC; } /* Subtle dot pattern on banner */ .team-card-banner::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0); background-size: 10px 10px; opacity: 0.5; } /* Avatar Container (Overlap effect) */ .team-card-avatar-wrapper { width: 84px; height: 84px; margin: -42px auto 10px; /* Pulls up halfway over banner */ position: relative; border-radius: 50%; background: var(--bg-surface); /* Inner border color = background */ padding: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .team-card:hover .team-card-avatar-wrapper { transform: scale(1.05); } .team-card-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg-surface-alt); } /* Card Body */ .team-card-body { padding: 0 20px 20px; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; } .team-card-name { font-size: 1.2rem; font-weight: 700; color: var(--text-main); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .team-card-role { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-bottom: 15px; display: inline-block; } .team-card.admin .team-card-role { color: #EF5350; background: rgba(239, 83, 80, 0.1); border: 1px solid rgba(239, 83, 80, 0.2); } .team-card.mod .team-card-role { color: #26A69A; background: rgba(38, 166, 154, 0.1); border: 1px solid rgba(38, 166, 154, 0.2); } /* Stats Pills */ .team-card-stats { display: flex; gap: 10px; margin-top: auto; width: 100%; justify-content: center; border-top: 1px solid var(--border-color); padding-top: 15px; } .stat-item { display: flex; flex-direction: column; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; } .stat-item strong { font-size: 0.9rem; color: var(--text-main); font-weight: 700; } /* --- Deep Ether Theme --- */ [data-theme="deep-ether"] .team-page { background: transparent; } [data-theme="deep-ether"] .team-card { background: rgba(30, 35, 55, 0.6); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.08); } [data-theme="deep-ether"] .team-card:hover { background: rgba(40, 45, 70, 0.8); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); } [data-theme="deep-ether"] .team-card-avatar-wrapper { background: #161b2e; /* Matches approx background */ } [data-theme="deep-ether"] .team-card.admin:hover { border-color: #EF5350; box-shadow: 0 0 30px rgba(239, 83, 80, 0.2); } [data-theme="deep-ether"] .team-card.mod:hover { border-color: #4DB6AC; box-shadow: 0 0 30px rgba(77, 182, 172, 0.2); } [data-theme="deep-ether"] .team-header-title { background: linear-gradient(135deg, #FFFFFF 0%, var(--primary-azure) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* --- MOBILE: Transformed to horizontal list --- */ @media (max-width: 768px) { .team-page { padding: var(--space-md); } .team-header-block { margin-bottom: 30px; } .team-header-title { font-size: 1.8rem; } .team-header-subtitle { font-size: 0.95rem; } .team-section { margin-bottom: 40px; } .team-section-header { gap: 10px; margin-bottom: 15px; padding-bottom: 10px; } .team-section-title { font-size: 1.2rem; } .team-grid { grid-template-columns: 1fr; gap: 12px; } .team-card { flex-direction: row; /* Horizontal layout */ align-items: center; padding: 0; text-align: left; height: 80px; min-height: auto; } /* Banner becomes a left side bar */ .team-card-banner { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; height: 100%; } .team-card-banner::after { display: none; } .team-card-avatar-wrapper { margin: 0 15px 0 20px; /* Reset margins */ width: 50px; height: 50px; padding: 2px; box-shadow: none; background: transparent; flex-shrink: 0; } .team-card-body { padding: 10px 15px 10px 0; align-items: flex-start; /* Left align text */ justify-content: center; } .team-card-name { font-size: 1rem; margin-bottom: 2px; } .team-card-role { margin-bottom: 0; font-size: 0.65rem; padding: 2px 8px; } .team-card-stats { display: none; /* Too busy for mobile */ } } /* Empty State */ .team-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted); background: var(--bg-surface-alt); border-radius: 12px; border: 2px dashed var(--border-color); } .team-empty i { font-size: 2rem; margin-bottom: 10px; opacity: 0.5; } .team-empty p { margin: 0; font-size: var(--text-base); } /* =================================== TOPIC COMPOSER - Premium 2026 Design Inspired by Medium/Ghost/Discord =================================== */ .create-topic-page { width: 100%; max-width: 100%; margin: 0; padding: var(--space-lg); box-sizing: border-box; overflow-x: hidden; } /* ===== GRID LAYOUT ===== */ .composer-grid { display: grid; grid-template-columns: 6fr 4fr; gap: var(--space-lg); align-items: start; width: 100%; max-width: 100%; box-sizing: border-box; } /* ===== MAIN EDITOR AREA ===== */ .composer-main { background: var(--bg-surface); border-radius: var(--radius-xl); border: 1px solid var(--border-color); box-shadow: var(--shadow-card); display: flex; flex-direction: column; overflow: hidden; min-height: 550px; animation: composerEnter 0.4s var(--ease-out-expo); } @keyframes composerEnter { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* Top Bar */ .composer-top-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-color); background: var(--bg-surface-alt); } .composer-back-link { display: flex; align-items: center; gap: var(--space-xs); color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); transition: all 0.2s ease; } .composer-back-link:hover { color: var(--text-main); background: var(--bg-surface); } .composer-back-link i { font-size: 12px; } /* Draft Status */ .draft-status { display: flex; align-items: center; gap: var(--space-xs); font-size: 12px; font-weight: 600; color: var(--accent-success); opacity: 0; transform: translateY(-5px); transition: all 0.3s var(--ease-out-expo); } .draft-status.visible { opacity: 1; transform: translateY(0); } .draft-status i { font-size: 14px; } /* ===== BIG TITLE INPUT ===== */ .composer-title-area { padding: var(--space-lg) var(--space-xl); position: relative; } .composer-title-input { width: 100%; background: transparent; border: none; font-size: 2rem; font-weight: 800; color: var(--text-main); outline: none; padding: var(--space-md) 0; line-height: 1.2; font-family: inherit; letter-spacing: -0.5px; border-bottom: 2px solid transparent; transition: border-color 0.2s ease; } .composer-title-input:focus { border-bottom-color: var(--accent-primary); } .composer-title-input::placeholder { color: var(--text-muted); opacity: 0.5; } .title-char-count { position: absolute; right: var(--space-xl); bottom: var(--space-lg); font-size: 12px; font-weight: 600; color: var(--text-muted); opacity: 0.6; font-feature-settings: 'tnum' 1; transition: all 0.2s ease; } .title-char-count.caution { color: var(--accent-warning); opacity: 1; } .title-char-count.warning { color: var(--accent-danger); opacity: 1; } /* ===== FLAIR SELECTOR ===== */ .composer-flairs { display: flex; gap: var(--space-sm); padding: 0 var(--space-xl) var(--space-md); overflow-x: auto; scrollbar-width: none; } .composer-flairs::-webkit-scrollbar { display: none; } .flair-option { cursor: pointer; } .flair-option input { display: none; } .flair-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); background: var(--bg-surface-alt); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; transition: all 0.2s var(--ease-out-expo); user-select: none; } .flair-chip i { font-size: 11px; } .flair-option:hover .flair-chip { border-color: var(--accent-primary); color: var(--text-main); } .flair-option input:checked+.flair-chip { background: rgba(168, 197, 69, 0.15); color: var(--accent-primary); border-color: var(--accent-primary); box-shadow: 0 2px 8px rgba(168, 197, 69, 0.2); } /* Warning Flair (NSFW) */ .flair-chip.flair-warning { color: var(--accent-warning); } .flair-option:hover .flair-chip.flair-warning { border-color: var(--accent-warning); } .flair-option input:checked+.flair-chip.flair-warning { background: rgba(255, 159, 10, 0.15); color: var(--accent-warning); border-color: var(--accent-warning); box-shadow: 0 2px 8px rgba(255, 159, 10, 0.25); } /* Danger Flair (Gore, Porn) */ .flair-chip.flair-danger { color: var(--accent-danger); } .flair-option:hover .flair-chip.flair-danger { border-color: var(--accent-danger); } .flair-option input:checked+.flair-chip.flair-danger { background: rgba(255, 59, 48, 0.15); color: var(--accent-danger); border-color: var(--accent-danger); box-shadow: 0 2px 8px rgba(255, 59, 48, 0.25); } /* ===== TABS ===== */ .composer-tabs { display: flex; gap: var(--space-lg); padding: 0 var(--space-xl); border-bottom: 1px solid var(--border-color); background: var(--bg-surface-alt); } .composer-tab { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-md) 0; color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer; position: relative; background: none; border: none; transition: color 0.2s ease; } .composer-tab i { font-size: 12px; } .composer-tab:hover { color: var(--text-main); } .composer-tab.active { color: var(--accent-primary); } .composer-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--accent-primary); border-radius: 3px 3px 0 0; } /* ===== EDITOR PANE ===== */ .composer-editor-pane { flex: 1; display: flex; flex-direction: column; background: var(--bg-surface); } /* Override wysiwyg-container styles for seamless integration */ .composer-editor-pane .wysiwyg-container { border: none; border-radius: 0; background: transparent; box-shadow: none; flex: 1; display: flex; flex-direction: column; } .composer-editor-pane .editor-toolbar-compact { background: transparent; padding: var(--space-sm) var(--space-xl); border-bottom: 1px solid var(--border-color); justify-content: flex-start; } .composer-editor-pane .editor-content, .composer-editor-pane #editor-zone { padding: var(--space-lg) var(--space-xl); min-height: 300px; font-size: var(--text-base); line-height: 1.7; flex: 1; } /* ===== PREVIEW PANE ===== */ .composer-preview-pane { display: none; padding: var(--space-xl); min-height: 350px; background: var(--bg-surface); } .preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 200px; color: var(--text-muted); text-align: center; } .preview-placeholder i { font-size: 48px; opacity: 0.3; margin-bottom: var(--space-md); } .preview-placeholder p { margin: 0; opacity: 0.6; } /* ===== SIDEBAR ===== */ .composer-sidebar { display: flex; flex-direction: column; gap: var(--space-md); position: sticky; top: var(--space-lg); min-width: 0; max-width: 100%; overflow: hidden; animation: sidebarEnter 0.4s var(--ease-out-expo) 0.1s both; } @keyframes sidebarEnter { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } } /* Publish Section */ .sidebar-publish { text-align: center; } .publish-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); min-height: 52px; font-size: var(--text-base); font-weight: 700; color: white; background: linear-gradient(135deg, var(--accent-primary) 0%, #8EAF35 100%); border: none; border-radius: var(--radius-lg); cursor: pointer; transition: all 0.25s var(--ease-out-expo); box-shadow: 0 4px 16px rgba(168, 197, 69, 0.3); } .publish-btn i { font-size: 14px; transition: transform 0.2s ease; } .publish-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(168, 197, 69, 0.4); } .publish-btn:hover i { transform: translateX(3px); } .publish-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .publish-hint { margin: var(--space-sm) 0 0; font-size: 11px; color: var(--text-muted); opacity: 0.7; } /* Sidebar Widget */ .sidebar-widget { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .widget-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md); background: var(--bg-surface-alt); border-bottom: 1px solid var(--border-color); cursor: pointer; user-select: none; } .widget-title { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; font-size: var(--text-sm); color: var(--text-main); } .widget-title i { color: var(--accent-primary); } /* Toggle Switch */ .toggle-switch { position: relative; width: 36px; height: 20px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border-color); border-radius: var(--radius-full); transition: all 0.2s ease; cursor: pointer; } .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; bottom: 2px; background: white; border-radius: 50%; transition: transform 0.2s ease; } .toggle-switch input:checked+.toggle-slider { background: var(--accent-primary); } .toggle-switch input:checked+.toggle-slider::before { transform: translateX(16px); } /* Widget Content */ .widget-content { padding: var(--space-md); display: none; } .widget-content.visible { display: block; } .poll-input { width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--text-main); background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-sizing: border-box; transition: border-color 0.2s ease; } .poll-input:focus { outline: none; border-color: var(--accent-primary); } .poll-input::placeholder { color: var(--text-muted); } .poll-options { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); } .add-option-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%; padding: var(--space-sm); margin-top: var(--space-sm); font-size: 12px; font-weight: 500; color: var(--text-muted); background: transparent; border: 1px dashed var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; } .add-option-btn:hover { color: var(--accent-primary); border-color: var(--accent-primary); background: rgba(168, 197, 69, 0.05); } /* Sidebar Preview Widget */ .sidebar-preview { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .preview-header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: var(--bg-surface-alt); border-bottom: 1px solid var(--border-color); font-weight: 600; font-size: var(--text-sm); color: var(--text-main); } .preview-header i { color: var(--accent-primary); } .preview-content { padding: var(--space-md); max-height: 300px; overflow-y: auto; font-size: var(--text-sm); line-height: 1.6; } .preview-content::-webkit-scrollbar { width: 4px; } .preview-content::-webkit-scrollbar-track { background: transparent; } .preview-content::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; } .preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-lg); text-align: center; color: var(--text-muted); } .preview-placeholder i { font-size: 32px; opacity: 0.3; margin-bottom: var(--space-sm); } .preview-placeholder p { margin: 0; font-size: 12px; opacity: 0.6; } /* ===== BAN ALERT ===== */ .composer-ban-alert { display: flex; gap: var(--space-md); max-width: 600px; margin: var(--space-xl) auto; padding: var(--space-lg); background: var(--bg-surface); border: 1px solid rgba(255, 59, 48, 0.3); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); } .ban-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255, 59, 48, 0.1); border-radius: var(--radius-lg); color: var(--accent-danger); font-size: 20px; flex-shrink: 0; } .ban-content h3 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); color: var(--accent-danger); } .ban-content p { margin: 0; font-size: var(--text-sm); color: var(--text-main); } .ban-reason { margin-top: var(--space-sm); color: var(--text-muted); } /* ===== DEEP ETHER THEME ===== */ [data-theme="deep-ether"] .composer-main, [data-theme="deep-ether"] .sidebar-widget { background: rgba(20, 25, 40, 0.9); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.08); } [data-theme="deep-ether"] .composer-top-bar, [data-theme="deep-ether"] .widget-header, [data-theme="deep-ether"] .preview-header, [data-theme="deep-ether"] .composer-editor-pane .editor-toolbar-compact { background: rgba(20, 25, 40, 0.6); } [data-theme="deep-ether"] .composer-title-input:focus { border-bottom-color: var(--primary-azure); } [data-theme="deep-ether"] .flair-option input:checked+.flair-chip { background: rgba(13, 102, 255, 0.2); color: var(--primary-azure); border-color: var(--primary-azure); box-shadow: 0 2px 8px rgba(13, 102, 255, 0.2); } [data-theme="deep-ether"] .widget-title i, [data-theme="deep-ether"] .preview-header i { color: var(--primary-azure); } [data-theme="deep-ether"] .toggle-switch input:checked+.toggle-slider { background: var(--primary-azure); } [data-theme="deep-ether"] .publish-btn { background: linear-gradient(135deg, var(--primary-azure) 0%, #0055CC 100%); box-shadow: 0 4px 16px rgba(13, 102, 255, 0.35); } [data-theme="deep-ether"] .publish-btn:hover { box-shadow: 0 8px 24px rgba(13, 102, 255, 0.5); } [data-theme="deep-ether"] .sidebar-preview { background: rgba(20, 25, 40, 0.9); border-color: rgba(255, 255, 255, 0.08); } [data-theme="deep-ether"] .add-option-btn:hover { color: var(--primary-azure); border-color: var(--primary-azure); background: rgba(13, 102, 255, 0.05); } [data-theme="deep-ether"] .poll-input:focus { border-color: var(--primary-azure); } /* ===== MOBILE RESPONSIVE ===== */ @media (max-width: 900px) { .create-topic-page { padding: var(--space-md); } .composer-grid { grid-template-columns: 1fr; } /* Sidebar at bottom on mobile (publish button) */ .composer-sidebar { order: 1; position: static; } /* Hide preview on mobile - users can see content in editor */ .sidebar-preview { display: none; } .composer-main { min-height: 350px; } .composer-title-area { padding: var(--space-md) var(--space-lg); } /* iOS Safari zoom fix: inputs must be 16px+ to prevent auto-zoom on focus */ .composer-title-input { font-size: 16px; } .composer-flairs { padding: 0 var(--space-lg) var(--space-md); } .composer-editor-pane .editor-toolbar-compact { padding: var(--space-sm) var(--space-lg); } .composer-editor-pane .editor-content, .composer-editor-pane #editor-zone { padding: var(--space-md) var(--space-lg); min-height: 200px; font-size: 16px; /* iOS zoom fix */ } /* Publish button full width on mobile */ .sidebar-publish { padding: var(--space-md) 0 0; } .publish-btn { width: 100%; } } @media (max-width: 480px) { .flair-chip { padding: 5px 10px; font-size: 11px; } .publish-btn { min-height: 48px; } } /* =================================== EDIT PAGE - SPECIFIC STYLES =================================== */ /* Zone de Danger (Suppression) */ .danger-zone { border-top: 1px dashed rgba(255, 59, 48, 0.3); margin-top: 20px; padding-top: 20px; } .danger-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: var(--accent-danger); background: rgba(255, 59, 48, 0.05); border: 1px solid var(--accent-danger); border-radius: var(--radius-md); font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .danger-btn:hover { background: rgba(255, 59, 48, 0.15); box-shadow: 0 4px 12px rgba(255, 59, 48, 0.15); transform: translateY(-1px); } .danger-hint { font-size: 11px; color: var(--accent-danger); opacity: 0.8; margin-bottom: 8px; text-align: center; } /* Bouton Vert Poire Forcé (Override le thème bleu Deep Ether) */ .btn-poire-gradient { background: linear-gradient(135deg, #A8C545 0%, #8EAF35 100%) !important; color: white !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 4px 15px rgba(168, 197, 69, 0.3); } .btn-poire-gradient:hover { box-shadow: 0 6px 20px rgba(168, 197, 69, 0.4); filter: brightness(1.05); } /* Deep Ether override pour btn-poire-gradient */ [data-theme="deep-ether"] .btn-poire-gradient { background: linear-gradient(135deg, #A8C545 0%, #8EAF35 100%) !important; box-shadow: 0 4px 15px rgba(168, 197, 69, 0.3) !important; } /* ================================================================== */ /* --- FIX SCROLL INFINI BIDIRECTIONNEL - SYSTÈME --- */ /* ================================================================== */ /* 1. Désactiver l'ancrage natif pour laisser le JS gérer la mathématique exacte */ html, body, .topic-scroll-container, #posts-container, .main-content { overflow-anchor: none !important; } /* 2. S'assurer que les éléments techniques ne perturbent pas le flux */ #top-spacer, #bottom-spacer, .sentinel { overflow-anchor: none !important; transform: translateZ(0); } /* Donne une taille physique aux détecteurs pour qu'ils soient impossibles à rater */ .sentinel { height: 50px !important; width: 100%; pointer-events: none; opacity: 0; display: block; z-index: -1; } /* 3. Classe pour désactiver le smooth scroll pendant l'insertion (Vital !) */ .is-scroll-locked, .is-scroll-locked * { scroll-behavior: auto !important; pointer-events: none; /* Bloque les clics pendant le micro-calcul */ } [data-theme="deep-ether"] .btn-poire-gradient:hover { box-shadow: 0 6px 20px rgba(168, 197, 69, 0.4) !important; } /* ================================================================== */ /* --- AUDIT TRAIL - INDICATEUR MODÉRATION STAFF (Industrial Pro) */ /* ================================================================== */ /* Post modéré par le staff - Bordure latérale indicatrice */ .post.staff-moderated { position: relative; border-left: 3px solid var(--staff-mod-accent, #D4A574); } .post.staff-moderated::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #EAB676 0%, #C4956A 100%); opacity: 0.9; } /* L'indicateur inline - Style minimaliste Industrial Pro */ .staff-moderated-indicator { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: rgba(212, 165, 116, 0.1); color: #D4A574; font-size: 10px; font-weight: 600; border-radius: 12px; border: 1px solid rgba(212, 165, 116, 0.25); cursor: pointer; transition: all 0.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); letter-spacing: 0.02em; } .staff-moderated-indicator i { font-size: 10px; opacity: 0.9; } .staff-moderated-indicator:hover { background: rgba(212, 165, 116, 0.2); border-color: rgba(212, 165, 116, 0.4); color: #E8C39E; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(212, 165, 116, 0.15); } /* Animation subtile au lieu du pulse agressif */ .staff-moderated-indicator::after { content: ''; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; background: #D4A574; border-radius: 50%; opacity: 0; transition: opacity 0.2s ease; } .post:hover .staff-moderated-indicator::after { animation: subtlePulse 2s ease-in-out infinite; opacity: 0.6; } @keyframes subtlePulse { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.2); opacity: 0.7; } } /* Deep Ether theme adaptation */ [data-theme="deep-ether"] .post.staff-moderated { border-left-color: #C4956A; } [data-theme="deep-ether"] .post.staff-moderated::before { background: linear-gradient(180deg, #C4956A 0%, #A67C52 100%); } [data-theme="deep-ether"] .staff-moderated-indicator { background: rgba(196, 149, 106, 0.12); border-color: rgba(196, 149, 106, 0.25); color: #C4956A; } [data-theme="deep-ether"] .staff-moderated-indicator:hover { background: rgba(196, 149, 106, 0.22); border-color: rgba(196, 149, 106, 0.45); color: #DEBB94; } /* Light theme adaptation */ [data-theme="light-ether"] .post.staff-moderated { border-left-color: #B8860B; } [data-theme="light-ether"] .staff-moderated-indicator { background: rgba(184, 134, 11, 0.08); border-color: rgba(184, 134, 11, 0.2); color: #8B6914; } [data-theme="light-ether"] .staff-moderated-indicator:hover { background: rgba(184, 134, 11, 0.15); color: #6B5200; } /* ================================================================== */ /* --- EDIT HISTORY MODAL (Public - for all users) --- */ /* ================================================================== */ .edit-history-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .edit-history-modal-overlay.active { opacity: 1; visibility: visible; } .edit-history-modal { background: var(--bg-surface); border-radius: 16px; width: 90%; max-width: 600px; max-height: 80vh; overflow: hidden; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4); transform: scale(0.9) translateY(20px); transition: transform 0.3s ease; } .edit-history-modal-overlay.active .edit-history-modal { transform: scale(1) translateY(0); } .edit-history-header { padding: 16px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; justify-content: space-between; align-items: center; } .edit-history-header h3 { margin: 0; font-size: 1.1em; font-weight: 600; display: flex; align-items: center; gap: 8px; } .edit-history-close { background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1em; transition: background 0.2s; } .edit-history-close:hover { background: rgba(255, 255, 255, 0.3); } .edit-history-body { padding: 15px; overflow-y: auto; max-height: calc(80vh - 60px); } .edit-history-loading, .edit-history-empty { text-align: center; padding: 30px; color: var(--text-muted); } .edit-history-loading i, .edit-history-empty i { margin-right: 8px; } .edit-history-item { background: var(--bg-surface-alt); border-radius: 10px; padding: 12px; margin-bottom: 12px; border-left: 3px solid #667eea; } .edit-history-item:last-child { margin-bottom: 0; } .edit-history-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font-size: 0.85em; } .edit-history-user { color: #667eea; font-weight: 600; } .edit-history-user i { margin-right: 4px; } .edit-history-date { color: var(--text-muted); } .edit-history-action { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.9em; font-weight: 500; } .edit-history-diff { margin-top: 10px; } .edit-history-before, .edit-history-after { margin-bottom: 10px; padding: 10px; border-radius: 8px; } .edit-history-before { background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); } .edit-history-before strong { color: #ff6b6b; } .edit-history-after { background: rgba(46, 213, 115, 0.1); border: 1px solid rgba(46, 213, 115, 0.3); } .edit-history-after strong { color: #2ed573; } .edit-history-before strong i, .edit-history-after strong i { margin-right: 5px; } .edit-history-content { margin-top: 8px; font-size: 0.9em; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 150px; overflow-y: auto; color: var(--text-primary); } /* Mobile */ @media (max-width: 768px) { .edit-history-modal { width: 95%; max-height: 85vh; } .edit-history-meta { flex-direction: column; gap: 5px; } } /* ================================================================== */ /* --- DIFF ENGINE STYLES (Word-by-word comparison) --- */ /* ================================================================== */ /* Diff Highlighting - Suppression (Rouge, barré) */ .diff-del { background: rgba(255, 59, 48, 0.2); color: #ff4d4d; text-decoration: line-through; padding: 1px 3px; border-radius: 3px; font-family: 'JetBrains Mono', 'Fira Code', monospace; } /* Diff Highlighting - Ajout (Vert, gras) */ .diff-add { background: rgba(52, 199, 89, 0.2); color: #2ecc71; font-weight: bold; padding: 1px 3px; border-radius: 3px; font-family: 'JetBrains Mono', 'Fira Code', monospace; } /* Unified diff container */ .edit-history-diff-unified { margin-top: 10px; background: var(--bg-surface-alt); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); } /* Diff legend */ .diff-legend { display: flex; gap: 15px; padding: 8px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); font-size: 0.8em; } .diff-legend-del { color: #ff4d4d; } .diff-legend-add { color: #2ecc71; } .diff-legend i { margin-right: 4px; } /* Unified diff content */ .diff-content-unified { padding: 12px 15px; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9em; line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; } /* Deleted content (full deletion) */ .edit-history-before.deleted-content { background: rgba(255, 59, 48, 0.08); border-color: rgba(255, 59, 48, 0.3); } .edit-history-before.deleted-content strong { color: #ff4d4d; } /* Staff edit badge (improved clickable) */ .staff-edit-badge { background: rgba(255, 59, 48, 0.15); color: #FF3B30; border: 1px solid rgba(255, 59, 48, 0.3); padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; } .staff-edit-badge:hover { background: #FF3B30; color: white; } /* ================================================================== */ /* --- POST ACTION BUTTONS (Edit/Delete for authors & staff) --- */ /* ================================================================== */ .post-action-buttons { display: inline-flex; gap: 6px; margin-left: 10px; } .btn-post-action { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: all 0.2s ease; opacity: 0.6; } .btn-post-action:hover { opacity: 1; transform: scale(1.05); } .btn-post-action.btn-edit:hover { background: rgba(52, 152, 219, 0.15); border-color: #3498db; color: #3498db; } .btn-post-action.btn-delete:hover { background: rgba(231, 76, 60, 0.15); border-color: #e74c3c; color: #e74c3c; } /* Show buttons on post hover (desktop) */ @media (hover: hover) { .post .post-action-buttons { opacity: 0; transition: opacity 0.2s; } .post:hover .post-action-buttons { opacity: 1; } } /* Always show on mobile */ @media (max-width: 768px) { .post .post-action-buttons { opacity: 1; } .btn-post-action { width: 32px; height: 32px; } } /* ================================================================== */ /* --- DELETE CONFIRMATION MODAL --- */ /* ================================================================== */ .delete-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 15000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .delete-modal-overlay.active { opacity: 1; visibility: visible; } .delete-modal { background: var(--bg-surface); border-radius: 16px; width: 90%; max-width: 420px; overflow: hidden; box-shadow: 0 25px 80px rgba(231, 76, 60, 0.3); transform: scale(0.9) translateY(20px); transition: transform 0.3s ease; } .delete-modal-overlay.active .delete-modal { transform: scale(1) translateY(0); } .delete-modal-header { padding: 20px; background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; display: flex; align-items: center; gap: 12px; } .delete-modal-header i { font-size: 1.5em; } .delete-modal-header h3 { margin: 0; font-size: 1.1em; font-weight: 600; } .delete-modal-body { padding: 20px; } .delete-modal-body p { margin: 0 0 10px 0; color: var(--text-primary); } .delete-warning { font-size: 0.85em; color: var(--text-muted); padding: 10px; background: rgba(231, 76, 60, 0.1); border-radius: 8px; border-left: 3px solid #e74c3c; } .delete-modal-actions { padding: 15px 20px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border-color); } .delete-modal-actions button { padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; } .btn-cancel { background: var(--bg-surface-alt); border: 1px solid var(--border-color); color: var(--text-primary); } .btn-cancel:hover { background: var(--bg-surface); } .btn-confirm-delete { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); border: none; color: white; } .btn-confirm-delete:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4); } .btn-confirm-delete:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } /* ================================================================== */ /* --- TOAST NOTIFICATIONS --- */ /* ================================================================== */ .topic-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(100px); padding: 12px 24px; border-radius: 30px; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); display: flex; align-items: center; gap: 10px; z-index: 20000; opacity: 0; transition: all 0.3s ease; } .topic-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .topic-toast.success { border-color: #2ecc71; } .topic-toast.success i { color: #2ecc71; } .topic-toast.error { border-color: #e74c3c; } .topic-toast.error i { color: #e74c3c; } .topic-toast span { color: var(--text-primary); font-weight: 500; } /* ======================================= INLINE EDIT - PREMIUM WYSIWYG EDITOR 2026 Full-featured glassmorphism editor with toolbar ======================================= */ /* ===== CONTAINER - Premium Glassmorphism ===== */ .inline-edit-container { width: 100%; padding: 0; border-radius: 16px; background: linear-gradient(145deg, rgba(20, 25, 45, 0.97) 0%, rgba(15, 20, 38, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; animation: premium-edit-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .inline-edit-container.premium-editor { animation-name: premium-edit-appear; } @keyframes premium-edit-appear { 0% { opacity: 0; transform: translateY(-12px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Closing animation */ .inline-edit-container.closing { animation: premium-edit-close 0.25s cubic-bezier(0.4, 0, 1, 1) forwards; } @keyframes premium-edit-close { to { opacity: 0; transform: translateY(-8px) scale(0.97); } } /* Saving state */ .inline-edit-container.saving { pointer-events: none; } .inline-edit-container.saving::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(168, 197, 69, 0.1) 50%, transparent 100%); animation: saving-shimmer 1.5s infinite; } @keyframes saving-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Success state */ .inline-edit-container.success { border-color: rgba(168, 197, 69, 0.4); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 197, 69, 0.15); } /* ===== HEADER - Badge & Char Counter ===== */ .inline-edit-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .edit-header-left { display: flex; align-items: center; gap: 12px; } .edit-icon-pulse { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, rgba(168, 197, 69, 0.2) 0%, rgba(168, 197, 69, 0.1) 100%); display: flex; align-items: center; justify-content: center; position: relative; } .edit-icon-pulse i { color: #A8C545; font-size: 14px; z-index: 1; } .edit-icon-pulse::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(168, 197, 69, 0.3) 0%, transparent 70%); animation: icon-pulse 2s ease-in-out infinite; opacity: 0.6; } @keyframes icon-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 0.3; } } .edit-title { font-size: 14px; font-weight: 600; color: var(--text-main); letter-spacing: -0.01em; } .edit-header-right { display: flex; align-items: center; } /* Character Counter */ .char-counter { display: flex; align-items: baseline; gap: 2px; font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; font-size: 12px; padding: 6px 12px; background: rgba(255, 255, 255, 0.04); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.3s ease; } .char-current { font-weight: 700; color: var(--text-main); transition: color 0.3s ease; } .char-separator { color: var(--text-muted); opacity: 0.4; } .char-max { color: var(--text-muted); opacity: 0.6; } .char-counter.ok .char-current { color: #A8C545; } .char-counter.warning { background: rgba(255, 183, 77, 0.1); border-color: rgba(255, 183, 77, 0.3); } .char-counter.warning .char-current { color: #FFB74D; } .char-counter.danger { background: rgba(239, 83, 80, 0.1); border-color: rgba(239, 83, 80, 0.3); animation: counter-shake 0.4s ease; } .char-counter.danger .char-current { color: #EF5350; } @keyframes counter-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* ===== TOOLBAR - Formatting Buttons ===== */ .inline-edit-toolbar { display: flex; align-items: center; gap: 4px; padding: 10px 14px; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.04); flex-wrap: wrap; } .toolbar-group { display: flex; align-items: center; gap: 2px; } .toolbar-separator { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.1); margin: 0 8px; } .toolbar-btn { width: 34px; height: 34px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all 0.15s ease; position: relative; } .toolbar-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); transform: translateY(-1px); } .toolbar-btn:active, .toolbar-btn.clicked { transform: scale(0.92); background: rgba(168, 197, 69, 0.2); } .toolbar-btn.active { background: rgba(168, 197, 69, 0.15); color: #A8C545; } .toolbar-btn.sticker-trigger.active { background: rgba(255, 183, 77, 0.15); color: #FFB74D; } /* Tooltip for buttons */ .toolbar-btn::after { content: attr(title); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 5px 10px; background: rgba(0, 0, 0, 0.9); color: white; font-size: 11px; font-weight: 500; white-space: nowrap; border-radius: 6px; opacity: 0; pointer-events: none; transition: all 0.2s ease; z-index: 100; } .toolbar-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===== WYSIWYG ZONE ===== */ .inline-edit-wysiwyg { min-height: 180px; max-height: 450px; padding: 18px 20px; margin: 0; background: rgba(0, 0, 0, 0.15); color: var(--text-main); font-family: inherit; font-size: 15px; line-height: 1.7; overflow-y: auto; outline: none; border: none; word-wrap: break-word; transition: background 0.2s ease; } .inline-edit-wysiwyg:focus { background: rgba(0, 0, 0, 0.2); } /* Placeholder */ .inline-edit-wysiwyg:empty::before { content: attr(placeholder); color: var(--text-muted); opacity: 0.5; pointer-events: none; } /* Content styles inside WYSIWYG */ .inline-edit-wysiwyg b, .inline-edit-wysiwyg strong { font-weight: 700; color: var(--text-main); } .inline-edit-wysiwyg i, .inline-edit-wysiwyg em { font-style: italic; } .inline-edit-wysiwyg u { text-decoration: underline; } .inline-edit-wysiwyg s, .inline-edit-wysiwyg strike { text-decoration: line-through; opacity: 0.7; } .inline-edit-wysiwyg blockquote { margin: 10px 0; padding: 10px 15px; background: rgba(168, 197, 69, 0.08); border-left: 3px solid #A8C545; border-radius: 0 8px 8px 0; font-style: italic; } .inline-edit-wysiwyg a { color: #0D66FF; text-decoration: underline; } .inline-edit-wysiwyg .spoiler { background: rgba(255, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px; cursor: pointer; } .inline-edit-wysiwyg img { max-width: 100%; max-height: 200px; border-radius: 8px; vertical-align: middle; margin: 4px 2px; } .inline-edit-wysiwyg img.sticker { max-height: 80px; max-width: 80px; border-radius: 0; } /* Upload placeholder */ .inline-edit-wysiwyg .upload-placeholder { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(168, 197, 69, 0.1); border: 1px dashed rgba(168, 197, 69, 0.4); border-radius: 8px; color: #A8C545; font-size: 12px; font-weight: 500; margin: 4px 2px; } /* Hidden textarea */ .inline-edit-textarea.hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== STICKER PICKER INLINE ===== */ .inline-sticker-picker { border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.25); animation: sticker-picker-in 0.25s ease forwards; } @keyframes sticker-picker-in { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 350px; } } .inline-sticker-tabs { display: flex; gap: 4px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .inline-sticker-picker .sticker-tab-btn { width: 36px; height: 36px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.15s ease; } .inline-sticker-picker .sticker-tab-btn:hover { background: rgba(255, 255, 255, 0.08); } .inline-sticker-picker .sticker-tab-btn.active { background: rgba(255, 183, 77, 0.15); color: #FFB74D; } .inline-sticker-content { padding: 12px 14px; } .sticker-search-box { margin-bottom: 12px; } .inline-sticker-search { width: 100%; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: var(--text-main); font-size: 13px; transition: all 0.2s ease; } .inline-sticker-search::placeholder { color: var(--text-muted); opacity: 0.6; } .inline-sticker-search:focus { outline: none; border-color: rgba(255, 183, 77, 0.5); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.1); } .inline-sticker-results { max-height: 200px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; } .inline-sticker-thumb { width: 64px; height: 64px; object-fit: contain; cursor: pointer; border-radius: 8px; background: rgba(255, 255, 255, 0.03); padding: 4px; transition: all 0.15s ease; } .inline-sticker-thumb:hover { background: rgba(255, 183, 77, 0.15); transform: scale(1.08); } .sticker-loading, .sticker-hint { padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px; opacity: 0.7; } .sticker-loading i { font-size: 16px; color: #FFB74D; } /* ===== ACTIONS BAR ===== */ .inline-edit-actions { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%); border-top: 1px solid rgba(255, 255, 255, 0.04); } .edit-actions-left, .edit-actions-right { display: flex; align-items: center; gap: 10px; } /* Keyboard hint redesign */ .inline-edit-hint { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); opacity: 0.6; } .inline-edit-hint kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; font-family: inherit; font-size: 10px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .inline-edit-hint .hint-text { margin-left: 4px; } /* Cancel button */ .inline-edit-cancel { padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; } .inline-edit-cancel:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-main); border-color: rgba(255, 255, 255, 0.15); } .inline-edit-cancel:active { transform: scale(0.97); } /* Save button - Premium gradient */ .inline-edit-save { padding: 10px 22px; border: none; border-radius: 10px; background: linear-gradient(135deg, #A8C545 0%, #8EAF35 100%); color: #1a1a1a; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(168, 197, 69, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .inline-edit-save:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168, 197, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); filter: brightness(1.05); } .inline-edit-save:active { transform: translateY(0) scale(0.98); } .inline-edit-save i { font-size: 12px; } .inline-edit-save .btn-text, .inline-edit-cancel .btn-text { white-space: nowrap; } /* Disabled states */ .inline-edit-save:disabled, .inline-edit-cancel:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; filter: none !important; pointer-events: none; } /* ===== LIGHT ETHER THEME ===== */ [data-theme="light-ether"] .inline-edit-container { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 252, 0.99) 100%); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); } [data-theme="light-ether"] .inline-edit-header { background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%); border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="light-ether"] .edit-icon-pulse { background: linear-gradient(135deg, rgba(13, 102, 255, 0.15) 0%, rgba(13, 102, 255, 0.08) 100%); } [data-theme="light-ether"] .edit-icon-pulse i { color: #0D66FF; } [data-theme="light-ether"] .edit-icon-pulse::before { background: radial-gradient(circle, rgba(13, 102, 255, 0.3) 0%, transparent 70%); } [data-theme="light-ether"] .char-counter { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); } [data-theme="light-ether"] .char-counter.ok .char-current { color: #0D66FF; } [data-theme="light-ether"] .inline-edit-toolbar { background: rgba(0, 0, 0, 0.03); border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="light-ether"] .toolbar-separator { background: rgba(0, 0, 0, 0.1); } [data-theme="light-ether"] .toolbar-btn { color: #6E6E73; } [data-theme="light-ether"] .toolbar-btn:hover { background: rgba(0, 0, 0, 0.06); color: #2D2B28; } [data-theme="light-ether"] .toolbar-btn.active, [data-theme="light-ether"] .toolbar-btn:active { background: rgba(13, 102, 255, 0.1); color: #0D66FF; } [data-theme="light-ether"] .inline-edit-wysiwyg { background: rgba(0, 0, 0, 0.02); } [data-theme="light-ether"] .inline-edit-wysiwyg:focus { background: rgba(0, 0, 0, 0.03); } [data-theme="light-ether"] .inline-edit-wysiwyg blockquote { background: rgba(13, 102, 255, 0.06); border-left-color: #0D66FF; } [data-theme="light-ether"] .inline-sticker-picker { background: rgba(0, 0, 0, 0.02); border-top-color: rgba(0, 0, 0, 0.06); } [data-theme="light-ether"] .inline-sticker-picker .sticker-tab-btn.active { background: rgba(13, 102, 255, 0.1); color: #0D66FF; } [data-theme="light-ether"] .inline-sticker-search { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); } [data-theme="light-ether"] .inline-sticker-search:focus { border-color: rgba(13, 102, 255, 0.5); box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.1); } [data-theme="light-ether"] .inline-sticker-thumb { background: rgba(0, 0, 0, 0.02); } [data-theme="light-ether"] .inline-sticker-thumb:hover { background: rgba(13, 102, 255, 0.1); } [data-theme="light-ether"] .inline-edit-actions { border-top-color: rgba(0, 0, 0, 0.06); } [data-theme="light-ether"] .inline-edit-hint kbd { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } [data-theme="light-ether"] .inline-edit-cancel { border-color: rgba(0, 0, 0, 0.12); color: #6E6E73; } [data-theme="light-ether"] .inline-edit-cancel:hover { background: rgba(0, 0, 0, 0.04); color: #2D2B28; } [data-theme="light-ether"] .inline-edit-save { background: linear-gradient(135deg, #0D66FF 0%, #0055CC 100%); color: #FFFFFF; box-shadow: 0 4px 12px rgba(13, 102, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } [data-theme="light-ether"] .inline-edit-save:hover { box-shadow: 0 6px 20px rgba(13, 102, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); } /* ===== MOBILE OPTIMIZATIONS ===== */ @media (max-width: 768px) { .inline-edit-container { border-radius: 12px; margin: -8px; width: calc(100% + 16px); } .inline-edit-header { padding: 12px 14px; } .edit-icon-pulse { width: 32px; height: 32px; } .edit-title { font-size: 13px; } .char-counter { font-size: 11px; padding: 4px 8px; } .inline-edit-toolbar { padding: 8px 10px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .toolbar-btn { min-width: 40px; width: 40px; height: 40px; } .toolbar-btn::after { display: none; /* No tooltips on mobile */ } .inline-edit-wysiwyg { min-height: 150px; max-height: 350px; padding: 14px 16px; font-size: 16px; /* Prevents zoom on iOS */ } .inline-sticker-picker { max-height: 280px; } .inline-sticker-results { max-height: 160px; } .inline-sticker-thumb { width: 56px; height: 56px; } .inline-edit-actions { flex-direction: column; gap: 12px; padding: 12px 14px; } .edit-actions-left { display: none; /* Hide keyboard hint on mobile */ } .edit-actions-right { width: 100%; } .inline-edit-cancel, .inline-edit-save { flex: 1; justify-content: center; padding: 14px 20px; } /* Disable heavy effects on mobile */ .inline-edit-container { backdrop-filter: none; -webkit-backdrop-filter: none; } .edit-icon-pulse::before { display: none; } } /* ================================================================== */ /* === PREMIUM PERFORMANCE & POLISH 2026 === */ /* === Optimisations GPU, Texture, UX Tactile */ /* ================================================================== */ /* --- 1. TEXTURE NOISE : Anti-banding & Finition Premium --- */ /* Ajoute de la matière aux dégradés, évite l'effet "plastique" */ [data-theme="deep-ether"]::before { content: ""; position: fixed; inset: 0; /* Bruit SVG léger en base64 pour donner de la texture organique */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: -1; opacity: 0.6; } /* --- 2. OPTIMISATION GPU MOBILE : Désactive backdrop-filter sur les posts --- */ /* Le blur est un tueur de FPS sur les listes infinies en mobile */ @media (max-width: 768px) { [data-theme="deep-ether"] .post { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* Fond plus opaque pour compenser l'absence de blur */ background: rgba(20, 25, 45, 0.97) !important; } /* Garder le blur pour les éléments statiques (header, modales) */ [data-theme="deep-ether"] .topic-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(20, 25, 40, 0.95) !important; } } /* --- 3. SQUIRCLES : Avatars modernes (super-ellipse) --- */ /* Plus organique et moderne que les cercles parfaits */ .author-avatar-small, .mobile-nav-avatar, .profile-avatar-large, .reply-context-avatar, .msg-avatar, .user-card-avatar { border-radius: 22% !important; /* Le "Squircle" visuel façon Apple */ } /* Micro-interaction ludique sur les avatars */ .author-avatar-small { transition: transform 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); } .author-avatar-small:hover { transform: scale(1.08) rotate(2deg); } /* --- 4. TOUCH TARGETS ACCESSIBILITÉ (Apple/Android 44px minimum) --- */ @media (max-width: 768px) { .chat-action-btn, .sidebar-search-btn, .btn-post-action, .nav-btn, .mobile-nav-item, .sticker-btn, .toolbar-btn { min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Espacement accru entre les boutons tactiles */ .post-action-buttons { gap: 8px; } } /* --- 5. FEEDBACK TACTILE HARMONISÉ (Game Juice) --- */ /* Animation de pression cohérente pour tous les interactifs */ .btn:not(.no-press), .nav-btn, .mobile-nav-item, .chat-action-btn, .sticker-btn, .toolbar-btn, .flair-chip { transition: transform 0.1s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)), background-color 0.2s ease, box-shadow 0.2s ease; } .btn:not(.no-press):active, .nav-btn:active, .mobile-nav-item:active, .chat-action-btn:active, .sticker-btn:active, .toolbar-btn:active, .flair-chip:active { transform: scale(0.95) !important; /* Feedback subtil mais perceptible */ } /* --- 6. INNER GLOW : Remplacement des ombres externes lourdes --- */ /* Plus léger visuellement et meilleur pour les performances */ [data-theme="deep-ether"] .post { /* Lumière interne subtile au lieu d'ombre externe lourde */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.1); } [data-theme="deep-ether"] .post:hover { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 4px 12px rgba(13, 102, 255, 0.12); } /* --- 7. REDUCED MOTION RESPECT --- */ /* Désactive les animations non-essentielles pour l'accessibilité */ @media (prefers-reduced-motion: reduce) { [data-theme="deep-ether"]::before { display: none; /* Pas de texture animée */ } .author-avatar-small:hover { transform: none; } .topic-card:hover { transform: none; } .btn:active, .nav-btn:active, .mobile-nav-item:active { transform: none !important; } @keyframes glowPulse { 0%, 100% { opacity: 1; } } @keyframes subtlePulse { 0%, 100% { opacity: 0.5; } } } /* ================================================================== */ /* === DEEP DIVE ENHANCEMENTS 2026 === */ /* === Spotlight, Zen Mode, Data-Block Citations, Chat Clustering */ /* ================================================================== */ /* --- 1. SPOTLIGHT EFFECT : Lumière dynamique suivant le curseur --- */ /* --- DÉSACTIVÉ : Spotlight supprimé sur demande utilisateur --- [data-theme="deep-ether"] .topic-card, [data-theme="deep-ether"] .post { --mouse-x: 50%; --mouse-y: 50%; } [data-theme="deep-ether"] .topic-card::after, [data-theme="deep-ether"] .post::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(13, 102, 255, 0.08), transparent 40%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } [data-theme="deep-ether"] .topic-card:hover::after, [data-theme="deep-ether"] .post:hover::after { opacity: 0; } [data-theme="deep-ether"] .topic-card>*, [data-theme="deep-ether"] .post>* { position: relative; z-index: 2; } --- FIN DÉSACTIVÉ --- */ /* --- DÉSACTIVÉ : Zen Mode supprimé sur demande utilisateur --- body.zen-mode::after { content: ''; position: fixed; inset: 0; background: rgba(5, 5, 15, 0.75); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 1; pointer-events: auto; transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 89; } body::after { content: ''; position: fixed; inset: 0; background: rgba(5, 5, 15, 0.75); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 89; } .fixed-reply-form, .reply-form-container, .mobile-reply-form { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease; position: relative; z-index: 90; } body.zen-mode .fixed-reply-form, body.zen-mode .reply-form-container, body.zen-mode .mobile-reply-form { transform: translateY(-8px); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(13, 102, 255, 0.15); border-color: var(--accent-primary, #A8C545) !important; } [data-theme="deep-ether"] body.zen-mode .fixed-reply-form, [data-theme="deep-ether"] body.zen-mode .reply-form-container { box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(13, 102, 255, 0.2); border-color: var(--primary-azure) !important; } --- FIN DÉSACTIVÉ --- */ /* --- 3. CITATIONS DATA-BLOCK (Style Sci-Fi pour Deep Ether) --- */ [data-theme="deep-ether"] .post-content blockquote { position: relative; background: linear-gradient(135deg, rgba(13, 102, 255, 0.06) 0%, rgba(13, 102, 255, 0.02) 100%); border-left: none; border: 1px solid rgba(13, 102, 255, 0.15); border-radius: 8px; padding: 14px 18px 14px 18px; margin: 14px 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9em; font-style: normal; color: var(--text-muted); overflow: hidden; } /* Indicateur latéral style "terminal" */ [data-theme="deep-ether"] .post-content blockquote::before { content: "›"; position: absolute; left: 0; top: 0; bottom: 0; width: 28px; background: rgba(13, 102, 255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--primary-azure); font-size: 1.2em; font-weight: bold; border-right: 1px solid rgba(13, 102, 255, 0.15); } /* Décalage du contenu pour l'indicateur */ [data-theme="deep-ether"] .post-content blockquote { padding-left: 40px; } /* Barre lumineuse décorative en bas */ [data-theme="deep-ether"] .post-content blockquote::after { content: ""; position: absolute; bottom: 0; left: 28px; width: 40px; height: 2px; background: linear-gradient(90deg, var(--primary-azure) 0%, transparent 100%); opacity: 0.6; } /* --- 4. CHAT CLUSTERING (Regroupement messages consécutifs) --- */ /* Réduire l'espace entre les messages du même expéditeur */ .message-bubble { transition: border-radius 0.15s ease, margin 0.15s ease; } /* Messages envoyés (droite) - Groupement */ .message-sent:has(+ .message-sent) { border-bottom-right-radius: 6px; margin-bottom: 3px; } .message-sent+.message-sent { border-top-right-radius: 6px; margin-top: 0; } /* Messages reçus (gauche) - Groupement */ .message-received:has(+ .message-received) { border-bottom-left-radius: 6px; margin-bottom: 3px; } .message-received+.message-received { border-top-left-radius: 6px; margin-top: 0; } /* Séparation forte quand l'interlocuteur change */ .message-sent+.message-received, .message-received+.message-sent { margin-top: 14px !important; } /* Fallback pour navigateurs sans :has() (Safari < 15.4) */ @supports not selector(:has(*)) { .message-bubble { margin-bottom: 6px; } } /* ================================================================== */ /* --- FIX CRITIQUE : SCROLL INFINI BIDIRECTIONNEL ------------------ */ /* ================================================================== */ /* 1. Désactiver l'ancrage natif pour laisser le JS gérer les maths */ html, body, .topic-scroll-container, #posts-container, .main-content { overflow-anchor: none !important; } /* 2. La classe utilisée par le JS pour forcer le saut instantané */ .is-scroll-locked, .is-scroll-locked * { scroll-behavior: auto !important; /* TUE le smooth scroll temporairement */ pointer-events: none; /* Bloque les interférences souris */ } /* 3. Empêcher les animations d'entrée sur l'historique */ /* Sinon le calcul de hauteur du JS est faux car l'élément est en train de bouger */ .post.no-anim { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } /* 4. Stabilisation des sentinelles */ .sentinel { overflow-anchor: none !important; transform: translateZ(0); /* Force le rendu GPU */ } /* ======================================= 📱 MOBILE GESTURES UI ======================================= */ /* L'indicateur de retour (Flèche gauche) */ #swipe-back-indicator { position: fixed; top: 0; left: 0; bottom: 0; width: 50px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%); z-index: 10000; pointer-events: none; opacity: 0; display: flex; align-items: center; padding-left: 10px; transition: opacity 0.1s; } #swipe-back-indicator i { font-size: 24px; color: white; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); transform: translateX(-20px); transition: transform 0.1s; } /* L'indicateur de réponse (Bulle droite) */ .swipe-reply-indicator-right { position: absolute; right: -60px; /* Caché à droite */ top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: var(--accent-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; opacity: 0; box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2); z-index: 10; } /* Fluidité native pour les gestures */ .main-content, .post { will-change: transform; } /* ======================================= 🏆 STYLE "TOP VIOLEUR" (THE KING) Avec images Risitas bien intégrées ======================================= */ .post.is-top-violator { /* Bordure Or subtile */ border-left: 3px solid #FFD700 !important; /* Fond très légèrement doré */ background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(255, 215, 0, 0.05) 100%) !important; position: relative; overflow: hidden; /* Contenir le filigrane */ } /* Lueur dorée subtile au hover */ .post.is-top-violator:hover { box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.08); } /* --- TAMPON sur l'avatar (petit et discret) --- */ .post.is-top-violator .author-avatar-small { position: relative; } /* Le petit tampon en bas à droite de l'avatar */ .post.is-top-violator .post-author-info::after { content: ""; position: absolute; bottom: 0; left: 30px; /* Décalé pour être à côté de l'avatar */ width: 28px; height: 28px; background-image: url('https://risibank.fr/cache/medias/0/36/3640/364051/full.png'); background-size: contain; background-repeat: no-repeat; transform: rotate(-12deg); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); z-index: 10; pointer-events: none; opacity: 0.9; } /* --- FILIGRANE Risitas (fond du post, très subtil) --- */ .post.is-top-violator::before { content: ""; position: absolute; bottom: -20px; right: -20px; width: 120px; height: 120px; background-image: url('https://risibank.fr/cache/medias/0/0/59/5989/full.png'); background-size: contain; background-repeat: no-repeat; opacity: 0.06; /* Très subtil */ transform: rotate(-8deg); z-index: 0; pointer-events: none; } /* Contenu au-dessus du filigrane */ .post.is-top-violator>* { position: relative; z-index: 1; } /* Pseudo du Chef - style fun */ .post.is-top-violator .author-username { color: #FFD700 !important; /* Or vif */ font-weight: 700 !important; } /* Badge "VIOLEUR" après le niveau - style premium */ .post.is-top-violator .level-badge::after { content: "VIOLEUR"; margin-left: 8px; padding: 2px 6px; font-size: 9px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; background: linear-gradient(135deg, #FFD700, #FF6B00); color: #000; border-radius: 3px; animation: violeurPulse 2s ease-in-out infinite; } @keyframes violeurPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } /* Animation pulse générique pour les badges */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* ======================================= 🏆 GRADES DU JOUR (Artiste & Poire) ======================================= */ /* --- Animations --- */ @keyframes brushWiggle { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(15deg) scale(1.1); } 75% { transform: rotate(-10deg) scale(1.1); } } @keyframes pearRadioactive { 0% { filter: drop-shadow(0 0 2px #76ff03); transform: scale(1); } 50% { filter: drop-shadow(0 0 8px #76ff03) hue-rotate(20deg); transform: scale(1.15); } 100% { filter: drop-shadow(0 0 2px #76ff03); transform: scale(1); } } @keyframes artistFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- GRADE ARTISTE : Texte Dégradé Animé --- */ .post.is-artist .author-username { /* Dégradé Rose/Bleu/Violet */ background: linear-gradient(270deg, #ff00cc, #333399, #00ccff); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 800 !important; /* Lueur externe */ text-shadow: 0 0 20px rgba(224, 86, 253, 0.3); animation: artistFlow 3s ease infinite; } .badge-artist { display: inline-block; width: 24px; height: 24px; /* Image Pinceau - URL spécifiée par l'utilisateur */ background-image: url('https://risibank.fr/cache/medias/0/42/4217/421767/full.png'); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: text-bottom; margin-left: 8px; /* Espace avec le pseudo */ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); animation: brushWiggle 3s ease-in-out infinite; } /* --- GRADE POIRE : Vert Radioactif --- */ .post.is-poire .author-username { color: #76ff03 !important; /* Vert Acide */ font-weight: 800 !important; text-shadow: 0 0 8px rgba(118, 255, 3, 0.5); } .badge-poire { display: inline-block; width: 24px; height: 24px; background-image: url('/images/community-banner.png'); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: text-bottom; margin-left: 8px; animation: pearRadioactive 2s infinite; } /* ======================================= ⚡ COMBO POIRE × ARTISTE : "L'ÉTERNEL" Fusion cosmique — Événement ultra-rare ======================================= */ /* --- Pseudo fusionné : Dégradé Vert ↔ Violet animé --- */ .post.is-poire-artiste .author-username { background: linear-gradient(270deg, #76ff03, #E056FD, #00d2d3, #76ff03); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 900 !important; /* FIX: text-shadow ne marche pas avec color:transparent + background-clip:text → on utilise filter: drop-shadow() qui s'applique sur le résultat visuel */ filter: drop-shadow(0 0 6px rgba(118, 255, 3, 0.35)) drop-shadow(0 0 6px rgba(224, 86, 253, 0.35)); animation: poireArtisteFlow 3s ease infinite; } @keyframes poireArtisteFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- Post container : bordure animée + glow pulsant + scan lumineux --- */ .post.is-poire-artiste { border-left: 4px solid #76ff03 !important; position: relative; overflow: hidden; /* Double animation : couleur de bordure + glow */ animation: poireArtistePostPulse 3s ease-in-out infinite; transition: transform 0.2s ease, box-shadow 0.2s ease; } @keyframes poireArtistePostPulse { 0%, 100% { box-shadow: inset 4px 0 18px -6px rgba(118, 255, 3, 0.18), 0 0 8px -3px rgba(118, 255, 3, 0.06); } 50% { box-shadow: inset 4px 0 18px -6px rgba(224, 86, 253, 0.18), 0 0 8px -3px rgba(224, 86, 253, 0.06); } } /* --- Lueur fusionnée au hover + micro-lift --- */ .post.is-poire-artiste:hover { transform: translateX(2px); box-shadow: inset 0 0 25px rgba(118, 255, 3, 0.06), inset 0 0 25px rgba(224, 86, 253, 0.06), 0 2px 15px -4px rgba(118, 255, 3, 0.1), 0 2px 15px -4px rgba(224, 86, 253, 0.1) !important; } /* --- Scan lumineux diagonal qui balaie le post --- */ .post.is-poire-artiste::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent 30%, rgba(118, 255, 3, 0.04) 45%, rgba(224, 86, 253, 0.06) 50%, rgba(118, 255, 3, 0.04) 55%, transparent 70%); animation: poireArtisteScan 6s ease-in-out infinite; z-index: 0; pointer-events: none; } @keyframes poireArtisteScan { 0% { left: -60%; } 45% { left: 120%; } 100% { left: 120%; } } /* --- Invasion 🍐🎨 : poires et pinceaux dispersés sur tout le post --- */ .poire-artiste-watermark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .poire-artiste-watermark>span { position: absolute; opacity: 0.04; animation: poireArtisteWmFloat 5s ease-in-out infinite; } /* Douce pulsation : les icônes respirent entre 0.04 et 0.07 d'opacité */ @keyframes poireArtisteWmFloat { 0%, 100% { opacity: 0.04; transform: scale(1) rotate(0deg); } 50% { opacity: 0.07; transform: scale(1.08) rotate(4deg); } } .post.is-poire-artiste>* { position: relative; z-index: 1; } /* --- Badge fusionné : Poire + Pinceau qui swappent de place --- */ .badge-poire-artiste { display: inline-flex; align-items: center; gap: 2px; width: auto; height: 24px; vertical-align: text-bottom; margin-left: 8px; position: relative; filter: drop-shadow(0 0 4px rgba(118, 255, 3, 0.5)) drop-shadow(0 0 4px rgba(224, 86, 253, 0.5)); } .badge-poire-artiste::before { content: ""; display: inline-block; width: 22px; height: 22px; background-image: url('/images/community-banner.png'); background-size: contain; background-repeat: no-repeat; background-position: center; /* Combo : pulse radioactif + swap périodique vers la droite */ animation: poireArtistePearSwap 8s ease-in-out infinite; } .badge-poire-artiste::after { content: ""; display: inline-block; width: 22px; height: 22px; background-image: url('https://risibank.fr/cache/medias/0/42/4217/421767/full.png'); background-size: contain; background-repeat: no-repeat; background-position: center; /* Combo : wiggle artistique + swap périodique vers la gauche */ animation: poireArtisteBrushSwap 8s ease-in-out infinite; } /* Poire : pulse radioactif (scale) + swap translateX(+24px) entre 35%-72% */ @keyframes poireArtistePearSwap { /* Phase 1 : position normale, pulse */ 0% { transform: translateX(0) scale(1); filter: drop-shadow(0 0 2px #76ff03); } 8% { transform: translateX(0) scale(1.15); filter: drop-shadow(0 0 6px #76ff03); } 16% { transform: translateX(0) scale(1); filter: drop-shadow(0 0 2px #76ff03); } 25% { transform: translateX(0) scale(1.1); filter: drop-shadow(0 0 5px #76ff03); } 33% { transform: translateX(0) scale(1); filter: drop-shadow(0 0 2px #76ff03); } /* Phase 2 : SWAP → glisse à droite */ 38% { transform: translateX(0) scale(1.2); filter: drop-shadow(0 0 8px #76ff03); } 43% { transform: translateX(24px) scale(1.1); filter: drop-shadow(0 0 6px #76ff03); } /* Phase 3 : position swappée, continue à pulser */ 50% { transform: translateX(24px) scale(1); filter: drop-shadow(0 0 2px #76ff03); } 58% { transform: translateX(24px) scale(1.15); filter: drop-shadow(0 0 7px #76ff03); } 65% { transform: translateX(24px) scale(1); filter: drop-shadow(0 0 2px #76ff03); } /* Phase 4 : SWAP RETOUR → glisse à gauche */ 72% { transform: translateX(24px) scale(1.2); filter: drop-shadow(0 0 8px #76ff03); } 78% { transform: translateX(0) scale(1.1); filter: drop-shadow(0 0 5px #76ff03); } /* Phase 5 : retour normal, pulse */ 85% { transform: translateX(0) scale(1); filter: drop-shadow(0 0 2px #76ff03); } 92% { transform: translateX(0) scale(1.12); filter: drop-shadow(0 0 5px #76ff03); } 100% { transform: translateX(0) scale(1); filter: drop-shadow(0 0 2px #76ff03); } } /* Pinceau : wiggle (rotate) + swap translateX(-24px) entre 35%-72% */ @keyframes poireArtisteBrushSwap { /* Phase 1 : position normale, wiggle */ 0% { transform: translateX(0) rotate(0deg) scale(1); } 8% { transform: translateX(0) rotate(12deg) scale(1.05); } 16% { transform: translateX(0) rotate(-8deg) scale(1); } 25% { transform: translateX(0) rotate(10deg) scale(1.05); } 33% { transform: translateX(0) rotate(0deg) scale(1); } /* Phase 2 : SWAP → glisse à gauche */ 38% { transform: translateX(0) rotate(15deg) scale(1.1); } 43% { transform: translateX(-24px) rotate(-5deg) scale(1.05); } /* Phase 3 : position swappée, continue wiggle */ 50% { transform: translateX(-24px) rotate(0deg) scale(1); } 58% { transform: translateX(-24px) rotate(-12deg) scale(1.05); } 65% { transform: translateX(-24px) rotate(8deg) scale(1); } /* Phase 4 : SWAP RETOUR → glisse à droite */ 72% { transform: translateX(-24px) rotate(-10deg) scale(1.1); } 78% { transform: translateX(0) rotate(5deg) scale(1.05); } /* Phase 5 : retour normal, wiggle */ 85% { transform: translateX(0) rotate(0deg) scale(1); } 92% { transform: translateX(0) rotate(-8deg) scale(1.05); } 100% { transform: translateX(0) rotate(0deg) scale(1); } } /* --- Page de Vote --- */ .vote-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } .vote-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 16px; padding: 25px; text-align: center; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: transform 0.2s; } .vote-card:hover { transform: translateY(-2px); } .vote-card.artist { border-top: 4px solid #E056FD; } .vote-card.poire { border-top: 4px solid #76ff03; } .vote-icon-lg { width: 80px; height: 80px; object-fit: contain; margin-bottom: 15px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1)); } .leaderboard-list { text-align: left; margin-top: 20px; background: var(--bg-surface-alt); border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); } .leaderboard-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid var(--border-color); font-size: 0.9em; } .leaderboard-item:last-child { border-bottom: none; } .leaderboard-item.rank-1 { background: linear-gradient(90deg, rgba(255, 215, 0, 0.08), transparent); font-weight: bold; } .vote-input-group { display: flex; gap: 8px; margin: 15px 0; } .vote-input-group input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); } /* Toast Notification Pro */ #vote-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background: #333; color: white; padding: 12px 24px; border-radius: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: 10000; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; gap: 10px; min-width: 300px; } @media (max-width: 768px) { .vote-container { grid-template-columns: 1fr; } } /* =================================== MOBILE TOPIC LIST - Compact for more content (2026) Smaller sizes for denser list view =================================== */ @media (max-width: 768px) { /* Topic card - Compact padding */ .topic-card { padding: 6px 10px; padding-right: 40px; margin-bottom: 3px; border-radius: 6px; } /* Topic card body - Tight gap */ .topic-card-body { gap: 2px; } /* Topic card header - Tight gap */ .topic-card-header { gap: 6px; } /* Avatar - Compact for mobile */ .topic-author-avatar { width: 26px; height: 26px; border-radius: 5px; } /* Title - Smaller font */ .topic-card-title { font-size: 13px; line-height: 1.25; } /* Pin badge - Compact */ .topic-pin-badge { font-size: 10px; } /* Footer - Tight gap */ .topic-card-footer { gap: 5px; margin-top: 1px; } /* Author name - Smaller */ .author-name { font-size: 10px; max-width: 100px; } /* Topic meta date - Smaller */ .topic-meta { font-size: 9px; } /* Reply count badge - Compact */ .reply-count { font-size: 9px; padding: 2px 5px; min-width: 22px; } /* Participated indicator - Compact */ .topic-participated { font-size: 8px; } /* Sidebar topics container - Less padding */ #sidebar-topics { padding: 6px; } /* Sidebar action bar - Compact touch targets */ .sidebar-action-bar { padding: 6px 8px; gap: 8px; margin-bottom: 6px; } .btn-create-topic { height: 36px; font-size: 12px; } .sidebar-search-btn { width: 36px; height: 36px; font-size: 13px; } } /* ================================================================== MINIMAL INLINE EDITOR - Discord/Slack style in-place editing ================================================================== */ .minimal-edit-zone { width: 100%; min-height: 60px; padding: 12px 14px; border: 2px solid var(--accent-primary, #0D66FF); border-radius: 8px; background: var(--bg-tertiary, rgba(30, 35, 45, 0.6)); color: var(--text-primary, #e8e8e8); font-size: 14px; line-height: 1.5; outline: none; word-wrap: break-word; overflow-wrap: break-word; transition: border-color 0.2s, box-shadow 0.2s; } .minimal-edit-zone:focus { box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.2); } .minimal-edit-zone:empty::before { content: attr(placeholder); color: var(--text-muted, #6b7280); pointer-events: none; } /* Text formatting inside edit zone */ .minimal-edit-zone b, .minimal-edit-zone strong { font-weight: 700; } .minimal-edit-zone i, .minimal-edit-zone em { font-style: italic; } .minimal-edit-zone u { text-decoration: underline; } .minimal-edit-zone s, .minimal-edit-zone strike { text-decoration: line-through; opacity: 0.7; } .minimal-edit-zone blockquote { border-left: 3px solid var(--accent-primary, #0D66FF); padding-left: 10px; margin: 8px 0; color: var(--text-secondary, #a0a0a0); } .minimal-edit-zone a { color: var(--accent-primary, #0D66FF); text-decoration: underline; } .minimal-edit-zone img { max-width: 100%; max-height: 200px; border-radius: 4px; } .minimal-edit-zone img.sticker { max-width: 120px; max-height: 120px; vertical-align: middle; } /* Action bar */ .minimal-edit-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; gap: 12px; } .minimal-edit-bar .edit-hint { font-size: 11px; color: var(--text-muted, #6b7280); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .minimal-edit-bar .edit-hint kbd { display: inline-block; padding: 2px 5px; font-size: 10px; font-family: 'Inter', monospace; font-weight: 600; background: var(--bg-secondary, #2a2f3a); border: 1px solid var(--border-color, #3a3f4a); border-radius: 4px; color: var(--text-secondary, #a0a0a0); } .minimal-edit-bar .edit-buttons { display: flex; gap: 8px; } /* Cancel button */ .minimal-edit-bar .btn-cancel { padding: 6px 12px; font-size: 12px; font-weight: 500; background: transparent; border: 1px solid var(--border-color, #3a3f4a); border-radius: 6px; color: var(--text-secondary, #a0a0a0); cursor: pointer; transition: all 0.15s; } .minimal-edit-bar .btn-cancel:hover { background: var(--bg-secondary, #2a2f3a); border-color: var(--text-muted, #6b7280); color: var(--text-primary, #e8e8e8); } .minimal-edit-bar .btn-cancel:active { transform: scale(0.97); } /* Save button */ .minimal-edit-bar .btn-save { padding: 6px 14px; font-size: 12px; font-weight: 600; background: var(--accent-primary, #0D66FF); border: none; border-radius: 6px; color: white; cursor: pointer; transition: all 0.15s; } .minimal-edit-bar .btn-save:hover { background: #0A52CC; box-shadow: 0 2px 8px rgba(13, 102, 255, 0.3); } .minimal-edit-bar .btn-save:active { transform: scale(0.97); } .minimal-edit-bar .btn-save:disabled, .minimal-edit-bar .btn-cancel:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Light theme adjustments */ [data-theme="light-ether"] .minimal-edit-zone { background: var(--bg-primary, #ffffff); border-color: #0D66FF; } [data-theme="light-ether"] .minimal-edit-zone:focus { box-shadow: 0 0 0 3px rgba(13, 102, 255, 0.15); } [data-theme="light-ether"] .minimal-edit-bar .edit-hint kbd { background: #f0f0f0; border-color: #ddd; } /* Mobile adjustments */ @media (max-width: 768px) { .minimal-edit-zone { min-height: 80px; padding: 14px; font-size: 15px; } .minimal-edit-bar { flex-direction: column; align-items: stretch; gap: 10px; } .minimal-edit-bar .edit-hint { display: none; /* Hide hints on mobile */ } .minimal-edit-bar .edit-buttons { justify-content: flex-end; } .minimal-edit-bar .btn-cancel, .minimal-edit-bar .btn-save { padding: 10px 16px; font-size: 14px; } } /* ================================================================== PAGE CONTAINER - Full width layout for menu pages (Clans, Stats, Logs, Elections, Messagerie, etc.) ================================================================== */ .page-container { width: 100%; max-width: none; padding: 20px 24px; margin: 0; box-sizing: border-box; } /* For pages that still need some max-width constraint (forms, etc.) */ .page-container.narrow { max-width: 800px; margin: 20px auto; } .page-container.medium { max-width: 1000px; margin: 20px auto; } /* Responsive adjustments */ @media (max-width: 768px) { .page-container { padding: 15px 12px; } .page-container.narrow, .page-container.medium { margin: 10px auto; padding: 15px; } } /* Election styles are fully inline in election.ejs */ /* Election styles are fully inline in election.ejs */