| @@ -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; |
| @@ -1880,8 +1889,9 @@ | ||
| 1880 | 1889 | } |
| 1881 | 1890 | |
| 1882 | 1891 | .qcld-like-dislike-icon { |
| 1883 | 1892 | padding: 6px 0 0 0; |
| 1893 | + margin-top: 20px; | |
| 1884 | 1894 | } |
| 1885 | 1895 | |
| 1886 | 1896 | |
| 1887 | 1897 | |
| @@ -1962,8 +1972,119 @@ | ||
| 1962 | 1972 | padding: 0 5px 0 0; |
| 1963 | 1973 | height: 15px; |
| 1964 | 1974 | } |
| 1965 | 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 | + | |
| 1966 | 2087 | @media screen and (min-height: 1281px) { |
| 1967 | 2088 | div#wp-chatbot-chat-container .slimScrollDiv { |
| 1968 | 2089 | height: 100vh !important; |
| 1969 | 2090 | max-height: 680px !important; |
| @@ -2020,5 +2141,10 @@ | ||
| 2020 | 2141 | right: 30px; |
| 2021 | 2142 | bottom: 30px; |
| 2022 | 2143 | position: relative; |
| 2023 | 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 | + } | |
| 2024 | 2150 | } |
