banana v1

styles/public/tippy.ts

@@ -1,19 +1,24 @@
 import { animationDown } from "src/core/theme";
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
 export const tippyBox = css`
   .tippy-box {
     margin-top: -3px;
-    border-radius: ${otherThemeVars.border.radius};
+    border-radius: 12px; // 增加圆角
     overflow: hidden;
     animation: ${animationDown};
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     // 克隆菜单和PR提示框为 default
     &[data-theme="default"],
     // 带标题的提示框 (Runner信息)
     &[data-theme="box-with-header"] {
       border: unset;
       box-shadow: ${themeVars.github.shadow.floating.small};
+      &:hover {
+        transform: translateY(-2px); // 轻微上移效果
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 增强阴影
+      }
     }
     &[data-theme="default"] {
       border-radius: 12px;
@@ -23,6 +28,8 @@ export const tippyBox = css`
         background-color: ${themeVars.color.menu};
         .ui.attached.header {
           background-color: ${themeVars.color.body};
+          padding: 12px 16px; // 增加内边距
+          font-weight: 600; // 增加字体粗细
         }
       }
     }
@@ -31,9 +38,12 @@ export const tippyBox = css`
       .tippy-content {
         padding: 8px;
         .item {
-          border-radius: ${otherThemeVars.border.radius};
+          border-radius: 8px; // 增加圆角
+          padding: 6px 12px; // 增加内边距
+          transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
+            transform: translateX(2px); // 轻微右移效果
           }
         }
       }
@@ -43,8 +53,11 @@ export const tippyBox = css`
       .tippy-content {
         font-size: 12px;
         font-weight: 400;
-        padding: 4px 8px;
+        padding: 6px 12px; // 增加内边距
+        border-radius: 8px; // 增加圆角
+        background-color: ${themeVars.color.menu}; // 添加背景色
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
       }
     }
   }
-`;
+`;