diff --git a/CHANGELOG.md b/CHANGELOG.md index 42ee90a..2c1e51e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,9 @@ - 修复并同步工单或 PR 详细页面下的标签菜单样式 #19 - 同步页脚样式 +- 优化下拉菜单的样式 - 优化创建标签菜单的菜单项的样式 +- 同步亮色和柔和暗色主题下的菜单颜色 ### 🐞 Fix diff --git a/src/core/github.ts b/src/core/github.ts index a144b15..31cd1d8 100644 --- a/src/core/github.ts +++ b/src/core/github.ts @@ -70,7 +70,7 @@ export type GithubColor = { transparent: { bgColor: { active: string; hover: string; selected: string } }; }; shadow: { floating: { small: string }; resting: { small: string } }; - overlay: { backdrop: { bgColor: string } }; + overlay: { backdrop: { bgColor: string }; bgColor: string }; underlineNav: { borderColor: { active: string } }; contribution: { default: { @@ -91,7 +91,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { activeBg: githubColor.control.bgColor.active, hoverBg: githubColor.control.transparent.bgColor.hover, menu: { - bg: githubColor.bgColor.inset, + bg: githubColor.overlay.bgColor, border: githubColor.borderColor.muted, }, }; @@ -169,7 +169,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { opaque: themeVars.color.box.header, }, active: githubColor.control.transparent.bgColor.selected, - menu: githubColor.bgColor.inset, + menu: githubColor.overlay.bgColor, card: themeVars.color.body, markup: { tableRow: githubColor.bgColor.muted, diff --git a/styles/components/clone.ts b/styles/components/clone.ts index 41147a7..fa878fb 100644 --- a/styles/components/clone.ts +++ b/styles/components/clone.ts @@ -92,7 +92,7 @@ export const clone = css` .item { border-radius: ${otherThemeVars.border.radius}; padding: 6px 8px; - line-height: 1.5; + min-height: 32px; margin: 0; svg { color: ${themeVars.color.text.light.num1}; diff --git a/styles/components/issue.ts b/styles/components/issue.ts index e2ce9b5..09571fc 100644 --- a/styles/components/issue.ts +++ b/styles/components/issue.ts @@ -655,7 +655,8 @@ export const issueSidebar = css` .ui.form .due-date { color: ${themeVars.color.text.self}; } - .divider { + // 分割线 + > .divider { margin: 12px 0 12px 8px; width: calc(100% - 16px); } diff --git a/styles/public/dropdown.ts b/styles/public/dropdown.ts index bc6d604..1a2eadb 100644 --- a/styles/public/dropdown.ts +++ b/styles/public/dropdown.ts @@ -19,6 +19,7 @@ export const dropdown = css` align-items: center; align-content: center; padding: 6px 8px !important; + min-height: 32px; border-radius: ${otherThemeVars.border.radius} !important; gap: 4px; &:not(.emoji) { @@ -255,6 +256,32 @@ export const branchDropdown = css` max-width: 640px; > .menu > .item { animation: ${animationDown}; + height: 32px; + } + // 分支/标签切换 + > .branch-tag-tab { + > .branch-tag-item { + font-weight: 500; + padding: 8px 12px; + height: 32px; + line-height: 1.15; + svg { + display: none; + } + &.active { + background: ${themeVars.color.body}; + } + &:hover { + color: inherit; + &:not(.active) { + background: ${themeVars.color.hover.self}; + border: 1px solid ${themeVars.color.secondary.self}; + border-bottom: 0; + border-top-left-radius: ${otherThemeVars.border.radius}; + border-top-right-radius: ${otherThemeVars.border.radius}; + } + } + } } } `; diff --git a/styles/public/input.ts b/styles/public/input.ts index 8ebce4b..fe2a3bf 100644 --- a/styles/public/input.ts +++ b/styles/public/input.ts @@ -39,4 +39,8 @@ export const input = css` .ui.form#repo-search-form { align-items: center; } + // 下拉菜单的输入框 + .ui.dropdown.dropdown .menu>.input { + margin: 12px 10px; + } `; diff --git a/themes/dark.css.ts b/themes/dark.css.ts index 9dcf261..8c634d6 100644 --- a/themes/dark.css.ts +++ b/themes/dark.css.ts @@ -73,7 +73,7 @@ export const darkGithubColors: GithubColor = { transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } }, }, shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, - overlay: { backdrop: { bgColor: "#21283066" } }, + overlay: { backdrop: { bgColor: "#21283066" }, bgColor: "#010409" }, underlineNav: { borderColor: { active: "#f78166" } }, contribution: { default: { diff --git a/themes/light.css.ts b/themes/light.css.ts index 7f41310..72fbfc2 100644 --- a/themes/light.css.ts +++ b/themes/light.css.ts @@ -73,7 +73,7 @@ export const lightGithubColors: GithubColor = { transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } }, }, shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } }, - overlay: { backdrop: { bgColor: "#c8d1da66" } }, + overlay: { backdrop: { bgColor: "#c8d1da66" }, bgColor: "#ffffff" }, underlineNav: { borderColor: { active: "#fd8c73" } }, contribution: { default: { diff --git a/themes/soft-dark.css.ts b/themes/soft-dark.css.ts index 1770a1f..f947254 100644 --- a/themes/soft-dark.css.ts +++ b/themes/soft-dark.css.ts @@ -67,7 +67,7 @@ export const softDarkGithubColors: GithubColor = { transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } }, }, shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, - overlay: { backdrop: { bgColor: "#262c3666" } }, + overlay: { backdrop: { bgColor: "#262c3666" }, bgColor: "#2a313c" }, underlineNav: { borderColor: { active: "#ec775c" } }, contribution: { default: {