/* 基础样式 - 与archives.html保持一致 */
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* 在此处添加新的字体规则 */
.post-title {
font-family: var(--blog-font-sans) !important;
font-size: 28px !important;
}
.post-content {
font-family: var(--blog-font-sans) !important;
font-size: 18px !important;
line-height: 1.72 !important;
}
.post-content > div {
font-family: inherit;
}
.post-content p,
.post-content li,
.post-content div,
.post-content span {
font-family: inherit !important;
font-size: inherit;
line-height: inherit;
}
/* 表格样式 - 继承正文字体大小 */
.post-content table,
.post-content tr,
.post-content td,
.post-content th,
.post-content thead,
.post-content tbody {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
/* 表格单元格内边距优化 */
.post-content td,
.post-content th {
padding: 8px 12px !important;
border: 1px solid #ddd !important;
}
/* 表格表头样式 */
.post-content th {
background-color: #f5f5f5 !important;
font-weight: 600 !important;
}
/* 列表样式 - 与Markdown渲染效果一致 */
.post-content ul,
.post-content ol {
padding-left: 2em !important;
margin: 1em 0 !important;
}
.post-content ul {
list-style-type: disc !important;
}
.post-content ul ul {
list-style-type: circle !important;
}
.post-content ul ul ul {
list-style-type: square !important;
}
.post-content ol {
list-style-type: decimal !important;
}
.post-content li {
margin: 0.5em 0 !important;
}
/* 原有其他样式保持不变 */
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
#lightbox img {
max-width: 90%;
max-height: 90%;
}
#lightbox .zoomButton {
position: fixed;
bottom: 20px;
width: 40px;
height: 40px;
border-radius: 50%; /* 圆形按钮 */
font-size: 24px;
line-height: 40px; /* 文字垂直居中 */
text-align: center; /* 文字水平居中 */
cursor: pointer;
color: white;
background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
border: none;
transition: background-color 0.3s ease; /* 平滑过渡效果 */
z-index: 10001;
}
@media (hover: hover) and (pointer: fine) {
#lightbox .zoomButton:hover {
background-color: rgba(255, 255, 255, 0.8); /* 鼠标悬停时加深背景色 */
}
}
#lightbox .zoomButton {
font-size: 30px; /* 调整图标大小 */
}
/* 调整现有放大缩小按钮位置 */
#zoomIn {
bottom: 20px;
right: 80px; /* 为导航按钮腾出空间 */
}
#zoomOut {
bottom: 20px;
right: 20px;
}
@media (hover: hover) and (pointer: fine) {
#lightbox .zoomButton:hover {
background-color: rgba(255, 255, 255, 0.8); /* 鼠标悬停时加深背景色 */
}
}
#lightbox .zoomButton {
font-size: 30px; /* 调整图标大小 */
}
/* 新增导航按钮样式 */
#prevButton, #nextButton {
position: fixed;
top: 50vh;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50%;
color: #333;
font-size: 24px;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 10001;
display: none; /* 默认隐藏 */
transition: background-color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
#prevButton:hover,
#nextButton:hover {
background-color: rgba(255, 255, 255, 0.8);
}
}
#prevButton {
left: 20px;
}
#nextButton {
right: 20px;
}
/* 调整现有放大缩小按钮位置 */
#zoomIn {
bottom: 20px;
right: 80px; /* 为导航按钮腾出空间 */
}
#zoomOut {
bottom: 20px;
right: 20px;
}
.clear-input {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
display: none; /* 默认隐藏 */
}
#emoji-selector {
position: relative;
display: none;
border-radius: 5px;
padding: 10px;
z-index: 1;
}
.emoji-button-item {
font-size: 19px; /* 控制表情的大小 */
padding: 5px; /* 内边距 */
margin: 2px; /* 外边距 */
cursor: pointer; /* 鼠标指针样式 */
border-radius: 5px; /* 圆角 */
background: none;
}
/* 现代化返回顶部按钮 - 与links.html保持一致 */
.back-to-top {
position: fixed !important;
bottom: 30px !important;
right: 30px !important;
top: auto !important;
left: auto !important;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex !important;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.8);
z-index: 10002 !important;
border: none;
float: none !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
/* 按钮显示状态 */
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* 内部光晕效果 */
.back-to-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0) 100%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
/* 外部光晕效果 */
.back-to-top::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c);
background-size: 300% 300%;
border-radius: 50%;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
animation: gradient-shift 3s ease infinite;
}
/* 悬停效果 */
@media (hover: hover) and (pointer: fine) {
.back-to-top:hover {
opacity: 1;
transform: translateY(-8px) scale(1.05) !important;
box-shadow: 0 16px 48px rgba(102, 126, 234, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.2);
}
}
@media (hover: hover) and (pointer: fine) {
.back-to-top:hover::before {
opacity: 1;
}
}
@media (hover: hover) and (pointer: fine) {
.back-to-top:hover::after {
opacity: 0.6;
}
}
/* 点击效果 */
@media (hover: hover) and (pointer: fine) {
.back-to-top:active {
transform: translateY(-4px) scale(0.98) !important;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.15);
transition: all 0.15s ease;
}
}
/* SVG图标样式 */
.back-to-top svg {
width: 24px;
height: 24px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
color: white;
position: relative;
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.back-to-top:hover svg {
transform: translateY(-2px);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
animation: icon-bounce 0.6s ease-in-out;
}
}
/* 渐变动画 */
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 图标弹跳动画 */
@keyframes icon-bounce {
0%, 100% {
transform: translateY(-2px) rotate(0deg);
}
50% {
transform: translateY(-6px) rotate(-5deg);
}
}
/* 响应式调整 */
@media (max-width: 768px) {
.back-to-top {
width: 48px !important;
height: 48px !important;
bottom: 20px !important;
right: 20px !important;
top: auto !important;
left: auto !important;
}
.back-to-top svg {
width: 20px;
height: 20px;
}
@media (hover: hover) and (pointer: fine) {
.back-to-top:hover {
transform: translateY(-6px) scale(1.02) !important;
}
}
}
/* 小屏幕设备 */
@media (max-width: 480px) {
.back-to-top {
width: 44px !important;
height: 44px !important;
bottom: 16px !important;
right: 16px !important;
top: auto !important;
left: auto !important;
}
.back-to-top svg {
width: 18px;
height: 18px;
}
}
/* 删除按钮样式调整 */
.delete-btn {
position: absolute;
top: 5px;
right: 5px;
width: 24px;
height: 24px;
background: rgba(255, 77, 79, 0.9); /* 保留红色背景用于删除按钮 */
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
transition: all 0.3s;
z-index: 10; /* 确保按钮在最上层 */
}
/* 删除时按钮背景变红 */
@media (hover: hover) and (pointer: fine) {
.delete-btn:hover {
background: #ff4444; /* 完全不透明红色 */
}
}
.copyright-text {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
cursor: pointer; /* 统一指针样式 */
}
/* 桌面端原生悬浮提示（保留） */
@media (hover: hover) {
.copyright-text:hover {
/* 可选：如果需要桌面端悬停时文本不截断，可取消下面的注释 */
/* white-space: normal;
overflow: visible;
max-width: none; */
}
}
/* 移动端点击触发的悬浮提示框样式 */
.copyright-tooltip {
position: fixed;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 14px;
line-height: 1.4;
z-index: 1000;
pointer-events: none; /* 防止提示框阻挡点击 */
max-width: 80vw; /* 最大宽度不超过屏幕80% */
word-wrap: break-word; /* 长文本换行 */
}
/* 展开/收起按钮样式 - 统一蓝色实心风格 */
.show-replies .ui.button {
background: #1e88e5;
color: white !important;
border: none !important;
padding: 6px 12px;
font-size: 12px;
border-radius: 15px;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(30, 136, 229, 0.3);
}
@media (hover: hover) and (pointer: fine) {
.show-replies .ui.button:hover {
background: #1565c0;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(30, 136, 229, 0.4);
}
}
@media (hover: hover) and (pointer: fine) {
.show-replies .ui.button:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(30, 136, 229, 0.3);
}
}
/* 回复按钮样式 - 保持原有风格 */
.reply .ui.button {
background: transparent !important;
color: #009688 !important;
border: 1px solid #009688 !important;
padding: 6px 12px;
font-size: 12px;
border-radius: 15px;
transition: all 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.reply .ui.button:hover {
background: #e0f2f1 !important;
}
}
/* 子评论容器动画 */
.replies-container {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-10px);
transition: max-height 0.3s ease-out, opacity 0.2s ease-out, transform 0.3s ease-out;
will-change: max-height, opacity, transform;
}
.replies-container.show {
max-height: none;
opacity: 1;
transform: translateY(0);
}
/* 子评论间距 */
.replies-container .comment {
margin: 15px 0;
padding: 0; /* 移除内边距 */
background: transparent; /* 移除背景色 */
border-radius: 0; /* 移除圆角 */
border-left: none; /* 移除左侧边框 */
}
/* 添加以下样式确保子评论内容与父评论完全一致 */
.replies-container .comment .text p {
background: #fafafa repeating-linear-gradient(-45deg, #fff, #fff 1.125rem, transparent 1.125rem, transparent 2.25rem) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, .15) !important;
margin: 20px 0 !important;
padding: 15px !important;
border-radius: 5px !important;
font-size: 16px !important;
color: #555 !important;
text-align: left !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* 错误提示框样式（居中版，优化宽度） */
.error-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(245, 101, 101, 0.9);
color: white;
padding: 10px 16px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 6px;
z-index: 9999;
opacity: 0;
transition: all 0.3s ease;
min-width: 200px;
max-width: 300px;
word-break: break-word;
white-space: normal;
}
.error-toast.show {
opacity: 1;
}
.error-toast i {
font-size: 16px;
margin-right: 0;
}
/* 成功提示框样式 */
.success-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(16, 185, 129, 0.9);
color: white;
padding: 10px 16px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 6px;
z-index: 9999;
opacity: 0;
transition: all 0.3s ease;
min-width: 200px;
max-width: 300px;
word-break: break-word;
white-space: normal;
}
.success-toast.show {
opacity: 1;
}
.success-toast i {
font-size: 16px;
margin-right: 0;
}
/* 加载动画样式 */
.loading-indicator {
display: flex;
align-items: center;
gap: 6px;
}
.loading-indicator .spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #1989fa;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* QQ昵称获取时的 loading 效果 */
input#nickname.loading {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 18px 18px;
padding-right: 34px;
transition: all 0.3s ease;
}
/* 回复框昵称 loading 效果 */
.reply-modal input.reply-nickname.loading {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 28px center;
background-size: 16px 16px;
padding-right: 50px;
transition: all 0.3s ease;
}
/* 回复框 QQ 输入框 loading 效果（用于获取头像时） */
.reply-modal input.reply-qq.loading {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 28px center;
background-size: 16px 16px;
padding-right: 50px;
transition: all 0.3s ease;
}
/* 主评论区域头像 loading 效果 */
img#avatar.loading {
opacity: 0.5;
filter: grayscale(60%);
animation: avatarPulse 0.6s ease-in-out infinite;
}
/* 回复框头像 loading 效果 */
.reply-modal .ui.mini.circular.image.loading {
opacity: 0.5;
filter: grayscale(60%);
animation: avatarPulse 0.6s ease-in-out infinite;
border: 2px solid #1989fa;
box-shadow: 0 0 8px rgba(25, 137, 250, 0.5);
}
@keyframes avatarPulse {
0%, 100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.2;
transform: scale(0.92);
}
}
#emoji-selector {
position: relative;
display: none;
border-radius: 15px;
background-color: white;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
margin-top: 15px;
padding: 0;
overflow: hidden;
z-index: 100;
}
.emoji-selector-container {
max-width: 100%;
background-color: white;
border-radius: 15px;
overflow: hidden;
}
.emoji-panel {
display: none;
grid-template-columns: repeat(auto-fill, 48px);
justify-content: start;
gap: 10px;
padding: 15px;
border-radius: 0 0 15px 15px;
background-color: #f8faff;
max-height: 300px;
overflow-y: auto;
}
.emoji-panel.active {
display: grid;
animation: fadeIn 0.4s ease;
}
.emoji-button {
font-size: 30px !important; /* 增大字体 */
width: 50px !important; /* 增大容器 */
height: 50px !important;
border-radius: 12px !important; /* 更大圆角 */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
background: none !important; /* 背景透明 */
border: 1px solid transparent !important; /* 边框透明 */
box-shadow: none !important; /* 移除阴影 */
}
@media (hover: hover) and (pointer: fine) {
.emoji-button:hover {
transform: translateY(-4px) scale(1.15) !important; /* 更明显的悬停效果 */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 适配移动设备 - 完全按照links.html样式 */
@media (max-width: 768px) {
.emoji-panel {
grid-template-columns: repeat(7, 1fr) !important;
justify-content: stretch !important;
gap: 6px !important;
max-height: 350px !important;
padding: 10px !important;
}
.emoji-button {
background: none !important;
font-size: 24px !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1;
}
.emoji-item {
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1;
margin: 0 !important;
padding: 2px !important;
}
.emoji-item img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
/* 回复框表情面板样式 - 完全按照links.html */
.reply-modal .emoji-panel {
width: 100% !important;
left: 0 !important;
right: 0 !important;
box-sizing: border-box;
}
.reply-modal .emoji-panel > div {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 6px !important;
}
.reply-modal .emoji-item {
width: 100% !important;
margin: 0 !important;
}
}
@media (max-width: 480px) {
.emoji-tabs {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 5px;
}
.emoji-panel {
grid-template-columns: repeat(7, 1fr) !important;
justify-content: stretch !important;
gap: 5px !important;
padding: 8px !important;
}
.emoji-button {
background: none !important;
font-size: 22px !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1;
}
.emoji-item {
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1;
margin: 0 !important;
padding: 2px !important;
}
.emoji-item img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
.emoji-tab {
padding: 8px 12px !important;
}
/* 回复框表情面板样式 - 完全按照links.html */
.reply-modal .emoji-panel {
width: 100% !important;
left: 0 !important;
right: 0 !important;
box-sizing: border-box;
}
.reply-modal .emoji-panel > div {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 5px !important;
}
.reply-modal .emoji-item {
width: 100% !important;
margin: 0 !important;
height: auto !important;
aspect-ratio: 1/1;
padding: 2px !important;
}
.reply-modal .emoji-item img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
}
/* 新增textarea字体样式 */
#aaa {
font-family: var(--blog-font-sans) !important;
font-size: 16px !important;
line-height: 1.7 !important;
}
/* 确保placeholder也使用相同字体 */
#aaa::placeholder {
font-family: var(--blog-font-sans) !important;
font-style: italic;
}
/* 评论预览区域使用相同字体 */
.preview-box {
font-family: var(--blog-font-sans) !important;
}
/* 展开/收起按钮样式 - 轻量版 */
.toggle-replies-btn {
display: inline-flex;
align-items: center;
background: transparent;
color: #3498db;
border: 1px solid #e0e0e0;
padding: 8px 18px;
border-radius: 24px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
.toggle-replies-btn:hover {
background: #f8fafd;
border-color: #3498db;
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
}
}
@media (hover: hover) and (pointer: fine) {
.toggle-replies-btn:active {
transform: scale(0.98);
}
}
.toggle-replies-btn i {
margin-left: 8px;
transition: transform 0.3s ease;
font-size: 0.9rem;
}
/* 展开状态 */
.toggle-replies-btn.expanded {
background: #f8fafd;
border-color: #3498db;
}
.toggle-replies-btn.expanded i {
transform: rotate(180deg);
}
.code-block-wrapper {
position: relative;
margin: 1.2em 0;
padding: 1em 2.8em 1em 1em; /* 右侧内边距预留按钮空间 */
background: #f8f9fa; /* 代码块浅灰背景 */
border-radius: 6px;
overflow: auto; /* 内容过长时滚动 */
}
.copy-code-button {
position: absolute;
top: 0.7em;
right: 0.7em;
padding: 0.4em 0.8em;
background: #e9ecef; /* 基础浅灰背景 */
color: #555; /* 深灰文字 */
border: 1px solid #dee2e6; /* 浅灰边框 */
border-radius: 4px;
cursor: pointer;
font-size: 0.88em;
font-family: var(--blog-font-sans);
z-index: 5;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 0.5em; /* 图标与文字间距 */
user-select: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
/* 图标样式优化 */
.copy-code-button i {
font-size: 0.9em; /* 图标比文字略小 */
flex-shrink: 0; /* 防止图标被压缩 */
}
/* 悬停状态 */
@media (hover: hover) and (pointer: fine) {
.copy-code-button:hover {
background: #dee2e6;
border-color: #ced4da;
transform: translateY(-1px);
}
}
/* 点击状态 */
@media (hover: hover) and (pointer: fine) {
.copy-code-button:active {
background: #ced4da;
transform: translateY(0);
}
}
/* 复制成功状态 */
.copy-code-button.copied {
background: #e6f4ea; /* 浅绿背景 */
border-color: #d4e7d1; /* 浅绿边框 */
color: #2e7d32; /* 深绿文字 */
}
.copy-code-button.copied i {
color: inherit; /* 继承文字颜色（深绿） */
}
.emoji-container {
position: relative;
margin-top: 15px;
}
.emoji-button {
background: none !important; /* 透明背景 */
border: none !important;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 22px;
}
@media (hover: hover) and (pointer: fine) {
.emoji-button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(25, 137, 250, 0.4);
}
}
/* 表情面板样式 */
.emoji-container {
position: relative;
text-align: left;
}
.emoji-panel {
position: absolute;
top: 100%;
left: 0;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 10px;
display: none;
grid-template-columns: repeat(auto-fill, 48px);
justify-content: start;
gap: 10px;
width: 100%;
max-height: 202px;
overflow-y: auto;
overflow-x: hidden;
z-index: 100;
border: 1px solid #e1e8ed;
margin-top: 10px;
animation: fadeIn 0.3s ease;
}
.emoji-panel.active {
display: grid;
}
.emoji-item {
font-size: 28px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 10px;
transition: all 0.2s ease;
background: transparent;
flex-shrink: 0;
}
.emoji-item img {
width: 38px;
height: 38px;
object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
.emoji-item:hover {
transform: scale(1.15);
background: #f0f7ff;
box-shadow: 0 0 0 2px rgba(25, 137, 250, 0.3);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-footer {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.submit-btn {
background: linear-gradient(135deg, #1989fa, #007acc);
color: white;
border: none;
padding: 12px 30px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(25, 137, 250, 0.3);
}
@media (hover: hover) and (pointer: fine) {
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(25, 137, 250, 0.4);
}
}
@media (hover: hover) and (pointer: fine) {
.submit-btn:active {
transform: translateY(0);
}
}
/* 适配移动设备 */
@media (max-width: 768px) {
.container {
border-radius: 15px;
}
header {
padding: 20px;
}
h1 {
font-size: 1.8rem;
}
.comment-form {
padding: 20px;
}
.emoji-panel {
grid-template-columns: repeat(7, 1fr) !important;
justify-content: stretch !important;
gap: 6px !important;
max-height: 350px !important;
padding: 10px !important;
overflow-x: hidden !important;
}
.emoji-button {
background: none !important;
font-size: 24px !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1;
}
.emoji-item {
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1;
margin: 0 !important;
padding: 2px !important;
}
.emoji-item img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.6rem;
}
.subtitle {
font-size: 0.95rem;
}
.emoji-panel {
grid-template-columns: repeat(7, 1fr) !important;
justify-content: stretch !important;
gap: 5px !important;
padding: 8px !important;
}
.emoji-button {
background: none !important;
font-size: 22px !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1;
}
.emoji-item {
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1;
margin: 0 !important;
padding: 2px !important;
}
.emoji-item img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
}
.emoji-trigger,
.emoji-trigger:focus {
background-color: transparent !important;
background-image: none !important;
}
@media (hover: hover) and (pointer: fine) {
.emoji-trigger:hover,
.emoji-trigger:active {
background-color: transparent !important;
background-image: none !important;
}
}
/* 修复文章标题前的#符号 */
.post-content h1::before,
.post-content h2::before,
.post-content h3::before,
.post-content h4::before,
.post-content h5::before,
.post-content h6::before {
content: "" !important;
display: none !important;
}
/* --- ADDED: Width Increase --- */
.main-content {
max-width: 980px !important; /* 原940px + 40px */
margin: 0 auto;
}
/* 手机端80px间距 强制生效 优先级最高 - 与archives.html保持一致 */
@media (max-width: 767px) {
.main-content {
margin-top: 80px !important;
width: 100% !important;
padding: 20px !important;
box-sizing: border-box;
}
}
/* --- ADDED: Code Block Design Tokens & Theme Configuration --- */
:root {
/* Dark Theme (Default) - One Dark Pro based */
--code-bg: #282c34;
--code-header-bg: #21252b;
--code-border: #1e2227;
--code-text: #abb2bf;
--code-lang-color: #61afef;
--code-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
--code-scrollbar: #21252b;
--code-scrollbar-thumb: #4b5363;
--code-scrollbar-thumb-hover: #5c6370;
--code-copy-btn-bg: rgba(255, 255, 255, 0.05);
--code-copy-btn-hover: rgba(255, 255, 255, 0.1);
--code-copy-text: #9da5b4;
--code-copy-text-hover: #ffffff;
}
@media (prefers-color-scheme: light) {
:root {
/* Light Theme Variant - GitHub Light based */
--code-bg: #ffffff;
--code-header-bg: #f6f8fa;
--code-border: #d0d7de;
--code-text: #24292e;
--code-lang-color: #0969da;
--code-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
--code-scrollbar: #f6f8fa;
--code-scrollbar-thumb: #d0d7de;
--code-scrollbar-thumb-hover: #8c959f;
--code-copy-btn-bg: rgba(0, 0, 0, 0.05);
--code-copy-btn-hover: rgba(0, 0, 0, 0.1);
--code-copy-text: #57606a;
--code-copy-text-hover: #24292e;
}
/* Syntax Highlighting Overrides for Light Mode (Ensure Contrast) */
.code-body .hljs-comment,
.code-body .hljs-quote {
color: #6e7781 !important;
}
.code-body .hljs-doctag,
.code-body .hljs-keyword,
.code-body .hljs-formula {
color: #cf222e !important;
}
.code-body .hljs-section,
.code-body .hljs-name,
.code-body .hljs-selector-tag,
.code-body .hljs-deletion,
.code-body .hljs-subst {
color: #cf222e !important;
}
.code-body .hljs-literal {
color: #953800 !important;
}
.code-body .hljs-string,
.code-body .hljs-regexp,
.code-body .hljs-addition,
.code-body .hljs-attribute,
.code-body .hljs-meta .hljs-string {
color: #0a3069 !important;
}
.code-body .hljs-attr,
.code-body .hljs-variable,
.code-body .hljs-template-variable,
.code-body .hljs-type,
.code-body .hljs-selector-class,
.code-body .hljs-selector-attr,
.code-body .hljs-selector-pseudo,
.code-body .hljs-number {
color: #953800 !important;
}
.code-body .hljs-symbol,
.code-body .hljs-bullet,
.code-body .hljs-link,
.code-body .hljs-meta,
.code-body .hljs-selector-id,
.code-body .hljs-title {
color: #8250df !important;
}
.code-body .hljs-built_in,
.code-body .hljs-title.class_,
.code-body .hljs-class .hljs-title {
color: #953800 !important;
}
}
/* --- ADDED: Code Block Styles (Themed) --- */
.code-wrapper {
background: var(--code-bg) !important;
border-radius: 8px !important;
margin: 24px 0 !important;
overflow: hidden !important;
box-shadow: var(--code-shadow) !important;
font-family: var(--blog-font-code) !important;
border: 1px solid var(--code-border) !important;
transition: all 0.3s ease !important;
animation: code-fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes code-fade-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (hover: hover) and (pointer: fine) {
.code-wrapper:hover {
box-shadow: var(--code-shadow), 0 0 0 1px var(--code-border) !important;
transform: translateY(-2px);
}
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px !important;
background: var(--code-header-bg) !important;
color: var(--code-text) !important;
font-size: 13px !important;
border-bottom: 1px solid var(--code-border) !important;
user-select: none;
}
.code-lang {
font-weight: 600 !important;
color: var(--code-lang-color) !important;
letter-spacing: 0.5px;
}
.code-copy {
background: var(--code-copy-btn-bg) !important;
border: none !important;
color: var(--code-copy-text) !important;
border-radius: 4px !important;
padding: 4px 10px !important;
cursor: pointer;
font-size: 12px !important;
transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.code-copy:hover {
background: var(--code-copy-btn-hover) !important;
color: var(--code-copy-text-hover) !important;
}
}
/* AI对话中的代码块整体样式 - 圆角卡片风格 */
.ai-chat-message-content .code-wrapper,
.ai-chat-message-content.markdown-body .code-wrapper {
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
margin: 12px 0 !important;
}
/* AI对话中的代码块头部样式 */
.ai-chat-message-content .code-header,
.ai-chat-message-content.markdown-body .code-header {
background: #1a1d23 !important;
color: #abb2bf !important;
border-bottom: 1px solid #2c313a !important;
padding: 10px 16px !important;
font-size: 12px !important;
}
.ai-chat-message-content .code-lang,
.ai-chat-message-content.markdown-body .code-lang {
color: #9da5b4 !important;
font-weight: 500 !important;
font-size: 11px !important;
letter-spacing: 0.5px !important;
}
.ai-chat-message-content .code-copy,
.ai-chat-message-content.markdown-body .code-copy {
background: #2c313a !important;
color: #9da5b4 !important;
border: none !important;
border-radius: 6px !important;
padding: 4px 12px !important;
font-size: 12px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-message-content .code-copy:hover,
.ai-chat-message-content.markdown-body .code-copy:hover {
background: #3d424b !important;
color: #ffffff !important;
}
}
/* AI对话中的代码块主体样式 */
.ai-chat-message-content .code-body,
.ai-chat-message-content.markdown-body .code-body {
background: #282c34 !important;
}
.ai-chat-message-content .code-body pre,
.ai-chat-message-content.markdown-body .code-body pre {
background: #282c34 !important;
margin: 0 !important;
padding: 16px !important;
border-radius: 0 !important;
}
/* AI code uses the card body as its only surface; avoid a second box behind code text. */
.ai-chat-message-content .code-body pre code,
.ai-chat-message-content .code-body pre code.hljs,
.ai-chat-message-content.markdown-body .code-body pre code,
.ai-chat-message-content.markdown-body .code-body pre code.hljs {
background: transparent !important;
box-shadow: none !important;
}
/* AI对话中的代码块折叠遮罩 */
.ai-chat-message-content .code-wrapper.collapsed .code-body::after,
.ai-chat-message-content.markdown-body .code-wrapper.collapsed .code-body::after {
background: linear-gradient(to bottom, transparent, #282c34) !important;
}
/* AI对话中的展开代码按钮 */
.ai-chat-message-content .code-expand-btn,
.ai-chat-message-content.markdown-body .code-expand-btn {
background: #282c34 !important;
color: #9da5b4 !important;
border-top: 1px solid #3d424b !important;
padding: 10px !important;
font-size: 12px !important;
cursor: pointer !important;
text-align: center !important;
transition: all 0.2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-message-content .code-expand-btn:hover,
.ai-chat-message-content.markdown-body .code-expand-btn:hover {
background: #323842 !important;
color: #ffffff !important;
}
}
/* ==================== 美化分享按钮样式 ==================== */
.share-btn-container {
text-align: right;
padding: 20px 10px 15px 0;
}
.share-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #00b5ad 0%, #009c95 100%);
color: white;
border: none;
border-radius: 25px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 181, 173, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.share-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
@media (hover: hover) and (pointer: fine) {
.share-btn:hover::before {
left: 100%;
}
}
@media (hover: hover) and (pointer: fine) {
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 181, 173, 0.4);
}
}
@media (hover: hover) and (pointer: fine) {
.share-btn:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(0, 181, 173, 0.3);
}
}
.share-btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.share-btn-icon svg {
width: 100%;
height: 100%;
}
.share-btn-text {
position: relative;
top: 1px;
}
/* 移动端适配 */
@media (max-width: 767px) {
.share-btn-container {
text-align: right;
padding: 15px 10px 10px 0;
}
.share-btn {
padding: 10px 20px;
font-size: 14px;
}
.share-btn-icon {
width: 18px;
height: 18px;
}
}
.code-body {
position: relative;
padding: 0 !important;
overflow-x: auto !important;
background: var(--code-bg) !important;
}
.code-body pre {
margin: 0 !important;
padding: 16px !important;
background: transparent !important;
border: none !important;
font-family: inherit !important;
}
.code-body code {
font-family: inherit !important;
font-size: 16px !important;
line-height: 1.6 !important;
background: transparent !important;
text-shadow: none !important;
color: var(--code-text) !important;
padding: 0 !important;
}
.code-body::-webkit-scrollbar {
height: 8px !important;
background-color: var(--code-scrollbar) !important;
}
.code-body::-webkit-scrollbar-thumb {
background: var(--code-scrollbar-thumb) !important;
border-radius: 4px !important;
}
@media (hover: hover) and (pointer: fine) {
.code-body::-webkit-scrollbar-thumb:hover {
background: var(--code-scrollbar-thumb-hover) !important;
}
}
/* --- ADDED: Code Folding Styles --- */
.code-wrapper.collapsed .code-body {
overflow: hidden !important;
position: relative;
}
/* Gradient Mask for Collapsed State */
.code-wrapper.collapsed .code-body::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to bottom, transparent, var(--code-bg));
pointer-events: none;
z-index: 10;
}
.code-expand-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 0;
cursor: pointer;
background: var(--code-header-bg);
border-top: 1px solid var(--code-border);
color: var(--code-text);
font-size: 13px;
transition: all 0.2s;
user-select: none;
font-family: var(--blog-font-sans);
}
@media (hover: hover) and (pointer: fine) {
.code-expand-btn:hover {
background: var(--code-copy-btn-hover);
color: var(--code-copy-text-hover);
}
}
.code-expand-btn i {
margin-right: 6px;
transition: transform 0.3s ease;
}
/* Rotate icon when expanded */
.code-wrapper:not(.collapsed) .code-expand-btn i {
transform: rotate(180deg);
}
/* Animation for max-height */
.code-body {
transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* emoji-size: pc-38px */
@media (min-width: 768px) {
.emoji-item img,
.text img[src*="/emoji/"] {
width: 38px !important;
height: 38px !important;
object-fit: contain !important;
display: inline-block !important;
vertical-align: middle !important;
}
.emoji-panel {
grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)) !important;
}
}
/* ==================== 分享图片弹窗样式 ==================== */
.share-image-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
z-index: 10001;
justify-content: center;
align-items: center;
padding: 20px;
}
.share-image-content {
background: white;
border-radius: 20px;
padding: 25px;
max-width: 90%;
width: 440px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.share-image-title {
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
}
#shareImageCanvas {
max-width: 100%;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
}
.share-image-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.share-image-btn {
padding: 12px 24px;
border: none;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.share-image-btn.primary {
background: linear-gradient(135deg, #00b5ad, #009c95);
color: white;
}
@media (hover: hover) and (pointer: fine) {
.share-image-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 181, 173, 0.4);
}
}
.share-image-btn.secondary {
background: #f8f9fa;
color: #6c757d;
border: 1px solid #dee2e6;
}
@media (hover: hover) and (pointer: fine) {
.share-image-btn.secondary:hover {
background: #e9ecef;
}
}
@media (max-width: 767px) {
.share-image-content {
padding: 20px;
width: 100%;
max-width: 350px;
}
.share-image-title {
font-size: 18px;
}
.share-image-btn {
padding: 10px 20px;
font-size: 13px;
}
}
/* ==================== AI对话机器人组件样式 ==================== */
.ai-chat-widget {
position: fixed;
bottom: 100px;
right: 30px;
z-index: 9999;
font-family: var(--blog-font-sans);
}
.ai-chat-toggle {
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
/* 按钮内部容器，用于overflow:hidden效果 */
.ai-chat-toggle-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
overflow: hidden;
pointer-events: none;
}
.ai-chat-toggle-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
border-radius: 50%;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-toggle:hover {
transform: scale(1.1);
box-shadow: 0 6px 30px rgba(102, 126, 234, 0.5);
}
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-toggle:active {
transform: scale(0.95);
}
}
.ai-chat-toggle-icon {
width: 40px;
height: 40px;
object-fit: contain;
transition: transform 0.3s ease;
position: relative;
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-toggle:hover .ai-chat-toggle-icon {
transform: rotate(15deg) scale(1.1);
}
}
.ai-chat-avatar img {
width: 32px;
height: 32px;
object-fit: contain;
}
/* 未读消息提示 */
.ai-chat-badge {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
background: #ff4757;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 11px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
animation: badge-pulse 2s infinite;
z-index: 1;
}
@keyframes badge-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* 对话窗口 */
.ai-chat-window {
position: absolute;
bottom: 80px;
right: 0;
width: 380px;
height: 520px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.95);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-chat-window.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* 窗口尺寸调整控制 - 左上角 */
.ai-chat-resize-handle {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
cursor: nw-resize;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 20px;
transition: all 0.2s ease;
}
.ai-chat-resize-handle::before {
content: '';
width: 8px;
height: 8px;
border-left: 2px solid rgba(255, 255, 255, 0.5);
border-top: 2px solid rgba(255, 255, 255, 0.5);
border-top-left-radius: 2px;
transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-resize-handle:hover::before {
border-left-color: rgba(255, 255, 255, 0.9);
border-top-color: rgba(255, 255, 255, 0.9);
width: 12px;
height: 12px;
}
}
.ai-chat-resize-handle.resizing::before {
border-left-color: #667eea;
border-top-color: #667eea;
width: 12px;
height: 12px;
}
/* 窗口调整尺寸时的样式 */
.ai-chat-window.resizing {
transition: none;
user-select: none;
}
/* 窗口头部 */
.ai-chat-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
}
.ai-chat-header-info {
display: flex;
align-items: center;
gap: 12px;
}
.ai-chat-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.ai-chat-title {
font-size: 16px;
font-weight: 600;
}
.ai-chat-subtitle {
font-size: 12px;
opacity: 0.9;
margin-top: 2px;
}
.ai-chat-header-actions {
display: flex;
gap: 8px;
}
.ai-chat-header-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-header-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.1);
}
}
/* 消息区域 */
.ai-chat-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
background: #f8f9fa;
}
.ai-chat-messages::-webkit-scrollbar {
width: 6px;
}
.ai-chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-messages::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
}
/* 消息气泡 */
.ai-chat-message {
display: flex;
margin-bottom: 16px;
animation: message-fade-in 0.3s ease;
}
@keyframes message-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ai-chat-message.user {
justify-content: flex-end;
}
.ai-chat-message.ai {
justify-content: flex-start;
}
.ai-chat-message-content {
max-width: 80%;
padding: 12px 16px;
border-radius: 18px;
font-size: 14px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
text-align: left;
display: inline-block;
}
.ai-chat-message.ai .ai-chat-message-content {
background: white;
color: #374151;
border-bottom-left-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin-right: auto;
}
.ai-chat-message.user .ai-chat-message-content {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-bottom-right-radius: 4px;
}
/* 打字机效果光标 - 使用span元素实现 */
.ai-typing-cursor {
display: inline-block;
color: #667eea;
font-weight: 300;
margin-left: 2px;
animation: ai-cursor-blink 1s infinite;
}
@keyframes ai-cursor-blink {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
.ai-chat-message-time {
font-size: 11px;
color: #9ca3af;
margin-top: 4px;
text-align: right;
}
.ai-chat-message.ai .ai-chat-message-time {
text-align: left;
}
/* AI生成内容免责声明 */
.ai-disclaimer {
font-size: 12px;
color: #9ca3af;
margin-top: 8px;
text-align: left;
font-style: italic;
}
/* 消息操作按钮容器 */
.ai-chat-message-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
opacity: 1;
}
.ai-chat-message.user .ai-chat-message-actions {
justify-content: flex-end;
}
.ai-chat-message.ai .ai-chat-message-actions {
justify-content: flex-start;
}
/* 消息操作按钮 */
.ai-chat-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.04);
color: #9ca3af;
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-action-btn:hover {
background: rgba(102, 126, 234, 0.15);
color: #667eea;
transform: translateY(-1px);
}
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-action-btn:active {
transform: scale(0.92);
}
}
.ai-chat-action-btn.copied {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-action-btn.copied:hover {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
}
}
/* 暂停生成按钮 */
.ai-chat-pause-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: white;
color: #6b7280;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 6px;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-pause-btn:hover {
background: #f3f4f6;
border-color: #d1d5db;
color: #374151;
}
}
.ai-chat-pause-btn i {
font-size: 10px;
}
/* 继续生成文字按钮 */
.ai-chat-resume-text-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 16px;
border: none;
border-radius: 16px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
margin-left: 6px;
position: relative;
overflow: hidden;
}
.ai-chat-resume-text-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-resume-text-btn:hover::before {
left: 100%;
}
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-resume-text-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.45);
}
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-resume-text-btn:active {
transform: translateY(0) scale(0.97);
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
}
/* 滚动到底部按钮 */
.ai-chat-scroll-bottom {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%) translateY(20px);
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
color: #6b7280;
font-size: 14px;
}
.ai-chat-scroll-bottom.visible {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-scroll-bottom:hover {
background: #f9fafb;
border-color: #d1d5db;
color: #667eea;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-scroll-bottom:active {
transform: translateX(-50%) scale(0.95);
}
}
.ai-chat-scroll-bottom i {
animation: bounce-down 1.5s ease-in-out infinite;
}
@keyframes bounce-down {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(3px);
}
}
/* 加载动画 */
.ai-chat-loading {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: white;
border-radius: 18px;
border-bottom-left-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
width: fit-content;
}
.ai-chat-loading-dots {
display: flex;
gap: 4px;
}
.ai-chat-loading-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #667eea;
animation: loading-dot 1.4s ease-in-out infinite both;
}
.ai-chat-loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.ai-chat-loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes loading-dot {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.ai-chat-loading-text {
font-size: 13px;
color: #6b7280;
}
/* 输入区域 */
.ai-chat-input-area {
padding: 16px 20px;
background: white;
border-top: 1px solid #e5e7eb;
}
.ai-chat-input-wrapper {
display: flex;
gap: 10px;
align-items: flex-end;
}
.ai-chat-input {
flex: 1;
min-height: 44px;
max-height: 120px;
padding: 10px 16px;
border: 1px solid #e5e7eb;
border-radius: 22px;
font-size: 14px;
line-height: 1.5;
resize: none;
outline: none;
transition: all 0.2s ease;
font-family: inherit;
}
.ai-chat-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.ai-chat-input::placeholder {
color: #9ca3af;
}
.ai-chat-send-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-send-btn:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
}
.ai-chat-send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ai-chat-send-btn i {
font-size: 16px;
}
/* 发送按钮暂停状态 */
.ai-chat-send-btn.paused {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
animation: pulse-pause 2s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-send-btn.paused:hover {
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
}
@keyframes pulse-pause {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* 快捷问题 */
.ai-chat-quick-questions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.ai-chat-quick-btn {
padding: 6px 12px;
background: #f3f4f6;
border: none;
border-radius: 16px;
font-size: 12px;
color: #4b5563;
cursor: pointer;
transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-quick-btn:hover {
background: #e5e7eb;
color: #374151;
}
}
/* 错误提示 */
.ai-chat-error {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 12px;
color: #dc2626;
font-size: 13px;
margin-bottom: 12px;
}
/* 欢迎消息 */
.ai-chat-welcome {
text-align: center;
padding: 20px;
color: #6b7280;
}
.ai-chat-welcome-icon {
font-size: 48px;
margin-bottom: 12px;
}
.ai-chat-welcome-title {
font-size: 16px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.ai-chat-welcome-text {
font-size: 13px;
line-height: 1.6;
}
/* 代码块样式 - 确保与markdown-body中一致 */
.ai-chat-message-content pre,
.ai-chat-message-content pre.hljs {
background: #1f2937 !important;
color: #e5e7eb !important;
padding: 12px !important;
border-radius: 8px !important;
overflow-x: auto !important;
font-size: 12px !important;
line-height: 1.5 !important;
margin: 8px 0 !important;
border: none !important;
}
.ai-chat-message-content pre code,
.ai-chat-message-content pre.hljs code {
background: transparent !important;
color: inherit !important;
padding: 0 !important;
border-radius: 0 !important;
font-family: var(--blog-font-code) !important;
font-size: 12px !important;
line-height: 1.5 !important;
}
.ai-chat-message-content code {
font-family: var(--blog-font-code);
}
.ai-chat-message-content p {
margin: 0 0 8px 0;
}
.ai-chat-message-content p:last-child {
margin-bottom: 0;
}
/* ==================== Markdown渲染样式 ==================== */
.ai-chat-message-content.markdown-body {
font-size: 14px;
line-height: 1.7;
}
/* 标题样式 */
.ai-chat-message-content.markdown-body h1,
.ai-chat-message-content.markdown-body h2,
.ai-chat-message-content.markdown-body h3,
.ai-chat-message-content.markdown-body h4,
.ai-chat-message-content.markdown-body h5,
.ai-chat-message-content.markdown-body h6 {
margin: 12px 0 8px 0;
font-weight: 600;
line-height: 1.4;
color: #374151;
}
.ai-chat-message-content.markdown-body h1 {
font-size: 18px;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 6px;
}
.ai-chat-message-content.markdown-body h2 {
font-size: 16px;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 4px;
}
.ai-chat-message-content.markdown-body h3 {
font-size: 15px;
}
.ai-chat-message-content.markdown-body h4,
.ai-chat-message-content.markdown-body h5,
.ai-chat-message-content.markdown-body h6 {
font-size: 14px;
}
/* 列表样式 */
.ai-chat-message-content.markdown-body ul,
.ai-chat-message-content.markdown-body ol {
margin: 8px 0;
padding-left: 20px;
}
.ai-chat-message-content.markdown-body li {
margin: 4px 0;
}
.ai-chat-message-content.markdown-body ul li {
list-style-type: disc;
}
.ai-chat-message-content.markdown-body ol li {
list-style-type: decimal;
}
/* 任务列表 */
.ai-chat-message-content.markdown-body input[type="checkbox"] {
margin-right: 6px;
vertical-align: middle;
}
/* 链接样式 */
.ai-chat-message-content.markdown-body a {
color: #667eea;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-message-content.markdown-body a:hover {
border-bottom-color: #667eea;
}
}
/* 强调样式 */
.ai-chat-message-content.markdown-body strong {
font-weight: 600;
color: #1f2937;
}
.ai-chat-message-content.markdown-body em {
font-style: italic;
}
.ai-chat-message-content.markdown-body del {
text-decoration: line-through;
color: #9ca3af;
}
/* 引用块 */
.ai-chat-message-content.markdown-body blockquote {
margin: 8px 0;
padding: 8px 12px;
border-left: 4px solid #667eea;
background: #f9fafb;
border-radius: 0 8px 8px 0;
color: #4b5563;
}
.ai-chat-message-content.markdown-body blockquote p {
margin: 0;
}
/* 表格样式 */
.ai-chat-message-content.markdown-body table {
width: 100%;
border-collapse: collapse;
margin: 8px 0;
font-size: 13px;
}
.ai-chat-message-content.markdown-body th,
.ai-chat-message-content.markdown-body td {
padding: 8px 10px;
border: 1px solid #e5e7eb;
text-align: left;
}
.ai-chat-message-content.markdown-body th {
background: #f9fafb;
font-weight: 600;
color: #374151;
}
.ai-chat-message-content.markdown-body tr:nth-child(even) {
background: #f9fafb;
}
/* 代码块样式优化 - 使用更高优先级确保一致性 */
.ai-chat-message-content.markdown-body pre,
.ai-chat-message-content.markdown-body pre.hljs {
background: #1f2937 !important;
color: #e5e7eb !important;
padding: 12px !important;
border-radius: 8px !important;
overflow-x: auto !important;
font-size: 12px !important;
line-height: 1.5 !important;
margin: 8px 0 !important;
border: none !important;
}
.ai-chat-message-content.markdown-body pre code,
.ai-chat-message-content.markdown-body pre.hljs code {
background: transparent !important;
color: inherit !important;
padding: 0 !important;
border-radius: 0 !important;
font-family: var(--blog-font-code) !important;
font-size: 12px !important;
line-height: 1.5 !important;
}
/* 行内代码 */
.ai-chat-message-content.markdown-body code:not(pre code) {
background: #f3f4f6;
color: #dc2626;
padding: 2px 6px;
border-radius: 4px;
font-size: 13px;
font-family: var(--blog-font-code);
}
/* 水平分割线 */
.ai-chat-message-content.markdown-body hr {
border: none;
border-top: 1px solid #e5e7eb;
margin: 12px 0;
}
/* 图片样式 */
.ai-chat-message-content.markdown-body img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 8px 0;
}
/* 用户消息的Markdown样式适配 */
.ai-chat-message.user .ai-chat-message-content.markdown-body {
color: white;
}
.ai-chat-message.user .ai-chat-message-content.markdown-body h1,
.ai-chat-message.user .ai-chat-message-content.markdown-body h2,
.ai-chat-message.user .ai-chat-message-content.markdown-body h3,
.ai-chat-message.user .ai-chat-message-content.markdown-body h4,
.ai-chat-message.user .ai-chat-message-content.markdown-body h5,
.ai-chat-message.user .ai-chat-message-content.markdown-body h6,
.ai-chat-message.user .ai-chat-message-content.markdown-body strong {
color: white;
}
.ai-chat-message.user .ai-chat-message-content.markdown-body code {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.ai-chat-message.user .ai-chat-message-content.markdown-body a {
color: #e0e7ff;
border-bottom-color: rgba(255, 255, 255, 0.5);
}
.ai-chat-message.user .ai-chat-message-content.markdown-body blockquote {
border-left-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
}
/* 响应式设计 */
@media (max-width: 768px) {
.ai-chat-widget {
bottom: 80px;
right: 16px;
}
.ai-chat-toggle {
width: 52px;
height: 52px;
}
.ai-chat-toggle-icon {
width: 36px;
height: 36px;
}
.ai-chat-window {
position: fixed;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: calc(100vh - 80px);
border-radius: 20px 20px 0 0;
transform: translateY(100%);
}
.ai-chat-window.active {
transform: translateY(0);
}
.ai-chat-messages {
padding: 16px;
}
.ai-chat-input-area {
padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.ai-chat-scroll-bottom {
bottom: 100px;
width: 44px;
height: 44px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.ai-chat-message-content {
max-width: 85%;
padding: 10px 14px;
font-size: 13px;
}
.ai-chat-quick-questions {
gap: 6px;
}
.ai-chat-quick-btn {
padding: 5px 10px;
font-size: 11px;
}
}
/* ==================== PC端侧边栏样式（左侧固定） ==================== */
/* 页面整体容器 */
.post-page-wrapper {
display: flex;
gap: 30px;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
/* 移动端调整 - 与archives.html保持一致 */
@media (max-width: 767px) {
.post-page-wrapper {
padding: 0;
width: 100%;
}
}
.post-main {
flex: 1;
min-width: 0;
}
/* 移动端确保post-main占满宽度 */
@media (max-width: 767px) {
.post-main {
width: 100% !important;
max-width: 100% !important;
}
}
/* 左侧边栏基础样式 - 默认隐藏 */
.post-sidebar-left {
display: none;
}
/* PC端显示左侧边栏 */
@media (min-width: 1024px) {
.post-sidebar-left {
display: block;
width: 260px;
flex-shrink: 0;
position: relative;
}
/* 左侧边栏内部容器 - 固定定位 */
.sidebar-left-inner {
position: sticky;
top: 100px; /* 距离视口顶部的距离，根据header高度调整 */
max-height: calc(100vh - 120px);
overflow-y: auto;
}
/* 自定义滚动条样式 */
.sidebar-left-inner::-webkit-scrollbar {
width: 4px;
}
.sidebar-left-inner::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-left-inner::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 2px;
}
@media (hover: hover) and (pointer: fine) {
.sidebar-left-inner::-webkit-scrollbar-thumb:hover {
background: #ccc;
}
}
}
@media (min-width: 1200px) {
.post-sidebar-left {
width: 280px;
}
}
@media (min-width: 1400px) {
.post-sidebar-left {
width: 300px;
}
}
/* 侧边栏区域样式 */
.sidebar-section {
background: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
}
.sidebar-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 2px solid #f5f5f5;
display: flex;
align-items: center;
gap: 8px;
}
.sidebar-title i {
color: #eb5055;
font-size: 18px;
}
.sidebar-list {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-item {
padding: 12px 0;
border-bottom: 1px solid #f5f5f5;
}
.sidebar-item:last-child {
border-bottom: none;
}
.sidebar-link {
display: flex;
align-items: flex-start;
gap: 10px;
text-decoration: none;
color: #333;
transition: color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.sidebar-link:hover {
color: #eb5055;
}
}
@media (hover: hover) and (pointer: fine) {
.sidebar-link:hover .sidebar-text {
color: #eb5055;
}
}
/* 排名样式 */
.sidebar-rank {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
color: #666;
background: #f5f5f5;
flex-shrink: 0;
}
.sidebar-rank.rank-1 {
background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
color: #fff;
}
.sidebar-rank.rank-2 {
background: linear-gradient(135deg, #ffa502, #ff9500);
color: #fff;
}
.sidebar-rank.rank-3 {
background: linear-gradient(135deg, #2ed573, #26d063);
color: #fff;
}
/* 文章标题文本 */
.sidebar-text {
flex: 1;
font-size: 14px;
line-height: 1.5;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition: color 0.3s ease;
}
/* 浏览量样式 */
.sidebar-meta {
display: flex;
align-items: center;
gap: 4px;
margin-top: 6px;
margin-left: 32px;
font-size: 12px;
color: #999;
}
.sidebar-meta i {
font-size: 12px;
color: #ccc;
}
/* 最新文章圆点 */
.sidebar-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #eb5055;
flex-shrink: 0;
margin-top: 8px;
}
/* 最新文章区域样式调整 */
.latest-articles .sidebar-item {
padding: 10px 0;
}
.latest-articles .sidebar-link {
align-items: flex-start;
}
/* 响应式调整 */
@media (max-width: 1023px) {
.post-page-wrapper {
flex-direction: column;
padding: 0 15px;
}
.post-sidebar-left {
display: none !important;
}
}
/* ============================================
AI审核状态提示样式 - 3种动画方案
通过修改 ai-audit-toast 的 class 来切换方案
方案1: style-tech (科技感脉冲)
方案2: style-minimal (简约波浪)
方案3: style-particle (粒子效果)
============================================ */
/* 基础容器样式 */
.ai-audit-toast {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
color: white;
padding: 20px 32px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 16px;
z-index: 10003;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 15px;
font-weight: 500;
min-width: 260px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ai-audit-toast.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* 通用内容区域 */
.ai-audit-toast .toast-content {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex: 1;
}
.ai-audit-toast .toast-title {
font-weight: 600;
font-size: 15px;
letter-spacing: 0.5px;
}
.ai-audit-toast .toast-subtitle {
font-size: 12px;
opacity: 0.85;
}
/* ============================================
方案1: 科技感脉冲动画 (style-tech)
特点: 霓虹光效、脉冲扩散、未来感
============================================ */
.ai-audit-toast.style-tech {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 30px rgba(118, 75, 162, 0.3);
}
.ai-audit-toast.style-tech .ai-icon {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
position: relative;
}
.ai-audit-toast.style-tech .ai-icon::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
animation: tech-pulse-ring 2s ease-out infinite;
}
.ai-audit-toast.style-tech .ai-icon::after {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.15);
animation: tech-pulse-ring 2s ease-out infinite 0.5s;
}
@keyframes tech-pulse-ring {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.ai-audit-toast.style-tech .tech-animation {
display: flex;
align-items: center;
gap: 4px;
}
.ai-audit-toast.style-tech .tech-dot {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: tech-bounce 1.4s ease-in-out infinite both;
}
.ai-audit-toast.style-tech .tech-dot:nth-child(1) {
animation-delay: -0.32s;
}
.ai-audit-toast.style-tech .tech-dot:nth-child(2) {
animation-delay: -0.16s;
}
.ai-audit-toast.style-tech .tech-dot:nth-child(3) {
animation-delay: 0s;
}
@keyframes tech-bounce {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
}
/* ============================================
方案2: 简约波浪动画 (style-minimal)
特点: 极简设计、流畅波浪、优雅轻盈
============================================ */
.ai-audit-toast.style-minimal {
background: rgba(30, 30, 30, 0.9);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.ai-audit-toast.style-minimal .ai-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
animation: minimal-float 3s ease-in-out infinite;
}
@keyframes minimal-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
.ai-audit-toast.style-minimal .minimal-animation {
display: flex;
align-items: center;
gap: 3px;
height: 24px;
}
.ai-audit-toast.style-minimal .wave-bar {
width: 3px;
background: linear-gradient(to top, #667eea, #764ba2);
border-radius: 2px;
animation: minimal-wave 1.2s ease-in-out infinite;
}
.ai-audit-toast.style-minimal .wave-bar:nth-child(1) {
animation-delay: 0s;
height: 6px;
}
.ai-audit-toast.style-minimal .wave-bar:nth-child(2) {
animation-delay: 0.1s;
height: 12px;
}
.ai-audit-toast.style-minimal .wave-bar:nth-child(3) {
animation-delay: 0.2s;
height: 18px;
}
.ai-audit-toast.style-minimal .wave-bar:nth-child(4) {
animation-delay: 0.3s;
height: 12px;
}
.ai-audit-toast.style-minimal .wave-bar:nth-child(5) {
animation-delay: 0.4s;
height: 6px;
}
@keyframes minimal-wave {
0%, 100% {
transform: scaleY(0.4);
opacity: 0.4;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
/* ============================================
方案3: 粒子效果动画 (style-particle)
特点: 动态粒子、旋转光环、炫酷效果
============================================ */
.ai-audit-toast.style-particle {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
box-shadow: 0 10px 40px rgba(15, 52, 96, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 0 60px rgba(102, 126, 234, 0.2);
}
.ai-audit-toast.style-particle .ai-icon {
width: 48px;
height: 48px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.ai-audit-toast.style-particle .particle-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: rgba(102, 126, 234, 0.8);
border-right-color: rgba(118, 75, 162, 0.6);
animation: particle-spin 2s linear infinite;
}
.ai-audit-toast.style-particle .particle-ring:nth-child(2) {
inset: 4px;
border-top-color: rgba(118, 75, 162, 0.8);
border-right-color: rgba(102, 126, 234, 0.6);
animation: particle-spin 1.5s linear infinite reverse;
}
@keyframes particle-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ai-audit-toast.style-particle .particle-dots {
display: flex;
align-items: center;
gap: 6px;
}
.ai-audit-toast.style-particle .particle-dot {
width: 6px;
height: 6px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
animation: particle-pulse 1s ease-in-out infinite;
}
.ai-audit-toast.style-particle .particle-dot:nth-child(1) {
animation-delay: 0s;
}
.ai-audit-toast.style-particle .particle-dot:nth-child(2) {
animation-delay: 0.2s;
}
.ai-audit-toast.style-particle .particle-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes particle-pulse {
0%, 100% {
transform: scale(1);
opacity: 0.5;
box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
}
50% {
transform: scale(1.5);
opacity: 1;
box-shadow: 0 0 15px rgba(102, 126, 234, 0.8), 0 0 25px rgba(118, 75, 162, 0.6);
}
}
/* 性能优化: 使用 will-change 和 transform */
.ai-audit-toast .ai-icon,
.ai-audit-toast .tech-dot,
.ai-audit-toast .wave-bar,
.ai-audit-toast .particle-dot,
.ai-audit-toast .particle-ring {
will-change: transform, opacity;
transform: translateZ(0);
}
/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
.ai-audit-toast .ai-icon,
.ai-audit-toast .tech-dot,
.ai-audit-toast .wave-bar,
.ai-audit-toast .particle-dot,
.ai-audit-toast .particle-ring,
.ai-audit-toast .ai-icon::before,
.ai-audit-toast .ai-icon::after {
animation: none !important;
}
}
/* 移动端适配 */
@media (max-width: 768px) {
.ai-audit-toast {
min-width: 200px;
padding: 16px 24px;
font-size: 14px;
}
.ai-audit-toast .ai-icon {
width: 36px !important;
height: 36px !important;
font-size: 18px !important;
}
}
/* 审核结果弹窗样式 */
.audit-result-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10004;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
}
.audit-result-modal.show {
opacity: 1;
visibility: visible;
}
.audit-result-modal .modal-content {
background: white;
padding: 32px 40px;
border-radius: 20px;
text-align: center;
max-width: 400px;
width: 90%;
transform: scale(0.9);
transition: transform 0.3s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.audit-result-modal.show .modal-content {
transform: scale(1);
}
.audit-result-modal .modal-icon {
font-size: 56px;
margin-bottom: 16px;
}
.audit-result-modal .modal-icon.reject {
color: #ff4d4f;
}
.audit-result-modal .modal-title {
font-size: 22px;
font-weight: 600;
color: #333;
margin-bottom: 12px;
}
.audit-result-modal .modal-message {
font-size: 15px;
color: #666;
line-height: 1.6;
margin-bottom: 24px;
}
.audit-result-modal .modal-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 36px;
border-radius: 25px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.audit-result-modal .modal-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
}
.audit-result-modal.reject-modal .modal-btn {
background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
}
@media (hover: hover) and (pointer: fine) {
.audit-result-modal.reject-modal .modal-btn:hover {
box-shadow: 0 8px 20px rgba(255, 77, 79, 0.4);
}
}
.ai-audit-toast,
.ai-audit-toast.style-tech,
.ai-audit-toast.style-minimal,
.ai-audit-toast.style-particle {
min-width: 240px;
padding: 14px 18px;
color: #151e2f;
border: 1px solid rgba(230, 234, 240, .95);
border-radius: 18px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 18px 48px rgba(23, 32, 51, .12);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.ai-audit-toast .ai-icon,
.ai-audit-toast.style-particle .ai-icon,
.ai-audit-toast.style-minimal .ai-icon,
.ai-audit-toast.style-tech .ai-icon {
display: none !important;
}
.ai-audit-toast .ai-icon::before {
content: 'AI';
position: static;
display: inline;
border: 0;
color: #4968f2;
font-size: 13px;
font-weight: 900;
letter-spacing: 0;
animation: none;
}
.ai-audit-toast .ai-icon::after,
.ai-audit-toast .particle-ring {
display: none !important;
}
.ai-audit-toast .toast-content {
justify-content: center;
gap: 10px;
}
.ai-audit-toast .toast-title {
color: #151e2f;
font-size: 14px;
font-weight: 800;
letter-spacing: 0;
}
.ai-audit-toast .particle-dots,
.ai-audit-toast .tech-animation,
.ai-audit-toast .minimal-animation {
display: inline-flex;
align-items: center;
gap: 5px;
height: 14px;
}
.ai-audit-toast .particle-dot,
.ai-audit-toast .tech-dot,
.ai-audit-toast .wave-bar {
width: 5px !important;
height: 5px !important;
border-radius: 999px;
background: #4968f2 !important;
box-shadow: none !important;
animation: air-audit-dot 1.1s ease-in-out infinite !important;
}
.ai-audit-toast .particle-dot:nth-child(2),
.ai-audit-toast .tech-dot:nth-child(2),
.ai-audit-toast .wave-bar:nth-child(2) {
animation-delay: .16s !important;
}
.ai-audit-toast .particle-dot:nth-child(3),
.ai-audit-toast .tech-dot:nth-child(3),
.ai-audit-toast .wave-bar:nth-child(3) {
animation-delay: .32s !important;
}
@keyframes air-audit-dot {
0%,
100% {
transform: translateY(0);
opacity: .35;
}
45% {
transform: translateY(-4px);
opacity: 1;
}
}
/* ==================== 博主和博主夫人标签样式 ==================== */
.tk-tag {
display: inline-block;
padding: 0 0.5em;
font-size: 1em;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(240, 248, 255, 0.8));
border: 2px solid transparent;
border-radius: 15px;
background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(240, 248, 255, 0.8)),
linear-gradient(135deg, #ffeaa7, #dfe6e9);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.tk-tag-green {
background: linear-gradient(135deg, rgba(103, 194, 58, 0.13), rgba(103, 194, 58, 0.2));
border: 2px solid transparent;
border-radius: 15px;
color: floralwhite;
background-image: linear-gradient(rgba(103, 194, 58, 0.13), rgba(103, 194, 58, 0.2)),
linear-gradient(135deg, #67c23a, #85ce61);
background-origin: border-box;
background-clip: padding-box, border-box;
font-weight: 600;
}
.tk-tag-teal {
background: linear-gradient(135deg, rgba(255, 112, 67, 0.15), rgba(255, 112, 67, 0.25));
border: 2px solid transparent;
border-radius: 15px;
color: #ffffff;
background-image: linear-gradient(rgba(255, 112, 67, 0.15), rgba(255, 112, 67, 0.25)),
linear-gradient(135deg, #FF7043, #FFAB91);
background-origin: border-box;
background-clip: padding-box, border-box;
font-weight: 600;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
@media (hover: hover) and (pointer: fine) {
.tk-tag-teal:hover {
color: #ffffff !important;
}
}
/* ==================== Air Journal 分享与文章助手体验 ==================== */
.share-image-modal,
.ai-chat-widget {
--post-ui-primary: var(--air-primary, #4968f2);
--post-ui-primary-soft: var(--air-primary-soft, #eef2ff);
--post-ui-ink: var(--air-ink, #151e2f);
--post-ui-muted: var(--air-muted, #667085);
--post-ui-soft: var(--air-soft, #98a2b3);
--post-ui-line: var(--air-line, #e6eaf0);
--post-ui-line-soft: var(--air-line-soft, #f0f3f8);
--post-ui-surface: var(--air-surface-solid, #ffffff);
--post-ui-bg: var(--air-bg, #f7f8fb);
--post-ui-radius: 18px;
font-family: var(--blog-font-sans);
}
.share-image-modal {
inset: 0;
width: auto;
height: auto;
padding: 24px;
background: rgba(21, 30, 47, .48);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow-y: auto;
overscroll-behavior: contain;
}
.share-image-content {
width: min(760px, 100%);
max-width: none;
max-height: calc(100dvh - 48px);
padding: 0;
border: 1px solid rgba(230, 234, 240, .9);
border-radius: 24px;
background: var(--post-ui-surface);
box-shadow: 0 28px 80px rgba(23, 32, 51, .18);
text-align: left;
overflow: hidden;
animation: post-modal-enter .24s cubic-bezier(.16, 1, .3, 1);
}
@keyframes post-modal-enter {
from {
opacity: 0;
transform: translateY(18px) scale(.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.share-image-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 22px 24px 18px;
border-bottom: 1px solid var(--post-ui-line-soft);
}
.share-image-heading {
min-width: 0;
}
.share-image-title {
margin: 0;
color: var(--post-ui-ink);
font-size: 20px;
font-weight: 850;
letter-spacing: -.02em;
}
.share-image-description {
margin: 5px 0 0;
color: var(--post-ui-muted);
font-size: 13px;
line-height: 1.55;
}
.share-image-close {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--post-ui-line);
border-radius: 12px;
background: #fff;
color: #596579;
cursor: pointer;
transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
@media (hover: hover) and (pointer: fine) {
.share-image-close:hover {
color: var(--post-ui-primary);
border-color: #cbd5ff;
background: var(--post-ui-primary-soft);
}
}
@media (hover: hover) and (pointer: fine) {
.share-image-close:active,
.share-image-btn:active,
.ai-chat-header-btn:active,
.ai-chat-send-btn:active,
.ai-chat-quick-btn:active,
.ai-chat-toggle:active {
transform: scale(.97);
}
}
.share-image-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 210px;
gap: 24px;
min-height: 0;
padding: 24px;
background: #f8f9fc;
}
.share-image-preview-shell {
position: relative;
min-width: 0;
min-height: 0;
max-height: calc(100dvh - 190px);
display: flex;
justify-content: center;
align-items: flex-start;
padding: 18px;
border: 1px solid var(--post-ui-line);
border-radius: var(--post-ui-radius);
background: #eef1f7;
overflow: auto;
}
#shareImageCanvas {
display: block;
width: min(100%, 375px) !important;
height: auto !important;
margin: 0;
border-radius: 16px;
background: #fff;
box-shadow: 0 16px 42px rgba(23, 32, 51, .12);
}
.share-image-preview-status {
position: absolute;
inset: 18px;
display: none;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 16px;
background: rgba(247, 248, 251, .9);
color: var(--post-ui-muted);
font-size: 13px;
font-weight: 700;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 2;
}
.share-image-preview-shell.is-loading .share-image-preview-status {
display: flex;
}
.share-image-side {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 12px;
min-width: 0;
}
.share-image-side-intro {
min-width: 0;
}
.share-image-side-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 10px;
color: var(--post-ui-primary);
font-size: 11px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.share-image-side-kicker::before {
width: 18px;
height: 3px;
border-radius: 999px;
background: var(--post-ui-primary);
content: '';
}
.share-image-side-intro strong {
display: block;
color: var(--post-ui-ink);
font-size: 18px;
font-weight: 850;
line-height: 1.4;
letter-spacing: -.02em;
}
.share-image-side-intro p {
margin: 8px 0 0;
color: var(--post-ui-muted);
font-size: 12px;
line-height: 1.7;
}
.share-image-tip {
padding: 16px;
border: 1px solid #dfe5f3;
border-radius: 16px;
background: var(--post-ui-primary-soft);
}
.share-image-tip-icon {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
border-radius: 11px;
background: var(--post-ui-primary-soft);
color: var(--post-ui-primary);
font-size: 14px;
}
.share-image-tip strong {
display: block;
margin-bottom: 6px;
color: var(--post-ui-ink);
font-size: 14px;
}
.share-image-tip p {
margin: 0;
color: var(--post-ui-muted);
font-size: 12px;
line-height: 1.65;
}
.share-image-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
justify-content: stretch;
margin: 0;
}
.share-image-btn {
min-height: 44px;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid transparent;
border-radius: 13px;
font-size: 14px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.share-image-btn.primary {
background: var(--post-ui-primary);
color: #fff;
box-shadow: 0 10px 24px rgba(73, 104, 242, .2);
}
@media (hover: hover) and (pointer: fine) {
.share-image-btn.primary:hover:not(:disabled) {
background: #3f5dde;
box-shadow: 0 13px 28px rgba(73, 104, 242, .26);
transform: translateY(-1px);
}
}
.share-image-btn.primary:disabled {
opacity: .58;
cursor: wait;
box-shadow: none;
}
.share-image-btn.secondary {
border-color: var(--post-ui-line);
background: #fff;
color: #4d596d;
}
@media (hover: hover) and (pointer: fine) {
.share-image-btn.secondary:hover {
border-color: #cbd5ff;
background: var(--post-ui-primary-soft);
color: var(--post-ui-primary);
}
}
.share-image-btn.secondary.is-success {
border-color: #c5d0ff;
background: var(--post-ui-primary-soft);
color: var(--post-ui-primary);
}
.share-image-btn.secondary.is-error {
border-color: #ffd1d4;
background: #fff6f6;
color: #c93c43;
}
.share-image-btn.secondary:disabled {
cursor: default;
}
@media (min-width: 768px) {
.share-image-content {
width: min(900px, 100%);
display: flex;
flex-direction: column;
}
.share-image-header {
flex: 0 0 auto;
align-items: center;
padding: 20px 28px 18px;
}
.share-image-body {
flex: 1 1 auto;
grid-template-columns: minmax(0, 536px) minmax(0, 1fr);
gap: 24px;
padding: 24px;
}
.share-image-preview-shell {
height: min(640px, calc(100dvh - 188px));
max-height: none;
align-items: center;
padding: 20px;
overflow: hidden;
}
#shareImageCanvas {
width: auto !important;
height: min(600px, calc(100dvh - 228px)) !important;
max-width: 100%;
box-shadow: none;
}
.share-image-side {
align-self: stretch;
min-height: 0;
padding: 20px;
border: 1px solid var(--post-ui-line);
border-radius: var(--post-ui-radius);
background: var(--post-ui-surface);
overflow-y: auto;
}
.share-image-actions {
margin-top: 8px;
}
.share-image-btn {
min-height: 48px;
}
.share-image-tip {
margin-top: auto;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.share-image-content {
width: min(820px, 100%);
}
.share-image-header {
padding-right: 22px;
padding-left: 22px;
}
.share-image-body {
grid-template-columns: minmax(0, 1fr) 244px;
gap: 18px;
padding: 18px;
}
.share-image-preview-shell,
.share-image-side {
padding: 18px;
}
}
.ai-chat-widget {
right: 24px;
bottom: 28px;
z-index: 9999;
}
/* 与文章助手组成固定的右下角操作列，避免两个入口重叠 */
body.airjournal-article #scroll-to-top-btn {
right: 25px !important;
bottom: 102px !important;
}
body.airjournal-article.ai-chat-open #scroll-to-top-btn {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(8px) scale(.92) !important;
}
.ai-chat-toggle {
width: 58px;
height: 58px;
border: 1px solid rgba(230, 234, 240, .95);
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 36px rgba(23, 32, 51, .14);
}
.ai-chat-toggle-inner {
border-radius: inherit;
background: var(--post-ui-primary-soft);
inset: 7px;
}
.ai-chat-toggle-inner::before {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-toggle:hover {
border-color: #cbd5ff;
transform: translateY(-2px);
box-shadow: 0 20px 42px rgba(23, 32, 51, .17);
}
}
.ai-chat-toggle-icon {
width: 38px;
height: 38px;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-toggle:hover .ai-chat-toggle-icon {
transform: translateY(-1px);
}
}
.ai-chat-badge {
top: -7px;
right: -7px;
width: 22px;
height: 22px;
border: 3px solid #fff;
background: #e5484d;
box-shadow: 0 5px 12px rgba(229, 72, 77, .25);
animation: none;
}
.ai-chat-window {
position: absolute;
right: 0;
bottom: 0;
width: 440px;
height: min(680px, calc(100dvh - 56px));
border: 1px solid rgba(217, 224, 236, .95);
border-radius: 22px;
background: #fff;
box-shadow: 0 28px 80px rgba(23, 32, 51, .18);
transform: translateY(16px) scale(.98);
transform-origin: bottom right;
transition: opacity .22s ease, visibility .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}
.ai-chat-window.active {
transform: translateY(0) scale(1);
}
.ai-chat-resize-handle {
top: 0;
left: 0;
width: 28px;
height: 28px;
border-top-left-radius: 22px;
}
.ai-chat-resize-handle::before {
width: 9px;
height: 9px;
border-top-color: #bcc6d6;
border-left-color: #bcc6d6;
}
.ai-chat-resize-handle.resizing::before {
width: 11px;
height: 11px;
border-top-color: var(--post-ui-primary);
border-left-color: var(--post-ui-primary);
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-resize-handle:hover::before {
width: 11px;
height: 11px;
border-top-color: var(--post-ui-primary);
border-left-color: var(--post-ui-primary);
}
}
.ai-chat-header {
min-height: 72px;
padding: 14px 14px 14px 18px;
border-bottom: 1px solid var(--post-ui-line-soft);
background: #fff;
color: var(--post-ui-ink);
}
.ai-chat-header-info {
gap: 11px;
min-width: 0;
}
.ai-chat-avatar {
width: 42px;
height: 42px;
flex: 0 0 42px;
border: 1px solid #dce3f5;
border-radius: 14px;
background: var(--post-ui-primary-soft);
}
.ai-chat-avatar img {
width: 31px;
height: 31px;
}
.ai-chat-title {
overflow: hidden;
color: var(--post-ui-ink);
font-size: 15px;
font-weight: 850;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-chat-subtitle {
margin-top: 3px;
color: var(--post-ui-muted);
font-size: 12px;
line-height: 1.3;
opacity: 1;
}
.ai-chat-header-actions {
gap: 6px;
}
.ai-chat-header-btn {
width: 36px;
height: 36px;
border: 1px solid transparent;
border-radius: 12px;
background: #f5f7fb;
color: #69758a;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-header-btn:hover {
border-color: var(--post-ui-line);
background: #fff;
color: var(--post-ui-primary);
transform: none;
}
}
.ai-chat-messages {
padding: 20px 18px 22px;
background: #f7f8fb;
scrollbar-color: #cfd6e2 transparent;
scrollbar-width: thin;
}
.ai-chat-messages::-webkit-scrollbar {
width: 5px;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
background: #cfd6e2;
border-radius: 99px;
}
.ai-chat-message {
margin-bottom: 18px;
animation: post-message-enter .22s ease;
}
@keyframes post-message-enter {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ai-chat-message-content {
max-width: 86%;
padding: 11px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.7;
}
.ai-chat-message.ai .ai-chat-message-content {
border: 1px solid #e7ebf2;
border-bottom-left-radius: 5px;
background: #fff;
color: #344054;
box-shadow: 0 8px 24px rgba(23, 32, 51, .045);
}
.ai-chat-message.user .ai-chat-message-content {
border-bottom-right-radius: 5px;
background: var(--post-ui-primary);
color: #fff;
box-shadow: 0 8px 22px rgba(73, 104, 242, .18);
}
.ai-typing-cursor {
color: var(--post-ui-primary);
}
.ai-chat-message-time,
.ai-disclaimer {
color: #8a95a8;
}
.ai-chat-action-btn {
width: auto;
min-width: 64px;
height: 32px;
padding: 0 11px;
gap: 6px;
border: 1px solid #dfe5f1;
border-radius: 10px;
background: #fff;
color: #667389;
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
box-shadow: 0 2px 7px rgba(44, 62, 96, .05);
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-action-btn:hover {
border-color: #cbd5e7;
background: #f8faff;
color: var(--post-ui-primary);
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(73, 104, 242, .10);
}
}
.ai-chat-action-btn::after {
display: block;
}
.ai-chat-action-btn[title="复制内容"]::after {
content: "复制";
}
.ai-chat-action-btn[title="重新生成"] {
border-color: #ccd6ff;
background: var(--post-ui-primary-soft);
color: var(--post-ui-primary);
}
.ai-chat-action-btn[title="重新生成"]::after {
content: "重新生成";
}
.ai-chat-action-btn.copied {
border-color: #b8dfd1;
background: #f0faf6;
color: #16845e;
box-shadow: none;
}
.ai-chat-action-btn.copied[title="复制内容"]::after {
content: "已复制";
}
.ai-chat-pause-btn,
.ai-chat-resume-text-btn {
min-height: 30px;
border-radius: 10px;
box-shadow: none;
}
.ai-chat-resume-text-btn {
background: var(--post-ui-primary);
}
.ai-chat-resume-text-btn::before {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-resume-text-btn:hover {
background: #3f5dde;
box-shadow: none;
transform: translateY(-1px);
}
}
.ai-chat-scroll-bottom {
bottom: 148px;
width: 38px;
height: 38px;
border-color: #dfe4ed;
background: #fff;
color: #68758a;
box-shadow: 0 10px 22px rgba(23, 32, 51, .12);
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-scroll-bottom:hover {
border-color: #cbd5ff;
background: var(--post-ui-primary-soft);
color: var(--post-ui-primary);
box-shadow: 0 12px 26px rgba(23, 32, 51, .14);
}
}
.ai-chat-scroll-bottom i {
animation: none;
}
.ai-chat-loading {
padding: 11px 14px;
border: 1px solid #e7ebf2;
border-radius: 16px;
border-bottom-left-radius: 5px;
box-shadow: 0 8px 24px rgba(23, 32, 51, .045);
}
.ai-chat-loading-dots span {
width: 6px;
height: 6px;
background: var(--post-ui-primary);
}
.ai-chat-welcome {
padding: 0;
color: var(--post-ui-muted);
text-align: left;
}
.ai-chat-welcome-card {
padding: 18px;
border: 1px solid #e3e8f2;
border-radius: 18px;
background: #fff;
box-shadow: 0 12px 32px rgba(23, 32, 51, .045);
}
.ai-chat-welcome-profile {
display: flex;
align-items: flex-start;
gap: 12px;
}
.ai-chat-welcome-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
border: 1px solid #dce3f5;
border-radius: 14px;
background: var(--post-ui-primary-soft);
}
.ai-chat-welcome-icon img {
width: 32px;
height: 32px;
object-fit: contain;
}
.ai-chat-welcome-title {
margin: 1px 0 5px;
color: var(--post-ui-ink);
font-size: 15px;
font-weight: 850;
}
.ai-chat-welcome-text {
color: var(--post-ui-muted);
font-size: 13px;
line-height: 1.65;
}
.ai-chat-welcome-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid var(--post-ui-line-soft);
color: #737f92;
font-size: 12px;
line-height: 1.55;
}
.ai-chat-welcome-note i {
margin-top: 3px;
color: var(--post-ui-primary);
}
.ai-chat-input-area {
padding: 13px 16px 15px;
border-top: 1px solid var(--post-ui-line-soft);
background: #fff;
}
.ai-chat-composer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 9px;
}
.ai-chat-input-label {
color: #48556a;
font-size: 12px;
font-weight: 800;
}
.ai-chat-input-hint {
color: #98a2b3;
font-size: 11px;
}
.ai-chat-quick-questions {
display: flex;
flex-wrap: nowrap;
gap: 7px;
margin: 0 0 10px;
padding: 0 0 2px;
border: 0;
overflow-x: auto;
scrollbar-width: none;
}
.ai-chat-quick-questions::-webkit-scrollbar {
display: none;
}
.ai-chat-quick-btn {
flex: 0 0 auto;
min-height: 32px;
padding: 6px 11px;
border: 1px solid #e1e6ef;
border-radius: 10px;
background: #f7f8fb;
color: #556176;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-quick-btn:hover {
border-color: #cbd5ff;
background: var(--post-ui-primary-soft);
color: var(--post-ui-primary);
}
}
.ai-chat-input-wrapper {
gap: 8px;
padding: 5px 5px 5px 13px;
border: 1px solid #d8deea;
border-radius: 15px;
background: #fff;
transition: border-color .18s ease, box-shadow .18s ease;
}
.ai-chat-input-wrapper:focus-within {
border-color: var(--post-ui-primary);
box-shadow: 0 0 0 3px rgba(73, 104, 242, .11);
}
.ai-chat-input {
min-height: 38px;
max-height: 112px;
padding: 8px 0 6px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--post-ui-ink);
font-size: 14px;
}
.ai-chat-input:focus {
border: 0;
box-shadow: none;
}
.ai-chat-input::placeholder {
color: #8a95a8;
}
.ai-chat-send-btn {
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 12px;
background: var(--post-ui-primary);
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-send-btn:hover:not(:disabled) {
background: #3f5dde;
box-shadow: none;
transform: translateY(-1px);
}
}
.ai-chat-send-btn:disabled {
background: #d8deea;
color: #8994a7;
opacity: 1;
}
.ai-chat-send-btn.paused {
background: #d97706;
animation: none;
}
.ai-chat-error {
border-color: #ffd1d4;
border-radius: 14px;
background: #fff6f6;
}
.ai-chat-message-content.markdown-body a {
color: var(--post-ui-primary);
}
@media (hover: hover) and (pointer: fine) {
.ai-chat-message-content.markdown-body a:hover {
border-bottom-color: var(--post-ui-primary);
}
}
.ai-chat-message-content.markdown-body blockquote {
border-left-color: var(--post-ui-primary);
background: #f5f7ff;
}
.ai-chat-message-content.markdown-body code:not(pre code) {
background: #eef2ff;
color: #3f5dde;
}
@media (max-width: 767px) {
body.ai-chat-open {
overscroll-behavior: none;
}
.ai-chat-window {
overscroll-behavior: contain;
}
.share-image-modal {
align-items: flex-end;
padding: 0;
background: rgba(21, 30, 47, .5);
}
.share-image-content {
width: 100%;
max-width: none;
max-height: min(94dvh, 860px);
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 22px 22px 0 0;
overflow-y: auto;
}
.share-image-header {
position: sticky;
top: 0;
z-index: 4;
padding: 17px 18px 14px;
background: var(--post-ui-surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.share-image-title {
font-size: 18px;
}
.share-image-description {
display: none;
}
.share-image-close {
width: 36px;
height: 36px;
flex-basis: 36px;
}
.share-image-body {
display: block;
padding: 14px;
}
.share-image-preview-shell {
max-height: calc(94dvh - 218px);
padding: 12px;
}
#shareImageCanvas {
width: min(100%, 344px) !important;
}
.share-image-side {
margin-top: 12px;
}
.share-image-side-intro {
display: none;
}
.share-image-tip {
display: none;
}
.share-image-actions {
position: sticky;
bottom: 0;
grid-template-columns: 1fr 1.35fr;
padding: 10px 0 calc(2px + env(safe-area-inset-bottom, 0px));
background: var(--post-ui-bg);
}
.share-image-actions .primary {
grid-column: 2;
grid-row: 1;
}
.share-image-actions .secondary {
grid-column: 1;
grid-row: 1;
}
.ai-chat-widget {
right: 14px;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
body.airjournal-article #scroll-to-top-btn {
right: 19px !important;
bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
}
.ai-chat-toggle {
width: 54px;
height: 54px;
border-radius: 17px;
}
.ai-chat-window {
position: fixed;
inset: 0;
width: 100% !important;
height: 100dvh !important;
border: 0;
border-radius: 0;
transform: translateY(100%);
transform-origin: bottom center;
box-shadow: none;
}
.ai-chat-window.active {
transform: translateY(0);
}
.ai-chat-resize-handle {
display: none;
}
.ai-chat-header {
min-height: 68px;
padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px 14px;
}
.ai-chat-avatar {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.ai-chat-title {
max-width: 52vw;
font-size: 14px;
}
.ai-chat-messages {
padding: 16px 14px 20px;
}
.ai-chat-message-content {
max-width: 90%;
padding: 10px 13px;
font-size: 13px;
}
.ai-chat-input-area {
padding: 11px 12px calc(11px + env(safe-area-inset-bottom, 0px));
}
.ai-chat-input-hint {
display: none;
}
.ai-chat-scroll-bottom {
bottom: calc(142px + env(safe-area-inset-bottom, 0px));
}
}
@media (max-width: 380px) {
.share-image-preview-shell {
max-height: calc(94dvh - 210px);
}
.ai-chat-header-btn {
width: 34px;
height: 34px;
}
.ai-chat-title {
max-width: 46vw;
}
}
@media (prefers-reduced-motion: reduce) {
.share-image-content,
.ai-chat-window,
.ai-chat-message {
animation: none !important;
transition-duration: .01ms !important;
}
}