refactor: monorepo
This commit is contained in:
Simon
204
packages/website/src/index.css
Normal file
204
packages/website/src/index.css
Normal file
@@ -0,0 +1,204 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* 启用 class-based dark mode for Tailwind v4 */
|
||||
@variant dark (.dark &);
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
/* 主题色渐变 */
|
||||
--theme-color-1: rgb(88, 192, 252);
|
||||
--theme-color-2: rgb(189, 69, 251);
|
||||
}
|
||||
|
||||
/* class-based dark mode - 应用到 html.dark */
|
||||
html.dark,
|
||||
:root.dark {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
|
||||
/* 同时支持系统偏好 */
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
html:not(.light),
|
||||
:root:not(.light) {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
} */
|
||||
|
||||
/* 添加 Tailwind 自定义颜色 */
|
||||
@theme {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* 确保文档页面标题在暗色模式下可见 - 只针对 prose 内的标题 */
|
||||
.prose h1,
|
||||
.prose h2,
|
||||
.prose h3,
|
||||
.prose h4,
|
||||
.prose h5,
|
||||
.prose h6 {
|
||||
color: rgba(23, 23, 23, 0.85);
|
||||
}
|
||||
|
||||
.dark .prose h1,
|
||||
.dark .prose h2,
|
||||
.dark .prose h3,
|
||||
.dark .prose h4,
|
||||
.dark .prose h5,
|
||||
.dark .prose h6 {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
color: #171717;
|
||||
}
|
||||
|
||||
.dark table,
|
||||
.dark th,
|
||||
.dark td {
|
||||
color: #ededed;
|
||||
}
|
||||
|
||||
/* 文档页深色模式优化 */
|
||||
.dark .prose {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) .prose {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
} */
|
||||
|
||||
.dark .dark\:prose-invert {
|
||||
--tw-prose-body: rgba(255, 255, 255, 0.7);
|
||||
--tw-prose-headings: rgba(255, 255, 255, 0.95);
|
||||
--tw-prose-lead: rgba(255, 255, 255, 0.7);
|
||||
--tw-prose-links: rgba(147, 197, 253, 0.9);
|
||||
--tw-prose-bold: rgba(255, 255, 255, 0.9);
|
||||
--tw-prose-counters: rgba(255, 255, 255, 0.6);
|
||||
--tw-prose-bullets: rgba(255, 255, 255, 0.5);
|
||||
--tw-prose-hr: rgba(255, 255, 255, 0.2);
|
||||
--tw-prose-quotes: rgba(255, 255, 255, 0.8);
|
||||
--tw-prose-quote-borders: rgba(255, 255, 255, 0.3);
|
||||
--tw-prose-captions: rgba(255, 255, 255, 0.6);
|
||||
--tw-prose-code: rgba(255, 255, 255, 0.9);
|
||||
--tw-prose-pre-code: rgba(255, 255, 255, 0.95);
|
||||
--tw-prose-pre-bg: rgba(0, 0, 0, 0.5);
|
||||
--tw-prose-th-borders: rgba(255, 255, 255, 0.3);
|
||||
--tw-prose-td-borders: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) .dark\:prose-invert {
|
||||
--tw-prose-body: rgba(255, 255, 255, 0.7);
|
||||
--tw-prose-headings: rgba(255, 255, 255, 0.95);
|
||||
--tw-prose-lead: rgba(255, 255, 255, 0.7);
|
||||
--tw-prose-links: rgba(147, 197, 253, 0.9);
|
||||
--tw-prose-bold: rgba(255, 255, 255, 0.9);
|
||||
--tw-prose-counters: rgba(255, 255, 255, 0.6);
|
||||
--tw-prose-bullets: rgba(255, 255, 255, 0.5);
|
||||
--tw-prose-hr: rgba(255, 255, 255, 0.2);
|
||||
--tw-prose-quotes: rgba(255, 255, 255, 0.8);
|
||||
--tw-prose-quote-borders: rgba(255, 255, 255, 0.3);
|
||||
--tw-prose-captions: rgba(255, 255, 255, 0.6);
|
||||
--tw-prose-code: rgba(255, 255, 255, 0.9);
|
||||
--tw-prose-pre-code: rgba(255, 255, 255, 0.95);
|
||||
--tw-prose-pre-bg: rgba(0, 0, 0, 0.5);
|
||||
--tw-prose-th-borders: rgba(255, 255, 255, 0.3);
|
||||
--tw-prose-td-borders: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
} */
|
||||
|
||||
/* 标题更清晰 */
|
||||
.dark .prose h1,
|
||||
.dark .prose h2,
|
||||
.dark .prose h3,
|
||||
.dark .prose h4 {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) .prose h1,
|
||||
:root:not(.light) .prose h2,
|
||||
:root:not(.light) .prose h3,
|
||||
:root:not(.light) .prose h4 {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
} */
|
||||
|
||||
/* 链接更清晰 */
|
||||
.dark .prose a {
|
||||
color: rgba(147, 197, 253, 0.9);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) .prose a {
|
||||
color: rgba(147, 197, 253, 0.9);
|
||||
}
|
||||
} */
|
||||
|
||||
/* 代码块背景更黑 */
|
||||
.dark .prose pre {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) .prose pre {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
} */
|
||||
|
||||
/* 表格样式 */
|
||||
.dark .prose table {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) .prose table {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
} */
|
||||
|
||||
.dark .prose thead {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) .prose thead {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
} */
|
||||
|
||||
.dark .prose tbody tr {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root:not(.light) .prose tbody tr {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
} */
|
||||
|
||||
/* 隐藏滚动条，但保持滚动功能 */
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
Reference in New Issue
Block a user