← All changes | css/common-style.css +32 -412 8.6.9 → 6.6.0 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,11 +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		- object-fit: cover;
	377	+ width: 40px !important;
	378	+ height: 40px !important;
378	379	}
379	380
380	381	/*********************************************************************************
381	382	4. Tab
		@@ -531,8 +532,33 @@
531	532	box-shadow: none;
532	533	background: none;
533	534	}
534	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	+
535	561	/*****************************************************************************************
536	562	6. Message Item
537	563	*********************************************************************************************/
538	564	/*Load More Product*/
		@@ -1563,8 +1589,11 @@
1563	1589
1564	1590	.wp-chatbot-board-container{
1565	1591	width: 310px;
1566	1592	}
	1593	+ .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
	1594	+ width: 100%;
	1595	+ }
1567	1596
1568	1597	#wp-chatbot-mobile-close {
1569	1598	position: absolute;
1570	1599	right: 12px;
		@@ -1712,413 +1741,4 @@
1712	1741	color: #222;
1713	1742	}
1714	1743
1715	1744
1716		-.wp-chatbot-textanimation ul {
1717		- margin: 12px 0 8px 20px !important;
1718		-}
1719		-.wp-chatbot-textanimation ul li {
1720		- list-style-type: "✓";
1721		- padding-left: 6px;
1722		-}
1723		-
1724		-.wp-chatbot-textanimation ul li::marker {
1725		- color: #1d73b4;
1726		- font-weight: bold;
1727		-}
1728		-
1729		-/** like dislike thumbs icons**/
1730		-
1731		-
1732		-
1733		-.qcld-like-dislike-icon {
1734		- display: none;
1735		-}
1736		-
1737		-.qcld-like-dislike-icon a {
1738		- padding: 0 5px;
1739		-}
1740		-
1741		-.qcld-like-dislike-icon i {
1742		- color: #1d73b4;
1743		-}
1744		-
1745		-ul.wp-chatbot-messages-container>li>.wp-chatbot-paragraph,
1746		-.wp-chatbot-agent-profile .wp-chatbot-bubble {
1747		- padding: 8px 15px 15px 15px;
1748		-}
1749		-
1750		-/* ul.wp-chatbot-messages-container>li.wp-chatbot-msg:hover .qcld-like-dislike-icon {
1751		- opacity: 1;
1752		-} */
1753		-.qcld-share {
1754		- position: relative;
1755		- display: inline-block;
1756		-}
1757		-
1758		-.qcld-share .share-menu {
1759		- position: absolute;
1760		- bottom: 100%;
1761		- left: -6px;
1762		- background: #fff;
1763		- border: 1px solid #ddd;
1764		- padding: 5px;
1765		- display: flex;
1766		- gap: 8px;
1767		- border-radius: 5px;
1768		-}
1769		-
1770		-.qcld-share .share-menu a {
1771		- color: #333;
1772		- font-size: 16px;
1773		-}
1774		-
1775		-/**Modal style**/
1776		-#wpbot-report-modal>div {
1777		- box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%) !important;
1778		- background: #1d73b4 !important;
1779		- backdrop-filter: blur(0px);
1780		- isolation: isolate;
1781		-}
1782		-
1783		-#wpbot-report-modal input#wpbot-report-email {
1784		- box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1785		- background: #ffffff61;
1786		- backdrop-filter: blur(0px);
1787		- isolation: isolate;
1788		- margin: 0 0;
1789		- border-radius: 6PX;
1790		- padding: 10px 10px;
1791		- border: none;
1792		- width: 96% !important;
1793		- color: #fff;
1794		-}
1795		-
1796		-#wpbot-report-modal textarea#wpbot-report-text {
1797		- box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1798		- background: #ffffff61;
1799		- backdrop-filter: blur(0px);
1800		- isolation: isolate;
1801		- margin: 0 0;
1802		- border-radius: 6PX;
1803		- padding: 10px 10px;
1804		- border: none;
1805		- width: 96% !important;
1806		- color: #fff;
1807		-}
1808		-
1809		-#wpbot-report-modal textarea#wpbot-report-text:focus-visible {
1810		- box-shadow: none;
1811		- outline: none;
1812		-}
1813		-
1814		-#wpbot-report-modal input#wpbot-report-email:focus-visible {
1815		- box-shadow: none;
1816		- outline: none;
1817		-}
1818		-
1819		-#wpbot-report-modal>div h3 {
1820		- font-size: 20px;
1821		- font-weight: bold;
1822		- color: #fff;
1823		-}
1824		-
1825		-#wpbot-report-modal>div label {
1826		- font-size: 16px;
1827		- font-weight: bold;
1828		- color: #fff;
1829		-}
1830		-
1831		-#wpbot-report-modal>div button {
1832		- transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
1833		- box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1834		- background: rgb(255 255 255 / 25%);
1835		- backdrop-filter: none;
1836		- isolation: isolate;
1837		- color: rgb(29 115 180) !important;
1838		- margin: 2px 2px;
1839		- border: 1px solid #fff !important;
1840		- padding: 8px 15px;
1841		- border-radius: 8px;
1842		- color: #ffffff !important;
1843		- font-size: 14px;
1844		- font-weight: bold;
1845		- cursor: pointer;
1846		-}
1847		-
1848		-#wpbot-report-modal>div button:hover {
1849		- transform: scale(0.95);
1850		-}
1851		-
1852		-.qcld-like-dislike-icon a .liked {
1853		- color: green;
1854		- cursor: default;
1855		- pointer-events: none;
1856		-}
1857		-
1858		-.qcld-like-dislike-icon a .disliked {
1859		- color: red;
1860		- cursor: default;
1861		- pointer-events: none;
1862		-}
1863		-
1864		-ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container .wp-chatbot-paragraph {
1865		- box-shadow: none;
1866		- background: transparent;
1867		- backdrop-filter: none;
1868		- isolation: inherit;
1869		-}
1870		-
1871		-
1872		-
1873		-ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container {
1874		- box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1875		- background: rgb(255 255 255 / 30%);
1876		- backdrop-filter: blur(0px);
1877		- isolation: isolate;
1878		- border-radius: 10px;
1879		- padding: 8px 15px;
1880		-}
1881		-
1882		-.qcld-like-dislike-icon {
1883		- padding: 6px 0 0 0;
1884		-}
1885		-
1886		-
1887		-
1888		-.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked {
1889		- position: relative;
1890		- font-size: 0px !important;
1891		-}
1892		-
1893		-.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked:before {
1894		- content: "\f164" !important;
1895		- left: 0px;
1896		- bottom: 0;
1897		- font-size: 16px !important;
1898		-}
1899		-
1900		-.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked {
1901		- position: relative;
1902		- font-size: 0px !important;
1903		-}
1904		-
1905		-.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked:before {
1906		- content: "\f165" !important;
1907		- left: 0px;
1908		- bottom: 0;
1909		- font-size: 16px !important;
1910		-}
1911		-
1912		-.qcld-like-dislike-icon a {
1913		- padding: 0 0px;
1914		-}
1915		-
1916		-.qcld-like-dislike-icon a i {
1917		- transition: all 0.2s ease-in-out;
1918		-}
1919		-
1920		-.qcld-like-dislike-icon a i:hover {
1921		- transform: scale(1.5);
1922		-}
1923		-
1924		-.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked:before {
1925		- transition: all 0.2s ease-in-out;
1926		-}
1927		-
1928		-.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked:before:hover {
1929		- transform: scale(1.5);
1930		-}
1931		-
1932		-.qcld-like-dislike-icon a {
1933		- outline: none !important;
1934		-}
1935		-
1936		-
1937		-.qcld-like-dislike-icon a {
1938		- padding: 0 10px 0 0;
1939		-}
1940		-
1941		-.qcld-like-dislike-icon .share-menu a {
1942		- padding: 0 0 0 0 !important;
1943		-}
1944		-
1945		-.qcld-like-dislike-icon i {
1946		- color: #ffffff;
1947		-}
1948		-
1949		-.wp-chatbot-textanimation ul {
1950		- margin: 12px 0 8px 20px !important;
1951		- padding: 0;
1952		-}
1953		-.qcld-like-dislike-icon i {
1954		- color: #1e74b3;
1955		-}
1956		-.qcld-like-dislike-icon a i {
1957		- font-size: 16px;
1958		- padding: 0;
1959		- height: auto;
1960		-}
1961		-.qcld-like-dislike-icon a {
1962		- padding: 0 5px 0 0;
1963		- 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		-}