@huyooo/ai-chat-frontend-react 0.2.14 → 0.2.16

package/src/components/input/ChatInput.css

@@ -1,283 +0,0 @@
-/**
- * ChatInput 组件样式
- */
-
-.chat-input {
-  padding: 12px;
-}
-
-.chat-input.message-variant {
-  padding: 0;
-}
-
-.input-container {
-  display: flex;
-  flex-direction: column;
-  background: var(--chat-input-bg, #2d2d2d);
-  border: 1px solid var(--chat-border, #444);
-  border-radius: 12px;
-  padding: 12px;
-  transition: border-color 0.15s;
-}
-
-.input-container.focused {
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.input-container.drag-over {
-  border-color: var(--chat-primary, #2563eb);
-  background: rgba(37, 99, 235, 0.1);
-}
-
-/* 录音态不改变 textarea 样式（仅改变图标颜色） */
-
-/* 图片预览区 */
-.images-preview {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 8px;
-}
-
-.image-preview-item {
-  position: relative;
-  width: 48px;
-  height: 48px;
-  border-radius: 6px;
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.2);
-}
-
-.image-thumbnail {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-
-.image-thumbnail:hover {
-  opacity: 0.8;
-}
-
-.image-remove-btn {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
-  border: none;
-  border-radius: 50%;
-  color: #fff;
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.15s;
-}
-
-.image-preview-item:hover .image-remove-btn {
-  opacity: 1;
-}
-
-.image-remove-btn:hover {
-  background: rgba(239, 68, 68, 0.9);
-}
-
-/* 隐藏的文件输入 */
-.hidden-input {
-  display: none;
-}
-
-/* 输入框 */
-.input-field-wrapper {
-  margin-bottom: 8px;
-}
-
-.input-field {
-  width: 100%;
-  background: transparent;
-  border: none;
-  padding: 0;
-  padding-right: 8px;
-  color: var(--chat-text, #ccc);
-  font-size: 14px;
-  resize: none;
-  min-height: 24px;
-  max-height: 150px;
-  line-height: 1.5;
-  font-family: inherit;
-  overflow-y: auto;
-}
-
-.input-field:focus {
-  outline: none;
-}
-
-.input-field::placeholder {
-  color: var(--chat-text-muted, #666);
-}
-
-/* 底部控制栏 */
-.input-controls {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.input-left {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* 右侧按钮 */
-.input-right {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-/* @ 选择器容器 */
-.at-picker-wrapper {
-  position: relative;
-}
-
-.input-right .icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--chat-text-muted, #666);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.input-right .icon-btn:hover {
-  color: var(--chat-text, #ccc);
-  background: rgba(0, 0, 0, 0.06);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
-}
-
-.input-right .voice-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--chat-text-muted, #666);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.input-right .voice-btn:hover {
-  color: var(--chat-text, #ccc);
-  background: rgba(0, 0, 0, 0.06);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
-}
-
-.input-right .voice-btn.connecting {
-  color: #f59e0b;
-  background: transparent;
-}
-
-.input-right .voice-btn.connecting:hover {
-  color: #f59e0b;
-  background: rgba(0, 0, 0, 0.06);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
-}
-
-.input-right .voice-btn .spin {
-  animation: spin 1s linear infinite;
-}
-
-.input-right .voice-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.input-right .voice-btn.recording {
-  color: #ef4444;
-  background: transparent;
-  animation: none;
-}
-
-.input-right .voice-btn.recording:hover {
-  color: #ef4444;
-  background: rgba(0, 0, 0, 0.06);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
-}
-
-/* 录音态不加动效（使用实心暂停图标即可） */
-
-.toggle-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--chat-text-muted, #666);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.toggle-btn:hover {
-  color: var(--chat-text, #ccc);
-  background: rgba(0, 0, 0, 0.06);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
-}
-
-.toggle-btn.active {
-  /* 激活态使用主色调（更清晰的对比度） */
-  color: var(--chat-primary, #54a9ff);
-  background: rgba(84, 169, 255, 0.14);
-  background: color-mix(in srgb, var(--chat-primary, #54a9ff) 14%, transparent);
-}
-
-.toggle-btn.active:hover {
-  color: var(--chat-primary-hover, #2f90ff);
-  background: rgba(84, 169, 255, 0.2);
-  background: color-mix(in srgb, var(--chat-primary, #54a9ff) 20%, transparent);
-}
-
-.send-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--chat-text-muted, #666);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.send-btn:hover {
-  color: var(--chat-text, #ccc);
-  background: rgba(0, 0, 0, 0.06);
-  background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
-}
-
-.send-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.send-btn:disabled:hover {
-  color: var(--chat-text-muted, #666);
-}