455 lines
11 KiB
CSS
455 lines
11 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* ==========================================================================
|
||
设计令牌（Design Tokens）
|
||
来源：根目录 DESIGN.md（Mintlify 设计系统分析）
|
||
命名规则：DESIGN.md 的 {colors.xxx} → --color-xxx（Tailwind v4 @theme）
|
||
{rounded.xxx} → --radius-xxx
|
||
{spacing.xxx} → --spacing-xxx
|
||
========================================================================== */
|
||
|
||
@theme {
|
||
/* ---------- 颜色：品牌与强调 ---------- */
|
||
--color-primary: #0a0a0a;
|
||
--color-on-primary: #ffffff;
|
||
--color-brand-green: #00d4a4;
|
||
--color-brand-green-deep: #00b48a;
|
||
--color-brand-green-soft: #7cebcb;
|
||
--color-brand-tag: #3772cf;
|
||
--color-brand-warn: #c37d0d;
|
||
--color-brand-annotate: #1ba673;
|
||
--color-brand-error: #d45656;
|
||
--color-brand-cursor: #888888;
|
||
|
||
/* ---------- 颜色：Hero 氛围渐变 ---------- */
|
||
--color-hero-sky-from: #87a8c8;
|
||
--color-hero-sky-to: #f5e9d8;
|
||
--color-hero-dark-from: #1a3d4a;
|
||
--color-hero-dark-to: #2d5a4f;
|
||
|
||
/* ---------- 颜色：强调（证言卡片） ---------- */
|
||
--color-testimonial-orange: #f55a3c;
|
||
--color-testimonial-orange-deep: #cc3a1f;
|
||
|
||
/* ---------- 颜色：表面 ---------- */
|
||
--color-canvas: #ffffff;
|
||
--color-canvas-dark: #0a0a0a;
|
||
--color-surface: #f7f7f7;
|
||
--color-surface-soft: #fafafa;
|
||
--color-surface-code: #1c1c1e;
|
||
--color-hairline: #e5e5e5;
|
||
--color-hairline-soft: #ededed;
|
||
--color-hairline-dark: #1f1f1f;
|
||
|
||
/* ---------- 颜色：文字 ---------- */
|
||
--color-ink: #0a0a0a;
|
||
--color-charcoal: #1c1c1e;
|
||
--color-slate: #3a3a3c;
|
||
--color-steel: #5a5a5c;
|
||
--color-stone: #888888;
|
||
--color-muted: #a8a8aa;
|
||
--color-on-dark: #ffffff;
|
||
--color-on-dark-muted: #b3b3b3;
|
||
|
||
/* ---------- 圆角 ---------- */
|
||
--radius-xs: 4px;
|
||
--radius-sm: 6px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 16px;
|
||
--radius-xxl: 24px;
|
||
|
||
/* ---------- 间距（基础单位 4px） ---------- */
|
||
--spacing-xxs: 4px;
|
||
--spacing-xs: 8px;
|
||
--spacing-sm: 12px;
|
||
--spacing-md: 16px;
|
||
--spacing-lg: 20px;
|
||
--spacing-xl: 24px;
|
||
--spacing-xxl: 32px;
|
||
--spacing-xxxl: 40px;
|
||
--spacing-section-sm: 48px;
|
||
--spacing-section: 64px;
|
||
--spacing-section-lg: 96px;
|
||
--spacing-hero: 120px;
|
||
|
||
/* ---------- 字体族 ---------- */
|
||
/* 中文 Noto Sans SC、英文 Inter、代码 IBM Plex Mono
|
||
顺序上 Inter 在前，中文字符由 Noto Sans SC 补齐（二者 unicode-range 互补）。 */
|
||
--font-sans:
|
||
var(--font-inter), var(--font-noto-sans-sc), -apple-system,
|
||
BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
|
||
"Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
||
--font-mono:
|
||
var(--font-ibm-plex-mono), "SFMono-Regular", "SF Mono", Menlo, Consolas,
|
||
"Liberation Mono", "Courier New", monospace;
|
||
|
||
/* ---------- 字号阶梯（含行高 / 字距） ---------- */
|
||
--text-hero-display: 72px;
|
||
--text-hero-display--line-height: 1.05;
|
||
--text-hero-display--letter-spacing: -2px;
|
||
--text-display-lg: 56px;
|
||
--text-display-lg--line-height: 1.1;
|
||
--text-display-lg--letter-spacing: -1.5px;
|
||
--text-heading-1: 48px;
|
||
--text-heading-1--line-height: 1.1;
|
||
--text-heading-1--letter-spacing: -1px;
|
||
--text-heading-2: 36px;
|
||
--text-heading-2--line-height: 1.2;
|
||
--text-heading-2--letter-spacing: -0.5px;
|
||
--text-heading-3: 28px;
|
||
--text-heading-3--line-height: 1.25;
|
||
--text-heading-4: 22px;
|
||
--text-heading-4--line-height: 1.3;
|
||
--text-heading-5: 18px;
|
||
--text-heading-5--line-height: 1.4;
|
||
--text-subtitle: 18px;
|
||
--text-subtitle--line-height: 1.5;
|
||
--text-body-md: 16px;
|
||
--text-body-md--line-height: 1.5;
|
||
--text-body-sm: 14px;
|
||
--text-body-sm--line-height: 1.5;
|
||
--text-caption: 13px;
|
||
--text-caption--line-height: 1.4;
|
||
--text-micro: 12px;
|
||
--text-micro--line-height: 1.4;
|
||
--text-micro-uppercase: 11px;
|
||
--text-micro-uppercase--line-height: 1.4;
|
||
--text-micro-uppercase--letter-spacing: 0.5px;
|
||
--text-button-md: 14px;
|
||
--text-button-md--line-height: 1.3;
|
||
--text-code-md: 14px;
|
||
--text-code-md--line-height: 1.5;
|
||
--text-code-sm: 13px;
|
||
--text-code-sm--line-height: 1.4;
|
||
--text-code-inline: 13px;
|
||
--text-code-inline--line-height: 1.3;
|
||
|
||
/* ---------- 阴影（DESIGN.md Elevation） ---------- */
|
||
--shadow-level-1: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px;
|
||
--shadow-card: rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
|
||
--shadow-mockup: rgba(0, 0, 0, 0.12) 0px 24px 48px -8px;
|
||
--shadow-brand: rgba(0, 212, 164, 0.08) 0px 8px 24px;
|
||
|
||
/* ---------- 动效 ---------- */
|
||
--ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
|
||
--animate-fade-up: fade-up 0.5s var(--ease-brand) both;
|
||
--animate-shimmer: shimmer 1.8s linear infinite;
|
||
}
|
||
|
||
@keyframes fade-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(12px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
from {
|
||
background-position: 200% 0;
|
||
}
|
||
to {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
/* ==========================================================================
|
||
基础层
|
||
========================================================================== */
|
||
|
||
@layer base {
|
||
:root {
|
||
/* 站点默认承载于画布白，DESIGN.md 未发布暗色令牌，故不做自动暗色反转。 */
|
||
--background: var(--color-canvas);
|
||
--foreground: var(--color-ink);
|
||
color-scheme: light;
|
||
}
|
||
|
||
* {
|
||
border-color: var(--color-hairline);
|
||
}
|
||
|
||
html {
|
||
-webkit-text-size-adjust: 100%;
|
||
scroll-behavior: smooth;
|
||
/* 固定顶栏高度 + 一点余量，避免锚点跳转被遮挡 */
|
||
scroll-padding-top: 88px;
|
||
/* 防止长 URL / 代码片段把布局撑出横向滚动条 */
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--background);
|
||
color: var(--foreground);
|
||
font-family: var(--font-sans);
|
||
font-size: var(--text-body-md);
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
code,
|
||
kbd,
|
||
samp,
|
||
pre {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: "liga" 0;
|
||
}
|
||
|
||
/* 键盘可达性：统一焦点环 */
|
||
:focus-visible {
|
||
outline: 2px solid var(--color-brand-green);
|
||
outline-offset: 2px;
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
|
||
::selection {
|
||
background-color: var(--color-brand-green-soft);
|
||
color: var(--color-ink);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html {
|
||
scroll-behavior: auto;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
|
||
/* ==========================================================================
|
||
工具类
|
||
========================================================================== */
|
||
|
||
@utility text-balance-pretty {
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
/* 文章正文（由 MDX 渲染）——按 DESIGN.md 的文档式排版 */
|
||
@layer components {
|
||
.prose-blog {
|
||
color: var(--color-charcoal);
|
||
font-size: var(--text-body-md);
|
||
line-height: 1.75;
|
||
/* 长单词 / URL 不撑破容器 */
|
||
overflow-wrap: break-word;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.prose-blog > * + * {
|
||
margin-top: 1.25em;
|
||
}
|
||
|
||
.prose-blog h2 {
|
||
margin-top: 2.5em;
|
||
margin-bottom: 0.75em;
|
||
font-size: var(--text-heading-3);
|
||
font-weight: 600;
|
||
line-height: 1.25;
|
||
letter-spacing: -0.2px;
|
||
color: var(--color-ink);
|
||
scroll-margin-top: 96px;
|
||
}
|
||
|
||
.prose-blog h3 {
|
||
margin-top: 2em;
|
||
margin-bottom: 0.6em;
|
||
font-size: var(--text-heading-4);
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
color: var(--color-ink);
|
||
scroll-margin-top: 96px;
|
||
}
|
||
|
||
.prose-blog h4 {
|
||
margin-top: 1.75em;
|
||
margin-bottom: 0.5em;
|
||
font-size: var(--text-heading-5);
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
color: var(--color-ink);
|
||
scroll-margin-top: 96px;
|
||
}
|
||
|
||
.prose-blog p,
|
||
.prose-blog li {
|
||
color: var(--color-slate);
|
||
}
|
||
|
||
.prose-blog a {
|
||
color: var(--color-ink);
|
||
font-weight: 500;
|
||
text-decoration: underline;
|
||
text-decoration-color: var(--color-brand-green);
|
||
text-decoration-thickness: 2px;
|
||
text-underline-offset: 3px;
|
||
}
|
||
|
||
.prose-blog a:hover {
|
||
color: var(--color-brand-green-deep);
|
||
}
|
||
|
||
.prose-blog strong {
|
||
color: var(--color-ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.prose-blog ul,
|
||
.prose-blog ol {
|
||
padding-left: 1.5em;
|
||
}
|
||
|
||
.prose-blog ul {
|
||
list-style: disc;
|
||
}
|
||
|
||
.prose-blog ol {
|
||
list-style: decimal;
|
||
}
|
||
|
||
.prose-blog li::marker {
|
||
color: var(--color-stone);
|
||
}
|
||
|
||
.prose-blog li + li {
|
||
margin-top: 0.5em;
|
||
}
|
||
|
||
.prose-blog blockquote {
|
||
border-left: 3px solid var(--color-brand-green);
|
||
padding: 0.25em 0 0.25em 1.25em;
|
||
color: var(--color-steel);
|
||
font-style: normal;
|
||
}
|
||
|
||
.prose-blog blockquote p {
|
||
color: var(--color-steel);
|
||
}
|
||
|
||
.prose-blog hr {
|
||
margin: 2.5em 0;
|
||
border: 0;
|
||
border-top: 1px solid var(--color-hairline);
|
||
}
|
||
|
||
.prose-blog img {
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--color-hairline);
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
/* 行内代码（DESIGN.md: code-inline） */
|
||
.prose-blog :not(pre) > code {
|
||
background-color: var(--color-surface);
|
||
color: var(--color-charcoal);
|
||
font-size: 0.875em;
|
||
font-weight: 500;
|
||
padding: 2px 6px;
|
||
border-radius: var(--radius-xs);
|
||
border: 1px solid var(--color-hairline);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 代码块容器（DESIGN.md: code-block） */
|
||
.prose-blog figure[data-rehype-pretty-code-figure] {
|
||
margin: 1.75em 0;
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
border: 1px solid var(--color-hairline-dark);
|
||
background-color: var(--color-surface-code);
|
||
}
|
||
|
||
.prose-blog figure[data-rehype-pretty-code-figure] figcaption {
|
||
background-color: var(--color-surface-code);
|
||
color: var(--color-on-dark-muted);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-caption);
|
||
padding: 8px 16px;
|
||
border-bottom: 1px solid var(--color-hairline-dark);
|
||
}
|
||
|
||
.prose-blog figure[data-rehype-pretty-code-figure] pre {
|
||
margin: 0;
|
||
padding: 16px 0;
|
||
overflow-x: auto;
|
||
background-color: var(--color-surface-code);
|
||
font-size: var(--text-code-md);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.prose-blog figure[data-rehype-pretty-code-figure] code {
|
||
display: grid;
|
||
font-size: inherit;
|
||
background: none;
|
||
border: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.prose-blog figure[data-rehype-pretty-code-figure] [data-line] {
|
||
padding: 0 16px;
|
||
border-left: 2px solid transparent;
|
||
}
|
||
|
||
.prose-blog figure[data-rehype-pretty-code-figure] [data-highlighted-line] {
|
||
background-color: rgba(0, 212, 164, 0.08);
|
||
border-left-color: var(--color-brand-green);
|
||
}
|
||
|
||
.prose-blog table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: var(--text-body-sm);
|
||
border: 1px solid var(--color-hairline);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
display: block;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.prose-blog th {
|
||
background-color: var(--color-surface);
|
||
color: var(--color-ink);
|
||
font-weight: 600;
|
||
text-align: left;
|
||
}
|
||
|
||
.prose-blog th,
|
||
.prose-blog td {
|
||
padding: 12px 20px;
|
||
border-bottom: 1px solid var(--color-hairline-soft);
|
||
}
|
||
|
||
.prose-blog tr:last-child td {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
/* 标题锚点（rehype-autolink-headings） */
|
||
.prose-blog .heading-anchor {
|
||
color: var(--color-muted);
|
||
text-decoration: none;
|
||
margin-left: 0.4em;
|
||
font-weight: 400;
|
||
opacity: 0;
|
||
transition: opacity 150ms ease;
|
||
}
|
||
|
||
.prose-blog h2:hover .heading-anchor,
|
||
.prose-blog h3:hover .heading-anchor,
|
||
.prose-blog h4:hover .heading-anchor,
|
||
.prose-blog .heading-anchor:focus-visible {
|
||
opacity: 1;
|
||
}
|
||
}
|