banana v1

styles/public/input.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 export const input = css`
   input,
@@ -20,23 +20,45 @@ export const input = css`
   .ui.form input[type="time"],
   .ui.form input[type="url"] {
     padding: 8px 12px;
+    border-radius: 8px; // 增加圆角
+    border: 1px solid ${themeVars.color.light.border}; // 默认边框
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
     &:focus,
     &:focus-visible {
       background: ${themeVars.color.body} !important;
-      border-radius: ${otherThemeVars.border.radius};
+      border-radius: 8px; // 保持圆角
       border-color: ${themeVars.github.borderColor.accent.emphasis};
       // 向内部添加一个 1px 的边框
-      box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
+      box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}, 0 0 0 3px rgba(253, 224, 71, 0.2); // 增强焦点效果
       outline: none;
+      transform: translateY(-1px); // 轻微上移效果
+    }
+    &:hover:not(:focus) {
+      border-color: ${themeVars.github.borderColor.accent.emphasis}; // 悬停时改变边框色
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加轻微阴影
     }
   }
 
   .ui.input {
     height: 32px;
+    border-radius: 8px; // 增加圆角
   }
   // 由于输入框高度, 需要输入框在表单中垂直居中
   // 管理员页面仓库搜索表单
   .ui.form#repo-search-form {
     align-items: center;
   }
-`;
+  
+  // 增强表单元素的整体样式
+  .ui.form {
+    .field {
+      margin-bottom: 16px; // 增加字段间距
+    }
+    
+    label {
+      font-weight: 500; // 增加标签字体粗细
+      margin-bottom: 6px; // 增加标签与输入框间距
+      display: block;
+    }
+  }
+`;