TermiNexus
34fa817a31
设计 token 对齐 PyPI（白底、系统无衬线、#006dad 链接蓝、#e1e3e5 细灰边框、6px 小圆角），移除 mono 字体类与 --font-mono，仅代码内容保留等宽。 ProjectView 重排为 PyPI 包页版式：主栏包名/说明/安装命令/README，右栏元数据、依赖与版本历史卡片（浅灰标题带），首屏进入即展示骨架 loading，README 为空不再出现占位文案（改由后端合成）。 i18n 同步清理未用词条并新增 project.meta。
344 lines
7.1 KiB
CSS
344 lines
7.1 KiB
CSS
/* ============================================================
|
||
Venom 官网 · 设计系统
|
||
对齐 PyPI 观感：白底、系统无衬线字体、蓝色链接、细灰边框、小圆角
|
||
============================================================ */
|
||
|
||
:root {
|
||
/* 色板 —— PyPI 风格 */
|
||
--bg: #ffffff;
|
||
--bg-soft: #f7f8fa;
|
||
--bg-deep: #0a1a2f; /* 深色区（代码窗 / 页脚），深海军蓝 */
|
||
--panel: rgba(16, 42, 74, 0.03);
|
||
--panel-strong: rgba(16, 42, 74, 0.05);
|
||
--line: rgba(0, 109, 173, 0.35);
|
||
--line-soft: #e1e3e5;
|
||
--text: #212529;
|
||
--text-dim: #4a5560;
|
||
--text-faint: #767f87;
|
||
--accent: #006dad; /* PyPI 链接蓝 */
|
||
--accent-rgb: 0, 109, 173;
|
||
--accent-strong: #00517d;
|
||
--accent-ink: #ffffff;
|
||
--glow: rgba(0, 109, 173, 0.13);
|
||
--shadow-code: 0 26px 60px -30px rgba(10, 26, 47, 0.4);
|
||
|
||
/* 字体：UI 一律系统无衬线（不使用等宽字体）；代码内容才用等宽 */
|
||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||
Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
|
||
--font-code: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
|
||
|
||
/* 代码高亮（深色代码块内使用） */
|
||
--tok-kw: #ff7b72;
|
||
--tok-str: #a5d6ff;
|
||
--tok-num: #79c0ff;
|
||
--tok-type: #ffa657;
|
||
--tok-fn: #7ab8ff;
|
||
--tok-cmt: #6b83a0;
|
||
--tok-punc: #8fa4bc;
|
||
--tok-plain: #d6e2f2;
|
||
|
||
--radius: 6px;
|
||
--radius-sm: 4px;
|
||
--container: 1140px;
|
||
--nav-h: 66px;
|
||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
/* 横向裁剪放在 html（根元素）上直接对视口生效：
|
||
clip 不会把根元素变成滚动容器，Lenis 仍能接管纵向滚动；
|
||
前置的 hidden 是不支持 clip 的浏览器的回退（放在 body 上则会把 body 的 overflow-y 算成 auto，
|
||
让 Lenis 的 allowNestedScroll 误判 body 为嵌套滚动源）。 */
|
||
overflow-x: hidden;
|
||
overflow-x: clip;
|
||
scroll-behavior: smooth;
|
||
scroll-padding-top: calc(var(--nav-h) + 12px);
|
||
}
|
||
|
||
/* Lenis 接管滚动时关闭原生平滑，避免二次缓动叠加；锚点落位偏移由 Lenis anchors.offset 负责 */
|
||
html.lenis {
|
||
scroll-behavior: auto;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--font-sans);
|
||
font-size: 16px;
|
||
line-height: 1.7;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--accent);
|
||
color: var(--accent-ink);
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
img,
|
||
svg {
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
|
||
button {
|
||
font: inherit;
|
||
background: none;
|
||
border: none;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 滚动条 */
|
||
::-webkit-scrollbar {
|
||
width: 11px;
|
||
height: 11px;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: #c2d3e6;
|
||
border-radius: 6px;
|
||
border: 3px solid var(--bg);
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #9ab4cd;
|
||
}
|
||
|
||
/* ------- 版式工具 ------- */
|
||
.container {
|
||
width: min(var(--container), 100% - 48px);
|
||
margin-inline: auto;
|
||
}
|
||
|
||
/* 区块骨架：每个 section 一个职责 */
|
||
.section {
|
||
padding: clamp(5rem, 10vw, 8.5rem) 0;
|
||
position: relative;
|
||
}
|
||
|
||
.eyebrow {
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.18em;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.eyebrow::before {
|
||
content: '';
|
||
width: 26px;
|
||
height: 1px;
|
||
background: var(--accent);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(1.9rem, 4vw, 2.9rem);
|
||
font-weight: 650;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.14;
|
||
margin: 18px 0 14px;
|
||
}
|
||
|
||
.section-sub {
|
||
color: var(--text-dim);
|
||
max-width: 56ch;
|
||
font-size: 1.02rem;
|
||
}
|
||
|
||
/* ------- 按钮 ------- */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
padding: 12px 22px;
|
||
border-radius: 999px;
|
||
font-weight: 600;
|
||
font-size: 0.98rem;
|
||
transition: transform 0.22s var(--ease-out), box-shadow 0.25s var(--ease-out),
|
||
background 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
|
||
will-change: transform;
|
||
}
|
||
|
||
.btn:active {
|
||
transform: scale(0.97);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--accent);
|
||
color: var(--accent-ink);
|
||
box-shadow: 0 0 0 1px var(--accent), 0 10px 26px -14px rgba(var(--accent-rgb), 0.7);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--accent-strong);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 0 0 1px var(--accent-strong), 0 16px 34px -14px rgba(var(--accent-rgb), 0.8);
|
||
}
|
||
|
||
.btn-ghost {
|
||
border: 1px solid var(--line-soft);
|
||
color: var(--text);
|
||
background: transparent;
|
||
}
|
||
|
||
.btn-ghost:hover {
|
||
border-color: var(--line);
|
||
background: rgba(var(--accent-rgb), 0.06);
|
||
color: var(--accent-strong);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* ------- 进场 / 滚动揭示 ------- */
|
||
@keyframes riseIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(26px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes caretBlink {
|
||
0%,
|
||
48% {
|
||
opacity: 1;
|
||
}
|
||
50%,
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
[data-reveal] {
|
||
opacity: 0;
|
||
transform: translateY(26px);
|
||
transition: opacity 0.8s ease, transform 0.85s var(--ease-out);
|
||
transition-delay: var(--reveal-delay, 0ms);
|
||
}
|
||
|
||
[data-reveal].in {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
/* 代码块基础（页面上保留深色代码窗，形成浅色页的对比锚点） */
|
||
.code-win {
|
||
--line-soft: rgba(255, 255, 255, 0.08);
|
||
--text-faint: #6f88a0;
|
||
background: var(--bg-deep);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-code);
|
||
}
|
||
|
||
.code-win__bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
padding: 11px 16px;
|
||
border-bottom: 1px solid var(--line-soft);
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.code-win__dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: #35485e;
|
||
}
|
||
|
||
.code-win__dot:nth-child(1) {
|
||
background: #d2644f;
|
||
}
|
||
.code-win__dot:nth-child(2) {
|
||
background: #d0a542;
|
||
}
|
||
.code-win__dot:nth-child(3) {
|
||
background: #3e8f6c;
|
||
}
|
||
|
||
.code-win__file {
|
||
margin-left: auto;
|
||
font-size: 0.72rem;
|
||
color: var(--text-faint);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.code-win pre {
|
||
padding: 20px 22px 22px;
|
||
overflow-x: auto;
|
||
font-family: var(--font-code);
|
||
font-size: 0.86rem;
|
||
line-height: 1.75;
|
||
color: var(--tok-plain);
|
||
tab-size: 4;
|
||
}
|
||
|
||
.code-win code {
|
||
display: block;
|
||
min-width: max-content;
|
||
}
|
||
|
||
.tok-kw { color: var(--tok-kw); }
|
||
.tok-str { color: var(--tok-str); }
|
||
.tok-num { color: var(--tok-num); }
|
||
.tok-type { color: var(--tok-type); }
|
||
.tok-fn { color: var(--tok-fn); }
|
||
.tok-cmt { color: var(--tok-cmt); font-style: italic; }
|
||
.tok-punc { color: var(--tok-punc); }
|
||
.tok-plain { color: var(--tok-plain); }
|
||
|
||
.caret {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 1.05em;
|
||
margin-left: 3px;
|
||
vertical-align: text-bottom;
|
||
background: var(--accent);
|
||
animation: caretBlink 1.1s steps(1) infinite;
|
||
}
|
||
|
||
@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;
|
||
}
|
||
[data-reveal] {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|