ax-frontend-app/src/components/Editor/RichTextEditor/RichTextToolbar.css

/**
 * RichTextToolbar.css - 富文本工具栏样式
 */

.rich-text-toolbar {
  position: fixed;
  z-index: 1000;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.2s ease;
  max-width: 800px;
  min-width: 300px;
  /* 允许高度自动增长 */
  height: auto;
}

/* 工具栏内容容器 */
.toolbar-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  row-gap: 8px;
}

/* 工具栏按钮组 */
.toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* 工具栏分割线 */
.toolbar-divider {
  width: 1px;
  height: 20px;
  background-color: #d9d9d9;
  margin: 0 4px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 字号选择器样式 */
.rich-text-toolbar .ant-select-selector {
  border-radius: 2px !important;
}

/* 确保按钮和选择器对齐 */
.rich-text-toolbar .ant-select,
.rich-text-toolbar .ant-btn,
.rich-text-toolbar .ant-input-number {
  vertical-align: middle;
}

/* 确保所有控件有适当的尺寸 */
.toolbar-content > * {
  flex-shrink: 0;
}

.content-format-select {
  width: 96px;
}

.content-format-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}