CSS for Imager chat bot & cruddie.site [1026266]

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css";
/* glyphicons don't work with this version of bootstrap: @import "https://botcompany.de/1014036/raw/1025977?contentType=text/css"; */

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.chatbot-choice-button {
  margin-top: 3px; /* for buttons on top of each other */
}

.opener-box {
    background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    position: fixed;
    right: 35px;
    height: 45px; /* opener height */
    width: 225px; /* opener width */
    font-family: 'Open Sans', sans-serif;
    z-index: 10000000;
}

.opener-box .opener-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 3px 10px; /* top/bottom, l/r padding */
    width: 100%;
    font-family: Oswald;
}

.opener-head button {
  margin-top: 3px;
}

.opener-head > .popup-head-left {
  margin-top: 2px;
  padding-left: 5px;
}

.opener-head > .popup-head-left img.botImage {
  width: 34px;
  margin-right: 17px; /* space between opener icon and text */
  vertical-align: top;
}

.chatOpenAction, .popup-messages-send {
  cursor: pointer;
}

.popup-box {
    background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none; /* initial hide */
    position: fixed;
    top: 0;
    /*right: 35px;*/
    left: 50%;
    transform: translateX(-50%);
    /*margin-left: auto; margin-right: auto;*/
    width: 400px; /* normal chat width */
    height: 520px; /* chat height - see below */
    font-family: 'Open Sans', sans-serif;
    z-index: 10000001;
}

.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
    font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    /*background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/
    background: #FADC00 none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
  /* margin for buttons in head */
  /*margin: 11px 7px 0;*/
  margin: 6px 7px 5px; /* top lr bottom */
}
.popup-box .popup-messages {
}
.popup-head-left img.botImage {
    border: 1px solid #7b7b7b;
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 34px !important;
    margin: 7px;
    padding: 5px !important;
    border: medium none;
    /*width: 97% !important;*/ /* width without send icon */
    width: 90% !important; /* width with send icon */
}

@media screen and (max-width: 590px) {
  .popup-box {
    width: 320px; /* chat width for small screens */
  }
  .popup-messages-footer > textarea {
    width: 88% !important;
  }
}


.popup-messages-send {
  float: right;
  margin-top: 7px;
  height: 34px !important;
  vertical-align: middle;
  /*padding-right: 5px;*/
}

.popup-messages-send svg {
  margin-top: 7px;
  margin-right: 5px;
  display: block;
}

.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    /*padding: 2px 5px 10px 6px;*/
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background-color: #F5F5F5; /* general chat box background */
    height: 406px; /* chat height minus 114 */
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);
    
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #FADC00 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
  display: inline-flex;
  margin: 0 8px 0 0;
  /*margin: 0 8px 24px 0;*/ /* top right bottom left - not working */
  vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
  padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
  color: #303030;
}

.popup-messages abbr.timestamp {
    background: #FADC00 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
    /*clear: both;*/ /* XXX */
}

.popup-messages .direct-chat-text.bot-utterance {
    text-align: right;
}

.popup-messages .direct-chat-buttons {
  text-align: center;
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.direct-chat-timestamp {
    color: black;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0 49px !important;
  color: #000; /* bot / user name */
  opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
    clear: both; /* XXX */
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    border: 1px solid #fff;
    background: #FADC00 none repeat scroll 0 0;
    border-radius: 50%;
    height: 40px;
    /*margin: -21px 0 0;*/
    /*margin: -21px 0 20px;*/
    margin: 0;
    width: 40px;
    /*float: left;*/
    position: absolute;
}
.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
    background: #FADC00;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
  background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
  bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
   display: inline;
    z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    background: #fff none repeat scroll 0 0;
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
   display: inline;
    z-index: -2;
}

.direct-chat-text::after, .direct-chat-text::before, .direct-chat-buttons::after, .direct-chat-buttons::before {
    border-color: transparent #dfece7 transparent transparent;
    
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after, .direct-chat-buttons::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text, .popup-messages .direct-chat-buttons {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text, .direct-chat-buttons {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px; /* 50px = margin of text on the left */
    /*margin: 5px 0 0 5px;*/
    padding: 5px 10px;
    position: relative;
}

#actionMsg {
    position: absolute;
    z-index: 9999;
    left: 0;
    bottom: 0;
    height: 20px;
    /*width: 300px;*/
    width: auto;
    
    background-color: white;
    display: none;
}

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

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:	153 / 1708
Version history:	11 change(s)
Referenced in:	[show references]

< > BotCompany Repo | #1026266 // CSS for Imager chat bot & cruddie.site

Document

Author comment

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	}