修复评论的 css效果
This commit is contained in:
Vaica committed
1 parent
78d7d58afa
commit
53afae972b
1 file changed
+453
-429
+453
-429
@@ -2314,390 +2314,7 @@ input[type=submit] {
|
||||
}
|
||||
}
|
||||
|
||||
/* artalk样式重写css */
|
||||
.artalk {
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.atk-list-read-more {
|
||||
padding-bottom: 0!important
|
||||
}
|
||||
|
||||
.atk-comment {
|
||||
padding: 10px 0!important
|
||||
}
|
||||
|
||||
.artalk>.atk-list>.atk-list-header {
|
||||
display: none!important
|
||||
}
|
||||
|
||||
.atk-content p {
|
||||
font-size: 1rem!important;
|
||||
color: #000!important
|
||||
}
|
||||
|
||||
.atk-comment-children>.atk-comment-wrap {
|
||||
margin-top: 6px!important
|
||||
}
|
||||
|
||||
.atk-content {
|
||||
line-height: 1.5!important
|
||||
}
|
||||
|
||||
.atk-avatar img {
|
||||
border-radius: 50%!important
|
||||
}
|
||||
|
||||
.atk-comment>.atk-avatar img {
|
||||
width: 24px!important;
|
||||
height: 24px!important;
|
||||
margin-top: 8px
|
||||
}
|
||||
|
||||
.atk-main {
|
||||
margin-left: 34px!important
|
||||
}
|
||||
|
||||
.atk-comment-children>.atk-comment-wrap>.atk-comment {
|
||||
padding: 0!important;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.atk-comment>.atk-main>.atk-header {
|
||||
margin-bottom: 0!important
|
||||
}
|
||||
|
||||
.atk-textarea {
|
||||
min-height: 70px!important
|
||||
}
|
||||
|
||||
.artalk>.atk-list>.atk-list-footer {
|
||||
bottom: auto!important
|
||||
}
|
||||
|
||||
/* Artalk 昵称颜色增强 - 白昼模式 */
|
||||
.artalk .atk-item.atk-nick,
|
||||
.atk-item.atk-nick {
|
||||
color: #000 !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.atk-header .atk-nick {
|
||||
color: #000 !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.artalk .atk-item.atk-nick a,
|
||||
.atk-item.atk-nick a,
|
||||
[data-theme="light"] .artalk .atk-item.atk-nick a,
|
||||
[data-theme="light"] .atk-item.atk-nick a {
|
||||
color: #000!important
|
||||
}
|
||||
|
||||
.atk-ua {
|
||||
color: #999!important;
|
||||
background: var(--frame-color)!important
|
||||
}
|
||||
|
||||
.atk-ua-wrap {
|
||||
font-size: 11px
|
||||
}
|
||||
|
||||
.atk-text {
|
||||
color: #999!important
|
||||
}
|
||||
|
||||
.atk-badge {
|
||||
display: none!important
|
||||
}
|
||||
|
||||
.atk-list-no-comment,.atk-copyright,.atk-copyright a {
|
||||
color: #999!important
|
||||
}
|
||||
|
||||
.atk-send-btn {
|
||||
padding: 0 10px!important;
|
||||
min-width: 5em!important;
|
||||
background: 0 0!important;
|
||||
border: .5px solid var(--text-highlight-color)!important;
|
||||
color: var(--text-highlight-color)!important
|
||||
}
|
||||
|
||||
.atk-send-btn:hover {
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-send-btn {
|
||||
background: rgba(15, 23, 42, 0.9) !important;
|
||||
border-color: #4b5563 !important;
|
||||
color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
.atk-list-header .atk-dropdown-wrap .atk-dropdown-item.active span,.atk-list-header .atk-dropdown-wrap .atk-dropdown-item span:hover {
|
||||
color: var(--text-highlight-color)!important
|
||||
}
|
||||
|
||||
.artalk {
|
||||
--at-color-main: #666!important;
|
||||
--at-color-pink: var(--text-highlight-color)!important;
|
||||
--at-color-light: var(--text-highlight-color)!important;
|
||||
--at-color-meta: #999!important;
|
||||
--at-color-border: #DDD !important
|
||||
}
|
||||
|
||||
.artalk,
|
||||
.atk-layer-wrap {
|
||||
color: var(--text-content-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .artalk,
|
||||
[data-theme="dark"] .atk-layer-wrap {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
}
|
||||
|
||||
.atk-content img {
|
||||
max-height: 1.1rem!important;
|
||||
vertical-align: middle;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
margin-top: -4px!important
|
||||
}
|
||||
|
||||
.artalk .atk-content p {
|
||||
color: var(--text-content-color)!important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .artalk .atk-content p {
|
||||
color: var(--text-content-dark-color)!important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-content,
|
||||
[data-theme="dark"] .atk-header {
|
||||
color: var(--text-content-dark-color)!important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .artalk .atk-item.atk-nick,
|
||||
[data-theme="dark"] .atk-item.atk-nick,
|
||||
[data-theme="dark"] .atk-header .atk-nick {
|
||||
color: var(--text-content-dark-color)!important;
|
||||
}
|
||||
|
||||
.atk-loading {
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
box-shadow: var(--card-shadow-light);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.atk-loading-spinner svg circle {
|
||||
stroke: var(--text-highlight-color);
|
||||
}
|
||||
|
||||
/* 通用样式 */
|
||||
.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-color)!important;
|
||||
}
|
||||
|
||||
/* 暗黑模式样式：重复类选择器，最大化权重 */
|
||||
[data-theme="dark"] .artalk.artalk .atk-main-editor input.atk-nick,
|
||||
[data-theme="dark"] .artalk.artalk .atk-main-editor input.atk-email,
|
||||
[data-theme="dark"] .artalk.artalk .atk-main-editor input.atk-link {
|
||||
color: var(--text-content-dark-color)!important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-loading {
|
||||
background: rgba(15, 23, 42, 0.95)!important;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-loading-spinner svg circle {
|
||||
stroke: #e5e7eb!important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .uk-divider-icon {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%236b7280%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
[data-theme="dark"] .uk-divider-icon::after,
|
||||
[data-theme="dark"] .uk-divider-icon::before {
|
||||
border-bottom-color: #374151;
|
||||
}
|
||||
|
||||
.atk-comment>.atk-main>.atk-body>.atk-content img {
|
||||
height: 2rem!important;
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.atk-comment .atk-height-limit:after {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.atk-editor-plug-emoticons>.atk-grp-wrap>.atk-grp[data-type=image]>.atk-item {
|
||||
height: 32px!important;
|
||||
width: 32px!important
|
||||
}
|
||||
|
||||
.atk-editor-plug-emoticons>.atk-grp-wrap>.atk-grp>.atk-item {
|
||||
font-size: 24px!important;
|
||||
padding: 0!important
|
||||
}
|
||||
|
||||
.atk-notify.atk-fade-in {
|
||||
background: #666!important;
|
||||
margin-bottom: 6px
|
||||
}
|
||||
|
||||
.atk-pinned-badge {
|
||||
background: #999!important
|
||||
}
|
||||
|
||||
.atk-send-reply {
|
||||
background: 0 0!important
|
||||
}
|
||||
|
||||
.atk-reply-to {
|
||||
border-left: 3px solid #fff!important
|
||||
}
|
||||
|
||||
.atk-plug-panel-wrap {
|
||||
height: 110px!important
|
||||
}
|
||||
|
||||
img[atk-emoticon] {
|
||||
max-height: 20px!important
|
||||
}
|
||||
|
||||
.atk-bottom {
|
||||
padding: 5px 10px 10px 5px!important
|
||||
}
|
||||
|
||||
.atk-main-editor>.atk-header {
|
||||
padding: 10px 5px 0!important
|
||||
}
|
||||
|
||||
.atk-main-editor>.atk-plug-panel-wrap {
|
||||
border-top: .5px solid var(--at-color-border)!important
|
||||
}
|
||||
|
||||
.atk-textarea {
|
||||
padding: 10px!important
|
||||
}
|
||||
|
||||
.atk-main-editor {
|
||||
border: 1px solid var(--frame-color)!important
|
||||
}
|
||||
|
||||
.artalk code {
|
||||
border: 1px solid #ffbe98!important;
|
||||
border-radius: 4px!important;
|
||||
background: 0 0!important;
|
||||
margin: 0 4px!important
|
||||
}
|
||||
|
||||
.atk-main-editor>.atk-textarea-wrap>.atk-textarea {
|
||||
line-height: 1.6
|
||||
}
|
||||
|
||||
.atk-main-editor>.atk-bottom .atk-state-btn .atk-text-wrap {
|
||||
color: #999
|
||||
}
|
||||
|
||||
.artalk .atk-main-editor {
|
||||
border: 1px solid var(--artalk-editer-color)!important
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
.atk-content p {
|
||||
color:var(--text-content-dark-color)!important
|
||||
}
|
||||
|
||||
.pinglun {
|
||||
color: var(--text-content-dark-color)
|
||||
}
|
||||
|
||||
.artalk .atk-main-editor {
|
||||
background: 0 0!important;
|
||||
border: 1px solid var(--frame-dark-color)!important
|
||||
}
|
||||
|
||||
.atk-textarea {
|
||||
color: var(--text-content-dark-color)!important;
|
||||
font-size: 15px;
|
||||
background: 0 0!important
|
||||
}
|
||||
|
||||
.atk-ua {
|
||||
color: #666!important;
|
||||
background: var(--background-dark-color)!important
|
||||
}
|
||||
|
||||
.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: var(--background-dark-color) !important;
|
||||
--at-color-bg-grey: #332D2E!important
|
||||
}
|
||||
|
||||
.artalk.atk-dark-mode {
|
||||
--at-color-grey: #747474 !important
|
||||
}
|
||||
|
||||
.atk-text,.atk-list-no-comment,.atk-copyright,.atk-copyright a {
|
||||
color: #666!important
|
||||
}
|
||||
|
||||
.atk-pinned-badge {
|
||||
color: var(--text-content-dark-color)!important;
|
||||
background: #666!important
|
||||
}
|
||||
|
||||
.atk-reply-to {
|
||||
border-left: 3px solid #242021!important
|
||||
}
|
||||
|
||||
.atk-comment .atk-main .atk-footer .atk-actions span:hover {
|
||||
color: #999!important
|
||||
}
|
||||
|
||||
.artalk .atk-item.atk-nick a,
|
||||
.atk-item.atk-nick a {
|
||||
color: var(--link-color-dark)!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"] .artalk .atk-item.atk-nick a,
|
||||
[data-theme="dark"] .atk-item.atk-nick a {
|
||||
color: var(--link-color-dark)!important
|
||||
}
|
||||
|
||||
|
||||
.artalk.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
@media(max-width: 700px) {
|
||||
.atk-main-editor>.atk-header {
|
||||
display:block!important
|
||||
}
|
||||
}
|
||||
|
||||
#post-writing p{
|
||||
margin-bottom: 10px;
|
||||
@@ -2995,15 +2612,7 @@ img[atk-emoticon] {
|
||||
/* GenericUnderline */ [data-theme="dark"] .chroma .gl { text-decoration:underline }
|
||||
/* TextWhitespace */ [data-theme="dark"] .chroma .w { }
|
||||
|
||||
/* Fix Artalk comment textarea color in light mode */
|
||||
.atk-textarea {
|
||||
color: #1a1a1a !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
[data-theme="dark"] .atk-textarea {
|
||||
color: #e5e7eb !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
/* About Page Card Style */
|
||||
.about-card {
|
||||
@@ -3085,40 +2694,7 @@ img[atk-emoticon] {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Artalk Comment Blockquote Redesign & Dark Mode Fix */
|
||||
.atk-content blockquote {
|
||||
margin: 10px 0 6px 0; /* Reduced bottom margin for tighter layout */
|
||||
padding: 12px 16px;
|
||||
background-color: var(--bankuai-color);
|
||||
border-left: 4px solid var(--text-highlight-color);
|
||||
border-radius: 4px;
|
||||
color: var(--text-content-color);
|
||||
position: relative;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.atk-content blockquote + p {
|
||||
margin-top: 4px !important; /* Reduce spacing for paragraph immediately following blockquote */
|
||||
}
|
||||
|
||||
.atk-content blockquote p {
|
||||
margin: 0;
|
||||
color: inherit !important;
|
||||
font-size: 0.95rem !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-content blockquote {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-left-color: #4b5563; /* Use a slightly lighter gray for border in dark mode */
|
||||
color: var(--text-content-dark-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-content blockquote p {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Category Page Styles */
|
||||
.category-container {
|
||||
@@ -3238,14 +2814,462 @@ img[atk-emoticon] {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Artalk Emoji Switcher Text Visibility Fix */
|
||||
.atk-grp-switcher span {
|
||||
/* ==========================================================================
|
||||
Misc Overrides
|
||||
========================================================================== */
|
||||
[data-theme="dark"] .uk-divider-icon {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%236b7280%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
[data-theme="dark"] .uk-divider-icon::after,
|
||||
[data-theme="dark"] .uk-divider-icon::before {
|
||||
border-bottom-color: #374151;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Artalk Comment System Optimization
|
||||
========================================================================== */
|
||||
|
||||
/* --- Base Styles (Light Mode) --- */
|
||||
.artalk {
|
||||
margin-top: 20px;
|
||||
--at-color-main: #666 !important;
|
||||
--at-color-pink: var(--text-highlight-color) !important;
|
||||
--at-color-light: var(--text-highlight-color) !important;
|
||||
--at-color-meta: #999 !important;
|
||||
--at-color-border: #DDD !important;
|
||||
--at-color-bg-grey: #f9f9f9 !important;
|
||||
}
|
||||
|
||||
/* Layout & Spacing */
|
||||
.atk-comment { padding: 10px 0 !important; }
|
||||
.atk-list-read-more { padding-bottom: 0 !important; }
|
||||
.artalk > .atk-list > .atk-list-header { display: none !important; }
|
||||
.artalk > .atk-list > .atk-list-footer { bottom: auto !important; }
|
||||
.atk-main { margin-left: 34px !important; }
|
||||
.atk-bottom { padding: 5px 10px 10px 5px !important; }
|
||||
.atk-comment-children > .atk-comment-wrap { margin-top: 6px !important; }
|
||||
.atk-comment-children > .atk-comment-wrap > .atk-comment { padding: 0 !important; margin: auto; }
|
||||
.atk-comment .atk-height-limit:after { margin-bottom: 20px; }
|
||||
|
||||
/* Avatar */
|
||||
.atk-avatar img {
|
||||
border-radius: 50% !important;
|
||||
transition: transform 0.4s ease, box-shadow 0.4s ease !important;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
|
||||
border: none !important; /* 去除边框 */
|
||||
}
|
||||
|
||||
.atk-avatar img:hover {
|
||||
transform: rotate(360deg) scale(1.1) !important;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
|
||||
}
|
||||
|
||||
.atk-comment > .atk-avatar img {
|
||||
width: 32px !important; /* 从 32px 增加到 40px */
|
||||
height: 32px !important;
|
||||
/* margin-top: 4px; */
|
||||
margin-right: 6px!important;
|
||||
}
|
||||
|
||||
/* Content & Typography */
|
||||
.atk-content { line-height: 1.6 !important; }
|
||||
.atk-content p { font-size: 1rem !important; color: var(--text-content-color) !important; }
|
||||
.atk-item.atk-nick, .atk-nick { color: var(--text-title-color) !important; font-weight: 700 !important; }
|
||||
.atk-header .atk-nick { font-weight: normal !important; }
|
||||
.atk-item.atk-nick a { color: var(--text-title-color) !important; }
|
||||
.atk-ua { color: #999 !important; background: var(--frame-color) !important; }
|
||||
.atk-ua-wrap { font-size: 11px; }
|
||||
.atk-text { color: #999 !important; }
|
||||
.atk-list-no-comment, .atk-copyright, .atk-copyright a { color: #999 !important; }
|
||||
.atk-pinned-badge { background: #999 !important; }
|
||||
|
||||
/* Editor */
|
||||
.atk-main-editor { border: 1px solid var(--frame-color) !important; }
|
||||
.atk-textarea { min-height: 70px !important; padding: 10px !important; color: var(--text-content-color) !important; background: #fff !important; }
|
||||
.atk-main-editor > .atk-header { padding: 10px 5px 0 !important; }
|
||||
.atk-main-editor > .atk-plug-panel-wrap { border-top: 0.5px solid var(--at-color-border) !important; }
|
||||
.atk-plug-panel-wrap { height: 110px !important; }
|
||||
|
||||
/* Light Mode Input Fields */
|
||||
.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-color) !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .atk-grp-switcher span {
|
||||
color: var(--text-content-dark-color) !important;
|
||||
/* Buttons & Badges (Light Mode) */
|
||||
.atk-send-btn {
|
||||
padding: 0 12px !important;
|
||||
min-width: 60px !important;
|
||||
background-color: var(--text-highlight-color) !important; /* 实心背景 */
|
||||
color: #fff !important; /* 白色文字 */
|
||||
border: none !important;
|
||||
border-radius: 4px !important;
|
||||
font-size: 13px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.atk-send-btn:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.atk-pinned-badge {
|
||||
background-color: var(--text-highlight-color) !important;
|
||||
color: #fff !important;
|
||||
border-radius: 3px !important;
|
||||
font-size: 12px !important;
|
||||
padding: 1px 5px !important;
|
||||
}
|
||||
|
||||
.atk-badge {
|
||||
background-color: #999 !important; /* 普通徽章颜色 */
|
||||
color: #fff !important;
|
||||
border-radius: 3px !important;
|
||||
padding: 1px 5px !important;
|
||||
}
|
||||
|
||||
/* Emoticons & Images */
|
||||
.atk-content img {
|
||||
max-height: 1.25rem !important; /* 稍微调小一点，使其更贴合文字 */
|
||||
vertical-align: sub !important; /* 改为 sub 对齐，通常比 text-bottom 更自然 */
|
||||
margin: 0 1px !important; /* 减小间距 */
|
||||
transition: transform 0.2s ease !important;
|
||||
display: inline !important; /* 强制行内显示，防止换行 */
|
||||
width: auto !important; /* 防止被拉伸 */
|
||||
border: none !important; /* 去除边框 */
|
||||
box-shadow: none !important; /* 去除阴影 */
|
||||
background: transparent !important; /* 去除背景 */
|
||||
}
|
||||
|
||||
.atk-content img:hover {
|
||||
transform: scale(1.2) !important;
|
||||
}
|
||||
|
||||
.atk-comment > .atk-main > .atk-body > .atk-content img {
|
||||
/* 大图样式保持不变，但要区分开 */
|
||||
display: inline-block; /* 默认大图也是行内块，除非特别大 */
|
||||
}
|
||||
|
||||
/* 专门针对大图的覆盖样式（通过 JS 或特定类名判断通常较难，这里假设单独的 img 标签可能是大图，但 Artalk 结构统一，主要靠 max-height 控制） */
|
||||
/* 更好的策略是：默认所有 img 都是小表情样式。如果是真正的图片附件，Artalk 通常会有特定包裹或类名，或者我们只能通过 CSS 区分 */
|
||||
|
||||
/* 修正：Artalk 的表情通常有 atk-emoticon 属性，或者是在 .atk-content 内部的 img */
|
||||
/* 为了防止误伤大图，我们可以利用 Artalk 的结构特性 */
|
||||
|
||||
.atk-content .atk-emoticon {
|
||||
display: inline !important; /* 关键：防止换行 */
|
||||
height: 1.25rem !important;
|
||||
max-height: 1.25rem !important;
|
||||
margin: 0 1px !important;
|
||||
vertical-align: sub !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* 针对非表情的大图（如果 Artalk 没有给表情加 atk-emoticon 类，这个可能会有冲突，但通常会有） */
|
||||
/* 如果 img 标签有 alt 且 src 包含 emoticons 路径，通常是表情。这里主要依靠 max-height 限制 */
|
||||
|
||||
img[atk-emoticon] {
|
||||
max-height: 20px !important;
|
||||
display: inline !important;
|
||||
vertical-align: sub !important;
|
||||
}
|
||||
.atk-editor-plug-emoticons > .atk-grp-wrap > .atk-grp[data-type=image] > .atk-item { height: 32px !important; width: 32px !important; }
|
||||
.atk-editor-plug-emoticons > .atk-grp-wrap > .atk-grp > .atk-item { font-size: 24px !important; padding: 0 !important; }
|
||||
|
||||
/* Blockquote */
|
||||
.atk-content blockquote {
|
||||
margin: 10px 0 10px 0;
|
||||
padding: 12px 16px;
|
||||
background-color: #f8f9fa; /* 更清爽的浅灰背景 */
|
||||
border-left: 4px solid var(--text-highlight-color);
|
||||
border-radius: 4px;
|
||||
color: #555; /* 深灰文字，提升阅读体验 */
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 轻微阴影增加层次 */
|
||||
}
|
||||
|
||||
/* 引用块内的图标装饰 (可选) */
|
||||
.atk-content blockquote::before {
|
||||
content: "\201C"; /* 双引号 */
|
||||
font-family: Georgia, serif;
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 10px;
|
||||
color: rgba(0,0,0,0.05);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.atk-content blockquote + p { margin-top: 8px !important; }
|
||||
.atk-content blockquote p {
|
||||
margin: 0;
|
||||
color: inherit !important;
|
||||
font-size: inherit !important;
|
||||
line-height: inherit !important;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
.artalk code {
|
||||
border: 1px solid #ffbe98 !important;
|
||||
border-radius: 4px !important;
|
||||
background: transparent !important;
|
||||
margin: 0 4px !important;
|
||||
}
|
||||
|
||||
/* Notifications */
|
||||
.atk-notify.atk-fade-in { background: #666 !important; margin-bottom: 6px; }
|
||||
|
||||
/* Emoji Switcher */
|
||||
.atk-grp-switcher span { color: var(--text-content-color) !important; }
|
||||
|
||||
|
||||
/* Loading State (Light Mode) */
|
||||
.atk-loading {
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
box-shadow: none !important; /* 去除阴影，更简洁 */
|
||||
border-radius: 8px !important;
|
||||
backdrop-filter: blur(4px); /* 轻微模糊 */
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
/* display: flex !important; <-- 移除这个强制显示 */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100px; /* 保证有足够的高度显示 loading */
|
||||
}
|
||||
|
||||
/* 重新设计 Loading 动画圆圈 */
|
||||
.atk-loading-spinner {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.atk-loading-spinner svg {
|
||||
animation: atk-rotate 1.5s linear infinite !important;
|
||||
}
|
||||
|
||||
.atk-loading-spinner svg circle {
|
||||
stroke: var(--text-highlight-color) !important;
|
||||
stroke-width: 3px !important;
|
||||
stroke-dasharray: 100 !important;
|
||||
stroke-dashoffset: 50 !important;
|
||||
fill: transparent !important;
|
||||
stroke-linecap: round !important;
|
||||
animation: atk-dash 1.5s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
@keyframes atk-rotate {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes atk-dash {
|
||||
0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
|
||||
50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
|
||||
100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
|
||||
}
|
||||
|
||||
/* --- 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;
|
||||
}
|
||||
|
||||
.artalk, .atk-layer-wrap, .atk-content, .atk-header, .atk-content p, .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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.atk-pinned-badge {
|
||||
color: #e5e5e5 !important;
|
||||
background: #332D2F !important; /* 与深色边框呼应 */
|
||||
}
|
||||
|
||||
.atk-badge {
|
||||
color: #e5e5e5 !important;
|
||||
background: #444 !important;
|
||||
}
|
||||
|
||||
.atk-reply-to {
|
||||
border-left: 3px solid #242021 !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;
|
||||
}
|
||||
|
||||
/* Blockquote Dark Mode */
|
||||
.atk-content blockquote {
|
||||
background-color: #252526; /* 更深的背景 */
|
||||
border-left-color: #444; /* 边框颜色与主题呼应 */
|
||||
color: #b0b0b0; /* 柔和的灰白文字 */
|
||||
box-shadow: none; /* 暗色模式去除阴影或减弱 */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Transition Effects --- */
|
||||
.artalk,
|
||||
.atk-main-editor,
|
||||
.atk-textarea,
|
||||
.atk-content,
|
||||
.atk-content p,
|
||||
.atk-item.atk-nick,
|
||||
.atk-list-no-comment,
|
||||
.atk-copyright,
|
||||
.atk-send-btn,
|
||||
.atk-loading,
|
||||
.atk-layer-wrap,
|
||||
.atk-comment .atk-main .atk-footer .atk-actions span,
|
||||
.atk-ua,
|
||||
.atk-grp-switcher span,
|
||||
.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;
|
||||
}
|
||||
|
||||
/* --- Force Light Mode Overrides (Fix for Day Mode visibility) --- */
|
||||
/* Increasing specificity to override dark mode media query */
|
||||
[data-theme="light"] .artalk,
|
||||
[data-theme="light"] .atk-layer-wrap,
|
||||
[data-theme="light"] .atk-content,
|
||||
[data-theme="light"] .atk-header,
|
||||
[data-theme="light"] .atk-content p,
|
||||
[data-theme="light"] .pinglun,
|
||||
html[data-theme="light"] .atk-item.atk-nick,
|
||||
html[data-theme="light"] .atk-item.atk-nick a,
|
||||
html[data-theme="light"] .atk-header .atk-nick,
|
||||
html[data-theme="light"] .atk-main-editor input.atk-nick,
|
||||
html[data-theme="light"] .atk-main-editor input.atk-email,
|
||||
html[data-theme="light"] .atk-main-editor input.atk-link {
|
||||
color: var(--text-content-color) !important;
|
||||
}
|
||||
|
||||
/* Force Blockquote Light Mode */
|
||||
html[data-theme="light"] .atk-content blockquote {
|
||||
color: #555 !important;
|
||||
background-color: #f8f9fa !important;
|
||||
border-left-color: var(--text-highlight-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .atk-content blockquote p {
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
/* Force Loading Spinner Light Mode */
|
||||
html[data-theme="light"] .atk-loading-spinner svg circle {
|
||||
stroke: var(--text-highlight-color) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* 修复 Artalk 加载完成后 loading 不消失的问题 */
|
||||
/* 当 Artalk 加载完成后，通常会移除 atk-loading 类，或者添加 hidden 类 */
|
||||
/* 强制 .atk-loading 只有在确实需要显示时才显示 */
|
||||
.atk-loading {
|
||||
display: none !important; /* 默认隐藏 */
|
||||
}
|
||||
|
||||
/* 只有当它作为直接子元素且需要显示时才显示（Artalk 内部逻辑控制） */
|
||||
/* 通常 Artalk 会在加载时插入这个元素。如果它一直显示，可能是 display: flex !important 覆盖了 Artalk 的隐藏逻辑 */
|
||||
/* 我们需要找到一个更精确的选择器，或者去掉 !important */
|
||||
|
||||
/* 尝试移除 display: flex !important，改用更温和的方式 */
|
||||
.artalk.atk-loading-wrap .atk-loading {
|
||||
display: flex !important; /* 仅在父容器有 loading 状态时显示 */
|
||||
}
|
||||
|
||||
.artalk .atk-loading {
|
||||
/* 恢复默认行为，让 JS 控制显示隐藏 */
|
||||
display: flex;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
/* 当 Artalk 移除 loading 状态时（通常是移除元素或添加隐藏类） */
|
||||
.atk-loading.atk-fade-out {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.artalk.hidden { display: none; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in new issue
Block a user