优化下拉菜单的样式&同步亮色和柔和暗色主题下的菜单颜色

CHANGELOG.md

@@ -6,7 +6,9 @@
 
 - 修复并同步工单或 PR 详细页面下的标签菜单样式 #19
 - 同步页脚样式
+- 优化下拉菜单的样式
 - 优化创建标签菜单的菜单项的样式
+- 同步亮色和柔和暗色主题下的菜单颜色
 
 ### 🐞 Fix
 

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,

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};

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);
         }

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};
+          }
+        }
+      }
     }
   }
 `;

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;
+  }
 `;

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: {

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: {

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: {