Преглед на файлове

style: raise chatbot fab and restyle chat input

- fab bottom 26px -> 48px, panel follows to 114px to keep the gap
- input row: pill-shaped field with accent focus ring, circular 36px
  send button, consistent with the design tokens
KenZ1117 преди 2 седмици
родител
ревизия
7a286157bd
променени са 1 файла, в които са добавени 16 реда и са изтрити 6 реда
  1. 16 6
      public/style.css

+ 16 - 6
public/style.css

@@ -895,7 +895,7 @@ main.content { padding: var(--page-padding-y) var(--page-padding-x) var(--page-p
 
 /* ── 智能问数 · 机器人 FAB + 对话弹窗 ───────────────────── */
 .chatbot-fab {
-  position: fixed; right: 26px; bottom: 26px; z-index: 90;
+  position: fixed; right: 26px; bottom: 48px; z-index: 90;
   width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
   background: linear-gradient(135deg, var(--accent) 0%, #ff8a5c 100%);
   color: #fff; display: flex; align-items: center; justify-content: center;
@@ -908,7 +908,7 @@ main.content { padding: var(--page-padding-y) var(--page-padding-x) var(--page-p
 .chatbot-fab[hidden] { display: none; }
 
 .chatbot-panel {
-  position: fixed; right: 26px; bottom: 92px; z-index: 95;
+  position: fixed; right: 26px; bottom: 114px; z-index: 95;
   width: min(400px, calc(100vw - 40px)); height: min(600px, calc(100vh - 140px));
   display: flex; flex-direction: column; overflow: hidden;
   background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
@@ -955,10 +955,20 @@ main.content { padding: var(--page-padding-y) var(--page-padding-x) var(--page-p
 }
 .chatbot-chips button:hover { border-color: var(--accent); color: var(--accent); }
 
-.chatbot-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-light); background: #fff; }
-.chatbot-input-row input { flex: 1; min-width: 0; }
-.chatbot-input-row .btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; }
-.chatbot-input-row .btn svg { width: 15px; height: 15px; }
+.chatbot-input-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-light); background: #fff; }
+.chatbot-input-row input {
+  flex: 1; min-width: 0; min-height: 36px;
+  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
+  background: #faf9f7; color: var(--text); font-size: 12.5px; font-family: inherit;
+  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
+}
+.chatbot-input-row input::placeholder { color: var(--text-3); }
+.chatbot-input-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); background: #fff; }
+.chatbot-input-row .btn {
+  flex: 0 0 auto; width: 36px; min-width: 36px; height: 36px; padding: 0;
+  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
+}
+.chatbot-input-row .btn svg { width: 16px; height: 16px; }
 
 /* 图标按钮(视觉生成 · 保存弹层) */
 .btn.icon-btn { width: 34px; min-width: 34px; padding: 0; justify-content: center; }