← All changes | css/common-style.css +32 -188 8.7.3 → 8.2.3 View file →

		@@ -232,17 +232,8 @@
232	232	display: inline-block;
233	233	vertical-align: top;
234	234	}
235	235
236		-/* Hide slimScroll when message content fits (slimScroll otherwise shows a ghost bar) */
237		-.slimScrollDiv.wpbot-no-scroll > .slimScrollBar,
238		-.slimScrollDiv.wpbot-no-scroll > .slimScrollRail {
239		- display: none !important;
240		- opacity: 0 !important;
241		- visibility: hidden !important;
242		- pointer-events: none !important;
243		-}
244		-
245	236	.wp-chatbot-header {
246	237	border-radius: 5px 5px 0 0;
247	238	margin: 0;
248	239	padding: 15px 15px;
		@@ -256,11 +247,13 @@
256	247	padding: 0 !important;
257	248	}
258	249
259	250	.wp-chatbot-content {
	251	+ height: calc(100vh - 277px);
260	252	position: relative;
261	253	padding: 15px;
262	254	box-sizing: border-box;
	255	+ max-height: 564px;
263	256	}
264	257
265	258	.wp-chatbot-product-reload.wp-chatbot-product-loading {
266	259	display: block;
		@@ -380,10 +373,10 @@
380	373	display: none;
381	374	}
382	375
383	376	#wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
384		- width: 40px;
385		- height: 40px;
	377	+ width: 40px !important;
	378	+ height: 40px !important;
386	379	object-fit: cover;
387	380	}
388	381
389	382	/*********************************************************************************
		@@ -540,8 +533,33 @@
540	533	box-shadow: none;
541	534	background: none;
542	535	}
543	536
	537	+.wp-chatbot-editor-container button {
	538	+ display: inline-block;
	539	+ height: 40px;
	540	+ background: transparent url("../images/send-button.png") no-repeat right !important;
	541	+ color: transparent !important;
	542	+ width: 20%;
	543	+ cursor: pointer;
	544	+ margin: 0 0 0 -8px;
	545	+ padding: 0;
	546	+ border: none;
	547	+ outline: none;
	548	+}
	549	+
	550	+.wp-chatbot-editor-container button:hover {
	551	+ background: transparent url("../images/send-button.png") no-repeat center;
	552	+ color: transparent;
	553	+}
	554	+
	555	+.wp-chatbot-editor-container button:focus {
	556	+ outline: none;
	557	+ border: none;
	558	+ box-shadow: none;
	559	+ background: transparent url("../images/send-button.png") no-repeat center;
	560	+}
	561	+
544	562	/*****************************************************************************************
545	563	6. Message Item
546	564	*********************************************************************************************/
547	565	/*Load More Product*/
		@@ -1572,8 +1590,11 @@
1572	1590
1573	1591	.wp-chatbot-board-container{
1574	1592	width: 310px;
1575	1593	}
	1594	+ .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
	1595	+ width: 100%;
	1596	+ }
1576	1597
1577	1598	#wp-chatbot-mobile-close {
1578	1599	position: absolute;
1579	1600	right: 12px;
		@@ -1889,9 +1910,8 @@
1889	1910	}
1890	1911
1891	1912	.qcld-like-dislike-icon {
1892	1913	padding: 6px 0 0 0;
1893		- margin-top: 20px;
1894	1914	}
1895	1915
1896	1916
1897	1917
		@@ -1970,181 +1990,5 @@
1970	1990	}
1971	1991	.qcld-like-dislike-icon a {
1972	1992	padding: 0 5px 0 0;
1973	1993	height: 15px;
1974		-}
1975		-
1976		-
1977		-/* Icon video / YouTube inside the floating ball */
1978		-#wp-chatbot-ball .wp-chatbot-ball .wpbot-icon-video,
1979		-.wp-chatbot-ball .wpbot-icon-video {
1980		- position: absolute;
1981		- top: 0;
1982		- left: 0;
1983		- width: 100% !important;
1984		- height: 100% !important;
1985		- border-radius: 50%;
1986		- object-fit: cover;
1987		- pointer-events: none;
1988		- box-sizing: border-box;
1989		- z-index: 0;
1990		-}
1991		-
1992		-/*
1993		- * YouTube iframes ignore object-fit and letterbox in a square ball.
1994		- * Size as 16:9 cover, then scale up so title / logo / chrome are cropped by the circle.
1995		- */
1996		-#wp-chatbot-ball .wp-chatbot-ball iframe.wpbot-icon-video,
1997		-.wp-chatbot-ball iframe.wpbot-icon-video {
1998		- top: 50%;
1999		- left: 50%;
2000		- width: 100% !important; /* 16 / 9 */
2001		- height: 100% !important;
2002		- min-height: 100%;
2003		- border: 0;
2004		- transform: translate(-50%, -50%) scale(1);
2005		- transform-origin: center center;
2006		- object-fit: unset;
2007		- pointer-events: none;
2008		-}
2009		-
2010		-.wp-chatbot-ball-animator {
2011		- position: relative;
2012		- border-radius: 50%;
2013		- z-index: 1;
2014		-}
2015		-
2016		-.wp-chatbot-animation-active .wp-chatbot-ball-animation-switch {
2017		- opacity: 1;
2018		- width: 100%;
2019		- height: 100%;
2020		- position: absolute;
2021		- animation: spin 2s linear infinite;
2022		- border: 3px solid transparent;
2023		- border-top-color: #9370DB;
2024		-}
2025		-
2026		-.wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:before {
2027		- content: "";
2028		- position: absolute;
2029		- top: -9px;
2030		- left: -9px;
2031		- right: -9px;
2032		- bottom: -9px;
2033		- border-radius: 50%;
2034		- border: 3px solid transparent;
2035		- border-top-color: #BA55D3;
2036		- animation: spin 3s linear infinite;
2037		-}
2038		-
2039		-.wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:after {
2040		- content: "";
2041		- position: absolute;
2042		- top: -15px;
2043		- left: -15px;
2044		- right: -15px;
2045		- bottom: -15px;
2046		- border-radius: 50%;
2047		- border: 3px solid transparent;
2048		- border-top-color: #FF00FF;
2049		- animation: spin 1.5s linear infinite;
2050		-}
2051		-
2052		-@keyframes spin {
2053		- 0% {
2054		- -webkit-transform: rotate(0deg);
2055		- -ms-transform: rotate(0deg);
2056		- transform: rotate(0deg);
2057		- }
2058		-
2059		- 100% {
2060		- -webkit-transform: rotate(360deg);
2061		- -ms-transform: rotate(360deg);
2062		- transform: rotate(360deg);
2063		- }
2064		-}
2065		-
2066		-@keyframes spinHide {
2067		- 0% {
2068		- opacity: 0;
2069		- }
2070		-
2071		- 100% {
2072		- opacity: 0;
2073		- }
2074		-}
2075		-
2076		-span.qcld-chatbot-wildcard.qcld_back_to_start {
2077		- text-align: center;
2078		- margin: 0 auto;
2079		- display: block;
2080		- max-width: 120px;
2081		-}
2082		-.chat-container.wp-chatbot-msg-flat:has(.qcld_back_to_start) {
2083		- box-shadow: none !important;
2084		- background: rgb(255 255 255 / 0%) !important;
2085		-}
2086		-
2087		-@media screen and (min-height: 1281px) {
2088		- div#wp-chatbot-chat-container .slimScrollDiv {
2089		- height: 100vh !important;
2090		- max-height: 680px !important;
2091		- }
2092		- div#wp-chatbot-chat-container div#wp-chatbot-board-container {
2093		- height: 100vh !important;
2094		- max-height: 850px !important;
2095		- }
2096		-}
2097		-
2098		-@media screen and (max-width: 1024px) {
2099		- div#wp-chatbot-chat-container {
2100		- right: 30px !important;
2101		- bottom: 30px !important;
2102		- left: auto !important;
2103		- }
2104		- div#wp-chatbot-mobile-close {
2105		- display: none;
2106		- }
2107		-}
2108		-@media screen and (max-width: 767px) {
2109		- body div#wp-chatbot-ball-container {
2110		- max-width: 100%;
2111		- margin: 0 auto 3px auto;
2112		- width: 100%;
2113		- }
2114		-}
2115		-
2116		-@media screen and (max-width: 480px) {
2117		- div#wp-chatbot-chat-container {
2118		- right: 0px !important;
2119		- bottom: 0px !important;
2120		- left: auto !important;
2121		- }
2122		- /* Full width only below 480px while open (incl. after reset/reload) */
2123		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open {
2124		- left: 0 !important;
2125		- right: 0 !important;
2126		- bottom: 0 !important;
2127		- width: 100% !important;
2128		- max-width: 100% !important;
2129		- }
2130		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2131		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .wp-chatbot-board-container,
2132		- .wp-chatbot-template-01 div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2133		- .wp-chatbot-mobile-full-screen.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2134		- .wp-chatbot-template-01 .wp-chatbot-mobile-full-screen.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2135		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .slimScrollDiv,
2136		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .wp-chatbot-ball-inner {
2137		- width: 100% !important;
2138		- max-width: 100% !important;
2139		- }
2140		- div#wp-chatbot-ball {
2141		- right: 30px;
2142		- bottom: 30px;
2143		- position: relative;
2144		-}
2145		-}
2146		-@media screen and (min-height: 1281px) {
2147		- body .wp-chatbot-ball-inner.wp-chatbot-content {
2148		- height: 660px !important; max-height: 660px !important;
2149		- }
2150	1994	}