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