diff --git a/.github/release.md b/.github/release.md index 839ec9f..39dccdc 100644 --- a/.github/release.md +++ b/.github/release.md @@ -24,7 +24,8 @@ - 提交 SHA 颜色和样式优化 - 软件包标签颜色同步 - Issue/PR 评论边框样式同步 -- Code/Runner/PR 弹窗样式同步 +- Code/Runner/PR 提示框样式同步 +- 下拉菜单样式同步 ## 🎈 Perf @@ -37,6 +38,7 @@ - Runner 列表标签颜色优化 - 仓库动态活动标签样式统一 - 合并请求分支样式统一 +- 全局下拉菜单样式统一 ## 🐞 Fix diff --git a/src/core/github.ts b/src/core/github.ts index ca5b63c..4713e47 100644 --- a/src/core/github.ts +++ b/src/core/github.ts @@ -338,6 +338,11 @@ export function defineGithubTheme(githubColor: GithubColor): Theme { }, }, }, + shadow: { + floating: { + small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`, + }, + }, }; return defineTheme({ isDarkTheme: githubColor.isDarkTheme, diff --git a/src/core/theme.ts b/src/core/theme.ts index 462857a..6eecdea 100644 --- a/src/core/theme.ts +++ b/src/core/theme.ts @@ -14,6 +14,7 @@ function stringToBoolean(str: string, name: string): boolean { } export const overlayAppear = "overlay-appear"; +export const animation = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppear}`; const emoji = ` .emoji[aria-label="check mark"], diff --git a/src/types/color/github.ts b/src/types/color/github.ts index a80e526..cb5c789 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -160,9 +160,19 @@ export const github = { /** 悬停色 * @clone `clone` 克隆按钮下按钮组和面板操作列表的悬停背景颜色 * @input `inputAction` 输入框动作按钮的悬停背景颜色 + * @dropdown `dropdown` 下拉框子项的悬停背景颜色 */ hover: null, - } - } - } + }, + }, + }, + shadow: { + floating: { + /** 悬浮阴影 + * @tippy `tippyBox` 悬浮框阴影 + * @dropdown `dropdown` 下拉框阴影 + */ + small: null, + }, + }, }; diff --git a/styles/public/dropdown.tsx b/styles/public/dropdown.tsx new file mode 100644 index 0000000..5ef8f2b --- /dev/null +++ b/styles/public/dropdown.tsx @@ -0,0 +1,57 @@ +import { animation } from "src/core/theme"; +import { css, otherThemeVars, themeVars } from "src/types/vars"; + +export const dropdown = css` + .ui.dropdown, + .ui.menu .ui.dropdown { + .menu { + animation: ${animation}; + // 统一所有下拉菜单的样式 + margin-top: 0.35em !important; + background-color: ${themeVars.color.menu} !important; + border: unset !important; + border-radius: 12px !important; + box-shadow: ${themeVars.github.shadow.floating.small} !important; + + > .item { + padding: 8px 10px !important; + border-radius: ${otherThemeVars.border.radius} !important; + margin: 0 0.5rem; + &:first-child { + margin-top: 0.5rem; + } + &:last-child { + margin-bottom: 0.5rem; + } + &:hover { + background-color: ${themeVars.github.control.transparent.bgColor.hover} !important; + } + &.active, + &.selected { + background-color: ${themeVars.color.active} !important; + &:hover { + background-color: ${themeVars.github.control.transparent.bgColor.hover} !important; + } + } + } + > .divider { + margin: 0.5rem 0; + } + &:after { + display: none !important; + } + } + } + // 修复下拉菜单元素溢出问题 + // 用户菜单 + .user-menu>.item, + // Issue/PR 菜单 + .ui.menu .ui.dropdown.item .menu .item { + width: auto; + } + // 去掉下拉菜单的边框线 + // 设置里的下拉菜单 + .ui.selection.dropdown .menu > .item { + border: unset; + } +`; diff --git a/styles/public/index.tsx b/styles/public/index.tsx index b9eb2dc..e820d35 100644 --- a/styles/public/index.tsx +++ b/styles/public/index.tsx @@ -1,9 +1,10 @@ import "./button"; // 按钮 import "./chroma"; // 代码高亮 import "./codemirror"; // codemirror 样式 -import "./tippy"; +import "./dropdown"; // 下拉框 import "./input"; // 输入框 import "./label"; // 标签 import "./modal"; // 弹窗 import "./radius"; // 圆角 import "./svg"; // svg 图标 +import "./tippy"; // 提示框 diff --git a/styles/public/tippy.tsx b/styles/public/tippy.tsx index 7d7703f..932f001 100644 --- a/styles/public/tippy.tsx +++ b/styles/public/tippy.tsx @@ -1,23 +1,20 @@ -import { overlayAppear } from "src/core/theme"; +import { animation } from "src/core/theme"; import { css, themeVars } from "src/types/vars"; -// 一些界面内的弹窗, 比如克隆按钮, PR信息, Runner信息 等 +// 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等 export const tippyBox = css` .tippy-box { margin-top: -3px; border-radius: 12px; overflow: hidden; - animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppear}; + animation: ${animation}; // 边框线同步 github 样式 &[data-theme="default"], &[data-theme="box-with-header"] { border: unset; - box-shadow: - 0px 0px 0px 1px ${themeVars.color.light.border}, - 0px 6px 12px -3px ${themeVars.color.shadow.self}, - 0px 6px 18px 0px ${themeVars.color.shadow.self}; + box-shadow: ${themeVars.github.shadow.floating.small}; } - // 带标题的弹窗 (Runner信息) + // 带标题的提示框 (Runner信息) &[data-theme="box-with-header"] { .tippy-content { background-color: ${themeVars.color.menu};