← All changes | css/common-style.css +183 -11 8.5.6 → 8.7.7 View file →

		@@ -232,8 +232,17 @@
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	+
236	245	.wp-chatbot-header {
237	246	border-radius: 5px 5px 0 0;
238	247	margin: 0;
239	248	padding: 15px 15px;
		@@ -247,9 +256,8 @@
247	256	padding: 0 !important;
248	257	}
249	258
250	259	.wp-chatbot-content {
251		- height: calc(100vh - 277px);
252	260	position: relative;
253	261	padding: 15px;
254	262	box-sizing: border-box;
255	263	}
		@@ -372,10 +380,10 @@
372	380	display: none;
373	381	}
374	382
375	383	#wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
376		- width: 40px !important;
377		- height: 40px !important;
	384	+ width: 40px;
	385	+ height: 40px;
378	386	object-fit: cover;
379	387	}
380	388
381	389	/*********************************************************************************
		@@ -1564,11 +1572,8 @@
1564	1572
1565	1573	.wp-chatbot-board-container{
1566	1574	width: 310px;
1567	1575	}
1568		- .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
1569		- width: 100%;
1570		- }
1571	1576
1572	1577	#wp-chatbot-mobile-close {
1573	1578	position: absolute;
1574	1579	right: 12px;
		@@ -1884,8 +1889,9 @@
1884	1889	}
1885	1890
1886	1891	.qcld-like-dislike-icon {
1887	1892	padding: 6px 0 0 0;
	1893	+ margin-top: 20px;
1888	1894	}
1889	1895
1890	1896
1891	1897
		@@ -1966,13 +1972,179 @@
1966	1972	padding: 0 5px 0 0;
1967	1973	height: 15px;
1968	1974	}
1969	1975
1970		-.wp-chatbot-content {
1971		- height: calc(100vh - 420px);
	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;
1972	1990	}
1973	1991
1974		-.wp-chatbot-expanded .wp-chatbot-content {
1975		- height: calc(100vh - 340px);
	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;
1976	2008	}
1977	2009
1978		-
	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	+}