/* -------- 移动端导航修复 ------ */
.z-60 {
z-index: 60;
}
/* -------- 中国山水画纹路样式 ------ */
.chinese-landscape-pattern {
position: relative;
background: linear-gradient(135deg, #f8f6f0 0%, #f5f1e8 50%, #f0ece4 100%);
overflow: hidden;
}
.chinese-landscape-pattern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-position: center;
opacity: 0.7;
z-index: 1;
}
.chinese-landscape-pattern::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at top right, transparent 0%, rgba(139,69,19,0.02) 50%, transparent 100%),
radial-gradient(ellipse at bottom left, transparent 0%, rgba(160,82,45,0.015) 50%, transparent 100%);
z-index: 2;
}
/* header区域中式装饰边框 */
.chinese-header-border {
position: relative;
border: 1px solid rgba(139,69,19,0.1);
border-top: 2px solid rgba(184,134,11,0.2);
border-bottom: 2px solid rgba(139,69,19,0.15);
}
.chinese-header-border::before {
content: '';
position: absolute;
top: -1px;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(184,134,11,0.3) 20%, rgba(184,134,11,0.3) 80%, transparent 100%);
}
.chinese-header-border::after {
content: '';
position: absolute;
bottom: -1px;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(139,69,19,0.25) 30%, rgba(139,69,19,0.25) 70%, transparent 100%);
}
/* 传统纹样装饰 */
.chinese-pattern-decoration {
position: relative;
}
.chinese-pattern-decoration::before {
content: '';
position: absolute;
top: 50%;
left: -20px;
width: 40px;
height: 40px;
background: url('data:image/svg+xml;utf8,');
transform: translateY(-50%);
opacity: 0.6;
}
.chinese-pattern-decoration::after {
content: '';
position: absolute;
top: 50%;
right: -20px;
width: 40px;
height: 40px;
background: url('data:image/svg+xml;utf8,');
transform: translateY(-50%);
opacity: 0.6;
}
/* 响应式调整 */
@media (max-width: 768px) {
.chinese-pattern-decoration::before,
.chinese-pattern-decoration::after {
display: none;
}
.chinese-landscape-pattern::before {
background-size: 200% auto;
}
}
/* -------- calendar ------ */
.calendartop,
.calendar {
width: 100%;
text-align: center;
}
.calendartop {
line-height: 1.6;
}
.calendar {
line-height: 2;
}
.calendartop tbody tr:first-child td a {
padding: .25em .65em;
}
.calendar tbody tr:first-child td {
background-color: var(--color-text-1-light);
}
.calendar tbody tr:first-child td:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.calendar tbody tr:first-child td:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.calendar .day,
.calendar td a {
position: relative;
color: var(--color-theme-light);
}
.calendar td a {
text-decoration: underline;
}
.calendar .day::after,
.calendar td a:hover::after {
content: '';
display: block;
width: 24px;
height: 24px;
position: absolute;
left: calc(50% - 12px);
top: calc(50% - 12px);
border: 1px solid var(--color-theme-light);
border-radius: 100%;
}
/* Captcha styles */
.captcha-container {
display: flex;
align-items: center;
gap: 1rem;
}
.captcha {
width: 6rem;
height: 2.4rem;
border-radius: 0.375rem;
border: 1px solid #d1d5db;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.captcha_input {
width: 8rem;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
font-size: 0.875rem;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.captcha_input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
/* 评论样式优化 */
.comment-item {
transition: all 0.3s ease;
}
.comment-item:hover {
transform: translateY(-2px);
}
/* 相邻文章导航样式 */
.neighbor-header h4 {
color: #1e293b;
letter-spacing: 0.1em;
border-color: rgba(120, 53, 15, 0.1);
}
.neighbor-link {
text-decoration: none;
display: block;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
transition: all 0.3s ease;
position: relative;
}
.neighbor-link:hover {
background-color: rgba(120, 53, 15, 0.05);
transform: translateY(-1px);
}
.neighbor-label {
font-size: 0.75rem;
color: #64748b;
letter-spacing: 0.05em;
}
/* 防止文章item hover闪烁 */
article.group {
will-change: transform;
backface-visibility: hidden;
}
article.group h2 a {
display: inline-block;
transform: translateZ(0);
backface-visibility: hidden;
}
/* 优化边框过渡 */
article.group {
border: 2px solid rgba(120, 53, 15, 0.15);
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
article.group:hover {
border-color: rgba(120, 53, 15, 0.3);
}
.neighbor-title {
font-size: 0.875rem;
line-height: 1.25rem;
color: #1e293b;
font-weight: 500;
letter-spacing: 0.025em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.neighbor-link:hover .neighbor-title {
color: #7f1d1d;
}
.neighbor-divider {
background-color: rgba(120, 53, 15, 0.1);
}
/* 箭头图标样式 */
.neighbor-arrow {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
position: relative;
flex-shrink: 0;
}
.neighbor-arrow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0.5rem;
height: 0.5rem;
border-style: solid;
border-width: 0 0.125rem 0.125rem 0;
transform-origin: center;
}
.neighbor-arrow-prev::before {
border-color: #64748b;
transform: translate(-25%, -50%) rotate(135deg);
}
.neighbor-arrow-next::before {
border-color: #64748b;
transform: translate(-75%, -50%) rotate(-45deg);
}
.neighbor-link:hover .neighbor-arrow-prev::before,
.neighbor-link:hover .neighbor-arrow-next::before {
border-color: #7f1d1d;
}
/* 禁用状态的样式 */
.neighbor-item.opacity-50 .neighbor-arrow-prev::before,
.neighbor-item.opacity-50 .neighbor-arrow-next::before {
border-color: #cbd5e1;
}
/* 搜索按钮样式修复 */
form.flex {
display: flex;
align-items: stretch;
}
form.flex input[type="search"] {
flex: 1;
min-width: 0;
}
form.flex button[type="submit"] {
flex-shrink: 0;
white-space: nowrap;
}
/* 移动端搜索样式优化 */
@media (max-width: 640px) {
form.flex {
flex-direction: row;
}
form.flex input[type="search"] {
font-size: 16px; /* 防止iOS缩放 */
}
}
/* 文章标题悬停下划线效果 */
article h2 a {
text-decoration: none;
position: relative;
transition: all 0.3s ease;
}
article h2 a:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.comment-children {
transition: all 0.3s ease;
}
.comment-children:hover {
background-color: rgba(255, 255, 255, 0.7);
}
/* 评论表单样式增强 */
.commentform input:focus,
.commentform textarea:focus {
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
/* 按钮悬停效果 */
#comment_submit:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* 字符计数器样式 */
#comment-count {
font-family: monospace;
font-weight: 500;
}
/* 回复按钮动画 */
.comment-actions button {
transition: all 0.2s ease;
}
.comment-actions button:hover {
transform: translateX(2px);
}
/* 评论区域整体样式 */
#comments {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* -------- 分页样式优化 ------ */
.pagination {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.pagination a,
.pagination span {
display: inline-block;
padding: 8px 16px;
margin: 0 2px;
text-decoration: none;
color: #dc2626;
background-color: #fef2f2;
border: 1px solid #fecaca;
transition: all 0.3s ease;
font-weight: 500;
font-size: 14px;
line-height: 1.5;
min-width: 40px;
text-align: center;
opacity: 0.7;
}
.pagination a:hover {
background-color: #fee2e2;
color: #991b1b;
border-color: #fca5a5;
opacity: 1;
transform: translateY(-1px);
}
.pagination span {
background-color: #fef2f2;
color: #dc2626;
border-color: #fecaca;
cursor: default;
opacity: 0.7;
}
.pagination a:active {
transform: translateY(0);
background-color: #fee2e2;
}
/* 当前页码高亮 */
.pagination span[style*="font-weight: bold"],
.pagination span[style*="font-weight:bold"],
.pagination .current {
background-color: #dc2626;
color: #ffffff;
border-color: #dc2626;
font-weight: 600;
opacity: 1;
}
/* 上一页下一页按钮 */
.pagination .prev,
.pagination .next {
font-weight: 500;
padding: 8px 12px;
}
/* 移动端适配 */
@media (max-width: 640px) {
.pagination a,
.pagination span {
padding: 6px 10px;
font-size: 13px;
margin: 0 1px;
min-width: 32px;
}
.pagination {
flex-wrap: wrap;
gap: 4px;
}
}
.icon-eye {
display: inline-block;
width: 1.2em;
height: 1.2em;
background: no-repeat center/contain;
background-image: url('data:image/svg+xml;utf8,');
}
.icon-comment {
display: inline-block;
width: 1.2em;
height: 1.2em;
background: no-repeat center/contain;
background-image: url('data:image/svg+xml;utf8,');
}
.icon-like {
display: inline-block;
width: 1.2em;
height: 1.2em;
background: no-repeat center/contain;
background-image: url('data:image/svg+xml;utf8,');
}