fixed 昼夜切换 bug
This commit is contained in:
Vaica committed
1 parent
aaf8813d8b
commit
7de8d0e253
6 files changed
+163
-74
No files matched your search
@@ -157,6 +157,7 @@ body {
|
||||
background-size: inherit; */
|
||||
background-attachment: fixed;
|
||||
z-index: 5;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
hr {
|
||||
@@ -315,7 +316,29 @@ ul {
|
||||
text-align: center;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, backdrop-filter 0.35s ease;
|
||||
/* Optimized transition: removed box-shadow and backdrop-filter for performance */
|
||||
transition: background-color 0.35s ease, color 0.35s ease;
|
||||
}
|
||||
|
||||
/* Mobile Optimization: Remove expensive effects */
|
||||
@media (max-width: 767px) {
|
||||
.main,
|
||||
[data-theme="dark"] .main,
|
||||
.artalk-related,
|
||||
.floating-tools {
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme Toggle Icon Animation */
|
||||
#theme-toggle i {
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
#theme-toggle.rotate i {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -2558,7 +2581,8 @@ input[type=submit] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s;
|
||||
/* 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;
|
||||
/* Removed backdrop-filter for performance */
|
||||
/* backdrop-filter: blur(10px) saturate(180%); */
|
||||
/* -webkit-backdrop-filter: blur(10px) saturate(180%); */
|
||||
@@ -3076,110 +3100,120 @@ img[atk-emoticon] {
|
||||
}
|
||||
|
||||
/* --- Dark Mode Overrides --- */
|
||||
@media (prefers-color-scheme: dark), [data-theme="dark"] {
|
||||
.artalk {
|
||||
/* --- Dark Mode Overrides (Fixed Syntax) --- */
|
||||
[data-theme="dark"] .artalk {
|
||||
--at-color-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0), #242021) !important;
|
||||
--at-color-bg: #1A1718 !important;
|
||||
--at-color-border: #332D2F !important;
|
||||
--at-color-meta: #666 !important;
|
||||
--at-color-bg-grey: #332D2E !important;
|
||||
--at-color-grey: #747474 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.artalk, .atk-layer-wrap, .atk-content, .atk-header, .atk-content p, .pinglun {
|
||||
[data-theme="dark"] .artalk,
|
||||
[data-theme="dark"] .atk-layer-wrap,
|
||||
[data-theme="dark"] .atk-content,
|
||||
[data-theme="dark"] .atk-header,
|
||||
[data-theme="dark"] .atk-content p,
|
||||
[data-theme="dark"] .pinglun {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-item.atk-nick, .atk-header .atk-nick, .atk-item.atk-nick a {
|
||||
[data-theme="dark"] .atk-item.atk-nick,
|
||||
[data-theme="dark"] .atk-header .atk-nick,
|
||||
[data-theme="dark"] .atk-item.atk-nick a {
|
||||
color: var(--text-title-dark-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-main-editor {
|
||||
[data-theme="dark"] .atk-main-editor {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--frame-dark-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-textarea {
|
||||
[data-theme="dark"] .atk-textarea {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.artalk .atk-main-editor input.atk-nick,
|
||||
.artalk .atk-main-editor input.atk-email,
|
||||
.artalk .atk-main-editor input.atk-link {
|
||||
[data-theme="dark"] .artalk .atk-main-editor input.atk-nick,
|
||||
[data-theme="dark"] .artalk .atk-main-editor input.atk-email,
|
||||
[data-theme="dark"] .artalk .atk-main-editor input.atk-link {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-ua {
|
||||
[data-theme="dark"] .atk-ua {
|
||||
color: #666 !important;
|
||||
background: var(--background-dark-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-text, .atk-list-no-comment, .atk-copyright, .atk-copyright a, .atk-comment .atk-main .atk-footer .atk-actions span:hover {
|
||||
[data-theme="dark"] .atk-text,
|
||||
[data-theme="dark"] .atk-list-no-comment,
|
||||
[data-theme="dark"] .atk-copyright,
|
||||
[data-theme="dark"] .atk-copyright a,
|
||||
[data-theme="dark"] .atk-comment .atk-main .atk-footer .atk-actions span:hover {
|
||||
color: #666 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-pinned-badge {
|
||||
[data-theme="dark"] .atk-pinned-badge {
|
||||
color: #e5e5e5 !important;
|
||||
background: #332D2F !important; /* 与深色边框呼应 */
|
||||
}
|
||||
}
|
||||
|
||||
.atk-badge {
|
||||
[data-theme="dark"] .atk-badge {
|
||||
color: #e5e5e5 !important;
|
||||
background: #444 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-reply-to {
|
||||
[data-theme="dark"] .atk-reply-to {
|
||||
border-left: 3px solid #242021 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-send-btn {
|
||||
[data-theme="dark"] .atk-send-btn {
|
||||
background: #332D2F !important; /* 深色实心背景 */
|
||||
color: #e5e5e5 !important;
|
||||
border: 1px solid rgba(255,255,255,0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-send-btn:hover {
|
||||
[data-theme="dark"] .atk-send-btn:hover {
|
||||
background: #444 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-main-editor > .atk-bottom .atk-state-btn {
|
||||
[data-theme="dark"] .atk-main-editor > .atk-bottom .atk-state-btn {
|
||||
background: var(--background-dark-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-main-editor > .atk-bottom .atk-state-btn .atk-text-wrap {
|
||||
[data-theme="dark"] .atk-main-editor > .atk-bottom .atk-state-btn .atk-text-wrap {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* Blockquote Dark Mode */
|
||||
.atk-content blockquote {
|
||||
/* Blockquote Dark Mode */
|
||||
[data-theme="dark"] .atk-content blockquote {
|
||||
background-color: #252526; /* 更深的背景 */
|
||||
border-left-color: #444; /* 边框颜色与主题呼应 */
|
||||
color: #b0b0b0; /* 柔和的灰白文字 */
|
||||
box-shadow: none; /* 暗色模式去除阴影或减弱 */
|
||||
}
|
||||
}
|
||||
|
||||
.atk-content blockquote::before {
|
||||
[data-theme="dark"] .atk-content blockquote::before {
|
||||
color: rgba(255,255,255,0.05); /* 暗色模式下的装饰引号 */
|
||||
}
|
||||
}
|
||||
|
||||
/* Emoji Switcher Dark Mode */
|
||||
.atk-grp-switcher span {
|
||||
/* Emoji Switcher Dark Mode */
|
||||
[data-theme="dark"] .atk-grp-switcher span {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading State (Dark Mode) */
|
||||
.atk-loading {
|
||||
/* Loading State (Dark Mode) */
|
||||
[data-theme="dark"] .atk-loading {
|
||||
background: rgba(30, 30, 30, 0.8) !important; /* 与白昼模式保持一致的透明度 */
|
||||
box-shadow: none !important;
|
||||
color: #e5e5e5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.atk-loading-spinner svg circle {
|
||||
[data-theme="dark"] .atk-loading-spinner svg circle {
|
||||
stroke: #e5e5e5 !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Transition Effects --- */
|
||||
@@ -3200,7 +3234,8 @@ img[atk-emoticon] {
|
||||
.atk-plug-panel-wrap,
|
||||
.atk-loading-spinner svg circle,
|
||||
.atk-content blockquote {
|
||||
transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, stroke 0.35s ease, fill 0.35s ease !important;
|
||||
/* Optimized: removed box-shadow and backdrop-filter */
|
||||
transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, opacity 0.35s ease, stroke 0.35s ease, fill 0.35s ease !important;
|
||||
}
|
||||
|
||||
/* --- Force Light Mode Overrides (Fix for Day Mode visibility) --- */
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
this.index = 0;
|
||||
this.timer = null;
|
||||
this.isPaused = false;
|
||||
this.isDestroyed = false;
|
||||
}
|
||||
|
||||
// 开始发送
|
||||
@@ -70,11 +71,13 @@
|
||||
if (this.data.length === 0) return;
|
||||
|
||||
this.clear();
|
||||
this.isDestroyed = false;
|
||||
this.loop();
|
||||
}
|
||||
|
||||
// 清空
|
||||
clear() {
|
||||
this.isDestroyed = true;
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
// 清除容器内所有弹幕元素
|
||||
if (this.container) {
|
||||
@@ -86,18 +89,12 @@
|
||||
|
||||
// 循环发射
|
||||
loop() {
|
||||
// 如果容器不在文档中(PJAX切换后)，尝试重新获取容器
|
||||
// (注意：this.container 是 DOM 引用，如果页面重绘，旧引用可能失效)
|
||||
if (this.isDestroyed) return;
|
||||
|
||||
// 如果容器不在文档中(PJAX切换后)，停止播放
|
||||
if (!document.body.contains(this.container)) {
|
||||
console.warn('[Barrage] 容器失效，尝试重新获取...');
|
||||
const newContainer = document.querySelector('.barrager');
|
||||
if (newContainer) {
|
||||
this.container = newContainer;
|
||||
console.log('[Barrage] 容器重新获取成功，继续播放');
|
||||
} else {
|
||||
console.warn('[Barrage] 容器彻底丢失，停止播放');
|
||||
return; // 真的没了再停止
|
||||
}
|
||||
console.warn('[Barrage] 容器失效，停止播放');
|
||||
return;
|
||||
}
|
||||
|
||||
// 发射逻辑
|
||||
@@ -286,14 +283,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露给全局，供 mypjax.js 调用
|
||||
window.loadBarrager = loadBarrager;
|
||||
|
||||
// 初始化监听
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadBarrager(); // 页面首次加载时启动弹幕
|
||||
});
|
||||
|
||||
document.addEventListener('pjax:complete', function() {
|
||||
// PJAX 跳转后重新加载弹幕
|
||||
loadBarrager();
|
||||
});
|
||||
// 移除内部的 pjax:complete 监听，统一由 mypjax.js 控制调用时机
|
||||
// document.addEventListener('pjax:complete', function() {
|
||||
// loadBarrager();
|
||||
// });
|
||||
|
||||
})();
|
||||
@@ -218,17 +218,47 @@ function copySzhContent() {
|
||||
}
|
||||
}
|
||||
|
||||
// Update Theme Icon
|
||||
function updateThemeIcon(isDark) {
|
||||
const toggleBtns = document.querySelectorAll('#theme-toggle');
|
||||
toggleBtns.forEach(btn => {
|
||||
const icon = btn.querySelector('i');
|
||||
if (icon) {
|
||||
// Add rotation class for animation
|
||||
btn.classList.add('rotate');
|
||||
setTimeout(() => btn.classList.remove('rotate'), 500);
|
||||
|
||||
// Switch icon
|
||||
if (isDark) {
|
||||
icon.className = 'ri-moon-line';
|
||||
} else {
|
||||
icon.className = 'ri-sun-line';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Theme Toggle Logic
|
||||
function toggleTheme() {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
const isDark = newTheme === 'dark';
|
||||
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
|
||||
// Notify Artalk if present
|
||||
if (window.Artalk) {
|
||||
Artalk.setDarkMode(newTheme === 'dark');
|
||||
// Update Icon
|
||||
updateThemeIcon(isDark);
|
||||
|
||||
// Optimize: Defer heavy Artalk update to avoid blocking UI animation
|
||||
setTimeout(() => {
|
||||
// Notify Artalk if present (Instance or Static)
|
||||
if (window.artalk && typeof window.artalk.setDarkMode === 'function') {
|
||||
window.artalk.setDarkMode(isDark);
|
||||
} else if (window.Artalk && typeof Artalk.setDarkMode === 'function') {
|
||||
Artalk.setDarkMode(isDark);
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// Listen for system theme changes
|
||||
@@ -239,7 +269,13 @@ try {
|
||||
if (!localStorage.getItem('theme')) {
|
||||
const newTheme = e.matches ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
if (window.Artalk) {
|
||||
|
||||
updateThemeIcon(newTheme === 'dark');
|
||||
|
||||
// Notify Artalk
|
||||
if (window.artalk && typeof window.artalk.setDarkMode === 'function') {
|
||||
window.artalk.setDarkMode(newTheme === 'dark');
|
||||
} else if (window.Artalk && typeof Artalk.setDarkMode === 'function') {
|
||||
Artalk.setDarkMode(newTheme === 'dark');
|
||||
}
|
||||
}
|
||||
@@ -279,6 +315,21 @@ function updateFloatingToolsVisibility() {
|
||||
|
||||
// Floating Tools Initialization
|
||||
function initFloatingTools() {
|
||||
// Initialize Theme Icon based on current theme
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const isDark = currentTheme === 'dark';
|
||||
const toggleBtns = document.querySelectorAll('#theme-toggle');
|
||||
toggleBtns.forEach(btn => {
|
||||
const icon = btn.querySelector('i');
|
||||
if (icon) {
|
||||
if (isDark) {
|
||||
icon.className = 'ri-moon-line';
|
||||
} else {
|
||||
icon.className = 'ri-sun-line';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initial visibility check
|
||||
updateFloatingToolsVisibility();
|
||||
|
||||
|
||||
@@ -190,7 +190,8 @@ document.addEventListener("pjax:complete", function () {
|
||||
emoticons = window.siteConfig.artalk.emoticons || emoticons;
|
||||
}
|
||||
|
||||
Artalk.init({
|
||||
// 保存实例到全局变量 window.artalk
|
||||
window.artalk = Artalk.init({
|
||||
el: '#Comments', // 绑定元素的 Selector
|
||||
server: serverUrl, // 后端地址
|
||||
site: siteName, // 你的站点名
|
||||
@@ -201,10 +202,11 @@ document.addEventListener("pjax:complete", function () {
|
||||
darkMode: isDark,
|
||||
emoticons: emoticons
|
||||
})
|
||||
|
||||
// Artalk 初始化完成后，再加载弹幕
|
||||
if (!isMobile() && window.loadBarrager) {
|
||||
window.loadBarrager();
|
||||
}
|
||||
// 重载评论弹幕
|
||||
if (document.querySelector("#Comments") && !isMobile()) {
|
||||
loadBarrager()
|
||||
}
|
||||
// 重载不蒜子统计
|
||||
if (typeof window.bsz_fetch === 'function') {
|
||||
|
||||
@@ -27,7 +27,8 @@
|
||||
// 检查 Artalk 是否已定义
|
||||
if (typeof Artalk !== 'undefined') {
|
||||
var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
Artalk.init({
|
||||
// 保存实例到全局变量 window.artalk
|
||||
window.artalk = Artalk.init({
|
||||
el: '#Comments',
|
||||
server: '{{ .Site.Params.artalk.server }}',
|
||||
site: '{{ .Site.Params.artalk.site }}',
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<i class="ri-search-line"></i>
|
||||
</a>
|
||||
<a href="javascript:;" id="theme-toggle" title="切换主题">
|
||||
<i class="ri-palette-line"></i>
|
||||
<i class="ri-sun-line"></i>
|
||||
</a>
|
||||
<a href="#Comments" id="to-comments" title="跳转评论">
|
||||
<i class="ri-chat-2-line"></i>
|
||||
|
||||
Reference in new issue
Block a user