← All changes | css/common-style.css +36 -225 8.7.5 → 7.4.4 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,11 +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;
386		- object-fit: cover;
	377	+ width: 40px !important;
	378	+ height: 40px !important;
387	379	}
388	380
389	381	/*********************************************************************************
390	382	4. Tab
		@@ -540,8 +532,33 @@
540	532	box-shadow: none;
541	533	background: none;
542	534	}
543	535
	536	+.wp-chatbot-editor-container button {
	537	+ display: inline-block;
	538	+ height: 40px;
	539	+ background: transparent url("../images/send-button.png") no-repeat right !important;
	540	+ color: transparent !important;
	541	+ width: 20%;
	542	+ cursor: pointer;
	543	+ margin: 0 0 0 -8px;
	544	+ padding: 0;
	545	+ border: none;
	546	+ outline: none;
	547	+}
	548	+
	549	+.wp-chatbot-editor-container button:hover {
	550	+ background: transparent url("../images/send-button.png") no-repeat center;
	551	+ color: transparent;
	552	+}
	553	+
	554	+.wp-chatbot-editor-container button:focus {
	555	+ outline: none;
	556	+ border: none;
	557	+ box-shadow: none;
	558	+ background: transparent url("../images/send-button.png") no-repeat center;
	559	+}
	560	+
544	561	/*****************************************************************************************
545	562	6. Message Item
546	563	*********************************************************************************************/
547	564	/*Load More Product*/
		@@ -1572,8 +1589,11 @@
1572	1589
1573	1590	.wp-chatbot-board-container{
1574	1591	width: 310px;
1575	1592	}
	1593	+ .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
	1594	+ width: 100%;
	1595	+ }
1576	1596
1577	1597	#wp-chatbot-mobile-close {
1578	1598	position: absolute;
1579	1599	right: 12px;
		@@ -1747,8 +1767,9 @@
1747	1767	padding: 0 5px;
1748	1768	}
1749	1769
1750	1770	.qcld-like-dislike-icon i {
	1771	+ font: normal normal normal 14px / 1 FontAwesome !important;
1751	1772	color: #1d73b4;
1752	1773	}
1753	1774
1754	1775	ul.wp-chatbot-messages-container>li>.wp-chatbot-paragraph,
		@@ -1876,10 +1897,8 @@
1876	1897	backdrop-filter: none;
1877	1898	isolation: inherit;
1878	1899	}
1879	1900
1880		-
1881		-
1882	1901	ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container {
1883	1902	box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1884	1903	background: rgb(255 255 255 / 30%);
1885	1904	backdrop-filter: blur(0px);
		@@ -1889,12 +1908,14 @@
1889	1908	}
1890	1909
1891	1910	.qcld-like-dislike-icon {
1892	1911	padding: 6px 0 0 0;
1893		- margin-top: 20px;
1894	1912	}
1895	1913
1896	1914
	1915	+.qcld-like-dislike-icon a i {
	1916	+ padding: 0 6px;
	1917	+}
1897	1918
1898	1919	.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked {
1899	1920	position: relative;
1900	1921	font-size: 0px !important;
		@@ -1936,215 +1957,5 @@
1936	1957	}
1937	1958
1938	1959	.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked:before:hover {
1939	1960	transform: scale(1.5);
1940		-}
1941		-
1942		-.qcld-like-dislike-icon a {
1943		- outline: none !important;
1944		-}
1945		-
1946		-
1947		-.qcld-like-dislike-icon a {
1948		- padding: 0 10px 0 0;
1949		-}
1950		-
1951		-.qcld-like-dislike-icon .share-menu a {
1952		- padding: 0 0 0 0 !important;
1953		-}
1954		-
1955		-.qcld-like-dislike-icon i {
1956		- color: #ffffff;
1957		-}
1958		-
1959		-.wp-chatbot-textanimation ul {
1960		- margin: 12px 0 8px 20px !important;
1961		- padding: 0;
1962		-}
1963		-.qcld-like-dislike-icon i {
1964		- color: #1e74b3;
1965		-}
1966		-.qcld-like-dislike-icon a i {
1967		- font-size: 16px;
1968		- padding: 0;
1969		- height: auto;
1970		-}
1971		-.qcld-like-dislike-icon a {
1972		- padding: 0 5px 0 0;
1973		- 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	1961	}