/** * Nefarious IRC Web Client - Theme Definitions * Uses data-theme attribute on for theme switching */ /* ============================================ Light Theme (Default) ============================================ */ :root, [data-theme="light"] { /* Primary colors */ --primary-color: #3498db; --primary-color-rgb: 52, 152, 219; --primary-hover: #2980b9; --danger-color: #e74c3c; --success-color: #2ecc71; --warning-color: #f39c12; /* Backgrounds - light gray spectrum sidebars */ --dark-bg: #e0e0e0; --darker-bg: #d0d0d0; --light-bg: #f5f5f5; --chat-bg: #ffffff; --input-bg: #ffffff; --modal-bg: #ffffff; /* Text - dark for good contrast on white/light backgrounds */ --text-color: #1a1a1a; --light-text: #666666; --muted-text: #999999; --text-inverse: #4a4a4a; /* Font settings - applied globally (can be overridden by FontManager) */ --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size: 14px; --font-weight: 400; /* Monospace settings - for code, IRC messages */ --monospace-font: 'JetBrains Mono', 'SF Mono', Monaco, 'Courier New', monospace; --monospace-size: 13px; /* Borders */ --border-color: #cccccc; /* Shadows */ --shadow-color: rgba(0, 0, 0, 0.1); --shadow-heavy: rgba(0, 0, 0, 0.3); /* Status colors */ --status-offline: #999999; /* Special backgrounds */ --selected-bg: #e0e0e0; --joined-bg: #f5f5f5; --error-bg: #fee; --success-bg: #efe; /* Marker colors - vivid for visibility on light backgrounds */ --marker-join: #2e7d32; --marker-part: #616161; --marker-kick: #c62828; --marker-mode: #1565c0; --marker-ban: #e65100; --marker-unban: #558b2f; --marker-action: #d32f2f; /* Gradients */ --gradient-top: rgba(255, 255, 255, 1); --gradient-mid: rgba(255, 255, 255, 0.9); --gradient-end: rgba(255, 255, 255, 0); /* Hover overlays */ --hover-light: rgba(255, 255, 255, 0.1); --hover-dark: rgba(0, 0, 0, 0.02); /* Scrollbar */ --scrollbar-track: var(--light-bg); --scrollbar-thumb: var(--border-color); --scrollbar-thumb-hover: var(--light-text); } /* ============================================ Dark Theme ============================================ */ [data-theme="dark"] { /* Primary colors */ --primary-color: #5dade2; --primary-color-rgb: 93, 173, 226; --primary-hover: #3498db; --danger-color: #e74c3c; --success-color: #2ecc71; --warning-color: #f39c12; /* Backgrounds - dark gray spectrum (not black, not blue) */ --dark-bg: #3a3a3a; --darker-bg: #333333; --light-bg: #2a2a2a; --chat-bg: #353535; --input-bg: #3a3a3a; --modal-bg: #3a3a3a; /* Text - lighter colors for better readability */ --text-color: #f5f5f5; --light-text: #d8d8d8; --muted-text: #888888; --text-inverse: #f5f5f5; /* Font settings - inherit from :root, can be overridden by FontManager */ --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size: 14px; --font-weight: 400; /* Monospace settings */ --monospace-font: 'JetBrains Mono', 'SF Mono', Monaco, 'Courier New', monospace; --monospace-size: 13px; /* Borders */ --border-color: #555555; /* Shadows */ --shadow-color: rgba(0, 0, 0, 0.4); --shadow-heavy: rgba(0, 0, 0, 0.6); /* Status colors */ --status-offline: #999999; /* Special backgrounds - gray spectrum */ --selected-bg: #3a3a3a; --joined-bg: #303030; --error-bg: #3b2020; --success-bg: #203b20; /* Marker colors */ --marker-join: #5dce5d; --marker-part: #c0c0c0; --marker-kick: #ff6b6b; --marker-mode: #6dc4f0; --marker-ban: #ffb84d; --marker-unban: #9dda60; --marker-action: #ff6b6b; /* Gradients - match chat background */ --gradient-top: rgba(53, 53, 53, 1); --gradient-mid: rgba(53, 53, 53, 0.9); --gradient-end: rgba(53, 53, 53, 0); /* Hover overlays */ --hover-light: rgba(255, 255, 255, 0.08); --hover-dark: rgba(255, 255, 255, 0.03); /* Scrollbar */ --scrollbar-track: #2a2a2a; --scrollbar-thumb: #555555; --scrollbar-thumb-hover: #666666; } /* ============================================ Terminal Theme (CRT Console) Uses classic 16-color terminal palette ============================================ */ [data-theme="terminal"] { /* Primary colors - dimmer green for buttons, not eye-burning bright */ --primary-color: #008800; --primary-color-rgb: 0, 136, 0; --primary-hover: #00aa00; --danger-color: #cc0000; --success-color: #00cc00; --warning-color: #cccc00; /* Backgrounds - pure black */ --dark-bg: #0d0d0d; --darker-bg: #050505; --light-bg: #0a0a0a; --chat-bg: #000000; --input-bg: #0d0d0d; --modal-bg: #0d0d0d; /* Text - phosphor green, brighter for secondary text */ --text-color: #00ff00; --light-text: #00cc00; --muted-text: #009900; --text-inverse: #00ff00; /* Font settings - terminal forces monospace aesthetic */ --font-family: 'Courier New', 'Lucida Console', Monaco, monospace; --font-size: 14px; --font-weight: 400; /* Monospace settings - same as UI font for terminal theme */ --monospace-font: 'Courier New', 'Lucida Console', Monaco, monospace; --monospace-size: 13px; /* Borders */ --border-color: #003300; /* Shadows - glow effect */ --shadow-color: rgba(0, 255, 0, 0.2); --shadow-heavy: rgba(0, 255, 0, 0.4); /* Status colors */ --status-offline: #006600; /* Special backgrounds */ --selected-bg: #001a00; --joined-bg: #001100; --error-bg: #1a0000; --success-bg: #001a00; /* Marker colors - classic 16-color terminal palette */ --marker-join: #00cc00; --marker-part: #888888; --marker-kick: #cc0000; --marker-mode: #00cccc; --marker-ban: #cccc00; --marker-unban: #00cc00; --marker-action: #cccc00; /* Gradients */ --gradient-top: rgba(0, 0, 0, 1); --gradient-mid: rgba(0, 0, 0, 0.9); --gradient-end: rgba(0, 0, 0, 0); /* Hover overlays */ --hover-light: rgba(0, 255, 0, 0.1); --hover-dark: rgba(0, 255, 0, 0.05); /* Scrollbar */ --scrollbar-track: #000000; --scrollbar-thumb: #003300; --scrollbar-thumb-hover: #004400; /* Terminal-specific - standard displays need strong glow to be visible */ --terminal-glow: 0 0 20px rgba(0, 255, 0, 1); --terminal-glow-subtle: 0 0 12px rgba(0, 255, 0, 0.7); --terminal-scanline: rgba(0, 0, 0, 0.1); } /* HDR displays: minimal glow - HDR amplifies greens dramatically */ @media (dynamic-range: high) { [data-theme="terminal"] { --terminal-glow: 0 0 4px rgba(0, 255, 0, 0.06); --terminal-glow-subtle: 0 0 3px rgba(0, 255, 0, 0.04); --shadow-color: rgba(0, 255, 0, 0.02); --shadow-heavy: rgba(0, 255, 0, 0.05); --hover-light: rgba(0, 255, 0, 0.015); --hover-dark: rgba(0, 255, 0, 0.005); } } /* Terminal theme: Force monospace font everywhere */ [data-theme="terminal"] body { font-family: var(--font-family); } /* Terminal theme: No rounded corners - sharp edges like classic terminals */ [data-theme="terminal"] .btn, [data-theme="terminal"] .btn-primary, [data-theme="terminal"] .btn-secondary, [data-theme="terminal"] .btn-sm, [data-theme="terminal"] input, [data-theme="terminal"] select, [data-theme="terminal"] textarea, [data-theme="terminal"] .modal-content, [data-theme="terminal"] .modal-close, [data-theme="terminal"] .emoji-picker, [data-theme="terminal"] .emoji-picker-header input, [data-theme="terminal"] .emoji-tab, [data-theme="terminal"] .emoji-category-btn, [data-theme="terminal"] .emoji-item, [data-theme="terminal"] .emoji-add-btn, [data-theme="terminal"] .custom-emoji-item, [data-theme="terminal"] .setting-status, [data-theme="terminal"] .form-group input, [data-theme="terminal"] .form-group select, [data-theme="terminal"] .setting-control input, [data-theme="terminal"] .setting-control select, [data-theme="terminal"] .error-message, [data-theme="terminal"] .success-message, [data-theme="terminal"] .channel-item, [data-theme="terminal"] .user-item, [data-theme="terminal"] .sidebar, [data-theme="terminal"] .user-list-panel, [data-theme="terminal"] .lightbox-content img, [data-theme="terminal"] .lightbox-content video, [data-theme="terminal"] .message-input-contenteditable, [data-theme="terminal"] .input-area textarea, [data-theme="terminal"] .md-code, [data-theme="terminal"] .md-code-block, [data-theme="terminal"] .search-box input, [data-theme="terminal"] .sort-btn, [data-theme="terminal"] .channel-list-container, [data-theme="terminal"] .user-count-badge, [data-theme="terminal"] .joined-badge, [data-theme="terminal"] .debug-stats, [data-theme="terminal"] .load-more-btn, [data-theme="terminal"] .history-indicator .load-more-btn, [data-theme="terminal"] .emoji-autocomplete, [data-theme="terminal"] .inline-media-image, [data-theme="terminal"] .inline-media-video, [data-theme="terminal"] .media-lightbox-media, [data-theme="terminal"] .media-lightbox-url, [data-theme="terminal"] #upload-modal .modal-content, [data-theme="terminal"] button, [data-theme="terminal"] .btn, [data-theme="terminal"] [class*="btn-"], [data-theme="terminal"] .upload-preview, [data-theme="terminal"] .upload-filename, [data-theme="terminal"] .upload-info, [data-theme="terminal"] .caption-input, [data-theme="terminal"] .audio-player, [data-theme="terminal"] .audio-progress-bar, [data-theme="terminal"] .audio-progress, [data-theme="terminal"] .attach-btn-placeholder, [data-theme="terminal"] [contenteditable] { border-radius: 0 !important; } [data-theme="terminal"] ::-webkit-scrollbar-thumb { border-radius: 0 !important; } /* Terminal theme: Text glow effect */ [data-theme="terminal"] .messages { text-shadow: var(--terminal-glow); } [data-theme="terminal"] .message-nick { text-shadow: var(--terminal-glow); } [data-theme="terminal"] .sidebar { text-shadow: none; box-shadow: none !important; } [data-theme="terminal"] .sidebar.open { box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5) !important; } [data-theme="terminal"] .user-list-panel { text-shadow: none; box-shadow: none !important; } [data-theme="terminal"] .user-list-panel.open { box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5) !important; } /* Terminal theme: CRT scanline effect */ [data-theme="terminal"] .messages-wrapper::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 2px, var(--terminal-scanline) 2px, var(--terminal-scanline) 4px ); z-index: 100; } /* Terminal theme: Input field glow */ [data-theme="terminal"] .input-area input:focus { box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); } /* Terminal theme: Modal border glow */ [data-theme="terminal"] .modal-content { border: 1px solid var(--primary-color); box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); } /* Terminal theme: Button styling to match CRT aesthetic */ [data-theme="terminal"] .btn-primary { background: var(--dark-bg); color: var(--text-color); border: 1px solid var(--primary-color); } [data-theme="terminal"] .btn-primary:hover { background: var(--primary-color); color: var(--chat-bg); box-shadow: 0 0 15px rgba(0, 255, 0, 0.5); } [data-theme="terminal"] .btn-primary:disabled { color: var(--border-color); border-color: var(--border-color); } /* Terminal theme: Replace emoji button with text smiley */ [data-theme="terminal"] .emoji-btn { font-size: 0; } [data-theme="terminal"] .emoji-btn::after { content: ":)"; font-size: 1rem; font-family: 'Courier New', 'Lucida Console', Monaco, monospace; color: var(--text-color); text-shadow: var(--terminal-glow-subtle); transition: text-shadow 0.15s; } [data-theme="terminal"] .emoji-btn:hover:not(:disabled)::after { text-shadow: var(--terminal-glow); } [data-theme="terminal"] .emoji-btn:disabled::after { text-shadow: none; } /* Terminal theme: Replace bug report button emoji with ASCII */ [data-theme="terminal"] #bug-report-btn { font-size: 0; } [data-theme="terminal"] #bug-report-btn::after { content: "[!]"; font-size: 1rem; font-family: 'Courier New', 'Lucida Console', Monaco, monospace; color: var(--text-color); text-shadow: var(--terminal-glow-subtle); transition: text-shadow 0.15s; } [data-theme="terminal"] #bug-report-btn:hover::after { text-shadow: var(--terminal-glow); } /* Bold text enhancement for better visibility */ [data-theme="light"] .md-bold { text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor; } [data-theme="dark"] .md-bold { text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor; } /* Terminal theme: Bold with glow effect since monospace lacks weight variants */ [data-theme="terminal"] .md-bold { text-shadow: 0 0 1px currentColor, 0.3px 0 0 currentColor, -0.3px 0 0 currentColor; } /* Light/Dark theme: Replace emoji with text icons for proper theme contrast */ [data-theme="light"] #user-list-toggle, [data-theme="light"] #btn-open-users { font-size: 0; filter: none; transition: transform 0.15s ease; } [data-theme="light"] #user-list-toggle::after, [data-theme="light"] #btn-open-users::after { content: "👥"; font-size: 1.2rem; filter: grayscale(100%) brightness(0); } [data-theme="dark"] #user-list-toggle, [data-theme="dark"] #btn-open-users { font-size: 0; filter: none; transition: transform 0.15s ease; } [data-theme="dark"] #user-list-toggle::after, [data-theme="dark"] #btn-open-users::after { content: "👥"; font-size: 1.2rem; filter: grayscale(100%) brightness(100); } /* Hover: scale animation instead of color change */ [data-theme="light"] #user-list-toggle:hover, [data-theme="dark"] #user-list-toggle:hover, [data-theme="light"] #btn-open-users:hover, [data-theme="dark"] #btn-open-users:hover { transform: scale(1.15); } /* Terminal theme: Replace emoji icons with text to avoid color mismatch */ [data-theme="terminal"] #user-list-toggle { font-size: 0; filter: none; } [data-theme="terminal"] #user-list-toggle::after { content: "[USERS]"; font-size: 0.75rem; font-family: 'Courier New', monospace; color: var(--text-color); text-shadow: var(--terminal-glow); } [data-theme="terminal"] #btn-open-channels { font-size: 0; filter: none; } [data-theme="terminal"] #btn-open-channels::after { content: "[MENU]"; font-size: 0.7rem; font-family: 'Courier New', monospace; color: var(--text-color); } [data-theme="terminal"] #btn-open-users { font-size: 0; filter: none; } [data-theme="terminal"] #btn-open-users::after { content: "[USERS]"; font-size: 0.7rem; font-family: 'Courier New', monospace; color: var(--text-color); } /* Terminal theme: Add text glow to sidebar button text, remove green box-shadow */ [data-theme="terminal"] #btn-open-channels::after, [data-theme="terminal"] #btn-open-users::after { text-shadow: var(--terminal-glow); } [data-theme="terminal"] #btn-open-channels.panel-open, [data-theme="terminal"] #btn-open-channels.panel-closing { box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } [data-theme="terminal"] #btn-open-users.panel-open, [data-theme="terminal"] #btn-open-users.panel-closing { box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.5); } /* Terminal theme: Replace sort icon with ASCII */ [data-theme="terminal"] #sort-toggle { font-size: 0; } [data-theme="terminal"] #sort-toggle::after { content: "[SORT]"; font-size: 0.7rem; font-family: 'Courier New', monospace; color: var(--text-color); } /* Terminal theme: Replace emoji badges with traditional IRC symbols */ [data-theme="terminal"] .permission-badge { font-size: 0; } [data-theme="terminal"] .permission-badge.badge-op::after { content: "@"; font-size: 1rem; font-family: 'Courier New', monospace; color: var(--text-color); } [data-theme="terminal"] .permission-badge.badge-halfop::after { content: "%"; font-size: 1rem; font-family: 'Courier New', monospace; color: var(--text-color); } [data-theme="terminal"] .permission-badge.badge-voice::after { content: "+"; font-size: 1rem; font-family: 'Courier New', monospace; color: var(--text-color); } /* ============================================ Terminal Theme: Emoji Picker & Autocomplete ============================================ */ /* Emoji picker popup - CRT aesthetic */ [data-theme="terminal"] .emoji-picker { background: var(--chat-bg); border: 1px solid var(--primary-color); box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .emoji-picker-header { border-bottom: 1px solid var(--border-color); } [data-theme="terminal"] .emoji-picker-header input { background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-color); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .emoji-picker-header input:focus { border-color: var(--primary-color); box-shadow: 0 0 8px rgba(0, 255, 0, 0.3); } [data-theme="terminal"] .emoji-picker-header input::placeholder { color: var(--light-text); } [data-theme="terminal"] .emoji-picker-close { color: var(--text-color); } [data-theme="terminal"] .emoji-picker-close:hover { color: var(--primary-color); background: transparent; text-shadow: var(--terminal-glow); } [data-theme="terminal"] .emoji-picker-tabs { border-bottom: 1px solid var(--border-color); } [data-theme="terminal"] .emoji-tab { color: var(--text-color); opacity: 0.6; } [data-theme="terminal"] .emoji-tab:hover { background: var(--hover-light); opacity: 1; } [data-theme="terminal"] .emoji-tab.active { background: var(--primary-color); color: var(--chat-bg); opacity: 1; } [data-theme="terminal"] .emoji-categories { border-bottom: 1px solid var(--border-color); } [data-theme="terminal"] .emoji-category-btn { color: var(--text-color); } [data-theme="terminal"] .emoji-category-btn:hover { background: var(--hover-light); text-shadow: var(--terminal-glow-subtle); } [data-theme="terminal"] .emoji-category-header { color: var(--light-text); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; text-shadow: var(--terminal-glow-subtle); } [data-theme="terminal"] .emoji-item:hover { background: var(--hover-light); } [data-theme="terminal"] .emoji-empty-message, [data-theme="terminal"] .emoji-empty-custom { color: var(--light-text); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } /* Emoji autocomplete dropdown */ [data-theme="terminal"] .emoji-autocomplete { background: var(--chat-bg); border: 1px solid var(--primary-color); box-shadow: 0 0 15px rgba(0, 255, 0, 0.3); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .emoji-autocomplete-item { color: var(--text-color); } [data-theme="terminal"] .emoji-autocomplete-item:hover, [data-theme="terminal"] .emoji-autocomplete-item.selected { background: var(--hover-light); } [data-theme="terminal"] .emoji-autocomplete-name { color: var(--light-text); text-shadow: var(--terminal-glow-subtle); } /* Custom emoji manager in settings */ [data-theme="terminal"] .custom-emoji-grid:empty::after { color: var(--light-text); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .custom-emoji-item { background: var(--input-bg); border: 1px solid var(--border-color); } [data-theme="terminal"] .custom-emoji-item:hover { border-color: var(--primary-color); } [data-theme="terminal"] .emoji-add-btn { background: var(--input-bg); border: 1px dashed var(--border-color); color: var(--light-text); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .emoji-add-btn:hover:not(:disabled) { border-color: var(--primary-color); color: var(--text-color); text-shadow: var(--terminal-glow); } [data-theme="terminal"] .emoji-add-btn:disabled { opacity: 0.4; text-shadow: none; } [data-theme="terminal"] .custom-emoji-item .emoji-shortcode { color: var(--primary-color); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; text-shadow: var(--terminal-glow); } [data-theme="terminal"] .custom-emoji-item .emoji-delete-btn { background: var(--danger-color); border: 1px solid var(--danger-color); } [data-theme="terminal"] .custom-emoji-item .emoji-delete-btn:hover { box-shadow: 0 0 8px rgba(255, 0, 0, 0.5); } /* Emoji upload form */ [data-theme="terminal"] .emoji-upload-form { background: var(--dark-bg); border: 1px solid var(--primary-color); box-shadow: 0 0 10px rgba(0, 255, 0, 0.2); } [data-theme="terminal"] .emoji-upload-preview { background: var(--chat-bg); border: 1px solid var(--border-color); } [data-theme="terminal"] .emoji-upload-fields label { color: var(--primary-color); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; text-shadow: var(--terminal-glow-subtle); } [data-theme="terminal"] .shortcode-input-wrapper .shortcode-colon { color: var(--primary-color); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; text-shadow: var(--terminal-glow); } [data-theme="terminal"] .shortcode-input-wrapper input { font-family: 'Courier New', 'Lucida Console', Monaco, monospace; border-color: var(--border-color); } [data-theme="terminal"] .shortcode-input-wrapper input:focus { border-color: var(--primary-color); box-shadow: 0 0 8px rgba(0, 255, 0, 0.3); } [data-theme="terminal"] .emoji-upload-fields small { color: var(--light-text); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } /* Settings modal */ [data-theme="terminal"] .modal-header { border-bottom-color: var(--primary-color); } [data-theme="terminal"] .modal-close { color: var(--light-text); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .modal-close:hover { color: var(--primary-color); text-shadow: var(--terminal-glow); background: transparent; } [data-theme="terminal"] .setting-section-header { border-bottom-color: var(--border-color); font-family: 'Courier New', 'Lucida Console', Monaco, monospace; text-shadow: var(--terminal-glow-subtle); } [data-theme="terminal"] .setting-row > label { font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .setting-row > small { font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .setting-control select { font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .setting-control select:focus { border-color: var(--primary-color); box-shadow: 0 0 8px rgba(0, 255, 0, 0.3); } [data-theme="terminal"] .setting-control-input input { font-family: 'Courier New', 'Lucida Console', Monaco, monospace; } [data-theme="terminal"] .setting-control-input input:focus { border-color: var(--primary-color); box-shadow: 0 0 8px rgba(0, 255, 0, 0.3); } [data-theme="terminal"] .setting-status .spinner { border-color: var(--border-color); border-top-color: var(--primary-color); } [data-theme="terminal"] .setting-status.success { color: var(--success-color); text-shadow: 0 0 8px var(--success-color); } [data-theme="terminal"] .setting-status.error { color: var(--danger-color); text-shadow: 0 0 8px var(--danger-color); } /* ============================================ Theme Transitions ============================================ */ body, .sidebar, .chat-area, .chat-header, .user-list-panel, .modal-content, .input-area, .messages, .btn, .message, .channel-item, .user-item, .autocomplete-dropdown { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Disable transitions during initial load */ .no-transitions, .no-transitions * { transition: none !important; }