WIP: 调整chatmore和user info样式

web_assets/javascript/user-info.js

@@ -47,7 +47,8 @@ function showOrHideUserInfo() {
         toggleUserInfoVisibility(true);
     }, 2000);
 
-    let triggerElements = {appTitleDiv, userInfoDiv, sendBtn};
+    // let triggerElements = {appTitleDiv, userInfoDiv, sendBtn};
+    let triggerElements = {userInfoDiv, statusDisplay};
     for (let elem in triggerElements) {
         triggerElements[elem].addEventListener("mouseenter", function () {
             toggleUserInfoVisibility(false);

web_assets/stylesheet/ChuanhuChat.css

@@ -14,7 +14,7 @@
 
     --chatbot-blur-background-color: #F3F3F366;
     --chatbot-input-background-color: rgba(255, 255, 255, 0.64);
-    --chatbot-input-more-background-color: #FFFFFF;
+    --chatbot-input-more-background-color: #FFFFFFAA;
     --chatbot-input-more-background-fullwidth-hover: #FFFFFF88;
     --chatbot-input-more-background-mobilewidth-hover: #F6F6F6;
 
@@ -27,7 +27,7 @@
     .dark {
         --chatbot-blur-background-color: #12111166;
         --chatbot-input-background-color: rgba(144, 144, 144, 0.32);
-        --chatbot-input-more-background-color: #3C3C3C;
+        --chatbot-input-more-background-color: #3C3C3CAA;
         --chatbot-input-more-background-fullwidth-hover: #1F1F1F88;
         --chatbot-input-more-background-mobilewidth-hover: #1F1F1F44;
     }
@@ -429,6 +429,8 @@ button.chatbot-input-more-btn:active .sm-round-bg {
     border-radius: 6px;
     box-shadow: var(--shadow-sm);
     background: var(--chatbot-input-more-background-color);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
 
 }
 #chatbot-input-more-area > span > div {

web_assets/stylesheet/custom-components.css

@@ -2,7 +2,9 @@
 /* user-info */
 #user-info.block {
     white-space: nowrap;
-    position: absolute; left: 8em; top: .8em;
+    position: absolute;
+    right: max(32px, env(safe-area-inset-right));
+    top: 16px;
     z-index: var(--layer-2);
     box-shadow: var(--block-shadow);
     border: none!important; border-radius: var(--block-label-radius);
@@ -11,6 +13,7 @@
     font-size: var(--block-label-text-size); line-height: var(--line-sm);
     width: auto; max-height: 30px!important;
     opacity: 1;
+    z-index: 1000;
     transition: opacity 0.3s ease-in-out;
 }
 #user-info.block .wrap {
@@ -276,7 +279,7 @@ input:checked + .apSlider::before {
     position: absolute;
     bottom: calc(100% + 12px);
     left: calc(50% - 60px + 0.5rem);
-    background-color: #2B222A;
+    background-color: #393939;
     border-radius: 5px;
     color: #fff;
     content: attr(aria-label);
@@ -293,7 +296,7 @@ input:checked + .apSlider::before {
     left: 50%;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 5px solid #2B222A;
+    border-top: 5px solid #393939;
     content: " ";
     font-size: 0;
     line-height: 0;