自定义 CSS

自定义 CSS 字段会追加在 Minaya 自身样式之后， 因此您的规则无需 !important 即可生效。小组件渲染在 shadow root 中，所以此处的样式不会泄漏到您的页面——您页面的 CSS 也不会意外地重新设置小组件的样式。

与边缘的间距

位置由两个自定义属性控制。将它们设置在 .aicb-root 上，启动按钮和面板都会随之调整：

.aicb-root {
  --aicb-offset-side: 40px;
  --aicb-offset-bottom: 32px;
}

默认值均为 20px。这些设置仅适用于 桌面端—— 移动端断点会设置自己更紧凑的数值，因此较大的桌面端偏移量 不会把小组件挤出手机屏幕。

颜色变量

小组件绘制的每一种颜色都是一个 CSS 自定义属性，因此您可以 单独覆盖某一项，而无需重写它所属的整条规则。这些变量 与仪表盘颜色选择器写入的变量相同。

/* Override just the two you care about. */
.aicb-root {
  --aicb-bot-bubble: #EEF2FF;
  --aicb-bot-text: #1E1B4B;
}

在此设置的颜色会覆盖当前所显示配色方案的仪表盘数值。多数情况下您并不需要这样做—— 在 小组件外观 中设置颜色，Minaya 会为您 选择正确的配色方案。当您需要选择器未覆盖的效果时， 再使用 CSS，例如渐变：

.aicb-header {
  background: linear-gradient(135deg, #14B8A6, #0EA5E9);
}

Minaya 在 JavaScript 中解析明暗主题，而不是交由媒体查询处理， 这样它就能跟随您网站自己的主题切换开关，而不仅仅是操作系统设置。 这意味着自定义 CSS 中的 @media (prefers-color-scheme: dark) 代码块 不会跟随您网站的切换开关——请将深色模式覆盖规则限定在 您自己的选择器范围内，或者在仪表盘中按配色方案分别设置颜色。 参见 匹配页面主题。

类参考

示例

方形、扁平面板

.aicb-panel {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #d4d4d8;
}

桌面端更大的面板

@media (min-width: 900px) {
  .aicb-panel { width: 400px; height: 560px; }
}

方形启动按钮

.aicb-launcher {
  border-radius: 12px;
  width: 52px;
  height: 52px;
}

重新设置回复中链接的样式

.aicb-link {
  color: #7c3aed;
  text-decoration-thickness: 2px;
}

隐藏反馈按钮

.aicb-feedback { display: none; }

预览的准确性

仪表盘预览使用相同的类名，还原了主要元素——面板、头部、 消息、气泡、输入区、输入框、发送按钮，以及启动按钮、 问候气泡和预聊天表单——因此大多数规则都会在预览中体现出来。

它只是一种近似效果，而非真实的小组件：预览使用普通 DOM， 而非 shadow root，并且省略了输入提示和反馈按钮。 定位偏移量在预览中也不会产生可见的移动，因为预览 位于一个固定尺寸的容器内而非视口中——出于同样的原因， 启动按钮会被绘制在面板的对面，而不是下方。

请在真实页面上测试位置的更改。参见 安装小组件。

注意事项

自定义 CSS 会被原样应用，且不会经过校验。格式错误的规则可能会 破坏小组件在所有访客面前的布局，因此请每次只改动一处， 并在真实页面上检查结果。