fixed 昼夜切换 bug
This commit is contained in:
Vaica committed
1 parent
aaf8813d8b
commit
7de8d0e253
6 files changed
+211
-122
No files matched your search
+130
-95
@@ -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 {
|
||||
--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;
|
||||
}
|
||||
/* --- 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 {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
}
|
||||
[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 {
|
||||
color: var(--text-title-dark-color) !important;
|
||||
}
|
||||
[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 {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--frame-dark-color) !important;
|
||||
}
|
||||
[data-theme="dark"] .atk-main-editor {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--frame-dark-color) !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
}
|
||||
[data-theme="dark"] .atk-textarea {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.atk-ua {
|
||||
color: #666 !important;
|
||||
background: var(--background-dark-color) !important;
|
||||
}
|
||||
[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-text, .atk-list-no-comment, .atk-copyright, .atk-copyright a, .atk-comment .atk-main .atk-footer .atk-actions span:hover {
|
||||
color: #666 !important;
|
||||
}
|
||||
[data-theme="dark"] .atk-ua {
|
||||
color: #666 !important;
|
||||
background: var(--background-dark-color) !important;
|
||||
}
|
||||
|
||||
.atk-pinned-badge {
|
||||
color: #e5e5e5 !important;
|
||||
background: #332D2F !important; /* 与深色边框呼应 */
|
||||
}
|
||||
[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-badge {
|
||||
color: #e5e5e5 !important;
|
||||
background: #444 !important;
|
||||
}
|
||||
[data-theme="dark"] .atk-pinned-badge {
|
||||
color: #e5e5e5 !important;
|
||||
background: #332D2F !important; /* 与深色边框呼应 */
|
||||
}
|
||||
|
||||
.atk-reply-to {
|
||||
border-left: 3px solid #242021 !important;
|
||||
}
|
||||
[data-theme="dark"] .atk-badge {
|
||||
color: #e5e5e5 !important;
|
||||
background: #444 !important;
|
||||
}
|
||||
|
||||
.atk-send-btn {
|
||||
background: #332D2F !important; /* 深色实心背景 */
|
||||
color: #e5e5e5 !important;
|
||||
border: 1px solid rgba(255,255,255,0.1) !important;
|
||||
}
|
||||
|
||||
.atk-send-btn:hover {
|
||||
background: #444 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: #666;
|
||||
}
|
||||
[data-theme="dark"] .atk-reply-to {
|
||||
border-left: 3px solid #242021 !important;
|
||||
}
|
||||
|
||||
/* Blockquote Dark Mode */
|
||||
.atk-content blockquote {
|
||||
background-color: #252526; /* 更深的背景 */
|
||||
border-left-color: #444; /* 边框颜色与主题呼应 */
|
||||
color: #b0b0b0; /* 柔和的灰白文字 */
|
||||
box-shadow: none; /* 暗色模式去除阴影或减弱 */
|
||||
}
|
||||
[data-theme="dark"] .atk-send-btn {
|
||||
background: #332D2F !important; /* 深色实心背景 */
|
||||
color: #e5e5e5 !important;
|
||||
border: 1px solid rgba(255,255,255,0.1) !important;
|
||||
}
|
||||
|
||||
.atk-content blockquote::before {
|
||||
color: rgba(255,255,255,0.05); /* 暗色模式下的装饰引号 */
|
||||
}
|
||||
|
||||
/* Emoji Switcher Dark Mode */
|
||||
.atk-grp-switcher span {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
}
|
||||
|
||||
/* Loading State (Dark Mode) */
|
||||
.atk-loading {
|
||||
background: rgba(30, 30, 30, 0.8) !important; /* 与白昼模式保持一致的透明度 */
|
||||
box-shadow: none !important;
|
||||
color: #e5e5e5 !important;
|
||||
}
|
||||
|
||||
.atk-loading-spinner svg circle {
|
||||
stroke: #e5e5e5 !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
[data-theme="dark"] .atk-send-btn:hover {
|
||||
background: #444 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-main-editor > .atk-bottom .atk-state-btn {
|
||||
background: var(--background-dark-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-main-editor > .atk-bottom .atk-state-btn .atk-text-wrap {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Blockquote Dark Mode */
|
||||
[data-theme="dark"] .atk-content blockquote {
|
||||
background-color: #252526; /* 更深的背景 */
|
||||
border-left-color: #444; /* 边框颜色与主题呼应 */
|
||||
color: #b0b0b0; /* 柔和的灰白文字 */
|
||||
box-shadow: none; /* 暗色模式去除阴影或减弱 */
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-content blockquote::before {
|
||||
color: rgba(255,255,255,0.05); /* 暗色模式下的装饰引号 */
|
||||
}
|
||||
|
||||
/* Emoji Switcher Dark Mode */
|
||||
[data-theme="dark"] .atk-grp-switcher span {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
}
|
||||
|
||||
/* Loading State (Dark Mode) */
|
||||
[data-theme="dark"] .atk-loading {
|
||||
background: rgba(30, 30, 30, 0.8) !important; /* 与白昼模式保持一致的透明度 */
|
||||
box-shadow: none !important;
|
||||
color: #e5e5e5 !important;
|
||||
}
|
||||
|
||||
[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) --- */
|
||||
|
||||
Reference in new issue
Block a user