| @@ -112,12 +112,8 @@ | ||
| 112 | 112 | border-radius: 50%; |
| 113 | 113 | |
| 114 | 114 | overflow: hidden; |
| 115 | 115 | |
| 116 | - border: 2px solid #70aca9; | |
| 117 | - | |
| 118 | - background-color: #70aca9; | |
| 119 | - | |
| 120 | 116 | width: 40px; |
| 121 | 117 | |
| 122 | 118 | height: 40px; |
| 123 | 119 | |
| @@ -350,18 +346,9 @@ | ||
| 350 | 346 | } |
| 351 | 347 | |
| 352 | 348 | |
| 353 | 349 | |
| 354 | -.wp-chatbot-tab-nav ul li:before { | |
| 355 | 350 | |
| 356 | - background: linear-gradient(transparent 50%, #9ec3c0 50%); | |
| 357 | - | |
| 358 | - background-size: 200%, 100%; | |
| 359 | - | |
| 360 | -} | |
| 361 | - | |
| 362 | - | |
| 363 | - | |
| 364 | 351 | /****************************************** |
| 365 | 352 | |
| 366 | 353 | 05. Tab Feature Product |
| 367 | 354 | |
| @@ -621,27 +608,32 @@ | ||
| 621 | 608 | vertical-align: middle; |
| 622 | 609 | |
| 623 | 610 | } |
| 624 | 611 | |
| 625 | -.wp-chatbot-tab-nav ul li a[data-option="support"] { | |
| 626 | - background-position: -169px -9px !important; | |
| 612 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="support"] { | |
| 613 | + background-position: -166px -44px !important; | |
| 627 | 614 | } |
| 628 | 615 | |
| 629 | -.wp-chatbot-template-01 .wpbot_card_caption span{ | |
| 616 | +.wp-chatbot-template-01 .wp-chatbot-template-01 .wpbot_card_caption span{ | |
| 630 | 617 | color: #0c0c0c !important; |
| 631 | 618 | } |
| 632 | 619 | |
| 633 | -@media screen and (max-width: 768px) { | |
| 634 | - .wp-chatbot-content { | |
| 635 | - height: calc(100vh - 220px) !important; | |
| 636 | - } | |
| 620 | + | |
| 621 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"] { | |
| 622 | + background-position: -89px -48px; | |
| 637 | 623 | } |
| 624 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"] { | |
| 638 | 625 | |
| 626 | + width: 22px; | |
| 627 | + height: 22px; | |
| 628 | +} | |
| 639 | 629 | |
| 640 | 630 | |
| 631 | +.wp-chatbot-template-01 span.chatbot_intent_reload { | |
| 632 | + -webkit-transform: translate(0%, -50%); | |
| 633 | + transform: translate(0%, -50%); | |
| 634 | +} | |
| 641 | 635 | |
| 642 | - | |
| 643 | - | |
| 644 | 636 | .wp-chatbot-template-001 .wpbot_card_image span { |
| 645 | 637 | display: none !important; |
| 646 | 638 | } |
| 647 | 639 | .wp-chatbot-template-001 .wpbot_card_image a { |
| @@ -749,20 +741,45 @@ | ||
| 749 | 741 | } |
| 750 | 742 | |
| 751 | 743 | /* Template-01 modern panel refresh */ |
| 752 | 744 | .wp-chatbot-template-01 .wp-chatbot-board-container { |
| 753 | - background: #eceef3; | |
| 745 | + background-color: #eceef3; | |
| 746 | + background-image: none; | |
| 754 | 747 | border-radius: 28px; |
| 755 | 748 | overflow: hidden; |
| 756 | 749 | box-shadow: 0 14px 35px rgba(16, 24, 40, 0.18); |
| 757 | - transform-origin: 100% 100%; | |
| 758 | - will-change: transform, opacity; | |
| 759 | - transition: width 0.75s cubic-bezier(0.22, 0.78, 0.22, 1), max-width 0.75s cubic-bezier(0.22, 0.78, 0.22, 1); | |
| 760 | - transform-origin: right bottom; | |
| 761 | - transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-radius 0.35s ease, box-shadow 0.35s ease; | |
| 750 | + transform-origin: right bottom; | |
| 751 | + position: relative; | |
| 752 | + isolation: isolate; | |
| 753 | + transform: translateZ(0); | |
| 754 | + backface-visibility: hidden; | |
| 755 | + -webkit-backface-visibility: hidden; | |
| 756 | + transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); | |
| 757 | +} | |
| 762 | 758 | |
| 759 | +/* Stable bg layer — avoids white flash while width animates */ | |
| 760 | +.wp-chatbot-template-01 .wp-chatbot-board-container::before { | |
| 761 | + content: ""; | |
| 762 | + position: absolute; | |
| 763 | + inset: 0; | |
| 764 | + z-index: 0; | |
| 765 | + border-radius: inherit; | |
| 766 | + background-color: #eceef3; | |
| 767 | + background-size: cover; | |
| 768 | + background-position: center; | |
| 769 | + background-repeat: no-repeat; | |
| 770 | + pointer-events: none; | |
| 771 | +} | |
| 763 | 772 | |
| 773 | +.wp-chatbot-template-01 .wp-chatbot-board-container > * { | |
| 774 | + position: relative; | |
| 775 | + z-index: 1; | |
| 776 | +} | |
| 764 | 777 | |
| 778 | +.wp-chatbot-template-01 .wp-chatbot-container { | |
| 779 | + background-size: cover; | |
| 780 | + background-position: center; | |
| 781 | + background-repeat: no-repeat; | |
| 765 | 782 | } |
| 766 | 783 | |
| 767 | 784 | .wp-chatbot-template-01 .wp-chatbot-header { |
| 768 | 785 | display: flex; |
| @@ -872,9 +889,9 @@ | ||
| 872 | 889 | background: transparent; |
| 873 | 890 | } |
| 874 | 891 | |
| 875 | 892 | .wp-chatbot-template-01 .wp-chatbot-editor-container { |
| 876 | - margin: 14px 16px 16px; | |
| 893 | + margin: 6px 16px 16px; | |
| 877 | 894 | border: 0; |
| 878 | 895 | border-radius: 999px; |
| 879 | 896 | background: #ffffff; |
| 880 | 897 | box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); |
| @@ -894,16 +911,112 @@ | ||
| 894 | 911 | .wp-chatbot-template-01 button#wp-chatbot-send-message { |
| 895 | 912 | border: none; |
| 896 | 913 | } |
| 897 | 914 | |
| 898 | -.wp-chatbot-template-01 .wp-chatbot-tab-nav { | |
| 899 | - display: none; | |
| 915 | + | |
| 916 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul { | |
| 917 | + margin: 5px 0 !important; | |
| 918 | + padding: 0 !important; | |
| 919 | + list-style: none; | |
| 920 | + text-align: center; | |
| 921 | + display: flex; | |
| 922 | + gap: 30px; | |
| 923 | + vertical-align: bottom; | |
| 924 | + align-items: center; | |
| 925 | + justify-content: center; | |
| 926 | + width: 100%; | |
| 900 | 927 | } |
| 901 | 928 | |
| 902 | -.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded { | |
| 929 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li { | |
| 930 | + display: inline-block; | |
| 931 | + vertical-align: middle; | |
| 932 | + position: relative; | |
| 933 | + transition: 0.2s; | |
| 934 | + margin: 0 !important; | |
| 935 | + padding: 0 !important; | |
| 936 | +} | |
| 937 | + | |
| 938 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="recent"] { | |
| 939 | + | |
| 940 | + background-position: -7px -47px; | |
| 941 | + | |
| 942 | +} | |
| 943 | + | |
| 944 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="cart"] { | |
| 945 | + | |
| 946 | + background-position: -47px -47px; | |
| 947 | + | |
| 948 | +} | |
| 949 | + | |
| 950 | + | |
| 951 | + | |
| 952 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="help"] { | |
| 953 | + | |
| 954 | + background-position: -129px -47px; | |
| 955 | + | |
| 956 | +} | |
| 957 | + | |
| 958 | + | |
| 959 | + | |
| 960 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"]:after { | |
| 961 | + | |
| 962 | + content: ""; | |
| 963 | + | |
| 964 | + position: absolute; | |
| 965 | + | |
| 966 | + border-radius: 50%; | |
| 967 | + | |
| 968 | + border: 3px solid #1f8ceb; | |
| 969 | + | |
| 970 | + left: -9px; | |
| 971 | + | |
| 972 | + right: -9px;; | |
| 973 | + | |
| 974 | + bottom: -9px; | |
| 975 | + | |
| 976 | + top: -9px; | |
| 977 | + | |
| 978 | +} | |
| 979 | + | |
| 980 | + | |
| 981 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a { | |
| 982 | + width: 32px; | |
| 983 | + height: 32px; | |
| 984 | + background: url(../../images/tab-btn-icon-new.png) no-repeat; | |
| 985 | + box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%); | |
| 986 | + background-color: rgb(255 255 255 / 25%); | |
| 987 | + backdrop-filter: blur(0px); | |
| 988 | + isolation: isolate; | |
| 989 | + | |
| 990 | + | |
| 991 | +} | |
| 992 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="help"] { | |
| 993 | + background-position: -125px -44px; | |
| 994 | +} | |
| 995 | + | |
| 996 | + | |
| 997 | +.wp-chatbot-template-01 .wp-chatbot-footer { | |
| 998 | + margin: -10px 0 0 0; | |
| 999 | +} | |
| 1000 | + | |
| 1001 | +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul { | |
| 1002 | + margin: -22px 0 5px 0 !important; | |
| 1003 | +} | |
| 1004 | + | |
| 1005 | +.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded, | |
| 1006 | +.wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded { | |
| 903 | 1007 | max-width: calc(100vw - 40px); |
| 904 | 1008 | width: min(92vw, 620px) !important; |
| 1009 | + /* Height comes from admin setting (+ bump) via inline CSS in qcld-wpwbot.php */ | |
| 1010 | +} | |
| 905 | 1011 | |
| 1012 | +.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded .wp-chatbot-content, | |
| 1013 | +.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded .wp-chatbot-ball-inner, | |
| 1014 | +.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded .slimScrollDiv, | |
| 1015 | +.wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded .wp-chatbot-content, | |
| 1016 | +.wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded .wp-chatbot-ball-inner, | |
| 1017 | +.wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded .slimScrollDiv { | |
| 1018 | + transition: height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); | |
| 906 | 1019 | } |
| 907 | 1020 | |
| 908 | 1021 | @keyframes wpbotOpenRightToTopLeft { |
| 909 | 1022 | 0% { |
| @@ -930,19 +1043,8 @@ | ||
| 930 | 1043 | transform: translate3d(0, 0, 0) scale(1); |
| 931 | 1044 | } |
| 932 | 1045 | } |
| 933 | 1046 | |
| 934 | -@keyframes wpbotCollapseMotion { | |
| 935 | - 0% { | |
| 936 | - opacity: 1; | |
| 937 | - transform: translate3d(0, 0, 0) scale(1); | |
| 938 | - } | |
| 939 | - 100% { | |
| 940 | - opacity: 0; | |
| 941 | - transform: translate3d(0, 16px, 0) scale(0.97); | |
| 942 | - } | |
| 943 | -} | |
| 944 | - | |
| 945 | 1047 | @keyframes wpbotCloseMotion { |
| 946 | 1048 | 0% { |
| 947 | 1049 | opacity: 1; |
| 948 | 1050 | transform: translate3d(0, 0, 0) scale(1); |
| @@ -968,16 +1070,8 @@ | ||
| 968 | 1070 | .wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-open-anim { |
| 969 | 1071 | animation: wpbotExpandMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; |
| 970 | 1072 | } |
| 971 | 1073 | |
| 972 | -.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expand-anim { | |
| 973 | - animation: wpbotExpandMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; | |
| 974 | -} | |
| 975 | - | |
| 976 | -.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-collapse-anim { | |
| 977 | - animation: wpbotCollapseMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both; | |
| 978 | -} | |
| 979 | - | |
| 980 | 1074 | .wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-close-anim { |
| 981 | 1075 | animation: wpbotCloseMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both; |
| 982 | 1076 | } |
| 983 | 1077 | |
| @@ -1023,5 +1117,104 @@ | ||
| 1023 | 1117 | |
| 1024 | 1118 | |
| 1025 | 1119 | .wp-chatbot-rtl .wp-chatbot-template-01 .wp-chatbot-header-icon-right { |
| 1026 | 1120 | right: 95px; |
| 1121 | +} | |
| 1122 | + | |
| 1123 | + | |
| 1124 | + | |
| 1125 | + | |
| 1126 | + | |
| 1127 | + | |
| 1128 | + | |
| 1129 | + | |
| 1130 | + | |
| 1131 | + | |
| 1132 | + | |
| 1133 | + | |
| 1134 | +.wp-chatbot-avatar-hidden .wp-chatbot-avatar { | |
| 1135 | + display: none; | |
| 1136 | +} | |
| 1137 | +.wp-chatbot-avatar-hidden ul.wp-chatbot-messages-container > li.wp-chatbot-msg { | |
| 1138 | + padding-left: 0; | |
| 1139 | +} | |
| 1140 | + | |
| 1141 | +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chatbot-msg { | |
| 1142 | + padding-left: 0px; | |
| 1143 | + box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%); | |
| 1144 | + background: rgb(255 255 255 / 30%); | |
| 1145 | + backdrop-filter: blur(0px); | |
| 1146 | + isolation: isolate; | |
| 1147 | + border-radius: 10px; | |
| 1148 | + padding: 8px 15px; | |
| 1149 | + min-height: auto; | |
| 1150 | +} | |
| 1151 | + | |
| 1152 | +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container { | |
| 1153 | + box-shadow: none; | |
| 1154 | + background: rgba(255, 255, 255, 0); | |
| 1155 | + backdrop-filter: none; | |
| 1156 | + isolation: isolate; | |
| 1157 | + border-radius: 0px; | |
| 1158 | + padding: 0; | |
| 1159 | +} | |
| 1160 | + | |
| 1161 | +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar{ | |
| 1162 | + position: relative; | |
| 1163 | +} | |
| 1164 | + | |
| 1165 | +.wp-chatbot-avatar-inside .wp-chatbot-avatar img, .wp-chatbot-avatar-inside .wp-chatbot-widget-avatar img { | |
| 1166 | + width: 32px !important; | |
| 1167 | + height: 32px !important; | |
| 1168 | + object-fit: cover; | |
| 1169 | +} | |
| 1170 | + | |
| 1171 | + | |
| 1172 | +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg { | |
| 1173 | + padding-right: 0; | |
| 1174 | +} | |
| 1175 | + | |
| 1176 | + | |
| 1177 | +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg { | |
| 1178 | + padding-left: 0px; | |
| 1179 | + box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%); | |
| 1180 | + background: rgb(255 255 255 / 30%); | |
| 1181 | + backdrop-filter: blur(0px); | |
| 1182 | + isolation: isolate; | |
| 1183 | + border-radius: 10px; | |
| 1184 | + padding: 8px 15px; | |
| 1185 | + min-height: auto; | |
| 1186 | + display: flex; | |
| 1187 | + flex-direction: column; | |
| 1188 | + align-content: flex-end; | |
| 1189 | + flex-wrap: wrap; | |
| 1190 | +} | |
| 1191 | + | |
| 1192 | +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph { | |
| 1193 | + box-shadow: none; | |
| 1194 | + background: rgba(255, 255, 255, 0); | |
| 1195 | + backdrop-filter: none; | |
| 1196 | + isolation: isolate; | |
| 1197 | + border-radius: 0px; | |
| 1198 | + padding: 0; | |
| 1199 | +} | |
| 1200 | + | |
| 1201 | +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar { | |
| 1202 | + width: 32px; | |
| 1203 | + height: 32px; | |
| 1204 | + text-align: right; | |
| 1205 | + margin:0 0 6px auto !important; | |
| 1206 | +} | |
| 1207 | +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar { | |
| 1208 | + position: relative; | |
| 1209 | + border-radius: 0; | |
| 1210 | +} | |
| 1211 | +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar img{ | |
| 1212 | + border-radius: 50%; | |
| 1213 | +} | |
| 1214 | +.wp-chatbot-avatar-hidden ul.wp-chatbot-messages-container > li.wp-chat-user-msg { | |
| 1215 | + padding-right: 0; | |
| 1216 | +} | |
| 1217 | +.wp-chatbot-template-01 .wp-chatbot-board-container { | |
| 1218 | + border-radius: 12px; | |
| 1219 | + border: 1px solid #e4e4e4; | |
| 1027 | 1220 | } |
