fantastic clone menu

.github/release.md

@@ -1,9 +1,10 @@
 ## 🌈 Style
 
-- 创建仓库页面下拉菜单选项样式同步
-
 #### 更符合 GitHub 风格
 
+- 创建仓库页面下拉菜单选项样式同步
+- 使克隆菜单非常像 GitHub, 调整了元素的高度和宽度以及克隆地址的字体
+
 ## 🎈 Perf
 
 - 稍微减小了热力图方块的大小

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 {
+      > .clone-panel-field {
-        font-weight: bold;
-        margin-top: 16px;
         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 {
-        > input:hover {
           border: 1px solid ${themeVars.color.light.border};
           border-radius: ${otherThemeVars.border.radius};
-        }
+          font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
-        > input:focus,
+          width: 332px;
-        > input:focus-visible {
+          &:hover {
-          border-color: ${themeVars.github.borderColor.accent.emphasis};
+            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;
+          }
         }
       }
       // 面板操作列表之间的分割线