diff --git a/client/css/style.css b/client/css/style.css index 722f7d6..c2a2ae7 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -19,7 +19,6 @@ body { display: flex; flex-direction: column; box-shadow: 2px 0 8px #e0e0e0a0; - transition: width 0.15s; } .sidebar-user { @@ -41,7 +40,6 @@ body { display: flex; align-items: center; justify-content: center; - transition: background 0.18s; } .settings-btn:hover { @@ -75,21 +73,18 @@ body { flex-direction: column; gap: 10px; pointer-events: auto; - opacity: 0; - transform: translateY(-16px) scale(0.98); - transition: opacity 0.18s, transform 0.18s; + opacity: 1; + transform: translateY(0) scale(1); } .settings-panel-card.open-anim { opacity: 1; transform: translateY(0) scale(1); - transition: opacity 0.18s, transform 0.18s; } .settings-panel-card.close-anim { opacity: 0; transform: translateY(-16px) scale(0.98); - transition: opacity 0.18s, transform 0.18s; } .settings-title { @@ -116,7 +111,6 @@ body { padding: 4px 10px; background: #fafbfc; outline: none; - transition: border 0.2s; } .settings-item select:focus { @@ -146,7 +140,6 @@ body { bottom: 0; background: #e0e0e0; border-radius: 22px; - transition: .2s; } .slider:before { @@ -158,7 +151,6 @@ body { bottom: 3px; background: #fff; border-radius: 50%; - transition: .2s; box-shadow: 0 1px 4px #0001; } @@ -182,7 +174,6 @@ body { z-index: 3; line-height: 1; border-radius: 50%; - transition: background 0.18s, color 0.18s; } .settings-close:hover { @@ -211,7 +202,6 @@ body { .sidebar .join-room:hover { background: #f5f5f5; - transition: box-shadow 0.18s, background 0.18s; } .sidebar .rooms { @@ -227,7 +217,6 @@ body { border-bottom: 2px solid #ededed3b; cursor: pointer; background: #fff; - transition: background 0.2s; border-radius: 10px; margin: 6px 8px; box-sizing: border-box; @@ -297,7 +286,6 @@ body { z-index: 2; user-select: none; pointer-events: none; - transition: background 0.18s, box-shadow 0.18s; } .room:not(.active) .room-unread-badge { @@ -566,7 +554,6 @@ body { align-items: center; justify-content: center; border-radius: 50%; - transition: background 0.2s; } .btn-icon.toggle-emoticons:hover { @@ -603,7 +590,6 @@ body { align-items: center; justify-content: center; cursor: pointer; - transition: box-shadow 0.18s cubic-bezier(.4, 0, .2, 1), background 0.18s cubic-bezier(.4, 0, .2, 1); overflow: hidden; } @@ -622,14 +608,12 @@ body { background: rgba(48, 168, 247, 0.18); opacity: 0; transform: scale(0.5); - transition: opacity 0.3s, transform 0.3s; z-index: 1; } .btn-icon.rp.btn-menu-toggle:active .c-ripple { opacity: 1; transform: scale(1.2); - transition: opacity 0.18s, transform 0.18s; } .tgico.button-icon { @@ -681,7 +665,6 @@ body { padding: 0; margin: 0; line-height: 37px; - transition: opacity 0.2s; white-space: pre; display: flex; align-items: center; @@ -716,7 +699,6 @@ body { justify-content: center; cursor: pointer; position: relative; - transition: box-shadow 0.18s cubic-bezier(.4, 0, .2, 1), background 0.18s cubic-bezier(.4, 0, .2, 1); overflow: hidden; gap: 3px; } @@ -725,46 +707,6 @@ body { background: #f5f5f5; } -.more-btn:active::after { - content: ''; - position: absolute; - left: 50%; - top: 50%; - width: 120%; - height: 120%; - background: rgba(48, 168, 247, 0.18); - border-radius: 50%; - transform: translate(-50%, -50%) scale(1.1); - animation: more-btn-ripple 0.35s cubic-bezier(.4, 0, .2, 1); - z-index: 1; -} - -@keyframes more-btn-ripple { - 0% { - opacity: 0.5; - transform: translate(-50%, -50%) scale(0.7); - } - - 100% { - opacity: 0; - transform: translate(-50%, -50%) scale(1.1); - } -} - -.more-btn-dot { - width: 6px; - height: 6px; - background: #707579; - border-radius: 50%; - display: block; - margin: 0; - transition: background 0.18s; -} - -.more-btn br { - display: none; -} - .more-menu { display: none; position: absolute; @@ -775,7 +717,6 @@ body { box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18); min-width: 120px; z-index: 100; - animation: more-menu-fade-in 0.22s cubic-bezier(.4, 0, .2, 1); font-size: 1rem; width: max-content; user-select: none; @@ -786,7 +727,6 @@ body { --transform-origin-y: center; transform-origin: var(--transform-origin-x) var(--transform-origin-y); transform: var(--transform-extra); - transition: opacity 0.22s cubic-bezier(.4, 0, .2, 1), transform 0.22s cubic-bezier(.4, 0, .2, 1); opacity: 0; pointer-events: none; } @@ -796,26 +736,12 @@ body { opacity: 1; pointer-events: auto; transform: translateY(0); - animation: more-menu-fade-in 0.22s cubic-bezier(.4, 0, .2, 1); } .more-menu.close { opacity: 0; pointer-events: none; transform: translateY(-10px); - transition: opacity 0.18s cubic-bezier(.4, 0, .2, 1), transform 0.18s cubic-bezier(.4, 0, .2, 1); -} - -@keyframes more-menu-fade-in { - from { - opacity: 0; - transform: translateY(-10px); - } - - to { - opacity: 1; - transform: translateY(0); - } } .more-menu-item { @@ -824,7 +750,6 @@ body { border-radius: 6px; font-size: 15px; color: #222; - transition: background 0.15s; margin: 5px 5px; } @@ -839,7 +764,6 @@ body { display: flex; flex-direction: column; box-shadow: -2px 0 8px #e0e0e0a0; - transition: width 0.15s; } .rightbar-header { @@ -887,7 +811,6 @@ body { border-bottom: 1px solid #f3f3f3; border-radius: 8px 8px 0 0; margin-right: 8px; - transition: background 0.2s, color 0.2s; } .rightbar .tabs .active { @@ -909,7 +832,6 @@ body { padding: 10px 18px; border-radius: 8px; margin: 6px 8px; - transition: background 0.2s; } .member:hover { @@ -1001,7 +923,6 @@ body { padding: 14px 14px; font-size: 1.1rem; outline: none; - transition: border 0.2s; background: #fafbfc; } @@ -1020,7 +941,6 @@ body { border-radius: 12px; padding: 14px 0; cursor: pointer; - transition: background 0.18s; letter-spacing: 1px; } @@ -1177,7 +1097,6 @@ body { justify-content: center; cursor: pointer; z-index: 10000; - transition: background 0.18s, color 0.18s; line-height: 1; box-shadow: none; } @@ -1202,18 +1121,6 @@ body { text-align: center; } -@keyframes emoji-panel-fade-in { - from { - opacity: 0; - transform: translateY(10px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - .icon-22-middle { width: 22px; height: 22px; @@ -1246,7 +1153,6 @@ body { } .input-message-input-init { - transition-duration: 0ms; height: 37px; } @@ -1375,7 +1281,6 @@ body { z-index: 1000; height: 100dvh; background: #fff; - transition: transform 0.28s cubic-bezier(.4, 0, .2, 1), box-shadow 0.18s; box-shadow: 2px 0 16px #0002; } @@ -1428,7 +1333,6 @@ body { z-index: 1100; cursor: pointer; border-radius: 50%; - transition: background 0.18s, box-shadow 0.18s, transform 0.22s cubic-bezier(.4, 0, .2, 1); opacity: 1; will-change: transform, opacity; color: #707070; diff --git a/client/js/ui.js b/client/js/ui.js index e54103a..054a885 100644 --- a/client/js/ui.js +++ b/client/js/ui.js @@ -145,42 +145,7 @@ export function setupMoreBtnMenu() { const btn = $id('more-btn'); const menu = $id('more-menu'); if (!btn || !menu) return; - let menuRect = null; let animating = false; - let isMouseMoveBound = false; - - // Mouse move event for closing menu if mouse leaves - // 鼠标移出菜单区域时关闭菜单 - function onMouseMove(ev) { - if (!menuRect) return; - const mx = ev.clientX, - my = ev.clientY; - const btnRect = btn.getBoundingClientRect(); - const safe = 100; - const inMenu = mx >= menuRect.left - safe && mx <= menuRect.right + safe && my >= menuRect.top - safe && my <= menuRect.bottom + safe; - const inBtn = mx >= btnRect.left - safe && mx <= btnRect.right + safe && my >= btnRect.top - safe && my <= btnRect.bottom + safe; - if (!inMenu && !inBtn) { - closeMenu() - } - } - - // Bind mousemove event - // 绑定鼠标移动事件 - function bindMouseMove() { - if (!isMouseMoveBound) { - window.addEventListener('mousemove', onMouseMove); - isMouseMoveBound = true - } - } - - // Unbind mousemove event - // 解绑鼠标移动事件 - function unbindMouseMove() { - if (isMouseMoveBound) { - window.removeEventListener('mousemove', onMouseMove); - isMouseMoveBound = false - } - } // Open the menu // 打开菜单 @@ -188,8 +153,6 @@ export function setupMoreBtnMenu() { menu.classList.remove('close'); menu.classList.add('open'); menu.style.display = 'block'; - menuRect = menu.getBoundingClientRect(); - bindMouseMove() } // Close the menu @@ -202,9 +165,7 @@ export function setupMoreBtnMenu() { setTimeout(() => { if (menu.classList.contains('close')) menu.style.display = 'none'; animating = false; - unbindMouseMove() }, 180); - menuRect = null } btn.onclick = function(e) { e.stopPropagation(); diff --git a/client/js/util.emoji.js b/client/js/util.emoji.js index 60cd1bb..99620cc 100644 --- a/client/js/util.emoji.js +++ b/client/js/util.emoji.js @@ -11,7 +11,7 @@ const addEmojiPickerStyles = () => { if (document.querySelector('#emoji-picker-styles')) return; const style = document.createElement('style'); style.id = 'emoji-picker-styles'; - style.textContent = `emoji-picker{--background:#fff;--border-color:rgba(0,0,0,0.1);--border-radius:10px;--emoji-padding:0.4rem;--category-emoji-size:1.2rem;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;position:absolute;bottom:60px;left:22px;z-index:5;box-shadow:0 3px 12px rgba(0,0,0,0.15);animation:emoji-panel-fade-in 0.18s;width:320px;display:none}@keyframes emoji-panel-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}`; + style.textContent = `emoji-picker{--background:#fff;--border-color:rgba(0,0,0,0.1);--border-radius:10px;--emoji-padding:0.4rem;--category-emoji-size:1.2rem;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;position:absolute;bottom:60px;left:22px;z-index:5;box-shadow:0 3px 12px rgba(0,0,0,0.15);width:320px;display:none}`; document.head.appendChild(style) }; // Setup emoji picker for chat input diff --git a/client/js/util.settings.js b/client/js/util.settings.js index 6dcbc6f..3ef4bf5 100644 --- a/client/js/util.settings.js +++ b/client/js/util.settings.js @@ -146,35 +146,6 @@ function openSettingsPanel() { card.style.transform = 'translateX(0)'; removeClass(card, 'close-anim'); addClass(card, 'open-anim'); - - function onMouseMove(ev) { - const cardRect = card.getBoundingClientRect(); - const safe = 60; - const mx = ev.clientX, - my = ev.clientY; - const inCard = mx >= cardRect.left - safe && mx <= cardRect.right + safe && my >= cardRect.top - safe && my <= cardRect.bottom + safe; - const btnRect = btn.getBoundingClientRect(); - const inBtn = mx >= btnRect.left - safe && mx <= btnRect.right + safe && my >= btnRect.top - safe && my <= btnRect.bottom + safe; - if (!inCard && !inBtn) { - closeSettingsPanel() - } - } - - function bindMouseMove() { - if (!panel._mousemoveBound) { - on(window, 'mousemove', onMouseMove); - panel._mousemoveBound = true - } - } - - function unbindMouseMove() { - if (panel._mousemoveBound) { - off(window, 'mousemove', onMouseMove); - panel._mousemoveBound = false - } - } - bindMouseMove(); - panel._unbind = unbindMouseMove } // Close the settings panel @@ -186,7 +157,6 @@ function closeSettingsPanel() { if (!card) return; removeClass(card, 'open-anim'); addClass(card, 'close-anim'); - if (panel._unbind) panel._unbind(); setTimeout(() => { panel.style.display = 'none'; removeClass(card, 'close-anim')