PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 6.6.0
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v6.6.0
8.7.7 8.7.6 8.7.5 8.7.4 8.7.3 8.7.2 8.7.1 8.7.0 8.6.9 8.6.8 8.6.7 8.6.6 8.6.5 8.6.4 8.6.2 8.6.1 8.6.0 8.5.9 8.5.8 8.5.7 8.5.6 8.5.5 8.5.4 8.5.3 8.5.2 All 533 releases
← All changes | css/common-style.css +32 -438 8.7.46.6.0 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;
@@ -1721,430 +1741,4 @@
1721 1741 color: #222;
1722 1742 }
1723 1743
1724 1744
1725 -.wp-chatbot-textanimation ul {
1726 - margin: 12px 0 8px 20px !important;
1727 -}
1728 -.wp-chatbot-textanimation ul li {
1729 - list-style-type: "✓";
1730 - padding-left: 6px;
1731 -}
1732 -
1733 -.wp-chatbot-textanimation ul li::marker {
1734 - color: #1d73b4;
1735 - font-weight: bold;
1736 -}
1737 -
1738 -/** like dislike thumbs icons**/
1739 -
1740 -
1741 -
1742 -.qcld-like-dislike-icon {
1743 - display: none;
1744 -}
1745 -
1746 -.qcld-like-dislike-icon a {
1747 - padding: 0 5px;
1748 -}
1749 -
1750 -.qcld-like-dislike-icon i {
1751 - color: #1d73b4;
1752 -}
1753 -
1754 -ul.wp-chatbot-messages-container>li>.wp-chatbot-paragraph,
1755 -.wp-chatbot-agent-profile .wp-chatbot-bubble {
1756 - padding: 8px 15px 15px 15px;
1757 -}
1758 -
1759 -/* ul.wp-chatbot-messages-container>li.wp-chatbot-msg:hover .qcld-like-dislike-icon {
1760 - opacity: 1;
1761 -} */
1762 -.qcld-share {
1763 - position: relative;
1764 - display: inline-block;
1765 -}
1766 -
1767 -.qcld-share .share-menu {
1768 - position: absolute;
1769 - bottom: 100%;
1770 - left: -6px;
1771 - background: #fff;
1772 - border: 1px solid #ddd;
1773 - padding: 5px;
1774 - display: flex;
1775 - gap: 8px;
1776 - border-radius: 5px;
1777 -}
1778 -
1779 -.qcld-share .share-menu a {
1780 - color: #333;
1781 - font-size: 16px;
1782 -}
1783 -
1784 -/**Modal style**/
1785 -#wpbot-report-modal>div {
1786 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%) !important;
1787 - background: #1d73b4 !important;
1788 - backdrop-filter: blur(0px);
1789 - isolation: isolate;
1790 -}
1791 -
1792 -#wpbot-report-modal input#wpbot-report-email {
1793 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1794 - background: #ffffff61;
1795 - backdrop-filter: blur(0px);
1796 - isolation: isolate;
1797 - margin: 0 0;
1798 - border-radius: 6PX;
1799 - padding: 10px 10px;
1800 - border: none;
1801 - width: 96% !important;
1802 - color: #fff;
1803 -}
1804 -
1805 -#wpbot-report-modal textarea#wpbot-report-text {
1806 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1807 - background: #ffffff61;
1808 - backdrop-filter: blur(0px);
1809 - isolation: isolate;
1810 - margin: 0 0;
1811 - border-radius: 6PX;
1812 - padding: 10px 10px;
1813 - border: none;
1814 - width: 96% !important;
1815 - color: #fff;
1816 -}
1817 -
1818 -#wpbot-report-modal textarea#wpbot-report-text:focus-visible {
1819 - box-shadow: none;
1820 - outline: none;
1821 -}
1822 -
1823 -#wpbot-report-modal input#wpbot-report-email:focus-visible {
1824 - box-shadow: none;
1825 - outline: none;
1826 -}
1827 -
1828 -#wpbot-report-modal>div h3 {
1829 - font-size: 20px;
1830 - font-weight: bold;
1831 - color: #fff;
1832 -}
1833 -
1834 -#wpbot-report-modal>div label {
1835 - font-size: 16px;
1836 - font-weight: bold;
1837 - color: #fff;
1838 -}
1839 -
1840 -#wpbot-report-modal>div button {
1841 - transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
1842 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1843 - background: rgb(255 255 255 / 25%);
1844 - backdrop-filter: none;
1845 - isolation: isolate;
1846 - color: rgb(29 115 180) !important;
1847 - margin: 2px 2px;
1848 - border: 1px solid #fff !important;
1849 - padding: 8px 15px;
1850 - border-radius: 8px;
1851 - color: #ffffff !important;
1852 - font-size: 14px;
1853 - font-weight: bold;
1854 - cursor: pointer;
1855 -}
1856 -
1857 -#wpbot-report-modal>div button:hover {
1858 - transform: scale(0.95);
1859 -}
1860 -
1861 -.qcld-like-dislike-icon a .liked {
1862 - color: green;
1863 - cursor: default;
1864 - pointer-events: none;
1865 -}
1866 -
1867 -.qcld-like-dislike-icon a .disliked {
1868 - color: red;
1869 - cursor: default;
1870 - pointer-events: none;
1871 -}
1872 -
1873 -ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container .wp-chatbot-paragraph {
1874 - box-shadow: none;
1875 - background: transparent;
1876 - backdrop-filter: none;
1877 - isolation: inherit;
1878 -}
1879 -
1880 -
1881 -
1882 -ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container {
1883 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1884 - background: rgb(255 255 255 / 30%);
1885 - backdrop-filter: blur(0px);
1886 - isolation: isolate;
1887 - border-radius: 10px;
1888 - padding: 8px 15px;
1889 -}
1890 -
1891 -.qcld-like-dislike-icon {
1892 - padding: 6px 0 0 0;
1893 - margin-top: 20px;
1894 -}
1895 -
1896 -
1897 -
1898 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked {
1899 - position: relative;
1900 - font-size: 0px !important;
1901 -}
1902 -
1903 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked:before {
1904 - content: "\f164" !important;
1905 - left: 0px;
1906 - bottom: 0;
1907 - font-size: 16px !important;
1908 -}
1909 -
1910 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked {
1911 - position: relative;
1912 - font-size: 0px !important;
1913 -}
1914 -
1915 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked:before {
1916 - content: "\f165" !important;
1917 - left: 0px;
1918 - bottom: 0;
1919 - font-size: 16px !important;
1920 -}
1921 -
1922 -.qcld-like-dislike-icon a {
1923 - padding: 0 0px;
1924 -}
1925 -
1926 -.qcld-like-dislike-icon a i {
1927 - transition: all 0.2s ease-in-out;
1928 -}
1929 -
1930 -.qcld-like-dislike-icon a i:hover {
1931 - transform: scale(1.5);
1932 -}
1933 -
1934 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked:before {
1935 - transition: all 0.2s ease-in-out;
1936 -}
1937 -
1938 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked:before:hover {
1939 - 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 -}