dropdown 样式同步

.github/release.md

@@ -24,7 +24,8 @@
 - 提交 SHA 颜色和样式优化
 - 软件包标签颜色同步
 - Issue/PR 评论边框样式同步
-- Code/Runner/PR 弹窗样式同步
+- Code/Runner/PR 提示框样式同步
+- 下拉菜单样式同步
 
 ## 🎈 Perf
 
@@ -37,6 +38,7 @@
 - Runner 列表标签颜色优化
 - 仓库动态活动标签样式统一
 - 合并请求分支样式统一
+- 全局下拉菜单样式统一
 
 ## 🐞 Fix
 

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,

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"],

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

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

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"; // 提示框

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