2022 主题bug修复
This commit is contained in:
Vaica committed
1 parent
a6b1098d60
commit
56ea059fc0
16 files changed
+1357
-334
No files matched your search
@@ -53,6 +53,22 @@ body {
|
||||
[data-theme="dark"] body {
|
||||
color: var(--text-content-dark-color);
|
||||
background-color: var(--background-dark-color);
|
||||
background-image: url(/image/background/deno.webp);
|
||||
background-repeat: round;
|
||||
background-size: contain;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
[data-theme="dark"] body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 主容器 - 关键布局 */
|
||||
|
||||
@@ -40,10 +40,22 @@ html {
|
||||
[data-theme="dark"] body {
|
||||
color: var(--text-content-dark-color);
|
||||
background-color: var(--background-dark-color);
|
||||
background-image: none !important;
|
||||
background-repeat: initial !important;
|
||||
background-size: initial !important;
|
||||
background-attachment: initial !important;
|
||||
background-image: url(/image/background/deno.webp) !important;
|
||||
background-repeat: round !important;
|
||||
background-size: contain !important;
|
||||
background-attachment: fixed !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .main {
|
||||
@@ -219,6 +231,11 @@ code::-webkit-scrollbar {
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.code-fold-container.collapsed {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.code-fold-container.collapsed .highlight,
|
||||
@@ -257,10 +274,16 @@ code::-webkit-scrollbar {
|
||||
}
|
||||
|
||||
.code-fold-container:not(.collapsed) .code-expand-btn {
|
||||
position: sticky;
|
||||
bottom: 10px;
|
||||
margin: 10px auto 0;
|
||||
transform: none;
|
||||
position: absolute !important;
|
||||
bottom: 10px !important;
|
||||
left: 50% !important;
|
||||
margin: 0 !important;
|
||||
transform: translateX(-50%) !important;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
width: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Button Pill Style */
|
||||
@@ -5400,88 +5423,103 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
|
||||
|
||||
|
||||
|
||||
/* Link Card - only in post content */
|
||||
/* Link Card - Minimal Black/White Style */
|
||||
a.link-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
padding: 14px 16px;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.015), rgba(0, 0, 0, 0.005));
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
text-decoration: none !important;
|
||||
color: #1e1e1e;
|
||||
color: #1a1a1a;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
max-width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.25s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
a.link-card:hover {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
a.link-card .link-card-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 5px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
object-fit: cover;
|
||||
background: #f5f5f5;
|
||||
padding: 4px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
a.link-card:hover .link-card-icon {
|
||||
background: #eee;
|
||||
}
|
||||
a.link-card .link-card-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
gap: 2px;
|
||||
}
|
||||
a.link-card .link-card-title {
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 13.5px;
|
||||
color: rgba(30, 30, 30, 0.92);
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
a.link-card .link-card-url {
|
||||
font-size: 11px;
|
||||
color: rgba(30, 30, 30, 0.45);
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', Monaco, monospace;
|
||||
}
|
||||
a.link-card .link-card-arrow {
|
||||
flex-shrink: 0;
|
||||
color: rgba(30, 30, 30, 0.3);
|
||||
font-size: 13px;
|
||||
transition: color 0.2s;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
a.link-card:hover .link-card-arrow {
|
||||
color: rgba(30, 30, 30, 0.6);
|
||||
color: #333;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
[data-theme="dark"] a.link-card {
|
||||
border-color: rgba(148, 163, 184, 0.15);
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.5));
|
||||
color: #e2e8f0;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(30, 30, 30, 0.85);
|
||||
color: #e5e5e5;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
[data-theme="dark"] a.link-card:hover {
|
||||
border-color: rgba(148, 163, 184, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
[data-theme="dark"] a.link-card .link-card-icon {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
[data-theme="dark"] a.link-card:hover .link-card-icon {
|
||||
background: #333;
|
||||
}
|
||||
[data-theme="dark"] a.link-card .link-card-title {
|
||||
color: rgba(226, 232, 240, 0.96);
|
||||
color: #e5e5e5;
|
||||
}
|
||||
[data-theme="dark"] a.link-card .link-card-url {
|
||||
color: rgba(226, 232, 240, 0.4);
|
||||
color: #888;
|
||||
}
|
||||
[data-theme="dark"] a.link-card .link-card-arrow {
|
||||
color: rgba(226, 232, 240, 0.3);
|
||||
color: #666;
|
||||
}
|
||||
[data-theme="dark"] a.link-card:hover .link-card-arrow {
|
||||
color: rgba(226, 232, 240, 0.6);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Reward System */
|
||||
@@ -5886,3 +5924,10 @@ a.link-card:hover .link-card-arrow {
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* 移动端隐藏阅读时间 */
|
||||
@media (max-width: 768px) {
|
||||
.meta-item-reading-time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -2,7 +2,7 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 文章图片灯箱
|
||||
if (window.ViewImage) {
|
||||
ViewImage.init('.post-content img');
|
||||
ViewImage.init('.post-content img:not(.amigo-music-card__cover):not(.amigo-voice-avatar):not(.amigo-livephoto-img)');
|
||||
}
|
||||
|
||||
// 灯箱增强：滚动关闭 + fade scale 退回动画
|
||||
@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
var clickedImg = null;
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
var img = e.target.closest('.post-content img');
|
||||
var img = e.target.closest('.post-content img:not(.amigo-music-card__cover):not(.amigo-voice-avatar):not(.amigo-livephoto-img)');
|
||||
if (img) clickedImg = img;
|
||||
}, true);
|
||||
|
||||
|
||||
@@ -8,34 +8,20 @@
|
||||
// ============================================================
|
||||
|
||||
function initLivePhotoShortcodes() {
|
||||
document.querySelectorAll('.live-photo').forEach(function(livePhoto) {
|
||||
document.querySelectorAll('.amigo-livephoto').forEach(function(livePhoto) {
|
||||
if (livePhoto.__liveBound) return;
|
||||
livePhoto.__liveBound = true;
|
||||
|
||||
var video = livePhoto.querySelector('video.live-photo-video') || livePhoto.querySelector('video');
|
||||
var posterImg = livePhoto.querySelector('img.live-photo-poster') || livePhoto.querySelector('img');
|
||||
var toggleBtn = livePhoto.querySelector('.live-photo-toggle-btn');
|
||||
var muteBtn = livePhoto.querySelector('.live-photo-mute-btn');
|
||||
var video = livePhoto.querySelector('.amigo-livephoto-video');
|
||||
var posterImg = livePhoto.querySelector('.amigo-livephoto-img');
|
||||
var soundBtn = livePhoto.querySelector('.amigo-livephoto-sound');
|
||||
|
||||
if (!video || !toggleBtn || !muteBtn) return;
|
||||
if (!video) return;
|
||||
|
||||
var HOVER_DELAY = 500;
|
||||
var hoverTimer = null;
|
||||
var isLoaded = false;
|
||||
|
||||
function syncAspectFromPoster() {
|
||||
if (!posterImg) return;
|
||||
var w = posterImg.naturalWidth || 0;
|
||||
var h = posterImg.naturalHeight || 0;
|
||||
if (!w || !h) return;
|
||||
livePhoto.style.setProperty('--live-photo-aspect', w + ' / ' + h);
|
||||
}
|
||||
|
||||
if (posterImg && posterImg.complete) {
|
||||
syncAspectFromPoster();
|
||||
} else if (posterImg) {
|
||||
posterImg.addEventListener('load', syncAspectFromPoster, { once: true });
|
||||
}
|
||||
var isUserToggled = false;
|
||||
|
||||
function ensureLoaded() {
|
||||
if (isLoaded) return;
|
||||
@@ -50,69 +36,66 @@ function initLivePhotoShortcodes() {
|
||||
|
||||
function setMuted(isMuted) {
|
||||
video.muted = !!isMuted;
|
||||
if (isMuted) video.setAttribute('muted', '');
|
||||
else video.removeAttribute('muted');
|
||||
muteBtn.setAttribute('data-muted', isMuted ? 'true' : 'false');
|
||||
if (isMuted) {
|
||||
video.setAttribute('muted', '');
|
||||
livePhoto.classList.add('is-muted');
|
||||
} else {
|
||||
video.removeAttribute('muted');
|
||||
livePhoto.classList.remove('is-muted');
|
||||
}
|
||||
}
|
||||
|
||||
setMuted(true);
|
||||
|
||||
function playVideo() {
|
||||
ensureLoaded();
|
||||
livePhoto.classList.add('is-playing');
|
||||
toggleBtn.setAttribute('data-state', 'live');
|
||||
try { video.play(); } catch (e) {}
|
||||
}
|
||||
|
||||
function stopVideo() {
|
||||
livePhoto.classList.remove('is-playing');
|
||||
toggleBtn.setAttribute('data-state', 'static');
|
||||
try { video.pause(); video.currentTime = 0; } catch (e) {}
|
||||
}
|
||||
|
||||
// Toggle button click
|
||||
toggleBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
function togglePlay() {
|
||||
if (livePhoto.classList.contains('is-playing')) {
|
||||
isUserToggled = false;
|
||||
stopVideo();
|
||||
} else {
|
||||
isUserToggled = true;
|
||||
playVideo();
|
||||
}
|
||||
}
|
||||
|
||||
// Click to toggle
|
||||
livePhoto.addEventListener('click', function() {
|
||||
togglePlay();
|
||||
});
|
||||
|
||||
// Mute button click
|
||||
muteBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
setMuted(!video.muted);
|
||||
});
|
||||
// Sound button click
|
||||
if (soundBtn) {
|
||||
soundBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
setMuted(!video.muted);
|
||||
});
|
||||
}
|
||||
|
||||
// Hover to play
|
||||
livePhoto.addEventListener('mouseenter', function() {
|
||||
hoverTimer = setTimeout(playVideo, HOVER_DELAY);
|
||||
});
|
||||
// Hover to play (desktop)
|
||||
if ('ontouchstart' in window === false) {
|
||||
livePhoto.addEventListener('mouseenter', function() {
|
||||
if (isUserToggled) return;
|
||||
hoverTimer = setTimeout(playVideo, HOVER_DELAY);
|
||||
});
|
||||
|
||||
livePhoto.addEventListener('mouseleave', function() {
|
||||
clearTimeout(hoverTimer);
|
||||
if (toggleBtn.getAttribute('data-state') !== 'live') {
|
||||
stopVideo();
|
||||
}
|
||||
});
|
||||
livePhoto.addEventListener('mouseleave', function() {
|
||||
clearTimeout(hoverTimer);
|
||||
if (!isUserToggled) {
|
||||
stopVideo();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile touch
|
||||
livePhoto.addEventListener('touchstart', function() {
|
||||
if (livePhoto.classList.contains('is-playing')) {
|
||||
stopVideo();
|
||||
} else {
|
||||
playVideo();
|
||||
}
|
||||
});
|
||||
|
||||
// Video ended
|
||||
video.addEventListener('ended', function() {
|
||||
if (toggleBtn.getAttribute('data-state') !== 'live') {
|
||||
stopVideo();
|
||||
}
|
||||
});
|
||||
// Initialize muted state
|
||||
setMuted(livePhoto.classList.contains('is-muted'));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -147,24 +130,24 @@ function initVoiceBubbles() {
|
||||
if (isPlaying) {
|
||||
audio.pause();
|
||||
audio.currentTime = 0;
|
||||
bubble.classList.remove('playing');
|
||||
bubble.classList.remove('is-playing');
|
||||
isPlaying = false;
|
||||
} else {
|
||||
// Stop other playing voices
|
||||
document.querySelectorAll('.amigo-voice-bubble.playing').forEach(function(other) {
|
||||
document.querySelectorAll('.amigo-voice-bubble.is-playing').forEach(function(other) {
|
||||
if (other !== bubble) {
|
||||
other.classList.remove('playing');
|
||||
other.classList.remove('is-playing');
|
||||
}
|
||||
});
|
||||
|
||||
audio.play();
|
||||
bubble.classList.add('playing');
|
||||
bubble.classList.add('is-playing');
|
||||
isPlaying = true;
|
||||
}
|
||||
});
|
||||
|
||||
audio.addEventListener('ended', function() {
|
||||
bubble.classList.remove('playing');
|
||||
bubble.classList.remove('is-playing');
|
||||
isPlaying = false;
|
||||
});
|
||||
});
|
||||
@@ -190,6 +173,7 @@ function initMusicCards() {
|
||||
if (!audioSrc) return;
|
||||
|
||||
audio = new Audio(audioSrc);
|
||||
card.__audio = audio;
|
||||
|
||||
// Load metadata
|
||||
audio.addEventListener('loadedmetadata', function() {
|
||||
@@ -201,7 +185,9 @@ function initMusicCards() {
|
||||
audio.addEventListener('timeupdate', function() {
|
||||
if (currentTime) currentTime.textContent = formatTime(audio.currentTime);
|
||||
if (seekInput && audio.duration) {
|
||||
var progress = (audio.currentTime / audio.duration) * 100;
|
||||
seekInput.value = (audio.currentTime / audio.duration * 1000).toString();
|
||||
card.style.setProperty('--music-progress', progress + '%');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -209,18 +195,26 @@ function initMusicCards() {
|
||||
function togglePlay() {
|
||||
if (isPlaying) {
|
||||
audio.pause();
|
||||
card.classList.remove('playing');
|
||||
card.setAttribute('data-playing', 'false');
|
||||
if (playBtn) playBtn.setAttribute('aria-pressed', 'false');
|
||||
isPlaying = false;
|
||||
} else {
|
||||
// Stop other playing music
|
||||
document.querySelectorAll('.amigo-music-card.playing').forEach(function(other) {
|
||||
document.querySelectorAll('.amigo-music-card[data-playing="true"]').forEach(function(other) {
|
||||
if (other !== card) {
|
||||
other.classList.remove('playing');
|
||||
other.setAttribute('data-playing', 'false');
|
||||
var otherPlayBtn = other.querySelector('.amigo-music-card__play');
|
||||
if (otherPlayBtn) otherPlayBtn.setAttribute('aria-pressed', 'false');
|
||||
var otherAudio = other.__audio;
|
||||
if (otherAudio) {
|
||||
try { otherAudio.pause(); } catch(e) {}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
audio.play();
|
||||
card.classList.add('playing');
|
||||
card.setAttribute('data-playing', 'true');
|
||||
if (playBtn) playBtn.setAttribute('aria-pressed', 'true');
|
||||
isPlaying = true;
|
||||
}
|
||||
}
|
||||
@@ -238,14 +232,17 @@ function initMusicCards() {
|
||||
if (seekInput) {
|
||||
seekInput.addEventListener('input', function() {
|
||||
if (audio.duration) {
|
||||
var progress = (parseFloat(seekInput.value) / 1000) * 100;
|
||||
audio.currentTime = (parseFloat(seekInput.value) / 1000) * audio.duration;
|
||||
card.style.setProperty('--music-progress', progress + '%');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Ended
|
||||
audio.addEventListener('ended', function() {
|
||||
card.classList.remove('playing');
|
||||
card.setAttribute('data-playing', 'false');
|
||||
if (playBtn) playBtn.setAttribute('aria-pressed', 'false');
|
||||
isPlaying = false;
|
||||
});
|
||||
});
|
||||
@@ -257,6 +254,55 @@ function formatTime(seconds) {
|
||||
return m + ':' + (s < 10 ? '0' : '') + s;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Cleanup functions for PJAX
|
||||
// ============================================================
|
||||
|
||||
function cleanupVoiceBubbles() {
|
||||
document.querySelectorAll('.amigo-voice-bubble').forEach(function(bubble) {
|
||||
if (bubble.__audio) {
|
||||
try {
|
||||
bubble.__audio.pause();
|
||||
bubble.__audio.src = '';
|
||||
bubble.__audio = null;
|
||||
} catch (e) {}
|
||||
}
|
||||
bubble.__voiceBound = false;
|
||||
});
|
||||
}
|
||||
|
||||
function cleanupMusicCards() {
|
||||
document.querySelectorAll('.amigo-music-card').forEach(function(card) {
|
||||
if (card.__audio) {
|
||||
try {
|
||||
card.__audio.pause();
|
||||
card.__audio.src = '';
|
||||
card.__audio = null;
|
||||
} catch (e) {}
|
||||
}
|
||||
card.__musicBound = false;
|
||||
});
|
||||
}
|
||||
|
||||
function cleanupLivePhotos() {
|
||||
document.querySelectorAll('.amigo-livephoto').forEach(function(livePhoto) {
|
||||
var video = livePhoto.querySelector('video');
|
||||
if (video) {
|
||||
try {
|
||||
video.pause();
|
||||
video.src = '';
|
||||
} catch (e) {}
|
||||
}
|
||||
livePhoto.__liveBound = false;
|
||||
});
|
||||
}
|
||||
|
||||
function cleanupAllShortcodes() {
|
||||
cleanupVoiceBubbles();
|
||||
cleanupMusicCards();
|
||||
cleanupLivePhotos();
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Initialize all shortcodes
|
||||
// ============================================================
|
||||
@@ -273,10 +319,24 @@ document.addEventListener('DOMContentLoaded', initAllShortcodes);
|
||||
// Page load
|
||||
window.addEventListener('load', initAllShortcodes);
|
||||
|
||||
// PJAX support - re-initialize after page transition
|
||||
// If DOM is already ready (script loaded late), initialize immediately
|
||||
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
initAllShortcodes();
|
||||
}
|
||||
|
||||
// PJAX support - cleanup before and re-initialize after page transition
|
||||
document.addEventListener('pjax:beforeSend', cleanupAllShortcodes);
|
||||
document.addEventListener('pjax:complete', initAllShortcodes);
|
||||
document.addEventListener('pjax:success', initAllShortcodes);
|
||||
|
||||
// Also listen for custom events that some PJAX libraries fire
|
||||
document.addEventListener('page:loaded', initAllShortcodes);
|
||||
document.addEventListener('page:change', initAllShortcodes);
|
||||
document.addEventListener('turbo:load', initAllShortcodes);
|
||||
document.addEventListener('turbo:before-render', cleanupAllShortcodes);
|
||||
|
||||
// History API based navigation
|
||||
document.addEventListener('popstate', function() {
|
||||
cleanupAllShortcodes();
|
||||
setTimeout(initAllShortcodes, 10);
|
||||
});
|
||||
Reference in new issue
Block a user