← All changes | css/common-style.css +175 -3 8.6.4 → 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;
		@@ -1563,11 +1572,8 @@
1563	1572
1564	1573	.wp-chatbot-board-container{
1565	1574	width: 310px;
1566	1575	}
1567		- .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
1568		- width: 100%;
1569		- }
1570	1576
1571	1577	#wp-chatbot-mobile-close {
1572	1578	position: absolute;
1573	1579	right: 12px;
		@@ -1883,8 +1889,9 @@
1883	1889	}
1884	1890
1885	1891	.qcld-like-dislike-icon {
1886	1892	padding: 6px 0 0 0;
	1893	+ margin-top: 20px;
1887	1894	}
1888	1895
1889	1896
1890	1897
		@@ -1965,8 +1972,119 @@
1965	1972	padding: 0 5px 0 0;
1966	1973	height: 15px;
1967	1974	}
1968	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	+
1969	2087	@media screen and (min-height: 1281px) {
1970	2088	div#wp-chatbot-chat-container .slimScrollDiv {
1971	2089	height: 100vh !important;
1972	2090	max-height: 680px !important;
		@@ -1974,5 +2092,59 @@
1974	2092	div#wp-chatbot-chat-container div#wp-chatbot-board-container {
1975	2093	height: 100vh !important;
1976	2094	max-height: 850px !important;
1977	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	+ }
1978	2150	}