PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 5.4.2
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v5.4.2
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 +56 -493 8.7.45.4.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*/
@@ -1370,11 +1387,9 @@
1370 1387 background-position: 0 -80px;
1371 1388 border: none !important;
1372 1389 box-shadow: none !important;
1373 1390 }
1374 -.swal2-container {
1375 - z-index: 99999999;
1376 -}
1391 +
1377 1392 .facebook-messenger {
1378 1393 background-position: 0 -80px;
1379 1394 }
1380 1395
@@ -1560,12 +1575,11 @@
1560 1575 }
1561 1576
1562 1577
1563 1578 @media screen and (max-width: 767px) {
1564 - body div#wp-chatbot-ball-container {
1565 - max-width: 98%;
1566 - margin: 0 auto 3px auto;
1567 - }
1579 + div#wp-chatbot-ball-container {
1580 + max-width: 99%;
1581 + }
1568 1582 .wp-chatbot-header {
1569 1583 padding-left: 50px;
1570 1584 padding-right: 50px;
1571 1585 }
@@ -1572,9 +1586,14 @@
1572 1586
1573 1587 .wp-chatbot-board-container{
1574 1588 width: 310px;
1575 1589 }
1590 + .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
1591 + width: 100%;
1592 + }
1576 1593
1594 +
1595 +
1577 1596 #wp-chatbot-mobile-close {
1578 1597 position: absolute;
1579 1598 right: 12px;
1580 1599 top: 9px;
@@ -1634,16 +1653,29 @@
1634 1653 .wp-chatbot-notification-container {
1635 1654 width: 250px;
1636 1655 padding-top: 55px;
1637 1656 }
1657 + /*#wp-chatbot-desktop-close{
1658 + right: 8px !important;
1659 + top: 8px !important;
1660 + }*/
1661 + /*.wp-chatbot-mobile-full-screen #wp-chatbot-desktop-close{
1662 + display:none !important;
1663 + }*/
1638 1664 .wp-chatbot-mobile-full-screen .wp-chatbot-header{
1639 1665 padding-top: 15px !important;
1640 1666 }
1641 1667 }
1668 +.wpb-search-result{
1669 +
1670 +}
1671 +.wpb-search-result p{
1672 +
1673 +}
1642 1674 .wpb-search-result a{
1643 1675 display: block;
1644 1676 background: #fff;
1645 - margin-bottom: 0;
1677 + margin-bottom: 7px;
1646 1678 padding: 5px;
1647 1679 }
1648 1680 @media screen and (-webkit-min-device-pixel-ratio:0) {
1649 1681 .qcwp-chatbot-search-article input:focus,
@@ -1656,9 +1688,13 @@
1656 1688 font-size: 14px;
1657 1689 }
1658 1690
1659 1691 }
1692 +
1693 +
1660 1694 /*modal form*/
1695 +
1696 +
1661 1697 .plugin-card{
1662 1698 width: 77% !important;
1663 1699 height: 186px;
1664 1700 }
@@ -1674,477 +1710,4 @@
1674 1710 }
1675 1711 .plugin-card {
1676 1712 width: 100% !important;
1677 1713 }
1678 - span.chatbotquote-info {
1679 - font-size: 38px;
1680 - padding: 20px 0 0 0;
1681 - position: absolute;
1682 - left: 0;
1683 - top: 32px;
1684 -}
1685 -.wp-chatbot-textanimation {
1686 - position: relative;
1687 -}
1688 -ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph .wp-chatbot-textanimation h3 {
1689 - padding: 0 0 0 22px !important;
1690 -}
1691 -span.chatbotquote-info-foot {
1692 - font-size: 38px;
1693 - padding: 0px 0 0 130px;
1694 - position: static;
1695 - bottom: -20px;
1696 - display: grid;
1697 - line-height: 0;
1698 -}
1699 -wp-chatbot-editor-container input::placeholder {
1700 - color: #181818 !important;
1701 -}
1702 -.wp-chatbot-editor-container input::-ms-input-placeholder {
1703 - color: #181818 !important;
1704 -}
1705 -.wpb-search-result a {
1706 - display: block;
1707 - background: #eeeeee00 !important;
1708 - padding: 4px 5px;
1709 - line-height: 20px;
1710 - padding-left: 0px !important;
1711 - margin-bottom: 0;
1712 - color: #222 !important;
1713 -}
1714 -.wpb-search-result a p {
1715 - margin-bottom: 0;
1716 -}
1717 -.wpb-search-result a {
1718 - color: #222;
1719 -}
1720 -.wpbot_card_caption p {
1721 - color: #222;
1722 -}
1723 -
1724 -
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 -}