@charset "UTF-8"; /* 首页样式 */ .hero-section { position: relative; overflow: hidden; } .hero-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("/images/hero-bg.svg") no-repeat center center; background-size: cover; opacity: 0.1; z-index: 0; } .hero-content { position: relative; z-index: 1; } .feature-card { transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-5px); } .feature-card .material-symbols-light--article, .feature-card .material-symbols-light--bookmark, .feature-card .material-symbols-light--person { transition: all 0.3s ease; } .feature-card:hover .material-symbols-light--article, .feature-card:hover .material-symbols-light--bookmark, .feature-card:hover .material-symbols-light--person { transform: scale(1.1); } .stats-section { position: relative; } .stats-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("/images/stats-bg.svg") no-repeat center center; background-size: cover; opacity: 0.05; z-index: 0; } .stat-item { transition: all 0.3s ease; } .stat-item:hover { transform: scale(1.05); } .user-dashboard { position: relative; } .user-dashboard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("/images/dashboard-bg.svg") no-repeat center center; background-size: cover; opacity: 0.03; z-index: 0; } .avatar { transition: all 0.3s ease; } .avatar:hover { transform: scale(1.05); } /* 响应式设计 */ @media (max-width: 768px) { .hero-section { padding: 4rem 0; } .hero-content h1 { font-size: 2.5rem; } .features-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .user-info { text-align: center; margin-bottom: 1.5rem; } .user-actions { justify-content: center; } } @media (max-width: 480px) { .hero-content h1 { font-size: 2rem; } .hero-content p { font-size: 1rem; } .stats-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; gap: 1rem; } .hero-actions a { width: 100%; text-align: center; } } /* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */ @media (prefers-color-scheme: dark) { .markdown-body { /* 告诉浏览器使用深色配色方案,影响滚动条等系统UI元素 */ color-scheme: dark; } } /* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */ @media (prefers-color-scheme: light) { .markdown-body { /* 告诉浏览器使用浅色配色方案,影响滚动条等系统UI元素 */ color-scheme: light; /* 定义CSS自定义属性,用于主题色彩管理 */ --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: hsla(210, 18%, 87%, 1); --color-neutral-muted: rgba(175, 184, 193, 0.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-attention-subtle: #fff8c5; --color-danger-fg: #cf222e; --color-mark-default: rgb(255, 255, 0); --color-mark-fg: rgb(255, 187, 0); } } /* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */ .markdown-body { /* 防止iOS Safari自动调整文本大小 */ -webkit-text-size-adjust: 100%; /* 防止IE自动调整文本大小 */ -ms-text-size-adjust: 100%; /* 优化文本渲染质量,提升可读性 */ text-rendering: optimizelegibility; /* 重置外边距为0 */ margin: 0; /* 允许长单词在必要时换行,防止溢出 */ word-wrap: break-word; /* 使用CSS变量设置文本颜色 */ color: var(--color-fg-muted); /* 伪元素before - 用于清除浮动 */ } .markdown-body::before { /* 设置为表格显示模式,用于清除浮动 */ display: table; /* 空内容,仅用于布局 */ content: ""; } .markdown-body { /* 伪元素after - 用于清除浮动 */ } .markdown-body::after { /* 设置为表格显示模式,用于清除浮动 */ display: table; /* 清除左右浮动 */ clear: both; /* 空内容,仅用于布局 */ content: ""; } .markdown-body { /* 第一个子元素 - 移除顶部外边距 */ } .markdown-body > *:first-child { /* 强制移除顶部外边距,避免不必要的空白 */ margin-top: 0 !important; } .markdown-body { /* 最后一个子元素 - 移除底部外边距 */ } .markdown-body > *:last-child { /* 强制移除底部外边距,避免不必要的空白 */ margin-bottom: 0 !important; } .markdown-body { /* 块级元素统一间距设置 - 段落、引用、列表、表格等 */ } .markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body hr, .markdown-body form, .markdown-body pre, .markdown-body details { /* 移除顶部外边距,避免重复间距 */ margin-top: 0; /* 设置底部外边距为1em,保持适当间距 */ margin-bottom: 1em; } .markdown-body { /* 引用块内部元素间距处理 */ } .markdown-body blockquote { /* 引用块内第一个子元素 - 移除顶部外边距 */ } .markdown-body blockquote > :first-child { margin-top: 0; } .markdown-body blockquote { /* 引用块内最后一个子元素 - 移除底部外边距 */ } .markdown-body blockquote > :last-child { margin-bottom: 0; } .markdown-body { /* 统一显示成块状元素 - 确保这些元素独占一行 */ } .markdown-body details, .markdown-body figcaption, .markdown-body figure { /* 设置为块级元素,独占一行显示 */ display: block; } .markdown-body { /* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */ } .markdown-body audio, .markdown-body canvas, .markdown-body video { /* 设置为内联块级元素,可以设置宽高但不会独占一行 */ display: inline-block; } .markdown-body { /* 按钮内部间距统一 - 移除Firefox默认内边距 */ } .markdown-body button::-moz-focus-inner, .markdown-body input::-moz-focus-inner { /* 移除Firefox浏览器按钮和输入框的内部内边距 */ padding: 0; /* 移除Firefox浏览器按钮和输入框的内部边框 */ border: 0; } .markdown-body { /* 定义元素显示为斜体 - 术语定义样式 */ } .markdown-body dfn { /* 设置字体为斜体,用于术语定义 */ font-style: italic; } .markdown-body { /* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */ } .markdown-body table { /* 合并表格边框,相邻单元格边框合并为一条 */ border-collapse: collapse; /* 设置表格单元格间距为0 */ border-spacing: 0; /* 设置为块级元素,可以设置宽高 */ display: block; /* 宽度根据内容自适应 */ width: max-content; /* 最大宽度不超过父容器 */ max-width: 100%; /* 内容溢出时显示滚动条 */ overflow: auto; } .markdown-body { /* 可拖动文件添加拖动手势 - 拖拽元素样式 */ } .markdown-body [draggable] { /* 设置鼠标悬停时显示移动光标 */ cursor: move; } .markdown-body { /* 加粗元素 - 粗体文本样式 */ } .markdown-body b, .markdown-body strong { /* 设置字体粗细,使用CSS变量或默认600 */ font-weight: var(--base-text-weight-semibold, 600); } .markdown-body { /* 缩写元素样式统一 - 缩写和首字母缩写样式 */ } .markdown-body abbr, .markdown-body acronym { /* 移除底部边框 */ border-bottom: none; /* 设置字体变体为正常 */ font-variant: normal; /* 设置虚线下划线装饰 */ text-decoration: underline dotted; } .markdown-body { /* 添加鼠标问号,进一步确保应用的语义是正确的(要知道,交互他们也有洁癖,如果你不去掉,那得多花点口舌) */ } .markdown-body abbr { /* 设置鼠标悬停时显示帮助光标 */ cursor: help; } .markdown-body { /* 一致的 del 样式 - 删除线文本样式 */ } .markdown-body del { /* 设置文本装饰为删除线 */ text-decoration: line-through; } .markdown-body { /* a标签去除下划线 - 链接样式处理 */ } .markdown-body a { /* 默认移除下划线,保持页面简洁 */ text-decoration: none; /* 没有href属性的链接样式 */ } .markdown-body a:not([href]) { /* 继承父元素颜色 */ color: inherit; /* 移除下划线装饰 */ text-decoration: none; } .markdown-body a { /* 鼠标悬停时显示下划线 */ } .markdown-body a:hover { text-decoration: underline; } .markdown-body { /* 默认不显示下划线,保持页面简洁 - 插入文本样式 */ } .markdown-body ins { /* 移除下划线装饰,保持页面简洁 */ text-decoration: none; } .markdown-body { /* 专名号:虽然 u 已经重回 html5 Draft,但在所有浏览器中都是可以使用的, * 要做到更好,向后兼容的话,添加 class="typo-u" 来显示专名号 * 关于 标签:http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element * 被放弃的是 4,之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated * 一篇关于 标签的很好文章:http://html5doctor.com/u-element/ */ } .markdown-body u, .markdown-body .typo-u { /* 设置文本装饰为下划线,用于专名号显示 */ text-decoration: underline; } .markdown-body { /* 隐藏指定元素 - 隐藏带有hidden属性的元素 */ } .markdown-body [hidden] { /* 强制隐藏元素,优先级最高 */ display: none !important; } .markdown-body { /* 伸缩框显示为列表元素 - 详情框摘要样式 */ } .markdown-body summary { /* 设置为列表项显示,显示为可点击的列表项 */ display: list-item; } .markdown-body { /* 引用元素前后内容 - 移除默认引号 */ } .markdown-body q:before, .markdown-body q:after { /* 移除引用元素前后的默认引号内容 */ content: ""; } .markdown-body { /* 表格标题和表头文本对齐 - 默认左对齐 */ } .markdown-body caption, .markdown-body th { /* 设置文本左对齐 */ text-align: left; } .markdown-body { /* 居中对齐的表格标题和表头 */ } .markdown-body caption[align=center], .markdown-body th[align=center] { /* 设置文本居中对齐 */ text-align: center; } .markdown-body { /* 特定元素字体粗细统一 - 地址、标题、引用等 */ } .markdown-body address, .markdown-body caption, .markdown-body cite, .markdown-body em, .markdown-body th, .markdown-body var { /* 设置字体粗细为正常(400) */ font-weight: 400; } .markdown-body { /* 标记,类似于手写的荧光笔的作用 - 高亮标记样式 */ } .markdown-body mark { /* 设置标记背景色,使用CSS变量 */ background: var(--color-mark-default); /* 设置内边距,增加标记的可读性 */ padding: 2px; /* 激活状态的标记样式 */ } .markdown-body mark.active { /* 激活时使用强调色背景 */ background: var(--color-mark-fg); } .markdown-body { /* 统一h1元素的间隔和字体大小 - 一级标题样式 */ } .markdown-body h1 { /* 设置上下外边距为0.67em */ margin: 0.67em 0; /* 设置字体粗细,使用CSS变量或默认600 */ font-weight: var(--base-text-weight-semibold, 600); /* 设置字体大小为2倍基础大小 */ font-size: 2em; } .markdown-body { /* small字体缩小 - 小字体文本样式 */ } .markdown-body small { /* 设置字体大小为父元素的90% */ font-size: 90%; } .markdown-body { /* 上下标显示 - 下标和上标文本样式 */ } .markdown-body sub, .markdown-body sup { /* 设置字体大小为75% */ font-size: 75%; /* 设置行高为0,避免影响行间距 */ line-height: 0; /* 设置相对定位,用于精确控制位置 */ position: relative; /* 设置垂直对齐为基线 */ vertical-align: baseline; } .markdown-body { /* 上下标内链接样式 */ } .markdown-body sub a, .markdown-body sup a { /* 设置左右内边距为0.1em */ padding: 0 0.1em; } .markdown-body { /* 下标位置调整 */ } .markdown-body sub { /* 向下偏移0.25em */ bottom: -0.25em; } .markdown-body { /* 上标位置调整 */ } .markdown-body sup { /* 向上偏移0.5em */ top: -0.5em; } .markdown-body { /* 代码相关的字体大小统一 - 代码元素字体样式 */ } .markdown-body code, .markdown-body kbd, .markdown-body pre, .markdown-body samp, .markdown-body pre tt { /* 设置字体为等宽字体,便于代码阅读 */ font-family: monospace; /* 设置字体大小为1em,保持一致性 */ font-size: 1em; } .markdown-body { /* 去除默认边框 - 移除字段集和图片的默认边框 */ } .markdown-body fieldset, .markdown-body img { /* 移除边框 */ border: 0; } .markdown-body { /* 图片初始化样式 - 图片元素基础样式 */ } .markdown-body img { /* 设置边框样式为无 */ border-style: none; /* 设置最大宽度为100%,防止溢出 */ max-width: 100%; /* 设置盒模型为内容盒模型 */ box-sizing: content-box; /* 设置左右外边距为自动,实现居中 */ margin: 0 auto; /* 设置背景色,使用CSS变量 */ background-color: var(--color-canvas-default); } .markdown-body { /* 可附标题内容元素的间距 - 图片容器样式 */ } .markdown-body figure { /* 设置上下外边距为1em,左右外边距为40px */ margin: 1em 40px; } .markdown-body { /* 间隔线 - 水平分隔线样式 */ /* 一致化 horizontal rule - 统一水平分隔线样式 */ } .markdown-body hr { /* 设置盒模型为内容盒模型 */ box-sizing: content-box; /* 隐藏溢出内容 */ overflow: hidden; /* 设置背景为透明 */ background: transparent; /* 设置底部边框,使用CSS变量 */ border-bottom: 1px solid var(--color-border-muted); /* 设置高度为0.25em */ height: 0.25em; /* 移除内边距 */ padding: 0; /* 设置上下外边距为24px */ margin: 24px 0; /* 设置背景色,使用CSS变量 */ background-color: var(--color-border-default); /* 移除边框 */ border: 0; /* 伪元素before - 用于清除浮动 */ } .markdown-body hr::before { /* 设置为表格显示模式,用于清除浮动 */ display: table; /* 空内容,仅用于布局 */ content: ""; } .markdown-body hr { /* 伪元素after - 用于清除浮动 */ } .markdown-body hr::after { /* 设置为表格显示模式,用于清除浮动 */ display: table; /* 清除左右浮动 */ clear: both; /* 空内容,仅用于布局 */ content: ""; } .markdown-body { /* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */ } .markdown-body button, .markdown-body input, .markdown-body select, .markdown-body textarea { /* 继承父元素的字体样式 */ font: inherit; /* 移除外边距 */ margin: 0; /* 设置溢出为可见 */ overflow: visible; /* 继承父元素的字体族 */ font-family: inherit; /* 继承父元素的字体大小 */ font-size: inherit; /* 继承父元素的行高 */ line-height: inherit; } .markdown-body { /* 外观显示为按钮 - 按钮类型输入框样式 */ } .markdown-body [type=button], .markdown-body [type=reset], .markdown-body [type=submit] { /* 设置WebKit浏览器按钮外观 */ -webkit-appearance: button; /* 设置标准按钮外观,提高兼容性 */ appearance: button; } .markdown-body { /* 这两个表单样式规则覆盖 - 复选框和单选框样式 */ } .markdown-body [type=checkbox], .markdown-body [type=radio] { /* 设置盒模型为边框盒模型 */ box-sizing: border-box; /* 移除内边距 */ padding: 0; } .markdown-body { /* 数字按钮内部高度自动 - 数字输入框按钮样式 */ } .markdown-body [type=number]::-webkit-inner-spin-button, .markdown-body [type=number]::-webkit-outer-spin-button { /* 设置高度为自动,适应内容 */ height: auto; } .markdown-body { /* 搜索按钮内图标外观去除 - 搜索输入框样式 */ } .markdown-body [type=search]::-webkit-search-cancel-button, .markdown-body [type=search]::-webkit-search-decoration { /* 移除WebKit浏览器搜索框默认样式 */ -webkit-appearance: none; } .markdown-body { /* 输入框的占位符样式 - WebKit浏览器占位符样式 */ } .markdown-body ::-webkit-input-placeholder { /* 继承父元素颜色 */ color: inherit; /* 设置透明度为0.54,创建半透明效果 */ opacity: 0.54; } .markdown-body { /* 文件选择按钮样式统一 - 文件上传按钮样式 */ } .markdown-body ::-webkit-file-upload-button { /* 设置WebKit浏览器按钮外观 */ -webkit-appearance: button; /* 继承父元素字体样式 */ font: inherit; } .markdown-body { /* 占位符显示统一 - 通用占位符样式 */ } .markdown-body ::placeholder { /* 设置占位符颜色,使用CSS变量 */ color: var(--color-fg-subtle); /* 设置完全不透明 */ opacity: 1; } .markdown-body { /* table内的td,th去除留白 - 表格单元格样式 */ } .markdown-body td, .markdown-body th { /* 移除表格单元格内边距 */ padding: 0; } .markdown-body { /* 伸缩框鼠标显示 - 详情框摘要样式 */ } .markdown-body details summary { /* 设置鼠标悬停时显示手型光标 */ cursor: pointer; } .markdown-body { /* 未展开的详情框隐藏内容 - 详情框内容显示控制 */ } .markdown-body details:not([open]) > *:not(summary) { /* 强制隐藏未展开详情框内的非摘要内容 */ display: none !important; } .markdown-body { /* 按键显示 - 键盘按键样式 */ } .markdown-body kbd { /* 设置为内联块级元素,可以设置宽高但不会独占一行 */ display: inline-block; /* 设置内边距为3px上下,5px左右 */ padding: 3px 5px; /* 设置字体为11px等宽字体,包含多种等宽字体备选 */ font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; /* 设置行高为10px */ line-height: 10px; /* 设置文本颜色,使用CSS变量 */ color: var(--color-fg-default); /* 设置垂直对齐为中间 */ vertical-align: middle; /* 设置背景色,使用CSS变量 */ background-color: var(--color-canvas-subtle); /* 设置边框为1px实线,使用CSS变量 */ border: solid 1px var(--color-neutral-muted); /* 设置底部边框颜色,使用CSS变量 */ border-bottom-color: var(--color-neutral-muted); /* 设置圆角为6px */ border-radius: 6px; /* 设置内阴影,创建按键凹陷效果 */ box-shadow: inset 0 -1px 0 var(--color-neutral-muted); } .markdown-body { /* 清除浮动工具类 - 清除浮动伪元素 */ } .markdown-body .clearfix:before, .markdown-body .clearfix:after { /* 空内容,仅用于布局 */ content: ""; /* 设置为表格显示模式,用于清除浮动 */ display: table; } .markdown-body { /* 清除浮动工具类 - after伪元素 */ } .markdown-body .clearfix:after { /* 清除左右浮动 */ clear: both; } .markdown-body { /* 清除浮动工具类 - 主容器 */ } .markdown-body .clearfix { /* 触发IE的hasLayout属性,用于清除浮动 */ zoom: 1; } .markdown-body { /* 强制文本换行 - 文本换行工具类 */ } .markdown-body .textwrap, .markdown-body .textwrap td, .markdown-body .textwrap th { /* 允许长单词在必要时换行,防止溢出 */ word-wrap: break-word; /* 强制在任意字符间换行,防止溢出 */ word-break: break-all; } .markdown-body { /* 文本换行表格 - 固定表格布局 */ } .markdown-body .textwrap-table { /* 设置表格布局为固定,提高渲染性能 */ table-layout: fixed; } .markdown-body { /* 无序列表样式 - 项目符号列表 */ } .markdown-body ul { /* 重置左边距为0 */ margin-left: 0; /* 重置左内边距为0 */ padding-left: 0; /* 设置左边距为2em,创建缩进效果 */ margin-left: 2em; /* 设置列表样式为实心圆点 */ list-style: disc; } .markdown-body { /* 有序列表样式 - 数字列表 */ } .markdown-body ol { /* 重置左边距为0 */ margin-left: 0; /* 重置左内边距为0 */ padding-left: 0; /* 设置左边距为2em,创建缩进效果 */ margin-left: 2em; /* 设置列表样式为数字 */ list-style: decimal; /* 列表项样式 */ } .markdown-body ol li { /* 设置左内边距为0.4em,增加数字与文本间距 */ padding-left: 0.4em; } .markdown-body { /* 相邻列表项间距 - 列表项之间的间距 */ } .markdown-body li + li { /* 设置顶部外边距为0.25em,增加列表项间距 */ margin-top: 0.25em; } .markdown-body { /* 嵌套列表样式 - 列表项内的子列表 */ } .markdown-body li { /* 无序子列表样式 */ } .markdown-body li ul { /* 设置底部外边距为0.8em */ margin-bottom: 0.8em; /* 设置左边距为2em,创建嵌套缩进 */ margin-left: 2em; /* 设置列表样式为空心圆点 */ list-style: circle; /* 三级无序列表样式 */ } .markdown-body li ul li ul { /* 设置列表样式为实心方块 */ list-style: square; } .markdown-body li { /* 有序子列表样式 */ } .markdown-body li ol { /* 设置底部外边距为0.8em */ margin-bottom: 0.8em; /* 设置左边距为2em,创建嵌套缩进 */ margin-left: 2em; } .markdown-body { /* 任务列表项样式 - 待办事项列表项 */ } .markdown-body .task-list-item { /* 移除列表样式,不显示项目符号 */ list-style-type: none; /* 设置相对定位,用于绝对定位子元素 */ position: relative; /* 第一个子输入框样式 */ } .markdown-body .task-list-item > input { /* 第一个子元素右边距 */ } .markdown-body .task-list-item > input:nth-child(1) { /* 设置右边距为6px */ margin-right: 6px; } .markdown-body .task-list-item { /* 标签样式 */ } .markdown-body .task-list-item label { /* 设置字体粗细为正常(400) */ font-weight: 400; } .markdown-body .task-list-item { /* 拖拽手柄样式 */ } .markdown-body .task-list-item .handle { /* 隐藏拖拽手柄 */ display: none; } .markdown-body .task-list-item { /* 复选框样式 */ } .markdown-body .task-list-item input[type=checkbox] { /* 设置宽度为0.9em */ width: 0.9em; /* 设置高度为0.9em */ height: 0.9em; /* 设置绝对定位 */ position: absolute; /* 向左偏移1.3em */ left: -1.3em; /* 向下偏移0.35em */ top: 0.35em; } .markdown-body { /* 启用的任务列表项样式 */ } .markdown-body .task-list-item.enabled { /* 标签样式 */ } .markdown-body .task-list-item.enabled label { /* 设置鼠标悬停时显示手型光标 */ cursor: pointer; } .markdown-body { /* 相邻任务列表项间距 */ } .markdown-body .task-list-item + .task-list-item { /* 设置顶部外边距为3px */ margin-top: 3px; } .markdown-body { /* 包含任务列表的容器样式 */ } .markdown-body .contains-task-list { /* 从右到左文本方向样式 */ } .markdown-body .contains-task-list:dir(rtl) .task-list-item input[type=checkbox] { /* 设置复选框外边距,适配RTL布局 */ margin: 0 -1.6em 0.25em 0.2em; } .markdown-body { /* 目录样式 - 表格目录容器 */ } .markdown-body .toc { /* 重置左边距为0 */ margin-left: 0; } .markdown-body { /* 定义列表样式 - 描述列表容器 */ } .markdown-body dl { /* 设置为块级元素 */ display: block; /* 设置块级起始外边距为1em */ margin-block-start: 1em; /* 设置块级结束外边距为1em */ margin-block-end: 1em; /* 设置内联起始外边距为0px */ margin-inline-start: 0px; /* 设置内联结束外边距为0px */ margin-inline-end: 0px; /* 设置Unicode双向算法为隔离 */ unicode-bidi: isolate; /* 定义术语样式 */ } .markdown-body dl dt { /* 设置为块级元素 */ display: block; /* 设置Unicode双向算法为隔离 */ unicode-bidi: isolate; } .markdown-body dl { /* 定义描述样式 */ } .markdown-body dl dd { /* 设置为块级元素 */ display: block; /* 设置内联起始外边距为40px,创建缩进效果 */ margin-inline-start: 40px; /* 设置Unicode双向算法为隔离 */ unicode-bidi: isolate; } .markdown-body { --color-base: #ef4444; --markdown-bg: white; --color-bg: #ff47479c; --color-light: #ef44441a; --color-extra: rgba(239, 68, 68, 0.3); --color-more: rgba(239, 68, 68, 0.4); } .markdown-body.green { background-color: var(--markdown-bg); @apply p-3 lg:p-6; } .markdown-body.green strong::before { content: "『"; } .markdown-body.green strong::after { content: "』"; } .markdown-body.green { /* 块/段落引用 */ } .markdown-body.green blockquote { position: relative; z-index: 600; padding: 20px 20px 15px 20px; line-height: 1.4 !important; background-color: rgba(239, 68, 68, 0.06); border-radius: 0.4em; } .markdown-body.green blockquote > * { position: relative; } .markdown-body.green blockquote > *:first-child:before { content: "“"; color: var(--color-light); font-size: 6.5em; font-weight: 700; transform: rotate(15deg) translateX(-10px); opacity: 1; position: absolute; top: -0.4em; left: -0.2em; text-shadow: none; z-index: -10; } .markdown-body.green .tabs { margin-top: 0; margin-bottom: 1em; } .markdown-body.green { /* 让链接在 hover 状态下显示下划线 */ } .markdown-body.green a { position: relative; z-index: 10; transition: color 0.3s linear; cursor: pointer; font-weight: bolder; text-decoration: none; color: var(--color-base); border-bottom: 1px solid currentColor; padding: 0 4px; } .markdown-body.green a[data-footnote-backref], .markdown-body.green a[data-footnote-ref] { border: none; } .markdown-body.green a[data-footnote-backref]:hover, .markdown-body.green a[data-footnote-ref]:hover { background: none; animation: none; } .markdown-body.green a:hover { content: ""; border: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%; background-size: 20px auto; animation: waveMove 1s infinite linear; } @keyframes waveMove { 0% { background-position: 0 100%; } 100% { background-position: -20px 100%; } } .markdown-body.green pre { background: var(--prism-background); font-size: var(--prism-font-size); display: block; -webkit-overflow-scrolling: touch; } .markdown-body.green pre, .markdown-body.green pre code { font-family: var(--prism-font-family); } .markdown-body.green small, .markdown-body.green figcaption { font-size: 0.75em; color: #888; } .markdown-body.green legend { color: #000; font-weight: inherit; } .markdown-body.green caption { color: #000; font-weight: inherit; } .markdown-body.green del { text-decoration: line-through var(--color-base) 2px; } .markdown-body.green code { color: rgb(45, 55, 72); background-color: rgba(160, 174, 192, 0.25); font-family: inherit; font-size: 1em; border-radius: 4px; padding: 1px 6px; margin: 0 2px; vertical-align: bottom; } .markdown-body.green pre code { padding: 0; font-size: inherit; font-weight: inherit; color: inherit; white-space: pre; background-color: transparent; vertical-align: baseline; border-radius: 0; margin: 0; } .markdown-body.green table { width: 100%; display: table; border: 1px solid var(--color-light); } .markdown-body.green table tr:hover { background: var(--color-light); } .markdown-body.green table:hover { border: 1px solid var(--color-extra); } .markdown-body.green table:hover th { border-right: 1px solid var(--color-extra); background: var(--color-extra); border-bottom: 1px solid var(--color-extra); } .markdown-body.green table:hover td { border-right: 1px solid var(--color-extra); } .markdown-body.green table:hover caption { border-right: 1px solid var(--color-extra); } .markdown-body.green table:hover thead th { background: var(--color-extra); } .markdown-body.green table th { border-right: 1px solid var(--color-light); padding: 0.5em 1em; background: var(--color-light); border-bottom: 1px solid var(--color-light); } .markdown-body.green table td { border-right: 1px solid var(--color-light); padding: 0.5em 1em; } .markdown-body.green table caption { border-right: 1px solid var(--color-light); padding: 0.5em 1em; border-bottom: none; } .markdown-body.green table thead th { background: var(--color-extra); } .markdown-body.green h1, .markdown-body.green h2, .markdown-body.green h3, .markdown-body.green h4, .markdown-body.green h5, .markdown-body.green h6 { margin-top: 1.2em; margin-bottom: 0.6em; line-height: 1.35; position: relative; } .markdown-body.green h1 { font-size: 1.8em; } .markdown-body.green h2 { font-size: 1.6em; } .markdown-body.green h3 { font-size: 1.4em; } .markdown-body.green h4 { font-size: 1.2em; } .markdown-body.green h5 { font-size: 1em; } .markdown-body.green h6 { font-size: 1em; } .markdown-body.green ::-webkit-calendar-picker-indicator { filter: invert(50%); } .markdown-body.green em { font-weight: inherit; position: relative; } .markdown-body.green em:after { position: absolute; top: 0.65em; left: 0; width: 100%; overflow: hidden; white-space: nowrap; pointer-events: none; color: var(--color-base); content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; } .markdown-body.green ul.toc li { list-style-type: none; } .markdown-body.green ul.toc li a { text-decoration: none; border: 0; list-style-type: none; } .markdown-body.green.chinese { text-indent: 1.5em; font-weight: 300; } .markdown-body.green.chinese h1, .markdown-body.green.chinese h2, .markdown-body.green.chinese h3, .markdown-body.green.chinese h4, .markdown-body.green.chinese h5, .markdown-body.green.chinese h6, .markdown-body.green.chinese ol, .markdown-body.green.chinese ul, .markdown-body.green.chinese blockquote, .markdown-body.green.chinese details, .markdown-body.green.chinese summary, .markdown-body.green.chinese pre, .markdown-body.green.chinese .tabs { text-indent: 0; }