banana v1

styles/public/other.ts

@@ -5,6 +5,11 @@ export const listHeader = css`
   .list-header {
     align-items: center;
     align-content: center;
+    padding: 16px; // 增加内边距
+    border-radius: 12px; // 增加圆角
+    background-color: ${themeVars.color.box.header}; // 背景色
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); // 添加阴影
+    margin-bottom: 16px; // 增加底部间距
   }
 `;
 
@@ -14,3 +19,47 @@ export const star = css`
     color: ${themeVars.github.button.star.iconColor} !important;
   }
 `;
+
+// 卡片样式，参考 Nano-Banana-AI-Image-Editor 的设计
+export const card = css`
+  .ui.segment,
+  .ui.attached.segment,
+  .ui.card,
+  .ui.cards > .card {
+    border-radius: 12px; // 增加圆角
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05); // 添加卡片阴影
+    border: 1px solid ${themeVars.color.light.border}; // 添加边框
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
+    
+    &:hover {
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); // 悬停时增强阴影
+      transform: translateY(-2px); // 轻微上移效果
+    }
+  }
+  
+  // 卡片头部
+  .ui.segment > .ui.tabular.menu,
+  .header-wrapper .ui.tabular.menu {
+    border-radius: 12px 12px 0 0; // 保持顶部圆角
+    margin: -1px -1px 0 -1px; // 调整边距
+  }
+`;
+
+// 面板样式
+export const panel = css`
+  .ui.attached.header,
+  .ui.top.attached.header {
+    border-radius: 12px 12px 0 0; // 保持顶部圆角
+    padding: 16px; // 增加内边距
+    font-weight: 600; // 增加字体粗细
+    border: 1px solid ${themeVars.color.light.border}; // 添加边框
+    border-bottom: none; // 移除底部边框
+  }
+  
+  .ui.bottom.attached.header {
+    border-radius: 0 0 12px 12px; // 保持底部圆角
+    padding: 16px; // 增加内边距
+    border: 1px solid ${themeVars.color.light.border}; // 添加边框
+    border-top: none; // 移除顶部边框
+  }
+`;