zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zqlit committed 2026-05-24 14:43:34 +08:00
1 parent 624d0bda0f
commit ff228ae6f5
2 files changed
+180 -143
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/Ying/assets/css/main.css
+139 -109
View File
@@ -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;
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
+41 -34
View File
@@ -94,10 +94,25 @@ 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')) {
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;
}
});
@@ -128,20 +143,14 @@ function initSearchModal() {
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) {
var item = e.target.closest('.search-result-item');
if (!item) return;
var href = item.getAttribute('data-href');
if (!href) return;
e.preventDefault();
// Close search first
e.stopPropagation();
window.toggleSearchMode(false);
// Then navigate
window.pjax.loadUrl(link.href, { triggerElement: link });
if (window.pjax) {
window.pjax.loadUrl(href, { triggerElement: item });
} else {
window.location.href = href;
}
});