修复动画掉帧的问题，增加昼夜切换的过渡动画

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 {

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 = '<p class="search-tip">输入关键词并回车进行搜索</p>';
                     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 `
-                            <div class="search-result-item">
-                                <a href="${item.permalink}" class="search-result-title">${item.title}</a>
-                                <span class="search-result-date">${item.date}</span>
-                                <div class="search-result-summary">${item.summary || ''}</div>
-                            </div>
-                        `;
+                        var path = item.permalink.replace(/^https?:\/\/[^\/]+/, '');
+                        return '<div class="search-result-item" data-href="' + path + '" role="link" tabindex="0">' +
+                            '<span class="search-result-title">' + item.title + '</span>' +
+                            '<span class="search-result-date">' + item.date + '</span>' +
+                            '<div class="search-result-summary">' + (item.summary || '') + '</div>' +
+                            '</div>';
                     }).join('');
                     searchResults.innerHTML = html;
-                    
-                    // Refresh PJAX to recognize new links
-                    if (window.pjax) {
-                        window.pjax.refresh(searchResults);
-                    }
                 } else {
                     searchResults.innerHTML = '<p class="search-tip">未找到相关文章</p>';
                 }
@@ -273,24 +282,18 @@ function initInlineSearch() {
 
         if (results.length > 0) {
                     var html = results.slice(0, 5).map(function(item) {
-                        return `
-                            <a href="${item.permalink}" class="search-result-item">
-                                <span class="search-result-title">${item.title}</span>
-                                <div class="search-result-meta">
-                                     <span class="search-result-date">${item.date}</span>
-                                     <span class="search-result-summary-text">${item.summary || ''}</span>
-                                </div>
-                            </a>
-                        `;
+                        var path = item.permalink.replace(/^https?:\/\/[^\/]+/, '');
+                        return '<div class="search-result-item" data-href="' + path + '" role="link" tabindex="0">' +
+                            '<span class="search-result-title">' + item.title + '</span>' +
+                            '<div class="search-result-meta">' +
+                                '<span class="search-result-date">' + item.date + '</span>' +
+                                '<span class="search-result-summary-text">' + (item.summary || '') + '</span>' +
+                            '</div>' +
+                            '</div>';
                     }).join('');
-                    
+
                     resultsContainer.innerHTML = html;
                     resultsContainer.classList.add('show');
-                    
-                    // PJAX Refresh
-                     if (window.pjax) {
-                         window.pjax.refresh(resultsContainer);
-                     }
                 } else {
             resultsContainer.innerHTML = '<div class="search-result-item no-result">暂无相关内容</div>';
             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;
         }
     });