From ff228ae6f54ebcd425435c73df7d244b2dfd6418 Mon Sep 17 00:00:00 2001 From: zqlit Date: Sun, 24 May 2026 14:43:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8A=A8=E7=94=BB=E6=8E=89?= =?UTF-8?q?=E5=B8=A7=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=98=BC=E5=A4=9C=E5=88=87=E6=8D=A2=E7=9A=84=E8=BF=87=E6=B8=A1?= =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/Ying/assets/css/main.css | 250 +++++++++++++----------- themes/Ying/assets/js/modules/search.js | 87 +++++---- 2 files changed, 187 insertions(+), 150 deletions(-) diff --git a/themes/Ying/assets/css/main.css b/themes/Ying/assets/css/main.css index e925e6f4..3a8a89e9 100644 --- a/themes/Ying/assets/css/main.css +++ b/themes/Ying/assets/css/main.css @@ -566,11 +566,6 @@ ul { backdrop-filter: blur(10px); } - .floating-tools a { - -webkit-backdrop-filter: blur(4px) saturate(140%); - backdrop-filter: blur(4px) saturate(140%); - } - .atk-loading { -webkit-backdrop-filter: none; backdrop-filter: none; @@ -3589,29 +3584,65 @@ input[type=submit] { /* Floating Tools */ .floating-tools { position: fixed; - bottom: 30px; - right: 15px; - z-index: 900; /* Lowered from max-int to be below modals and lightbox */ + bottom: 28px; + right: 16px; + z-index: 900; display: flex; flex-direction: column; - gap: 10px; + gap: 8px; align-items: center; - /* GPU Acceleration for container */ transform: translateZ(0); will-change: transform; - /* Ensure visibility stability */ - opacity: 1; + opacity: 1; visibility: visible; - transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; + transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } .floating-tools.hidden { opacity: 0 !important; visibility: hidden !important; - transform: translateZ(0) translateY(20px) !important; + transform: translateZ(0) translateY(12px) !important; pointer-events: none !important; } +.floating-tools a { + width: 42px; + height: 42px; + background: rgba(255, 255, 255, 0.68); + color: rgba(0, 0, 0, 0.75); + border-radius: 50%; + font-size: 20px; + cursor: pointer; + text-decoration: none; + display: flex; + justify-content: center; + align-items: center; + -webkit-backdrop-filter: blur(16px) saturate(180%); + backdrop-filter: blur(16px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.5); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); + transform: translateZ(0); + transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; +} + +.floating-tools a:hover { + background: rgba(255, 255, 255, 0.88); + transform: translateZ(0) translateY(-2px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); +} + +[data-theme="dark"] .floating-tools a { + background: rgba(30, 30, 35, 0.62); + color: rgba(220, 220, 230, 0.78); + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22); +} + +[data-theme="dark"] .floating-tools a:hover { + background: rgba(45, 45, 50, 0.78); + box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32); +} + /* ── ViewImage: Apple frosted glass lightbox ── */ .view-image { z-index: 2000 !important; @@ -3835,57 +3866,12 @@ input[type=submit] { } } -.floating-tools a { - width: 40px; - height: 40px; - background-color: rgba(255, 255, 255, 0.75); /* Frosted glass opacity */ - color: #333; - border-radius: 50%; - text-align: center; - line-height: 40px; - font-size: 24px; - box-shadow: 0 4px 10px rgba(0,0,0,0.1); - cursor: pointer; - text-decoration: none; - display: flex; - justify-content: center; - align-items: center; - /* Optimized transition: specific properties instead of all */ - transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease; - /* Restored backdrop-filter */ - backdrop-filter: blur(4px) saturate(140%); - -webkit-backdrop-filter: blur(4px) saturate(140%); - border: 1px solid rgba(255, 255, 255, 0.4); - /* GPU Acceleration for individual items */ - transform: translate3d(0, 0, 0); - will-change: transform, opacity; -} - -.floating-tools a:hover { - background-color: rgba(255, 255, 255, 0.85); - color: var(--erji-color); - transform: translateY(-3px); - box-shadow: 0 6px 15px rgba(0,0,0,0.15); -} - -[data-theme="dark"] .floating-tools a { - background-color: rgba(30, 30, 30, 0.6); - color: #e5e7eb; - box-shadow: 0 4px 10px rgba(0,0,0,0.3); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -[data-theme="dark"] .floating-tools a:hover { - background-color: rgba(60, 60, 60, 0.8); - color: #fff; -} - /* Back to Top Button */ #back-to-top { opacity: 0; visibility: hidden; height: 0; - width: 40px; + width: 42px; margin: 0; padding: 0; overflow: hidden; @@ -3902,8 +3888,8 @@ input[type=submit] { #back-to-top.show { opacity: 1; visibility: visible; - height: 40px; - width: 40px; + height: 42px; + width: 42px; margin-top: 0; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto; @@ -4673,44 +4659,44 @@ html[data-theme="light"] .atk-loading-spinner svg circle { /* Search Modal Styles */ .search-modal { - display: none; /* Hidden by default */ position: fixed; z-index: 1000; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ - /* Removed backdrop-filter for performance */ - /* backdrop-filter: blur(5px); */ - /* -webkit-backdrop-filter: blur(5px); */ + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.28); + -webkit-backdrop-filter: blur(6px); + backdrop-filter: blur(6px); opacity: 0; - transition: opacity 0.3s ease; + visibility: hidden; + pointer-events: none; + transition: opacity 0.28s ease, visibility 0.28s ease; } .search-modal.show { - display: flex; opacity: 1; - align-items: center; - justify-content: center; + visibility: visible; + pointer-events: auto; } .search-modal-content { - background-color: #fefefe; + background: rgba(255, 255, 255, 0.94); margin: auto; - padding: 20px; - border: 1px solid #888; - width: 80%; - max-width: 600px; - border-radius: 12px; - box-shadow: 0 4px 20px rgba(0,0,0,0.1); - transform: translateY(-20px); - transition: transform 0.3s ease; + padding: 24px; + border: 1px solid rgba(0, 0, 0, 0.06); + width: 86%; + max-width: 540px; + border-radius: 14px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); + opacity: 0; + transform: translateY(18px) scale(0.97); + transition: opacity 0.28s 0.04s ease, transform 0.32s 0.04s cubic-bezier(0.22, 0.61, 0.36, 1); } .search-modal.show .search-modal-content { - transform: translateY(0); + opacity: 1; + transform: translateY(0) scale(1); } .search-header { @@ -4745,11 +4731,18 @@ html[data-theme="light"] .atk-loading-spinner svg circle { .search-input-wrapper { display: flex; - margin-bottom: 20px; - border: 1px solid #ddd; - border-radius: 8px; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 10px; + margin-bottom: 16px; padding: 5px 10px; - background: #f9f9f9; + background: rgba(0, 0, 0, 0.025); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.search-input-wrapper:focus-within { + border-color: rgba(0, 0, 0, 0.18); + box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04); } .search-input-wrapper input { @@ -4775,36 +4768,33 @@ html[data-theme="light"] .atk-loading-spinner svg circle { } .search-result-item { - padding: 15px; - border-bottom: 1px solid #f0f0f0; - transition: background-color 0.2s; + padding: 14px 16px; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + cursor: pointer; + transition: background 0.18s ease; } .search-result-item:last-child { border-bottom: none; } -.search-result-item:hover { - background-color: #f5f5f5; +.search-result-item:hover, +.search-result-item:focus-visible { + background: rgba(0, 0, 0, 0.04); } .search-result-title { - font-size: 16px; + font-size: 15px; font-weight: 600; - margin-bottom: 5px; + margin-bottom: 4px; display: block; - color: #333; - text-decoration: none; -} - -.search-result-title:hover { - color: var(--text-highlight-color); + color: var(--text-content-color, #24292e); } .search-result-date { font-size: 12px; color: #999; - margin-bottom: 5px; + margin-bottom: 4px; display: block; } @@ -4825,10 +4815,49 @@ html[data-theme="light"] .atk-loading-spinner svg circle { } /* Dark Mode Adaptation */ +[data-theme="dark"] .search-modal { + background: rgba(0, 0, 0, 0.48); +} + [data-theme="dark"] .search-modal-content { - background-color: #2d2d2d; - border-color: #444; + background: rgba(30, 33, 40, 0.94); + border-color: rgba(255, 255, 255, 0.08); color: #e0e0e0; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); +} + +[data-theme="dark"] .search-header { + border-bottom-color: rgba(255, 255, 255, 0.08); +} + +[data-theme="dark"] .search-header h3 { + color: #e5e7eb; +} + +[data-theme="dark"] .close-search { + color: #888; +} + +[data-theme="dark"] .search-result-item { + border-bottom-color: rgba(255, 255, 255, 0.06); +} + +[data-theme="dark"] .search-result-title { + color: #e5e7eb; +} + +[data-theme="dark"] .search-result-summary { + color: #999; +} + +[data-theme="dark"] .search-input-wrapper input { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.1); + color: #e0e0e0; +} + +[data-theme="dark"] .search-tip { + color: #666; } [data-theme="dark"] .search-header { @@ -4848,12 +4877,13 @@ html[data-theme="light"] .atk-loading-spinner svg circle { } [data-theme="dark"] .search-input-wrapper { - background: #333; - border-color: #555; + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.08); } -[data-theme="dark"] .search-input-wrapper input { - color: #e0e0e0; +[data-theme="dark"] .search-input-wrapper:focus-within { + border-color: rgba(255, 255, 255, 0.16); + box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04); } [data-theme="dark"] .search-input-wrapper button { diff --git a/themes/Ying/assets/js/modules/search.js b/themes/Ying/assets/js/modules/search.js index f5a7253a..5976acf7 100644 --- a/themes/Ying/assets/js/modules/search.js +++ b/themes/Ying/assets/js/modules/search.js @@ -94,16 +94,31 @@ function initSearchModal() { searchResults.parentNode.replaceChild(newResults, searchResults); searchResults = newResults; - // Close modal when a result is clicked + // Result click — use data-href to avoid pjax anchor conflicts searchResults.addEventListener('click', function(e) { - if (e.target.closest('a')) { - searchModal.classList.remove('show'); + var item = e.target.closest('.search-result-item'); + if (!item) return; + var href = item.getAttribute('data-href'); + if (!href) return; + e.preventDefault(); + e.stopPropagation(); + searchModal.classList.remove('show'); + searchModal.style.transition = 'none'; + requestAnimationFrame(function() { + requestAnimationFrame(function() { + searchModal.style.transition = ''; + }); + }); + if (window.pjax) { + window.pjax.loadUrl(href, { triggerElement: item }); + } else { + window.location.href = href; } }); searchInput.addEventListener('input', debounce(function() { var query = this.value.trim().toLowerCase(); - + if (query.length === 0) { searchResults.innerHTML = '

输入关键词并回车进行搜索

'; return; @@ -122,26 +137,20 @@ function initSearchModal() { } var results = window.searchIndex.filter(function(item) { - return (item.title && item.title.toLowerCase().includes(query)) || + return (item.title && item.title.toLowerCase().includes(query)) || (item.summary && item.summary.toLowerCase().includes(query)); }); if (results.length > 0) { var html = results.map(function(item) { - return ` -
- ${item.title} - ${item.date} -
${item.summary || ''}
-
- `; + var path = item.permalink.replace(/^https?:\/\/[^\/]+/, ''); + return '
' + + '' + item.title + '' + + '' + item.date + '' + + '
' + (item.summary || '') + '
' + + '
'; }).join(''); searchResults.innerHTML = html; - - // Refresh PJAX to recognize new links - if (window.pjax) { - window.pjax.refresh(searchResults); - } } else { searchResults.innerHTML = '

未找到相关文章

'; } @@ -273,24 +282,18 @@ function initInlineSearch() { if (results.length > 0) { var html = results.slice(0, 5).map(function(item) { - return ` - - ${item.title} -
- ${item.date} - ${item.summary || ''} -
- - `; + var path = item.permalink.replace(/^https?:\/\/[^\/]+/, ''); + return '
' + + '' + item.title + '' + + '
' + + '' + item.date + '' + + '' + (item.summary || '') + '' + + '
' + + '
'; }).join(''); - + resultsContainer.innerHTML = html; resultsContainer.classList.add('show'); - - // PJAX Refresh - if (window.pjax) { - window.pjax.refresh(resultsContainer); - } } else { resultsContainer.innerHTML = '
暂无相关内容
'; resultsContainer.classList.add('show'); @@ -315,15 +318,19 @@ function initInlineSearch() { document.addEventListener('click', window.inlineSearchClickOutside); } - // Manual PJAX delegation for results + // Click delegation for results resultsContainer.addEventListener('click', function(e) { - var link = e.target.closest('a'); - if (link && window.pjax) { - e.preventDefault(); - // Close search first - window.toggleSearchMode(false); - // Then navigate - window.pjax.loadUrl(link.href, { triggerElement: link }); + var item = e.target.closest('.search-result-item'); + if (!item) return; + var href = item.getAttribute('data-href'); + if (!href) return; + e.preventDefault(); + e.stopPropagation(); + window.toggleSearchMode(false); + if (window.pjax) { + window.pjax.loadUrl(href, { triggerElement: item }); + } else { + window.location.href = href; } });