mirror of
https://github.com/modelscope/FunASR.git
synced 2026-10-12 02:19:18 +00:00
xiaoyunchong.xyc
89a33c7263
- New .doc-sidebar CSS class (reusable for other pages) - Tutorial TOC moved from top grid to sticky left panel - Mobile: collapses to horizontal scroll bar - Sections always accessible while scrolling
1505 lines
27 KiB
CSS
1505 lines
27 KiB
CSS
/* FunASR GitHub Pages design system */
|
|
:root {
|
|
--ink: #111827;
|
|
--ink-soft: #334155;
|
|
--muted: #64748b;
|
|
--muted-2: #94a3b8;
|
|
--page: #f7f9fc;
|
|
--surface: #ffffff;
|
|
--surface-2: #f1f5f9;
|
|
--line: #dbe3ee;
|
|
--line-strong: #c7d2e1;
|
|
--primary: #2563eb;
|
|
--primary-dark: #1d4ed8;
|
|
--primary-soft: #dbeafe;
|
|
--teal: #0f766e;
|
|
--teal-soft: #ccfbf1;
|
|
--green: #059669;
|
|
--green-soft: #d1fae5;
|
|
--amber: #b45309;
|
|
--amber-soft: #fef3c7;
|
|
--red: #b42318;
|
|
--code-bg: #101828;
|
|
--code-line: #1d2939;
|
|
--radius: 8px;
|
|
--shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
|
|
--shadow-lg: 0 18px 45px rgba(16, 24, 40, 0.12);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 88px;
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
background:
|
|
linear-gradient(180deg, #fbfcff 0%, var(--page) 42%, #ffffff 100%);
|
|
color: var(--ink);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.7;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-dark);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--teal);
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.container {
|
|
width: min(100% - 48px, 1120px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.narrow {
|
|
max-width: 850px;
|
|
}
|
|
|
|
/* Navigation */
|
|
.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
border-bottom: 1px solid rgba(219, 227, 238, 0.82);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.nav .container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28px;
|
|
min-height: 68px;
|
|
}
|
|
|
|
.nav-logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--ink);
|
|
font-size: 1.16rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-logo::before {
|
|
content: '';
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 7px;
|
|
background:
|
|
linear-gradient(135deg, var(--primary) 0%, var(--teal) 55%, var(--amber) 100%);
|
|
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.22);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.nav-links a {
|
|
border-radius: 999px;
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
font-weight: 650;
|
|
line-height: 1;
|
|
padding: 9px 12px;
|
|
}
|
|
|
|
.nav-links a:hover,
|
|
.nav-links a.active {
|
|
background: var(--surface-2);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.nav-github {
|
|
margin-left: auto;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.86rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 10px 15px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-github:hover {
|
|
border-color: var(--primary);
|
|
color: var(--primary-dark);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
linear-gradient(120deg, #0b1020 0%, #102f30 58%, #342714 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
|
|
background-size: 36px 36px;
|
|
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.24));
|
|
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.24));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
|
|
align-items: center;
|
|
gap: 54px;
|
|
min-height: 620px;
|
|
padding: 86px 0 72px;
|
|
}
|
|
|
|
.hero-copy {
|
|
max-width: 690px;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 18px;
|
|
color: #a7f3d0;
|
|
font-size: 0.76rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.eyebrow::before {
|
|
content: '';
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
box-shadow: 0 0 0 6px rgba(5, 150, 105, 0.18);
|
|
}
|
|
|
|
.hero h1 {
|
|
max-width: 760px;
|
|
margin-bottom: 20px;
|
|
font-size: clamp(3.4rem, 8vw, 6.8rem);
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
line-height: 0.92;
|
|
}
|
|
|
|
.hero p {
|
|
max-width: 650px;
|
|
margin-bottom: 28px;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
font-size: 1.12rem;
|
|
}
|
|
|
|
.hero-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin: 0 0 34px;
|
|
}
|
|
|
|
.hero-badges a {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.hero-badges img {
|
|
height: 23px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.hero-panel {
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
border-radius: var(--radius);
|
|
background: rgba(11, 18, 32, 0.74);
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
|
|
}
|
|
|
|
.terminal-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: rgba(255, 255, 255, 0.72);
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
|
|
font-size: 0.74rem;
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.terminal-dots {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.terminal-dots span {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: #ef4444;
|
|
}
|
|
|
|
.terminal-dots span:nth-child(2) {
|
|
background: #f59e0b;
|
|
}
|
|
|
|
.terminal-dots span:nth-child(3) {
|
|
background: #10b981;
|
|
}
|
|
|
|
.hero-panel pre {
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: #d1e9ff;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.hero-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.hero-metrics div {
|
|
padding: 16px 14px;
|
|
}
|
|
|
|
.hero-metrics div + div {
|
|
border-left: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.hero-metrics strong {
|
|
display: block;
|
|
color: #ffffff;
|
|
font-size: 1.2rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.hero-metrics span {
|
|
color: rgba(255, 255, 255, 0.62);
|
|
font-size: 0.76rem;
|
|
font-weight: 650;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 44px;
|
|
border: 1px solid transparent;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
font-size: 0.92rem;
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
padding: 12px 20px;
|
|
text-align: center;
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-white {
|
|
background: #ffffff;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.btn-white:hover {
|
|
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.btn-outline-white {
|
|
border-color: rgba(255, 255, 255, 0.32);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-outline-white:hover {
|
|
border-color: rgba(255, 255, 255, 0.74);
|
|
background: rgba(255, 255, 255, 0.13);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-dark);
|
|
color: #ffffff;
|
|
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
|
|
}
|
|
|
|
/* Sections */
|
|
section {
|
|
padding: 78px 0;
|
|
}
|
|
|
|
section.alt {
|
|
border-block: 1px solid var(--line);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.section-title {
|
|
margin-bottom: 12px;
|
|
font-size: clamp(1.72rem, 3vw, 2.45rem);
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
line-height: 1.1;
|
|
text-align: center;
|
|
}
|
|
|
|
.section-subtitle {
|
|
max-width: 670px;
|
|
margin: 0 auto 42px;
|
|
color: var(--muted);
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.section-cta {
|
|
margin-top: 34px;
|
|
text-align: center;
|
|
}
|
|
|
|
.grid-3,
|
|
.grid-2 {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.grid-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.grid-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
padding: 26px;
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
|
}
|
|
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0 0 auto;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--primary), var(--teal), var(--amber));
|
|
opacity: 0;
|
|
transition: opacity 0.18s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: var(--line-strong);
|
|
box-shadow: var(--shadow-lg);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 34px;
|
|
margin-bottom: 18px;
|
|
border: 1px solid rgba(37, 99, 235, 0.14);
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, var(--primary-soft), var(--teal-soft));
|
|
color: var(--ink);
|
|
font-size: 0.74rem;
|
|
font-weight: 850;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.card h3 {
|
|
margin-bottom: 9px;
|
|
color: var(--ink);
|
|
font-size: 1.08rem;
|
|
font-weight: 800;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.card p {
|
|
color: var(--muted);
|
|
font-size: 0.94rem;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.card-title-link {
|
|
display: inline-flex;
|
|
color: inherit;
|
|
}
|
|
|
|
.card-title-link:hover {
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.card-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 25px;
|
|
border: 1px solid rgba(15, 118, 110, 0.16);
|
|
border-radius: 999px;
|
|
background: var(--teal-soft);
|
|
color: #115e59;
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.card-tags .tag:nth-child(3n + 1) {
|
|
background: var(--primary-soft);
|
|
color: var(--primary-dark);
|
|
border-color: rgba(37, 99, 235, 0.16);
|
|
}
|
|
|
|
.card-tags .tag:nth-child(3n + 2) {
|
|
background: var(--green-soft);
|
|
color: #047857;
|
|
border-color: rgba(5, 150, 105, 0.16);
|
|
}
|
|
|
|
.card-tags .tag:nth-child(3n) {
|
|
background: var(--amber-soft);
|
|
color: var(--amber);
|
|
border-color: rgba(180, 83, 9, 0.16);
|
|
}
|
|
|
|
/* Code blocks */
|
|
pre {
|
|
margin: 16px 0 24px;
|
|
overflow-x: auto;
|
|
border: 1px solid #202b3d;
|
|
border-radius: var(--radius);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 36px),
|
|
var(--code-bg);
|
|
box-shadow: var(--shadow);
|
|
color: #e6edf6;
|
|
font-size: 0.85rem;
|
|
line-height: 1.65;
|
|
padding: 20px 22px;
|
|
white-space: pre;
|
|
}
|
|
|
|
code {
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
|
|
p code,
|
|
li code,
|
|
td code {
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 5px;
|
|
background: #f8fafc;
|
|
color: var(--red);
|
|
font-size: 0.82rem;
|
|
padding: 2px 6px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Content pages */
|
|
.content {
|
|
padding: 56px 0 86px;
|
|
}
|
|
|
|
.content > .container,
|
|
.content.container {
|
|
max-width: 920px;
|
|
}
|
|
|
|
.content.container.narrow {
|
|
max-width: 850px;
|
|
}
|
|
|
|
.content h1 {
|
|
max-width: 760px;
|
|
margin-bottom: 10px;
|
|
color: var(--ink);
|
|
font-size: clamp(2rem, 4.8vw, 3.35rem);
|
|
font-weight: 850;
|
|
letter-spacing: 0;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.content h1 + p {
|
|
max-width: 760px;
|
|
margin-bottom: 34px;
|
|
color: var(--muted);
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.content h2 {
|
|
margin: 58px 0 16px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
color: var(--ink);
|
|
font-size: 1.42rem;
|
|
font-weight: 820;
|
|
letter-spacing: 0;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.content h3 {
|
|
margin: 32px 0 12px;
|
|
color: var(--ink-soft);
|
|
font-size: 1.08rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.content p {
|
|
margin-bottom: 13px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.content ul,
|
|
.content ol {
|
|
margin: 14px 0 16px 24px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.content li {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.content strong {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.quick-nav {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
|
|
gap: 8px;
|
|
margin: 34px 0 50px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
padding: 14px;
|
|
}
|
|
|
|
.quick-nav a {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 40px;
|
|
border-radius: 7px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.88rem;
|
|
font-weight: 750;
|
|
line-height: 1.25;
|
|
padding: 9px 11px;
|
|
}
|
|
|
|
.quick-nav a:hover {
|
|
background: var(--surface-2);
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.callout-spaced {
|
|
margin-top: 48px;
|
|
}
|
|
|
|
.note,
|
|
.warning {
|
|
margin: 18px 0;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius);
|
|
color: var(--ink-soft);
|
|
font-size: 0.92rem;
|
|
padding: 15px 17px;
|
|
}
|
|
|
|
.note {
|
|
border-color: rgba(37, 99, 235, 0.16);
|
|
background: #eff6ff;
|
|
}
|
|
|
|
.warning {
|
|
border-color: rgba(180, 83, 9, 0.18);
|
|
background: #fffbeb;
|
|
}
|
|
|
|
table {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 18px 0 22px;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
border-spacing: 0;
|
|
background: var(--surface);
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
tbody {
|
|
display: table;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 11px 14px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
th {
|
|
background: #f8fafc;
|
|
color: var(--muted);
|
|
font-size: 0.74rem;
|
|
font-weight: 850;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.step {
|
|
margin: 18px 0;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
padding: 24px;
|
|
}
|
|
|
|
.step-num {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 10px;
|
|
border-radius: 999px;
|
|
background: var(--ink);
|
|
color: #ffffff;
|
|
font-size: 0.8rem;
|
|
font-weight: 850;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: #0b1020;
|
|
color: var(--muted-2);
|
|
padding: 44px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
footer p {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
footer a {
|
|
color: #67e8f9;
|
|
}
|
|
|
|
footer a:hover {
|
|
color: #a7f3d0;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.hero-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 34px;
|
|
min-height: auto;
|
|
padding: 74px 0 60px;
|
|
}
|
|
|
|
.hero-panel {
|
|
max-width: 680px;
|
|
}
|
|
|
|
.grid-3 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.container {
|
|
width: min(100% - 32px, 1120px);
|
|
}
|
|
|
|
.nav .container {
|
|
flex-wrap: wrap;
|
|
gap: 10px 14px;
|
|
min-height: 0;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.nav-links {
|
|
order: 3;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.nav-links a {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-github {
|
|
padding: 9px 12px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(3rem, 18vw, 4.4rem);
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.hero-actions .btn {
|
|
flex: 1 1 180px;
|
|
}
|
|
|
|
.hero-metrics {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hero-metrics div + div {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-left: 0;
|
|
}
|
|
|
|
section {
|
|
padding: 56px 0;
|
|
}
|
|
|
|
.section-subtitle {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.grid-3,
|
|
.grid-2 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.card,
|
|
.step {
|
|
padding: 22px;
|
|
}
|
|
|
|
.quick-nav {
|
|
grid-template-columns: 1fr;
|
|
margin-bottom: 42px;
|
|
}
|
|
|
|
pre {
|
|
font-size: 0.8rem;
|
|
padding: 18px 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 430px) {
|
|
.container {
|
|
width: min(100% - 24px, 1120px);
|
|
}
|
|
|
|
.nav-logo {
|
|
font-size: 1.02rem;
|
|
}
|
|
|
|
.nav-github {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.hero-content {
|
|
padding-top: 56px;
|
|
}
|
|
|
|
.hero-badges img {
|
|
height: 21px;
|
|
}
|
|
|
|
.content {
|
|
padding-top: 42px;
|
|
}
|
|
}
|
|
|
|
/* Documentation landing */
|
|
.docs-band {
|
|
border-bottom: 1px solid var(--line);
|
|
background: #ffffff;
|
|
padding: 70px 0;
|
|
}
|
|
|
|
.doc-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.doc-card {
|
|
display: flex;
|
|
min-height: 210px;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
box-shadow: var(--shadow);
|
|
color: var(--ink);
|
|
padding: 22px;
|
|
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
|
|
}
|
|
|
|
.doc-card:hover {
|
|
border-color: var(--line-strong);
|
|
box-shadow: var(--shadow-lg);
|
|
color: var(--ink);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.doc-kicker {
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
border: 1px solid rgba(15, 118, 110, 0.16);
|
|
border-radius: 999px;
|
|
background: var(--teal-soft);
|
|
color: #115e59;
|
|
font-size: 0.72rem;
|
|
font-weight: 850;
|
|
line-height: 1;
|
|
padding: 6px 9px;
|
|
}
|
|
|
|
.doc-card h3 {
|
|
margin: 18px 0 8px;
|
|
font-size: 1.1rem;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.doc-card p {
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Shared guide pages */
|
|
.content h4 {
|
|
margin: 24px 0 8px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.96rem;
|
|
font-weight: 820;
|
|
}
|
|
|
|
.tip {
|
|
margin: 18px 0;
|
|
border: 1px solid rgba(5, 150, 105, 0.18);
|
|
border-radius: var(--radius);
|
|
background: #f0fdf4;
|
|
color: var(--ink-soft);
|
|
font-size: 0.92rem;
|
|
padding: 15px 17px;
|
|
}
|
|
|
|
.output-box,
|
|
.arch-box {
|
|
margin: 14px 0 22px;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #f8fafc;
|
|
color: var(--ink-soft);
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 0.8rem;
|
|
line-height: 1.65;
|
|
padding: 15px 17px;
|
|
}
|
|
|
|
.arch-box {
|
|
white-space: pre;
|
|
}
|
|
|
|
.toc-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 8px;
|
|
margin: 24px 0 46px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
padding: 14px;
|
|
}
|
|
|
|
.toc-grid a {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 40px;
|
|
border-radius: 7px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.88rem;
|
|
font-weight: 750;
|
|
line-height: 1.25;
|
|
padding: 9px 11px;
|
|
}
|
|
|
|
.toc-grid a:hover {
|
|
background: var(--surface-2);
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.scenario-card {
|
|
margin: 14px 0;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
padding: 20px 22px;
|
|
}
|
|
|
|
.scenario-card h4 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.scenario-card p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* API reference */
|
|
.api-page {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.api-layout {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: calc(100vh - 68px);
|
|
}
|
|
|
|
.api-sidebar {
|
|
position: sticky;
|
|
top: 68px;
|
|
width: 290px;
|
|
min-width: 290px;
|
|
height: calc(100vh - 68px);
|
|
overflow-y: auto;
|
|
border-right: 1px solid var(--line);
|
|
background: #f8fafc;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.sb-search {
|
|
width: calc(100% - 24px);
|
|
margin: 0 12px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 7px;
|
|
background: #ffffff;
|
|
color: var(--ink);
|
|
font-size: 0.82rem;
|
|
padding: 9px 11px;
|
|
}
|
|
|
|
.sb-search:focus {
|
|
border-color: var(--primary);
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
|
|
}
|
|
|
|
.l1 {
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.l1-title,
|
|
.l2-title {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
gap: 8px;
|
|
}
|
|
|
|
.l1-title {
|
|
color: var(--ink-soft);
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
padding: 10px 14px;
|
|
}
|
|
|
|
.l1-title:hover,
|
|
.l2-title:hover,
|
|
.l3-item:hover {
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
.l1-title .cnt {
|
|
margin-left: auto;
|
|
border-radius: 999px;
|
|
background: var(--surface-2);
|
|
color: var(--muted);
|
|
font-size: 0.66rem;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.l1-title .arr,
|
|
.l2-title .arr {
|
|
color: var(--muted);
|
|
font-size: 0.62rem;
|
|
transition: transform 0.18s ease;
|
|
}
|
|
|
|
.l1-children,
|
|
.l2-children {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.28s ease;
|
|
}
|
|
|
|
.l1.open > .l1-children,
|
|
.l2.open > .l2-children {
|
|
max-height: 20000px;
|
|
}
|
|
|
|
.l1.open > .l1-title .arr,
|
|
.l2.open > .l2-title .arr {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.l2-title {
|
|
color: var(--muted);
|
|
font-size: 0.74rem;
|
|
font-weight: 720;
|
|
padding: 5px 14px 5px 26px;
|
|
}
|
|
|
|
.l2-title .arr {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.l3-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border-left: 2px solid transparent;
|
|
color: var(--ink-soft);
|
|
cursor: pointer;
|
|
font-size: 0.73rem;
|
|
padding: 3px 12px 3px 38px;
|
|
}
|
|
|
|
.l3-item.active {
|
|
border-left-color: var(--primary);
|
|
background: var(--primary-soft);
|
|
color: var(--primary-dark);
|
|
font-weight: 780;
|
|
}
|
|
|
|
.l3m {
|
|
padding-left: 48px;
|
|
}
|
|
|
|
.mb {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 15px;
|
|
height: 15px;
|
|
flex-shrink: 0;
|
|
border-radius: 4px;
|
|
font-size: 0.52rem;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.badge-c {
|
|
background: var(--primary-soft);
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.badge-m {
|
|
background: var(--green-soft);
|
|
color: var(--green);
|
|
}
|
|
|
|
.badge-f {
|
|
background: var(--amber-soft);
|
|
color: var(--amber);
|
|
}
|
|
|
|
.api-content {
|
|
width: min(100%, 900px);
|
|
padding: 42px 48px;
|
|
}
|
|
|
|
.api-detail {
|
|
display: none;
|
|
}
|
|
|
|
.api-detail.active {
|
|
display: block;
|
|
}
|
|
|
|
.api-welcome {
|
|
margin: 40px auto 0;
|
|
max-width: 640px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #ffffff;
|
|
box-shadow: var(--shadow);
|
|
color: var(--muted);
|
|
padding: 34px;
|
|
text-align: center;
|
|
}
|
|
|
|
.api-welcome h2 {
|
|
margin-bottom: 8px;
|
|
color: var(--ink);
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.dtag {
|
|
display: inline-flex;
|
|
border-radius: 999px;
|
|
font-size: 0.68rem;
|
|
font-weight: 850;
|
|
line-height: 1;
|
|
padding: 6px 9px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.api-detail h2 {
|
|
margin: 12px 0 8px;
|
|
font-size: 1.35rem;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.api-detail h2 code {
|
|
background: transparent;
|
|
color: var(--ink);
|
|
font-size: 1rem;
|
|
padding: 0;
|
|
}
|
|
|
|
.dmod {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.dmod a,
|
|
.gh-link,
|
|
.src-more {
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.ddoc {
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.ddoc p,
|
|
.mdoc p {
|
|
margin-bottom: 8px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.ddoc h4,
|
|
.mdoc h4 {
|
|
margin: 16px 0 6px;
|
|
color: var(--ink);
|
|
font-size: 0.84rem;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.ddoc ul {
|
|
list-style: none;
|
|
margin: 0 0 14px;
|
|
padding: 0;
|
|
}
|
|
|
|
.ddoc li {
|
|
border-left: 2px solid var(--line);
|
|
color: var(--ink-soft);
|
|
font-size: 0.86rem;
|
|
padding: 4px 0 4px 12px;
|
|
}
|
|
|
|
.ddoc li.sub {
|
|
border-left-color: transparent;
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.mt {
|
|
margin: 26px 0 12px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.95rem;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.mblk,
|
|
.src-block {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.mblk {
|
|
margin: 10px 0;
|
|
padding: 13px 15px;
|
|
}
|
|
|
|
.mblk > code {
|
|
color: var(--ink);
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.gh-link {
|
|
margin-left: 8px;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.src-block {
|
|
margin: 13px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.src-block summary {
|
|
background: var(--surface-2);
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
font-weight: 740;
|
|
padding: 9px 14px;
|
|
}
|
|
|
|
.src-block pre {
|
|
max-height: 420px;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
font-size: 0.76rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.src-more {
|
|
display: block;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.78rem;
|
|
padding: 9px 14px;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted-2);
|
|
font-style: italic;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
@media (max-width: 1040px) {
|
|
.doc-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.api-layout {
|
|
display: block;
|
|
}
|
|
|
|
.api-sidebar {
|
|
position: static;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: auto;
|
|
max-height: 44vh;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.api-content {
|
|
width: 100%;
|
|
padding: 34px 24px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.doc-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.doc-card {
|
|
min-height: 0;
|
|
}
|
|
|
|
.toc-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.api-content {
|
|
padding: 28px 16px;
|
|
}
|
|
}
|
|
|
|
/* Doc sidebar layout - for tutorial, training, etc */
|
|
.doc-layout {
|
|
display: flex;
|
|
gap: 0;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.doc-sidebar {
|
|
position: sticky;
|
|
top: 60px;
|
|
width: 240px;
|
|
min-width: 240px;
|
|
height: calc(100vh - 60px);
|
|
overflow-y: auto;
|
|
border-right: 1px solid var(--line);
|
|
background: var(--surface-2);
|
|
padding: 20px 0;
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.doc-sidebar a {
|
|
display: block;
|
|
padding: 7px 20px;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
border-left: 3px solid transparent;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.doc-sidebar a:hover {
|
|
color: var(--primary);
|
|
background: rgba(37, 99, 235, 0.04);
|
|
}
|
|
|
|
.doc-sidebar a.active {
|
|
color: var(--primary);
|
|
border-left-color: var(--primary);
|
|
background: rgba(37, 99, 235, 0.06);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.doc-sidebar .sb-title {
|
|
padding: 7px 20px;
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.doc-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 32px 40px;
|
|
max-width: 820px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.doc-layout {
|
|
flex-direction: column;
|
|
}
|
|
.doc-sidebar {
|
|
position: static;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
height: auto;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--line);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 12px;
|
|
gap: 4px;
|
|
}
|
|
.doc-sidebar a {
|
|
padding: 6px 12px;
|
|
border-left: none;
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
}
|
|
.doc-sidebar .sb-title {
|
|
width: 100%;
|
|
}
|
|
.doc-content {
|
|
padding: 24px;
|
|
}
|
|
}
|