/* ============================================================================= discussion.css — Football UY1 Page de discussion live — même style glassmorphism que classements/compositions • Thèmes dynamiques via data-theme sur • Swipe-to-reply visible • Messages bulles façon WhatsApp ============================================================================= */ /* ── Variables thèmes ────────────────────────────────────────────────────── */ :root, [data-theme="orange"] { --primary-color: #ff9900; --primary-dark: #e88800; --primary-light: rgba(255,153,0,0.15); --primary-glow: rgba(255,153,0,0.3); --msg-own-bg: linear-gradient(135deg,#ff9900,#ffcc00); --msg-own-text: #000; --msg-other-bg: rgba(255,255,255,0.07); --msg-other-text: rgba(255,255,255,0.92); } [data-theme="pink"] { --primary-color: #e91e8c; --primary-dark: #c2177a; --primary-light: rgba(233,30,140,0.15); --primary-glow: rgba(233,30,140,0.3); --msg-own-bg: linear-gradient(135deg,#e91e8c,#f06292); --msg-own-text: #fff; } [data-theme="green"] { --primary-color: #00c853; --primary-dark: #00a844; --primary-light: rgba(0,200,83,0.15); --primary-glow: rgba(0,200,83,0.3); --msg-own-bg: linear-gradient(135deg,#00c853,#69f0ae); --msg-own-text: #000; } [data-theme="blue"] { --primary-color: #2196f3; --primary-dark: #1976d2; --primary-light: rgba(33,150,243,0.15); --primary-glow: rgba(33,150,243,0.3); --msg-own-bg: linear-gradient(135deg,#2196f3,#64b5f6); --msg-own-text: #fff; } [data-theme="purple"] { --primary-color: #9c27b0; --primary-dark: #7b1fa2; --primary-light: rgba(156,39,176,0.15); --primary-glow: rgba(156,39,176,0.3); --msg-own-bg: linear-gradient(135deg,#9c27b0,#ce93d8); --msg-own-text: #fff; } [data-theme="red"] { --primary-color: #f44336; --primary-dark: #d32f2f; --primary-light: rgba(244,67,54,0.15); --primary-glow: rgba(244,67,54,0.3); --msg-own-bg: linear-gradient(135deg,#f44336,#ef9a9a); --msg-own-text: #fff; } [data-theme="jaune"] { --primary-color: #ffd600; --primary-dark: #f9a825; --primary-light: rgba(255,214,0,0.15); --primary-glow: rgba(255,214,0,0.3); --msg-own-bg: linear-gradient(135deg,#ffd600,#fff176); --msg-own-text: #000; } [data-theme="black"] { --primary-color: #424242; --primary-dark: #212121; --primary-light: rgba(66,66,66,0.3); --primary-glow: rgba(66,66,66,0.4); --msg-own-bg: linear-gradient(135deg,#424242,#757575); --msg-own-text: #fff; } [data-theme="white"] { --primary-color: #eceff1; --primary-dark: #cfd8dc; --primary-light: rgba(236,239,241,0.15); --primary-glow: rgba(236,239,241,0.2); --msg-own-bg: linear-gradient(135deg,#eceff1,#fff); --msg-own-text: #000; } [data-theme="lime"] { --primary-color: #c6ff00; --primary-dark: #aeea00; --primary-light: rgba(198,255,0,0.12); --primary-glow: rgba(198,255,0,0.25); --msg-own-bg: linear-gradient(135deg,#c6ff00,#f4ff81); --msg-own-text: #000; } [data-theme="sky-blue"] { --primary-color: #40c4ff; --primary-dark: #0091ea; --primary-light: rgba(64,196,255,0.15); --primary-glow: rgba(64,196,255,0.3); --msg-own-bg: linear-gradient(135deg,#40c4ff,#b3e5fc); --msg-own-text: #000; } [data-theme="paulo"] { --primary-color: #ff6d00; --primary-dark: #e65100; --primary-light: rgba(255,109,0,0.15); --primary-glow: rgba(255,109,0,0.3); --msg-own-bg: linear-gradient(135deg,#ff6d00,#ffab40); --msg-own-text: #000; } /* ── Page ────────────────────────────────────────────────────────────────── */ .chat-page { max-width: 860px; margin: 0 auto; padding: 1.25rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 1rem; } /* ── Card dark base ──────────────────────────────────────────────────────── */ .card-dark { background: rgba(10,10,35,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.35); } /* ── Barre match ─────────────────────────────────────────────────────────── */ .chat-match-bar { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.25rem; position: sticky; top: calc(var(--nav-h) + 0.5rem); z-index: 50; } .chat-back { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.65); font-size: 0.85rem; flex-shrink: 0; transition: all 0.2s; } .chat-back:hover { background: rgba(255,153,0,0.15); color: #ffd740; } .chat-match-info { flex: 1; text-align: center; } .chat-match-teams { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .chat-team-name { font-family: 'Oswald', sans-serif; font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.85); } .chat-score-badge { display: flex; align-items: center; gap: 0.5rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); padding: 0.3rem 0.85rem; border-radius: 20px; } .chat-score-badge span:first-child { font-family: 'Oswald', sans-serif; font-size: 1.2rem; font-weight: 700; color: #ffd740; } .chat-live-pill { display: flex; align-items: center; gap: 4px; background: rgba(0,230,118,0.15); border: 1px solid rgba(0,230,118,0.25); color: #00e676; padding: 1px 8px; border-radius: 10px; font-size: 0.65rem; font-weight: 800; } .chat-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #00e676; animation: livePulse 1.5s infinite; } @keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.35} } .chat-match-sub { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin-top: 3px; } .chat-conn-indicator { width: 10px; height: 10px; border-radius: 50%; background: #ffc107; flex-shrink: 0; transition: background 0.3s; } .chat-conn-indicator.updating { animation: connPulse 0.8s ease infinite; } @keyframes connPulse { 0%,100%{opacity:1} 50%{opacity:0.3} } /* ── Zone principale ─────────────────────────────────────────────────────── */ .chat-main { display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* ── Barre utilisateur ───────────────────────────────────────────────────── */ .chat-user-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; gap: 0.65rem; } .chat-user-left { display: flex; align-items: center; gap: 0.65rem; } .chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-color); color: var(--msg-own-text, #000); font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chat-username-display { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 700; color: #fff; } .chat-rename-btn { background: none; border: none; color: rgba(255,255,255,0.35); font-size: 0.72rem; cursor: pointer; padding: 2px 4px; transition: color 0.2s; } .chat-rename-btn:hover { color: var(--primary-color); } .chat-status { font-size: 0.72rem; color: rgba(255,255,255,0.35); } .chat-status.connected { color: #00e676; } .chat-user-right { display: flex; align-items: center; gap: 0.65rem; } .chat-theme-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); border-radius: 8px; padding: 0.35rem 0.6rem; font-size: 0.76rem; cursor: pointer; font-family: inherit; transition: border-color 0.2s; } .chat-theme-select:focus { outline: none; border-color: var(--primary-color); } .chat-theme-select option { background: #1a1a2e; } .chat-sync-mode { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.04); border-radius: 8px; padding: 0.3rem 0.65rem; } .chat-sync-mode i { color: var(--primary-color); font-size: 0.65rem; } /* ── Barre utilisateurs actifs ───────────────────────────────────────────── */ .chat-active-users { display: flex; gap: 8px; overflow-x: auto; padding: 0.6rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap; scrollbar-width: none; /* Firefox */ } .chat-active-users::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .active-user-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.05); padding: 3px 10px 3px 3px; border-radius: 20px; cursor: pointer; border: 1px solid transparent; transition: all 0.2s; animation: fadeIn 0.3s ease; } .active-user-chip:hover { background: rgba(255,255,255,0.1); border-color: var(--primary-color); } .active-user-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-color); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.65rem; font-family: 'Oswald', sans-serif; } .active-user-name { font-size: 0.76rem; color: rgba(255,255,255,0.8); font-weight: 600; } /* ── Barre de réponse ────────────────────────────────────────────────────── */ .chat-reply-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.25rem; background: var(--primary-light); border-bottom: 1px solid rgba(255,255,255,0.06); border-left: 3px solid var(--primary-color); font-size: 0.82rem; color: rgba(255,255,255,0.8); } .chat-reply-bar i { color: var(--primary-color); } .chat-reply-bar strong { color: #fff; } .chat-reply-cancel { margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; font-size: 0.88rem; padding: 2px 6px; transition: color 0.2s; } .chat-reply-cancel:hover { color: #ff5252; } /* ── Zone messages ───────────────────────────────────────────────────────── */ .chat-messages { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 340px; max-height: 60vh; scrollbar-width: thin; scrollbar-color: rgba(255,153,0,0.25) transparent; } .chat-messages::-webkit-scrollbar { width: 5px; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(255,153,0,0.25); border-radius: 3px; } .chat-loading { display: flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 2rem; color: rgba(255,255,255,0.3); font-size: 0.88rem; } .chat-loading i { color: var(--primary-color); } /* ── Messages bulles ─────────────────────────────────────────────────────── */ .message { position: relative; max-width: 78%; display: flex; flex-direction: column; align-items: flex-start; padding: 0.7rem 1rem; border-radius: 14px 14px 14px 4px; background: var(--msg-other-bg); border: 1px solid rgba(255,255,255,0.06); transition: transform 0.25s ease, box-shadow 0.25s; align-self: flex-start; animation: msgIn 0.25s ease; } @keyframes msgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } .message.own { align-self: flex-end; align-items: flex-end; border-radius: 14px 14px 4px 14px; background: var(--msg-own-bg); color: var(--msg-own-text); border-color: transparent; box-shadow: 0 3px 12px var(--primary-glow); } .message.mentioned { border-color: var(--primary-color); background: var(--primary-light); } .message.reply-message { margin-left: 1.5rem; } .message.new-message { animation: msgHighlight 1.5s ease; } @keyframes msgHighlight { 0% { box-shadow: 0 0 0 3px var(--primary-glow); } 100% { box-shadow: none; } } .message.updated-message { animation: msgUpdate 2s ease; } @keyframes msgUpdate { 0%,100%{opacity:1} 50%{opacity:0.6} } /* Header message */ .message-header { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; } .message.own .message-header { flex-direction: row-reverse; } .username { font-family: 'Oswald', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--primary-color); } .message.own .username { color: var(--msg-own-text); opacity: 0.8; } .timestamp { font-size: 0.68rem; color: rgba(255,255,255,0.35); } .message.own .timestamp { color: rgba(0,0,0,0.4); } .reply-badge { font-size: 0.7rem; } /* Contexte de réponse */ .reply-context { background: rgba(0,0,0,0.25); border-left: 3px solid var(--primary-color); border-radius: 0 6px 6px 0; padding: 0.4rem 0.65rem; margin-bottom: 0.4rem; font-size: 0.76rem; } .message.own .reply-context { border-left-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.15); } .reply-indicator { color: rgba(255,255,255,0.5); margin-bottom: 2px; font-size: 0.72rem; } .message.own .reply-indicator { color: rgba(0,0,0,0.45); } .original-message-preview { color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } .message.own .original-message-preview { color: rgba(0,0,0,0.55); } /* Contenu */ .message-content { font-size: 0.88rem; line-height: 1.5; word-break: break-word; } .mention { background: var(--primary-light); color: var(--primary-color); padding: 1px 5px; border-radius: 4px; font-weight: 700; } .message.own .mention { background: rgba(0,0,0,0.15); color: var(--msg-own-text); } /* Icon de swipe (visible pendant le glissement) */ .swipe-reply-icon { position: absolute; right: -36px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; opacity: 0; transition: opacity 0.2s; } .message.swipe-active .swipe-reply-icon { opacity: 1; } /* ── Zone de saisie ──────────────────────────────────────────────────────── */ .chat-input-wrap { padding: 0.85rem 1.25rem 1rem; border-top: 1px solid rgba(255,255,255,0.06); } .chat-input-inner { display: flex; gap: 0.6rem; position: relative; } .chat-input { flex: 1; padding: 0.75rem 1rem; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.12); border-radius: 24px; color: #fff; font-size: 0.9rem; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; } .chat-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); } .chat-input::placeholder { color: rgba(255,255,255,0.28); } .chat-send-btn { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: var(--primary-color); border: none; color: #000; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; box-shadow: 0 3px 10px var(--primary-glow); } .chat-send-btn:hover { transform: scale(1.08); box-shadow: 0 5px 16px var(--primary-glow); } .chat-send-btn:active { transform: scale(0.95); } .chat-input-hint { display: flex; justify-content: space-between; font-size: 0.7rem; color: rgba(255,255,255,0.2); margin-top: 0.4rem; padding: 0 0.5rem; } .chat-chars-left { color: rgba(255,255,255,0.3); } .chat-chars-left.warning { color: #ffc107; } .chat-chars-left.danger { color: #ff5252; } /* ── Suggestions @mention ────────────────────────────────────────────────── */ .chat-suggestions { position: absolute; bottom: calc(100% + 6px); left: 0; right: 44px; background: rgba(15,15,45,0.97); backdrop-filter: blur(16px); border: 1px solid rgba(255,153,0,0.25); border-radius: 12px; max-height: 200px; overflow-y: auto; z-index: 200; box-shadow: 0 -4px 20px rgba(0,0,0,0.4); } .suggestion { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.18s; } .suggestion:last-child { border-bottom: none; } .suggestion:hover { background: rgba(255,153,0,0.1); padding-left: 1.25rem; } .suggestion-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--primary-color); color: #000; font-family: 'Oswald', sans-serif; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .suggestion-username { font-weight: 700; color: #fff; font-size: 0.85rem; } .suggestion-userid { font-size: 0.72rem; color: rgba(255,255,255,0.35); } /* ── Indicateurs toast internes ─────────────────────────────────────────── */ .sync-boost-indicator { position: fixed; bottom: 80px; right: 20px; z-index: 1100; background: linear-gradient(135deg,rgba(10,10,35,0.95),rgba(20,20,50,0.95)); border: 1px solid rgba(255,153,0,0.3); color: rgba(255,255,255,0.85); padding: 0.6rem 1.1rem; border-radius: 10px; font-size: 0.78rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.4); animation: toastIn 0.25s ease; } @keyframes toastIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} } .new-messages-indicator { position: fixed; bottom: 120px; right: 20px; z-index: 1100; background: var(--primary-color); color: var(--msg-own-text, #000); padding: 0.6rem 1.1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 16px var(--primary-glow); animation: toastIn 0.25s ease; } /* ── Animations swipe ────────────────────────────────────────────────────── */ .message.swiping { transition: none !important; } .message.swipe-active { box-shadow: 0 0 0 2px var(--primary-color), 0 4px 16px var(--primary-glow); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .chat-page { padding: 0.75rem 0.75rem 1.5rem; } .chat-match-bar { padding: 0.75rem 1rem; position: static; } .chat-user-bar { padding: 0.75rem 1rem; } .chat-input-wrap { padding: 0.75rem 1rem 1rem; } .message { max-width: 88%; } .chat-messages { max-height: 55vh; } .chat-user-right { width: 100%; justify-content: space-between; } .chat-sync-mode { display: none; } } @media (max-width: 400px) { .chat-match-teams { gap: 0.45rem; } .chat-team-name { font-size: 0.8rem; } }