From cba026cbf48885d623e85dc430d14292e0916620 Mon Sep 17 00:00:00 2001 From: lilingfengdev Date: Tue, 25 Nov 2025 11:47:21 +0800 Subject: [PATCH 01/14] feat: new theme --- docusaurus.config.ts | 16 + src/css/ad.css | 86 +-- src/css/announcement.css | 52 +- src/css/base/theme.css | 168 ++++- src/css/base/typography.css | 275 ++++++- src/css/base/variables.css | 169 ++++- src/css/components/alert.css | 357 +++++++++- src/css/components/button.css | 118 ++- src/css/components/card.css | 269 ++++++- src/css/components/code.css | 325 ++++++++- src/css/components/footer.css | 125 +++- src/css/components/navbar.css | 386 +++++++--- src/css/components/sidebar.css | 192 ++++- src/css/components/table.css | 124 +++- src/css/custom.css | 22 + src/css/github.css | 116 ++- src/css/qwe.css | 1143 ------------------------------ src/css/utilities/animations.css | 253 ++++++- src/css/utilities/responsive.css | 124 +++- src/css/utilities/scrollbar.css | 84 ++- src/css/utilities/search.css | 202 ++++++ src/pages/index.module.scss | 524 +++++++++++--- src/pages/index.tsx | 79 +-- 23 files changed, 3497 insertions(+), 1712 deletions(-) delete mode 100644 src/css/qwe.css diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 637c48c21..f903d9ed0 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -172,6 +172,14 @@ const config: Config = { href: "/favicon.ico" } }, + { + tagName: "link", + attributes: { + rel: "preconnect", + href: "https://fontsapi.zeoseven.com", + crossOrigin: "anonymous" + } + }, { tagName: "link", attributes: { @@ -179,6 +187,14 @@ const config: Config = { href: "https://D1KV1BYF3B-dsn.algolia.net", crossOrigin: "anonymous" } + }, + { + tagName: "link", + attributes: { + rel: "preconnect", + href: "https://giscus.app", + crossOrigin: "anonymous" + } } ], diff --git a/src/css/ad.css b/src/css/ad.css index def710302..758af8262 100644 --- a/src/css/ad.css +++ b/src/css/ad.css @@ -1,4 +1,11 @@ -/* 广告容器样式 */ +/* ====================================== + NitWikit 广告/外部链接样式 + 与主题系统统一 +====================================== */ + +/* ====================================== + 广告容器 +====================================== */ .extern-container.mobile-extern { display: flex; justify-content: center; @@ -10,80 +17,59 @@ text-align: center; } -/* 广告链接样式 - 移动端样式（简洁） */ +/* ====================================== + 广告链接项 +====================================== */ .extern-item { margin: 0 !important; font-weight: 500; display: inline-flex !important; align-items: center; justify-content: center; - transition: all 0.2s ease; - font-size: 0.9rem; + transition: all var(--transition-fast); + font-size: 0.875rem; color: var(--primary); white-space: nowrap; - padding: 0.35rem 0.8rem; - border-radius: 4px; - background-color: transparent; - border: none; + padding: 0.375rem 0.875rem; + border-radius: var(--radius-md); + background-color: var(--primary-alpha-5); + border: 1px solid var(--primary-alpha-border); } .extern-item:hover { - opacity: 0.9; text-decoration: none !important; - background-color: transparent; + background-color: var(--primary-alpha-10); + border-color: var(--primary); color: var(--primary-dark); - transform: translateY(-1px); } -/* 移除小点 */ +/* ====================================== + 移除默认装饰 +====================================== */ .extern-item::before { - content: ""; - margin-right: 0; + content: none; + display: none; } -/* PC端样式（更丰富） */ +/* ====================================== + 桌面端样式增强 +====================================== */ @media screen and (min-width: 996px) { .extern-item { - border: 1px solid var(--primary); - background-color: rgba(37, 160, 110, 0.08); - padding: 0.35rem 0.5rem; - margin: 0 0.4rem !important; - } - - .extern-item:hover { - background-color: rgba(37, 160, 110, 0.15); - border-color: var(--primary-dark); - } - - .extern-item::before { - content: "🔹"; - margin-right: 0.3em; - opacity: 0.7; - font-size: 0.85em; + padding: 0.375rem 1rem; } } -/* 暗色模式 */ -html[data-theme="dark"] .extern-item { - background-color: transparent; +/* ====================================== + 暗色模式 +====================================== */ +[data-theme="dark"] .extern-item { + background-color: var(--primary-alpha-10); + border-color: var(--primary-alpha-border); color: var(--primary); - border: none; } -html[data-theme="dark"] .extern-item:hover { - background-color: transparent; +[data-theme="dark"] .extern-item:hover { + background-color: var(--primary-alpha-15); color: var(--primary-light); } - -/* 暗色模式 PC端 */ -@media screen and (min-width: 996px) { - html[data-theme="dark"] .extern-item { - background-color: var(--primary-alpha-bg); - border: 1px solid var(--primary-alpha-border); - } - - html[data-theme="dark"] .extern-item:hover { - background-color: rgba(54, 192, 133, 0.18); - border-color: var(--primary-light); - } -} diff --git a/src/css/announcement.css b/src/css/announcement.css index cc68f90ba..304b95d98 100644 --- a/src/css/announcement.css +++ b/src/css/announcement.css @@ -1,20 +1,50 @@ -/** - * announcement.css - 极简公告横幅样式 - */ +/* ====================================== + NitWikit 公告栏样式 +====================================== */ -/* 公告横幅基础样式 */ +/* ====================================== + 公告栏基础样式 +====================================== */ div[class*="announcementBar"] { - background: #25a06e !important; - color: white !important; + background: var(--primary) !important; + color: var(--slate-950) !important; + font-weight: 500; + font-size: 0.875rem; + padding: 0.5rem 1rem; + border-bottom: none !important; } -/* 超链接样式 */ div[class*="announcementBar"] a { - color: white !important; - text-decoration: underline !important; + color: var(--slate-950) !important; + font-weight: 600; + text-decoration: underline; } div[class*="announcementBar"] a:hover { - color: #e0e0e0 !important; - text-decoration: underline !important; + color: var(--slate-800) !important; +} + +/* ====================================== + 关闭按钮 +====================================== */ +button[class*="closeButton"] { + color: var(--slate-950) !important; + opacity: 0.7; +} + +button[class*="closeButton"]:hover { + opacity: 1; + background: transparent !important; +} + +/* ====================================== + 暗色模式保持一致 +====================================== */ +[data-theme="dark"] div[class*="announcementBar"] { + background: var(--primary) !important; + color: var(--slate-950) !important; +} + +[data-theme="dark"] div[class*="announcementBar"] a { + color: var(--slate-950) !important; } diff --git a/src/css/base/theme.css b/src/css/base/theme.css index f906f239b..de642c6ba 100644 --- a/src/css/base/theme.css +++ b/src/css/base/theme.css @@ -1,21 +1,76 @@ +/* ====================================== + NitWikit 主题系统 - 暗色模式 + 借鉴 Nuxt 深邃暗色设计 +====================================== */ + +/* ====================================== + 暗色模式变量覆盖 +====================================== */ [data-theme="dark"] { - --primary: #36c085; - --primary-dark: #30b77c; - --primary-light: #4fd197; - --text-primary: #f7fafc; - --text-secondary: #e2e8f0; - --bg-light: #1e242c; - --bg-dark: #171e26; - --bg-card: #1e2833; - --bg-footer: #171e26; - --border: #364049; - --ifm-navbar-background-color: rgba(30, 36, 44, 0.98); - --ifm-background-color: var(--bg-dark); + /* 主色调 - 暗色模式稍亮以保持对比 */ + --primary: var(--green-500); + --primary-dark: var(--green-600); + --primary-light: var(--green-400); + /* 暗色模式下文字主色更亮 */ + --primary-text: var(--green-400); + + /* 文字颜色 - 提升对比度 */ + --text-primary: var(--slate-100); + --text-secondary: var(--slate-300); + --text-light: var(--slate-400); + --text-muted: var(--slate-400); + + /* 背景颜色 - 深邃层次 (Nuxt 风格) */ + --bg-base: var(--slate-950); + --bg-light: var(--slate-950); + --bg-muted: var(--slate-900); + --bg-card: var(--slate-900); + --bg-elevated: var(--slate-800); + --bg-dark: var(--slate-950); + --bg-footer: var(--slate-950); + + /* 边框颜色 */ + --border: var(--slate-800); + --border-light: var(--slate-900); + --border-dark: var(--slate-700); + + /* 阴影 - 暗色模式下更柔和 */ + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); + --shadow-glow: 0 0 30px rgba(0, 220, 130, 0.12); + + /* 提示框暗色 - 增强可见度 */ + --alert-info: #60a5fa; + --alert-info-bg: rgba(96, 165, 250, 0.15); + --alert-warning: #fbbf24; + --alert-warning-bg: rgba(251, 191, 36, 0.15); + --alert-danger: #f87171; + --alert-danger-bg: rgba(248, 113, 113, 0.15); + --alert-success: #34d399; + --alert-success-bg: rgba(52, 211, 153, 0.15); + --alert-note: #a78bfa; + --alert-note-bg: rgba(167, 139, 250, 0.15); + + /* Docusaurus 变量覆盖 */ + --ifm-background-color: var(--bg-light); --ifm-background-surface-color: var(--bg-card); + --ifm-navbar-background-color: rgba(2, 6, 23, 0.85); + --ifm-font-color-base: var(--text-primary); + --ifm-heading-color: var(--text-primary); + --ifm-color-primary: var(--primary); --ifm-color-primary-dark: var(--primary-dark); + --ifm-color-primary-light: var(--primary-light); + + --ifm-menu-color: var(--text-secondary); + --ifm-toc-border-color: var(--border); } +/* ====================================== + 亮色模式背景应用 +====================================== */ [data-theme="light"] body, [data-theme="light"] .main-wrapper, [data-theme="light"] .homepage, @@ -29,24 +84,107 @@ background-color: transparent; } +/* ====================================== + 暗色模式背景应用 +====================================== */ [data-theme="dark"] body, [data-theme="dark"] .main-wrapper, [data-theme="dark"] .docMainContainer_gTbr, -[data-theme="dark"] .container, [data-theme="dark"] article, [data-theme="dark"] .theme-doc-markdown { background-color: var(--bg-dark); } +[data-theme="dark"] .container { + background-color: transparent; +} + +/* ====================================== + 区域渐变分割 (Nuxt 风格) +====================================== */ +.section-gradient { + background: linear-gradient( + 180deg, + var(--bg-muted) 0%, + var(--bg-light) 100% + ); + border-top: 1px solid var(--border); +} + +[data-theme="dark"] .section-gradient { + background: linear-gradient( + 180deg, + rgba(15, 23, 42, 0.4) 0%, + var(--bg-dark) 100% + ); +} + +/* ====================================== + 卡片主题适配 +====================================== */ [data-theme="dark"] .card { background-color: var(--bg-card); border-color: var(--border); } [data-theme="dark"] .card:hover { - border-color: rgba(54, 192, 133, 0.3); + border-color: var(--primary-alpha-border); + box-shadow: var(--shadow-glow); } +/* ====================================== + 页脚主题适配 +====================================== */ [data-theme="dark"] .footer__copyright { - border-top-color: rgba(255, 255, 255, 0.05); + border-top-color: var(--border); +} + +/* ====================================== + 代码块主题 +====================================== */ +[data-theme="dark"] pre { + background-color: var(--slate-900) !important; +} + +[data-theme="dark"] :not(pre) > code { + background-color: var(--primary-alpha-15); + color: var(--primary-light); +} + +/* ====================================== + 滚动条主题 +====================================== */ +[data-theme="dark"] ::-webkit-scrollbar-thumb { + background: var(--slate-700); +} + +[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { + background: var(--slate-600); +} + +/* ====================================== + 选择文本主题 +====================================== */ +::selection { + background: var(--primary-alpha-20); + color: inherit; +} + +[data-theme="dark"] ::selection { + background: var(--primary-alpha-30); +} + +/* ====================================== + 链接悬停发光效果 +====================================== */ +[data-theme="dark"] a:hover { + text-shadow: 0 0 10px var(--primary-alpha-30); +} + +/* ====================================== + 输入框聚焦发光 +====================================== */ +[data-theme="dark"] input:focus, +[data-theme="dark"] textarea:focus { + box-shadow: 0 0 0 3px var(--primary-alpha-20), var(--shadow-glow); } diff --git a/src/css/base/typography.css b/src/css/base/typography.css index d84c8e78f..18205aeea 100644 --- a/src/css/base/typography.css +++ b/src/css/base/typography.css @@ -1,109 +1,338 @@ -* { +/* ====================================== + NitWikit 排版系统 + 优化中文阅读体验 +====================================== */ + +/* ====================================== + 全局盒模型 +====================================== */ +*, +*::before, +*::after { box-sizing: border-box; } +/* ====================================== + 基础文档样式 +====================================== */ body { - font-family: var(--font-base); + font-family: var(--font-sans); color: var(--text-primary); line-height: 1.6; background-color: var(--bg-light); - transition: background-color var(--transition-base); + transition: background-color var(--transition-base), color var(--transition-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } +/* ====================================== + 文章内容排版 +====================================== */ article { font-size: 1rem; - line-height: 1.7; + line-height: 1.75; + color: var(--text-primary); } +/* ====================================== + 标题层级 +====================================== */ article h1 { font-size: 2.25rem; - margin: 2.5rem 0 1.25rem; + margin: 3rem 0 1.5rem; font-weight: 700; - letter-spacing: -0.02em; + letter-spacing: -0.025em; + line-height: 1.2; + color: var(--ifm-heading-color); border-bottom: 1px solid var(--border); - padding-bottom: 0.5rem; + padding-bottom: 0.75rem; } article h2 { font-size: 1.75rem; - margin: 2rem 0 1rem; + margin: 2.5rem 0 1.25rem; font-weight: 600; + letter-spacing: -0.02em; + line-height: 1.25; + color: var(--ifm-heading-color); } article h3 { - font-size: 1.5rem; - margin: 1.75rem 0 0.75rem; + font-size: 1.375rem; + margin: 2rem 0 1rem; font-weight: 600; + letter-spacing: -0.015em; + line-height: 1.3; + color: var(--ifm-heading-color); } article h4 { - font-size: 1.25rem; + font-size: 1.125rem; + margin: 1.75rem 0 0.75rem; + font-weight: 600; + line-height: 1.4; + color: var(--ifm-heading-color); +} + +article h5 { + font-size: 1rem; margin: 1.5rem 0 0.5rem; font-weight: 600; + line-height: 1.4; + color: var(--ifm-heading-color); +} + +article h6 { + font-size: 0.875rem; + margin: 1.25rem 0 0.5rem; + font-weight: 600; + line-height: 1.4; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; } +/* ====================================== + 段落与文本 +====================================== */ article p { margin-bottom: 1.5rem; + line-height: 1.75; +} + +article strong { + font-weight: 600; + color: var(--text-primary); +} + +article em { + font-style: italic; } +/* ====================================== + 链接样式 +====================================== */ article a { - color: var(--primary); + color: var(--primary-text); font-weight: 500; text-decoration: none; transition: color var(--transition-fast); + border-bottom: 1px solid transparent; } article a:hover { color: var(--primary-dark); - text-decoration: underline; + border-bottom-color: var(--primary-alpha-border); } +/* ====================================== + 图片样式 +====================================== */ article img { border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); max-width: 100%; height: auto; - transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); + display: block; + margin: 1.5rem 0; } +/* 移除悬停缩放效果 */ article img:hover { - transform: scale(1.03); - box-shadow: var(--shadow-md); + transform: none; } +/* ====================================== + 列表样式 +====================================== */ article ul, article ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } +article ul { + list-style-type: disc; +} + +article ol { + list-style-type: decimal; +} + article li { margin-bottom: 0.5rem; + line-height: 1.7; +} + +article li > ul, +article li > ol { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +/* 嵌套列表样式 */ +article ul ul { + list-style-type: circle; +} + +article ul ul ul { + list-style-type: square; +} + +/* ====================================== + 分割线 +====================================== */ +article hr { + border: none; + height: 1px; + background: var(--border); + margin: 2.5rem 0; +} + +/* ====================================== + 引用样式 +====================================== */ +article blockquote { + border-left: 3px solid var(--primary); + background-color: var(--primary-alpha-5); + border-radius: 0 var(--radius-lg) var(--radius-lg) 0; + padding: 1rem 1.5rem; + margin: 1.5rem 0; + font-style: normal; + color: var(--text-primary); } +article blockquote p { + margin-bottom: 0; +} + +article blockquote p + p { + margin-top: 1rem; +} + +/* ====================================== + 响应式排版 +====================================== */ @media (max-width: 996px) { article { - font-size: 0.95rem; + font-size: 0.9375rem; } article h1 { font-size: 2rem; - margin-top: 2rem; + margin-top: 2.5rem; } article h2 { font-size: 1.5rem; - margin-top: 1.5rem; + margin-top: 2rem; } article h3 { font-size: 1.25rem; - margin-top: 1.25rem; + margin-top: 1.75rem; + } + + article h4 { + font-size: 1.0625rem; + margin-top: 1.5rem; + } + + article blockquote { + padding: 0.875rem 1.25rem; + } +} + +@media (max-width: 768px) { + article { + line-height: 1.7; + } + + article p { + margin-bottom: 1.375rem; } - article img:hover { - transform: scale(1.02); + article li { + margin-bottom: 0.4rem; } } + +@media (max-width: 540px) { + article { + font-size: 0.9375rem; + line-height: 1.7; + } + + article h1 { + font-size: 1.75rem; + margin: 2rem 0 1.25rem; + padding-bottom: 0.625rem; + } + + article h2 { + font-size: 1.375rem; + margin: 1.75rem 0 1rem; + } + + article h3 { + font-size: 1.125rem; + margin: 1.5rem 0 0.75rem; + } + + article h4 { + font-size: 1rem; + margin: 1.25rem 0 0.5rem; + } + + article p { + margin-bottom: 1.25rem; + } + + article ul, + article ol { + padding-left: 1.25rem; + margin-bottom: 1.25rem; + } + + article li { + margin-bottom: 0.375rem; + line-height: 1.65; + } + + article li > ul, + article li > ol { + margin-top: 0.375rem; + margin-bottom: 0.375rem; + } + + article blockquote { + padding: 0.75rem 1rem; + margin: 1.25rem 0; + margin-left: -0.5rem; + margin-right: -0.5rem; + } + + article hr { + margin: 2rem 0; + } + + article img { + margin: 1.25rem 0; + border-radius: var(--radius-md); + } +} + +/* ====================================== + 高亮文字工具类 +====================================== */ +.text-primary { + color: var(--primary) !important; +} + +.text-secondary { + color: var(--text-secondary) !important; +} + +.text-muted { + color: var(--text-muted) !important; +} diff --git a/src/css/base/variables.css b/src/css/base/variables.css index 388a01f30..bddff9631 100644 --- a/src/css/base/variables.css +++ b/src/css/base/variables.css @@ -1,53 +1,158 @@ +/* ====================================== + NitWikit 设计系统 - CSS 变量 + 借鉴 Nuxt 设计系统 +====================================== */ + :root { - --primary: #25a06e; - --primary-dark: #1c714e; - --primary-light: #36c085; - --primary-alpha-light: rgba(37, 160, 110, 0.04); - --primary-alpha-medium: rgba(37, 160, 110, 0.08); - --primary-alpha-strong: rgba(37, 160, 110, 0.14); - --primary-alpha-border: rgba(37, 160, 110, 0.6); - --primary-alpha-bg: rgba(37, 160, 110, 0.1); + /* ====================================== + 主色调 - Nuxt Green (完整色阶) + ====================================== */ + --green-50: #EFFDF5; + --green-100: #D9FBE8; + --green-200: #B3F5D1; + --green-300: #75EDAE; + --green-400: #00DC82; + --green-500: #00C16A; + --green-600: #00A155; + --green-700: #007F45; + --green-800: #016538; + --green-900: #0A5331; + --green-950: #052E16; + + /* 主色语义化变量 */ + --primary: var(--green-500); + --primary-dark: var(--green-600); + --primary-darker: var(--green-700); + --primary-light: var(--green-400); + --primary-lighter: var(--green-300); + /* 文字专用主色 - 对比度更高 (WCAG AA) */ + --primary-text: var(--green-600); + + /* 主色透明度变体 (简化) */ + --primary-alpha-5: rgba(0, 220, 130, 0.05); + --primary-alpha-8: rgba(0, 220, 130, 0.08); + --primary-alpha-10: rgba(0, 220, 130, 0.1); + --primary-alpha-15: rgba(0, 220, 130, 0.15); + --primary-alpha-20: rgba(0, 220, 130, 0.2); + --primary-alpha-30: rgba(0, 220, 130, 0.3); + --primary-alpha-border: rgba(0, 220, 130, 0.25); - --text-primary: #1a202c; - --text-secondary: #4a5568; - --text-light: #a0aec0; + /* ====================================== + 中性色 - Slate (完整色阶) + ====================================== */ + --slate-50: #f8fafc; + --slate-100: #f1f5f9; + --slate-200: #e2e8f0; + --slate-300: #cbd5e1; + --slate-400: #94a3b8; + --slate-500: #64748b; + --slate-600: #475569; + --slate-700: #334155; + --slate-800: #1e293b; + --slate-900: #0f172a; + --slate-950: #020617; - --bg-light: #f8f9fa; - --bg-dark: #1a202c; - --bg-card: #f0f2f5; - --bg-footer: #f0f4f8; + /* ====================================== + 语义化颜色 (亮色模式) + ====================================== */ + --text-primary: var(--slate-900); + --text-secondary: var(--slate-700); + --text-light: var(--slate-500); + --text-muted: var(--slate-500); - --border: #e1e4e8; + --bg-base: var(--slate-50); + --bg-light: var(--slate-100); + --bg-muted: var(--slate-200); + --bg-card: #ffffff; + --bg-elevated: #ffffff; + --bg-dark: var(--slate-900); + --bg-footer: var(--slate-100); - --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --border: var(--slate-200); + --border-light: var(--slate-100); + --border-dark: var(--slate-300); + /* ====================================== + 阴影系统 + ====================================== */ + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02); + --shadow-glow: 0 0 20px rgba(0, 220, 130, 0.15); + + /* ====================================== + 圆角系统 + ====================================== */ + --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-2xl: 1rem; + --radius-full: 9999px; - --transition-fast: 0.2s ease; - --transition-base: 0.3s ease; + /* ====================================== + 过渡动画 + ====================================== */ + --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-smooth: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); - --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", - sans-serif; - --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace; + /* ====================================== + 字体系统 + ====================================== */ + --font-sans: 'Public Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, + 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', + system-ui, sans-serif; + --font-mono: 'Maple Mono NF CN', 'JetBrains Mono', 'Fira Code', SFMono-Regular, + Menlo, Monaco, Consolas, 'Liberation Mono', monospace; + /* ====================================== + Docusaurus/Infima 变量映射 + ====================================== */ --ifm-color-primary: var(--primary); --ifm-color-primary-dark: var(--primary-dark); + --ifm-color-primary-darker: var(--primary-darker); --ifm-color-primary-light: var(--primary-light); - --ifm-code-font-size: 95%; - --ifm-font-family-base: var(--font-base); - --ifm-code-font-family: var(--font-mono); - --ifm-navbar-background-color: rgba(255, 255, 255, 0.98); - --ifm-navbar-height: 3.75rem; + --ifm-color-primary-lighter: var(--primary-lighter); + --ifm-color-primary-lightest: #99F2CD; + + --ifm-code-font-size: 90%; + --ifm-font-family-base: var(--font-sans); + --ifm-font-family-monospace: var(--font-mono); + + --ifm-background-color: var(--bg-light); + --ifm-background-surface-color: var(--bg-card); + + --ifm-navbar-background-color: rgba(255, 255, 255, 0.8); + --ifm-navbar-height: 4rem; --ifm-navbar-shadow: none; - --ifm-navbar-padding-vertical: 0.5rem; - --ifm-navbar-padding-horizontal: 1rem; + --ifm-navbar-padding-vertical: 0; + --ifm-navbar-padding-horizontal: 1.5rem; + --ifm-menu-color: var(--text-secondary); --ifm-menu-color-active: var(--primary); - --ifm-menu-color-background-active: var(--primary-alpha-medium); - --ifm-menu-color-background-hover: var(--primary-alpha-light); + --ifm-menu-color-background-active: var(--primary-alpha-10); + --ifm-menu-color-background-hover: var(--primary-alpha-5); + --ifm-toc-border-color: var(--border); --ifm-heading-color: var(--text-primary); + --ifm-font-color-base: var(--text-primary); + + /* ====================================== + 提示框颜色 (亮色模式) + ====================================== */ + --alert-info: #2563eb; + --alert-info-bg: rgba(37, 99, 235, 0.08); + --alert-warning: #d97706; + --alert-warning-bg: rgba(217, 119, 6, 0.08); + --alert-danger: #dc2626; + --alert-danger-bg: rgba(220, 38, 38, 0.08); + --alert-success: #059669; + --alert-success-bg: rgba(5, 150, 105, 0.08); + --alert-note: #7c3aed; + --alert-note-bg: rgba(124, 58, 237, 0.08); } diff --git a/src/css/components/alert.css b/src/css/components/alert.css index d79032926..724380d85 100644 --- a/src/css/components/alert.css +++ b/src/css/components/alert.css @@ -1,47 +1,374 @@ +/* ====================================== + NitWikit 提示框样式 + 渐变背景 + 左侧边框 +====================================== */ + +/* ====================================== + 提示框基础样式 +====================================== */ .alert { border-radius: var(--radius-lg); + border: 1px solid var(--border); border-left-width: 3px; - background-color: var(--bg-card); - box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; - padding: 1rem 1.5rem; + padding: 0.875rem 1rem; + box-shadow: none; + position: relative; + overflow: hidden; +} + +/* ====================================== + 提示框标题 +====================================== */ +.alert__heading { + font-weight: 600; + margin-bottom: 0.375rem; + font-size: 0.875rem; + display: flex; + align-items: center; + gap: 0.375rem; + position: relative; + z-index: 1; } +.alert p { + position: relative; + z-index: 1; + font-size: 0.9375rem; + line-height: 1.6; +} + +/* ====================================== + 信息提示 (Info) +====================================== */ .alert--info { - --ifm-alert-border-color: var(--primary); + border-left-color: var(--alert-info); + background: linear-gradient( + 135deg, + var(--alert-info-bg) 0%, + transparent 70% + ); --ifm-alert-color: var(--text-primary); } +.alert--info .alert__heading { + color: var(--alert-info); +} + +/* ====================================== + 警告提示 (Warning) +====================================== */ .alert--warning { - --ifm-alert-border-color: #f0b429; + border-left-color: var(--alert-warning); + background: linear-gradient( + 135deg, + var(--alert-warning-bg) 0%, + transparent 70% + ); --ifm-alert-color: var(--text-primary); } +.alert--warning .alert__heading { + color: var(--alert-warning); +} + +/* ====================================== + 危险提示 (Danger) +====================================== */ .alert--danger { - --ifm-alert-border-color: #ef4444; + border-left-color: var(--alert-danger); + background: linear-gradient( + 135deg, + var(--alert-danger-bg) 0%, + transparent 70% + ); --ifm-alert-color: var(--text-primary); } +.alert--danger .alert__heading { + color: var(--alert-danger); +} + +/* ====================================== + 成功提示 (Success / Tip) +====================================== */ .alert--success { - --ifm-alert-border-color: #10b981; + border-left-color: var(--alert-success); + background: linear-gradient( + 135deg, + var(--alert-success-bg) 0%, + transparent 70% + ); --ifm-alert-color: var(--text-primary); } -.alert__title { - font-weight: 600; - margin-bottom: 0.5rem; - font-size: 1rem; +.alert--success .alert__heading { + color: var(--alert-success); +} + +/* ====================================== + 次要提示 (Secondary / Note) +====================================== */ +.alert--secondary { + border-left-color: var(--alert-note); + background: linear-gradient( + 135deg, + var(--alert-note-bg) 0%, + transparent 70% + ); + --ifm-alert-color: var(--text-primary); +} + +.alert--secondary .alert__heading { + color: var(--alert-note); } +/* ====================================== + 引用块样式 +====================================== */ blockquote { - border-left: 4px solid var(--primary); - background-color: var(--primary-alpha-light); + border-left: 3px solid var(--primary); + background: linear-gradient( + 135deg, + var(--primary-alpha-8) 0%, + transparent 60% + ); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; - padding: 1.25rem 1.5rem; + padding: 1rem 1.25rem; margin: 1.5rem 0; - font-style: italic; + font-style: normal; + color: var(--text-primary); } blockquote p:last-child { margin-bottom: 0; } + +/* ====================================== + 暗色模式 +====================================== */ +[data-theme="dark"] .alert { + border-color: var(--border); +} + +[data-theme="dark"] .alert--info { + background: linear-gradient( + 135deg, + var(--alert-info-bg) 0%, + transparent 60% + ); +} + +[data-theme="dark"] .alert--info .alert__heading { + color: var(--alert-info); +} + +[data-theme="dark"] .alert--warning { + background: linear-gradient( + 135deg, + var(--alert-warning-bg) 0%, + transparent 60% + ); +} + +[data-theme="dark"] .alert--warning .alert__heading { + color: var(--alert-warning); +} + +[data-theme="dark"] .alert--danger { + background: linear-gradient( + 135deg, + var(--alert-danger-bg) 0%, + transparent 60% + ); +} + +[data-theme="dark"] .alert--danger .alert__heading { + color: var(--alert-danger); +} + +[data-theme="dark"] .alert--success { + background: linear-gradient( + 135deg, + var(--alert-success-bg) 0%, + transparent 60% + ); +} + +[data-theme="dark"] .alert--success .alert__heading { + color: var(--alert-success); +} + +[data-theme="dark"] .alert--secondary { + background: linear-gradient( + 135deg, + var(--alert-note-bg) 0%, + transparent 60% + ); +} + +[data-theme="dark"] .alert--secondary .alert__heading { + color: var(--alert-note); +} + +[data-theme="dark"] blockquote { + background: linear-gradient( + 135deg, + var(--primary-alpha-10) 0%, + transparent 60% + ); +} + +/* ====================================== + 折叠区域样式 +====================================== */ +details { + border: 1px solid var(--border); + border-radius: var(--radius-lg); + margin-bottom: 1.25rem; + overflow: hidden; + background-color: var(--bg-card); + transition: border-color var(--transition-fast); +} + +details:hover { + border-color: var(--primary-alpha-border); +} + +details summary { + padding: 0.75rem 1rem; + font-weight: 500; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + color: var(--text-primary); + transition: background-color var(--transition-fast); + list-style: none; +} + +details summary::-webkit-details-marker { + display: none; +} + +details summary::after { + content: "›"; + font-size: 1.25em; + color: var(--text-light); + transition: transform var(--transition-fast), color var(--transition-fast); +} + +details[open] summary::after { + transform: rotate(90deg); + color: var(--primary); +} + +details summary:hover { + background: linear-gradient( + 135deg, + var(--primary-alpha-5) 0%, + transparent 100% + ); +} + +details[open] summary { + border-bottom: 1px solid var(--border); +} + +details > *:not(summary) { + padding: 1rem; +} + +[data-theme="dark"] details { + background-color: var(--bg-card); + border-color: var(--border); +} + +/* ====================================== + 移动端响应式 +====================================== */ +@media (max-width: 768px) { + .alert { + padding: 0.75rem 0.875rem; + margin-bottom: 1.25rem; + border-radius: var(--radius-md); + } + + .alert__heading { + font-size: 0.8125rem; + margin-bottom: 0.25rem; + } + + .alert p { + font-size: 0.875rem; + line-height: 1.55; + } + + blockquote { + padding: 0.875rem 1rem; + margin: 1.25rem 0; + } + + details { + margin-bottom: 1rem; + } + + details summary { + padding: 0.625rem 0.875rem; + /* 确保触摸目标足够大 */ + min-height: 44px; + display: flex; + align-items: center; + } + + details > *:not(summary) { + padding: 0.875rem; + } +} + +@media (max-width: 540px) { + .alert { + padding: 0.625rem 0.75rem; + margin-bottom: 1rem; + /* 移动端略微突破容器边缘 */ + margin-left: -0.25rem; + margin-right: -0.25rem; + border-radius: var(--radius-sm); + } + + .alert__heading { + font-size: 0.75rem; + gap: 0.25rem; + } + + .alert p { + font-size: 0.8125rem; + } + + blockquote { + padding: 0.75rem 0.875rem; + margin: 1rem 0; + margin-left: -0.25rem; + margin-right: -0.25rem; + border-radius: 0 var(--radius-md) var(--radius-md) 0; + } + + details { + margin-left: -0.25rem; + margin-right: -0.25rem; + border-radius: var(--radius-md); + } + + details summary { + padding: 0.625rem 0.75rem; + font-size: 0.9375rem; + } + + details > *:not(summary) { + padding: 0.75rem; + } + + details summary::after { + font-size: 1.125em; + } +} \ No newline at end of file diff --git a/src/css/components/button.css b/src/css/components/button.css index 3131d11c4..5fa7672bb 100644 --- a/src/css/components/button.css +++ b/src/css/components/button.css @@ -1,39 +1,123 @@ +/* ====================================== + NitWikit 按钮样式 + 简洁设计 + 主题适配 +====================================== */ + +/* ====================================== + 按钮基础样式 +====================================== */ .button { - border-radius: var(--radius-md); - font-weight: 600; - transition: all var(--transition-base); - padding: 0.75rem 1.5rem; - border: none; display: inline-flex; align-items: center; justify-content: center; + padding: 0.625rem 1.25rem; + border-radius: var(--radius-md); + font-weight: 600; + font-size: 0.9375rem; + text-decoration: none; cursor: pointer; + transition: all var(--transition-fast); + border: none; + gap: 0.5rem; } +/* ====================================== + 主按钮 +====================================== */ .button--primary { background-color: var(--primary); - color: white; - box-shadow: 0 1px 3px rgba(37, 160, 110, 0.2); + color: var(--slate-950) !important; } .button--primary:hover { + background-color: var(--primary-light); + text-decoration: none; +} + +.button--primary:active { background-color: var(--primary-dark); - transform: translateY(-2px); - box-shadow: 0 4px 8px rgba(37, 160, 110, 0.3); } +/* ====================================== + 次要按钮 +====================================== */ .button--secondary { - background-color: var(--primary-alpha-strong); - color: var(--primary); + background-color: transparent; + color: var(--text-primary) !important; + border: 1px solid var(--border); } .button--secondary:hover { - background-color: var(--primary-alpha-medium); - transform: translateY(-2px); + background-color: var(--bg-muted); + border-color: var(--border-dark); + text-decoration: none; +} + +/* ====================================== + 链接按钮 +====================================== */ +.button--link { + background-color: transparent; + color: var(--primary) !important; + padding: 0; +} + +.button--link:hover { + text-decoration: underline; +} + +/* ====================================== + 按钮尺寸 +====================================== */ +.button--sm { + padding: 0.375rem 0.75rem; + font-size: 0.8125rem; +} + +.button--lg { + padding: 0.875rem 1.75rem; + font-size: 1rem; +} + +/* ====================================== + 块级按钮 +====================================== */ +.button--block { + width: 100%; +} + +/* ====================================== + 禁用状态 +====================================== */ +.button:disabled, +.button--disabled { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} + +/* ====================================== + 带图标的按钮 +====================================== */ +.button svg, +.button img { + width: 1em; + height: 1em; +} + +/* ====================================== + 暗色模式 +====================================== */ +[data-theme="dark"] .button--primary { + color: var(--slate-950) !important; +} + +[data-theme="dark"] .button--secondary { + color: var(--text-primary) !important; + border-color: var(--border); } -@media (max-width: 576px) { - .button { - padding: 0.65rem 1.25rem; - } +[data-theme="dark"] .button--secondary:hover { + background-color: var(--bg-elevated); + border-color: var(--border-dark); } diff --git a/src/css/components/card.css b/src/css/components/card.css index 537d4bfaf..8d1bb1801 100644 --- a/src/css/components/card.css +++ b/src/css/components/card.css @@ -1,11 +1,18 @@ +/* ====================================== + NitWikit 卡片样式 + 简洁悬停 + 渐变装饰 + 发光效果 +====================================== */ + +/* ====================================== + 卡片基础样式 +====================================== */ .card { - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); + border-radius: var(--radius-xl); border: 1px solid var(--border); - transition: - transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), - box-shadow 0.3s ease, - border-color 0.3s ease; + transition: + border-color var(--transition-base), + box-shadow var(--transition-base), + transform var(--transition-base); padding: 1.5rem !important; text-decoration: none !important; display: flex; @@ -16,60 +23,268 @@ height: 100%; } -.card:hover { - transform: translateY(-5px) scale(1.01); - box-shadow: var(--shadow-md); - border-color: rgba(37, 160, 110, 0.3); -} - -a.card:not(.header-github-link):not(.github-icon-button)::after { - content: ""; +/* 卡片内渐变装饰 */ +.card::before { + content: ''; position: absolute; - bottom: 0; + top: 0; left: 0; right: 0; - height: 3px; - background: linear-gradient(to right, var(--primary), var(--primary-light)); + height: 100%; + background: linear-gradient( + 135deg, + var(--primary-alpha-5) 0%, + transparent 50%, + transparent 100% + ); opacity: 0; - transform: scaleX(0.6) translateY(3px); - transition: all var(--transition-smooth); + transition: opacity var(--transition-base); + pointer-events: none; } -.card:hover:after { +.card:hover { + border-color: var(--primary-alpha-border); + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.card:hover::before { opacity: 1; - transform: scaleX(1) translateY(0); } +/* 移除底部装饰条 */ +a.card::after { + display: none; +} + +/* ====================================== + 卡片标题 +====================================== */ .card h2 { margin-top: 0; - margin-bottom: 1rem; - font-size: 1.35rem; + margin-bottom: 0.75rem; + font-size: 1.25rem; font-weight: 600; color: var(--ifm-heading-color); display: flex; align-items: center; + gap: 0.5rem; + position: relative; + z-index: 1; } +/* ====================================== + 卡片图标/图片 +====================================== */ .card img { width: 24px; height: 24px; - margin-right: 10px; border-radius: var(--radius-sm); + flex-shrink: 0; } +/* ====================================== + 卡片描述 +====================================== */ .card p { margin-bottom: 0; - font-size: 0.925rem; + font-size: 0.9375rem; color: var(--text-secondary); - line-height: 1.5; + line-height: 1.6; + position: relative; + z-index: 1; +} + +/* ====================================== + 卡片链接 +====================================== */ +.card a { + color: var(--primary-text); + font-weight: 500; + text-decoration: none; +} + +.card a:hover { + text-decoration: underline; + color: var(--primary-dark); +} + +/* ====================================== + 卡片页脚 +====================================== */ +.card footer { + margin-top: auto; + padding-top: 1rem; + font-size: 0.8125rem; + color: var(--primary-text); + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + z-index: 1; } +/* ====================================== + 卡片网格布局 +====================================== */ .row .col--6 { margin-bottom: 1.25rem; } +/* ====================================== + 文档导航卡片 +====================================== */ +a.card.padding--lg.cardContainer_fWXF { + border-radius: var(--radius-xl); + border: 1px solid var(--border); + transition: all var(--transition-base); + padding: 1.5rem !important; + background-color: var(--bg-card); + box-shadow: none; + position: relative; + overflow: hidden; +} + +a.card.padding--lg.cardContainer_fWXF::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + background: linear-gradient( + 135deg, + var(--primary-alpha-5) 0%, + transparent 50% + ); + opacity: 0; + transition: opacity var(--transition-base); +} + +a.card.padding--lg.cardContainer_fWXF:hover { + transform: translateY(-2px); + border-color: var(--primary-alpha-border); + box-shadow: var(--shadow-md); +} + +a.card.padding--lg.cardContainer_fWXF:hover::before { + opacity: 1; +} + +a.card.padding--lg.cardContainer_fWXF::after { + display: none; +} + +a.card.padding--lg.cardContainer_fWXF h2 { + margin-top: 0; + margin-bottom: 0.75rem; + font-size: 1.25rem; + font-weight: 600; + position: relative; + z-index: 1; +} + +a.card.padding--lg.cardContainer_fWXF p { + font-size: 0.9375rem; + color: var(--text-secondary); + position: relative; + z-index: 1; +} + +/* ====================================== + 暗色模式适配 +====================================== */ +[data-theme="dark"] .card, +[data-theme="dark"] a.card.padding--lg.cardContainer_fWXF { + background-color: var(--bg-card); + border-color: var(--border); +} + +[data-theme="dark"] .card:hover, +[data-theme="dark"] a.card.padding--lg.cardContainer_fWXF:hover { + border-color: var(--primary-alpha-border); + box-shadow: var(--shadow-md), var(--shadow-glow); +} + +[data-theme="dark"] .card::before, +[data-theme="dark"] a.card.padding--lg.cardContainer_fWXF::before { + background: linear-gradient( + 135deg, + var(--primary-alpha-8) 0%, + transparent 50% + ); +} + +/* ====================================== + 特性卡片样式 +====================================== */ +.featureCard, +[class*="featureCard"] { + background-color: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-xl); + transition: all var(--transition-base); + position: relative; + overflow: hidden; +} + +.featureCard::before, +[class*="featureCard"]::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + background: linear-gradient( + 135deg, + var(--primary-alpha-5) 0%, + transparent 50% + ); + opacity: 0; + transition: opacity var(--transition-base); +} + +.featureCard:hover, +[class*="featureCard"]:hover { + border-color: var(--primary-alpha-border); + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.featureCard:hover::before, +[class*="featureCard"]:hover::before { + opacity: 1; +} + +[data-theme="dark"] .featureCard, +[data-theme="dark"] [class*="featureCard"] { + background-color: var(--bg-card); + border-color: var(--border); +} + +[data-theme="dark"] .featureCard:hover, +[data-theme="dark"] [class*="featureCard"]:hover { + box-shadow: var(--shadow-md), var(--shadow-glow); +} + +/* ====================================== + 响应式调整 +====================================== */ @media (max-width: 996px) { + .card { + padding: 1.25rem !important; + } + + .card h2 { + font-size: 1.125rem; + } + + .card p { + font-size: 0.875rem; + } + .card:hover { - transform: translateY(-3px); + transform: translateY(-1px); } } diff --git a/src/css/components/code.css b/src/css/components/code.css index b17cbb4f0..237c43388 100644 --- a/src/css/components/code.css +++ b/src/css/components/code.css @@ -1,30 +1,337 @@ +/* ====================================== + NitWikit 代码块样式 + 简洁设计 + 渐变装饰 +====================================== */ + +/* ====================================== + 代码块容器 +====================================== */ pre { border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); margin: 1.5rem 0; overflow: hidden; position: relative; + border: 1px solid var(--border); + background-color: var(--slate-100) !important; } +/* 顶部装饰渐变 */ pre::before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; - width: 100%; - height: 4px; - background: linear-gradient(90deg, var(--primary), var(--primary-light)); + right: 0; + height: 100%; + background: linear-gradient( + 180deg, + var(--primary-alpha-5) 0%, + transparent 30% + ); + pointer-events: none; + z-index: 0; } +/* ====================================== + 代码文本 +====================================== */ code { font-family: var(--font-mono); - font-size: 0.9rem; + font-size: 0.875rem; + line-height: 1.7; + position: relative; + z-index: 1; } +pre code { + display: block; + padding: 1rem 1.25rem; + overflow-x: auto; + background: transparent !important; +} + +/* ====================================== + 行内代码 +====================================== */ :not(pre) > code { - background-color: var(--primary-alpha-strong); - color: var(--primary-dark); - padding: 0.25rem 0.5rem; + background: linear-gradient( + 135deg, + var(--primary-alpha-10) 0%, + var(--primary-alpha-5) 100% + ); + color: var(--primary-text); + padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); + font-size: 0.875em; font-weight: 500; + border: 1px solid var(--primary-alpha-10); +} + +/* ====================================== + 代码块标题/语言标签 +====================================== */ +.prism-code { + background-color: transparent !important; +} + +div[class*="codeBlockTitle"] { + background: linear-gradient( + 135deg, + var(--slate-200) 0%, + var(--slate-100) 100% + ); + border-bottom: 1px solid var(--border); + padding: 0.5rem 1rem; + font-size: 0.8125rem; + font-weight: 600; + color: var(--text-secondary); + font-family: var(--font-mono); +} + +/* ====================================== + 代码行高亮 +====================================== */ +.theme-code-block-highlighted-line { + background: linear-gradient( + 90deg, + var(--primary-alpha-15) 0%, + var(--primary-alpha-5) 100% + ); + display: block; + margin: 0 -1.25rem; + padding: 0 1.25rem; + border-left: 3px solid var(--primary); +} + +/* 错误行高亮 */ +.code-block-error-line { + background: linear-gradient( + 90deg, + rgba(239, 68, 68, 0.15) 0%, + rgba(239, 68, 68, 0.05) 100% + ); + display: block; + margin: 0 -1.25rem; + padding: 0 1.25rem; + border-left: 3px solid var(--alert-danger); +} + +/* ====================================== + 代码块复制按钮 +====================================== */ +button[class*="copyButton"] { + background: var(--bg-muted); + border: 1px solid var(--border); + border-radius: var(--radius-md); + color: var(--text-secondary); + padding: 0.375rem 0.625rem; + font-size: 0.75rem; + transition: all var(--transition-fast); + position: relative; + z-index: 2; +} + +button[class*="copyButton"]:hover { + background: var(--bg-elevated); + color: var(--primary); + border-color: var(--primary-alpha-border); +} + +/* ====================================== + 暗色模式 +====================================== */ +[data-theme="dark"] pre { + background-color: var(--slate-900) !important; + border-color: var(--border); +} + +[data-theme="dark"] pre::before { + background: linear-gradient( + 180deg, + var(--primary-alpha-8) 0%, + transparent 30% + ); +} + +[data-theme="dark"] div[class*="codeBlockTitle"] { + background: linear-gradient( + 135deg, + var(--slate-800) 0%, + var(--slate-900) 100% + ); + border-bottom-color: var(--border); +} + +[data-theme="dark"] :not(pre) > code { + background: linear-gradient( + 135deg, + var(--primary-alpha-15) 0%, + var(--primary-alpha-10) 100% + ); + color: var(--primary-light); + border-color: var(--primary-alpha-20); +} + +[data-theme="dark"] .theme-code-block-highlighted-line { + background: linear-gradient( + 90deg, + var(--primary-alpha-20) 0%, + var(--primary-alpha-8) 100% + ); +} + +[data-theme="dark"] button[class*="copyButton"] { + background: var(--slate-800); + border-color: var(--border); + color: var(--text-secondary); +} + +[data-theme="dark"] button[class*="copyButton"]:hover { + background: var(--slate-700); + color: var(--primary); + border-color: var(--primary-alpha-border); +} + +/* ====================================== + 代码块滚动条 +====================================== */ +pre::-webkit-scrollbar { + height: 6px; +} + +pre::-webkit-scrollbar-track { + background: transparent; +} + +pre::-webkit-scrollbar-thumb { + background: var(--slate-300); + border-radius: 100px; +} + +pre::-webkit-scrollbar-thumb:hover { + background: var(--slate-400); +} + +[data-theme="dark"] pre::-webkit-scrollbar-thumb { + background: var(--slate-700); +} + +[data-theme="dark"] pre::-webkit-scrollbar-thumb:hover { + background: var(--slate-600); +} + +/* ====================================== + 移动端响应式 +====================================== */ +@media (max-width: 768px) { + pre { + margin: 1.25rem 0; + border-radius: var(--radius-md); + } + + code { + font-size: 0.8125rem; + line-height: 1.6; + } + + pre code { + padding: 0.875rem 1rem; + } + + :not(pre) > code { + font-size: 0.8125em; + padding: 0.15rem 0.35rem; + } + + div[class*="codeBlockTitle"] { + padding: 0.5rem 0.875rem; + font-size: 0.75rem; + } + + .theme-code-block-highlighted-line { + margin: 0 -1rem; + padding: 0 1rem; + } + + .code-block-error-line { + margin: 0 -1rem; + padding: 0 1rem; + } + + /* 增大复制按钮触摸区域 */ + button[class*="copyButton"] { + padding: 0.5rem 0.75rem; + font-size: 0.8125rem; + min-height: 36px; + min-width: 36px; + } +} + +@media (max-width: 540px) { + pre { + margin: 1rem 0; + /* 移动端全宽，略微突破容器 */ + margin-left: -0.5rem; + margin-right: -0.5rem; + border-radius: 0; + border-left: none; + border-right: none; + } + + code { + font-size: 0.75rem; + } + + pre code { + padding: 0.75rem 1rem; + } + + :not(pre) > code { + font-size: 0.75em; + } + + div[class*="codeBlockTitle"] { + padding: 0.5rem 1rem; + } + + /* 复制按钮更易触摸 */ + button[class*="copyButton"] { + padding: 0.5rem 0.625rem; + min-height: 40px; + min-width: 40px; + } +} + +/* ====================================== + 代码块行号 +====================================== */ +.prism-code .token-line { + position: relative; +} + +/* ====================================== + 语法高亮增强 +====================================== */ +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: var(--slate-500); + font-style: italic; +} + +.token.keyword { + color: #c678dd; +} + +.token.string { + color: #98c379; +} + +.token.function { + color: #61afef; +} + +.token.number { + color: #d19a66; } diff --git a/src/css/components/footer.css b/src/css/components/footer.css index 14d2b93f4..2467688c0 100644 --- a/src/css/components/footer.css +++ b/src/css/components/footer.css @@ -1,67 +1,112 @@ +/* ====================================== + NitWikit 页脚样式 + 简洁分割线 + 统一背景 +====================================== */ + +/* ====================================== + 页脚容器 +====================================== */ .footer { + background-color: var(--bg-light); color: var(--text-secondary); padding: 3rem 0 2rem; - transition: - background-color var(--transition-base), - border-color var(--transition-base); - position: relative; -} - -html[data-theme="light"] .footer { - background-color: var(--bg-footer); - border-top: 1px solid rgba(0, 0, 0, 0.05); - box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.02); -} - -html[data-theme="dark"] .footer { - background-color: var(--bg-dark); - border-top: 1px solid rgba(255, 255, 255, 0.05); + border-top: 1px solid var(--border); + transition: background-color var(--transition-base), border-color var(--transition-base); } +/* 移除顶部装饰条 */ .footer::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--primary), var(--primary-light)); - opacity: 0.6; + display: none; } +/* ====================================== + 页脚标题 +====================================== */ .footer__title { color: var(--text-primary); font-weight: 600; margin-bottom: 1rem; - font-size: 1.1rem; + font-size: 0.9375rem; } +/* ====================================== + 页脚链接 +====================================== */ .footer__link-item { color: var(--text-secondary); - transition: color var(--transition-fast); - padding: 0.25rem 0; + transition: color var(--transition-fast), background-color var(--transition-fast); + padding: 0.25rem 0.5rem; + margin: -0.25rem -0.5rem; display: inline-block; - font-weight: 500; + font-weight: 400; + font-size: 0.875rem; + border-radius: var(--radius-sm); } .footer__link-item:hover { - color: var(--primary); + color: var(--primary-text); + background-color: var(--primary-alpha-5); text-decoration: none; } +/* ====================================== + 页脚链接列表 +====================================== */ +.footer__links { + margin-bottom: 1.5rem; +} + +.footer__items { + list-style: none; + padding: 0; + margin: 0; +} + +.footer__item { + margin-bottom: 0.5rem; +} + +/* ====================================== + 页脚列 +====================================== */ +.footer__col { + margin-bottom: 1.5rem; +} + +/* ====================================== + 版权信息 +====================================== */ .footer__copyright { color: var(--text-light); - font-size: 0.85rem; - margin-top: 2.5rem; + font-size: 0.8125rem; + margin-top: 2rem; text-align: center; padding-top: 1.5rem; - border-top: 1px solid rgba(0, 0, 0, 0.05); + border-top: 1px solid var(--border); } -.footer__col { - margin-bottom: 1.5rem; +.footer__copyright a { + color: var(--text-secondary); } +.footer__copyright a:hover { + color: var(--primary); +} + +/* ====================================== + 页脚 Logo +====================================== */ +.footer__logo { + margin-bottom: 1rem; +} + +.footer__logo img { + height: 2rem; +} + +/* ====================================== + 响应式调整 +====================================== */ @media (max-width: 996px) { .footer { padding: 2rem 0 1.5rem; @@ -88,10 +133,22 @@ html[data-theme="dark"] .footer { } .footer__link-item { - padding: 0.35rem 0; + padding: 0.375rem 0; } .footer__copyright { margin-top: 1rem; } } + +/* ====================================== + 暗色模式 +====================================== */ +[data-theme="dark"] .footer { + background-color: var(--bg-dark); + border-top-color: var(--border); +} + +[data-theme="dark"] .footer__copyright { + border-top-color: var(--border); +} diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css index cab8f2054..662fdbc41 100644 --- a/src/css/components/navbar.css +++ b/src/css/components/navbar.css @@ -1,74 +1,273 @@ +/* ====================================== + NitWikit 导航栏样式 + 毛玻璃效果 + 渐变底线 +====================================== */ + .navbar { - box-shadow: 0 1px 0 0 var(--border) !important; - transition: all var(--transition-base); height: var(--ifm-navbar-height); - padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal); + padding: 0 var(--ifm-navbar-padding-horizontal); display: flex; align-items: center; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); + background: var(--ifm-navbar-background-color); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--border); + transition: all var(--transition-base); + box-shadow: none !important; + position: relative; +} + +/* 底部渐变线 */ +.navbar::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient( + 90deg, + transparent 0%, + var(--primary-alpha-30) 50%, + transparent 100% + ); + opacity: 0; + transition: opacity var(--transition-base); +} + +.navbar:hover::after { + opacity: 1; } +/* ====================================== + 品牌区域 +====================================== */ .navbar__brand { font-weight: 700; - color: var(--primary); + color: var(--text-primary); + display: flex; + align-items: center; + gap: 0.5rem; } .navbar__title { - font-size: 1.25rem; + font-size: 1.125rem; letter-spacing: -0.01em; + font-weight: 700; + background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } .navbar__logo { height: 1.75rem; width: 1.75rem; - margin-right: 0.5rem; transition: transform var(--transition-base); } .navbar__brand:hover .navbar__logo { - transform: rotate(10deg); + transform: scale(1.05) rotate(5deg); +} + +.navbar__brand:hover .navbar__title { + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); + -webkit-background-clip: text; + background-clip: text; } +/* ====================================== + 导航链接 +====================================== */ .navbar__link { display: flex; align-items: center; font-size: 0.9375rem; - padding: 0.375rem 0.75rem; + padding: 0.5rem 0.875rem; border-radius: var(--radius-md); color: var(--text-secondary); transition: all var(--transition-fast); font-weight: 500; + position: relative; +} + +.navbar__link::before { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 2px; + background: var(--primary); + transition: width var(--transition-fast); + border-radius: 1px; } .navbar__link:hover { - background-color: var(--primary-alpha-light); - color: var(--primary); + color: var(--primary-text); + background-color: transparent; + text-decoration: none; +} + +.navbar__link:hover::before { + width: 60%; } .navbar__link--active { font-weight: 600; - color: var(--primary); - background-color: var(--primary-alpha-medium); + color: var(--primary-text); +} + +.navbar__link--active::before { + width: 60%; +} + +/* ====================================== + 导航项 +====================================== */ +.navbar__item { + margin: 0 0.25rem; +} + +.navbar__items { + display: flex; + align-items: center; + height: 100%; +} + +.navbar__items--right { + gap: 0.5rem; +} + +/* ====================================== + 导航栏内部布局 +====================================== */ +.navbar__inner { + display: flex; + align-items: center; + height: 100%; + width: 100%; + justify-content: space-between; } +/* ====================================== + 搜索框 +====================================== */ +.navbar__search { + margin-left: 0.5rem; +} + +.navbar__search-input { + height: 2.25rem; + border-radius: var(--radius-lg); + background-color: var(--bg-muted); + border: 1px solid var(--border); + transition: all var(--transition-fast); + padding: 0 0.875rem; + font-size: 0.875rem; + width: 10rem; + color: var(--text-primary); +} + +.navbar__search-input::placeholder { + color: var(--text-light); +} + +.navbar__search-input:focus { + background-color: var(--bg-card); + border-color: var(--primary); + box-shadow: 0 0 0 3px var(--primary-alpha-10), var(--shadow-glow); + outline: none; + width: 12rem; +} + +/* ====================================== + GitHub 链接 +====================================== */ +.header-github-link { + display: flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + border-radius: var(--radius-md); + color: var(--text-secondary); + transition: all var(--transition-fast); +} + +.header-github-link:hover { + color: var(--text-primary); + background-color: var(--bg-muted); + transform: scale(1.05); +} + +.header-github-link::before { + content: ""; + width: 1.25rem; + height: 1.25rem; + background: currentColor; + mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat center / contain; + -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat center / contain; +} + +.header-github-link::after { + display: none !important; +} + +/* ====================================== + 主题切换按钮 +====================================== */ +button[class*="colorModeToggle"] { + border-radius: var(--radius-md); + transition: all var(--transition-fast); +} + +button[class*="colorModeToggle"]:hover { + background-color: var(--bg-muted); +} + +/* ====================================== + 移动端响应式 +====================================== */ @media (max-width: 996px) { .navbar { height: auto; min-height: var(--ifm-navbar-height); - padding: 0.5rem 1rem; + padding: 0.75rem 1rem; } + .navbar__inner { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + } + + /* + * 核心：隐藏导航链接（通用、Java、Bedrock、关于我们） + * 导航链接同时具有 .navbar__item 和 .navbar__link 类 + */ + .navbar__item.navbar__link { + display: none !important; + } + + /* 隐藏下拉菜单类型的导航项 */ + .navbar__item.dropdown { + display: none !important; + } + + /* 品牌居中显示 */ .navbar__brand { + display: flex !important; position: absolute; left: 50%; transform: translateX(-50%); - margin: 0; - z-index: 0; + z-index: 1; } .navbar__title { - font-size: 1.2rem; + font-size: 1.0625rem; } .navbar__logo { @@ -76,98 +275,119 @@ width: 1.5rem; } - .navbar-sidebar-toggle { + /* 汉堡菜单按钮 */ + .navbar__toggle { position: relative; z-index: 10; - margin-right: auto; } - .navbar__search { + /* 右侧搜索和 GitHub */ + .navbar__items--right { position: relative; z-index: 10; margin-left: auto; } + /* 显示搜索 */ + .navbar__search, + .DocSearch-Button { + display: flex !important; + } + + /* 显示 GitHub 链接 */ + .header-github-link { + display: flex !important; + } + + /* 侧边栏样式 */ .navbar-sidebar { z-index: 15 !important; height: 100vh !important; max-height: none !important; + background: var(--bg-card); } - .navbar-sidebar__body { - height: calc(100vh - var(--ifm-navbar-height)) !important; + .navbar-sidebar__backdrop { + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); } - .navbar__inner { - position: relative; - display: flex; - justify-content: space-between; - align-items: center; + .navbar__link::before { + display: none; } +} - .navbar__items--left { - width: 33%; - justify-content: flex-start; +/* ====================================== + 移动端侧边栏导航 +====================================== */ +.navbar-sidebar__brand { + padding: 1rem; + border-bottom: 1px solid var(--border); +} + +.navbar-sidebar__close { + color: var(--text-secondary); + /* 增大触摸区域 */ + min-width: 44px; + min-height: 44px; + display: flex; + align-items: center; + justify-content: center; +} + +.navbar-sidebar__items { + padding: 1rem; +} + +/* 移动端侧边栏链接优化触摸目标 */ +.navbar-sidebar__item { + min-height: 44px; + display: block; /* 改为 block 避免 flex 挤压 */ +} + +.navbar-sidebar .menu__link { + min-height: 44px; + padding: 0.75rem 1rem; + display: flex; + align-items: center; + width: 100%; /* 确保占满宽度 */ + white-space: nowrap; /* 防止文字换行 */ +} + +/* ====================================== + 小屏幕额外优化 +====================================== */ +@media (max-width: 540px) { + .navbar { + padding: 0.5rem 0.75rem; } - .navbar__items--right { - width: 33%; - justify-content: flex-end; - } - - [class*="github-link"]:not(.header-github-link), - a[aria-label*="GitHub"]:not(.header-github-link), - .navbar__item[href="/"]:not(.navbar__brand), - .navbar__item[href$="/Java/"], - .navbar__item[href$="/Bedrock/"], - .navbar__item[href$="/about/"], - .navbar__item[href*="Java"], - .navbar__item[href*="Bedrock"], - .navbar__item[href*="about"], - .navbar__item:not(.navbar__logo):not(.navbar__title):not(.navbar__brand):not(.navbar-sidebar-toggle):not( - .navbar__search - ):not(.header-github-link), - .navbar__items--left .navbar__item:not(.navbar__brand):not(.navbar-sidebar-toggle) { - display: none !important; - width: 0 !important; - padding: 0 !important; - margin: 0 !important; - opacity: 0 !important; - pointer-events: none !important; + .navbar__title { + font-size: 1rem; } - .header-github-link { - display: flex !important; - width: auto !important; - opacity: 1 !important; - pointer-events: auto !important; - position: relative; - z-index: 10; - border-radius: 50%; - background-color: rgba(125, 125, 125, 0.1); - margin: 0 0.5rem !important; + .navbar__logo { + height: 1.375rem; + width: 1.375rem; } - .navbar-sidebar .menu__list-item a[href="/"], - .navbar-sidebar .menu__list-item a[href$="/Java/"], - .navbar-sidebar .menu__list-item a[href$="/Bedrock/"], - .navbar-sidebar .menu__list-item a[href$="/about/"] { - display: flex !important; - width: auto !important; - padding: inherit !important; - margin: inherit !important; - opacity: 1 !important; - pointer-events: auto !important; + /* 汉堡菜单触摸区域 */ + .navbar__toggle { + min-width: 44px; + min-height: 44px; + padding: 0.5rem; } - .navbar-sidebar-toggle, - .navbar__brand, - .navbar__search { - display: flex !important; + .navbar-sidebar { + width: 85vw; + max-width: 320px; } -} -.header-github-link::after, -.github-icon-button::after { - display: none !important; + .navbar-sidebar__brand { + padding: 0.875rem; + } + + .navbar-sidebar__items { + padding: 0.875rem; + } } diff --git a/src/css/components/sidebar.css b/src/css/components/sidebar.css index 9d318a0df..084cbda73 100644 --- a/src/css/components/sidebar.css +++ b/src/css/components/sidebar.css @@ -1,43 +1,77 @@ +/* ====================================== + NitWikit 侧边栏样式 + 左侧活动指示条 + 层级缩进 +====================================== */ + .theme-doc-sidebar-container { border: none !important; border-right: 1px solid var(--border) !important; background-color: var(--bg-card); transition: background-color var(--transition-base); - margin-right: 1rem; display: block; min-width: 0; flex-shrink: 0; } +/* ====================================== + 菜单容器 +====================================== */ .menu { - padding: 1.25rem 0.75rem 2rem 0.75rem; + padding: 1.5rem 1rem 2rem; background-color: transparent; } +.menu__list { + margin-bottom: 0.5rem; + padding-left: 0; +} + +.menu__list-item { + margin: 0.125rem 0; +} + +/* ====================================== + 菜单链接 +====================================== */ .menu__link { + position: relative; border-radius: var(--radius-md); font-size: 0.9375rem; padding: 0.5rem 0.75rem; - transition: - background-color 0.15s ease, - color 0.15s ease, - transform 0.15s ease; - line-height: 1.4; + padding-left: 1rem; + transition: color var(--transition-fast), background-color var(--transition-fast); + line-height: 1.5; font-weight: 400; + color: var(--text-secondary); } .menu__link:hover { background-color: var(--ifm-menu-color-background-hover); - color: var(--primary); - transform: translateX(6px); + color: var(--primary-text); } +/* 活动状态 - 左侧指示条 */ .menu__link--active { font-weight: 500; background-color: var(--ifm-menu-color-background-active); - color: var(--primary); + color: var(--primary-text); +} + +.menu__link--active::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 3px; + height: 60%; + background: var(--primary); + border-radius: 0 2px 2px 0; } +/* ====================================== + 可折叠菜单项 +====================================== */ .menu__list-item-collapsible { border-radius: var(--radius-md); font-weight: 500; @@ -51,16 +85,144 @@ background-color: var(--ifm-menu-color-background-active); } +.menu__caret { + padding: 0.25rem; +} + +.menu__caret::before, +.menu__link--sublist-caret::after { + transition: transform var(--transition-fast); + opacity: 0.6; +} + +/* ====================================== + 嵌套菜单 +====================================== */ .menu__list .menu__list { - margin-top: 0.15rem; + margin-top: 0.25rem; margin-bottom: 0.25rem; - border-left: 1px solid var(--border); margin-left: 0.75rem; - padding-left: 0.5rem; + padding-left: 0.75rem; + border-left: 1px solid var(--border); +} + +.menu__list .menu__list .menu__link { + padding: 0.375rem 0.75rem; + padding-left: 1rem; + font-size: 0.875rem; + font-weight: 400; + color: var(--text-secondary); +} + +.menu__list .menu__list .menu__link:hover { + color: var(--primary-text); +} + +.menu__list .menu__list .menu__link--active { + color: var(--primary-text); + font-weight: 500; +} + +.menu__list .menu__list .menu__link--active::before { + height: 50%; +} + +/* ====================================== + 分类标题 +====================================== */ +.theme-doc-sidebar-menu > .menu__list-item > .menu__link { + font-weight: 600; + font-size: 0.8125rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--text-secondary); + padding: 0.75rem 0.75rem 0.5rem; + margin-top: 1rem; +} + +.theme-doc-sidebar-menu > .menu__list-item:first-child > .menu__link { + margin-top: 0; } +/* ====================================== + 移动端侧边栏 +====================================== */ @media (max-width: 996px) { - .menu__link:hover { - transform: translateX(4px); + .theme-doc-sidebar-container { + border-right: none !important; + } + + .menu { + padding: 1rem; + } + + .menu__link { + padding: 0.625rem 0.75rem; + padding-left: 1rem; + /* 确保触摸目标足够大 */ + min-height: 44px; + display: flex; + align-items: center; + } + + .menu__list-item-collapsible { + display: flex; + align-items: center; + min-height: 44px; + } + + .menu__list-item-collapsible .menu__link { + flex: 1; + } + + .menu__caret { + padding: 0.5rem; + min-width: 32px; + min-height: 32px; + flex-shrink: 0; + } + + /* 嵌套菜单项也需要足够的触摸区域 */ + .menu__list .menu__list .menu__link { + min-height: 40px; + padding: 0.5rem 0.75rem; + padding-left: 1rem; } } + +@media (max-width: 540px) { + .menu { + padding: 0.875rem; + } + + .menu__link { + font-size: 0.9375rem; + padding: 0.75rem 0.625rem; + padding-left: 0.875rem; + } + + .menu__list .menu__list { + margin-left: 0.5rem; + padding-left: 0.625rem; + } + + .menu__list .menu__list .menu__link { + font-size: 0.875rem; + padding: 0.625rem 0.625rem; + padding-left: 0.875rem; + } + + /* 分类标题移动端调整 */ + .theme-doc-sidebar-menu > .menu__list-item > .menu__link { + font-size: 0.75rem; + padding: 0.625rem 0.625rem 0.375rem; + margin-top: 0.75rem; + } +} + +/* ====================================== + 暗色模式适配 +====================================== */ +[data-theme="dark"] .menu__list .menu__list { + border-left-color: var(--border); +} diff --git a/src/css/components/table.css b/src/css/components/table.css index a60c936d7..4356d49ee 100644 --- a/src/css/components/table.css +++ b/src/css/components/table.css @@ -1,31 +1,135 @@ +/* ====================================== + NitWikit 表格样式 + 简洁边框 + 柔和配色 +====================================== */ + +/* ====================================== + 表格容器 +====================================== */ table { width: 100%; - border-collapse: separate; + border-collapse: collapse; border-spacing: 0; border-radius: var(--radius-lg); overflow: hidden; - box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; border: 1px solid var(--border); + font-size: 0.9375rem; +} + +/* ====================================== + 表头 +====================================== */ +thead { + background-color: var(--bg-muted); } th { - background-color: var(--primary-alpha-light); font-weight: 600; text-align: left; - padding: 0.875rem 1.25rem; + padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); + color: var(--text-primary); + font-size: 0.875rem; } +/* ====================================== + 表格单元格 +====================================== */ td { - padding: 0.875rem 1.25rem; - border-top: 1px solid var(--border); + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--border); + color: var(--text-primary); + vertical-align: top; +} + +/* 最后一行无底边框 */ +tr:last-child td { + border-bottom: none; +} + +/* ====================================== + 斑马纹效果 +====================================== */ +tbody tr:nth-child(even) { + background-color: var(--bg-light); +} + +/* ====================================== + 悬停效果 +====================================== */ +tbody tr:hover { + background-color: var(--primary-alpha-5); +} + +/* ====================================== + 表格内链接 +====================================== */ +td a { + color: var(--primary-text); + text-decoration: none; +} + +td a:hover { + text-decoration: underline; + color: var(--primary-dark); +} + +/* ====================================== + 表格内代码 +====================================== */ +td code { + font-size: 0.8125rem; + padding: 0.125rem 0.375rem; +} + +/* ====================================== + 响应式表格 +====================================== */ +.table-wrapper { + overflow-x: auto; + margin-bottom: 1.5rem; +} + +@media (max-width: 768px) { + table { + font-size: 0.875rem; + } + + th, + td { + padding: 0.625rem 0.75rem; + } +} + +/* ====================================== + 暗色模式 +====================================== */ +[data-theme="dark"] table { + border-color: var(--border); +} + +[data-theme="dark"] thead { + background-color: var(--bg-elevated); +} + +[data-theme="dark"] th { + border-bottom-color: var(--border); + color: var(--text-primary); +} + +[data-theme="dark"] td { + border-bottom-color: var(--border); +} + +[data-theme="dark"] tbody tr:nth-child(even) { + background-color: rgba(30, 41, 59, 0.5); } -tr:hover td { - background-color: rgba(37, 160, 110, 0.02); +[data-theme="dark"] tbody tr:hover { + background-color: var(--primary-alpha-10); } -tr:first-child td { - border-top: none; +[data-theme="dark"] td a { + color: var(--primary); } diff --git a/src/css/custom.css b/src/css/custom.css index 0bcd738d1..0cdcd1b0c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,12 +1,31 @@ +/* ====================================== + NitWikit 样式入口文件 + 借鉴 Nuxt 设计系统 +====================================== */ + +/* ====================================== + 字体引入 +====================================== */ +@import url('https://fontsapi.zeoseven.com/442/main/result.css'); + +/* ====================================== + TailwindCSS 基础 +====================================== */ @layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); +/* ====================================== + 基础样式 +====================================== */ @import "./base/variables.css"; @import "./base/theme.css"; @import "./base/typography.css"; +/* ====================================== + 组件样式 +====================================== */ @import "./components/navbar.css"; @import "./components/sidebar.css"; @import "./components/card.css"; @@ -16,6 +35,9 @@ @import "./components/alert.css"; @import "./components/footer.css"; +/* ====================================== + 工具类样式 +====================================== */ @import "./utilities/animations.css"; @import "./utilities/scrollbar.css"; @import "./utilities/responsive.css"; diff --git a/src/css/github.css b/src/css/github.css index 41f290465..669140760 100644 --- a/src/css/github.css +++ b/src/css/github.css @@ -1,55 +1,36 @@ -/* GitHub图标基本样式 - 与主题切换按钮一致的大小 */ +/* ====================================== + NitWikit GitHub 图标样式 + 与主题系统统一 +====================================== */ + +/* ====================================== + GitHub 链接图标 - 基础样式 +====================================== */ .header-github-link, .github-icon-button { display: flex !important; align-items: center !important; justify-content: center !important; - padding: 0.25rem !important; - width: 2rem !important; - height: 2rem !important; - border-radius: 50% !important; /* 确保圆形 */ - transition: background-color 0.2s !important; - color: var(--ifm-navbar-link-color) !important; - position: relative !important; - overflow: hidden !important; - /* 明确覆盖卡片样式 */ - border: none !important; - box-shadow: none !important; + width: 2.25rem !important; + height: 2.25rem !important; + border-radius: var(--radius-md) !important; + transition: all var(--transition-fast) !important; + color: var(--text-secondary) !important; background: transparent !important; -} - -/* 移除任何可能的伪元素 */ -.header-github-link:before, -.header-github-link:after, -.github-icon-button:before, -.github-icon-button:after { - display: none !important; - content: none !important; - opacity: 0 !important; - height: 0 !important; - background: none !important; -} - -/* 确保不会继承卡片样式 */ -.header-github-link.card, -.header-github-link[class*="card"], -.github-icon-button.card, -.github-icon-button[class*="card"] { border: none !important; box-shadow: none !important; - padding: 0.25rem !important; - background: transparent !important; } .header-github-link:hover, .github-icon-button:hover { - background-color: var(--ifm-color-emphasis-200) !important; - color: var(--ifm-navbar-link-color) !important; + color: var(--text-primary) !important; + background-color: var(--bg-muted) !important; transform: none !important; - box-shadow: none !important; - border: none !important; } +/* ====================================== + GitHub 图标 SVG +====================================== */ .header-github-link svg, .github-icon-button svg { width: 1.25rem !important; @@ -57,32 +38,49 @@ fill: currentColor !important; } -/* 深色模式下的特定样式 */ -html[data-theme="dark"] .header-github-link, -html[data-theme="dark"] .github-icon-button { - color: var(--ifm-navbar-link-color) !important; +/* ====================================== + 移除伪元素干扰 +====================================== */ +.header-github-link::before, +.header-github-link::after, +.github-icon-button::before, +.github-icon-button::after { + content: none !important; + display: none !important; +} + +/* ====================================== + 确保不继承卡片样式 +====================================== */ +.header-github-link.card, +.header-github-link[class*="card"], +.github-icon-button.card, +.github-icon-button[class*="card"] { + border: none !important; + box-shadow: none !important; + background: transparent !important; +} + +/* ====================================== + 暗色模式 +====================================== */ +[data-theme="dark"] .header-github-link, +[data-theme="dark"] .github-icon-button { + color: var(--text-secondary) !important; } -html[data-theme="dark"] .header-github-link:hover, -html[data-theme="dark"] .github-icon-button:hover { - background-color: var(--ifm-color-emphasis-200) !important; +[data-theme="dark"] .header-github-link:hover, +[data-theme="dark"] .github-icon-button:hover { + color: var(--text-primary) !important; + background-color: var(--bg-elevated) !important; } -/* 移动设备上的GitHub图标样式 - 完全隐藏 */ +/* ====================================== + 移动端隐藏 +====================================== */ @media (max-width: 996px) { - .header-github-link, - .github-icon-button, - #github-button-container, - .navbar__items--right .header-github-link, - .navbar__items--right .github-icon-button { - display: none !important; - width: 0 !important; - height: 0 !important; - padding: 0 !important; - margin: 0 !important; - opacity: 0 !important; - visibility: hidden !important; - position: absolute !important; - pointer-events: none !important; + /* 保持 GitHub 图标在移动端可见 */ + .header-github-link { + display: flex !important; } } diff --git a/src/css/qwe.css b/src/css/qwe.css deleted file mode 100644 index 56e3d854b..000000000 --- a/src/css/qwe.css +++ /dev/null @@ -1,1143 +0,0 @@ -/* ====================================== - 1. TailwindCSS基础 -====================================== */ -@layer theme, base, components, utilities; - -@import "tailwindcss/theme.css" layer(theme); -@import "tailwindcss/utilities.css" layer(utilities); - -/* ====================================== - 2. 全局变量定义 -====================================== */ -:root { - /* 主色调 */ - --primary: #25a06e; - --primary-dark: #39e69e; - --primary-light: #36c085; - - /* 文本颜色 */ - --text-primary: #1a202c; - --text-secondary: #4a5568; - --text-light: #a0aec0; - - /* 背景颜色 */ - --bg-light: #f8f9fa; - --bg-dark: #1a202c; - --bg-card: #ffffff; - - /* 边框颜色 */ - --border-color: #edf2f7; - --border-color-dark: #2d3748; - - /* 阴影 */ - --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - - /* Docusaurus变量 */ - --ifm-color-primary: var(--primary); - --ifm-color-primary-dark: var(--primary-dark); - --ifm-color-primary-darker: #195f41; - --ifm-color-primary-darkest: #134931; - --ifm-color-primary-light: var(--primary-light); - --ifm-color-primary-lighter: #4fd197; - --ifm-color-primary-lightest: #7eddae; - - --ifm-code-font-size: 95%; - --ifm-font-family-base: - -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; - - /* 导航栏 */ - --ifm-navbar-background-color: rgba(255, 255, 255, 0.98); - --ifm-navbar-height: 3.75rem; - --ifm-navbar-shadow: none; - --ifm-navbar-padding-vertical: 0.5rem; - --ifm-navbar-padding-horizontal: 1rem; - --ifm-navbar-item-padding-vertical: 0.5rem; - --ifm-navbar-item-padding-horizontal: 0.85rem; - - /* 侧边栏 */ - --ifm-menu-color: var(--text-secondary); - --ifm-menu-color-active: var(--primary); - --ifm-menu-color-background-active: rgba(37, 160, 110, 0.08); - --ifm-menu-color-background-hover: rgba(37, 160, 110, 0.04); - - /* 其他 */ - --ifm-toc-border-color: var(--border-color); - --ifm-heading-color: var(--text-primary); -} - -/* 深色主题变量 */ -html[data-theme="dark"] { - --primary: #36c085; - --primary-dark: #42f8ac; - --primary-light: #4fd197; - - --text-primary: #f7fafc; - --text-secondary: #e2e8f0; - --text-light: #a0aec0; - - --bg-light: #444c56; - --bg-dark: #2d333b; - --bg-card: #22272e; - - --border-color: #444c56; - --border-color-dark: #545d68; - - --ifm-navbar-background-color: rgba(45, 51, 59, 0.98); - --ifm-background-color: var(--bg-dark); - --ifm-background-surface-color: var(--bg-card); - - --ifm-menu-color: var(--text-secondary); - --ifm-heading-color: var(--text-primary); - --ifm-color-primary: var(--primary); - --ifm-color-primary-dark: var(--primary-dark); -} - -/* ====================================== - 3. 基础样式 -====================================== */ -body { - font-family: var(--ifm-font-family-base); - color: var(--text-primary); - line-height: 1.6; - background-color: var(--bg-light); - transition: background-color 0.3s ease; - -webkit-transition: background-color 0.3s ease; -} - -/* ====================================== - 4. 导航栏样式 -====================================== */ -.navbar { - box-shadow: 0 1px 0 0 var(--border-color) !important; - transition: all 0.3s ease; - -webkit-transition: all 0.3s ease; - height: var(--ifm-navbar-height); - padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal); - display: flex; - align-items: center; -} - -.navbar__brand { - font-weight: 700; - color: var(--primary); -} - -.navbar__title { - font-size: 1.25rem; - letter-spacing: -0.01em; -} - -.navbar__logo { - height: 1.75rem; - width: 1.75rem; - margin-right: 0.5rem; - transition: transform 0.3s ease; - -webkit-transition: transform 0.3s ease; -} - -.navbar__brand:hover .navbar__logo { - transform: rotate(10deg); - -webkit-transform: rotate(10deg); -} - -.navbar__items { - align-items: center; - display: flex; - height: 100%; -} - -/* 导航栏内部容器样式 */ -.navbar__inner { - display: flex; - align-items: center; - height: 100%; - width: 100%; - justify-content: space-between; - min-height: 3rem; -} - -/* 让导航栏子元素也保持居中 */ -.navbar-sidebar .navbar__inner { - flex-direction: column; - align-items: flex-start; - height: auto; -} - -.navbar__item { - font-weight: 500; - padding: 0; - margin: 0 0.5rem; -} - -.navbar__link { - display: flex; - align-items: center; - font-size: 0.9375rem; - padding: 0.375rem 0.75rem; - border-radius: 0.375rem; - color: var(--text-secondary); - transition: all 0.2s ease; - -webkit-transition: all 0.2s ease; -} - -.navbar__link:hover { - background-color: rgba(37, 160, 110, 0.05); - color: var(--primary); -} - -.navbar__link--active { - font-weight: 600; - color: var(--primary); - background-color: rgba(37, 160, 110, 0.08); -} - -.navbar__toggle { - color: var(--text-secondary); - padding: 0.375rem; -} - -/* 导航栏中的链接在移动端隐藏（通用解决方案） */ -@media (max-width: 996px) { - /* 仅隐藏主导航栏中的链接，不影响侧边栏中的链接 */ - .navbar__items .navbar__item.navbar__link { - display: none; - } - - /* 确保在侧边栏中的同样链接仍然可见 */ - .navbar-sidebar .navbar__item.navbar__link { - display: flex !important; - } -} - -/* 搜索框 */ -.navbar__search { - margin-left: 0.5rem; -} - -.navbar__search-input { - height: 2.25rem; - border-radius: 0.375rem; - background-color: rgba(226, 232, 240, 0.4); - border: 1px solid transparent; - transition: all 0.2s ease; - -webkit-transition: all 0.2s ease; - padding: 0 0.75rem; - font-size: 0.875rem; - width: 10rem; -} - -.navbar__search-input:focus { - background-color: rgba(226, 232, 240, 0.6); - border-color: var(--primary-light); - box-shadow: 0 0 0 2px rgba(37, 160, 110, 0.15); - -webkit-box-shadow: 0 0 0 2px rgba(37, 160, 110, 0.15); - width: 12rem; -} - -html[data-theme="dark"] .navbar__search-input { - background-color: rgba(45, 55, 72, 0.6); -} - -/* GitHub链接图标 */ -.header-github-link { - display: flex; - align-items: center; - justify-content: center; - padding: 0.375rem; - border-radius: 0.375rem; - transition: background-color 0.2s ease; - -webkit-transition: background-color 0.2s ease; -} - -.header-github-link:hover { - background-color: rgba(37, 160, 110, 0.05); -} - -.header-github-link:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; - content: ""; - display: flex; - height: 22px; - width: 22px; - transition: transform 0.3s ease; - -webkit-transition: transform 0.3s ease; -} - -html[data-theme="dark"] .header-github-link:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; -} - -.header-github-link:hover:before { - transform: scale(1.1); - -webkit-transform: scale(1.1); -} - -/* ====================================== - 5. 侧边栏样式 -====================================== */ -.theme-doc-sidebar-container { - border: none !important; - border-right: 1px solid var(--border-color) !important; - background-color: var(--bg-card); - transition: background-color 0.3s ease; - -webkit-transition: background-color 0.3s ease; - margin-right: 1rem; -} - -.theme-doc-sidebar-menu { - padding-top: 0.5rem; - font-size: 0.9375rem; -} - -.menu { - padding: 1.25rem 0.75rem 2rem 0.75rem; - background-color: transparent; -} - -.menu__list { - margin-bottom: 0.75rem; - padding-left: 0.25rem; -} - -.menu__list-item { - margin: 0.1rem 0; -} - -.menu__link { - border-radius: 0.375rem; - font-size: 0.9375rem; - padding: 0.5rem 0.75rem; - transition: - background-color 0.15s ease, - color 0.15s ease; - -webkit-transition: - background-color 0.15s ease, - color 0.15s ease; - line-height: 1.4; - font-weight: 400; -} - -.menu__link:hover { - background-color: var(--ifm-menu-color-background-hover); - color: var(--primary); -} - -.menu__link--active { - font-weight: 500; - background-color: var(--ifm-menu-color-background-active); - color: var(--primary); -} - -.menu__list-item-collapsible { - border-radius: 0.375rem; - font-weight: 500; -} - -.menu__list-item-collapsible:hover { - background-color: var(--ifm-menu-color-background-hover); -} - -.menu__list-item-collapsible--active { - background-color: var(--ifm-menu-color-background-active); -} - -.menu__caret { - padding: 0.25rem; -} - -.menu__caret:before, -.menu__link--sublist-caret:after { - transition: transform 0.15s ease; - -webkit-transition: transform 0.15s ease; - opacity: 0.7; -} - -/* 子菜单样式 */ -.menu__list .menu__list { - margin-top: 0.15rem; - margin-bottom: 0.25rem; - border-left: 1px solid var(--border-color); - margin-left: 0.75rem; - padding-left: 0.5rem; -} - -html[data-theme="dark"] .menu__list .menu__list { - border-left-color: rgba(74, 85, 104, 0.4); -} - -.menu__list .menu__list .menu__link { - padding: 0.35rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - color: var(--text-secondary); -} - -.menu__list .menu__list .menu__link--active { - color: var(--primary); - font-weight: 500; -} - -/* 分类标题 */ -.menu__list-item-category-doc-label { - color: var(--text-primary); - font-size: 1rem; - font-weight: 600; - margin-top: 1.5rem; - margin-bottom: 0.75rem; - padding: 0 0.5rem; -} - -/* 移动端侧边栏 */ -.navbar-sidebar { - background-color: var(--bg-card); -} - -.navbar-sidebar__backdrop { - background-color: rgba(0, 0, 0, 0.6); - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); -} - -.navbar-sidebar__close { - padding: 0.5rem; - color: var(--primary); -} - -.navbar-sidebar__item { - padding: 0.75rem 1rem; -} - -.navbar-sidebar__brand { - border-bottom: 1px solid var(--border-color); - padding: 0.75rem 1rem; -} - -/* ====================================== - 6. 主页特定样式 -====================================== */ -.heroTitle, -.heroSubtitle { - color: white !important; -} - -.heroBanner { - background: linear-gradient(135deg, #25a06e, #1c7b54); - padding: 5rem 0; -} - -.primaryButton { - background-color: white !important; - color: var(--primary) !important; - font-weight: 600 !important; - border: none !important; - padding: 0.8rem 2rem !important; - border-radius: 8px !important; - transition: all 0.3s ease !important; - -webkit-transition: all 0.3s ease !important; - box-shadow: var(--shadow-md) !important; - -webkit-box-shadow: var(--shadow-md) !important; -} - -.primaryButton:hover { - transform: translateY(-2px) !important; - -webkit-transform: translateY(-2px) !important; - box-shadow: var(--shadow-lg) !important; - -webkit-box-shadow: var(--shadow-lg) !important; -} - -.secondaryButton { - background-color: rgba(255, 255, 255, 0.2) !important; - color: white !important; - border: none !important; -} - -.secondaryButton:hover { - background-color: rgba(255, 255, 255, 0.3) !important; -} - -.homepage .navbar { - background-color: transparent !important; - position: absolute; - width: 100%; - z-index: 10; - box-shadow: none !important; -} - -.homepage .navbar-sidebar { - background-color: var(--bg-card); -} - -.homepage .main-wrapper { - padding: 0; -} - -/* ====================================== - 7. 卡片样式 -====================================== */ -/* 文档导航卡片 */ -a.card.padding--lg.cardContainer_fWXF { - border-radius: 8px; - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.02), - 0 1px 3px rgba(0, 0, 0, 0.03); - -webkit-box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.02), - 0 1px 3px rgba(0, 0, 0, 0.03); - border: 1px solid var(--border-color); - transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); - -webkit-transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); - padding: 1.5rem !important; - text-decoration: none !important; - display: flex; - flex-direction: column; - background-color: var(--bg-card); - position: relative; - overflow: hidden; - height: 100%; -} - -a.card.padding--lg.cardContainer_fWXF:hover { - transform: translateY(-2px); - -webkit-transform: translateY(-2px); - box-shadow: - 0 6px 16px rgba(0, 0, 0, 0.05), - 0 2px 4px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: - 0 6px 16px rgba(0, 0, 0, 0.05), - 0 2px 4px rgba(0, 0, 0, 0.04); - border-color: rgba(37, 160, 110, 0.3); -} - -a.card.padding--lg.cardContainer_fWXF:after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(to right, var(--primary), var(--primary-light)); - opacity: 0; - transform: scaleX(0.6) translateY(3px); - -webkit-transform: scaleX(0.6) translateY(3px); - transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); - -webkit-transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); -} - -a.card.padding--lg.cardContainer_fWXF:hover:after { - opacity: 1; - transform: scaleX(1) translateY(0); - -webkit-transform: scaleX(1) translateY(0); -} - -a.card.padding--lg.cardContainer_fWXF h2 { - margin-top: 0; - margin-bottom: 1rem; - font-size: 1.35rem; - font-weight: 600; - color: var(--ifm-heading-color); - display: flex; - align-items: center; -} - -a.card.padding--lg.cardContainer_fWXF img { - width: 24px; - height: 24px; - margin-right: 10px; - border-radius: 4px; -} - -a.card.padding--lg.cardContainer_fWXF p { - margin-bottom: 0; - font-size: 0.925rem; - color: var(--text-secondary); - line-height: 1.5; -} - -a.card.padding--lg.cardContainer_fWXF footer { - margin-top: auto; - padding-top: 0.875rem; - font-size: 0.8125rem; - color: var(--primary); - display: flex; - justify-content: space-between; - align-items: center; -} - -/* 针对卡片布局的响应式调整 */ -.row .col--6 { - margin-bottom: 1.25rem; -} - -/* 暗色模式适配 */ -html[data-theme="dark"] a.card.padding--lg.cardContainer_fWXF { - background-color: rgba(45, 55, 72, 0.8); - border-color: var(--border-color); - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.07), - 0 1px 3px rgba(0, 0, 0, 0.1); - -webkit-box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.07), - 0 1px 3px rgba(0, 0, 0, 0.1); -} - -html[data-theme="dark"] a.card.padding--lg.cardContainer_fWXF:hover { - box-shadow: - 0 6px 16px rgba(0, 0, 0, 0.15), - 0 2px 4px rgba(0, 0, 0, 0.12); - -webkit-box-shadow: - 0 6px 16px rgba(0, 0, 0, 0.15), - 0 2px 4px rgba(0, 0, 0, 0.12); - border-color: rgba(54, 192, 133, 0.3); - background-color: rgba(45, 55, 72, 0.9); -} - -/* ====================================== - 8. 布局与容器 -====================================== */ -html, -body { - overflow-x: hidden; - width: 100%; - max-width: 100%; -} - -.main-wrapper { - background-color: var(--ifm-background-color); - min-height: 100vh; - width: 100%; - max-width: 100%; - overflow-x: hidden; - position: relative; -} - -/* 确保文档容器背景色通铺 */ -.container { - background-color: transparent; - width: 100%; - max-width: 100%; - box-sizing: border-box; -} - -@media screen and (min-width: 997px) { - .homepage .container { - max-width: 100%; - padding: 0; - } -} - -/* 修复暗色模式下主内容区域 - 移除容器背景色 */ -html[data-theme="dark"] .main-wrapper, -html[data-theme="dark"] article { - background-color: var(--ifm-background-color); -} - -html[data-theme="dark"] .container { - background-color: transparent; -} - -/* 文章内容区域通铺样式 */ -.markdown { - background-color: var(--ifm-background-color); - overflow: visible; - width: 100%; - max-width: 100%; - box-sizing: border-box; -} - -/* 防止所有内容溢出 */ -.markdown > *, -.markdown pre, -.markdown code, -.markdown table { - max-width: 100%; - overflow-x: auto; - box-sizing: border-box; -} - -/* 文章页面背景 */ -.docs-wrapper { - background-color: var(--ifm-background-color); -} - -/* 修复首页背景 */ -.homepage main { - background-color: var(--ifm-background-color); -} - -/* ====================================== - 9. 链接样式 -====================================== */ -a.github-link { - display: inline-flex; - align-items: center; - color: var(--ifm-color-primary); - font-weight: 500; - text-decoration: none; - transition: color 0.2s ease; - -webkit-transition: color 0.2s ease; - position: relative; -} - -a.github-link:hover { - color: var(--ifm-color-primary-dark); - text-decoration: none; -} - -a.github-link::before { - content: "🔗"; - margin-right: 4px; - font-size: 0.9em; -} - -/* ====================================== - 10. 页脚样式 -====================================== */ -.footer { - background-color: var(--bg-card); - color: var(--text-secondary); - padding: 2rem 0; - border-top: 1px solid var(--border-color); -} - -/* 确保页脚内的容器也使用正确的背景色 */ -.footer .container, -.footer .container-fluid { - background-color: var(--bg-card); -} - -.footer__links { - background-color: var(--bg-card); -} - -.footer__bottom { - background-color: var(--bg-card); -} - -.footer__link-item { - color: var(--text-secondary); - transition: color 0.2s ease; - -webkit-transition: color 0.2s ease; -} - -.footer__link-item:hover { - color: var(--primary); - text-decoration: none; -} - -.footer__title { - color: var(--text-primary); - font-weight: 600; -} - -.footer__copyright { - color: var(--text-light); - font-size: 0.85rem; -} - -/* 暗色模式页脚样式适配 */ -html[data-theme="dark"] .footer, -html[data-theme="dark"] .footer .container, -html[data-theme="dark"] .footer .container-fluid, -html[data-theme="dark"] .footer__links, -html[data-theme="dark"] .footer__bottom { - background-color: var(--bg-card); - border-top-color: var(--border-color); -} - -/* ====================================== - 11. 折叠区域样式 -====================================== */ -details.details_lb9f, -details.details_b_Ee { - border: 1px solid var(--border-color); - border-radius: 8px; - margin-bottom: 1.25rem; - box-shadow: none; - overflow: hidden; - background-color: var(--bg-card); - transition: all 0.2s ease; - -webkit-transition: all 0.2s ease; -} - -details.details_lb9f:hover, -details.details_b_Ee:hover { - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); - -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); -} - -/* Summary 标题样式 */ -details summary { - padding: 0.75rem 1rem; - font-weight: 500; - cursor: pointer; - display: flex; - align-items: center; - position: relative; - color: var(--text-primary); - background-color: var(--bg-card); - border-bottom: none; - transition: all 0.2s ease; - -webkit-transition: all 0.2s ease; -} - -details[open] summary { - border-bottom-color: transparent; - color: var(--primary); -} - -details summary:hover { - color: var(--primary); -} - -details summary::before { - content: none; -} - -details summary::after { - content: "▶"; - font-size: 0.75em; - margin-left: auto; - color: var(--primary); - transition: transform 0.15s ease; - -webkit-transition: transform 0.15s ease; -} - -details[open] summary::after { - transform: rotate(90deg); - -webkit-transform: rotate(90deg); -} - -/* 为details添加一个更具体的选择器来覆盖可能存在的其他样式 */ -details.details_lb9f summary::before, -details.details_b_Ee summary::before, -details summary::before, -.theme-doc-toc details summary::before, -.alert details summary::before { - content: none !important; - display: none !important; -} - -/* 移除可能在左侧内边距或其他位置显示的图标 */ -details.details_lb9f summary, -details.details_b_Ee summary { - padding-left: 1rem !important; -} - -/* 折叠内容区域样式 */ -.collapsibleContent_i85q { - padding: 1rem; -} - -/* 图片样式优化 */ -.collapsibleContent_i85q img { - border-radius: 4px; - display: block; - margin: 0 auto 0.75rem; - max-width: 100%; - border: 1px solid var(--border-color); -} - -/* 链接样式优化 */ -.collapsibleContent_i85q a { - color: var(--primary); - font-weight: 500; - text-decoration: none; - transition: all 0.2s ease; - -webkit-transition: all 0.2s ease; -} - -.collapsibleContent_i85q a:hover { - text-decoration: underline; -} - -/* 暗色模式适配 */ -html[data-theme="dark"] details.details_lb9f, -html[data-theme="dark"] details.details_b_Ee { - background-color: var(--bg-card); - border-color: var(--border-color); - box-shadow: none; -} - -/* ====================================== - 12. 特性卡片样式 -====================================== */ -/* 修复特性区域卡片和文字样式 */ -html[data-theme="dark"] .features_t9lD { - background-color: var(--bg-dark) !important; -} - -/* 卡片本身 */ -html[data-theme="dark"] .featureCard_B6MD, -html[data-theme="dark"] [class*="featureCard"] { - background-color: var(--bg-card) !important; - border: 1px solid var(--border-color); - border-bottom: 2px solid var(--primary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; - -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; -} - -html[data-theme="dark"] .featureCard_B6MD:hover, -html[data-theme="dark"] [class*="featureCard"]:hover { - transform: translateY(-4px); - -webkit-transform: translateY(-4px); - border-color: var(--primary); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; - -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; -} - -/* 标题使用主题色 */ -html[data-theme="dark"] .featureTitle_WnBL, -html[data-theme="dark"] [class*="featureTitle"] { - color: var(--primary) !important; - font-weight: 600; -} - -/* 图标移除阴影 */ -html[data-theme="dark"] .featureSvg_a16W, -html[data-theme="dark"] [class*="featureSvg"] { - filter: none; -} - -/* 确保文字主题色 */ -html[data-theme="dark"] .sectionTitle_KoEj, -html[data-theme="dark"] [class*="sectionTitle"] { - color: var(--text-primary); -} - -html[data-theme="dark"] span.text--primary { - color: var(--primary) !important; -} - -/* 主页底部CTA区域暗色模式 */ -html[data-theme="dark"] .footerCta_iqgm, -html[data-theme="dark"] [class*="footerCta"] { - background-color: var(--bg-card) !important; -} - -html[data-theme="dark"] .footerCtaTitle_VTvf, -html[data-theme="dark"] [class*="footerCtaTitle"] { - color: var(--text-primary); -} - -html[data-theme="dark"] .footerCtaSubtitle_pLXE, -html[data-theme="dark"] [class*="footerCtaSubtitle"] { - color: var(--text-secondary); -} - -html[data-theme="dark"] .textHighlight_tecp, -html[data-theme="dark"] [class*="textHighlight"] { - color: var(--primary) !important; -} - -/* 特性卡片统一样式（亮色与暗色模式） */ -/* 卡片基础样式 - 亮色模式 */ -.featureCard_B6MD, -[class*="featureCard"] { - background-color: var(--bg-card) !important; - border: 1px solid var(--border-color); - border-bottom: 2px solid var(--primary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; - -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; - transition: all 0.3s ease; - -webkit-transition: all 0.3s ease; - border-radius: 8px; -} - -.featureCard_B6MD:hover, -[class*="featureCard"]:hover { - transform: translateY(-4px); - -webkit-transform: translateY(-4px); - border-color: var(--primary); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; - -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; -} - -/* 标题样式 - 亮色模式 */ -.featureTitle_WnBL, -[class*="featureTitle"] { - color: var(--primary) !important; - font-weight: 600; -} - -/* ====================================== - 13. 响应式调整 -====================================== */ -/* 主页按钮在移动端的响应式调整 */ -@media screen and (max-width: 768px) { - .primaryButton, - .secondaryButton, - .button.button--primary.button--lg { - position: relative; - z-index: 10; - display: inline-block; - width: auto; - min-width: 120px; - margin: 0.5rem; - padding: 0.75rem 1.5rem !important; - font-size: 1rem !important; - } - - /* 确保按钮容器在移动端正确显示 */ - .buttons { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-top: 1.5rem; - z-index: 10; - position: relative; - } - - /* 确保hero区域内容不被装饰元素遮挡 */ - .heroBanner .container { - position: relative; - z-index: 5; - } - - /* 调整装饰元素，避免干扰按钮点击 */ - .decorationDot { - z-index: 1; - opacity: 0.5; - } -} - -/* ====================================== - 14. Alert样式 -====================================== */ -/* Alert 信息 样式 */ -.alert--info { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-border-color: var(--primary); - --ifm-alert-color: var(--text-primary); - border-left: 3px solid var(--primary); -} - -html[data-theme="dark"] .alert--info { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-color: var(--text-primary); -} - -/* Alert 警告 样式 */ -.alert--warning { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-border-color: #f0b429; - --ifm-alert-color: var(--text-primary); - border-left: 3px solid #f0b429; -} - -html[data-theme="dark"] .alert--warning { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-color: var(--text-primary); -} - -/* Alert 危险 样式 */ -.alert--danger { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-border-color: #ef4444; - --ifm-alert-color: var(--text-primary); - border-left: 3px solid #ef4444; -} - -html[data-theme="dark"] .alert--danger { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-color: var(--text-primary); -} - -/* Alert 成功 样式 */ -.alert--success { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-border-color: #10b981; - --ifm-alert-color: var(--text-primary); - border-left: 3px solid #10b981; -} - -html[data-theme="dark"] .alert--success { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-color: var(--text-primary); -} - -/* Alert 次要 样式 */ -.alert--secondary { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-border-color: #8b5cf6; - --ifm-alert-color: var(--text-primary); - border-left: 3px solid #8b5cf6; -} - -html[data-theme="dark"] .alert--secondary { - --ifm-alert-background-color: var(--bg-card); - --ifm-alert-color: var(--text-primary); -} - -/* ====================================== - 15. 滚动条样式 -====================================== */ -/* WebKit 浏览器 (Chrome, Safari, Edge) */ -::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -::-webkit-scrollbar-track { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background: rgba(160, 174, 192, 0.3); - border-radius: 100px; - transition: all 0.2s ease; - -webkit-transition: all 0.2s ease; -} - -::-webkit-scrollbar-thumb:hover { - background: rgba(160, 174, 192, 0.5); -} - -::-webkit-scrollbar-corner { - background: transparent; -} - -/* Firefox 浏览器 */ -* { - scrollbar-width: thin; - scrollbar-color: rgba(160, 174, 192, 0.3) transparent; -} - -/* 暗色模式滚动条 */ -html[data-theme="dark"] ::-webkit-scrollbar-thumb { - background: rgba(74, 85, 104, 0.4); -} - -html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { - background: rgba(74, 85, 104, 0.6); -} - -html[data-theme="dark"] * { - scrollbar-color: rgba(74, 85, 104, 0.4) transparent; -} - -/* 为代码块和特定容器添加不同的滚动条样式 */ -pre::-webkit-scrollbar, -.code-block::-webkit-scrollbar { - width: 4px; - height: 4px; -} - -pre::-webkit-scrollbar-thumb, -.code-block::-webkit-scrollbar-thumb { - background: rgba(37, 160, 110, 0.3); -} - -pre::-webkit-scrollbar-thumb:hover, -.code-block::-webkit-scrollbar-thumb:hover { - background: rgba(37, 160, 110, 0.5); -} - -pre, -.code-block { - scrollbar-width: thin; - scrollbar-color: rgba(37, 160, 110, 0.3) transparent; -} diff --git a/src/css/utilities/animations.css b/src/css/utilities/animations.css index b9c893f06..6e5a36027 100644 --- a/src/css/utilities/animations.css +++ b/src/css/utilities/animations.css @@ -1,8 +1,259 @@ +/* ====================================== + NitWikit 动画样式 + 克制设计 + 流畅过渡 +====================================== */ + +/* ====================================== + 减少动画偏好 +====================================== */ @media (prefers-reduced-motion: reduce) { - * { + *, + *::before, + *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } + +/* ====================================== + 淡入动画 +====================================== */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ====================================== + 动画工具类 +====================================== */ +.animate-fade-in { + animation: fadeIn var(--transition-base) ease-out; +} + +.animate-fade-in-up { + animation: fadeInUp var(--transition-slow) ease-out; +} + +.animate-fade-in-down { + animation: fadeInDown var(--transition-slow) ease-out; +} + +/* ====================================== + 延迟动画 +====================================== */ +.animation-delay-100 { + animation-delay: 100ms; +} + +.animation-delay-200 { + animation-delay: 200ms; +} + +.animation-delay-300 { + animation-delay: 300ms; +} + +.animation-delay-400 { + animation-delay: 400ms; +} + +.animation-delay-500 { + animation-delay: 500ms; +} + +/* ====================================== + 悬停过渡基础 +====================================== */ +.transition-colors { + transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); +} + +.transition-opacity { + transition: opacity var(--transition-fast); +} + +.transition-transform { + transition: transform var(--transition-fast); +} + +.transition-all { + transition: all var(--transition-base); +} + +/* ====================================== + 悬停效果 +====================================== */ +.hover-lift { + transition: transform var(--transition-fast); +} + +.hover-lift:hover { + transform: translateY(-2px); +} + +.hover-scale { + transition: transform var(--transition-fast); +} + +.hover-scale:hover { + transform: scale(1.02); +} + +/* ====================================== + 脉冲动画（用于提示） +====================================== */ +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +/* ====================================== + 旋转动画（用于加载） +====================================== */ +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.animate-spin { + animation: spin 1s linear infinite; +} + +/* ====================================== + 移动端侧边栏动画 +====================================== */ +@keyframes slideInLeft { + from { + opacity: 0; + transform: translateX(-100%); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideOutLeft { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(-100%); + } +} + +@keyframes backdropFadeIn { + from { + opacity: 0; + backdrop-filter: blur(0); + } + to { + opacity: 1; + backdrop-filter: blur(4px); + } +} + +/* 侧边栏打开动画 */ +.navbar-sidebar--show { + animation: slideInLeft 280ms cubic-bezier(0.32, 0.72, 0, 1); +} + +/* 背景遮罩动画 */ +.navbar-sidebar__backdrop { + animation: backdropFadeIn 200ms ease-out; +} + +/* 菜单项交错动画 */ +@keyframes menuItemSlideIn { + from { + opacity: 0; + transform: translateX(-12px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +/* 移动端菜单项入场动画 */ +@media (max-width: 996px) { + .navbar-sidebar--show .menu__list-item { + animation: menuItemSlideIn 250ms ease-out backwards; + } + + .navbar-sidebar--show .menu__list-item:nth-child(1) { animation-delay: 50ms; } + .navbar-sidebar--show .menu__list-item:nth-child(2) { animation-delay: 80ms; } + .navbar-sidebar--show .menu__list-item:nth-child(3) { animation-delay: 110ms; } + .navbar-sidebar--show .menu__list-item:nth-child(4) { animation-delay: 140ms; } + .navbar-sidebar--show .menu__list-item:nth-child(5) { animation-delay: 170ms; } + .navbar-sidebar--show .menu__list-item:nth-child(6) { animation-delay: 200ms; } + .navbar-sidebar--show .menu__list-item:nth-child(7) { animation-delay: 230ms; } + .navbar-sidebar--show .menu__list-item:nth-child(8) { animation-delay: 260ms; } + .navbar-sidebar--show .menu__list-item:nth-child(9) { animation-delay: 290ms; } + .navbar-sidebar--show .menu__list-item:nth-child(10) { animation-delay: 320ms; } + + /* 嵌套菜单展开动画 */ + .menu__list .menu__list { + animation: fadeInUp 200ms ease-out; + } + + /* 触摸反馈动画 */ + .menu__link:active, + .navbar__link:active { + transform: scale(0.98); + transition: transform 50ms ease-out; + } + + /* 展开箭头旋转动画优化 */ + .menu__caret::before, + .menu__link--sublist-caret::after { + transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); + } + + /* 活动指示条动画 */ + .menu__link--active { + transition: all var(--transition-fast), border-left-color 150ms ease-out; + } +} \ No newline at end of file diff --git a/src/css/utilities/responsive.css b/src/css/utilities/responsive.css index 0190c8adb..271d0ae88 100644 --- a/src/css/utilities/responsive.css +++ b/src/css/utilities/responsive.css @@ -1,13 +1,131 @@ +/* ====================================== + NitWikit 响应式工具类 +====================================== */ + +/* ====================================== + 容器最大宽度 +====================================== */ +.container { + max-width: 80rem; + margin-left: auto; + margin-right: auto; + padding-left: 1.5rem; + padding-right: 1.5rem; +} + @media (max-width: 996px) { .container { - padding-left: 1.5rem; - padding-right: 1.5rem; + padding-left: 1.25rem; + padding-right: 1.25rem; } } -@media (max-width: 576px) { +@media (max-width: 540px) { .container { padding-left: 1rem; padding-right: 1rem; } } + +/* ====================================== + 显示/隐藏工具类 +====================================== */ +.hidden { + display: none !important; +} + +.visible { + visibility: visible !important; +} + +.invisible { + visibility: hidden !important; +} + +/* 仅移动端显示 */ +.mobile-only { + display: none !important; +} + +@media (max-width: 996px) { + .mobile-only { + display: block !important; + } +} + +/* 仅桌面端显示 */ +.desktop-only { + display: block !important; +} + +@media (max-width: 996px) { + .desktop-only { + display: none !important; + } +} + +/* ====================================== + 间距工具类 +====================================== */ +.mt-0 { margin-top: 0 !important; } +.mt-1 { margin-top: 0.25rem !important; } +.mt-2 { margin-top: 0.5rem !important; } +.mt-3 { margin-top: 0.75rem !important; } +.mt-4 { margin-top: 1rem !important; } +.mt-6 { margin-top: 1.5rem !important; } +.mt-8 { margin-top: 2rem !important; } + +.mb-0 { margin-bottom: 0 !important; } +.mb-1 { margin-bottom: 0.25rem !important; } +.mb-2 { margin-bottom: 0.5rem !important; } +.mb-3 { margin-bottom: 0.75rem !important; } +.mb-4 { margin-bottom: 1rem !important; } +.mb-6 { margin-bottom: 1.5rem !important; } +.mb-8 { margin-bottom: 2rem !important; } + +/* ====================================== + 文本对齐 +====================================== */ +.text-left { text-align: left !important; } +.text-center { text-align: center !important; } +.text-right { text-align: right !important; } + +/* ====================================== + Flex 工具类 +====================================== */ +.flex { display: flex !important; } +.inline-flex { display: inline-flex !important; } +.flex-col { flex-direction: column !important; } +.flex-row { flex-direction: row !important; } +.flex-wrap { flex-wrap: wrap !important; } +.items-center { align-items: center !important; } +.items-start { align-items: flex-start !important; } +.items-end { align-items: flex-end !important; } +.justify-center { justify-content: center !important; } +.justify-between { justify-content: space-between !important; } +.justify-start { justify-content: flex-start !important; } +.justify-end { justify-content: flex-end !important; } +.gap-1 { gap: 0.25rem !important; } +.gap-2 { gap: 0.5rem !important; } +.gap-3 { gap: 0.75rem !important; } +.gap-4 { gap: 1rem !important; } +.gap-6 { gap: 1.5rem !important; } + +/* ====================================== + Grid 工具类 +====================================== */ +.grid { display: grid !important; } +.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } +.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } +.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } + +@media (max-width: 768px) { + .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } +} + +/* ====================================== + 宽度工具类 +====================================== */ +.w-full { width: 100% !important; } +.max-w-full { max-width: 100% !important; } +.max-w-prose { max-width: 65ch !important; } diff --git a/src/css/utilities/scrollbar.css b/src/css/utilities/scrollbar.css index b9dc33fd5..876843267 100644 --- a/src/css/utilities/scrollbar.css +++ b/src/css/utilities/scrollbar.css @@ -1,3 +1,11 @@ +/* ====================================== + NitWikit 滚动条样式 + 细窄设计 + 主题适配 +====================================== */ + +/* ====================================== + 全局滚动条 - WebKit +====================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; @@ -8,18 +16,82 @@ } ::-webkit-scrollbar-thumb { - background: rgba(160, 174, 192, 0.3); + background: var(--slate-300); border-radius: 100px; + transition: background var(--transition-fast); } ::-webkit-scrollbar-thumb:hover { - background: rgba(160, 174, 192, 0.5); + background: var(--slate-400); +} + +::-webkit-scrollbar-corner { + background: transparent; +} + +/* ====================================== + 全局滚动条 - Firefox +====================================== */ +* { + scrollbar-width: thin; + scrollbar-color: var(--slate-300) transparent; +} + +/* ====================================== + 暗色模式滚动条 +====================================== */ +[data-theme="dark"] ::-webkit-scrollbar-thumb { + background: var(--slate-600); +} + +[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { + background: var(--slate-500); +} + +[data-theme="dark"] * { + scrollbar-color: var(--slate-600) transparent; +} + +/* ====================================== + 代码块滚动条 - 更细 +====================================== */ +pre::-webkit-scrollbar, +.code-block::-webkit-scrollbar { + width: 4px; + height: 4px; +} + +pre::-webkit-scrollbar-thumb, +.code-block::-webkit-scrollbar-thumb { + background: var(--slate-400); +} + +pre::-webkit-scrollbar-thumb:hover, +.code-block::-webkit-scrollbar-thumb:hover { + background: var(--slate-500); +} + +[data-theme="dark"] pre::-webkit-scrollbar-thumb, +[data-theme="dark"] .code-block::-webkit-scrollbar-thumb { + background: var(--slate-600); +} + +[data-theme="dark"] pre::-webkit-scrollbar-thumb:hover, +[data-theme="dark"] .code-block::-webkit-scrollbar-thumb:hover { + background: var(--slate-500); +} + +/* ====================================== + 侧边栏滚动条 +====================================== */ +.menu::-webkit-scrollbar { + width: 4px; } -html[data-theme="dark"] ::-webkit-scrollbar-thumb { - background: rgba(74, 85, 104, 0.4); +.menu::-webkit-scrollbar-thumb { + background: var(--slate-300); } -html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { - background: rgba(74, 85, 104, 0.6); +[data-theme="dark"] .menu::-webkit-scrollbar-thumb { + background: var(--slate-700); } diff --git a/src/css/utilities/search.css b/src/css/utilities/search.css index e69de29bb..157a9ff72 100644 --- a/src/css/utilities/search.css +++ b/src/css/utilities/search.css @@ -0,0 +1,202 @@ +/* ====================================== + NitWikit 搜索样式 + Algolia DocSearch 适配 +====================================== */ + +/* ====================================== + 搜索按钮 +====================================== */ +.DocSearch-Button { + background: var(--bg-card) !important; + border: 1px solid var(--border) !important; + border-radius: var(--radius-md) !important; + padding: 0 0.75rem !important; + height: 2rem !important; + transition: all var(--transition-fast) !important; + color: var(--text-secondary) !important; + font-weight: 400 !important; + gap: 0.5rem !important; +} + +.DocSearch-Button:hover { + background: var(--bg-muted) !important; + border-color: var(--primary-alpha-border) !important; + box-shadow: 0 0 0 2px var(--primary-alpha-10) !important; +} + +.DocSearch-Button-Placeholder { + font-size: 0.8125rem !important; + color: var(--text-light) !important; +} + +.DocSearch-Button-Keys { + display: flex !important; + gap: 0.125rem !important; + min-width: auto !important; +} + +.DocSearch-Button-Key { + background: var(--bg-muted) !important; + border: 1px solid var(--border-light) !important; + border-radius: var(--radius-sm) !important; + padding: 0 0.25rem !important; + font-size: 0.625rem !important; + color: var(--text-light) !important; + box-shadow: none !important; + width: auto !important; + height: 1.25rem !important; + line-height: 1.25rem !important; +} + +/* ====================================== + 搜索模态框 +====================================== */ +.DocSearch-Modal { + --docsearch-modal-background: var(--bg-card) !important; + --docsearch-text-color: var(--text-primary) !important; + --docsearch-muted-color: var(--text-secondary) !important; + --docsearch-searchbox-background: var(--bg-muted) !important; + --docsearch-searchbox-focus-background: var(--bg-card) !important; + --docsearch-hit-background: var(--bg-muted) !important; + --docsearch-hit-color: var(--text-primary) !important; + --docsearch-highlight-color: var(--primary-text) !important; + --docsearch-footer-background: var(--bg-muted) !important; + --docsearch-key-gradient: var(--bg-elevated) !important; + --docsearch-key-shadow: none !important; + border-radius: var(--radius-lg) !important; + border: 1px solid var(--border) !important; + box-shadow: var(--shadow-lg) !important; +} + +.DocSearch-SearchBar { + padding: 0.875rem !important; +} + +.DocSearch-Form { + border-radius: var(--radius-md) !important; + border: 1px solid var(--border) !important; +} + +.DocSearch-Input { + font-size: 0.9375rem !important; + padding-left: 0.5rem !important; +} + +.DocSearch-Hit a { + border-radius: var(--radius-md) !important; + padding: 0.75rem !important; +} + +.DocSearch-Hit[aria-selected="true"] a { + background: var(--primary-alpha-10) !important; + border-color: var(--primary-alpha-border) !important; +} + +.DocSearch-Hit-title { + font-weight: 500 !important; + font-size: 0.875rem !important; +} + +.DocSearch-Hit-path { + color: var(--text-light) !important; + font-size: 0.75rem !important; +} + +.DocSearch-Footer { + border-top: 1px solid var(--border) !important; +} + +/* ====================================== + 暗色模式 +====================================== */ +[data-theme="dark"] .DocSearch-Button { + background: var(--bg-card) !important; + border-color: var(--border) !important; +} + +[data-theme="dark"] .DocSearch-Button:hover { + background: var(--bg-elevated) !important; + border-color: var(--primary-alpha-border) !important; +} + +[data-theme="dark"] .DocSearch-Button-Key { + background: var(--bg-elevated) !important; + border-color: var(--border) !important; +} + +[data-theme="dark"] .DocSearch-Modal { + --docsearch-highlight-color: var(--primary) !important; +} + +[data-theme="dark"] .DocSearch-Form { + border-color: var(--border) !important; +} + +/* ====================================== + 移动端响应式 +====================================== */ +@media (max-width: 996px) { + .DocSearch-Button { + padding: 0 0.625rem !important; + /* 确保触摸目标足够大 */ + min-height: 36px !important; + min-width: 36px !important; + } + + .DocSearch-Button-Placeholder { + display: none !important; + } + + .DocSearch-Button-Keys { + display: none !important; + } + + .DocSearch-Search-Icon { + width: 18px !important; + height: 18px !important; + } +} + +@media (max-width: 540px) { + .DocSearch-Button { + min-height: 40px !important; + min-width: 40px !important; + padding: 0 0.5rem !important; + border-radius: var(--radius-md) !important; + } + + /* 搜索模态框移动端全屏优化 */ + .DocSearch-Modal { + border-radius: 0 !important; + max-width: 100vw !important; + margin: 0 !important; + height: 100vh !important; + max-height: 100vh !important; + } + + .DocSearch-SearchBar { + padding: 0.75rem !important; + } + + .DocSearch-Input { + font-size: 16px !important; /* 防止 iOS 缩放 */ + padding-left: 0.375rem !important; + } + + .DocSearch-Hit a { + padding: 0.625rem !important; + } + + .DocSearch-Hit-title { + font-size: 0.8125rem !important; + } + + .DocSearch-Hit-path { + font-size: 0.6875rem !important; + } + + .DocSearch-Footer { + padding: 0.625rem 0.75rem !important; + } +} + diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index f018b303d..b021fb2b4 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -1,69 +1,235 @@ +/* ====================================== + NitWikit 主页样式 - 借鉴 Nuxt 设计系统 + 包含渐变、装饰圆、动画效果 +====================================== */ + +/* ====================================== + 页面容器 +====================================== */ .page { min-height: 100vh; - background: var(--ifm-background-color); - color: var(--ifm-font-color-base); + background: var(--bg-dark); + color: var(--text-primary); display: flex; align-items: center; justify-content: center; margin-top: calc(-1 * var(--ifm-navbar-height, 60px)); padding-top: var(--ifm-navbar-height, 60px); + position: relative; + overflow: hidden; } +[data-theme="light"] .page { + background: var(--bg-light); +} + +/* ====================================== + 顶部渐变装饰 +====================================== */ +.page::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 400px; + background: linear-gradient( + 180deg, + rgba(0, 220, 130, 0.08) 0%, + rgba(0, 220, 130, 0.03) 40%, + transparent 100% + ); + pointer-events: none; + z-index: 0; +} + +/* 顶部横向渐变线 */ +.page::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient( + 90deg, + transparent 0%, + rgba(0, 220, 130, 0.4) 50%, + transparent 100% + ); + pointer-events: none; + z-index: 1; +} + +/* ====================================== + 装饰性模糊圆形 +====================================== */ +.decorCircle { + position: absolute; + border-radius: 50%; + filter: blur(100px); + pointer-events: none; + z-index: 0; + // 移动端减少模糊半径以提升性能 + @media (max-width: 768px) { + filter: blur(60px); + } +} + +.decorCircle1 { + top: -200px; + right: -100px; + width: 500px; + height: 500px; + background: rgba(0, 220, 130, 0.08); + // 移动端缩小尺寸 + @media (max-width: 768px) { + width: 300px; + height: 300px; + top: -150px; + right: -80px; + } + @media (max-width: 540px) { + width: 200px; + height: 200px; + opacity: 0.6; + } +} + +.decorCircle2 { + bottom: -150px; + left: -100px; + width: 400px; + height: 400px; + background: rgba(0, 220, 130, 0.05); + // 移动端缩小尺寸 + @media (max-width: 768px) { + width: 250px; + height: 250px; + bottom: -100px; + left: -60px; + } + @media (max-width: 540px) { + display: none; // 小屏隐藏次要装饰 + } +} + +.decorCircle3 { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 600px; + height: 600px; + background: rgba(0, 220, 130, 0.03); + // 移动端缩小尺寸 + @media (max-width: 768px) { + width: 350px; + height: 350px; + } + @media (max-width: 540px) { + width: 250px; + height: 250px; + } +} + +/* ====================================== + Hero 区域 - 左右分栏布局 +====================================== */ .hero { display: grid; - grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); - gap: 48px; - max-width: 1100px; + grid-template-columns: 1.4fr 1fr; + gap: 64px; + max-width: 1400px; width: 100%; margin: 0 auto; - padding: 60px 24px; + padding: 80px 48px; + align-items: center; + position: relative; + z-index: 2; + + @media (max-width: 1200px) { + gap: 48px; + padding: 60px 32px; + } - @media (max-width: 1020px) { + @media (max-width: 996px) { grid-template-columns: 1fr; - padding: 100px 24px 80px; + padding: 80px 24px 60px; + gap: 40px; } - @media (max-width: 768px) { - padding: 96px 20px 72px; - gap: 28px; + @media (max-width: 540px) { + padding: 60px 20px 48px; + gap: 32px; } } +/* ====================================== + 左侧内容区 +====================================== */ .heroCopy { display: flex; flex-direction: column; - gap: 28px; + gap: 32px; h1 { margin: 0; - font-size: clamp(40px, 5vw, 56px); - letter-spacing: -0.02em; + font-size: clamp(48px, 6vw, 72px); + font-weight: 800; + letter-spacing: -0.03em; + line-height: 1.1; + color: var(--text-primary); + + // 高亮文字使用主色 + :global(.text-primary) { + color: var(--primary); + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } } p { margin: 0; - max-width: 620px; - font-size: 17px; - line-height: 1.8; - color: var(--ifm-color-emphasis-700); + max-width: 560px; + font-size: 18px; + line-height: 1.85; + color: var(--text-secondary); @media (max-width: 540px) { + font-size: 16px; max-width: none; } } - @media (max-width: 1020px) { - gap: 24px; + @media (max-width: 996px) { + gap: 28px; + text-align: center; + align-items: center; + + p { + max-width: 600px; + } } } +/* ====================================== + 按钮组 +====================================== */ .heroButtons { display: flex; flex-wrap: wrap; - gap: 12px; + gap: 16px; - @media (max-width: 768px) { - gap: 10px; + @media (max-width: 996px) { + justify-content: center; + } + + @media (max-width: 540px) { + flex-direction: column; + width: 100%; + gap: 12px; } } @@ -72,114 +238,208 @@ display: inline-flex; align-items: center; justify-content: center; - padding: 12px 22px; - border-radius: 12px; + padding: 11px 22px; + border-radius: 8px; text-decoration: none; font-weight: 600; - transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; + font-size: 14px; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + border: none; + cursor: pointer; + // 确保移动端触摸目标足够大 (最小 44px) + min-height: 44px; @media (max-width: 540px) { width: 100%; + padding: 14px 20px; + font-size: 15px; } } .primaryButton { - background: var(--ifm-color-primary); - color: #fff !important; - box-shadow: 0 12px 24px rgba(37, 160, 110, 0.18); + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); + color: #020617 !important; + box-shadow: + 0 4px 14px rgba(0, 220, 130, 0.25), + 0 0 0 0 rgba(0, 220, 130, 0); + position: relative; + overflow: hidden; + + // 光泽效果 + &::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.5s ease; + } &:hover { + background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); + box-shadow: + 0 6px 20px rgba(0, 220, 130, 0.35), + 0 0 0 4px rgba(0, 220, 130, 0.1); transform: translateY(-2px); - box-shadow: 0 18px 34px rgba(37, 160, 110, 0.24); + text-decoration: none; + + &::before { + left: 100%; + } + } + + &:active { + transform: translateY(0); } } .secondaryButton { - background: var(--primary-alpha-bg); + background: rgba(255, 255, 255, 0.05); + color: var(--text-primary) !important; + border: 1px solid var(--border); + backdrop-filter: blur(8px); &:hover { - background: var(--primary-alpha-strong); - transform: translateY(-2px); + background: var(--primary-alpha-10); + border-color: var(--primary); + color: var(--primary) !important; + text-decoration: none; } } +[data-theme="light"] .secondaryButton { + background: rgba(0, 0, 0, 0.02); +} + +/* ====================================== + 统计数据 +====================================== */ .heroMetrics { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); - gap: 18px; - padding-top: 20px; - border-top: 1px solid var(--ifm-color-emphasis-200); + display: flex; + gap: 48px; + padding-top: 32px; + border-top: 1px solid var(--border); div { - padding: 14px 16px; - border-radius: 12px; - border: 1px solid var(--primary-alpha-border); - background: var(--primary-alpha-bg); - - @media (max-width: 768px) { - padding: 12px 14px; - } - - @media (max-width: 540px) { - padding: 10px 12px; - } + display: flex; + flex-direction: column; + gap: 4px; } strong { - display: block; - font-size: 26px; - color: var(--ifm-color-primary); + font-size: 32px; + font-weight: 700; + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + letter-spacing: -0.02em; } span { font-size: 14px; - color: var(--ifm-color-emphasis-600); + color: var(--text-secondary); + font-weight: 500; } - @media (max-width: 1020px) { - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - } - - @media (max-width: 768px) { - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); - gap: 14px; + @media (max-width: 996px) { + justify-content: center; } @media (max-width: 540px) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; + padding-top: 24px; + + strong { + font-size: 28px; + } + + span { + font-size: 13px; + } } } +/* ====================================== + 右侧导航面板 +====================================== */ .heroPanel { - border-radius: 12px; - border: 1px solid var(--ifm-color-emphasis-200); - background: var(--ifm-background-surface-color); - box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08); + border-radius: 16px; + border: 1px solid var(--border); + background: var(--bg-card); + overflow: hidden; display: flex; flex-direction: column; - - @media (max-width: 1020px) { + backdrop-filter: blur(12px); + box-shadow: + 0 20px 50px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.05) inset; + + @media (max-width: 996px) { + max-width: 500px; + margin: 0 auto; width: 100%; - max-width: none; - margin: 48px 0 0; - align-self: stretch; - } - - @media (max-width: 768px) { - padding: 0 6px; - margin-top: 16px; } @media (max-width: 540px) { - padding: 0 8px; + border-radius: 12px; + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.08), + 0 0 0 1px rgba(255, 255, 255, 0.03) inset; } } +[data-theme="dark"] .heroPanel { + background: rgba(15, 23, 42, 0.8); + box-shadow: + 0 20px 50px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.03) inset; +} + .panelHeader { - padding: 24px; - border-bottom: 1px solid var(--ifm-color-emphasis-200); - font-size: 14px; + padding: 20px 24px; + border-bottom: 1px solid var(--border); + font-size: 12px; font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.1em; + display: flex; + align-items: center; + gap: 8px; + + // 小圆点装饰 + &::before { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--primary); + animation: pulse 2s ease-in-out infinite; + } + + @media (max-width: 540px) { + padding: 16px 20px; + font-size: 11px; + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.5; + transform: scale(0.9); + } } .linkList { @@ -188,55 +448,131 @@ padding: 0; display: flex; flex-direction: column; - flex: 1; li { - flex: 1; display: flex; & + li { - border-top: 1px solid var(--ifm-color-emphasis-200); + border-top: 1px solid var(--border); } } a { + position: relative; display: flex; align-items: center; justify-content: space-between; - gap: 18px; + gap: 16px; padding: 20px 24px; + padding-left: 28px; text-decoration: none; color: inherit; - transition: background 0.2s ease; width: 100%; + transition: all 0.2s ease; + // 确保触摸目标足够大 + min-height: 72px; + + // 左侧指示条 + &::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 3px; + height: 0; + background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%); + border-radius: 0 2px 2px 0; + transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1); + } &:hover { - background: var(--primary-alpha-medium); + background: var(--primary-alpha-5); + text-decoration: none; + + &::before { + height: 60%; + } + + span:last-child { + transform: translateX(4px); + color: var(--primary); + } + + h3 { + color: var(--primary); + } } - @media (max-width: 1020px) { - padding: 18px 20px; + // 移动端添加 active 状态反馈 + &:active { + background: var(--primary-alpha-10); } - @media (max-width: 768px) { - flex-direction: column; - align-items: flex-start; - gap: 10px; + // 箭头图标 + span:last-child { + font-size: 18px; + color: var(--text-light); + transition: all 0.2s ease; + flex-shrink: 0; } @media (max-width: 540px) { - padding: 18px; + padding: 16px 20px; + padding-left: 24px; + gap: 12px; + min-height: 64px; } } h3 { margin: 0 0 6px; font-size: 16px; + font-weight: 600; + color: var(--text-primary); + transition: color 0.2s ease; + + @media (max-width: 540px) { + font-size: 15px; + margin-bottom: 4px; + } } p { margin: 0; font-size: 14px; - color: var(--ifm-color-emphasis-600); + color: var(--text-secondary); + line-height: 1.5; + + @media (max-width: 540px) { + font-size: 13px; + line-height: 1.4; + } + } +} + +/* ====================================== + 入场动画 +====================================== */ +.fadeInUp { + animation: fadeInUp 0.6s ease-out forwards; + opacity: 0; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); } } + +.delay1 { animation-delay: 0.1s; } +.delay2 { animation-delay: 0.2s; } +.delay3 { animation-delay: 0.3s; } +.delay4 { animation-delay: 0.4s; } +.delay5 { animation-delay: 0.5s; } + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 82cd6caee..bb5c68f09 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -16,19 +16,6 @@ interface NavLink { to: string; } -interface MapCard { - icon: string; - title: string; - description: string; - to: string; -} - -interface CommunityItem { - title: string; - meta: string; - description: string; -} - const Home: React.FC = () => { const { siteConfig } = useDocusaurusContext(); @@ -43,50 +30,6 @@ const Home: React.FC = () => { { title: "基岩版核心", description: "基岩版服务器开服指南", to: "/Bedrock/intro" } ]; - const knowledgeMap: MapCard[] = [ - { - icon: "📚", - title: "准备工作", - description: "Java 安装、文本编辑器选择、必备工具与脚本使用。", - to: "/preparation" - }, - { - icon: "🚀", - title: "开始阶段", - description: "服务器基础知识、如何选择服务端、如何搭建并连接。", - to: "/start" - }, - { - icon: "🏗️", - title: "建设阶段", - description: "插件配置、手机玩家支持、跨服搭建等进阶内容。", - to: "/process" - }, - { - icon: "⚙️", - title: "进阶教程", - description: "Linux 运维、Docker 容器化、性能优化与自动化运维。", - to: "/advance" - } - ]; - - const communityHighlights: CommunityItem[] = [ - { - title: "持续更新中", - meta: "@Community · 进行中", - description: "文档内容持续更新，跟随最新版本和社区动态。" - }, - { - title: "开源协作", - meta: "@Contributors · 持续", - description: "欢迎通过 GitHub 提交建议、报告问题或贡献文档。" - }, - { - title: "新手友好", - meta: "@Tutorial · 特点", - description: "从零开始，手把手教你搭建和运营 Minecraft 服务器。" - } - ]; return ( @@ -94,14 +37,20 @@ const Home: React.FC = () => {
+ {/* 装饰性模糊圆形 */} +
+
+
+
-

Cubic Wiki

-

- 主要针对高版本 Java 版和基岩版服务器的开服指南。 从零开始，手把手教你搭建和运营 Minecraft - 服务器。 +

+ Cubic Wiki +

+

+ 主要针对高版本 Java 版和基岩版服务器的开服指南。从零开始，手把手教你搭建和运营 Minecraft 服务器。

-
+
立即开始 @@ -109,7 +58,7 @@ const Home: React.FC = () => { 参与贡献
-
+
{stats.map((item) => (
{item.value} @@ -118,12 +67,12 @@ const Home: React.FC = () => { ))}
-