└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Bot-Css- 2 | 3 | 4 | 5 | 6 | 7 | 8 | /* This CSS rule sets the default font size of the entire document */ 9 | html { 10 | font-size: 16px; 11 | } 12 | 13 | /* These CSS rules sets the text direction of the paragraph (RTL or LTR) */ 14 | p, 15 | .bpw-from-bot > div, 16 | #input-message { 17 | direction: ltr; 18 | } 19 | 20 | /* This rule changes the color of the text in the input message */ 21 | #input-message { 22 | color: #000000; 23 | } 24 | 25 | /* Changes the color of the new message indicator */ 26 | .bpw-new-messages-indicator { 27 | background-color: #f5f5f5; 28 | color: #ffffff; 29 | } 30 | 31 | .bpw-header-container { 32 | margin: 10px; 33 | background: linear-gradient(45deg, #600000, black, #0b111e, #0b111e, black, #600000); /* Adjust the angle and colors as needed */ 34 | border-radius: 10px; 35 | position: relative; 36 | overflow: hidden; 37 | border: 1px; 38 | border-radius: 10px; 39 | color: #ffffff; 40 | } 41 | 42 | .bpw-header-name{ 43 | color: #ffffff; 44 | } 45 | 46 | /* Styling for the typing bubble */ 47 | .bpw-typing-bubble { 48 | background: #000000; 49 | } 50 | 51 | /* Styling for the chat bubble content */ 52 | .bpw-chat-bubble-content { 53 | background-color: #f5f5f5; 54 | border-radius: 3px; 55 | border: 1px transparent; 56 | } 57 | 58 | /* Styling for the date container, header name, and header subtitle */ 59 | .bpw-date-container, 60 | .bpw-header-name, 61 | .bpw-header-subtitle { 62 | color: #ffffff; 63 | } 64 | 65 | /* Styling for the layout of the chat bubble. Width, height, border, position and radius of the chat bubble */ 66 | .bpw-layout { 67 | width: 360px !important; 68 | height: 60vh; 69 | border-radius: 10px; 70 | right: 50px; 71 | bottom: 5px; 72 | border: 2px; 73 | } 74 | /* Responsive design rules for devices with width less than or equal to 767px */ 75 | @media screen and (max-device-width: 767px) { 76 | .bpw-layout { 77 | width: 80% !important; 78 | height: 60%; 79 | right: 11%; 80 | bottom: 200px; 81 | border-radius: 2; 82 | } 83 | } 84 | 85 | 86 | /* Changes the fill color of the header icons to white */ 87 | .bpw-header-icon, 88 | .bpw-header-icon svg, 89 | .bpw-header-icon svg path { 90 | fill: #ffffff !important; 91 | } 92 | 93 | /* Changes the color of the placeholder text in the input message */ 94 | #input-message::placeholder { 95 | color: rgba(0,0,0,.30); 96 | } 97 | 98 | .bpw-composer textarea{ 99 | outline: none !important; 100 | border: 1px solid rgba(0,0,0,.15); 101 | } 102 | .bpw-composer textarea:focus{ 103 | outline: none !important; 104 | border: 1px solid rgba(0,0,0,.30); 105 | } 106 | 107 | /* Styling for the keyboard single choice option */ 108 | .bpw-keyboard-single-choice { 109 | background-color: #ffffff; 110 | border: none; 111 | } 112 | 113 | /* Styling for the buttons in the chat interface */ 114 | .bpw-button, 115 | .bpw-button-alt { 116 | background-color: #dcdcdc; 117 | color: #000000; 118 | border-radius: 10px; 119 | border: none; 120 | } 121 | 122 | 123 | /* Styling for hover effect on the buttons in the chat interface */ 124 | .bpw-button:hover, 125 | .bpw-button-alt:hover { 126 | background-color: #f5f5f5; 127 | } 128 | 129 | 130 | /* Styling for hyperlinks in the chat interface */ 131 | a { 132 | color: #ffffff; 133 | text-decoration: underline; 134 | } 135 | 136 | /* Styling for the chat container, including color, scrollbar width and color, and border */ 137 | .bpw-chat-container { 138 | background: linear-gradient(45deg, black, #0b111e, #0b111e, black, #600000); /* Adjust colors and direction as needed */ 139 | scrollbar-width: thin; 140 | scrollbar-color: #f5f5f5 #0b111e; 141 | border: none; 142 | } 143 | 144 | 145 | /* Styling for the chat bubble content when it's from the bot */ 146 | .bpw-from-bot .bpw-chat-bubble .bpw-chat-bubble-content { 147 | background-color: #f5f5f5; 148 | color: #000000; 149 | } 150 | 151 | .bpw-from-user .bpw-chat-bubble .bpw-chat-bubble-content { 152 | background: linear-gradient(45deg, #600000, black, #0b111e, #0b111e, black, #600000); /* Adjust the angle and colors as needed */ 153 | color: #ffffff; 154 | } 155 | 156 | /* Styling for the composer section of the chat interface */ 157 | .bpw-composer { 158 | background: linear-gradient(0deg, #600000, #f2f3f4, #f2f3f4, #f2f3f4, #0b111e); 159 | border-top: none; 160 | } 161 | 162 | 163 | /* Styling for the scrollbar in the chat container */ 164 | .bpw-chat-container::-webkit-scrollbar, 165 | .bpw-chat-container::-moz-scrollbar { 166 | width: 10px; 167 | background-color: #ffffff; 168 | border: none; 169 | } 170 | 171 | /* Styling for the avatar of the bot */ 172 | .bpw-bot-avatar img, 173 | .bpw-bot-avatar svg { 174 | background: #000000; 175 | border: 3px solid #ffffff; 176 | } 177 | 178 | /* Styling for the general scrollbar in the web page */ 179 | ::-webkit-scrollbar { 180 | width: 0.5rem; 181 | } 182 | 183 | /* Styling for the track of the general scrollbar and the chat container scrollbar */ 184 | ::-webkit-scrollbar-track, 185 | .bpw-chat-container::-webkit-scrollbar-track, 186 | .bpw-chat-container::-moz-scrollbar-track { 187 | background-color: transparent; 188 | } 189 | 190 | /* Styling for the thumb of the general scrollbar and the chat container scrollbar */ 191 | ::-webkit-scrollbar-thumb, 192 | .bpw-chat-container::-webkit-scrollbar-thumb, 193 | .bpw-chat-container::-moz-scrollbar-thumb { 194 | background-color: #ffffff; 195 | border-radius: 1rem; 196 | border: 0.5rem solid transparent; 197 | } 198 | 199 | .bpw-floating-button i svg path { 200 | fill: linear-gradient(135deg, #600000, black, #0b111e, #0b111e, black, #600000); /* Adjust the angle and colors as needed */ 201 | } 202 | 203 | 204 | 205 | /* Styling for the 'powered by' section of the chat interface */ 206 | .bpw-powered { 207 | text-align: center; 208 | padding: 10px; 209 | color: #000000; 210 | background: #ffffff; 211 | font-size: 14px; 212 | border-bottom-right-radius: 10px; 213 | border-bottom-left-radius: 10px; 214 | } 215 | 216 | /* Styling for the hyperlinks in the 'powered by' section of the chat interface */ 217 | .bpw-powered a { 218 | color: #000000; 219 | text-decoration: underline; 220 | } 221 | 222 | /* Styling for hover effect on the hyperlinks in the 'powered by' section of the chat interface */ 223 | .bpw-powered a:hover { 224 | text-decoration: underline; 225 | } 226 | 227 | .bpw-send-button{ 228 | background: #6675fa; 229 | } 230 | 231 | 232 | /* Change Bot Widget Icon */ 233 | 234 | .bpw-widget-btn{ 235 | border-radius: 50%; 236 | background:#600000; 237 | } 238 | 239 | 240 | .bpw-floating-button { 241 | position: fixed; 242 | bottom: 20px; 243 | right: 20px; 244 | width: 50px; 245 | height: 50px; 246 | border-radius: 50%; 247 | background-color: #0a0c10; 248 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 249 | cursor: pointer; 250 | z-index: 9999; 251 | } 252 | 253 | .bpw-floating-button::before { 254 | content: ""; 255 | background: url("https://www.livehelp100.com/wp-content/uploads/2021/11/solution-security.png"); 256 | background-repeat: no-repeat; 257 | background-position: center; 258 | background-size: contain; 259 | height: 30px; /* Adjust as needed */ 260 | width: 30px; /* Adjust as needed */ 261 | position: absolute; 262 | top: 50%; 263 | left: 50%; 264 | transform: translate(-50%, -50%); 265 | } 266 | 267 | /* Hover effect */ 268 | .bpw-floating-button:hover { 269 | background-color: #0056b3; 270 | } 271 | 272 | 273 | 274 | .bpw-floating-button { 275 | box-shadow: none !important; 276 | } 277 | 278 | 279 | // .bpw-floating-button > i { 280 | // display: none; 281 | // } 282 | --------------------------------------------------------------------------------