← All changes | templates/template-01/style.css +145 -47 8.6.0 → 8.8.0 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,27 +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		-@media screen and (max-width: 768px) {
630		- .wp-chatbot-content {
631		- height: calc(100vh - 220px) !important;
632		- }
	620	+
	621	+.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
	622	+ background-position: -89px -48px;
633	623	}
	624	+.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
634	625
	626	+ width: 22px;
	627	+ height: 22px;
	628	+}
635	629
636	630
	631	+.wp-chatbot-template-01 span.chatbot_intent_reload {
	632	+ -webkit-transform: translate(0%, -50%);
	633	+ transform: translate(0%, -50%);
	634	+}
637	635
638		-
639		-
640	636	.wp-chatbot-template-001 .wpbot_card_image span {
641	637	display: none !important;
642	638	}
643	639	.wp-chatbot-template-001 .wpbot_card_image a {
		@@ -745,20 +741,45 @@
745	741	}
746	742
747	743	/* Template-01 modern panel refresh */
748	744	.wp-chatbot-template-01 .wp-chatbot-board-container {
749		- background: #eceef3;
	745	+ background-color: #eceef3;
	746	+ background-image: none;
750	747	border-radius: 28px;
751	748	overflow: hidden;
752	749	box-shadow: 0 14px 35px rgba(16, 24, 40, 0.18);
753		- transform-origin: 100% 100%;
754		- will-change: transform, opacity;
755		- 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);
756		- transform-origin: right bottom;
757		- 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	+}
758	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	+}
759	772
	773	+.wp-chatbot-template-01 .wp-chatbot-board-container > * {
	774	+ position: relative;
	775	+ z-index: 1;
	776	+}
760	777
	778	+.wp-chatbot-template-01 .wp-chatbot-container {
	779	+ background-size: cover;
	780	+ background-position: center;
	781	+ background-repeat: no-repeat;
761	782	}
762	783
763	784	.wp-chatbot-template-01 .wp-chatbot-header {
764	785	display: flex;
		@@ -868,9 +889,9 @@
868	889	background: transparent;
869	890	}
870	891
871	892	.wp-chatbot-template-01 .wp-chatbot-editor-container {
872		- margin: 14px 16px 16px;
	893	+ margin: 6px 16px 16px;
873	894	border: 0;
874	895	border-radius: 999px;
875	896	background: #ffffff;
876	897	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
		@@ -890,16 +911,112 @@
890	911	.wp-chatbot-template-01 button#wp-chatbot-send-message {
891	912	border: none;
892	913	}
893	914
894		-.wp-chatbot-template-01 .wp-chatbot-tab-nav {
895		- 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%;
896	927	}
897	928
898		-.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 {
899	1007	max-width: calc(100vw - 40px);
900	1008	width: min(92vw, 620px) !important;
	1009	+ /* Height comes from admin setting (+ bump) via inline CSS in qcld-wpwbot.php */
	1010	+}
901	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);
902	1019	}
903	1020
904	1021	@keyframes wpbotOpenRightToTopLeft {
905	1022	0% {
		@@ -926,19 +1043,8 @@
926	1043	transform: translate3d(0, 0, 0) scale(1);
927	1044	}
928	1045	}
929	1046
930		-@keyframes wpbotCollapseMotion {
931		- 0% {
932		- opacity: 1;
933		- transform: translate3d(0, 0, 0) scale(1);
934		- }
935		- 100% {
936		- opacity: 0;
937		- transform: translate3d(0, 16px, 0) scale(0.97);
938		- }
939		-}
940		-
941	1047	@keyframes wpbotCloseMotion {
942	1048	0% {
943	1049	opacity: 1;
944	1050	transform: translate3d(0, 0, 0) scale(1);
		@@ -962,16 +1068,8 @@
962	1068	}
963	1069
964	1070	.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-open-anim {
965	1071	animation: wpbotExpandMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
966		-}
967		-
968		-.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expand-anim {
969		- animation: wpbotExpandMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
970		-}
971		-
972		-.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-collapse-anim {
973		- animation: wpbotCollapseMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both;
974	1072	}
975	1073
976	1074	.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-close-anim {
977	1075	animation: wpbotCloseMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both;