1103 lines
29 KiB
CSS
1103 lines
29 KiB
CSS
/* ========================================
|
||
Markdown渲染组件样式文件 (MarkdownRenderer.css)
|
||
用途：定义内容区域布局和Markdown元素的渲染样式
|
||
======================================== */
|
||
|
||
/* ========================================
|
||
内容区域主容器
|
||
======================================== */
|
||
|
||
/* 内容区域基础布局 - 使用毛玻璃效果 */
|
||
.content-area {
|
||
flex: 1; /* 占据剩余空间 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* 毛玻璃背景效果 */
|
||
background: rgba(255, 255, 255, 0.06);
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||
color: var(--color-text);
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: 100vh; /* 全屏高度 */
|
||
overflow: hidden; /* 防止内容溢出 */
|
||
}
|
||
|
||
/* 带侧边栏的内容区域 - 添加左边框 */
|
||
.content-area.with-sidebar {
|
||
border-left: 1px solid var(--color-border);
|
||
}
|
||
|
||
/* ========================================
|
||
内容头部区域
|
||
======================================== */
|
||
|
||
/* 内容头部 - 粘性定位的标题栏 */
|
||
.content-header {
|
||
position: sticky; /* 粘性定位 */
|
||
top: 0;
|
||
z-index: 10; /* 确保在内容之上 */
|
||
padding: 1.75rem clamp(2rem, 5vw, 3rem) 1.25rem;
|
||
/* 毛玻璃头部效果 */
|
||
background: rgba(255, 255, 255, 0.12);
|
||
backdrop-filter: blur(16px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
|
||
box-shadow: 0 3px 14px rgba(45, 60, 115, 0.15);
|
||
/* 添加flex布局以支持按钮定位 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 面包屑导航 */
|
||
.breadcrumbs {
|
||
display: flex;
|
||
flex-wrap: wrap; /* 允许换行 */
|
||
gap: 0.45rem; /* 项目间距 */
|
||
font-size: 0.85rem;
|
||
color: var(--color-muted);
|
||
margin-bottom: 0.8rem;
|
||
}
|
||
|
||
/* 面包屑项目 */
|
||
.breadcrumb-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
/* 面包屑分隔符 */
|
||
.breadcrumb-separator {
|
||
color: rgba(31, 42, 68, 0.3);
|
||
}
|
||
|
||
/* 面包屑文本样式 - 胶囊形状 */
|
||
.breadcrumb-text {
|
||
padding: 0.2rem 0.55rem;
|
||
border-radius: 999px; /* 完全圆角 */
|
||
background: rgba(255, 255, 255, 0.18);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
box-shadow: 0 2px 6px rgba(45, 60, 115, 0.12);
|
||
}
|
||
|
||
/* 内容标题 */
|
||
.content-title {
|
||
margin: 0;
|
||
font-size: clamp(2rem, 3.5vw, 2.6rem); /* 响应式字体大小 */
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
flex: 1; /* 占据剩余空间 */
|
||
text-align: center;
|
||
}
|
||
|
||
/* ========================================
|
||
功能按钮样式
|
||
======================================== */
|
||
|
||
/* 功能按钮容器 */
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 功能按钮基础样式 */
|
||
.action-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 42px;
|
||
height: 42px;
|
||
padding: 0;
|
||
/* 毛玻璃按钮效果 */
|
||
background: rgba(255, 255, 255, 0.16);
|
||
backdrop-filter: blur(12px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||
border-radius: 12px;
|
||
color: rgba(31, 42, 68, 0.75);
|
||
font-size: 1.1rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 12px rgba(45, 60, 115, 0.14);
|
||
outline: none;
|
||
}
|
||
|
||
/* 功能按钮悬停效果 */
|
||
.action-button:hover {
|
||
background: rgba(255, 255, 255, 0.22);
|
||
border-color: rgba(125, 167, 242, 0.4);
|
||
color: var(--color-accent);
|
||
box-shadow: 0 6px 16px rgba(45, 60, 115, 0.18);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* 功能按钮激活效果 */
|
||
.action-button:active {
|
||
transform: translateY(0);
|
||
box-shadow: 0 3px 8px rgba(45, 60, 115, 0.16);
|
||
}
|
||
|
||
/* 成功状态样式 */
|
||
.action-button.success {
|
||
background: rgba(34, 197, 94, 0.15);
|
||
border-color: rgba(34, 197, 94, 0.3);
|
||
color: #22c55e;
|
||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
|
||
}
|
||
|
||
/* 错误状态样式 */
|
||
.action-button.error {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
border-color: rgba(239, 68, 68, 0.3);
|
||
color: #ef4444;
|
||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
|
||
}
|
||
|
||
/* ========================================
|
||
内容主体区域
|
||
======================================== */
|
||
|
||
/* 内容主体 - 滚动容器 */
|
||
.content-body {
|
||
flex: 1; /* 占据剩余空间 */
|
||
overflow-y: auto; /* 垂直滚动 */
|
||
overflow-x: hidden; /* 隐藏水平滚动 */
|
||
display: flex;
|
||
justify-content: center; /* 水平居中 */
|
||
padding: clamp(2rem, 6vw, 3.5rem); /* 响应式内边距 */
|
||
height: 0; /* 配合 flex: 1 实现正确的滚动 */
|
||
min-height: 0;
|
||
}
|
||
|
||
/* Markdown 内容面板 */
|
||
.markdown-pane {
|
||
width: min(860px, 100%); /* 最大宽度限制 */
|
||
}
|
||
|
||
/* ========================================
|
||
Markdown 基础样式
|
||
======================================== */
|
||
|
||
/* Markdown 内容容器 */
|
||
.markdown-content {
|
||
line-height: 1.75; /* 良好的行高 */
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 第一个元素去除上边距 */
|
||
.markdown-content > *:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* ========================================
|
||
Markdown 标题样式
|
||
======================================== */
|
||
|
||
/* 所有标题的通用样式 */
|
||
.markdown-content h1,
|
||
.markdown-content h2,
|
||
.markdown-content h3,
|
||
.markdown-content h4,
|
||
.markdown-content h5,
|
||
.markdown-content h6 {
|
||
margin: 2rem 0 1rem; /* 标题间距 */
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
position: relative; /* 为锚点定位做准备 */
|
||
}
|
||
|
||
/* 一级标题 - 带下边框 */
|
||
.markdown-content h1 {
|
||
font-size: clamp(1.8rem, 2.5vw, 2.4rem);
|
||
border-bottom: 2px solid rgba(31, 42, 68, 0.08);
|
||
padding-bottom: 0.6rem;
|
||
}
|
||
|
||
/* 二级标题 - 带下边框 */
|
||
.markdown-content h2 {
|
||
font-size: clamp(1.5rem, 2vw, 1.9rem);
|
||
border-bottom: 1px solid rgba(31, 42, 68, 0.08);
|
||
padding-bottom: 0.45rem;
|
||
}
|
||
|
||
/* 三级标题 */
|
||
.markdown-content h3 {
|
||
font-size: clamp(1.25rem, 1.7vw, 1.5rem);
|
||
}
|
||
|
||
/* 四级标题 */
|
||
.markdown-content h4 {
|
||
font-size: 1.1rem;
|
||
letter-spacing: 0.01em; /* 轻微字母间距 */
|
||
}
|
||
|
||
/* 五级标题 */
|
||
.markdown-content h5 {
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
/* 六级标题 */
|
||
.markdown-content h6 {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 标题锚点 - 悬停时显示 */
|
||
.heading-anchor {
|
||
position: absolute;
|
||
left: -1.5rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 0.9rem;
|
||
color: rgba(31, 42, 68, 0.35);
|
||
opacity: 0; /* 默认隐藏 */
|
||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||
}
|
||
|
||
/* 标题悬停时显示锚点 */
|
||
.markdown-content h1:hover .heading-anchor,
|
||
.markdown-content h2:hover .heading-anchor,
|
||
.markdown-content h3:hover .heading-anchor,
|
||
.markdown-content h4:hover .heading-anchor {
|
||
opacity: 1;
|
||
transform: translate(-4px, -50%); /* 向左移动并显示 */
|
||
}
|
||
|
||
/* ========================================
|
||
Markdown 段落和列表样式
|
||
======================================== */
|
||
|
||
/* 段落、列表、引用、代码块、表格的间距 */
|
||
.markdown-content p,
|
||
.markdown-content ul,
|
||
.markdown-content ol,
|
||
.markdown-content blockquote,
|
||
.markdown-content pre,
|
||
.markdown-content table {
|
||
margin: 0 0 1.35rem;
|
||
}
|
||
|
||
/* 列表缩进 */
|
||
.markdown-content ul,
|
||
.markdown-content ol {
|
||
padding-left: 1.5rem;
|
||
}
|
||
|
||
/* 列表项间距 */
|
||
.markdown-content li + li {
|
||
margin-top: 0.4rem;
|
||
}
|
||
|
||
/* ========================================
|
||
Markdown 链接样式
|
||
======================================== */
|
||
|
||
/* 链接样式 - 带下划线 */
|
||
.markdown-content a {
|
||
color: var(--color-accent);
|
||
text-decoration: underline;
|
||
text-decoration-thickness: 2px; /* 下划线粗细 */
|
||
text-underline-offset: 3px; /* 下划线偏移 */
|
||
}
|
||
|
||
/* ========================================
|
||
Markdown 代码样式
|
||
======================================== */
|
||
|
||
/* 行内代码 - 毛玻璃效果 */
|
||
.inline-code {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.15rem 0.4rem;
|
||
border-radius: 6px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
border: 1px solid rgba(255, 255, 255, 0.26);
|
||
color: var(--color-text);
|
||
font-size: 0.95em;
|
||
box-shadow: 0 2px 6px rgba(45, 60, 115, 0.12);
|
||
}
|
||
|
||
/* ========================================
|
||
代码块样式 - 桌面端
|
||
======================================== */
|
||
|
||
/* 桌面端代码块容器 */
|
||
@media (min-width: 769px) {
|
||
.code-block-wrapper {
|
||
width: clamp(85%, 90%, calc(100vw - 4rem));
|
||
max-width: min(1200px, calc(100vw - 4rem));
|
||
margin: 1.5rem auto;
|
||
background: rgba(246, 248, 255, 0.78);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.26);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 8px 25px rgba(45, 60, 115, 0.18);
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
/* 代码块头部 - 模拟终端窗口 */
|
||
.code-block-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.75rem 1rem 0.75rem 5rem; /* 左侧留空给窗口按钮 */
|
||
background: rgba(125, 167, 242, 0.12);
|
||
color: var(--color-muted);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.08em; /* 字母间距 */
|
||
text-transform: uppercase; /* 大写字母 */
|
||
position: relative;
|
||
}
|
||
|
||
/* 代码块头部装饰 - 占位符 */
|
||
.code-block-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 1rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* 代码块头部 - 模拟 macOS 窗口按钮 */
|
||
.code-block-header::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 1rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: #ff5f57; /* 红色关闭按钮 */
|
||
box-shadow:
|
||
20px 0 0 #ffbd2e, /* 黄色最小化按钮 */
|
||
40px 0 0 #28ca42, /* 绿色最大化按钮 */
|
||
0 0 0 1px rgba(0, 0, 0, 0.1),
|
||
20px 0 0 1px rgba(0, 0, 0, 0.1),
|
||
40px 0 0 1px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 代码块头部的复制按钮 */
|
||
.code-block-header .code-copy-button {
|
||
position: absolute;
|
||
right: 1rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 代码复制按钮样式 */
|
||
.code-copy-button {
|
||
border: 1px solid rgba(255, 255, 255, 0.34);
|
||
background: rgba(255, 255, 255, 0.25);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
color: var(--color-muted);
|
||
border-radius: 8px;
|
||
padding: 0.35rem 0.7rem;
|
||
box-shadow: 0 3px 10px rgba(45, 60, 115, 0.16);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
/* 复制按钮悬停状态 */
|
||
.code-copy-button:hover {
|
||
color: var(--color-accent);
|
||
border-color: rgba(125, 167, 242, 0.5);
|
||
}
|
||
|
||
/* 复制按钮已复制状态 */
|
||
.code-copy-button.copied {
|
||
color: var(--color-accent);
|
||
border-color: rgba(125, 167, 242, 0.65);
|
||
}
|
||
|
||
/* 预格式化文本样式 */
|
||
pre {
|
||
margin: 0;
|
||
padding: 1.1rem 1.35rem;
|
||
width: 100%;
|
||
overflow-x: auto; /* 水平滚动 */
|
||
overflow-y: auto; /* 垂直滚动 */
|
||
font-size: 0.95rem;
|
||
box-sizing: border-box;
|
||
max-width: 100%;
|
||
white-space: pre; /* 保持空白字符 */
|
||
line-height: 1.6;
|
||
/* 隐藏滚动条 - 提供更清洁的外观 */
|
||
scrollbar-width: none; /* Firefox */
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
}
|
||
|
||
/* 隐藏 WebKit 浏览器的滚动条 */
|
||
pre::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 代码块内的代码样式 */
|
||
pre code {
|
||
background: transparent !important;
|
||
color: #1f2a44;
|
||
display: block;
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
white-space: pre;
|
||
line-height: inherit;
|
||
}
|
||
|
||
/* ========================================
|
||
Markdown 图片样式
|
||
======================================== */
|
||
|
||
/* 图片容器 */
|
||
.markdown-image {
|
||
margin: 1.6rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 图片样式 - 毛玻璃边框效果 */
|
||
.markdown-image img {
|
||
border-radius: 14px;
|
||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||
box-shadow: 0 16px 30px rgba(45, 60, 115, 0.18);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
|
||
/* 图片说明文字 */
|
||
.markdown-image figcaption {
|
||
margin-top: 0.55rem;
|
||
font-size: 0.85rem;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
/* ========================================
|
||
Markdown 引用样式
|
||
======================================== */
|
||
|
||
/* 引用块样式 - 左侧彩色边框 */
|
||
.markdown-content blockquote {
|
||
margin: 1.6rem 0;
|
||
padding: 1rem 1.25rem;
|
||
border-left: 4px solid rgba(125, 167, 242, 0.5);
|
||
background: rgba(255, 255, 255, 0.18);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border-radius: 0 14px 14px 0; /* 右侧圆角 */
|
||
color: var(--color-text);
|
||
box-shadow: 0 4px 12px rgba(45, 60, 115, 0.14);
|
||
}
|
||
|
||
/* ========================================
|
||
Markdown 分隔线样式
|
||
======================================== */
|
||
|
||
/* 水平分隔线 */
|
||
.markdown-content hr {
|
||
border: none;
|
||
border-top: 1px dashed rgba(31, 42, 68, 0.12);
|
||
margin: 2.25rem 0;
|
||
}
|
||
|
||
/* ========================================
|
||
Markdown 表格样式
|
||
======================================== */
|
||
|
||
/* 表格容器 - 响应式滚动 */
|
||
.table-wrapper {
|
||
overflow-x: auto;
|
||
border-radius: 14px;
|
||
border: 1px solid rgba(255, 255, 255, 0.26);
|
||
background: rgba(255, 255, 255, 0.12);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
box-shadow: 0 6px 18px rgba(45, 60, 115, 0.16);
|
||
}
|
||
|
||
/* 表格基础样式 */
|
||
.table-wrapper table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
min-width: 520px; /* 最小宽度确保可读性 */
|
||
}
|
||
|
||
/* 表格单元格样式 */
|
||
.table-wrapper th,
|
||
.table-wrapper td {
|
||
padding: 0.85rem 1rem;
|
||
border-bottom: 1px solid rgba(31, 42, 68, 0.1);
|
||
text-align: left;
|
||
}
|
||
|
||
/* 表格头部样式 */
|
||
.table-wrapper th {
|
||
color: var(--color-muted);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 最后一行去除下边框 */
|
||
.table-wrapper tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* ========================================
|
||
外部链接样式
|
||
======================================== */
|
||
|
||
/* 外部链接容器 */
|
||
.external-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
/* 外部链接图标 */
|
||
.external-link-icon {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
/* ========================================
|
||
加载状态样式
|
||
======================================== */
|
||
|
||
/* 加载内容容器 */
|
||
.loading-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.7rem;
|
||
padding: 3rem 0;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
/* 加载动画 - 旋转圆圈 */
|
||
.loading-spinner {
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 2px solid rgba(111, 123, 146, 0.25);
|
||
border-top: 2px solid var(--color-accent);
|
||
border-radius: 50%;
|
||
animation: spin 0.9s linear infinite; /* 无限旋转动画 */
|
||
}
|
||
|
||
/* 旋转动画关键帧 */
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/* ========================================
|
||
欢迎页面样式
|
||
======================================== */
|
||
|
||
/* 欢迎消息容器 */
|
||
.welcome-message {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: clamp(2rem, 6vw, 4rem);
|
||
min-height: calc(100vh - 7rem);
|
||
}
|
||
|
||
/* 欢迎内容卡片 */
|
||
.welcome-content {
|
||
text-align: center;
|
||
max-width: 520px;
|
||
padding: 2.4rem;
|
||
border-radius: 18px;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||
box-shadow: 0 20px 36px rgba(45, 60, 115, 0.2);
|
||
}
|
||
|
||
/* 欢迎页标题 */
|
||
.welcome-content h1 {
|
||
margin-bottom: 0.9rem;
|
||
font-size: clamp(2.1rem, 3.2vw, 2.6rem);
|
||
}
|
||
|
||
/* 欢迎页描述文字 */
|
||
.welcome-content p {
|
||
margin: 0 auto 1.6rem;
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
/* 功能特性网格 */
|
||
.welcome-features {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 0.8rem;
|
||
}
|
||
|
||
/* 功能特性项目 */
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.6rem;
|
||
padding: 0.85rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, 0.16);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
color: rgba(31, 42, 68, 0.75);
|
||
box-shadow: 0 4px 10px rgba(45, 60, 115, 0.16);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 功能特性项目悬停效果 */
|
||
.feature-item:hover {
|
||
transform: translateY(-2px); /* 向上浮动 */
|
||
box-shadow: 0 7px 16px rgba(45, 60, 115, 0.22);
|
||
background: rgba(255, 255, 255, 0.22);
|
||
}
|
||
|
||
/* 功能特性图标 */
|
||
.feature-icon {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* ========================================
|
||
字数统计样式
|
||
======================================== */
|
||
|
||
/* 字数统计容器 */
|
||
.word-count-container {
|
||
margin-top: 3rem;
|
||
padding-top: 2rem;
|
||
border-top: 1px dashed rgba(31, 42, 68, 0.12);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 字数统计信息 */
|
||
.word-count-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.75rem 1.25rem;
|
||
/* 毛玻璃效果 */
|
||
background: rgba(255, 255, 255, 0.12);
|
||
backdrop-filter: blur(16px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||
border-radius: 12px;
|
||
color: var(--color-muted);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
box-shadow: 0 4px 12px rgba(45, 60, 115, 0.14);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 字数统计图标 */
|
||
.word-count-icon {
|
||
font-size: 1rem;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 字数统计文本 */
|
||
.word-count-text {
|
||
color: rgba(31, 42, 68, 0.75);
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* 悬停效果 */
|
||
.word-count-info:hover {
|
||
background: rgba(255, 255, 255, 0.18);
|
||
border-color: rgba(125, 167, 242, 0.3);
|
||
box-shadow: 0 6px 16px rgba(45, 60, 115, 0.18);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* ========================================
|
||
响应式设计 - 移动端适配
|
||
======================================== */
|
||
|
||
/* 手机屏幕适配 (768px 以下) */
|
||
@media (max-width: 768px) {
|
||
/* 移动端内容区域优化 */
|
||
.content-area {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* 移动端内容头部优化 */
|
||
.content-header {
|
||
padding: clamp(0.5rem, 1.5vw, 0.75rem);
|
||
border-radius: 6px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* 移动端 Markdown 面板优化 */
|
||
.markdown-pane {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* 移动端隐藏标题锚点 */
|
||
.heading-anchor {
|
||
display: none;
|
||
}
|
||
|
||
/* 移动端面包屑导航优化 - 增大1.3倍 */
|
||
.breadcrumbs {
|
||
font-size: 1.105rem; /* 原来是 0.85rem */
|
||
gap: 0.585rem; /* 原来是 0.45rem */
|
||
margin-bottom: 1.04rem; /* 原来是 0.8rem */
|
||
}
|
||
|
||
/* 移动端面包屑项目间距增大 */
|
||
.breadcrumb-item {
|
||
gap: 0.52rem; /* 原来是 0.4rem */
|
||
}
|
||
|
||
/* 移动端面包屑文本样式增大 */
|
||
.breadcrumb-text {
|
||
padding: 0.26rem 0.715rem; /* 原来是 0.2rem 0.55rem */
|
||
}
|
||
|
||
/* 移动端内容标题优化 - 增大1.3倍 */
|
||
.content-title {
|
||
font-size: clamp(1.463rem, 4.55vw, 1.788rem); /* 原来是 clamp(1.125rem, 3.5vw, 1.375rem) */
|
||
line-height: 1.2;
|
||
margin-bottom: 0.488rem; /* 原来是 0.375rem */
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* 移动端内容主体优化 */
|
||
.content-body {
|
||
padding: clamp(0.5rem, 1.5vw, 0.75rem) 0;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* 移动端 Markdown 内容优化 - 增大1.3倍 */
|
||
.markdown-content {
|
||
font-size: clamp(1.04rem, 2.86vw, 1.17rem); /* 原来是 clamp(0.8rem, 2.2vw, 0.9rem) */
|
||
line-height: 1.5;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* 移动端标题尺寸调整 - 增大1.3倍 */
|
||
.markdown-content h1 {
|
||
font-size: clamp(1.788rem, 5.85vw, 2.275rem); /* 原来是 clamp(1.375rem, 4.5vw, 1.75rem) */
|
||
line-height: 1.1;
|
||
margin: 1.625rem 0 1.138rem 0; /* 原来是 1.25rem 0 0.875rem 0 */
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.markdown-content h2 {
|
||
font-size: clamp(1.463rem, 4.55vw, 1.95rem); /* 原来是 clamp(1.125rem, 3.5vw, 1.5rem) */
|
||
line-height: 1.2;
|
||
margin: 1.3rem 0 0.813rem 0; /* 原来是 1rem 0 0.625rem 0 */
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.markdown-content h3 {
|
||
font-size: clamp(1.3rem, 3.9vw, 1.625rem); /* 原来是 clamp(1rem, 3vw, 1.25rem) */
|
||
line-height: 1.2;
|
||
margin: 1.138rem 0 0.65rem 0; /* 原来是 0.875rem 0 0.5rem 0 */
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.markdown-content h4 {
|
||
font-size: clamp(1.235rem, 3.64vw, 1.463rem); /* 原来是 clamp(0.95rem, 2.8vw, 1.125rem) */
|
||
line-height: 1.3;
|
||
margin: 0.975rem 0 0.488rem 0; /* 原来是 0.75rem 0 0.375rem 0 */
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.markdown-content h5 {
|
||
font-size: clamp(1.17rem, 3.25vw, 1.3rem); /* 原来是 clamp(0.9rem, 2.5vw, 1rem) */
|
||
line-height: 1.3;
|
||
margin: 0.813rem 0 0.488rem 0; /* 原来是 0.625rem 0 0.375rem 0 */
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.markdown-content h6 {
|
||
font-size: clamp(1.105rem, 2.86vw, 1.235rem); /* 原来是 clamp(0.85rem, 2.2vw, 0.95rem) */
|
||
line-height: 1.3;
|
||
margin: 0.65rem 0 0.325rem 0; /* 原来是 0.5rem 0 0.25rem 0 */
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* 移动端段落优化 - 增大1.3倍 */
|
||
.markdown-content p {
|
||
margin: 0.813rem 0; /* 原来是 0.625rem 0 */
|
||
line-height: 1.5;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* 移动端列表项优化 - 增大1.3倍 */
|
||
.markdown-content li {
|
||
margin: 0.325rem 0; /* 原来是 0.25rem 0 */
|
||
line-height: 1.4;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* 移动端引用块优化 - 增大1.3倍 */
|
||
.markdown-content blockquote {
|
||
margin: 1.138rem 0; /* 原来是 0.875rem 0 */
|
||
padding: 0.813rem 1.138rem; /* 原来是 0.625rem 0.875rem */
|
||
font-size: clamp(1.04rem, 2.86vw, 1.17rem); /* 原来是 clamp(0.8rem, 2.2vw, 0.9rem) */
|
||
line-height: 1.5;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* 移动端代码块容器优化 - 增大1.3倍 */
|
||
.code-block-wrapper {
|
||
width: calc(100vw - 2rem);
|
||
max-width: calc(100vw - 2rem);
|
||
margin: 1.138rem 0 1.138rem 0; /* 原来是 0.875rem 0 0.875rem 0 */
|
||
background: rgba(246, 248, 255, 0.78);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.26);
|
||
border-radius: 7.8px; /* 原来是 6px */
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 8px 25px rgba(45, 60, 115, 0.18);
|
||
position: relative;
|
||
}
|
||
|
||
/* 移动端代码块头部优化 - 增大1.3倍 */
|
||
.code-block-header {
|
||
padding: 0.488rem 0.65rem; /* 原来是 0.375rem 0.5rem */
|
||
font-size: 0.91rem; /* 原来是 0.7rem */
|
||
}
|
||
|
||
/* 移动端代码块控制按钮优化 - 增大1.3倍 */
|
||
.code-block-controls button {
|
||
padding: 0.26rem 0.52rem; /* 原来是 0.2rem 0.4rem */
|
||
font-size: 0.845rem; /* 原来是 0.65rem */
|
||
}
|
||
|
||
/* 移动端复制按钮优化 - 增大1.3倍 */
|
||
.copy-button {
|
||
width: 31.2px; /* 原来是 24px */
|
||
height: 31.2px; /* 原来是 24px */
|
||
font-size: 13px; /* 原来是 10px */
|
||
top: 0.488rem; /* 原来是 0.375rem */
|
||
right: 0.488rem; /* 原来是 0.375rem */
|
||
}
|
||
|
||
/* 移动端预格式化文本优化 - 增大1.3倍 */
|
||
.markdown-content pre {
|
||
overflow-x: auto;
|
||
overflow-y: auto;
|
||
white-space: pre;
|
||
line-height: 1.4;
|
||
padding: 0.78rem 1.04rem; /* 原来是 0.6rem 0.8rem */
|
||
font-size: 0.975rem; /* 原来是 0.75rem */
|
||
/* 隐藏移动端滚动条 */
|
||
scrollbar-width: none; /* Firefox */
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
}
|
||
|
||
/* 移动端行内代码优化 - 增大1.3倍 */
|
||
.inline-code {
|
||
padding: 0.195rem 0.52rem; /* 原来是 0.15rem 0.4rem */
|
||
border-radius: 7.8px; /* 原来是 6px */
|
||
font-size: 1.235em; /* 原来是 0.95em */
|
||
}
|
||
|
||
/* 移动端表格横向滚动优化 */
|
||
.table-wrapper {
|
||
/* 确保表格容器可以横向滚动 */
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
/* 添加滚动提示 */
|
||
position: relative;
|
||
/* 优化滚动体验 */
|
||
-webkit-overflow-scrolling: touch;
|
||
/* 调整边距以适应移动端 */
|
||
margin: 1.3rem 0; /* 增大1.3倍 */
|
||
border-radius: 10.4px; /* 增大1.3倍，原来是 8px */
|
||
}
|
||
|
||
.table-wrapper::after {
|
||
content: "← 滑动查看更多 →";
|
||
position: absolute;
|
||
bottom: -1.5rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 0.75rem;
|
||
color: var(--color-muted);
|
||
opacity: 0.7;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.table-wrapper table {
|
||
/* 确保表格有足够的最小宽度 */
|
||
min-width: 600px; /* 移动端增加最小宽度 */
|
||
}
|
||
|
||
/* 移动端表格滚动条样式优化 */
|
||
.table-wrapper::-webkit-scrollbar {
|
||
height: 6px; /* 滚动条高度 */
|
||
}
|
||
|
||
.table-wrapper::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.table-wrapper::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 3px;
|
||
transition: background 0.3s ease;
|
||
}
|
||
|
||
.table-wrapper::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
/* Firefox 滚动条样式 */
|
||
.table-wrapper {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* 隐藏移动端 WebKit 浏览器的滚动条 */
|
||
.markdown-content pre::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 移动端图片优化 - 增大1.3倍 */
|
||
.markdown-content img {
|
||
margin: 1.138rem auto; /* 原来是 0.875rem auto */
|
||
border-radius: 7.8px; /* 原来是 6px */
|
||
max-width: calc(100vw - 1rem);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 移动端表格优化 - 增大1.3倍 */
|
||
.markdown-content table {
|
||
font-size: 1.04rem; /* 原来是 0.8rem */
|
||
width: 100%;
|
||
max-width: calc(100vw - 1rem);
|
||
overflow-x: auto;
|
||
display: block;
|
||
}
|
||
|
||
/* 移动端表格单元格优化 - 增大1.3倍 */
|
||
.markdown-content th,
|
||
.markdown-content td {
|
||
padding: 0.488rem 0.65rem; /* 原来是 0.375rem 0.5rem */
|
||
min-width: 104px; /* 原来是 80px */
|
||
}
|
||
|
||
/* 移动端内容头部布局优化 */
|
||
.content-header {
|
||
flex-direction: row;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 移动端标题样式调整 */
|
||
.content-header .content-title {
|
||
flex: 1;
|
||
text-align: left;
|
||
font-size: 1.5rem;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 移动端功能按钮适配 */
|
||
.action-buttons {
|
||
gap: 0.6rem;
|
||
}
|
||
|
||
.action-button {
|
||
width: 38px;
|
||
height: 38px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* 移动端功能特性项目优化 */
|
||
.feature-item {
|
||
flex-direction: column; /* 垂直排列 */
|
||
}
|
||
|
||
/* 移动端字数统计适配 */
|
||
.word-count-container {
|
||
margin-top: 2rem;
|
||
padding-top: 1.5rem;
|
||
}
|
||
|
||
.word-count-info {
|
||
padding: 0.6rem 1rem;
|
||
font-size: 0.8rem;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.word-count-icon {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
/* ========================================
|
||
桌面端样式优化 - 缩小标题和导航栏
|
||
======================================== */
|
||
|
||
/* 桌面端媒体查询 - 屏幕宽度大于768px */
|
||
@media (min-width: 769px) {
|
||
/* 桌面端内容标题缩小0.5倍 */
|
||
.content-title {
|
||
font-size: clamp(1rem, 1.75vw, 1.3rem); /* 原来是 clamp(2rem, 3.5vw, 2.6rem) */
|
||
}
|
||
|
||
/* 桌面端面包屑导航缩小0.5倍 */
|
||
.breadcrumbs {
|
||
font-size: 0.425rem; /* 原来是 0.85rem */
|
||
gap: 0.225rem; /* 原来是 0.45rem */
|
||
margin-bottom: 0.4rem; /* 原来是 0.8rem */
|
||
}
|
||
|
||
/* 桌面端面包屑项目间距缩小 */
|
||
.breadcrumb-item {
|
||
gap: 0.2rem; /* 原来是 0.4rem */
|
||
}
|
||
|
||
/* 桌面端面包屑文本样式缩小 */
|
||
.breadcrumb-text {
|
||
padding: 0.1rem 0.275rem; /* 原来是 0.2rem 0.55rem */
|
||
}
|
||
}
|
||
|