Keldos commited on
Commit
f1badb5
1 Parent(s): c73c755

WIP fix 修复部分浏览器backdrop-filter兼容性

Browse files
web_assets/stylesheet/ChuanhuChat.css CHANGED
@@ -15,6 +15,7 @@
15
  --chatbot-blur-background-color: #F3F3F366;
16
  --chatbot-input-background-color: rgba(255, 255, 255, 0.64);
17
  --chatbot-input-more-background-color: #FFFFFFAA;
 
18
  --chatbot-input-more-background-fullwidth-hover: #FFFFFF99;
19
  --chatbot-input-more-background-mobilewidth-hover: #E6E6E644;
20
 
@@ -28,6 +29,7 @@
28
  --chatbot-blur-background-color: #12111166;
29
  --chatbot-input-background-color: rgba(144, 144, 144, 0.32);
30
  --chatbot-input-more-background-color: #3C3C3CAA;
 
31
  --chatbot-input-more-background-fullwidth-hover: #2F2F2F88;
32
  --chatbot-input-more-background-mobilewidth-hover: #1F1F1F44;
33
  }
@@ -417,8 +419,14 @@ button.chatbot-input-more-btn:active .sm-round-bg {
417
  /* 三个点号点开! */
418
  .show-chat-more #chatbot-input-more-area {
419
  display: flex;
420
- backdrop-filter: blur(24px);
421
- -webkit-backdrop-filter: blur(24px);
 
 
 
 
 
 
422
  }
423
  /* no!屏幕宽度窄的时候! */
424
  #chatbot-input-more-area {
@@ -430,7 +438,7 @@ button.chatbot-input-more-btn:active .sm-round-bg {
430
  z-index: 1001;
431
  border-radius: 6px;
432
  box-shadow: var(--shadow-sm);
433
- background: var(--chatbot-input-more-background-color);
434
  }
435
  #chatbot-input-more-area > span > div {
436
  min-width: 120px;
@@ -486,6 +494,8 @@ button.chatbot-input-more-btn:active .sm-round-bg {
486
  background: none;
487
  box-shadow: none;
488
  bottom: 0;
 
 
489
  }
490
  .chatbot-full-width #chatbot-input-more-area > span > div {
491
  /* min-width: unset; */
 
15
  --chatbot-blur-background-color: #F3F3F366;
16
  --chatbot-input-background-color: rgba(255, 255, 255, 0.64);
17
  --chatbot-input-more-background-color: #FFFFFFAA;
18
+ --chatbot-input-more-background-solid-color: #FFFFFF;
19
  --chatbot-input-more-background-fullwidth-hover: #FFFFFF99;
20
  --chatbot-input-more-background-mobilewidth-hover: #E6E6E644;
21
 
 
29
  --chatbot-blur-background-color: #12111166;
30
  --chatbot-input-background-color: rgba(144, 144, 144, 0.32);
31
  --chatbot-input-more-background-color: #3C3C3CAA;
32
+ --chatbot-input-more-background-solid-color: #3C3C3C;
33
  --chatbot-input-more-background-fullwidth-hover: #2F2F2F88;
34
  --chatbot-input-more-background-mobilewidth-hover: #1F1F1F44;
35
  }
 
419
  /* 三个点号点开! */
420
  .show-chat-more #chatbot-input-more-area {
421
  display: flex;
422
+ }
423
+ @supports (-webkit-backdrop-filter: blur(24px)) {
424
+ /* Note: I would only try this feat on apple devices... */
425
+ .show-chat-more #chatbot-input-more-area {
426
+ background: var(--chatbot-input-more-background-color);
427
+ -webkit-backdrop-filter: blur(24px);
428
+ backdrop-filter: blur(24px);
429
+ }
430
  }
431
  /* no!屏幕宽度窄的时候! */
432
  #chatbot-input-more-area {
 
438
  z-index: 1001;
439
  border-radius: 6px;
440
  box-shadow: var(--shadow-sm);
441
+ background: var(--chatbot-input-more-background-solid-color);
442
  }
443
  #chatbot-input-more-area > span > div {
444
  min-width: 120px;
 
494
  background: none;
495
  box-shadow: none;
496
  bottom: 0;
497
+ backdrop-filter: none;
498
+ -webkit-backdrop-filter: none;
499
  }
500
  .chatbot-full-width #chatbot-input-more-area > span > div {
501
  /* min-width: unset; */