KimiSwitch Dev
3fbd70932c
- 多页路由：首页 / 功能 / 更新日志 / 下载（HashRouter，适配 GitHub Pages） - 中英文切换（zh/en 双语文案 + localStorage 记忆） - Kimi 品牌配色（中性灰 + 蓝）+ 科技风（网格底纹 / 辉光按钮 / 渐变强调词） - 更新日志页：运行时同步 GitHub Releases，localStorage 缓存 1h，网络失败回退内置列表 - 功能页 8 张截图卡片；下载页含自动更新说明 - 修复资源路径 404（asset() + %BASE_URL%）；自托管 Inter/Fira Code 字体
102 lines
2.8 KiB
CSS
102 lines
2.8 KiB
CSS
@import "@fontsource/inter/400.css";
|
|
@import "@fontsource/inter/500.css";
|
|
@import "@fontsource/inter/600.css";
|
|
@import "@fontsource/inter/700.css";
|
|
@import "@fontsource/inter/800.css";
|
|
@import "@fontsource/fira-code/400.css";
|
|
@import "@fontsource/fira-code/500.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Design tokens — Kimi brand: neutral gray + blue accent (matches the app UI).
|
|
Light is the default; dark follows prefers-color-scheme. */
|
|
@layer base {
|
|
:root {
|
|
--background: 240 11% 97%;
|
|
--foreground: 240 9% 11%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 9% 11%;
|
|
--muted: 240 6% 94%;
|
|
--muted-foreground: 220 9% 46%;
|
|
--accent: 240 6% 94%;
|
|
--accent-foreground: 240 9% 11%;
|
|
--border: 240 6% 90%;
|
|
--primary: 221 83% 53%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--ring: 221 83% 53%;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: 222 47% 6%;
|
|
--foreground: 220 20% 92%;
|
|
--card: 222 32% 10%;
|
|
--card-foreground: 220 20% 92%;
|
|
--muted: 222 25% 14%;
|
|
--muted-foreground: 220 12% 62%;
|
|
--accent: 222 25% 14%;
|
|
--accent-foreground: 220 20% 92%;
|
|
--border: 222 22% 17%;
|
|
--primary: 217 91% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--ring: 217 91% 60%;
|
|
}
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
}
|
|
/* 科技风底纹：固定网格线，极低透明度，不干扰阅读 */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(to right, hsl(var(--primary) / 0.05) 1px, transparent 1px),
|
|
linear-gradient(to bottom, hsl(var(--primary) / 0.05) 1px, transparent 1px);
|
|
background-size: 44px 44px;
|
|
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 75%);
|
|
}
|
|
#root {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.container-page {
|
|
@apply mx-auto w-full max-w-6xl px-6;
|
|
}
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-medium transition-colors;
|
|
}
|
|
.btn-primary {
|
|
@apply btn bg-primary text-primary-foreground hover:opacity-90;
|
|
box-shadow: 0 0 20px hsl(var(--primary) / 0.35);
|
|
}
|
|
.btn-ghost {
|
|
@apply btn border border-border text-foreground hover:bg-accent;
|
|
}
|
|
.card {
|
|
@apply rounded-xl border border-border bg-card p-6 transition-shadow;
|
|
}
|
|
.card:hover {
|
|
box-shadow: 0 0 28px hsl(var(--primary) / 0.12);
|
|
}
|
|
/* 截图容器：限定最大宽高，避免撑满页面 */
|
|
.screenshot {
|
|
@apply overflow-hidden rounded-xl border border-border bg-muted;
|
|
box-shadow: 0 0 36px hsl(var(--primary) / 0.1);
|
|
}
|
|
.screenshot > img {
|
|
@apply block h-auto w-full;
|
|
}
|
|
}
|