From 75fd35480b2b90174e4feecd97e886e72d4870f3 Mon Sep 17 00:00:00 2001
From: lutinglt <lutinglt@users.noreply.github.com>
Date: Tue, 8 Jul 2025 15:52:47 +0800
Subject: [PATCH] fantastic clone menu

---
 .github/release.md          |  7 ++++---
 styles/components/clone.tsx | 39 +++++++++++++++++++++++++------------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/.github/release.md b/.github/release.md
index 1fe2eda..65bc9ea 100644
--- a/.github/release.md
+++ b/.github/release.md
@@ -1,9 +1,10 @@
 ## 🌈 Style
 
-- 创建仓库页面下拉菜单选项样式同步
-
 #### 更符合 GitHub 风格
 
+- 创建仓库页面下拉菜单选项样式同步
+- 使克隆菜单非常像 GitHub, 调整了元素的高度和宽度以及克隆地址的字体
+
 ## 🎈 Perf
 
 - 稍微减小了热力图方块的大小
@@ -15,4 +16,4 @@
 - 修复创建仓库时拥有者按钮的高度
 - 修复一些输入框在整体元素中不居中
 - 修复一些下拉菜单在向上弹出时与向下弹出不一致的问题
-- 修复一些下拉菜单缺失边框线, 比如仓库动态的右侧菜单按钮
\ No newline at end of file
+- 修复一些下拉菜单缺失边框线, 比如仓库动态的右侧菜单按钮
diff --git a/styles/components/clone.tsx b/styles/components/clone.tsx
index 49157fa..6e917e4 100644
--- a/styles/components/clone.tsx
+++ b/styles/components/clone.tsx
@@ -4,17 +4,21 @@ 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;
+      //标题和克隆地址
+      > .clone-panel-field {
         margin-left: 16px;
+        margin-right: 16px;
+        //标题
+        &:first-of-type {
+          font-weight: 600;
+          margin-top: 16px;
+        }
       }
       // 按钮组
       .clone-panel-tab {
         display: flex;
         gap: 8px;
-        margin-left: 12px;
+        margin-left: 16px;
         // 按钮
         .item {
           color: ${themeVars.color.text.self};
@@ -44,25 +48,36 @@ export const clone = css`
       }
       // 克隆地址
       .ui.input.action {
-        > input,
-        > input:hover {
+        > input {
           border: 1px solid ${themeVars.color.light.border};
           border-radius: ${otherThemeVars.border.radius};
-        }
-        > input:focus,
-        > input:focus-visible {
-          border-color: ${themeVars.github.borderColor.accent.emphasis};
+          font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
+          width: 332px;
+          &:hover {
+            border: 1px solid ${themeVars.color.light.border};
+            border-radius: ${otherThemeVars.border.radius};
+          }
+          &:focus,
+          &: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;
+          padding: 0;
+          width: 32px;
+          height: 32px;
           margin-left: 5px;
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
           }
+          svg {
+            width: 16px;
+            height: 16px;
+          }
         }
       }
       // 面板操作列表之间的分割线