← All changes | templates/template-01/style.css +149 -42 8.6.6 → 8.8.1 View file →

		@@ -346,18 +346,9 @@
346	346	}
347	347
348	348
349	349
350		-.wp-chatbot-tab-nav ul li:before {
351	350
352		- background: linear-gradient(transparent 50%, #9ec3c0 50%);
353		-
354		- background-size: 200%, 100%;
355		-
356		-}
357		-
358		-
359		-
360	351	/******************************************
361	352
362	353	05. Tab Feature Product
363	354
		@@ -617,22 +608,32 @@
617	608	vertical-align: middle;
618	609
619	610	}
620	611
621		-.wp-chatbot-tab-nav ul li a[data-option="support"] {
622		- 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;
623	614	}
624	615
625		-.wp-chatbot-template-01 .wpbot_card_caption span{
	616	+.wp-chatbot-template-01 .wp-chatbot-template-01 .wpbot_card_caption span{
626	617	color: #0c0c0c !important;
627	618	}
628	619
629	620
	621	+.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
	622	+ background-position: -89px -48px;
	623	+}
	624	+.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
630	625
	626	+ width: 22px;
	627	+ height: 22px;
	628	+}
631	629
632	630
	631	+.wp-chatbot-template-01 span.chatbot_intent_reload {
	632	+ -webkit-transform: translate(0%, -50%);
	633	+ transform: translate(0%, -50%);
	634	+}
633	635
634		-
635	636	.wp-chatbot-template-001 .wpbot_card_image span {
636	637	display: none !important;
637	638	}
638	639	.wp-chatbot-template-001 .wpbot_card_image a {
		@@ -740,20 +741,45 @@
740	741	}
741	742
742	743	/* Template-01 modern panel refresh */
743	744	.wp-chatbot-template-01 .wp-chatbot-board-container {
744		- background: #eceef3;
	745	+ background-color: #eceef3;
	746	+ background-image: none;
745	747	border-radius: 28px;
746	748	overflow: hidden;
747	749	box-shadow: 0 14px 35px rgba(16, 24, 40, 0.18);
748		- transform-origin: 100% 100%;
749		- will-change: transform, opacity;
750		- 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);
751		- transform-origin: right bottom;
752		- 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	+}
753	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	+}
754	772
	773	+.wp-chatbot-template-01 .wp-chatbot-board-container > * {
	774	+ position: relative;
	775	+ z-index: 1;
	776	+}
755	777
	778	+.wp-chatbot-template-01 .wp-chatbot-container {
	779	+ background-size: cover;
	780	+ background-position: center;
	781	+ background-repeat: no-repeat;
756	782	}
757	783
758	784	.wp-chatbot-template-01 .wp-chatbot-header {
759	785	display: flex;
		@@ -863,9 +889,9 @@
863	889	background: transparent;
864	890	}
865	891
866	892	.wp-chatbot-template-01 .wp-chatbot-editor-container {
867		- margin: 14px 16px 16px;
	893	+ margin: 6px 16px 16px;
868	894	border: 0;
869	895	border-radius: 999px;
870	896	background: #ffffff;
871	897	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
		@@ -885,16 +911,112 @@
885	911	.wp-chatbot-template-01 button#wp-chatbot-send-message {
886	912	border: none;
887	913	}
888	914
889		-.wp-chatbot-template-01 .wp-chatbot-tab-nav {
890		- 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%;
891	927	}
892	928
893		-.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 {
894	1007	max-width: calc(100vw - 40px);
895	1008	width: min(92vw, 620px) !important;
	1009	+ /* Height comes from admin setting (+ bump) via inline CSS in qcld-wpwbot.php */
	1010	+}
896	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);
897	1019	}
898	1020
899	1021	@keyframes wpbotOpenRightToTopLeft {
900	1022	0% {
		@@ -921,19 +1043,8 @@
921	1043	transform: translate3d(0, 0, 0) scale(1);
922	1044	}
923	1045	}
924	1046
925		-@keyframes wpbotCollapseMotion {
926		- 0% {
927		- opacity: 1;
928		- transform: translate3d(0, 0, 0) scale(1);
929		- }
930		- 100% {
931		- opacity: 0;
932		- transform: translate3d(0, 16px, 0) scale(0.97);
933		- }
934		-}
935		-
936	1047	@keyframes wpbotCloseMotion {
937	1048	0% {
938	1049	opacity: 1;
939	1050	transform: translate3d(0, 0, 0) scale(1);
		@@ -959,16 +1070,8 @@
959	1070	.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-open-anim {
960	1071	animation: wpbotExpandMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
961	1072	}
962	1073
963		-.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expand-anim {
964		- animation: wpbotExpandMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
965		-}
966		-
967		-.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-collapse-anim {
968		- animation: wpbotCollapseMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both;
969		-}
970		-
971	1074	.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-close-anim {
972	1075	animation: wpbotCloseMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both;
973	1076	}
974	1077
		@@ -1109,5 +1212,9 @@
1109	1212	border-radius: 50%;
1110	1213	}
1111	1214	.wp-chatbot-avatar-hidden ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1112	1215	padding-right: 0;
	1216	+}
	1217	+.wp-chatbot-template-01 .wp-chatbot-board-container {
	1218	+ border-radius: 12px;
	1219	+ border: 1px solid #e4e4e4;
1113	1220	}