优化性能提交新功能
This commit is contained in:
zqlit committed
1 parent
9ab38b6e6a
commit
b83d6adb76
6 files changed
+506
-245
No files matched your search
+91
-141
@@ -236,7 +236,7 @@ code::-webkit-scrollbar {
|
||||
}
|
||||
|
||||
.code-expand-btn {
|
||||
display: none;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
@@ -256,9 +256,11 @@ code::-webkit-scrollbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Show button when collapsed */
|
||||
.code-fold-container.collapsed .code-expand-btn {
|
||||
display: flex;
|
||||
.code-fold-container:not(.collapsed) .code-expand-btn {
|
||||
position: sticky;
|
||||
bottom: 10px;
|
||||
margin: 10px auto 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Button Pill Style */
|
||||
@@ -433,12 +435,48 @@ table td {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 4px;
|
||||
font-weight: 300;
|
||||
border-left: 3.8px solid rgb(80 80 80);
|
||||
background-color: rgba(51 51 51/5%);
|
||||
padding-left: 20px;
|
||||
word-break: break-all;
|
||||
position: relative;
|
||||
margin: 1.2rem 0;
|
||||
padding: 14px 17px 14px 20px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-left: 4px solid rgba(0, 0, 0, 0.72);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
|
||||
color: rgba(30, 30, 30, 0.92);
|
||||
font-size: 0.95em;
|
||||
font-weight: 400;
|
||||
line-height: 1.68;
|
||||
word-break: break-word;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "“";
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 13px;
|
||||
color: rgba(0, 0, 0, 0.08);
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
font-family: Georgia, serif;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
position: relative;
|
||||
margin: 0.25rem 0 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] blockquote {
|
||||
border-color: rgba(148, 163, 184, 0.18);
|
||||
border-left-color: rgba(168, 181, 205, 0.82);
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.78));
|
||||
color: rgba(226, 232, 240, 0.96);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
[data-theme="dark"] blockquote::before {
|
||||
color: rgba(203, 213, 225, 0.16);
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -567,16 +605,22 @@ ul {
|
||||
}
|
||||
|
||||
.header-avatar {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-right: 16px;
|
||||
padding: 0;
|
||||
padding: 8px 10px 8px 8px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.avatar-theme-tip {
|
||||
margin-left: 10px;
|
||||
margin-left: 0;
|
||||
pointer-events: none;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: #111827;
|
||||
@@ -1416,52 +1460,6 @@ ul {
|
||||
background: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
/* Expandable Code Blocks */
|
||||
.highlight.collapsed {
|
||||
max-height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlight.collapsed::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: linear-gradient(to bottom, transparent, #f6f8fa);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .highlight.collapsed::after {
|
||||
background: linear-gradient(to bottom, transparent, #282a36);
|
||||
}
|
||||
|
||||
.expand-btn-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.highlight.collapsed .expand-btn-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
background: var(--link-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .highlight {
|
||||
background: #282a36; /* Night Mode: Dark BG (Dracula) */
|
||||
color: #f8f8f2; /* Night Mode: Light Text */
|
||||
@@ -3018,59 +3016,6 @@ input[type=submit] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.post-content .sen-image-frame[data-title]::after,
|
||||
.entry-content .sen-image-frame[data-title]::after {
|
||||
content: attr(data-title);
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
max-width: calc(100% - 20px);
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: rgba(0, 0, 0, 0.82);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(4px) translateZ(0);
|
||||
transition: opacity 0.4s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
|
||||
transform 0.4s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.post-content .sen-image-frame.is-visible[data-title]::after,
|
||||
.entry-content .sen-image-frame.is-visible[data-title]::after {
|
||||
opacity: 1;
|
||||
transform: translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .post-content .sen-image-frame[data-title]::after,
|
||||
[data-theme="dark"] .entry-content .sen-image-frame[data-title]::after {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
background: rgba(0, 0, 0, 0.62);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.post-content .sen-image-frame[data-title]::after,
|
||||
.entry-content .sen-image-frame[data-title]::after {
|
||||
left: 8px;
|
||||
bottom: 8px;
|
||||
max-width: calc(100% - 16px);
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置进度条的背景色 */
|
||||
.bar {
|
||||
background: #2aae67 !important;
|
||||
@@ -3582,8 +3527,8 @@ input[type=submit] {
|
||||
.floating-tools a {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
color: rgba(24, 24, 27, 0.86);
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
@@ -3591,30 +3536,30 @@ input[type=submit] {
|
||||
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);
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
|
||||
transform: translateZ(0);
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.floating-tools a:hover {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
background: #fff;
|
||||
transform: translateZ(0) translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
[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);
|
||||
background: rgba(30, 41, 59, 0.94);
|
||||
color: rgba(241, 245, 249, 0.9);
|
||||
border-color: rgba(148, 163, 184, 0.22);
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
[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);
|
||||
background: rgba(51, 65, 85, 0.98);
|
||||
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
|
||||
/* ── ViewImage — Apple-style lightbox ── */
|
||||
@@ -3710,7 +3655,7 @@ input[type=submit] {
|
||||
.img-grid {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin: 0.6rem 0;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.img-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
|
||||
@@ -3740,17 +3685,23 @@ input[type=submit] {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Suppress title overlay inside grids */
|
||||
.img-grid .sen-image-frame[data-title]::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile: reduce to 2 columns */
|
||||
@media screen and (max-width: 480px) {
|
||||
/* Mobile: reduce columns for smaller screens */
|
||||
@media screen and (max-width: 640px) {
|
||||
.img-grid.cols-3,
|
||||
.img-grid.cols-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.img-grid .sen-image-frame {
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.img-grid.cols-2,
|
||||
.img-grid.cols-3,
|
||||
.img-grid.cols-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Toast ── */
|
||||
@@ -3777,8 +3728,8 @@ input[type=submit] {
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 0.28s ease, transform 0.28s ease;
|
||||
pointer-events: auto;
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
@@ -3814,8 +3765,8 @@ input[type=submit] {
|
||||
[data-theme="dark"] .ying-toast--info {
|
||||
background: rgba(159, 196, 244, 0.22);
|
||||
color: #f3f7fd;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@@ -4545,8 +4496,7 @@ hr,
|
||||
color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
fill 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
/* --- Transition Effects (Deprecated old block) --- */
|
||||
|
||||
Reference in new issue
Block a user