Spaces:
Sleeping
Sleeping
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 |
-
|
421 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
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; */
|