From a35a81009c107b91875a655ee7f3458ffa337a52 Mon Sep 17 00:00:00 2001 From: User Date: Thu, 25 Sep 2025 10:29:31 +0800 Subject: [PATCH] banana v1 --- .env.example | 8 - IFLOW.md | 2 +- src/core/theme.ts | 2 +- src/core/vite.ts | 4 +- styles/components/clone.ts | 83 +++++++--- styles/components/commit.ts | 83 ++++++++-- styles/components/dashboard.ts | 83 +++++++--- styles/components/diff.ts | 68 +++++++- styles/components/filelist.ts | 113 +++++++++++-- styles/components/footer.ts | 42 ++++- styles/components/heatmap.ts | 71 ++++++-- styles/components/issue.ts | 289 ++++++++++++++++++++++++--------- styles/components/navbar.ts | 93 ++++++++++- styles/components/repo.ts | 54 ++++-- styles/public/animation.ts | 141 +++++++++++++++- styles/public/button.ts | 41 ++++- styles/public/dropdown.ts | 46 ++++-- styles/public/input.ts | 30 +++- styles/public/label.ts | 93 ++++++++++- styles/public/menu.ts | 57 ++++++- styles/public/modal.ts | 30 +++- styles/public/other.ts | 49 ++++++ styles/public/radius.ts | 84 +++++++++- styles/public/text.ts | 48 ++++++ styles/public/tippy.ts | 23 ++- styles/public/transition.ts | 76 ++++++++- themes/modern-dark.css.ts | 89 ++++++++++ themes/modern-light.css.ts | 90 ++++++++++ 28 files changed, 1657 insertions(+), 235 deletions(-) delete mode 100644 .env.example create mode 100644 themes/modern-dark.css.ts create mode 100644 themes/modern-light.css.ts diff --git a/.env.example b/.env.example deleted file mode 100644 index 77f64d6..0000000 --- a/.env.example +++ /dev/null @@ -1,8 +0,0 @@ -# 开发模式下编译的主题 (开发模式仅编译单个主题) -DEV_THEME=dark -# 把编译后的主题上传到服务器的服务器名称, 通过 SCP 上传 -SSH_SERVER=localhost -# 上传到服务器的用户名称, 不支持密码, 请确保有 SSH 免密登录权限 -SSH_USER=root -# 上传到服务器的主题路径, 请使用绝对路径 -GITEA_THEME_PATH=/data/gitea/public/assets/css/ \ No newline at end of file diff --git a/IFLOW.md b/IFLOW.md index 52a1fdd..ec4cda2 100644 --- a/IFLOW.md +++ b/IFLOW.md @@ -1,6 +1,6 @@ # Gitea GitHub Theme 项目概述 -这个项目为 Gitea 提供了一套 Apple 风格的主题。它包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。 +这个项目为 Gitea 提供了一套 Banana 风格的主题。它包含多种预设颜色方案，如基础的亮色、暗色和柔和暗色主题，以及为色盲用户设计的主题和粉色主题。主题通过 CSS 实现，并利用 Vite 和 Vanilla Extract 等工具进行构建。 ## 项目结构 diff --git a/src/core/theme.ts b/src/core/theme.ts index 4e8641c..fb5a38e 100644 --- a/src/core/theme.ts +++ b/src/core/theme.ts @@ -49,7 +49,7 @@ export function createTheme(theme: Theme): void { createGlobalTheme(":root", themeInfoVars, { version }); createGlobalTheme(":root", themeVars, theme); createGlobalTheme(":root", otherThemeVars, { - border: { radius: "6px" }, + border: { radius: "8px" }, color: { git: "#f05133", light: { diff --git a/src/core/vite.ts b/src/core/vite.ts index 55337ca..de9eddb 100644 --- a/src/core/vite.ts +++ b/src/core/vite.ts @@ -52,10 +52,10 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k function giteaThemeMetaInfo(nameGroup: string[]): string { const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "); - return `gitea-theme-meta-info{--theme-display-name:"GitHub ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别 + return `gitea-theme-meta-info{--theme-display-name:"Nanobanana ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别 } -const prefix = "theme-github-"; +const prefix = "theme-nanobanana-"; /** * 生成主题文件 diff --git a/styles/components/clone.ts b/styles/components/clone.ts index 41147a7..8d5557d 100644 --- a/styles/components/clone.ts +++ b/styles/components/clone.ts @@ -1,4 +1,4 @@ -import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; +import { css, customThemeVars, themeVars } from "src/types/vars"; // 克隆按钮的弹窗 export const clone = css` @@ -12,22 +12,28 @@ export const clone = css` &:first-of-type { font-weight: 600; margin-top: 16px; + font-size: 16px; // 增加字体大小 } } // 按钮组 .clone-panel-tab { display: flex; gap: 8px; - margin-left: 16px; + margin: 16px; // 增加外边距 + padding: 4px; // 增加内边距 + background-color: ${themeVars.color.hover.self}; // 添加背景色 + border-radius: 12px; // 增加圆角 // 按钮 .item { color: ${themeVars.color.text.self}; font-weight: 600; - padding: 6px 8px; - margin: 8px 0; + padding: 8px 12px; // 增加内边距 + margin: 4px; // 调整外边距 + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; - border-radius: ${otherThemeVars.border.radius}; + transform: translateY(-1px); // 轻微上移效果 } &.active:after { content: ""; @@ -38,65 +44,84 @@ export const clone = css` width: 100%; height: 2px; background: ${themeVars.github.underlineNav.borderColor.active}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 } } .item.active { border-bottom: 0; position: relative; + background-color: ${themeVars.color.menu}; // 添加背景色 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 } } // 克隆地址 .ui.input.action { + margin: 0 16px 16px 16px; // 增加外边距 > input { border: 1px solid ${themeVars.color.light.border}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); min-width: 150px; max-width: 400px; width: ${customThemeVars.cloneMenuWidth}; + padding: 8px 12px; // 增加内边距 + font-size: 14px; // 增加字体大小 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { border: 1px solid ${themeVars.color.light.border}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 } &:focus, &:focus-visible { border-color: ${themeVars.github.borderColor.accent.emphasis}; + box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果 } } .ui.ui.ui.button { background-color: unset; border: unset; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 color: ${themeVars.color.text.light.num1}; padding: 0; - width: 32px; - height: 32px; - margin-left: 5px; + width: 36px; // 增加宽度 + height: 36px; // 增加高度 + margin-left: 8px; // 增加左边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background-color: ${themeVars.github.control.transparent.bgColor.hover}; + transform: scale(1.05); // 轻微放大效果 } svg { - width: 16px; - height: 16px; + width: 18px; // 增加宽度 + height: 18px; // 增加高度 } } } // 面板操作列表之间的分割线 .divider { margin: 0; + border-color: ${themeVars.color.light.border}; // 使用主题色 } // 面板操作列表 .clone-panel-list { margin: 8px; .item { - border-radius: ${otherThemeVars.border.radius}; - padding: 6px 8px; + border-radius: 8px; // 增加圆角 + padding: 8px 12px; // 增加内边距 line-height: 1.5; - margin: 0; + margin: 4px 8px; // 调整外边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 svg { color: ${themeVars.color.text.light.num1}; - margin-right: 0.25rem; + margin-right: 0.5rem; // 增加右边距 + width: 16px; // 增加宽度 + height: 16px; // 增加高度 + } + &:hover { + color: ${themeVars.color.text.self}; + text-decoration: none; + background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateX(2px); // 轻微右移效果 } } > .item:hover { @@ -107,4 +132,24 @@ export const clone = css` } } } -`; + + // 移动端优化 + @media (max-width: 767.98px) { + .tippy-box .clone-panel-popup { + .clone-panel-tab .item { + padding: 6px 10px; // 调整内边距 + } + + .ui.input.action { + > input { + padding: 6px 10px; // 调整内边距 + font-size: 13px; // 调整字体大小 + } + .ui.ui.ui.button { + width: 32px; // 调整宽度 + height: 32px; // 调整高度 + } + } + } + } +`; \ No newline at end of file diff --git a/styles/components/commit.ts b/styles/components/commit.ts index 9d00fb1..b895e68 100644 --- a/styles/components/commit.ts +++ b/styles/components/commit.ts @@ -1,25 +1,41 @@ -import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { css, themeVars } from "src/types/vars"; // 提交列表 export const commit = css` .page-content.repository { // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式) #commits-table.ui.basic.striped.table tbody.commit-list { + border-radius: 12px; // 增加圆角 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 + overflow: hidden; // 隐藏溢出内容 // 作者 .author { // 作者名称 .author-wrapper { color: ${themeVars.color.text.light.num1}; + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + color: ${themeVars.color.primary.self}; + } } } // SHA 标签 .sha { a.ui.label.commit-id-short { - padding: 2px 8px; - height: 28px; + padding: 4px 10px; // 增加内边距 + height: 32px; // 增加高度 margin-top: 0.375rem; margin-bottom: 0.375rem; margin-left: -8px; + border-radius: 25px; // 增加圆角 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background-color: ${themeVars.github.bgColor.accent.emphasis}; + color: ${themeVars.color.white}; + transform: translateY(-1px); // 轻微上移效果 + } } } // 提交信息 @@ -28,7 +44,12 @@ export const commit = css` a.ui.basic.primary.label { border-radius: 25px; border-width: 1.5px; - padding: 5px 8px !important; + padding: 6px 12px !important; // 增加内边距 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } } // 提交信息右侧 @@ -40,12 +61,21 @@ export const commit = css` // 查看提交路径按钮 .btn.view-commit-path { color: ${themeVars.color.text.light.num1}; + padding: 4px 8px; // 增加内边距 + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background-color: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 + } } } tr { + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 // 整行悬停色 &:hover { background-color: ${themeVars.color.hover.opaque}; + transform: translateX(2px); // 轻微右移效果 } // 偶数行悬停色 &:nth-child(2n):hover { @@ -54,24 +84,57 @@ export const commit = css` // 尾行圆角 &:last-child { td:first-child { - border-bottom-left-radius: ${otherThemeVars.border.radius}; + border-bottom-left-radius: 12px; // 增加圆角 } td:last-child { - border-bottom-right-radius: ${otherThemeVars.border.radius}; + border-bottom-right-radius: 12px; // 增加圆角 } } } } } + + // 移动端优化 + @media (max-width: 767.98px) { + .page-content.repository #commits-table.ui.basic.striped.table tbody.commit-list { + .sha a.ui.label.commit-id-short { + padding: 3px 8px; // 调整内边距 + height: 28px; // 调整高度 + } + + .message a.ui.basic.primary.label { + padding: 4px 8px !important; // 调整内边距 + } + + .tw-text-right { + .btn.copy-commit-id, + .btn.view-commit-path { + padding: 3px 6px; // 调整内边距 + } + } + } + } `; export const commitStatus = css` .flex-text-inline[data-global-init="initCommitStatuses"] { - padding: 6px; - margin-top: 2px; - border-radius: ${otherThemeVars.border.radius}; + padding: 8px 12px; // 增加内边距 + margin-top: 4px; // 增加顶部外边距 + border-radius: 8px; // 增加圆角 + background-color: ${themeVars.color.menu}; // 添加背景色 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background-color: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 } } -`; + + // 移动端优化 + @media (max-width: 767.98px) { + .flex-text-inline[data-global-init="initCommitStatuses"] { + padding: 6px 10px; // 调整内边距 + margin-top: 2px; // 调整顶部外边距 + } + } +`; \ No newline at end of file diff --git a/styles/components/dashboard.ts b/styles/components/dashboard.ts index 6251179..ff9552a 100644 --- a/styles/components/dashboard.ts +++ b/styles/components/dashboard.ts @@ -1,4 +1,4 @@ -import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { css, themeVars } from "src/types/vars"; export const dashboard = css` // 首页仪表板, 避免选中管理员后台的维护管理面板 @@ -8,25 +8,30 @@ export const dashboard = css` background: ${themeVars.color.hover.self}; border: 0; border-radius: 12px; - margin-bottom: 8px; + margin-bottom: 16px; // 增加底部间距 + padding: 4px; // 增加内边距 > .item { background: unset; border-radius: 12px; - padding: 6px 12px !important; + padding: 8px 16px !important; // 增加内边距 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &.active { background: ${themeVars.color.menu}; box-shadow: ${themeVars.github.shadow.floating.small}; font-weight: 600; + transform: translateY(-1px); // 轻微上移效果 } &::before { display: none; } &:not(.active) { - border-radius: ${otherThemeVars.border.radius}; - margin: 6px !important; - width: calc(50% - 12px); + border-radius: 8px; // 增加圆角 + margin: 4px !important; // 调整边距 + width: calc(50% - 8px); // 调整宽度 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 } } } @@ -35,18 +40,21 @@ export const dashboard = css` .ui.top.attached.header { border: 0; font-size: 20px; - font-weight: 400; + font-weight: 600; // 增加字体粗细 background-color: unset !important; margin-bottom: 0.25rem; + padding: 16px 20px; // 增加内边距 } // 仓库/组织列表 .ui.attached.segment { background-color: ${themeVars.color.menu}; border: unset !important; box-shadow: ${themeVars.github.shadow.floating.small}; + margin-bottom: 16px; // 增加底部间距 &.repos-search { border-top-left-radius: 12px; border-top-right-radius: 12px; + padding: 16px; // 增加内边距 } &.table { &:last-child { @@ -56,13 +64,16 @@ export const dashboard = css` ul { padding: 8px; li { - border-radius: ${otherThemeVars.border.radius}; - padding: 6px 8px !important; + border-radius: 8px; // 增加圆角 + padding: 12px 16px !important; // 增加内边距 + margin: 4px 0; // 增加垂直间距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:not(:last-child) { border-bottom: 0; } &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateX(2px); // 轻微右移效果 } a.muted:hover { color: inherit; @@ -87,39 +98,47 @@ export const dashboardIssues = css` background-color: ${themeVars.color.box.header}; border: 1px solid ${themeVars.color.light.border}; border-bottom: 0; - border-top-left-radius: ${otherThemeVars.border.radius}; - border-top-right-radius: ${otherThemeVars.border.radius}; + border-top-left-radius: 12px; // 增加圆角 + border-top-right-radius: 12px; // 增加圆角 height: 54px; - padding: 16px 8px; + padding: 16px 16px; // 增加内边距 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 .list-header-toggle { align-items: center; border: 0; > .item { background: unset !important; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 color: ${themeVars.color.text.light.num1}; - padding: 0px 8px; - height: 30px; + padding: 0px 16px; // 增加内边距 + height: 36px; // 增加高度 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:before { display: none; } &:hover { background: ${themeVars.github.control.transparent.bgColor.hover} !important; + transform: translateY(-1px); // 轻微上移效果 } &.active { color: ${themeVars.color.text.self}; font-weight: 700; + background: ${themeVars.color.active} !important; // 添加背景色 } } } .list-header-filters { > .item { - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 color: ${themeVars.color.text.light.num1}; - padding: 0px 12px; - height: 32px; + padding: 0px 16px; // 增加内边距 + height: 36px; // 增加高度 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 } } } @@ -132,6 +151,21 @@ export const issueListMobile = css` @media (max-width: 767.98px) { .page-content.dashboard.issues .list-header { height: auto; + padding: 12px; // 调整内边距 + } + + // 移动端优化 + .list-header-toggle, + .list-header-filters { + flex-wrap: wrap; // 允许换行 + gap: 8px; // 增加间距 + } + + .list-header-toggle > .item, + .list-header-filters > .item { + flex: 1 1 auto; // 自适应宽度 + min-width: calc(50% - 4px); // 最小宽度 + text-align: center; // 文本居中 } } `; @@ -141,4 +175,15 @@ export const fixOrgLabel = css` .dashboard .secondary-nav .org-visibility .label { margin-right: 0; } -`; + + // 增强组织可见性标签样式 + .dashboard .secondary-nav .org-visibility .label { + padding: 4px 12px; // 增加内边距 + border-radius: 25px; // 增加圆角 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } + } +`; \ No newline at end of file diff --git a/styles/components/diff.ts b/styles/components/diff.ts index bbd2865..8992fbf 100644 --- a/styles/components/diff.ts +++ b/styles/components/diff.ts @@ -7,6 +7,7 @@ export const diff = css` /* 折叠行文本 */ .code-inner { color: ${themeVars.color.text.light.num1}; + font-weight: 500; // 增加字体粗细 } } /* 增加/删除行多余的颜色 */ @@ -22,6 +23,7 @@ export const diff = css` .removed-code { border-radius: 0.1875rem; color: ${themeVars.color.text.self}; + padding: 0 2px; // 增加内边距 /* 覆盖掉 chroma 的颜色 */ * { color: ${themeVars.color.text.self} !important; @@ -30,23 +32,37 @@ export const diff = css` /* 展开/收缩按钮 */ .code-expander-button { color: ${themeVars.color.text.light.num1}; - height: 28px !important; + height: 32px !important; // 增加高度 + padding: 0 12px; // 增加内边距 + border-radius: 8px; // 增加圆角 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.bgColor.accent.emphasis}; color: ${themeVars.color.white}; + transform: translateY(-1px); // 轻微上移效果 + } + &:active { + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果 } } /* 行号居中 */ .lines-num { text-align: center !important; + font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体 } // 差异对比文件盒子 .diff-file-box { + border-radius: 12px; // 增加圆角 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 + margin-bottom: 16px; // 增加底部间距 + overflow: hidden; // 隐藏溢出内容 // 差异对比文件头 .diff-file-header { // 文件名 .diff-file-name { - font-weight: 400; + font-weight: 500; // 增加字体粗细 + padding: 12px 16px; // 增加内边距 .fold-file.btn svg { min-width: 16px; min-height: 16px; @@ -55,6 +71,7 @@ export const diff = css` } .diff-stats-bar { height: 8px; + border-radius: 4px; // 增加圆角 } > div, .file-link { @@ -66,7 +83,52 @@ export const diff = css` color: ${themeVars.color.text.light.num1}; font-size: 12px; font-weight: 400; + padding: 12px 16px; // 增加内边距 } } } -`; + + // 增强差异对比的可读性 + .code-diff { + font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); // 使用等宽字体 + font-size: 14px; // 增加字体大小 + line-height: 1.5; // 增加行高 + } + + // 增加行的样式 + .add-code { + background-color: ${themeVars.color.diff.added.row.bg}; // 使用主题色 + &:hover { + background-color: ${themeVars.color.diff.added.row.border}; // 悬停时改变背景色 + } + } + + // 删除行的样式 + .del-code { + background-color: ${themeVars.color.diff.removed.row.bg}; // 使用主题色 + &:hover { + background-color: ${themeVars.color.diff.removed.row.border}; // 悬停时改变背景色 + } + } + + // 移动行的样式 + .moved-code { + background-color: ${themeVars.color.diff.moved.row.bg}; // 使用主题色 + &:hover { + background-color: ${themeVars.color.diff.moved.row.border}; // 悬停时改变背景色 + } + } + + // 行号的样式 + .lines-num { + background-color: ${themeVars.color.box.body.self}; // 使用主题色 + border-right: 1px solid ${themeVars.color.light.border}; // 添加右边框 + padding: 0 8px; // 增加内边距 + min-width: 40px; // 设置最小宽度 + } + + // 行内容的样式 + .lines-code { + padding: 0 12px; // 增加内边距 + } +`; \ No newline at end of file diff --git a/styles/components/filelist.ts b/styles/components/filelist.ts index 0f405f3..a24dc3b 100644 --- a/styles/components/filelist.ts +++ b/styles/components/filelist.ts @@ -1,4 +1,4 @@ -import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { css, themeVars } from "src/types/vars"; // 文件列表页面下的分支按钮 export const branchButton = css` @@ -11,6 +11,13 @@ export const branchButton = css` margin-top: 1px; margin-left: auto; margin-right: 20px; // gitea 有 RSS 留出足够的空间 + border-radius: 25px; // 增加圆角 + padding: 4px 10px; // 增加内边距 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } } } @@ -21,10 +28,18 @@ export const syncFork = css` .page-content.repository.file.list { .repo-home-filelist > .ui.message { background: ${themeVars.color.box.header}; - padding: 8px 8px 8px 16px; + padding: 12px 16px; // 增加内边距 margin: 16px 0px; + border-radius: 12px; // 增加圆角 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 .ui.button { min-width: 96px; + border-radius: 8px; // 增加圆角 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } } } @@ -35,10 +50,14 @@ export const repoFiles = css` // 文件列表和提交列表的按钮组 .repo-button-row { margin: 16px 0; + gap: 8px; // 增加间距 } .repository.file.list { #repo-files-table { margin: 16px 0; + border-radius: 12px; // 增加圆角 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 + overflow: hidden; // 隐藏溢出内容 // 头部最后一次提交 .repo-file-line { padding-right: 16px; @@ -81,7 +100,11 @@ export const repoFiles = css` // 文件列表 .repo-file-item { .repo-file-cell { - height: 40px; + height: 44px; // 增加高度 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background-color: ${themeVars.color.hover.opaque}; + } &.name { display: flex; align-items: center; @@ -99,6 +122,7 @@ export const repoFiles = css` background: ${themeVars.color.body}; min-height: 48px; padding: 0px 8px !important; + border-radius: 12px 12px 0 0; // 增加圆角 svg { color: ${themeVars.color.text.light.num1}; } @@ -106,14 +130,16 @@ export const repoFiles = css` padding: 8px !important; // 伪元素宽度等于按钮宽度而不是父元素宽度 position: relative; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 } &:after { content: ""; background: ${themeVars.github.underlineNav.borderColor.active}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 bottom: -7px; left: 0; height: 2px; @@ -125,9 +151,13 @@ export const repoFiles = css` text-decoration-line: none; } } - .file-header-right:hover { - background: ${themeVars.github.control.transparent.bgColor.hover}; - border-radius: ${otherThemeVars.border.radius}; + .file-header-right { + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background: ${themeVars.github.control.transparent.bgColor.hover}; + border-radius: 8px; // 增加圆角 + } } } } @@ -185,6 +215,8 @@ export const repoFileView = css` // 固定头部 position: sticky; top: 0; + border-radius: 12px; // 增加圆角 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 &:after { content: ""; position: absolute; @@ -203,6 +235,7 @@ export const repoFileView = css` // 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除 position: sticky; top: 0; + border-radius: 12px 12px 0 0; // 增加圆角 &:after { content: ""; position: absolute; @@ -214,6 +247,11 @@ export const repoFileView = css` } .ui.compact.icon.button { border: 0; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } } .view-file-tree-items { @@ -228,7 +266,7 @@ export const repoFileView = css` align-content: center; background: ${themeVars.color.box.header}; border: 1px solid ${themeVars.color.secondary.self}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 12px; // 增加圆角 margin: 16px 0; height: 46px; min-height: 46px; @@ -236,8 +274,15 @@ export const repoFileView = css` position: sticky; top: 0; z-index: 1; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 .ui.button { min-height: 32px; + border-radius: 8px; // 增加圆角 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } // 打开文件树按钮 .repo-view-file-tree-toggle-show { @@ -245,10 +290,12 @@ export const repoFileView = css` border-color: #0000; padding: 0; min-width: 32px; + border-radius: 8px; // 增加圆角 } // 分支选择按钮 .branch-dropdown-button { padding: 0 12px; + border-radius: 8px; // 增加圆角 } // 路径 .repo-path { @@ -274,9 +321,11 @@ export const repoFileView = css` h4.file-header { padding: 8px 12px !important; position: sticky; + border-radius: 12px 12px 0 0; // 增加圆角 // 重叠边框线, 避免过粗 top: 45px; z-index: 1; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 .file-header-left { color: ${themeVars.color.text.light.num1}; font-size: 12px; @@ -290,6 +339,11 @@ export const repoFileView = css` height: 28px; font-size: 12px; padding: 0 8px; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } } // 右侧操作按钮 @@ -300,20 +354,23 @@ export const repoFileView = css` border: 1px solid ${themeVars.color.light.border}; height: 28px; padding: 0 8px; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 svg { color: ${themeVars.color.text.light.num1}; } &:first-of-type { - border-top-left-radius: ${otherThemeVars.border.radius}; - border-bottom-left-radius: ${otherThemeVars.border.radius}; + border-top-left-radius: 8px; // 增加圆角 + border-bottom-left-radius: 8px; // 增加圆角 } &:last-of-type { - border-top-right-radius: ${otherThemeVars.border.radius}; - border-bottom-right-radius: ${otherThemeVars.border.radius}; + border-top-right-radius: 8px; // 增加圆角 + border-bottom-right-radius: 8px; // 增加圆角 } &:hover { background: ${themeVars.color.hover.self}; color: ${themeVars.color.text.light.num1}; + transform: translateY(-1px); // 轻微上移效果 } } } @@ -321,9 +378,11 @@ export const repoFileView = css` } // 头部提交信息 .ui.segment#repo-file-commit-box { - padding: 8px 12px; + padding: 12px 16px; // 增加内边距 margin-bottom: 16px !important; min-height: 46px; + border-radius: 12px; // 增加圆角 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 > .latest-commit { gap: 8px; .commit-summary { @@ -357,6 +416,20 @@ export const repoFileViewMobile = css` } } } + + // 移动端优化 + @media (max-width: 767.98px) { + .repo-view-container .repo-view-file-tree-container { + height: auto; + position: static; + } + + .repo-view-content .repo-button-row { + flex-wrap: wrap; + height: auto; + padding: 8px 12px; + } + } `; // 仓库代码布局调整, 侧边栏宽度调整 @@ -393,6 +466,8 @@ export const repoSidebarTop = css` } .repo-description { color: ${themeVars.color.text.self}; + font-size: 14px; // 增加字体大小 + line-height: 1.5; // 增加行高 } #repo-topics { margin: 10px 0px !important; @@ -428,6 +503,12 @@ export const repoSidebarBottom = css` } .flex-item { padding: 16px 0; + border-radius: 12px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background-color: ${themeVars.color.hover.opaque}; + transform: translateY(-1px); // 轻微上移效果 + } .flex-item { padding: 16px 0 0 0; .flex-item-icon { @@ -448,6 +529,7 @@ export const repoSidebarBottom = css` .language-stats { height: 8px; margin-bottom: 0px; + border-radius: 4px; // 增加圆角 } .language-stats-details .item { font-size: 12px; @@ -456,6 +538,7 @@ export const repoSidebarBottom = css` height: 8px; width: 8px; margin-right: 8px; + border-radius: 50%; // 圆形图标 } .tw-font-semibold { color: ${themeVars.color.text.self}; @@ -464,4 +547,4 @@ export const repoSidebarBottom = css` } } } -`; +`; \ No newline at end of file diff --git a/styles/components/footer.ts b/styles/components/footer.ts index 1301b36..d34d52b 100644 --- a/styles/components/footer.ts +++ b/styles/components/footer.ts @@ -2,19 +2,27 @@ import { css, themeVars } from "src/types/vars"; export const footer = css` .page-footer { - background-color: ${themeVars.color.body}; + background-color: ${themeVars.color.footer}; // 使用主题色 border-top: 0; color: ${themeVars.color.text.light.num1}; font-size: 12px; gap: 32px; justify-content: center; - padding: 16px 0 40px 0; + padding: 24px 0 40px 0; // 增加顶部内边距 + border-radius: 12px 12px 0 0; // 增加圆角 + margin-top: 32px; // 增加顶部外边距 + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 > .left-links { - gap: 4px; + gap: 8px; // 增加间距 > a { color: ${themeVars.color.text.light.num1}; + padding: 4px 8px; // 增加内边距 + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { color: ${themeVars.color.primary.self}; + background-color: ${themeVars.color.hover.self}; + transform: translateY(-1px); // 轻微上移效果 } } > strong { @@ -25,19 +33,43 @@ export const footer = css` gap: 16px; > .ui.dropdown { font-size: 12px; + padding: 4px 8px; // 增加内边距 + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { color: ${themeVars.color.primary.self}; + background-color: ${themeVars.color.hover.self}; + transform: translateY(-1px); // 轻微上移效果 } } > a { border-left: 0; color: ${themeVars.color.text.light.num1}; - padding-left: 0; + padding: 4px 8px; // 增加内边距 margin-left: 0; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { color: ${themeVars.color.primary.self}; + background-color: ${themeVars.color.hover.self}; + transform: translateY(-1px); // 轻微上移效果 } } } } -`; + + // 移动端优化 + @media (max-width: 767.98px) { + .page-footer { + flex-direction: column; // 垂直排列 + gap: 16px; // 调整间距 + padding: 16px 0 32px 0; // 调整内边距 + > .left-links, + > .right-links { + flex-wrap: wrap; // 允许换行 + justify-content: center; // 居中对齐 + gap: 8px; // 调整间距 + } + } + } +`; \ No newline at end of file diff --git a/styles/components/heatmap.ts b/styles/components/heatmap.ts index 750a3de..4de2c74 100644 --- a/styles/components/heatmap.ts +++ b/styles/components/heatmap.ts @@ -9,30 +9,38 @@ export const heatmap = css` .total-contributions { left: 25px + 20px; bottom: 0 + 12px; + color: ${themeVars.color.text.light.num1}; + font-size: 12px; // 增加字体大小 + font-weight: 500; // 增加字体粗细 } .total-contributions, .vch__legend-right { color: ${themeVars.color.text.light.num1}; } .vch__container { - padding: 12px 20px; + padding: 16px 24px; // 增加内边距 box-shadow: ${themeVars.github.shadow.floating.small}; border-radius: 12px; + background-color: ${themeVars.color.menu}; // 添加背景色 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 // 覆盖热力图和图例的背景色 .vch__day__square, .vch__legend__wrapper rect { // 圆角 - rx: 2.5px; - ry: 2.5px; + rx: 3px; // 增加圆角 + ry: 3px; // 增加圆角 // hover 时的圆角 - border-radius: 0.75px; + border-radius: 1px; // 增加圆角 // 宽度和高度可以用来控制间隔 - width: 9px; - height: 9px; + width: 11px; // 增加宽度 + height: 11px; // 增加高度 // 边框 outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0}; - // 边框向内偏移 - outline-offset: -0.5px; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + // 悬停效果 + &:hover { + transform: scale(1.2); // 轻微放大效果 + } &[style="fill: var(--color-secondary-alpha-60);"] { fill: ${themeVars.github.contribution.default.bgColor.num0} !important; @@ -65,6 +73,18 @@ export const heatmap = css` } } } + + // 移动端优化 + @media (max-width: 767.98px) { + #user-heatmap .vch__container { + padding: 12px 16px; // 调整内边距 + .vch__day__square, + .vch__legend__wrapper rect { + width: 9px; // 调整宽度 + height: 9px; // 调整高度 + } + } + } `; // 动态 @@ -72,9 +92,19 @@ export const activity = css` .flex-list#activity-feed { border-radius: 12px; box-shadow: ${themeVars.github.shadow.floating.small}; + background-color: ${themeVars.color.menu}; // 添加背景色 > .flex-item { gap: 12px; - padding: 12px 8px 16px 14px; + padding: 16px 12px 20px 16px; // 增加内边距 + border-bottom: 1px solid ${themeVars.color.light.border}; // 添加底部边框 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:last-child { + border-bottom: none; // 最后一项移除边框 + } + &:hover { + background-color: ${themeVars.color.hover.opaque}; + transform: translateX(2px); // 轻微右移效果 + } > .flex-item-main { gap: 8px !important; > div:not([class]) { @@ -88,13 +118,28 @@ export const activity = css` } // 动态的右侧 svg 图标 .flex-item-trailing svg { - height: 20px; - width: 20px; + height: 24px; // 增加高度 + width: 24px; // 增加宽度 + color: ${themeVars.color.text.light.num1}; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 } } > .page.buttons { border-top: 1px solid ${themeVars.color.secondary.self}; - padding: 12px 0px; + padding: 16px 0px; // 增加内边距 + margin: 0; // 移除外边距 + border-radius: 0 0 12px 12px; // 增加圆角 } } -`; + + // 移动端优化 + @media (max-width: 767.98px) { + .flex-list#activity-feed > .flex-item { + padding: 12px 8px 16px 12px; // 调整内边距 + .flex-item-trailing svg { + height: 20px; // 调整高度 + width: 20px; // 调整宽度 + } + } + } +`; \ No newline at end of file diff --git a/styles/components/issue.ts b/styles/components/issue.ts index bce6b14..14e4852 100644 --- a/styles/components/issue.ts +++ b/styles/components/issue.ts @@ -1,4 +1,4 @@ -import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { css, themeVars } from "src/types/vars"; import { activeItemAfterStyle } from "styles/public/menu"; // 工单&PR 列表 @@ -14,11 +14,12 @@ export const issueList = css` background-color: ${themeVars.color.box.header}; border: 1px solid ${themeVars.color.light.border}; border-bottom: 0; - border-top-left-radius: ${otherThemeVars.border.radius}; - border-top-right-radius: ${otherThemeVars.border.radius}; - height: 48px; - padding: 8px; + border-top-left-radius: 12px; // 增加圆角 + border-top-right-radius: 12px; // 增加圆角 + height: 56px; // 增加高度 + padding: 12px 16px; // 增加内边距 margin-top: 16px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 .issue-list-toolbar-left { // 复选框 input { @@ -29,19 +30,23 @@ export const issueList = css` border: 0; > .item { background: unset !important; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 color: ${themeVars.color.text.light.num1}; - padding: 0px 8px; - height: 30px; + padding: 0px 16px; // 增加内边距 + height: 36px; // 增加高度 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:before { display: none; } &:hover { background: ${themeVars.github.control.transparent.bgColor.hover} !important; + transform: translateY(-1px); // 轻微上移效果 } &.active { color: ${themeVars.color.text.self}; font-weight: 700; + background: ${themeVars.color.active} !important; // 添加背景色 } } } @@ -52,8 +57,14 @@ export const issueList = css` color: ${themeVars.color.text.light.num1}; } > .ui.button { - padding: 0 12px; - height: 32px; + padding: 0 16px; // 增加内边距 + height: 36px; // 增加高度 + border-radius: 8px; // 增加圆角 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } } } @@ -68,17 +79,19 @@ export const issueList = css` .page-content.repository.issue-list { .flex-list#issue-list { border: 1px solid ${themeVars.color.light.border}; - border-bottom-left-radius: ${otherThemeVars.border.radius}; - border-bottom-right-radius: ${otherThemeVars.border.radius}; + border-bottom-left-radius: 12px; // 增加圆角 + border-bottom-right-radius: 12px; // 增加圆角 > .flex-item { align-items: center; padding: 0; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:last-child { - border-bottom-left-radius: ${otherThemeVars.border.radius}; - border-bottom-right-radius: ${otherThemeVars.border.radius}; + border-bottom-left-radius: 12px; // 增加圆角 + border-bottom-right-radius: 12px; // 增加圆角 } &:hover { background-color: ${themeVars.color.hover.opaque}; + transform: translateX(2px); // 轻微右移效果 } > .flex-item-icon { display: flex; @@ -97,11 +110,11 @@ export const issueList = css` > .flex-item-main { gap: 4px; .flex-item-header { - padding-top: 8px; + padding-top: 12px; // 增加内边距 } .flex-item-body { font-size: 12px; - padding-bottom: 8px; + padding-bottom: 12px; // 增加内边距 } } > .flex-item-trailing { @@ -114,14 +127,19 @@ export const issueList = css` // [TODO] 暂时排除项目的列表 .page-content.repository.milestones:not(.projects) .milestone-list { border: 1px solid ${themeVars.color.light.border}; - border-bottom-left-radius: ${otherThemeVars.border.radius}; - border-bottom-right-radius: ${otherThemeVars.border.radius}; + border-bottom-left-radius: 12px; // 增加圆角 + border-bottom-right-radius: 12px; // 增加圆角 .milestone-card { - padding: 8px 16px 10px 16px; + padding: 16px 20px; // 增加内边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background-color: ${themeVars.color.hover.opaque}; + transform: translateY(-1px); // 轻微上移效果 + } .milestone-header { h3 { - font-size: 16px; - font-weight: 500; + font-size: 18px; // 增加字体大小 + font-weight: 600; // 增加字体粗细 } div span { font-size: 14px; @@ -146,31 +164,53 @@ export const issueListMobile = css` .page-content.repository.issue-list { .issue-list-toolbar { height: auto; + padding: 12px; // 调整内边距 } } } + + // 移动端优化 + @media (max-width: 767.98px) { + .issue-list-toolbar-left > .ui.compact.menu > .item, + .issue-list-toolbar-right > .ui.menu > .item { + padding: 0px 12px; // 调整内边距 + height: 32px; // 调整高度 + } + + .issue-list-toolbar-right > .ui.menu > .ui.button { + padding: 0 12px; // 调整内边距 + height: 32px; // 调整高度 + } + } `; // 置顶 Issue export const issuePins = css` #issue-pins { - gap: 12px; - margin-bottom: 16px; + gap: 16px; // 增加间距 + margin-bottom: 20px; // 增加底部间距 .issue-card { - padding: 16px 12px; + padding: 20px 16px; // 增加内边距 + border-radius: 12px; // 增加圆角 + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-2px); // 轻微上移效果 + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 增强阴影 + } .content { .issue-card-title { - font-size: 16px; + font-size: 18px; // 增加字体大小 font-weight: 600; } svg { color: ${themeVars.color.text.light.num1}; height: 100%; - margin-right: 3px; + margin-right: 4px; // 增加右边距 } .meta { font-size: 12px; - padding-top: 4px; + padding-top: 6px; // 增加内边距 } } .issue-card-bottom { @@ -187,20 +227,47 @@ export const button = css` color: ${themeVars.github.fgColor.done}; background-color: ${themeVars.color.button}; border-color: ${themeVars.color.light.border}; + border-radius: 8px; // 增加圆角 + padding: 8px 16px; // 增加内边距 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background-color: ${themeVars.color.hover.self}; + transform: translateY(-1px); // 轻微上移效果 + } + &:active { + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果 } } // 重新开启按钮 .ui.basic.primary.button#status-button { color: ${themeVars.github.fgColor.success}; + border-radius: 8px; // 增加圆角 + padding: 8px 16px; // 增加内边距 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } + &:active { + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果 + } } } // 工单&PR标题右侧按钮 .repository.view.issue .issue-title-buttons > .ui.button { - padding: 0 12px; - height: 32px; + padding: 0 16px; // 增加内边距 + height: 36px; // 增加高度 + border-radius: 8px; // 增加圆角 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } + &:active { + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果 + } } `; @@ -210,37 +277,55 @@ export const babel = css` // 时间线打开状态标签 &.tw-bg-green { background-color: ${themeVars.github.bgColor.success.emphasis} !important; + border-radius: 25px; // 增加圆角 } // 时间线关闭状态标签 &.tw-bg-red { background-color: ${themeVars.github.bgColor.done.emphasis} !important; + border-radius: 25px; // 增加圆角 } // 时间线合并状态标签 &.tw-bg-purple { background-color: ${themeVars.github.bgColor.done.emphasis} !important; + border-radius: 25px; // 增加圆角 } } } // 工单&PR状态标签 .ui.label.issue-state-label { border-radius: 25px !important; + padding: 6px 12px; // 增加内边距 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &.green { color: ${themeVars.color.white} !important; background-color: ${themeVars.github.bgColor.success.emphasis} !important; border-color: ${themeVars.github.bgColor.success.emphasis} !important; + &:hover { + opacity: 0.9; // 悬停时降低不透明度 + transform: translateY(-1px); // 轻微上移效果 + } } &.red { color: ${themeVars.color.white} !important; background-color: ${themeVars.github.bgColor.done.emphasis} !important; border-color: ${themeVars.github.bgColor.done.emphasis} !important; + &:hover { + opacity: 0.9; // 悬停时降低不透明度 + transform: translateY(-1px); // 轻微上移效果 + } } &.purple { color: ${themeVars.color.white} !important; background-color: ${themeVars.github.bgColor.done.emphasis} !important; border-color: ${themeVars.github.bgColor.done.emphasis} !important; + &:hover { + opacity: 0.9; // 悬停时降低不透明度 + transform: translateY(-1px); // 轻微上移效果 + } } } `; @@ -251,16 +336,22 @@ export const prBranch = css` #issue-list .flex-item-body .branches .branch { color: ${themeVars.github.fgColor.accent}; background-color: ${themeVars.github.bgColor.accent.muted}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 25px; // 增加圆角 font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); font-size: 12px; - padding: 0 5px; + padding: 4px 10px; // 增加内边距 line-height: 20px; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background-color: ${themeVars.github.bgColor.accent.emphasis}; + color: ${themeVars.color.white}; + transform: translateY(-1px); // 轻微上移效果 + } } .repository.view.issue .pull-desc code { - padding-top: 3px; - padding-bottom: 3px; + padding-top: 4px; // 增加内边距 + padding-bottom: 4px; // 增加内边距 a:hover { text-decoration-line: none; } @@ -282,12 +373,13 @@ export const comment = css` &:target { .comment-container { border-color: ${themeVars.github.borderColor.accent.emphasis} !important; - box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important; + box-shadow: 0 0 0 2px ${themeVars.color.primary.self} !important; // 增强焦点效果 } } .comment-header { - padding: 4px 4px 4px 16px; - min-height: 38px; + padding: 8px 8px 8px 16px; // 增加内边距 + min-height: 42px; // 增加最小高度 + border-radius: 12px 12px 0 0; // 增加圆角 } .comment-header-right { > .item, @@ -297,8 +389,13 @@ export const comment = css` > .ui.label { background-color: initial; font-size: 12px; - height: 20px; - padding: 0 6px; + height: 24px; // 增加高度 + padding: 0 8px; // 增加内边距 + border-radius: 25px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } // 隐藏顶部菜单的表情按钮 // 无法使用此样式, 评论无表情时底部的表情按钮元素不会渲染, 这是一个先有鸡还是先有蛋的问题 @@ -314,9 +411,12 @@ export const comment = css` // 评论菜单的删除按钮 .menu .item.delete-comment { color: ${themeVars.color.red.self}; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background-color: ${themeVars.color.red.badge.bg} !important; color: ${themeVars.color.red.light}; + transform: translateX(2px); // 轻微右移效果 } } } @@ -327,12 +427,17 @@ export const comment = css` align-items: center; justify-content: center; background: ${themeVars.color.button}; - border-radius: 25px; + border-radius: 25px; // 增加圆角 border: 1px solid ${themeVars.color.light.border}; color: ${themeVars.color.text.light.num1}; - padding: 0px 8px !important; - height: 28px; - width: 28px; + padding: 0px 10px !important; // 增加内边距 + height: 32px; // 增加高度 + width: 32px; // 增加宽度 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background: ${themeVars.color.hover.self}; + transform: translateY(-1px); // 轻微上移效果 + } } // 底部表情栏 .bottom-reactions { @@ -340,9 +445,12 @@ export const comment = css` background-color: unset !important; border-radius: 25px; border-color: ${themeVars.color.light.border}; + padding: 4px 10px; // 增加内边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background-color: ${themeVars.color.reaction.hoverBg} !important; border-color: ${themeVars.color.light.border}; + transform: translateY(-1px); // 轻微上移效果 } .reaction { font-size: 12px; @@ -350,7 +458,7 @@ export const comment = css` .reaction-count { color: ${themeVars.color.text.light.self}; font-weight: 500; - margin-left: 0; + margin-left: 4px; // 增加左边距 } } // 显示表情菜单按钮 @@ -370,6 +478,8 @@ export const commentForm = css` &::after { display: none; } + border-radius: 12px; // 增加圆角 + padding: 16px; // 增加内边距 } `; @@ -383,6 +493,14 @@ export const dropdown = css` content: ""; ${activeItemAfterStyle} } + .item { + padding: 8px 12px; // 增加内边距 + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateX(2px); // 轻微右移效果 + } + } } } `; @@ -393,15 +511,16 @@ export const prMerge = css` // 头像 .timeline-avatar { color: ${themeVars.color.white} !important; - border-radius: ${otherThemeVars.border.radius}; - width: 40px; - height: 40px; + border-radius: 12px; // 增加圆角 + width: 48px; // 增加宽度 + height: 48px; // 增加高度 display: flex; align-items: center; justify-content: center; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 svg { - width: 24px; - height: 24px; + width: 28px; // 增加宽度 + height: 28px; // 增加高度 } // 可以合并 &.green { @@ -432,14 +551,18 @@ export const prMerge = css` } } } + &:hover { + transform: scale(1.05); // 轻微放大效果 + } } // 检查状态 .commit-status-panel { .commit-status-header { background: ${themeVars.color.body}; - padding: 16px; - font-size: 16px; + padding: 20px; // 增加内边距 + font-size: 18px; // 增加字体大小 font-weight: 600; + border-radius: 12px 12px 0 0; // 增加圆角 .ui.right { color: ${themeVars.color.text.light.num1}; font-size: 14px; @@ -450,18 +573,20 @@ export const prMerge = css` .commit-status-list { background: ${themeVars.color.menu}; .commit-status-item { - border-radius: ${otherThemeVars.border.radius}; - padding: 2px 8px; - margin: 0px 8px; - height: 37px; + border-radius: 8px; // 增加圆角 + padding: 6px 12px; // 增加内边距 + margin: 0px 12px; // 增加边距 + height: 42px; // 增加高度 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:first-child { - margin-top: 8px; + margin-top: 12px; // 增加边距 } &:last-child { - margin-bottom: 8px; + margin-bottom: 12px; // 增加边距 } &:hover { background-color: ${themeVars.color.hover.opaque}; + transform: translateX(2px); // 轻微右移效果 } } } @@ -469,9 +594,10 @@ export const prMerge = css` // 合并信息和操作 .merge-section { color: ${themeVars.color.text.light.num1}; - padding: 16px; + padding: 20px; // 增加内边距 display: grid; - gap: 8px; + gap: 12px; // 增加间距 + border-radius: 0 0 12px 12px; // 增加圆角 &.no-header { &::before, &::after { @@ -493,17 +619,18 @@ export const timeline = css` } .timeline-item, .timeline-item-group { - padding: 16px 0; + padding: 20px 0; // 增加内边距 // 事件 &.event { // 修复覆盖后的位置问题 padding-left: 15px; .avatar { - width: 20px; - height: 20px; + width: 24px; // 增加宽度 + height: 24px; // 增加高度 } .badge { border: 2px solid ${themeVars.color.body}; + border-radius: 50%; // 圆形徽章 } // 仅匹配只有 badge .badge:not([class*=" "]) { @@ -517,7 +644,7 @@ export const timeline = css` &.commits-list { // 每个提交之间的间隔 .flex-text-block { - padding-top: 4px; + padding-top: 6px; // 增加内边距 } .badge svg { color: ${themeVars.color.text.light.num1}; @@ -538,7 +665,7 @@ export const timeline = css` `; const sidebarPadding = { - padding: "4px 8px", + padding: "8px 12px", // 增加内边距 }; // 侧边栏 @@ -551,6 +678,8 @@ export const issueSidebar = css` border: 0; font-size: 12px; padding: 0; + border-radius: 12px; // 增加圆角 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 .ui.button { font-size: 12px; } @@ -577,7 +706,7 @@ export const issueSidebar = css` } // 允许维护者编辑 > .ui.checkbox { - margin: 4px 8px; + margin: 8px 12px; // 增加边距 strong { font-weight: 400; } @@ -585,11 +714,14 @@ export const issueSidebar = css` .issue-sidebar-combo { .ui.dropdown > a.fixed-text.muted { align-items: center; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 text-decoration-line: none; - height: 28px; + height: 32px; // 增加高度 + padding: 0 12px; // 增加内边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 } } .ui.list { @@ -600,11 +732,14 @@ export const issueSidebar = css` // 时间追踪 > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted { align-items: center; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 text-decoration-line: none; - height: 28px; + height: 32px; // 增加高度 + padding: 0 12px; // 增加内边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 } } // 选中日期颜色 @@ -612,16 +747,21 @@ export const issueSidebar = css` color: ${themeVars.color.text.self}; } .divider { - margin: 12px 0 12px 8px; - width: calc(100% - 16px); + margin: 16px 0 16px 12px; // 增加边距 + width: calc(100% - 24px); // 调整宽度 } // 订阅按钮 .ui.watching .ui.button { - padding: 0px 8px; - height: 28px; + padding: 0px 12px; // 增加内边距 + height: 32px; // 增加高度 + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 svg { margin: 0 !important; } + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } // PIN 按钮 .form-fetch-action.single-button-form .ui.button, @@ -634,8 +774,11 @@ export const issueSidebar = css` // 好像是浏览器 BUG, 最后不生效, 必须 !important margin: 0 !important; justify-content: left; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateX(2px); // 轻微右移效果 } } .ui.show-modal.button[data-modal="#sidebar-delete-issue"] { @@ -654,4 +797,4 @@ export const issueSidebar = css` } } } -`; +`; \ No newline at end of file diff --git a/styles/components/navbar.ts b/styles/components/navbar.ts index 6209b17..7ad254e 100644 --- a/styles/components/navbar.ts +++ b/styles/components/navbar.ts @@ -1,18 +1,23 @@ import { fallbackVar } from "src/functions"; -import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; +import { css, customThemeVars, themeVars } from "src/types/vars"; export const navbarRight = css` #navbar { border-bottom: 0; padding: 0px 16px; min-height: 64px; + background-color: ${themeVars.color.nav.bg}; // 添加背景色 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 .navbar-left { gap: 8px; > .item { padding: 4px 8px; min-height: 20px; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &.active { font-weight: 600; + background-color: ${themeVars.color.active}; // 添加背景色 } &#navbar-logo { // 与下方的用户切换头像对齐 @@ -25,6 +30,10 @@ export const navbarRight = css` width: 32px; } } + &:hover:not(#navbar-logo) { + background-color: ${themeVars.color.nav.hoverBg}; + transform: translateY(-1px); // 轻微上移效果 + } } } // 进入用户页面后, 避免注册, 登录和首页等意外覆盖 @@ -39,11 +48,12 @@ export const navbarRight = css` align-content: center; justify-content: center; border: 1px solid ${themeVars.color.light.border}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 padding: unset; - height: 32px; - min-width: 32px; - min-height: 32px; + height: 36px; // 增加高度 + min-width: 36px; // 增加最小宽度 + min-height: 36px; // 增加最小高度 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 // 纠正内容保证居中 .tw-relative { height: 16px; @@ -54,7 +64,7 @@ export const navbarRight = css` } // 带下拉菜单的按钮 &.ui.dropdown { - padding: 0 8px; + padding: 0 12px; // 增加内边距 .text { display: grid; grid-auto-flow: column; @@ -69,8 +79,13 @@ export const navbarRight = css` } &:hover { background-color: ${themeVars.color.nav.hoverBg}; + transform: translateY(-1px); // 轻微上移效果 } } + &:hover:not(.ui.dropdown) { + background-color: ${themeVars.color.nav.hoverBg}; + transform: translateY(-1px); // 轻微上移效果 + } } .item.ui.dropdown { // 头像菜单 @@ -85,8 +100,13 @@ export const navbarRight = css` // 头像 img { border-radius: 25px; - height: 32px; - max-height: 32px; + height: 36px; // 增加高度 + max-height: 36px; // 增加最大高度 + width: 36px; // 增加宽度 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: scale(1.05); // 轻微放大效果 + } } } } @@ -114,6 +134,11 @@ export const navbarRight = css` font-weight: 600; top: -15px; left: 11px; + min-width: 18px; // 设置最小宽度 + height: 18px; // 设置高度 + display: flex; // 使用弹性布局 + align-items: center; // 垂直居中 + justify-content: center; // 水平居中 } } } @@ -121,6 +146,8 @@ export const navbarRight = css` .navbar-right .user-menu { width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")}; max-width: 320px; + border-radius: 12px; // 增加圆角 + box-shadow: ${themeVars.github.shadow.floating.small}; // 增强阴影 > .header { font-size: 14px; font-weight: 400; @@ -145,6 +172,26 @@ export const navbarRight = css` display: grid; } } + + // 移动端优化 + @media (max-width: 767.98px) { + #navbar { + padding: 0px 12px; // 调整内边距 + min-height: 56px; // 调整最小高度 + } + + #navbar .navbar-left > .item { + padding: 4px 6px; // 调整内边距 + min-height: 16px; // 调整最小高度 + } + + #navbar .navbar-right:has(.user-menu) > .item:not(:last-child) { + height: 32px; // 调整高度 + min-width: 32px; // 调整最小宽度 + min-height: 32px; // 调整最小高度 + padding: 0 8px; // 调整内边距 + } + } `; // 二级导航栏 @@ -155,7 +202,14 @@ export const secondaryNav = css` > .ui.secondary.stackable.menu { gap: 0px; min-height: 48px; + padding: 8px 0; // 增加内边距 + border-radius: 12px; // 增加圆角 + background-color: ${themeVars.color.box.header}; // 添加背景色 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 > .item { + padding: 0 16px; // 增加内边距 + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 > .ui.dropdown > .text { display: inline-flex; align-items: center; @@ -164,10 +218,31 @@ export const secondaryNav = css` margin-right: 4px; } } + &:hover { + background-color: ${themeVars.color.hover.self}; + transform: translateY(-1px); // 轻微上移效果 + } + &.active { + background-color: ${themeVars.color.active}; + font-weight: 600; + } } > .right.menu { gap: 4px; } } } -`; + + // 移动端优化 + @media (max-width: 767.98px) { + .page-content > :first-child.secondary-nav > .ui.secondary.stackable.menu { + flex-wrap: wrap; // 允许换行 + min-height: auto; // 自适应高度 + padding: 8px; // 调整内边距 + > .item { + padding: 8px 12px; // 调整内边距 + margin: 4px; // 增加边距 + } + } + } +`; \ No newline at end of file diff --git a/styles/components/repo.ts b/styles/components/repo.ts index 26a3713..dfbc3ab 100644 --- a/styles/components/repo.ts +++ b/styles/components/repo.ts @@ -1,11 +1,20 @@ -import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { css, themeVars } from "src/types/vars"; // 仓库头信息 export const repoHeader = css` .page-content.repository .repo-header { // 点星/关注/克隆/RSS 按钮 .ui.compact.button { - padding: 3px 12px; + padding: 6px 16px; // 增加内边距 + border-radius: 8px; // 增加圆角 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } + &:active { + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果 + } } // 仓库名称 .flex-item { @@ -17,15 +26,18 @@ export const repoHeader = css` display: flex; align-items: center; color: ${themeVars.color.text.self}; - font-size: 16px; + font-size: 20px; // 增加字体大小 + font-weight: 600; // 增加字体粗细 text-decoration: none !important; min-width: 3ch; - padding: 4px 6px; - border-radius: ${otherThemeVars.border.radius}; + padding: 8px 12px; // 增加内边距 + border-radius: 8px; // 增加圆角 margin-top: 0.5rem; margin-bottom: 0.5rem; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateX(2px); // 轻微右移效果 } &.muted:not(.tw-font-normal) { font-weight: 600; @@ -45,20 +57,34 @@ export const repoMenu = css` .page-content.repository { .repository-summary .repository-menu { background-color: ${themeVars.color.box.header}; + border-radius: 12px; // 增加圆角 + padding: 8px; // 增加内边距 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 .item { color: ${themeVars.color.text.light.num1}; - height: 31px; // 文件列表下与右侧输入框对齐 + height: 36px; // 增加高度 + padding: 0 16px; // 增加内边距 + border-radius: 8px; // 增加圆角 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 b { color: ${themeVars.color.text.self}; - margin: 0 2px; + margin: 0 4px; // 增加边距 } &.active { background-color: ${themeVars.color.active}; color: ${themeVars.color.text.self}; - font-weight: 500; + font-weight: 600; // 增加字体粗细 svg { color: ${themeVars.color.text.light.num1}; } + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } + } + &:hover:not(.active) { + background-color: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 } } } @@ -74,12 +100,14 @@ export const repoTopic = css` border-radius: 25px; font-size: 12px; font-weight: 500; - padding: 5px 10px; + padding: 6px 12px; // 增加内边距 background-color: ${themeVars.github.bgColor.accent.muted}; color: ${themeVars.github.fgColor.accent}; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background-color: ${themeVars.github.bgColor.accent.emphasis}; color: ${themeVars.color.white}; + transform: translateY(-1px); // 轻微上移效果 } } `; @@ -88,5 +116,11 @@ export const repoTopic = css` export const closedIssueTableCell = css` .stats-table .table-cell.tw-bg-red[href="#closed-issues"] { background-color: ${themeVars.color.purple.self} !important; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + opacity: 0.9; // 悬停时降低不透明度 + transform: translateY(-1px); // 轻微上移效果 + } } -`; +`; \ No newline at end of file diff --git a/styles/public/animation.ts b/styles/public/animation.ts index e0f96f9..c4c4e0a 100644 --- a/styles/public/animation.ts +++ b/styles/public/animation.ts @@ -24,4 +24,143 @@ export const keyframe = css` transform: translateY(0); } } -`; + + // 添加更多动画效果 + // 淡入动画 + @keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + + // 缩放进入动画 + @keyframes scale-in { + 0% { + opacity: 0; + transform: scale(0.95); + } + 100% { + opacity: 1; + transform: scale(1); + } + } + + // 缩放退出动画 + @keyframes scale-out { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(0.95); + } + } + + // 从左侧滑入动画 + @keyframes slide-in-from-left { + 0% { + opacity: 0; + transform: translateX(-100%); + } + 100% { + opacity: 1; + transform: translateX(0); + } + } + + // 从右侧滑入动画 + @keyframes slide-in-from-right { + 0% { + opacity: 0; + transform: translateX(100%); + } + 100% { + opacity: 1; + transform: translateX(0); + } + } + + // 从顶部滑入动画 + @keyframes slide-in-from-top { + 0% { + opacity: 0; + transform: translateY(-100%); + } + 100% { + opacity: 1; + transform: translateY(0); + } + } + + // 从底部滑入动画 + @keyframes slide-in-from-bottom { + 0% { + opacity: 0; + transform: translateY(100%); + } + 100% { + opacity: 1; + transform: translateY(0); + } + } + + // 脉冲动画 + @keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } + } + + // 脉冲点击动画 + @keyframes pulse-click { + 0% { + transform: scale(1); + } + 50% { + transform: scale(0.95); + } + 100% { + transform: scale(1); + } + } + + // 弹跳动画 + @keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + } + + // 旋转动画 + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + // 摆动动画 + @keyframes swing { + 0%, 100% { + transform: rotate(0deg); + } + 25% { + transform: rotate(5deg); + } + 75% { + transform: rotate(-5deg); + } + } +`; \ No newline at end of file diff --git a/styles/public/button.ts b/styles/public/button.ts index 9db1934..50896be 100644 --- a/styles/public/button.ts +++ b/styles/public/button.ts @@ -5,12 +5,15 @@ export const primaryStyle = { backgroundColor: themeVars.github.button.primary.bgColor.rest, borderColor: themeVars.github.button.primary.borderColor.rest, boxShadow: themeVars.github.shadow.resting.small, + borderRadius: "8px", // 增加圆角 }; export const primaryHoverStyle = { color: themeVars.github.button.primary.fgColor.rest, backgroundColor: themeVars.github.button.primary.bgColor.hover, borderColor: themeVars.github.button.primary.borderColor.hover, + transform: "translateY(-1px)", // 添加轻微的上移效果 + boxShadow: `0 4px 12px rgba(0, 0, 0, 0.1), ${themeVars.github.shadow.resting.small}`, // 增强阴影 }; // 普通按钮和主色调按钮 @@ -19,9 +22,15 @@ export const baseButton = css` min-height: 30px; font-weight: 500; padding: 9px 16px; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &.ui { gap: 8px; } + // 添加点击效果 + &:active { + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); + } } .ui.button:not(.primary):not(.red) svg { color: ${themeVars.color.text.light.num1}; @@ -38,6 +47,9 @@ export const baseButton = css` &:hover { ${primaryHoverStyle} } + &:active { + transform: translateY(0); // 点击时回到原位 + } } // 按钮组整体有阴影 &.buttons { @@ -55,18 +67,32 @@ export const baseButton = css` color: ${themeVars.color.text.self}; border-color: ${themeVars.color.light.border}; box-shadow: none; + border-radius: 8px; // 增加圆角 &:hover { background-color: ${themeVars.color.hover.self}; color: ${themeVars.color.text.self}; border-color: ${themeVars.color.light.border}; + transform: translateY(-1px); // 添加轻微的上移效果 + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影 + } + &:active { + transform: translateY(0); // 点击时回到原位 + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); } } /* 普通按钮边框色不变 */ .ui.basic.button, /* 仓库点星等数字标签按钮边框色不变 */ .ui.labeled.button > .label { + border-radius: 8px; // 增加圆角 &:hover { border-color: ${themeVars.color.light.border}; + transform: translateY(-1px); // 添加轻微的上移效果 + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影 + } + &:active { + transform: translateY(0); // 点击时回到原位 + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); } } @@ -78,6 +104,7 @@ export const baseButton = css` .ui.basic.buttons .active.button:hover, .ui.basic.active.button:hover { background-color: ${themeVars.github.button.default.bgColor.active}; + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); } `; @@ -90,12 +117,19 @@ export const redButton = css` background-color: ${themeVars.github.button.danger.bgColor.rest}; /* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */ border-color: ${themeVars.color.light.border}; + border-radius: 8px; // 增加圆角 &:hover { color: ${themeVars.github.button.danger.fgColor.hover}; background-color: ${themeVars.github.button.danger.bgColor.hover}; border-color: ${themeVars.github.button.danger.borderColor.hover}; box-shadow: ${themeVars.github.shadow.resting.small}; + transform: translateY(-1px); // 添加轻微的上移效果 + } + + &:active { + transform: translateY(0); // 点击时回到原位 + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); } } `; @@ -107,10 +141,12 @@ export const fixButtonHeight = css` .ui.ui.ui.ui.small.button { min-height: 26px; height: 32px; + border-radius: 6px; // 小按钮使用稍小的圆角 } // 修复仓库页仓库操作按钮高度对齐和修正 .repo-button-row .ui.button { min-height: 32px; + border-radius: 8px; // 保持一致的圆角 } // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高 .repo-header { @@ -118,11 +154,13 @@ export const fixButtonHeight = css` .ui.labeled.button > .label { height: 28px; min-height: 28px; + border-radius: 6px; // 小按钮使用稍小的圆角 } } .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button, .ui.ui.ui.ui.tiny.button { min-height: 20px; + border-radius: 4px; // 微型按钮使用更小的圆角 } `; @@ -135,5 +173,6 @@ export const fixButton = css` .ui.button.code-copy { padding: 4px 6px; min-height: 28px; + border-radius: 6px; // 保持一致的圆角 } -`; +`; \ No newline at end of file diff --git a/styles/public/dropdown.ts b/styles/public/dropdown.ts index 17aca0b..b1055df 100644 --- a/styles/public/dropdown.ts +++ b/styles/public/dropdown.ts @@ -1,6 +1,6 @@ import { animationDown, animationUp } from "src/core/theme"; import { fallbackVar } from "src/functions"; -import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; +import { css, customThemeVars, themeVars } from "src/types/vars"; import { activeItemAfterStyle } from "styles/public/menu"; export const dropdown = css` @@ -17,9 +17,10 @@ export const dropdown = css` > .item:not(.tw-hidden) { display: flex !important; align-items: center; - padding: 6px 8px !important; - border-radius: ${otherThemeVars.border.radius} !important; + padding: 8px 12px !important; // 增加内边距 + border-radius: 8px !important; // 增加圆角 gap: 4px; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:not(.emoji) { margin: 0 8px; } @@ -33,6 +34,7 @@ export const dropdown = css` } &:hover { background-color: ${themeVars.github.control.transparent.bgColor.hover} !important; + transform: translateX(2px); // 轻微右移效果 } &.selected { background-color: ${themeVars.color.active} !important; @@ -146,16 +148,19 @@ export const selectionDropdown = css` .ui.selection.dropdown.active:not(.search):not(.ellipsis-text-items) { background-color: ${themeVars.color.button}; border-color: ${themeVars.color.light.border}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 padding: 8px 16px; min-height: 32px; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:focus { background: ${themeVars.color.button}; border-color: ${themeVars.color.light.border}; + box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果 } &:hover { background: ${themeVars.color.hover.self}; - border-color: ${themeVars.color.light.border}; + border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色 + transform: translateY(-1px); // 轻微上移效果 } // 悬停提供伪元素 .item:hover:after { @@ -176,34 +181,41 @@ export const selectionDropdown = css` // 不实现伪元素, 因为 .item 设置溢出的元素会被截断 .ui.selection.dropdown.ellipsis-text-items, .ui.selection.dropdown.activeellipsis-text-items { + border-radius: 8px; // 增加圆角 &:focus { background: ${themeVars.color.button}; border-color: ${themeVars.color.light.border}; + box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果 } &:hover { background: ${themeVars.color.hover.self}; - border-color: ${themeVars.color.light.border}; + border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色 + transform: translateY(-1px); // 轻微上移效果 } } // 选择输入框效果和输入框 focus 效果一样 .ui.selection.dropdown.active.search { background: ${themeVars.color.body}; // 向内部添加一个 1px 的边框 - box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}; + box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果 outline: none; + border-radius: 8px; // 增加圆角 } // 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线 .ui.selection.dropdown.active.search.upward:hover { - box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}; + box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 2px rgba(253, 224, 71, 0.2); // 增强焦点效果 } // 由于之前的排除导致样式优先级变高, 小按钮去除圆角 .ui.action.input > .dropdown.small:not(:first-child) { - border-radius: 0; + border-radius: 0 8px 8px 0; // 右侧圆角 + } + .ui.action.input > .dropdown.small:first-child { + border-radius: 8px 0 0 8px; // 左侧圆角 } // 排除一些小按钮, 例如软件包类型, 通常相邻有元素 .ui.selection.dropdown.active:not(.small) { - border-bottom-left-radius: ${otherThemeVars.border.radius} !important; - border-bottom-right-radius: ${otherThemeVars.border.radius} !important; + border-bottom-left-radius: 8px !important; + border-bottom-right-radius: 8px !important; } // 修复因为上面的排除导致的圆角问题 // 具体工单页面下依赖菜单选择框 @@ -215,8 +227,10 @@ export const selectionDropdown = css` // 修复选择框的下拉菜单向上显示时的样式问题 .ui.upward.selection.dropdown.visible:not(.small), .ui.active.upward.selection.dropdown:not(.small) { - border-top-left-radius: ${otherThemeVars.border.radius} !important; - border-top-right-radius: ${otherThemeVars.border.radius} !important; + border-top-left-radius: 8px !important; + border-top-right-radius: 8px !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; } // 工单标签菜单中的标签换行和颜色 // 标签页面的标签选择框 @@ -259,14 +273,18 @@ export const emojiDropdown = css` gap: 4px; padding: 4px; min-width: auto; + border-radius: 12px !important; // 增加圆角 > .item.emoji { font-size: 14px; min-height: 32px; height: 32px; margin: 0px; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background-color: ${themeVars.github.bgColor.accent.emphasis} !important; + transform: scale(1.1); // 轻微放大效果 } } } -`; +`; \ No newline at end of file diff --git a/styles/public/input.ts b/styles/public/input.ts index 8ebce4b..f649f95 100644 --- a/styles/public/input.ts +++ b/styles/public/input.ts @@ -1,4 +1,4 @@ -import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { css, themeVars } from "src/types/vars"; export const input = css` input, @@ -20,23 +20,45 @@ export const input = css` .ui.form input[type="time"], .ui.form input[type="url"] { padding: 8px 12px; + border-radius: 8px; // 增加圆角 + border: 1px solid ${themeVars.color.light.border}; // 默认边框 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:focus, &:focus-visible { background: ${themeVars.color.body} !important; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 保持圆角 border-color: ${themeVars.github.borderColor.accent.emphasis}; // 向内部添加一个 1px 的边框 - box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}; + box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 3px rgba(253, 224, 71, 0.2); // 增强焦点效果 outline: none; + transform: translateY(-1px); // 轻微上移效果 + } + &:hover:not(:focus) { + border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加轻微阴影 } } .ui.input { height: 32px; + border-radius: 8px; // 增加圆角 } // 由于输入框高度, 需要输入框在表单中垂直居中 // 管理员页面仓库搜索表单 .ui.form#repo-search-form { align-items: center; } -`; + + // 增强表单元素的整体样式 + .ui.form { + .field { + margin-bottom: 16px; // 增加字段间距 + } + + label { + font-weight: 500; // 增加标签字体粗细 + margin-bottom: 6px; // 增加标签与输入框间距 + display: block; + } + } +`; \ No newline at end of file diff --git a/styles/public/label.ts b/styles/public/label.ts index f128a7b..94d3d20 100644 --- a/styles/public/label.ts +++ b/styles/public/label.ts @@ -8,6 +8,9 @@ export const label = css` &.ui.ui.ui { &.label { border-radius: 25px; + padding: 5px 12px; // 增加内边距 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 // 多个标签的组合标签的圆角修复 &.scope-parent { .scope-left { @@ -27,42 +30,75 @@ export const label = css` background-color: unset; border: 1px solid ${themeVars.color.primary.self}; color: ${themeVars.color.primary.self}; + &:hover { + background-color: ${themeVars.color.primary.dark.num1}; // 悬停时添加背景色 + transform: translateY(-1px); // 轻微上移效果 + } } /* 红色标签 */ &.red { background-color: unset; border: 1px solid ${themeVars.github.borderColor.done.emphasis}; color: ${themeVars.color.purple.self}; + &:hover { + background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色 + transform: translateY(-1px); // 轻微上移效果 + } } /* 橙色标签 */ &.orange { background-color: unset; border: 1px solid ${themeVars.github.borderColor.attention.emphasis}; color: ${themeVars.color.yellow.self}; + &:hover { + background-color: ${themeVars.color.yellow.dark.num1}; // 悬停时添加背景色 + transform: translateY(-1px); // 轻微上移效果 + } } /* 黄色标签 */ &.yellow { background-color: unset; border: 1px solid ${themeVars.github.borderColor.attention.emphasis}; color: ${themeVars.color.orange.self}; + &:hover { + background-color: ${themeVars.color.orange.dark.num1}; // 悬停时添加背景色 + transform: translateY(-1px); // 轻微上移效果 + } } /* 黄绿色标签 */ &.olive { background-color: unset; border: 1px solid ${themeVars.color.olive.self}; color: ${themeVars.color.olive.self}; + &:hover { + background-color: ${themeVars.color.olive.dark.num1}; // 悬停时添加背景色 + transform: translateY(-1px); // 轻微上移效果 + } } /* 绿色标签 */ &.green { background-color: unset; border: 1px solid ${themeVars.github.borderColor.success.emphasis}; color: ${themeVars.color.green.self}; + &:hover { + background-color: ${themeVars.color.green.dark.num1}; // 悬停时添加背景色 + transform: translateY(-1px); // 轻微上移效果 + } } /* 紫色标签 */ &.purple { background-color: unset; border: 1px solid ${themeVars.github.borderColor.done.emphasis}; color: ${themeVars.color.purple.self}; + &:hover { + background-color: ${themeVars.color.purple.dark.num1}; // 悬停时添加背景色 + transform: translateY(-1px); // 轻微上移效果 + } + } + // 添加悬停效果 + &:hover:not(.primary):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.purple) { + background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色 + transform: translateY(-1px); // 轻微上移效果 } } } @@ -84,10 +120,14 @@ export const shaLabel = css` color: ${themeVars.color.text.light.num1}; font-size: 12px; font-weight: 500; + padding: 4px 8px; // 增加内边距 // 仪表盘页的提交 SHA 标签居中对齐 margin-top: 2px; + border-radius: 25px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background-color: ${themeVars.color.label.hoverBg}; + transform: translateY(-1px); // 轻微上移效果 } // 验证提交 SHA 标签 &.commit-is-signed { @@ -95,22 +135,26 @@ export const shaLabel = css` background-color: unset !important; &:hover { background-color: ${themeVars.color.label.hoverBg} !important; + transform: translateY(-1px); // 轻微上移效果 } span.ui.label.commit-is-signed { padding: 3px 5px; margin-left: 5px; + border-radius: 25px; // 增加圆角 } } } // 验证提交附带的图标 span.ui.label.commit-is-signed { + border-radius: 25px; // 增加圆角 // 验证信任 &.sign-trusted { border: 1.5px solid ${themeVars.color.green.badge.self} !important; color: ${themeVars.color.green.badge.self} !important; &:hover { - background-color: ${themeVars.color.green.badge.hover.bg} !important; + background-color: ${themeVars.color.green.badge.bg} !important; + transform: translateY(-1px); // 轻微上移效果 } } // 验证未信任 @@ -118,7 +162,8 @@ export const shaLabel = css` border: 1.5px solid ${themeVars.color.yellow.badge.self} !important; color: ${themeVars.color.yellow.badge.self} !important; &:hover { - background-color: ${themeVars.color.yellow.badge.hover.bg} !important; + background-color: ${themeVars.color.yellow.badge.bg} !important; + transform: translateY(-1px); // 轻微上移效果 } } // 验证未匹配 @@ -126,7 +171,8 @@ export const shaLabel = css` border: 1.5px solid ${themeVars.color.orange.badge.self} !important; color: ${themeVars.color.orange.badge.self} !important; &:hover { - background-color: ${themeVars.color.orange.badge.hover.bg} !important; + background-color: ${themeVars.color.orange.badge.bg} !important; + transform: translateY(-1px); // 轻微上移效果 } } // 验证警告 @@ -134,7 +180,8 @@ export const shaLabel = css` border: 1.5px solid ${themeVars.color.red.badge.self} !important; color: ${themeVars.color.red.badge.self} !important; &:hover { - background-color: ${themeVars.color.red.badge.hover.bg} !important; + background-color: ${themeVars.color.red.badge.bg} !important; + transform: translateY(-1px); // 轻微上移效果 } } } @@ -147,12 +194,26 @@ export const taskStatusLabel = css` color: ${themeVars.color.success.text}; border: 1px solid ${themeVars.color.success.border}; background: ${themeVars.color.success.bg}; + border-radius: 25px; // 增加圆角 + padding: 5px 12px; // 增加内边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background: ${themeVars.color.success.bg}; // 悬停时改变背景色 + transform: translateY(-1px); // 轻微上移效果 + } } &failure { color: ${themeVars.color.error.text}; border: 1px solid ${themeVars.color.error.border}; background: ${themeVars.color.error.bg.self}; + border-radius: 25px; // 增加圆角 + padding: 5px 12px; // 增加内边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background: ${themeVars.color.error.bg.self}; // 悬停时改变背景色 + transform: translateY(-1px); // 轻微上移效果 + } } &running, @@ -160,6 +221,13 @@ export const taskStatusLabel = css` color: ${themeVars.color.info.text}; border: 1px solid ${themeVars.color.info.border}; background: ${themeVars.color.info.bg}; + border-radius: 25px; // 增加圆角 + padding: 5px 12px; // 增加内边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background: ${themeVars.color.info.bg}; // 悬停时改变背景色 + transform: translateY(-1px); // 轻微上移效果 + } } &cancelled, @@ -167,6 +235,13 @@ export const taskStatusLabel = css` color: ${themeVars.color.warning.text}; border: 1px solid ${themeVars.color.warning.border}; background: ${themeVars.color.warning.bg}; + border-radius: 25px; // 增加圆角 + padding: 5px 12px; // 增加内边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background: ${themeVars.color.warning.bg}; // 悬停时改变背景色 + transform: translateY(-1px); // 轻微上移效果 + } } } `; @@ -181,10 +256,16 @@ export const repoLabel = css` color: ${themeVars.color.text.light.num1}; font-size: 12px; font-weight: 500; - padding: 3px 6px; + padding: 4px 8px; // 增加内边距 + border-radius: 25px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + background-color: ${themeVars.color.hover.self}; // 悬停时添加背景色 + transform: translateY(-1px); // 轻微上移效果 + } } } .org-visibility span.ui.basic.label { font-size: 14px; } -`; +`; \ No newline at end of file diff --git a/styles/public/menu.ts b/styles/public/menu.ts index e671265..69b0d57 100644 --- a/styles/public/menu.ts +++ b/styles/public/menu.ts @@ -24,25 +24,30 @@ export const verticalMenu = css` font-weight: 700; background: unset; margin-bottom: 0.5rem; + padding: 8px 12px; // 增加内边距 } // 菜单项被悬停时的背景色, 限制a标签, 避免为子菜单多余渲染 a.item:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + border-radius: 8px; // 增加圆角 + transform: translateX(2px); // 轻微右移效果 } // 菜单项 .item, .item > summary { font-size: 1.1rem; background: unset; - border-radius: ${otherThemeVars.border.radius}; - padding: 6px 8px; + border-radius: 8px; // 增加圆角 + padding: 8px 12px; // 增加内边距 + margin: 2px 0; // 增加垂直间距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 } // Actions 菜单的圆角覆盖 > .item, > .active.item { &:first-child, &:last-child { - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 } } // 去除菜单项的边框线 @@ -53,7 +58,8 @@ export const verticalMenu = css` .active.item, .active.item > summary { font-weight: 600; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 + background-color: ${themeVars.color.active}; // 添加背景色 } // 添加伪元素, 用于指示当前激活的菜单项 .active.item:after { @@ -65,16 +71,19 @@ export const verticalMenu = css` // 子菜单的标题 summary:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + border-radius: 8px; // 增加圆角 } // 子菜单的选项 .menu .item { color: ${themeVars.color.text.self}; + padding: 6px 12px 6px 24px; // 增加左侧内边距 } // 子菜单的选项被激活 &:has(.active.item) { > summary { font-weight: 600; background: ${themeVars.color.active}; + border-radius: 8px; // 增加圆角 // 收回状态,悬停色 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; @@ -88,6 +97,7 @@ export const verticalMenu = css` .active.item { background: ${themeVars.color.active}; font-weight: 400; + border-radius: 8px; // 增加圆角 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; } @@ -96,6 +106,7 @@ export const verticalMenu = css` &[open] { > summary { background: unset; + border-radius: 8px 8px 0 0; // 顶部圆角 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; } @@ -117,15 +128,20 @@ export const menu = css` .ui.menu a.item, .ui.secondary.pointing.menu a.item, .ui.secondary.menu .dropdown.item { + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 } } // 一些水平小型菜单的颜色更改 .small-menu-items .item { background-color: ${themeVars.color.body} !important; + border-radius: 8px; // 增加圆角 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover} !important; + transform: translateY(-1px); // 轻微上移效果 } } // 一些菜单的悬浮色更改 @@ -134,8 +150,11 @@ export const menu = css` .ui.secondary.pointing.menu { .item, .active.item { + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 } } } @@ -148,9 +167,12 @@ export const secondaryMenu = css` padding: 0px 12px; height: 32px; font-weight: 500; + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 } a.item:hover { background: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateY(-1px); // 轻微上移效果 } } // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏 @@ -162,20 +184,26 @@ export const secondaryMenu = css` margin-block-start: 0.5rem; margin-block-end: 0.5rem; margin-bottom: 0.5rem !important; + border-radius: 8px; // 增加圆角 } } .item { font-weight: 400; // 二级导航栏不需要加粗 + border-radius: 8px; // 增加圆角 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 } .active.item, .dropdown.item, .link.item, a.item { - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 color: ${themeVars.color.text.self}; svg { margin-right: 8px; } + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } .active.item { // 取消激活时的下划线, 需要为透明, 保持间距 @@ -184,7 +212,7 @@ export const secondaryMenu = css` span:after { content: ""; background: ${themeVars.github.underlineNav.borderColor.active}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 bottom: calc(50% - 1.8rem); height: 2px; position: absolute; @@ -210,16 +238,18 @@ export const paginationMenu = css` gap: 4px; min-height: fit-content; .item { - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 min-width: 32px; min-height: 32px; height: 32px; justify-content: center; // 避免一些 hover 效果调整内容 padding: 5px 10px !important; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &.active { background: ${themeVars.github.bgColor.accent.emphasis}; color: ${themeVars.color.white}; + transform: translateY(-1px); // 轻微上移效果 } // 设置透明边框线避免 hover 时元素大小变化 &:not(.active) { @@ -227,6 +257,7 @@ export const paginationMenu = css` &:hover { background: unset; border-color: ${themeVars.color.secondary.self}; + transform: translateY(-1px); // 轻微上移效果 } } &.navigation { @@ -240,6 +271,9 @@ export const paginationMenu = css` svg { margin-top: 2px; } + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } } } } @@ -262,15 +296,19 @@ export const smallCompactMenu = css` gap: 8px; height: 32px; min-height: 32px !important; + padding: 4px; // 增加内边距 + border-radius: 12px; // 增加圆角 > .item { background: unset !important; border: 1px solid ${themeVars.color.hover.self}; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 padding: 6px 12px !important; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &.active { background: ${themeVars.color.menu} !important; border-color: ${themeVars.color.light.border}; font-weight: 600; + transform: translateY(-1px); // 轻微上移效果 } &::before { display: none; @@ -290,9 +328,10 @@ export const smallCompactMenu = css` } &:hover { background: ${themeVars.github.control.transparent.bgColor.hover} !important; + transform: translateY(-1px); // 轻微上移效果 } } } } } -`; +`; \ No newline at end of file diff --git a/styles/public/modal.ts b/styles/public/modal.ts index 385285e..40a8ca8 100644 --- a/styles/public/modal.ts +++ b/styles/public/modal.ts @@ -5,15 +5,23 @@ export const modal = css` .ui.modal { animation: ${animationDown}; border: 1.5px solid ${themeVars.color.light.border}; + border-radius: 16px; // 增加圆角 + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05); // 增强阴影效果 + overflow: hidden; // 隐藏溢出内容 > .header { background-color: ${themeVars.color.menu}; border-bottom: 1.5px solid ${themeVars.color.light.border}; + padding: 20px 24px; // 增加内边距 + font-size: 1.25rem; // 增加字体大小 + font-weight: 600; // 增加字体粗细 + border-radius: 16px 16px 0 0; // 保持顶部圆角 } > .content, form > .content { background-color: ${themeVars.color.menu}; + padding: 24px; // 增加内边距 } > .actions, @@ -21,9 +29,27 @@ export const modal = css` .content + form > .actions { background-color: ${themeVars.color.menu}; border-top: 1.5px solid ${themeVars.color.light.border}; + padding: 16px 24px; // 增加内边距 + border-radius: 0 0 16px 16px; // 保持底部圆角 } .actions > .ui.button { - padding: 8px 12px; + padding: 8px 16px; // 增加内边距 + border-radius: 8px; // 增加圆角 + min-height: 36px; // 增加最小高度 + font-weight: 500; // 增加字体粗细 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + transform: translateY(-1px); // 轻微上移效果 + } + &:active { + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); // 点击脉冲效果 + } } } -`; + + // 增强模态框的可访问性 + .ui.modal:focus { + outline: 2px solid ${themeVars.github.borderColor.accent.emphasis}; + outline-offset: 2px; + } +`; \ No newline at end of file diff --git a/styles/public/other.ts b/styles/public/other.ts index 449c0cb..3ffd19a 100644 --- a/styles/public/other.ts +++ b/styles/public/other.ts @@ -5,6 +5,11 @@ export const listHeader = css` .list-header { align-items: center; align-content: center; + padding: 16px; // 增加内边距 + border-radius: 12px; // 增加圆角 + background-color: ${themeVars.color.box.header}; // 背景色 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影 + margin-bottom: 16px; // 增加底部间距 } `; @@ -14,3 +19,47 @@ export const star = css` color: ${themeVars.github.button.star.iconColor} !important; } `; + +// 卡片样式，参考 Nano-Banana-AI-Image-Editor 的设计 +export const card = css` + .ui.segment, + .ui.attached.segment, + .ui.card, + .ui.cards > .card { + border-radius: 12px; // 增加圆角 + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05); // 添加卡片阴影 + border: 1px solid ${themeVars.color.light.border}; // 添加边框 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + + &:hover { + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 悬停时增强阴影 + transform: translateY(-2px); // 轻微上移效果 + } + } + + // 卡片头部 + .ui.segment > .ui.tabular.menu, + .header-wrapper .ui.tabular.menu { + border-radius: 12px 12px 0 0; // 保持顶部圆角 + margin: -1px -1px 0 -1px; // 调整边距 + } +`; + +// 面板样式 +export const panel = css` + .ui.attached.header, + .ui.top.attached.header { + border-radius: 12px 12px 0 0; // 保持顶部圆角 + padding: 16px; // 增加内边距 + font-weight: 600; // 增加字体粗细 + border: 1px solid ${themeVars.color.light.border}; // 添加边框 + border-bottom: none; // 移除底部边框 + } + + .ui.bottom.attached.header { + border-radius: 0 0 12px 12px; // 保持底部圆角 + padding: 16px; // 增加内边距 + border: 1px solid ${themeVars.color.light.border}; // 添加边框 + border-top: none; // 移除顶部边框 + } +`; \ No newline at end of file diff --git a/styles/public/radius.ts b/styles/public/radius.ts index b740ebe..8863ebf 100644 --- a/styles/public/radius.ts +++ b/styles/public/radius.ts @@ -63,6 +63,14 @@ export const radius = css` .ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) { border-radius: ${otherThemeVars.border.radius}; } + + // 增加特殊组件的圆角 + .ui.card, + .ui.cards > .card, + .ui.attached.segment, + .ui.tabular.menu { + border-radius: 12px; // 卡片使用更大的圆角 + } `; // 全部圆角替换(原CSS带!important) @@ -86,6 +94,12 @@ export const radiusImportant = css` border-radius: ${otherThemeVars.border.radius} !important; } } + + // 卡片圆角 + .ui.card, + .ui.cards > .card { + border-radius: 12px !important; + } `; // 上半部分圆角替换 @@ -111,6 +125,14 @@ export const radiusTop = css` .ui.modal > :first-child:not(.icon):not(.dimmer) { border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0; } + + // 卡片顶部圆角 + .ui.card > .content:first-child, + .ui.cards > .card > .content:first-child, + .ui.segment > .ui.tabular.menu, + .header-wrapper .ui.tabular.menu { + border-radius: 12px 12px 0 0; + } `; // 上半部分圆角替换(原CSS带!important) @@ -123,6 +145,12 @@ export const radiusTopImportant = css` border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important; } } + + // 卡片顶部圆角 + .ui.card > .content:first-child, + .ui.cards > .card > .content:first-child { + border-radius: 12px 12px 0 0 !important; + } `; // 下半部分圆角替换 @@ -159,6 +187,12 @@ export const radiusBottom = css` .ui.segment:has(+ .ui.segment:not(.attached)) { border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius}; } + + // 卡片底部圆角 + .ui.card > .content:last-child, + .ui.cards > .card > .content:last-child { + border-radius: 0 0 12px 12px; + } `; // 下半部分圆角替换(原CSS带!important) @@ -167,6 +201,12 @@ export const radiusBottomImportant = css` .ui.active.upward.selection.dropdown { border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} !important; } + + // 卡片底部圆角 + .ui.card > .content:last-child, + .ui.cards > .card > .content:last-child { + border-radius: 0 0 12px 12px !important; + } `; // 左半部分圆角替换 @@ -212,6 +252,12 @@ export const radiusTopLeft = css` .ui.table > thead > tr:first-child > th:first-child { border-top-left-radius: ${otherThemeVars.border.radius}; } + + // 卡片左上圆角 + .ui.card > .content:first-child, + .ui.cards > .card > .content:first-child { + border-top-left-radius: 12px; + } `; // 右上圆角替换 @@ -220,6 +266,12 @@ export const radiusTopRight = css` .ui.category.search > .results .category:first-child .name + .result { border-top-right-radius: ${otherThemeVars.border.radius}; } + + // 卡片右上圆角 + .ui.card > .content:first-child, + .ui.cards > .card > .content:first-child { + border-top-right-radius: 12px; + } `; // 左下圆角替换 @@ -232,6 +284,12 @@ export const radiusBottomLeft = css` } } } + + // 卡片左下圆角 + .ui.card > .content:last-child, + .ui.cards > .card > .content:last-child { + border-bottom-left-radius: 12px; + } `; // 右下圆角替换 @@ -248,6 +306,12 @@ export const radiusBottomRight = css` .ui.category.search > .results .category:last-child .result:last-child { border-bottom-right-radius: ${otherThemeVars.border.radius}; } + + // 卡片右下圆角 + .ui.card > .content:last-child, + .ui.cards > .card > .content:last-child { + border-bottom-right-radius: 12px; + } `; // only-child 顺序最后生效 @@ -269,6 +333,12 @@ export const onlyChild = css` } } } + + // 独立卡片圆角 + .ui.card:not(.attached), + .ui.cards > .card:not(.attached) { + border-radius: 12px; + } `; // 修复一些情况下圆角边框线被覆盖的问题 @@ -283,6 +353,12 @@ export const fixRadius = css` border-bottom-left-radius: ${otherThemeVars.border.radius}; border-bottom-right-radius: ${otherThemeVars.border.radius}; } + + // 修复卡片圆角问题 + .ui.card, + .ui.cards > .card { + overflow: hidden; + } `; // 修复一些根本无法理解的生效顺序 @@ -291,4 +367,10 @@ export const fixWhyRadius = css` .ui.secondary.menu .item { border-radius: ${otherThemeVars.border.radius}; } -`; + + // 卡片圆角 + .ui.card, + .ui.cards > .card { + border-radius: 12px; + } +`; \ No newline at end of file diff --git a/styles/public/text.ts b/styles/public/text.ts index 546bbb0..fd53609 100644 --- a/styles/public/text.ts +++ b/styles/public/text.ts @@ -8,6 +8,12 @@ export const red = css` color: ${themeVars.github.fgColor.done} !important; } } + + // 增强红色文本的视觉效果 + .text.red { + color: ${themeVars.color.red.self} !important; + font-weight: 500; // 增加字体粗细 + } `; export const grey = css` @@ -16,4 +22,46 @@ export const grey = css` .text.grey { color: ${themeVars.color.text.light.num1} !important; } + + // 增强灰色文本的视觉效果 + .text.grey { + font-weight: 400; // 设置字体粗细 + } `; + +// 增加更多文本颜色样式 +export const textColors = css` + .text.blue { + color: ${themeVars.color.blue.self} !important; + font-weight: 500; // 增加字体粗细 + } + + .text.green { + color: ${themeVars.color.green.self} !important; + font-weight: 500; // 增加字体粗细 + } + + .text.yellow { + color: ${themeVars.color.yellow.self} !important; + font-weight: 500; // 增加字体粗细 + } + + .text.purple { + color: ${themeVars.color.purple.self} !important; + font-weight: 500; // 增加字体粗细 + } + + .text.orange { + color: ${themeVars.color.orange.self} !important; + font-weight: 500; // 增加字体粗细 + } + + // 链接文本样式 + a.text { + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 + &:hover { + opacity: 0.8; // 悬停时降低不透明度 + text-decoration: underline; // 悬停时添加下划线 + } + } +`; \ No newline at end of file diff --git a/styles/public/tippy.ts b/styles/public/tippy.ts index 0ce2409..9d6b37b 100644 --- a/styles/public/tippy.ts +++ b/styles/public/tippy.ts @@ -1,19 +1,24 @@ import { animationDown } from "src/core/theme"; -import { css, otherThemeVars, themeVars } from "src/types/vars"; +import { css, themeVars } from "src/types/vars"; // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等 export const tippyBox = css` .tippy-box { margin-top: -3px; - border-radius: ${otherThemeVars.border.radius}; + border-radius: 12px; // 增加圆角 overflow: hidden; animation: ${animationDown}; + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 // 克隆菜单和PR提示框为 default &[data-theme="default"], // 带标题的提示框 (Runner信息) &[data-theme="box-with-header"] { border: unset; box-shadow: ${themeVars.github.shadow.floating.small}; + &:hover { + transform: translateY(-2px); // 轻微上移效果 + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 增强阴影 + } } &[data-theme="default"] { border-radius: 12px; @@ -23,6 +28,8 @@ export const tippyBox = css` background-color: ${themeVars.color.menu}; .ui.attached.header { background-color: ${themeVars.color.body}; + padding: 12px 16px; // 增加内边距 + font-weight: 600; // 增加字体粗细 } } } @@ -31,9 +38,12 @@ export const tippyBox = css` .tippy-content { padding: 8px; .item { - border-radius: ${otherThemeVars.border.radius}; + border-radius: 8px; // 增加圆角 + padding: 6px 12px; // 增加内边距 + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果 &:hover { background-color: ${themeVars.github.control.transparent.bgColor.hover}; + transform: translateX(2px); // 轻微右移效果 } } } @@ -43,8 +53,11 @@ export const tippyBox = css` .tippy-content { font-size: 12px; font-weight: 400; - padding: 4px 8px; + padding: 6px 12px; // 增加内边距 + border-radius: 8px; // 增加圆角 + background-color: ${themeVars.color.menu}; // 添加背景色 + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影 } } } -`; +`; \ No newline at end of file diff --git a/styles/public/transition.ts b/styles/public/transition.ts index 19d4654..969c74e 100644 --- a/styles/public/transition.ts +++ b/styles/public/transition.ts @@ -1,6 +1,6 @@ import { css } from "src/types/vars"; -// 简单的渐变过渡 +// 增强的渐变过渡，参考 Nano-Banana-AI-Image-Editor 的设计 export const transition = css` // 差异对比的代码折叠按钮 .code-expander-button, @@ -36,7 +36,7 @@ export const transition = css` .ui.selection.active.dropdown:hover .menu, .ui.vertical.menu .header.item, .ui.secondary.menu .item { - transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } // Gitea 表单元素原始过渡覆盖 input, @@ -56,6 +56,74 @@ export const transition = css` .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { - transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); } -`; + + // 添加按钮点击脉冲动画 + @keyframes pulse-click { + 0% { + transform: scale(1); + } + 50% { + transform: scale(0.95); + } + 100% { + transform: scale(1); + } + } + + .pulse-click { + animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1); + } + + // 添加滑入动画 + @keyframes slide-in-from-top-full { + 0% { + transform: translateY(-100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } + } + + @keyframes slide-in-from-right { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } + } + + @keyframes slide-out-to-right { + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(100%); + opacity: 0; + } + } + + .animate-in { + animation-duration: 300ms; + animation-fill-mode: both; + } + + .slide-in-from-top-full { + animation-name: slide-in-from-top-full; + } + + .slide-in-from-right { + animation-name: slide-in-from-right; + } + + .slide-out-to-right { + animation-name: slide-out-to-right; + } +`; \ No newline at end of file diff --git a/themes/modern-dark.css.ts b/themes/modern-dark.css.ts new file mode 100644 index 0000000..de65240 --- /dev/null +++ b/themes/modern-dark.css.ts @@ -0,0 +1,89 @@ +/** + * @author iFlow CLI + * 现代化暗色主题，基于 Nano-Banana-AI-Image-Editor 的设计风格 + */ + +import { defineTheme } from "src"; +import { github2ThemeColor, type GithubColor } from "src/core/github"; + +export const modernDarkGithubColors: GithubColor = { + isDarkTheme: true, + display: { + blue: { fgColor: "#4493f8" }, + brown: { fgColor: "#b69a6d" }, + cyan: { fgColor: "#07ace4" }, + indigo: { fgColor: "#9899ec" }, + lemon: { fgColor: "#fde047" }, // 使用香蕉黄作为柠檬色 + olive: { fgColor: "#a2a626" }, + teal: { fgColor: "#1cb0ab" }, + }, + diffBlob: { + addtionNum: { bgColor: "#3fb9504d" }, + addtionWord: { bgColor: "#2ea04366" }, + deletionNum: { bgColor: "#f851494d" }, + deletionWord: { bgColor: "#f8514966" }, + hunkNum: { bgColor: { rest: "#0c2d6b" } }, + }, + fgColor: { + accent: "#fde047", // 使用香蕉黄作为主色调 + attention: "#d29922", + danger: "#f85149", + default: "#f0f6fc", + disabled: "#656c76", + done: "#ab7df8", + muted: "#9198a1", + neutral: "#9198a1", + severe: "#db6d28", + sponsors: "#db61a2", + success: "#3fb950", + black: "#010409", + white: "#ffffff", + onEmphasis: "#ffffff", + }, + bgColor: { + accent: { emphasis: "#fde047", muted: "#fde0471a" }, // 使用香蕉黄作为强调色 + attention: { muted: "#bb800926" }, + danger: { muted: "#f851491a" }, + default: "#0d1117", + done: { emphasis: "#8957e5" }, + emphasis: "#3d444d", + muted: "#151b23", + neutral: { muted: "#656c7633" }, + success: { emphasis: "#238636", muted: "#2ea04326" }, + inset: "#010409", + }, + borderColor: { + accent: { emphasis: "#fde047" }, // 使用香蕉黄作为边框强调色 + attention: { emphasis: "#9e6a03" }, + default: "#3d444d", + done: { emphasis: "#8957e5" }, + success: { emphasis: "#238636" }, + muted: "#3d444db3", + translucent: "#ffffff26", + }, + button: { + primary: { + fgColor: { accent: "#0d1117", rest: "#0d1117" }, // 深色文字在黄色背景上 + bgColor: { rest: "#fde047", hover: "#eab308" }, // 香蕉黄按钮 + }, + danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } }, + star: { iconColor: "#fde047" }, // 使用香蕉黄作为星标颜色 + }, + control: { + bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" }, + transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } }, + }, + shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, + overlay: { backdrop: { bgColor: "#21283066" } }, + underlineNav: { borderColor: { active: "#fde047" } }, // 使用香蕉黄作为导航下划线 + contribution: { + default: { + bgColor: { num0: "#151b23", num1: "#033a16", num2: "#196c2e", num3: "#2ea043", num4: "#56d364" }, + borderColor: { num0: "#0104090d" }, + }, + }, +}; + +export const modernDarkColors = github2ThemeColor(modernDarkGithubColors); + +export default defineTheme(modernDarkColors); \ No newline at end of file diff --git a/themes/modern-light.css.ts b/themes/modern-light.css.ts new file mode 100644 index 0000000..54d453f --- /dev/null +++ b/themes/modern-light.css.ts @@ -0,0 +1,90 @@ +/** + * @author iFlow CLI + * 现代化亮色主题，基于 Nano-Banana-AI-Image-Editor 的设计风格 + */ + +import { defineTheme } from "src"; +import { github2ThemeColor, type GithubColor } from "src/core/github"; + +export const modernLightGithubColors: GithubColor = { + isDarkTheme: false, + display: { + blue: { fgColor: "#0969da" }, + brown: { fgColor: "#755f43" }, + cyan: { fgColor: "#006a80" }, + indigo: { fgColor: "#494edf" }, + lemon: { fgColor: "#fde047" }, // 使用香蕉黄作为柠檬色 + olive: { fgColor: "#56682c" }, + teal: { fgColor: "#106e75" }, + }, + diffBlob: { + addtionNum: { bgColor: "#aceebb" }, + addtionWord: { bgColor: "#aceebb" }, + deletionNum: { bgColor: "#ffcecb" }, + deletionWord: { bgColor: "#ffcecb" }, + hunkNum: { bgColor: { rest: "#b6e3ff" } }, + }, + fgColor: { + accent: "#fde047", // 使用香蕉黄作为主色调 + attention: "#9a6700", + danger: "#d1242f", + default: "#1f2328", + disabled: "#818b98", + done: "#8250df", + muted: "#59636e", + neutral: "#59636e", + severe: "#bc4c00", + sponsors: "#bf3989", + success: "#1a7f37", + black: "#1f2328", + white: "#ffffff", + onEmphasis: "#ffffff", + }, + bgColor: { + accent: { emphasis: "#fde047", muted: "#fffbeb" }, // 使用香蕉黄作为强调色 + attention: { muted: "#fff8c5" }, + danger: { muted: "#ffebe9" }, + default: "#ffffff", + done: { emphasis: "#8250df" }, + emphasis: "#25292e", + muted: "#f6f8fa", + neutral: { muted: "#818b981f" }, + success: { emphasis: "#1f883d", muted: "#dafbe1" }, + inset: "#f6f8fa", + }, + borderColor: { + accent: { emphasis: "#fde047" }, // 使用香蕉黄作为边框强调色 + attention: { emphasis: "#9a6700" }, + default: "#d1d9e0", + done: { emphasis: "#8250df" }, + success: { emphasis: "#1a7f37" }, + muted: "#d1d9e0b3", + translucent: "#1f232826", + }, + button: { + primary: { + fgColor: { accent: "#1f2328", rest: "#1f2328" }, // 深色文字在黄色背景上 + bgColor: { rest: "#fde047", hover: "#eab308" }, // 香蕉黄按钮 + }, + danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } }, + star: { iconColor: "#fde047" }, // 使用香蕉黄作为星标颜色 + }, + control: { + bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" }, + transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } }, + }, + shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } }, + overlay: { backdrop: { bgColor: "#c8d1da66" } }, + underlineNav: { borderColor: { active: "#fde047" }, // 使用香蕉黄作为导航下划线 + }, + contribution: { + default: { + bgColor: { num0: "#eff2f5", num1: "#aceebb", num2: "#4ac26b", num3: "#2da44e", num4: "#116329" }, + borderColor: { num0: "#1f23280d" }, + }, + }, +}; + +export const modernLightColors = github2ThemeColor(modernLightGithubColors); + +export default defineTheme(modernLightColors); \ No newline at end of file