/* ========================================================= ChatApp — Telegram Web–style theme layer (works with Tailwind CSS) Light / Dark mode via the `dark` class on Right-to-left (Persian) layout ========================================================= */ :root { --tg-bg-sidebar: #ffffff; --tg-bg-chat: #e6ebef; --tg-bg-panel: #ffffff; --tg-border: #e4e7e9; --tg-hover: #f2f4f5; --tg-active: #3390ec; --tg-active-text: #ffffff; --tg-accent: #3390ec; --tg-accent-hover: #2b7cd1; --tg-text-primary: #17212b; --tg-text-secondary: #707579; --tg-online: #4fae4e; --tg-offline: #a3a9ad; --tg-danger: #e53935; --tg-badge-bg: #3390ec; --tg-badge-text: #ffffff; /* Legacy variable names kept so existing markup (glass / glass-input / btn-accent / bubble-mine / bubble-theirs classes) automatically picks up the new look. */ --glass-bg: var(--tg-bg-panel); --glass-border: var(--tg-border); --glass-shadow: 0 1px 2px rgba(16, 35, 47, 0.08); --bg-gradient: var(--tg-bg-chat); --text-primary: var(--tg-text-primary); --text-secondary: var(--tg-text-secondary); --accent: var(--tg-accent); --accent-hover: var(--tg-accent-hover); --bubble-mine: linear-gradient(180deg, #e3f3ff 0%, #d3ebff 100%); --bubble-theirs: #ffffff; } html.dark { --tg-bg-sidebar: #17212b; --tg-bg-chat: #0e1621; --tg-bg-panel: #17212b; --tg-border: #101921; --tg-hover: #1c2733; --tg-active: #2b5278; --tg-active-text: #ffffff; --tg-accent: #5288c1; --tg-accent-hover: #6499cf; --tg-text-primary: #f5f5f5; --tg-text-secondary: #6d7f8f; --tg-online: #5fb85a; --tg-offline: #5b6a75; --tg-danger: #f2726a; --tg-badge-bg: #5288c1; --tg-badge-text: #ffffff; --glass-bg: var(--tg-bg-panel); --glass-border: var(--tg-border); --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --bg-gradient: var(--tg-bg-chat); --text-primary: var(--tg-text-primary); --text-secondary: var(--tg-text-secondary); --accent: var(--tg-accent); --accent-hover: var(--tg-accent-hover); --bubble-mine: linear-gradient(180deg, #2b5278 0%, #274a6d 100%); --bubble-theirs: #182533; } * { box-sizing: border-box; } body { background: var(--bg-gradient); color: var(--text-primary); min-height: 100vh; transition: background 0.3s ease, color 0.3s ease; } /* ---- Panel utility (sidebar, header, modals, drawers) ---- */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .glass-input { background: var(--tg-hover); border: 1px solid var(--glass-border); color: var(--text-primary); } .glass-input::placeholder { color: var(--text-secondary); } .glass-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(51, 144, 236, 0.2); } .btn-accent { background: var(--accent); color: #fff; transition: background 0.2s ease, transform 0.1s ease; } .btn-accent:hover { background: var(--accent-hover); } .btn-accent:active { transform: scale(0.97); } /* ---- Sidebar chat-list rows ---- */ [data-room-type] { transition: background 0.12s ease; } [data-room-type]:hover { background: var(--tg-hover) !important; } [data-room-type].tg-active, [data-room-type].bg-white\/30 { background: var(--tg-active) !important; color: var(--tg-active-text) !important; } [data-room-type].tg-active *, [data-room-type].bg-white\/30 * { color: var(--tg-active-text) !important; opacity: 1 !important; } /* Generic active/selected state (e.g. admin panel tabs) */ .tg-active { background: var(--tg-active) !important; color: var(--tg-active-text) !important; } /* ---- Message bubbles ---- */ .bubble-mine { background: var(--bubble-mine); color: var(--text-primary); border-radius: 12px 12px 2px 12px; } .bubble-theirs { background: var(--bubble-theirs); color: var(--text-primary); border-radius: 12px 12px 12px 2px; box-shadow: 0 1px 1px rgba(16, 35, 47, 0.08); } html[dir="rtl"] .bubble-mine { border-radius: 12px 12px 12px 2px; } html[dir="rtl"] .bubble-theirs { border-radius: 12px 12px 2px 12px; } /* ---- Scrollbar ---- */ .scroll-thin::-webkit-scrollbar { width: 6px; } .scroll-thin::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 10px; } .scroll-thin { scrollbar-width: thin; } /* ---- Online status dot ---- */ .status-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tg-bg-sidebar); } .status-online { background: var(--tg-online); } .status-offline { background: var(--tg-offline); } /* ---- Typing indicator dots ---- */ .typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tg-accent); animation: typing-bounce 1.2s infinite ease-in-out; } .typing-dot:nth-child(2) { animation-delay: 0.15s; } .typing-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } /* ---- Fade / slide transitions for message insertion ---- */ @keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .msg-animate { animation: msg-in 0.2s ease-out; } /* ---- Skeleton loader ---- */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 37%, rgba(0,0,0,0.04) 63%); background-size: 800px 100%; animation: shimmer 1.5s infinite linear; } /* ---- Toast notifications ---- */ .toast { animation: toast-in 0.3s ease-out; } @keyframes toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } html[dir="rtl"] .toast { animation: toast-in-rtl 0.3s ease-out; } @keyframes toast-in-rtl { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } /* ---- Responsive sidebar collapse on mobile ---- */ @media (max-width: 767px) { .sidebar-mobile-hidden { display: none; } } /* ---- Telegram-like header/composer accents ---- */ #sidebar, .glass { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Unread badge look */ [data-badge-for] { background: var(--tg-badge-bg) !important; color: var(--tg-badge-text) !important; min-width: 20px; text-align: center; } /* ---- Group info side drawer (slides in from the reading-end edge) ---- */ .group-drawer { transform: translateX(0); transition: transform 0.25s ease; } .group-drawer.hidden-panel { transform: translateX(100%); } html[dir="rtl"] .group-drawer.hidden-panel { transform: translateX(-100%); }