修复动画掉帧的问题，增加昼夜切换的过渡动画
This commit is contained in:
zqlit committed
1 parent
624d0bda0f
commit
ff228ae6f5
2 files changed
+187
-150
No files matched your search
+140
-110
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user