dropdown 样式同步

.github/release.md

@@ -2,6 +2,7 @@
 
 #### 更符合 GitHub 风格
 
+- 1:1 还原克隆菜单样式
 - 代码差异对比折叠行文本颜色同步
 - 代码差异对比行号位置同步
 - 代码差异对比按钮和折叠行高度同步
@@ -23,6 +24,8 @@
 - 提交 SHA 颜色和样式优化
 - 软件包标签颜色同步
 - Issue/PR 评论边框样式同步
+- Code/Runner/PR 提示框样式同步
+- 下拉菜单样式同步
 
 ## 🎈 Perf
 
@@ -35,6 +38,7 @@
 - Runner 列表标签颜色优化
 - 仓库动态活动标签样式统一
 - 合并请求分支样式统一
+- 全局下拉菜单样式统一
 
 ## 🐞 Fix
 

src/core/github.ts

@@ -331,6 +331,18 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
         },
       },
     },
+    control: {
+      transparent: {
+        bgColor: {
+          hover: githubColor.control.transparent.bgColor.hover,
+        },
+      },
+    },
+    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

@@ -1,4 +1,4 @@
-import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
+import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
 import { otherThemeVars, themeVars } from "src/types/vars";
 import type { MapLeafNodes, WithOptionalLayer } from "./types";
 
@@ -13,7 +13,10 @@ function stringToBoolean(str: string, name: string): boolean {
   }
 }
 
-const dark_emoji = `
+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"],
 .emoji[aria-label="currency exchange"],
 .emoji[aria-label="TOP arrow"],
@@ -39,7 +42,7 @@ const dark_emoji = `
 export function createTheme(theme: Theme): void {
   const isDarkTheme = stringToBoolean(theme.isDarkTheme, "isDarkTheme");
   if (isDarkTheme) {
-    globalStyle(dark_emoji, { filter: "invert(100%) hue-rotate(180deg)" });
+    globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
   }
   createGlobalTheme(":root", themeVars, theme);
   createGlobalTheme(":root", otherThemeVars, {
@@ -57,4 +60,8 @@ export function createTheme(theme: Theme): void {
     accentColor: themeVars.color.accent,
     colorScheme: isDarkTheme ? "dark" : "light",
   });
+  globalKeyframes(overlayAppear, {
+    "0%": { opacity: 0, transform: "translateY(-12px)" },
+    "100%": { opacity: 1, transform: "translateY(0)" },
+  });
 }

src/types/color/github.ts

@@ -55,6 +55,7 @@ export const github = {
     accent: {
       /** 强调色
        * @input `input` 输入框被选中时的边框颜色
+       * @clone `clone` 克隆地址框被选中时的边框颜色
        * @issue `comment` 评论框被选中时的边框颜色
        */
       emphasis: null,
@@ -153,4 +154,25 @@ export const github = {
       },
     },
   },
+  control: {
+    transparent: {
+      bgColor: {
+        /** 悬停色
+         * @clone `clone` 克隆按钮下按钮组和面板操作列表的悬停背景颜色
+         * @input `inputAction` 输入框动作按钮的悬停背景颜色
+         * @dropdown `dropdown` 下拉框子项的悬停背景颜色
+         */
+        hover: null,
+      },
+    },
+  },
+  shadow: {
+    floating: {
+      /** 悬浮阴影
+       * @tippy `tippyBox` 悬浮框阴影
+       * @dropdown `dropdown` 下拉框阴影
+       */
+      small: null,
+    },
+  },
 };

styles/components/clone.tsx

@@ -0,0 +1,92 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+// 克隆按钮的弹窗
+export const clone = css`
+  .tippy-box {
+    .clone-panel-popup {
+      //标题
+      .clone-panel-field:first-of-type {
+        font-weight: bold;
+        margin-top: 16px;
+        margin-left: 16px;
+      }
+      // 按钮组
+      .clone-panel-tab {
+        display: flex;
+        gap: 8px;
+        margin-left: 12px;
+        // 按钮
+        .item {
+          color: ${themeVars.color.text.self};
+          font-weight: 600;
+          padding: 6px 8px;
+          margin: 8px 0;
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+            border-radius: ${otherThemeVars.border.radius};
+          }
+          &.active:after {
+            content: "";
+            display: block;
+            position: absolute;
+            bottom: -8px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: #f78166;
+          }
+        }
+        .item.active {
+          border-bottom: 0;
+          position: relative;
+        }
+      }
+      // 克隆地址
+      .ui.input.action {
+        > input,
+        > input:hover {
+          border: 1px solid ${themeVars.color.light.border};
+          border-radius: ${otherThemeVars.border.radius};
+        }
+        > input:focus,
+        > input:focus-visible {
+          border-color: ${themeVars.github.borderColor.accent.emphasis};
+        }
+        .ui.ui.ui.button {
+          background-color: unset;
+          border: unset;
+          border-radius: ${otherThemeVars.border.radius};
+          color: ${themeVars.color.text.light.num1};
+          padding: 5px 10px;
+          margin-left: 5px;
+          &:hover {
+            background-color: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+        }
+      }
+      // 面板操作列表之间的分割线
+      .divider {
+        margin: 0;
+      }
+      // 面板操作列表
+      .clone-panel-list {
+        margin: 8px;
+        .item {
+          border-radius: ${otherThemeVars.border.radius};
+          padding: 6px 8px;
+          line-height: 1.5;
+          margin: 0;
+          svg {
+            color: ${themeVars.color.text.light.num1};
+            margin-right: 0.25rem;
+          }
+        }
+        > .item:hover {
+          color: ${themeVars.color.text.self};
+          text-decoration: none;
+          background: ${themeVars.github.control.transparent.bgColor.hover};
+        }
+      }
+    }
+  }
+`;

styles/components/index.tsx

@@ -1,4 +1,5 @@
 import "./actions";
+import "./clone";
 import "./dashboard";
 import "./diff";
 import "./issue";

styles/components/repo.tsx

@@ -1,5 +1,6 @@
 import { css, themeVars } from "src/types/vars";
 
+// 提交列表
 export const commit = css`
   .page-content.repository {
     // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
@@ -21,6 +22,15 @@ export const commit = css`
           margin-left: -8px;
         }
       }
+      // 提交信息
+      .message {
+        // tag 标签
+        a.ui.basic.primary.label {
+          border-radius: 25px;
+          border-width: 1.5px;
+          padding: 5px 8px !important;
+        }
+      }
       // 提交信息右侧
       .tw-text-right {
         // 时间标签

styles/public/dropdown.scss

@@ -16,84 +16,6 @@
   }
 }
 
-// clone 下拉菜单
-.tippy-box {
-  margin-top: -3px;
-  background: var(--color-box-header);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow:
-    0px 0px 0px 0.5px #30363d,
-    0px 6px 12px -3px rgba(1, 4, 9, 0.4),
-    0px 6px 18px 0px rgba(1, 4, 9, 0.4);
-  animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
-
-  .clone-panel-field {
-    margin-top: 16px;
-  }
-
-  .flex-text-block.clone-panel-field {
-    color: #fff;
-    font-weight: bold;
-    margin-left: 16px;
-  }
-
-  .clone-panel-tab {
-    margin-left: 16px;
-
-    button {
-      color: #f0f6fc !important;
-      font-weight: 600;
-      padding: 6px 8px;
-      margin: 8px 0;
-
-      &:hover {
-        background: var(--color-hover);
-        border-radius: var(--border-radius);
-      }
-
-      &.active:after {
-        content: "";
-        display: block;
-        position: absolute;
-        bottom: -8px;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background: #f78166;
-      }
-    }
-
-    .item.active {
-      border-bottom: 0;
-      position: relative;
-    }
-  }
-
-  .flex-items-block {
-    margin: 0;
-
-    .item {
-      display: block;
-      padding: 8px 10px;
-      text-align: left;
-      text-transform: none;
-      line-height: 1em;
-      margin: 0;
-
-      svg {
-        margin-right: 0.5rem;
-      }
-    }
-
-    > .item:hover {
-      color: var(--color-text);
-      text-decoration: none;
-      background: var(--color-hover);
-    }
-  }
-}
-
 // 下拉菜单
 .ui.dropdown .menu {
   margin-top: 3.75px !important;

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,8 +1,10 @@
 import "./button"; // 按钮
 import "./chroma"; // 代码高亮
 import "./codemirror"; // codemirror 样式
+import "./dropdown"; // 下拉框
 import "./input"; // 输入框
 import "./label"; // 标签
 import "./modal"; // 弹窗
 import "./radius"; // 圆角
 import "./svg"; // svg 图标
+import "./tippy"; // 提示框

styles/public/label.tsx

@@ -87,33 +87,21 @@ export const shaLabel = css`
     &.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;
-      }
     }
     // 验证未信任
     &.sign-untrusted {
       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;
-      }
     }
     // 验证未匹配
     &.sign-unmatched {
       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;
-      }
     }
     // 验证警告
     &.sign-warning {
       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;
-      }
     }
   }
 `;
@@ -155,6 +143,7 @@ export const repoLabel = css`
   .org-visibility div {
     &.ui.basic.label {
       background-color: unset;
+      color: ${themeVars.color.text.light.num1};
     }
   }
 `;
@@ -166,6 +155,7 @@ export const packagesLabel = css`
       > .ui.container > div > .flex-list {
         // 软件包类型的标签
         .ui.label {
+          background-color: unset;
           border: 1px solid ${themeVars.color.light.border};
           color: ${themeVars.color.primary.self};
         }

styles/public/tippy.tsx

@@ -0,0 +1,27 @@
+import { animation } from "src/core/theme";
+import { css, themeVars } from "src/types/vars";
+
+// 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
+export const tippyBox = css`
+  .tippy-box {
+    margin-top: -3px;
+    border-radius: 12px;
+    overflow: hidden;
+    animation: ${animation};
+    // 边框线同步 github 样式
+    &[data-theme="default"],
+    &[data-theme="box-with-header"] {
+      border: unset;
+      box-shadow: ${themeVars.github.shadow.floating.small};
+    }
+    // 带标题的提示框 (Runner信息)
+    &[data-theme="box-with-header"] {
+      .tippy-content {
+        background-color: ${themeVars.color.menu};
+        .ui.attached.header {
+          background-color: ${themeVars.color.body};
+        }
+      }
+    }
+  }
+`;