Blizzard
6334dccf4a
- 全局隐藏滚动条（web + admin），保留正常滚动 - admin 顶栏改侧边栏导航（仪表盘/文章），响应式移动端抽屉 - 路由重构：首页→仪表盘，文章列表移到 /posts - 仪表盘页：文章总数/已发布/草稿统计卡片 + 最近更新列表 - 后端 GET /api/admin/stats Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
191 lines
4.2 KiB
CSS
191 lines
4.2 KiB
CSS
@import "tailwindcss";
|
||
@plugin "@tailwindcss/typography";
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
/* ── 设计 token（品牌改版 v2：跟随 logo）────────────────
|
||
霓虹数据流 logo：青 #34E5E0 → 蓝 #3B82F6 → 紫 #A855F7；
|
||
强调色取青蓝段，紫色只在 logo 与品牌渐变里出现；
|
||
中性色向冷蓝偏移，终端窗为深岩蓝底。 */
|
||
:root {
|
||
--ground: #f5f7f9;
|
||
--surface: #ffffff;
|
||
--ink: #151c24;
|
||
--ink-2: #526069;
|
||
--ink-3: #8595a0;
|
||
--hairline: #e0e7ec;
|
||
--hairline-strong: #c6d2da;
|
||
--accent: #0284c7;
|
||
--accent-ink: #075985;
|
||
--accent-soft: #e0f2fe;
|
||
--code-bg: #ebf1f5;
|
||
--term-bg: #0e1620;
|
||
--term-ink: #c9e4f5;
|
||
--brand-g1: #0891b2;
|
||
--brand-g2: #2563eb;
|
||
--brand-g3: #9333ea;
|
||
}
|
||
|
||
.dark {
|
||
--ground: #0b1117;
|
||
--surface: #111925;
|
||
--ink: #e6edf3;
|
||
--ink-2: #93a6b4;
|
||
--ink-3: #62737f;
|
||
--hairline: #1f2c38;
|
||
--hairline-strong: #32434f;
|
||
--accent: #38bdf8;
|
||
--accent-ink: #7dd3fc;
|
||
--accent-soft: #0b3049;
|
||
--code-bg: #14202b;
|
||
--term-bg: #0a121b;
|
||
--term-ink: #bfe3f7;
|
||
--brand-g1: #22d3ee;
|
||
--brand-g2: #60a5fa;
|
||
--brand-g3: #c084fc;
|
||
}
|
||
|
||
@theme inline {
|
||
--color-ground: var(--ground);
|
||
--color-surface: var(--surface);
|
||
--color-ink: var(--ink);
|
||
--color-ink-2: var(--ink-2);
|
||
--color-ink-3: var(--ink-3);
|
||
--color-hairline: var(--hairline);
|
||
--color-hairline-strong: var(--hairline-strong);
|
||
--color-accent: var(--accent);
|
||
--color-accent-ink: var(--accent-ink);
|
||
--color-accent-soft: var(--accent-soft);
|
||
--color-code: var(--code-bg);
|
||
--color-term: var(--term-bg);
|
||
--color-term-ink: var(--term-ink);
|
||
|
||
--font-sans: -apple-system, "PingFang SC", "Hiragino Sans GB",
|
||
"Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
|
||
monospace;
|
||
}
|
||
|
||
html {
|
||
background: var(--ground);
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
@apply bg-ground text-ink font-sans antialiased;
|
||
font-size: 16px;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--accent-soft);
|
||
color: var(--accent-ink);
|
||
}
|
||
|
||
/* 全局隐藏滚动条（保留滚动功能） */
|
||
* {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
*::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
display: none;
|
||
}
|
||
|
||
/* 品牌渐变文字（logo 同源：青→蓝→紫），克制使用 */
|
||
.text-brand-gradient {
|
||
background: linear-gradient(
|
||
92deg,
|
||
var(--brand-g1),
|
||
var(--brand-g2) 55%,
|
||
var(--brand-g3)
|
||
);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
/* 文章排版 — prose 对齐设计 token */
|
||
.prose-site {
|
||
--tw-prose-body: var(--ink-2);
|
||
--tw-prose-headings: var(--ink);
|
||
--tw-prose-links: var(--accent-ink);
|
||
--tw-prose-bold: var(--ink);
|
||
--tw-prose-counters: var(--ink-3);
|
||
--tw-prose-bullets: var(--hairline-strong);
|
||
--tw-prose-hr: var(--hairline);
|
||
--tw-prose-quotes: var(--ink-2);
|
||
--tw-prose-quote-borders: var(--accent);
|
||
--tw-prose-code: var(--accent-ink);
|
||
--tw-prose-pre-bg: var(--term-bg);
|
||
--tw-prose-pre-code: var(--term-ink);
|
||
--tw-prose-th-borders: var(--hairline-strong);
|
||
--tw-prose-td-borders: var(--hairline);
|
||
--tw-prose-captions: var(--ink-3);
|
||
}
|
||
.prose-site :where(code):not(:where(pre code))::before,
|
||
.prose-site :where(code):not(:where(pre code))::after {
|
||
content: none;
|
||
}
|
||
.prose-site :where(code):not(:where(pre code)) {
|
||
background: var(--code-bg);
|
||
border-radius: 4px;
|
||
padding: 2px 6px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 终端光标 */
|
||
@keyframes caret-blink {
|
||
50% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
.caret-blink {
|
||
animation: caret-blink 1.1s steps(1) infinite;
|
||
}
|
||
|
||
/* 滚动进场（配合 Reveal 组件） */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(16px);
|
||
transition:
|
||
opacity 0.6s ease,
|
||
transform 0.6s ease;
|
||
}
|
||
.reveal-in {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
/* 终端事件流：逐行浮现 */
|
||
@keyframes term-line-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(6px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
.term-line {
|
||
opacity: 0;
|
||
animation: term-line-in 0.45s ease forwards;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.caret-blink,
|
||
.term-line {
|
||
animation: none;
|
||
}
|
||
.term-line {
|
||
opacity: 1;
|
||
}
|
||
.reveal {
|
||
opacity: 1;
|
||
transform: none;
|
||
transition: none;
|
||
}
|
||
}
|