JOJO
39a7a5fc6f
- website-content/：官网 10 篇文档内容 + README - website-design/：官网设计稿、动画实验、预览图与资源 - 根目录官网截图两张 - .gitignore 忽略 website-design/exp/static/dist 构建产物（7.1MB）
651 lines
15 KiB
CSS
651 lines
15 KiB
CSS
/* ═══════════════════════════════════════════
|
||
Astrion 官网 —— 界面即官网
|
||
配色取自产品 classic 主题；无装饰性 gimmick。
|
||
═══════════════════════════════════════════ */
|
||
|
||
:root {
|
||
--bg: #faf9f5;
|
||
--surface: #ffffff;
|
||
--bubble: #f0ebdf;
|
||
--text: #211d16;
|
||
--text-2: #6e675a;
|
||
--border: #e6dfd0;
|
||
--accent: #cc785c;
|
||
--code-bg: #262119;
|
||
--code-text: #f2ede2;
|
||
--ok: #4a8f5d;
|
||
--warn: #b8862e;
|
||
--untested: #b04a3c;
|
||
--rail-w: 60px;
|
||
--thread-w: 760px;
|
||
--composer-h: 108px;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-size: 15.5px;
|
||
line-height: 1.85;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
::selection { background: rgba(204, 120, 92, 0.22); }
|
||
|
||
code {
|
||
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
|
||
font-size: 0.88em;
|
||
background: rgba(33, 29, 22, 0.06);
|
||
padding: 0.15em 0.45em;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
a { color: var(--accent); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
|
||
/* ═══════ 左侧导航栏 ═══════ */
|
||
|
||
.rail {
|
||
position: fixed;
|
||
inset: 0 auto 0 0;
|
||
width: var(--rail-w);
|
||
background: var(--bg);
|
||
border-right: 1px solid var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 14px 0;
|
||
gap: 4px;
|
||
z-index: 50;
|
||
}
|
||
|
||
.rail-item {
|
||
position: relative;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10px;
|
||
color: var(--text-2);
|
||
transition: background 0.15s ease, color 0.15s ease;
|
||
}
|
||
|
||
.rail-item:hover { background: var(--bubble); color: var(--text); text-decoration: none; }
|
||
|
||
.rail-item svg {
|
||
width: 19px;
|
||
height: 19px;
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 1.6;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.rail-logo { margin-bottom: 12px; }
|
||
.rail-avatar { width: 26px; height: 26px; display: block; color: var(--text); }
|
||
|
||
.rail-spacer { flex: 1; }
|
||
|
||
.rail-tip {
|
||
position: absolute;
|
||
left: calc(100% + 10px);
|
||
top: 50%;
|
||
transform: translateY(-50%) translateX(-4px);
|
||
background: var(--text);
|
||
color: var(--bg);
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
padding: 7px 10px;
|
||
border-radius: 7px;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||
}
|
||
|
||
.rail-item:hover .rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
|
||
|
||
/* ═══════ 对话流主区 ═══════ */
|
||
|
||
.thread {
|
||
margin-left: var(--rail-w);
|
||
padding: 0 32px;
|
||
}
|
||
|
||
.thread > * { max-width: var(--thread-w); margin-left: auto; margin-right: auto; }
|
||
|
||
/* 滚动淡入 */
|
||
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
|
||
.reveal.in { opacity: 1; transform: none; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.reveal { opacity: 1; transform: none; transition: none; }
|
||
}
|
||
|
||
/* ═══════ 开场（新对话引导页同构） ═══════ */
|
||
|
||
.opening {
|
||
min-height: 78vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 64px 0 48px;
|
||
}
|
||
|
||
.opening-avatar { width: 132px; height: 132px; margin-bottom: 36px; }
|
||
|
||
.opening-line {
|
||
font-size: 34px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.01em;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.opening-sub {
|
||
font-size: 17px;
|
||
color: var(--text-2);
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.opening-forms { display: flex; gap: 10px; }
|
||
|
||
.opening-forms span {
|
||
font-size: 12.5px;
|
||
color: var(--text-2);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
padding: 5px 14px;
|
||
background: var(--surface);
|
||
}
|
||
|
||
.opening-forms em { font-style: normal; color: var(--accent); margin-left: 2px; }
|
||
|
||
/* clone 命令行：安静、等宽、可复制 */
|
||
.opening-clone {
|
||
margin-top: 22px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 9px 10px 9px 16px;
|
||
}
|
||
|
||
.opening-clone code {
|
||
background: transparent;
|
||
padding: 0;
|
||
font-size: 12.8px;
|
||
color: var(--text-2);
|
||
}
|
||
|
||
/* 复制按钮：固定尺寸，点击只换图标，绝不变宽 */
|
||
.copy-btn {
|
||
flex-shrink: 0;
|
||
width: 28px;
|
||
height: 28px;
|
||
border: none;
|
||
border-radius: 7px;
|
||
background: transparent;
|
||
color: var(--text-2);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.15s ease, color 0.15s ease;
|
||
}
|
||
|
||
.copy-btn:hover { background: var(--bubble); color: var(--text); }
|
||
|
||
.copy-btn svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 1.8;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.copy-btn .icon-check { display: none; }
|
||
.copy-btn.copied { color: var(--ok); }
|
||
.copy-btn.copied .icon-copy { display: none; }
|
||
.copy-btn.copied .icon-check { display: block; }
|
||
|
||
/* ═══════ 消息 ═══════ */
|
||
|
||
.msg { display: flex; margin-bottom: 36px; }
|
||
|
||
.msg.user { justify-content: flex-end; margin-top: 72px; }
|
||
|
||
.bubble {
|
||
background: var(--bubble);
|
||
border-radius: 16px 16px 5px 16px;
|
||
padding: 11px 18px;
|
||
font-size: 15.5px;
|
||
max-width: 72%;
|
||
}
|
||
|
||
.msg.ai { align-items: flex-start; }
|
||
|
||
.msg-avatar {
|
||
flex-shrink: 0;
|
||
width: 28px;
|
||
height: 28px;
|
||
margin: 6px 16px 0 0;
|
||
color: var(--text);
|
||
}
|
||
|
||
.msg-body { flex: 1; min-width: 0; }
|
||
.msg-body > p + p { margin-top: 14px; }
|
||
.msg-body > p + .shot,
|
||
.msg-body > p + .switchboard,
|
||
.msg-body > p + .table-wrap,
|
||
.msg-body > p + .plain-list,
|
||
.msg-body > p + .cap-list,
|
||
.msg-body > p + .install,
|
||
.msg-body > p + .doc-list { margin-top: 20px; }
|
||
|
||
.note { font-size: 13.5px; color: var(--text-2); margin-top: 16px; }
|
||
|
||
/* 产品截图框 */
|
||
.shot {
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
box-shadow: 0 2px 14px rgba(33, 29, 22, 0.05);
|
||
margin: 20px 0 4px;
|
||
}
|
||
|
||
.shot-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 9px 14px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg);
|
||
}
|
||
|
||
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
|
||
.shot-bar i:first-child { background: #e5a19a; }
|
||
|
||
.shot-bar span {
|
||
margin-left: 8px;
|
||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||
font-size: 11.5px;
|
||
color: var(--text-2);
|
||
}
|
||
|
||
.shot img { display: block; width: 100%; }
|
||
|
||
.shot-placeholder {
|
||
min-height: 160px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-style: dashed;
|
||
box-shadow: none;
|
||
background: transparent;
|
||
}
|
||
|
||
.shot-placeholder span { font-size: 13px; color: var(--text-2); }
|
||
|
||
/* ═══════ 四组开关 ═══════ */
|
||
|
||
.switchboard {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 22px 24px;
|
||
}
|
||
|
||
.sw-row {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.sw-row + .sw-row { border-top: 1px solid var(--border); }
|
||
|
||
.sw-label {
|
||
width: 64px;
|
||
flex-shrink: 0;
|
||
font-size: 13px;
|
||
color: var(--text-2);
|
||
}
|
||
|
||
.sw-pill {
|
||
font: inherit;
|
||
font-size: 13.5px;
|
||
padding: 5px 15px;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--border);
|
||
background: transparent;
|
||
color: var(--text-2);
|
||
cursor: pointer;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.sw-pill:hover { border-color: var(--text-2); color: var(--text); }
|
||
|
||
.sw-pill.on {
|
||
background: var(--text);
|
||
border-color: var(--text);
|
||
color: var(--bg);
|
||
}
|
||
|
||
/* verdict：等宽输出块，无任何装饰竖条 */
|
||
.verdict {
|
||
width: 100%;
|
||
margin-top: 14px;
|
||
background: var(--code-bg);
|
||
color: var(--code-text);
|
||
border-radius: 10px;
|
||
padding: 16px 20px;
|
||
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
|
||
font-size: 12.8px;
|
||
line-height: 1.8;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.verdict .v-dim { color: rgba(242, 237, 226, 0.45); }
|
||
.verdict .v-warn { color: #e0a899; }
|
||
|
||
/* ═══════ 安全表格 ═══════ */
|
||
|
||
.table-wrap {
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
}
|
||
|
||
table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||
|
||
th {
|
||
text-align: left;
|
||
font-weight: 500;
|
||
font-size: 12.5px;
|
||
color: var(--text-2);
|
||
padding: 12px 18px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg);
|
||
}
|
||
|
||
td { padding: 13px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
|
||
tbody tr:last-child td { border-bottom: none; }
|
||
td:first-child { font-weight: 600; white-space: nowrap; }
|
||
td:nth-child(2) { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
|
||
|
||
.dot {
|
||
display: inline-block;
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
margin-right: 8px;
|
||
vertical-align: 1px;
|
||
}
|
||
|
||
.dot.ok { background: var(--ok); }
|
||
.dot.warn { background: var(--warn); }
|
||
.dot.untested { background: var(--untested); }
|
||
|
||
/* ═══════ 列表 ═══════ */
|
||
|
||
.plain-list, .cap-list { list-style: none; }
|
||
|
||
.plain-list li {
|
||
padding: 10px 0;
|
||
font-size: 14.5px;
|
||
color: var(--text-2);
|
||
}
|
||
|
||
.plain-list li + li { border-top: 1px solid var(--border); }
|
||
.plain-list strong { color: var(--text); font-weight: 600; margin-right: 4px; }
|
||
|
||
.cap-list li { padding: 16px 0; }
|
||
.cap-list li + li { border-top: 1px solid var(--border); }
|
||
|
||
.cap-list strong { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
|
||
.cap-list span { display: block; font-size: 14.5px; color: var(--text-2); }
|
||
|
||
.beta {
|
||
font-style: normal;
|
||
font-size: 10.5px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
color: var(--accent);
|
||
border: 1px solid rgba(204, 120, 92, 0.4);
|
||
border-radius: 5px;
|
||
padding: 1.5px 6px;
|
||
margin-left: 6px;
|
||
vertical-align: 2px;
|
||
}
|
||
|
||
/* ═══════ 安装 ═══════ */
|
||
|
||
.install {
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
}
|
||
|
||
.install-tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg);
|
||
}
|
||
|
||
.install-tab {
|
||
font: inherit;
|
||
font-size: 13.5px;
|
||
padding: 11px 22px;
|
||
background: transparent;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
color: var(--text-2);
|
||
cursor: pointer;
|
||
margin-bottom: -1px;
|
||
transition: color 0.15s ease;
|
||
}
|
||
|
||
.install-tab:hover { color: var(--text); }
|
||
.install-tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
|
||
|
||
.install-pane { padding: 4px; }
|
||
.install-pane.hidden { display: none; }
|
||
|
||
.install-pane pre {
|
||
background: var(--code-bg);
|
||
color: var(--code-text);
|
||
border-radius: 10px;
|
||
margin: 12px;
|
||
padding: 18px 20px;
|
||
overflow-x: auto;
|
||
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
|
||
font-size: 13px;
|
||
line-height: 1.85;
|
||
}
|
||
|
||
.install-pane pre code {
|
||
background: transparent;
|
||
padding: 0;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
.install-after { font-size: 13.5px; color: var(--text-2); padding: 0 16px 14px; }
|
||
.install-after code { font-size: 12px; }
|
||
|
||
/* ═══════ 文档目录 ═══════ */
|
||
|
||
.doc-list {
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
}
|
||
|
||
.doc-list a {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 16px;
|
||
padding: 12px 20px;
|
||
color: var(--text);
|
||
font-size: 14.5px;
|
||
border-bottom: 1px solid var(--border);
|
||
transition: background 0.12s ease;
|
||
}
|
||
|
||
.doc-list a:last-child { border-bottom: none; }
|
||
.doc-list a:hover { background: var(--bubble); text-decoration: none; }
|
||
|
||
.doc-list a span {
|
||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||
font-size: 11.5px;
|
||
color: var(--text-2);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.doc-list .beta { margin-left: auto; }
|
||
|
||
/* ═══════ 页脚 ═══════ */
|
||
|
||
.foot {
|
||
margin-top: 96px;
|
||
padding: 36px 0 calc(var(--composer-h) + 40px);
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: var(--text-2);
|
||
}
|
||
|
||
.foot-note { margin-top: 6px; font-size: 12.5px; opacity: 0.75; }
|
||
|
||
/* ═══════ 底部输入栏 ═══════ */
|
||
|
||
.composer {
|
||
position: fixed;
|
||
left: var(--rail-w);
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 40;
|
||
padding: 14px 32px 16px;
|
||
background: linear-gradient(to bottom, rgba(250, 249, 245, 0), var(--bg) 28%);
|
||
}
|
||
|
||
.composer-box {
|
||
max-width: var(--thread-w);
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 10px 12px 10px 16px;
|
||
box-shadow: 0 2px 16px rgba(33, 29, 22, 0.07);
|
||
}
|
||
|
||
.composer-avatar { flex-shrink: 0; width: 24px; height: 24px; color: var(--text); }
|
||
|
||
.composer-box input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
font: inherit;
|
||
font-size: 14.5px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.composer-box input::placeholder { color: var(--text-2); opacity: 0.6; }
|
||
|
||
.composer-send {
|
||
flex-shrink: 0;
|
||
width: 34px;
|
||
height: 34px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
background: var(--text);
|
||
color: var(--bg);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: opacity 0.15s ease;
|
||
}
|
||
|
||
.composer-send:hover { opacity: 0.82; }
|
||
|
||
.composer-send svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 1.8;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
.composer-chips {
|
||
max-width: var(--thread-w);
|
||
margin: 9px auto 0;
|
||
display: flex;
|
||
gap: 7px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.composer-chips span {
|
||
font-size: 11.5px;
|
||
color: var(--text-2);
|
||
border: 1px solid var(--border);
|
||
background: var(--surface);
|
||
border-radius: 999px;
|
||
padding: 3px 11px;
|
||
cursor: default;
|
||
}
|
||
|
||
/* ═══════ 窄屏 ═══════ */
|
||
|
||
@media (max-width: 720px) {
|
||
:root { --rail-w: 0px; --composer-h: 118px; }
|
||
|
||
.rail {
|
||
inset: 0 0 auto 0;
|
||
width: auto;
|
||
height: 52px;
|
||
flex-direction: row;
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 0 12px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.rail-logo { margin-bottom: 0; margin-right: 6px; }
|
||
.rail-spacer { display: none; }
|
||
.rail-tip { display: none; }
|
||
.rail-item { flex-shrink: 0; }
|
||
|
||
.thread { margin-left: 0; padding: 52px 20px 0; }
|
||
.opening { min-height: 62vh; }
|
||
.opening-line { font-size: 26px; }
|
||
.msg-avatar { margin-right: 12px; }
|
||
.bubble { max-width: 88%; }
|
||
.composer { left: 0; padding: 12px 16px 12px; }
|
||
.sw-label { width: 100%; margin-bottom: 2px; }
|
||
td:nth-child(2) { white-space: normal; }
|
||
}
|