PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 6.3.2
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v6.3.2
8.7.8 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 All 534 releases
← All changes | css/common-style.css +52 -446 8.7.56.3.2 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*/
@@ -1560,9 +1577,9 @@
1560 1577 }
1561 1578
1562 1579
1563 1580 @media screen and (max-width: 767px) {
1564 - body div#wp-chatbot-ball-container {
1581 + div#wp-chatbot-ball-container {
1565 1582 max-width: 98%;
1566 1583 margin: 0 auto 3px auto;
1567 1584 }
1568 1585 .wp-chatbot-header {
@@ -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;
@@ -1634,8 +1654,15 @@
1634 1654 .wp-chatbot-notification-container {
1635 1655 width: 250px;
1636 1656 padding-top: 55px;
1637 1657 }
1658 + /*#wp-chatbot-desktop-close{
1659 + right: 8px !important;
1660 + top: 8px !important;
1661 + }*/
1662 + /*.wp-chatbot-mobile-full-screen #wp-chatbot-desktop-close{
1663 + display:none !important;
1664 + }*/
1638 1665 .wp-chatbot-mobile-full-screen .wp-chatbot-header{
1639 1666 padding-top: 15px !important;
1640 1667 }
1641 1668 }
@@ -1641,9 +1668,9 @@
1641 1668 }
1642 1669 .wpb-search-result a{
1643 1670 display: block;
1644 1671 background: #fff;
1645 - margin-bottom: 0;
1672 + margin-bottom: 7px;
1646 1673 padding: 5px;
1647 1674 }
1648 1675 @media screen and (-webkit-min-device-pixel-ratio:0) {
1649 1676 .qcwp-chatbot-search-article input:focus,
@@ -1656,9 +1683,13 @@
1656 1683 font-size: 14px;
1657 1684 }
1658 1685
1659 1686 }
1687 +
1688 +
1660 1689 /*modal form*/
1690 +
1691 +
1661 1692 .plugin-card{
1662 1693 width: 77% !important;
1663 1694 height: 186px;
1664 1695 }
@@ -1681,14 +1712,17 @@
1681 1712 position: absolute;
1682 1713 left: 0;
1683 1714 top: 32px;
1684 1715 }
1716 +
1685 1717 .wp-chatbot-textanimation {
1686 1718 position: relative;
1687 1719 }
1720 +
1688 1721 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph .wp-chatbot-textanimation h3 {
1689 1722 padding: 0 0 0 22px !important;
1690 1723 }
1724 +
1691 1725 span.chatbotquote-info-foot {
1692 1726 font-size: 38px;
1693 1727 padding: 0px 0 0 130px;
1694 1728 position: static;
@@ -1701,8 +1735,9 @@
1701 1735 }
1702 1736 .wp-chatbot-editor-container input::-ms-input-placeholder {
1703 1737 color: #181818 !important;
1704 1738 }
1739 +
1705 1740 .wpb-search-result a {
1706 1741 display: block;
1707 1742 background: #eeeeee00 !important;
1708 1743 padding: 4px 5px;
@@ -1707,444 +1742,15 @@
1707 1742 background: #eeeeee00 !important;
1708 1743 padding: 4px 5px;
1709 1744 line-height: 20px;
1710 1745 padding-left: 0px !important;
1711 - margin-bottom: 0;
1712 - color: #222 !important;
1746 + margin-bottom: 5px;
1747 + color: #fff !important;
1713 1748 }
1714 1749 .wpb-search-result a p {
1715 1750 margin-bottom: 0;
1716 1751 }
1717 -.wpb-search-result a {
1718 - color: #222;
1719 -}
1720 1752 .wpbot_card_caption p {
1721 - color: #222;
1753 + color: #fff !important;
1722 1754 }
1723 1755
1724 1756
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 -}