Keldos commited on
Commit
e719ef5
·
1 Parent(s): f3c02b8

refactor: 使用CSS变量设定对话气泡颜色

Browse files
Files changed (1) hide show
  1. assets/custom.css +20 -13
assets/custom.css CHANGED
@@ -1,11 +1,14 @@
1
  :root {
2
- --chatbot-color-light: #F3F3F3;
3
- --chatbot-color-dark: #121111;
 
 
 
 
 
 
4
  }
5
 
6
- .message p { margin-bottom: 0.6rem !important;}
7
- .message p:last-of-type { margin-bottom: 0 !important; }
8
-
9
  #app_title {
10
  font-weight: var(--prose-header-text-weight);
11
  font-size: var(--text-xxl);
@@ -182,25 +185,25 @@ ol:not(.options), ul:not(.options) {
182
 
183
  /* 亮色(默认) */
184
  #chuanhu_chatbot {
185
- background-color: var(--chatbot-color-light) !important;
186
- color: #000000 !important;
187
  }
188
  [data-testid = "bot"] {
189
- background-color: #FFFFFF !important;
190
  }
191
  [data-testid = "user"] {
192
- background-color: #95EC69 !important;
193
  }
194
  /* 暗色 */
195
  .dark #chuanhu_chatbot {
196
- background-color: var(--chatbot-color-dark) !important;
197
- color: #FFFFFF !important;
198
  }
199
  .dark [data-testid = "bot"] {
200
- background-color: #2C2C2C !important;
201
  }
202
  .dark [data-testid = "user"] {
203
- background-color: #26B561 !important;
204
  }
205
 
206
  /* 屏幕宽度大于等于500px的设备 */
@@ -248,6 +251,9 @@ ol:not(.options), ul:not(.options) {
248
  border-bottom-right-radius: 0 !important;
249
  }
250
 
 
 
 
251
  .message .md-message {
252
  display: block;
253
  padding: 0 !important;
@@ -261,6 +267,7 @@ ol:not(.options), ul:not(.options) {
261
  display: none;
262
  }
263
 
 
264
  .chuanhu-btn {
265
  border-radius: 5px;
266
  /* background-color: #E6E6E6 !important; */
 
1
  :root {
2
+ --chatbot-color-light: #000000;
3
+ --chatbot-color-dark: #FFFFFF;
4
+ --chatbot-background-color-light: #F3F3F3;
5
+ --chatbot-background-color-dark: #121111;
6
+ --message-user-background-color-light: #95EC69;
7
+ --message-user-background-color-dark: #26B561;
8
+ --message-bot-background-color-light: #FFFFFF;
9
+ --message-bot-background-color-dark: #2C2C2C;
10
  }
11
 
 
 
 
12
  #app_title {
13
  font-weight: var(--prose-header-text-weight);
14
  font-size: var(--text-xxl);
 
185
 
186
  /* 亮色(默认) */
187
  #chuanhu_chatbot {
188
+ background-color: var(--chatbot-background-color-light) !important;
189
+ color: var(--chatbot-color-light) !important;
190
  }
191
  [data-testid = "bot"] {
192
+ background-color: var(--message-bot-background-color-light) !important;
193
  }
194
  [data-testid = "user"] {
195
+ background-color: var(--message-user-background-color-light) !important;
196
  }
197
  /* 暗色 */
198
  .dark #chuanhu_chatbot {
199
+ background-color: var(--chatbot-background-color-dark) !important;
200
+ color: var(--chatbot-color-dark) !important;
201
  }
202
  .dark [data-testid = "bot"] {
203
+ background-color: var(--message-bot-background-color-dark) !important;
204
  }
205
  .dark [data-testid = "user"] {
206
+ background-color: var(--message-user-background-color-dark) !important;
207
  }
208
 
209
  /* 屏幕宽度大于等于500px的设备 */
 
251
  border-bottom-right-radius: 0 !important;
252
  }
253
 
254
+ .message p { margin-bottom: 0.6rem !important;}
255
+ .message p:last-of-type { margin-bottom: 0 !important; }
256
+
257
  .message .md-message {
258
  display: block;
259
  padding: 0 !important;
 
267
  display: none;
268
  }
269
 
270
+ /* custom buttons */
271
  .chuanhu-btn {
272
  border-radius: 5px;
273
  /* background-color: #E6E6E6 !important; */