← All changes | css/common-style.css +7 -167 8.7.0 → 8.3.8 View file →

		@@ -247,11 +247,13 @@
247	247	padding: 0 !important;
248	248	}
249	249
250	250	.wp-chatbot-content {
	251	+ height: calc(100vh - 277px);
251	252	position: relative;
252	253	padding: 15px;
253	254	box-sizing: border-box;
	255	+ max-height: 564px;
254	256	}
255	257
256	258	.wp-chatbot-product-reload.wp-chatbot-product-loading {
257	259	display: block;
		@@ -371,10 +373,10 @@
371	373	display: none;
372	374	}
373	375
374	376	#wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
375		- width: 40px;
376		- height: 40px;
	377	+ width: 40px !important;
	378	+ height: 40px !important;
377	379	object-fit: cover;
378	380	}
379	381
380	382	/*********************************************************************************
		@@ -1563,8 +1565,11 @@
1563	1565
1564	1566	.wp-chatbot-board-container{
1565	1567	width: 310px;
1566	1568	}
	1569	+ .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
	1570	+ width: 100%;
	1571	+ }
1567	1572
1568	1573	#wp-chatbot-mobile-close {
1569	1574	position: absolute;
1570	1575	right: 12px;
		@@ -1960,170 +1965,5 @@
1960	1965	}
1961	1966	.qcld-like-dislike-icon a {
1962	1967	padding: 0 5px 0 0;
1963	1968	height: 15px;
1964		-}
1965		-
1966		-
1967		-/* Icon video / YouTube inside the floating ball */
1968		-#wp-chatbot-ball .wp-chatbot-ball .wpbot-icon-video,
1969		-.wp-chatbot-ball .wpbot-icon-video {
1970		- position: absolute;
1971		- top: 0;
1972		- left: 0;
1973		- width: 100% !important;
1974		- height: 100% !important;
1975		- border-radius: 50%;
1976		- object-fit: cover;
1977		- pointer-events: none;
1978		- box-sizing: border-box;
1979		- z-index: 0;
1980		-}
1981		-
1982		-/*
1983		- * YouTube iframes ignore object-fit and letterbox in a square ball.
1984		- * Size as 16:9 cover, then scale up so title / logo / chrome are cropped by the circle.
1985		- */
1986		-#wp-chatbot-ball .wp-chatbot-ball iframe.wpbot-icon-video,
1987		-.wp-chatbot-ball iframe.wpbot-icon-video {
1988		- top: 50%;
1989		- left: 50%;
1990		- width: 100% !important; /* 16 / 9 */
1991		- height: 100% !important;
1992		- min-height: 100%;
1993		- border: 0;
1994		- transform: translate(-50%, -50%) scale(1);
1995		- transform-origin: center center;
1996		- object-fit: unset;
1997		- pointer-events: none;
1998		-}
1999		-
2000		-.wp-chatbot-ball-animator {
2001		- position: relative;
2002		- border-radius: 50%;
2003		- z-index: 1;
2004		-}
2005		-
2006		-.wp-chatbot-animation-active .wp-chatbot-ball-animation-switch {
2007		- opacity: 1;
2008		- width: 100%;
2009		- height: 100%;
2010		- position: absolute;
2011		- animation: spin 2s linear infinite;
2012		- border: 3px solid transparent;
2013		- border-top-color: #9370DB;
2014		-}
2015		-
2016		-.wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:before {
2017		- content: "";
2018		- position: absolute;
2019		- top: -9px;
2020		- left: -9px;
2021		- right: -9px;
2022		- bottom: -9px;
2023		- border-radius: 50%;
2024		- border: 3px solid transparent;
2025		- border-top-color: #BA55D3;
2026		- animation: spin 3s linear infinite;
2027		-}
2028		-
2029		-.wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:after {
2030		- content: "";
2031		- position: absolute;
2032		- top: -15px;
2033		- left: -15px;
2034		- right: -15px;
2035		- bottom: -15px;
2036		- border-radius: 50%;
2037		- border: 3px solid transparent;
2038		- border-top-color: #FF00FF;
2039		- animation: spin 1.5s linear infinite;
2040		-}
2041		-
2042		-@keyframes spin {
2043		- 0% {
2044		- -webkit-transform: rotate(0deg);
2045		- -ms-transform: rotate(0deg);
2046		- transform: rotate(0deg);
2047		- }
2048		-
2049		- 100% {
2050		- -webkit-transform: rotate(360deg);
2051		- -ms-transform: rotate(360deg);
2052		- transform: rotate(360deg);
2053		- }
2054		-}
2055		-
2056		-@keyframes spinHide {
2057		- 0% {
2058		- opacity: 0;
2059		- }
2060		-
2061		- 100% {
2062		- opacity: 0;
2063		- }
2064		-}
2065		-
2066		-@media screen and (min-height: 1281px) {
2067		- div#wp-chatbot-chat-container .slimScrollDiv {
2068		- height: 100vh !important;
2069		- max-height: 680px !important;
2070		- }
2071		- div#wp-chatbot-chat-container div#wp-chatbot-board-container {
2072		- height: 100vh !important;
2073		- max-height: 850px !important;
2074		- }
2075		-}
2076		-
2077		-@media screen and (max-width: 1024px) {
2078		- div#wp-chatbot-chat-container {
2079		- right: 30px !important;
2080		- bottom: 30px !important;
2081		- left: auto !important;
2082		- }
2083		- div#wp-chatbot-mobile-close {
2084		- display: none;
2085		- }
2086		-}
2087		-@media screen and (max-width: 767px) {
2088		- body div#wp-chatbot-ball-container {
2089		- max-width: 100%;
2090		- margin: 0 auto 3px auto;
2091		- width: 100%;
2092		- }
2093		-}
2094		-
2095		-@media screen and (max-width: 480px) {
2096		- div#wp-chatbot-chat-container {
2097		- right: 0px !important;
2098		- bottom: 0px !important;
2099		- left: auto !important;
2100		- }
2101		- /* Full width only below 480px while open (incl. after reset/reload) */
2102		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open {
2103		- left: 0 !important;
2104		- right: 0 !important;
2105		- bottom: 0 !important;
2106		- width: 100% !important;
2107		- max-width: 100% !important;
2108		- }
2109		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2110		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .wp-chatbot-board-container,
2111		- .wp-chatbot-template-01 div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2112		- .wp-chatbot-mobile-full-screen.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2113		- .wp-chatbot-template-01 .wp-chatbot-mobile-full-screen.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2114		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .slimScrollDiv,
2115		- div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .wp-chatbot-ball-inner {
2116		- width: 100% !important;
2117		- max-width: 100% !important;
2118		- }
2119		- div#wp-chatbot-ball {
2120		- right: 30px;
2121		- bottom: 30px;
2122		- position: relative;
2123		-}
2124		-}
2125		-@media screen and (min-height: 1281px) {
2126		- body .wp-chatbot-ball-inner.wp-chatbot-content {
2127		- height: 660px !important; max-height: 660px !important;
2128		- }
2129	1969	}