1 | @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"; |
2 | /* glyphicons don't work with this version of bootstrap: @import "https://botcompany.de/1014036/raw/1025977?contentType=text/css"; */ |
3 | |
4 | @import url(https://fonts.googleapis.com/css?family=Oswald:400,300); |
5 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); |
6 | |
7 | .chatbot-choice-button { |
8 | margin-top: 3px; /* for buttons on top of each other */ |
9 | } |
10 | |
11 | .opener-box { |
12 | background-color: #ffffff; |
13 | border: 1px solid #b0b0b0; |
14 | bottom: 0; |
15 | position: fixed; |
16 | right: 35px; |
17 | height: 45px; /* opener height */ |
18 | width: 225px; /* opener width */ |
19 | font-family: 'Open Sans', sans-serif; |
20 | z-index: 10000000; |
21 | } |
22 | |
23 | .opener-box .opener-head { |
24 | background-color: #fff; |
25 | clear: both; |
26 | color: #7b7b7b; |
27 | display: inline-table; |
28 | font-size: 21px; |
29 | padding: 3px 10px; /* top/bottom, l/r padding */ |
30 | width: 100%; |
31 | font-family: Oswald; |
32 | } |
33 | |
34 | .opener-head button { |
35 | margin-top: 3px; |
36 | } |
37 | |
38 | .opener-head > .popup-head-left { |
39 | margin-top: 2px; |
40 | padding-left: 5px; |
41 | } |
42 | |
43 | .opener-head > .popup-head-left img.botImage { |
44 | width: 34px; |
45 | margin-right: 17px; /* space between opener icon and text */ |
46 | vertical-align: top; |
47 | } |
48 | |
49 | .chatOpenAction, .popup-messages-send { |
50 | cursor: pointer; |
51 | } |
52 | |
53 | .popup-box { |
54 | background-color: #ffffff; |
55 | border: 1px solid #b0b0b0; |
56 | bottom: 0; |
57 | display: none; /* initial hide */ |
58 | position: fixed; |
59 | top: 0; |
60 | /*right: 35px;*/ |
61 | left: 50%; |
62 | transform: translateX(-50%); |
63 | /*margin-left: auto; margin-right: auto;*/ |
64 | width: 400px; /* normal chat width */ |
65 | height: 520px; /* chat height - see below */ |
66 | font-family: 'Open Sans', sans-serif; |
67 | z-index: 10000001; |
68 | } |
69 | |
70 | .round.hollow { |
71 | margin: 40px 0 0; |
72 | } |
73 | .round.hollow a { |
74 | border: 2px solid #ff6701; |
75 | border-radius: 35px; |
76 | color: red; |
77 | color: #ff6701; |
78 | font-size: 23px; |
79 | padding: 10px 21px; |
80 | text-decoration: none; |
81 | font-family: 'Open Sans', sans-serif; |
82 | } |
83 | .round.hollow a:hover { |
84 | border: 2px solid #000; |
85 | border-radius: 35px; |
86 | color: red; |
87 | color: #000; |
88 | font-size: 23px; |
89 | padding: 10px 21px; |
90 | text-decoration: none; |
91 | } |
92 | .popup-box-on { |
93 | display: block !important; |
94 | } |
95 | .popup-box .popup-head { |
96 | background-color: #fff; |
97 | clear: both; |
98 | color: #7b7b7b; |
99 | display: inline-table; |
100 | font-size: 21px; |
101 | padding: 7px 10px; |
102 | width: 100%; |
103 | font-family: Oswald; |
104 | } |
105 | .bg_none i { |
106 | border: 1px solid #ff6701; |
107 | border-radius: 25px; |
108 | color: #ff6701; |
109 | font-size: 17px; |
110 | height: 33px; |
111 | line-height: 30px; |
112 | width: 33px; |
113 | } |
114 | .bg_none:hover i { |
115 | border: 1px solid #000; |
116 | border-radius: 25px; |
117 | color: #000; |
118 | font-size: 17px; |
119 | height: 33px; |
120 | line-height: 30px; |
121 | width: 33px; |
122 | } |
123 | .bg_none { |
124 | /*background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/ |
125 | background: #FADC00 none repeat scroll 0 0; |
126 | border: medium none; |
127 | } |
128 | .popup-box .popup-head .popup-head-right { |
129 | /* margin for buttons in head */ |
130 | /*margin: 11px 7px 0;*/ |
131 | margin: 6px 7px 5px; /* top lr bottom */ |
132 | } |
133 | .popup-box .popup-messages { |
134 | } |
135 | .popup-head-left img.botImage { |
136 | border: 1px solid #7b7b7b; |
137 | border-radius: 50%; |
138 | width: 44px; |
139 | } |
140 | .popup-messages-footer > textarea { |
141 | border-bottom: 1px solid #b2b2b2 !important; |
142 | height: 34px !important; |
143 | margin: 7px; |
144 | padding: 5px !important; |
145 | border: medium none; |
146 | /*width: 97% !important;*/ /* width without send icon */ |
147 | width: 90% !important; /* width with send icon */ |
148 | } |
149 | |
150 | @media screen and (max-width: 590px) { |
151 | .popup-box { |
152 | width: 320px; /* chat width for small screens */ |
153 | } |
154 | .popup-messages-footer > textarea { |
155 | width: 88% !important; |
156 | } |
157 | } |
158 | |
159 | |
160 | .popup-messages-send { |
161 | float: right; |
162 | margin-top: 7px; |
163 | height: 34px !important; |
164 | vertical-align: middle; |
165 | /*padding-right: 5px;*/ |
166 | } |
167 | |
168 | .popup-messages-send svg { |
169 | margin-top: 7px; |
170 | margin-right: 5px; |
171 | display: block; |
172 | } |
173 | |
174 | .popup-messages-footer { |
175 | background: #fff none repeat scroll 0 0; |
176 | bottom: 0; |
177 | position: absolute; |
178 | width: 100%; |
179 | } |
180 | .popup-messages-footer .btn-footer { |
181 | overflow: hidden; |
182 | /*padding: 2px 5px 10px 6px;*/ |
183 | width: 100%; |
184 | } |
185 | .simple_round { |
186 | background: #d1d1d1 none repeat scroll 0 0; |
187 | border-radius: 50%; |
188 | color: #4b4b4b !important; |
189 | height: 21px; |
190 | padding: 0 0 0 1px; |
191 | width: 21px; |
192 | } |
193 | |
194 | .popup-box .popup-messages { |
195 | background-color: #F5F5F5; /* general chat box background */ |
196 | height: 406px; /* chat height minus 114 */ |
197 | overflow: auto; |
198 | } |
199 | .direct-chat-messages { |
200 | overflow: auto; |
201 | padding: 10px; |
202 | transform: translate(0px, 0px); |
203 | |
204 | } |
205 | .popup-messages .chat-box-single-line { |
206 | border-bottom: 1px solid #a4c6b5; |
207 | height: 12px; |
208 | margin: 7px 0 20px; |
209 | position: relative; |
210 | text-align: center; |
211 | } |
212 | .popup-messages abbr.timestamp { |
213 | background: #FADC00 none repeat scroll 0 0; |
214 | color: #fff; |
215 | padding: 0 11px; |
216 | } |
217 | |
218 | .popup-head-right .btn-group { |
219 | display: inline-flex; |
220 | margin: 0 8px 0 0; |
221 | /*margin: 0 8px 24px 0;*/ /* top right bottom left - not working */ |
222 | vertical-align: top !important; |
223 | } |
224 | .chat-header-button { |
225 | background: transparent none repeat scroll 0 0; |
226 | border: 1px solid #636364; |
227 | border-radius: 50%; |
228 | font-size: 14px; |
229 | height: 30px; |
230 | width: 30px; |
231 | } |
232 | .popup-head-right .btn-group .dropdown-menu { |
233 | border: medium none; |
234 | min-width: 122px; |
235 | padding: 0; |
236 | } |
237 | .popup-head-right .btn-group .dropdown-menu li a { |
238 | font-size: 12px; |
239 | padding: 3px 10px; |
240 | color: #303030; |
241 | } |
242 | |
243 | .popup-messages abbr.timestamp { |
244 | background: #FADC00 none repeat scroll 0 0; |
245 | color: #fff; |
246 | padding: 0 11px; |
247 | } |
248 | .popup-messages .chat-box-single-line { |
249 | border-bottom: 1px solid #a4c6b5; |
250 | height: 12px; |
251 | margin: 7px 0 20px; |
252 | position: relative; |
253 | text-align: center; |
254 | } |
255 | .popup-messages .direct-chat-messages { |
256 | height: auto; |
257 | } |
258 | .popup-messages .direct-chat-text { |
259 | background: #dfece7 none repeat scroll 0 0; |
260 | border: 1px solid #dfece7; |
261 | border-radius: 2px; |
262 | color: #1f2121; |
263 | /*clear: both;*/ /* XXX */ |
264 | } |
265 | |
266 | .popup-messages .direct-chat-text.bot-utterance { |
267 | text-align: right; |
268 | } |
269 | |
270 | .popup-messages .direct-chat-buttons { |
271 | text-align: center; |
272 | background: #dfece7 none repeat scroll 0 0; |
273 | border: 1px solid #dfece7; |
274 | border-radius: 2px; |
275 | color: #1f2121; |
276 | } |
277 | |
278 | .direct-chat-timestamp { |
279 | color: black; |
280 | opacity: 0.6; |
281 | } |
282 | |
283 | .popup-messages .direct-chat-name { |
284 | font-size: 15px; |
285 | font-weight: 600; |
286 | margin: 0 0 0 49px !important; |
287 | color: #000; /* bot / user name */ |
288 | opacity: 0.9; |
289 | } |
290 | .popup-messages .direct-chat-info { |
291 | display: block; |
292 | font-size: 12px; |
293 | margin-bottom: 0; |
294 | clear: both; /* XXX */ |
295 | } |
296 | .popup-messages .big-round { |
297 | margin: -9px 0 0 !important; |
298 | } |
299 | .popup-messages .direct-chat-img { |
300 | border: 1px solid #fff; |
301 | background: #FADC00 none repeat scroll 0 0; |
302 | border-radius: 50%; |
303 | height: 40px; |
304 | /*margin: -21px 0 0;*/ |
305 | /*margin: -21px 0 20px;*/ |
306 | margin: 0; |
307 | width: 40px; |
308 | /*float: left;*/ |
309 | position: absolute; |
310 | } |
311 | .direct-chat-reply-name { |
312 | color: #fff; |
313 | font-size: 15px; |
314 | margin: 0 0 0 10px; |
315 | opacity: 0.9; |
316 | } |
317 | |
318 | .direct-chat-img-reply-small |
319 | { |
320 | border: 1px solid #fff; |
321 | border-radius: 50%; |
322 | float: left; |
323 | height: 20px; |
324 | margin: 0 8px; |
325 | width: 20px; |
326 | background: #FADC00; |
327 | } |
328 | |
329 | .popup-messages .direct-chat-msg { |
330 | margin-bottom: 10px; |
331 | position: relative; |
332 | } |
333 | |
334 | .popup-messages .doted-border::after { |
335 | background: transparent none repeat scroll 0 0 !important; |
336 | border-right: 2px dotted #fff !important; |
337 | bottom: 0; |
338 | content: ""; |
339 | left: 17px; |
340 | margin: 0; |
341 | position: absolute; |
342 | top: 0; |
343 | width: 2px; |
344 | display: inline; |
345 | z-index: -2; |
346 | } |
347 | |
348 | .popup-messages .direct-chat-msg::after { |
349 | background: #fff none repeat scroll 0 0; |
350 | border-right: medium none; |
351 | bottom: 0; |
352 | content: ""; |
353 | left: 17px; |
354 | margin: 0; |
355 | position: absolute; |
356 | top: 0; |
357 | width: 2px; |
358 | display: inline; |
359 | z-index: -2; |
360 | } |
361 | |
362 | .direct-chat-text::after, .direct-chat-text::before, .direct-chat-buttons::after, .direct-chat-buttons::before { |
363 | border-color: transparent #dfece7 transparent transparent; |
364 | |
365 | -moz-border-bottom-colors: none; |
366 | -moz-border-left-colors: none; |
367 | -moz-border-right-colors: none; |
368 | -moz-border-top-colors: none; |
369 | border-color: transparent #d2d6de transparent transparent; |
370 | border-image: none; |
371 | border-style: solid; |
372 | border-width: medium; |
373 | content: " "; |
374 | height: 0; |
375 | pointer-events: none; |
376 | position: absolute; |
377 | right: 100%; |
378 | top: 15px; |
379 | width: 0; |
380 | } |
381 | .direct-chat-text::after, .direct-chat-buttons::after { |
382 | border-width: 5px; |
383 | margin-top: -5px; |
384 | } |
385 | .popup-messages .direct-chat-text, .popup-messages .direct-chat-buttons { |
386 | background: #dfece7 none repeat scroll 0 0; |
387 | border: 1px solid #dfece7; |
388 | border-radius: 2px; |
389 | color: #1f2121; |
390 | } |
391 | .direct-chat-text, .direct-chat-buttons { |
392 | background: #d2d6de none repeat scroll 0 0; |
393 | border: 1px solid #d2d6de; |
394 | border-radius: 5px; |
395 | color: #444; |
396 | margin: 5px 0 0 50px; /* 50px = margin of text on the left */ |
397 | /*margin: 5px 0 0 5px;*/ |
398 | padding: 5px 10px; |
399 | position: relative; |
400 | } |
401 | |
402 | #actionMsg { |
403 | position: absolute; |
404 | z-index: 9999; |
405 | left: 0; |
406 | bottom: 0; |
407 | height: 20px; |
408 | /*width: 300px;*/ |
409 | width: auto; |
410 | |
411 | background-color: white; |
412 | display: none; |
413 | } |
Began life as a copy of #1026220
Travelled to 7 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt, xrpafgyirdlv
No comments. add comment
Snippet ID: | #1026266 |
Snippet name: | CSS for Imager chat bot & cruddie.site |
Eternal ID of this version: | #1026266/12 |
Text MD5: | 46d9e0d49e02e20ff20fa438c30bfbae |
Author: | stefan |
Category: | javax / web chat bots |
Type: | Document |
Public (visible to everyone): | Yes |
Archived (hidden from active list): | No |
Created/modified: | 2021-01-18 23:12:54 |
Source code size: | 9762 bytes / 413 lines |
Pitched / IR pitched: | No / No |
Views / Downloads: | 211 / 1728 |
Version history: | 11 change(s) |
Referenced in: | [show references] |