Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

417
LINES

< > BotCompany Repo | #1026220 // CSS for BotCompany.de + IPTV bots

Document

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

Author comment

Began life as a copy of #1025978

download  show line numbers   

Travelled to 6 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt

No comments. add comment

Snippet ID: #1026220
Snippet name: CSS for BotCompany.de + IPTV bots
Eternal ID of this version: #1026220/5
Text MD5: 0cd75fe5881561eb5f4dcc33d65395e0
Author: stefan
Category: javax / web chat bots
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2019-12-09 14:18:07
Source code size: 9732 bytes / 417 lines
Pitched / IR pitched: No / No
Views / Downloads: 217 / 358
Version history: 4 change(s)
Referenced in: [show references]