1 | @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"; |
2 | |
3 | @import url(https://fonts.googleapis.com/css?family=Oswald:400,300); |
4 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); |
5 | |
6 | .popup-box {
|
7 | background-color: #ffffff; |
8 | border: 1px solid #b0b0b0; |
9 | bottom: 0; |
10 | display: none; /* initial hide */ |
11 | height: 415px; |
12 | position: fixed; |
13 | right: 70px; |
14 | width: 300px; |
15 | /*margin: auto;*/ |
16 | font-family: 'Open Sans', sans-serif; |
17 | } |
18 | .round.hollow {
|
19 | margin: 40px 0 0; |
20 | } |
21 | .round.hollow a {
|
22 | border: 2px solid #ff6701; |
23 | border-radius: 35px; |
24 | color: red; |
25 | color: #ff6701; |
26 | font-size: 23px; |
27 | padding: 10px 21px; |
28 | text-decoration: none; |
29 | font-family: 'Open Sans', sans-serif; |
30 | } |
31 | .round.hollow a:hover {
|
32 | border: 2px solid #000; |
33 | border-radius: 35px; |
34 | color: red; |
35 | color: #000; |
36 | font-size: 23px; |
37 | padding: 10px 21px; |
38 | text-decoration: none; |
39 | } |
40 | .popup-box-on {
|
41 | display: block !important; |
42 | } |
43 | .popup-box .popup-head {
|
44 | background-color: #fff; |
45 | clear: both; |
46 | color: #7b7b7b; |
47 | display: inline-table; |
48 | font-size: 21px; |
49 | padding: 7px 10px; |
50 | width: 100%; |
51 | font-family: Oswald; |
52 | } |
53 | .bg_none i {
|
54 | border: 1px solid #ff6701; |
55 | border-radius: 25px; |
56 | color: #ff6701; |
57 | font-size: 17px; |
58 | height: 33px; |
59 | line-height: 30px; |
60 | width: 33px; |
61 | } |
62 | .bg_none:hover i {
|
63 | border: 1px solid #000; |
64 | border-radius: 25px; |
65 | color: #000; |
66 | font-size: 17px; |
67 | height: 33px; |
68 | line-height: 30px; |
69 | width: 33px; |
70 | } |
71 | .bg_none {
|
72 | /*background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/ |
73 | background: #FADC00 none repeat scroll 0 0; |
74 | border: medium none; |
75 | } |
76 | .popup-box .popup-head .popup-head-right {
|
77 | margin: 11px 7px 0; |
78 | } |
79 | .popup-box .popup-messages {
|
80 | } |
81 | .popup-head-left img {
|
82 | border: 1px solid #7b7b7b; |
83 | border-radius: 50%; |
84 | width: 44px; |
85 | } |
86 | .popup-messages-footer > textarea {
|
87 | border-bottom: 1px solid #b2b2b2 !important; |
88 | height: 34px !important; |
89 | margin: 7px; |
90 | padding: 5px !important; |
91 | border: medium none; |
92 | width: 95% !important; |
93 | } |
94 | .popup-messages-footer {
|
95 | background: #fff none repeat scroll 0 0; |
96 | bottom: 0; |
97 | position: absolute; |
98 | width: 100%; |
99 | } |
100 | .popup-messages-footer .btn-footer {
|
101 | overflow: hidden; |
102 | padding: 2px 5px 10px 6px; |
103 | width: 100%; |
104 | } |
105 | .simple_round {
|
106 | background: #d1d1d1 none repeat scroll 0 0; |
107 | border-radius: 50%; |
108 | color: #4b4b4b !important; |
109 | height: 21px; |
110 | padding: 0 0 0 1px; |
111 | width: 21px; |
112 | } |
113 | |
114 | .popup-box .popup-messages {
|
115 | background: #FADC00 none repeat scroll 0 0; |
116 | /*background: #3f9684 none repeat scroll 0 0;*/ |
117 | height: 275px; |
118 | overflow: auto; |
119 | } |
120 | .direct-chat-messages {
|
121 | overflow: auto; |
122 | padding: 10px; |
123 | transform: translate(0px, 0px); |
124 | |
125 | } |
126 | .popup-messages .chat-box-single-line {
|
127 | border-bottom: 1px solid #a4c6b5; |
128 | height: 12px; |
129 | margin: 7px 0 20px; |
130 | position: relative; |
131 | text-align: center; |
132 | } |
133 | .popup-messages abbr.timestamp {
|
134 | background: #FADC00 none repeat scroll 0 0; |
135 | color: #fff; |
136 | padding: 0 11px; |
137 | } |
138 | |
139 | .popup-head-right .btn-group {
|
140 | display: inline-flex; |
141 | margin: 0 8px 0 0; |
142 | vertical-align: top !important; |
143 | } |
144 | .chat-header-button {
|
145 | background: transparent none repeat scroll 0 0; |
146 | border: 1px solid #636364; |
147 | border-radius: 50%; |
148 | font-size: 14px; |
149 | height: 30px; |
150 | width: 30px; |
151 | } |
152 | .popup-head-right .btn-group .dropdown-menu {
|
153 | border: medium none; |
154 | min-width: 122px; |
155 | padding: 0; |
156 | } |
157 | .popup-head-right .btn-group .dropdown-menu li a {
|
158 | font-size: 12px; |
159 | padding: 3px 10px; |
160 | color: #303030; |
161 | } |
162 | |
163 | .popup-messages abbr.timestamp {
|
164 | background: #FADC00 none repeat scroll 0 0; |
165 | color: #fff; |
166 | padding: 0 11px; |
167 | } |
168 | .popup-messages .chat-box-single-line {
|
169 | border-bottom: 1px solid #a4c6b5; |
170 | height: 12px; |
171 | margin: 7px 0 20px; |
172 | position: relative; |
173 | text-align: center; |
174 | } |
175 | .popup-messages .direct-chat-messages {
|
176 | height: auto; |
177 | } |
178 | .popup-messages .direct-chat-text {
|
179 | background: #dfece7 none repeat scroll 0 0; |
180 | border: 1px solid #dfece7; |
181 | border-radius: 2px; |
182 | color: #1f2121; |
183 | } |
184 | |
185 | .popup-messages .direct-chat-buttons {
|
186 | text-align: center; |
187 | background: #dfece7 none repeat scroll 0 0; |
188 | border: 1px solid #dfece7; |
189 | border-radius: 2px; |
190 | color: #1f2121; |
191 | } |
192 | |
193 | .popup-messages .direct-chat-timestamp {
|
194 | color: #fff; |
195 | opacity: 0.6; |
196 | } |
197 | |
198 | .popup-messages .direct-chat-name {
|
199 | font-size: 15px; |
200 | font-weight: 600; |
201 | margin: 0 0 0 49px !important; |
202 | color: #fff; |
203 | opacity: 0.9; |
204 | } |
205 | .popup-messages .direct-chat-info {
|
206 | display: block; |
207 | font-size: 12px; |
208 | margin-bottom: 0; |
209 | } |
210 | .popup-messages .big-round {
|
211 | margin: -9px 0 0 !important; |
212 | } |
213 | .popup-messages .direct-chat-img {
|
214 | border: 1px solid #fff; |
215 | background: #FADC00 none repeat scroll 0 0; |
216 | border-radius: 50%; |
217 | float: left; |
218 | height: 40px; |
219 | margin: -21px 0 0; |
220 | width: 40px; |
221 | } |
222 | .direct-chat-reply-name {
|
223 | color: #fff; |
224 | font-size: 15px; |
225 | margin: 0 0 0 10px; |
226 | opacity: 0.9; |
227 | } |
228 | |
229 | .direct-chat-img-reply-small |
230 | {
|
231 | border: 1px solid #fff; |
232 | border-radius: 50%; |
233 | float: left; |
234 | height: 20px; |
235 | margin: 0 8px; |
236 | width: 20px; |
237 | background: #FADC00; |
238 | } |
239 | |
240 | .popup-messages .direct-chat-msg {
|
241 | margin-bottom: 10px; |
242 | position: relative; |
243 | } |
244 | |
245 | .popup-messages .doted-border::after {
|
246 | background: transparent none repeat scroll 0 0 !important; |
247 | border-right: 2px dotted #fff !important; |
248 | bottom: 0; |
249 | content: ""; |
250 | left: 17px; |
251 | margin: 0; |
252 | position: absolute; |
253 | top: 0; |
254 | width: 2px; |
255 | display: inline; |
256 | z-index: -2; |
257 | } |
258 | |
259 | .popup-messages .direct-chat-msg::after {
|
260 | background: #fff none repeat scroll 0 0; |
261 | border-right: medium none; |
262 | bottom: 0; |
263 | content: ""; |
264 | left: 17px; |
265 | margin: 0; |
266 | position: absolute; |
267 | top: 0; |
268 | width: 2px; |
269 | display: inline; |
270 | z-index: -2; |
271 | } |
272 | |
273 | .direct-chat-text::after, .direct-chat-text::before, .direct-chat-buttons::after, .direct-chat-buttons::before {
|
274 | border-color: transparent #dfece7 transparent transparent; |
275 | |
276 | -moz-border-bottom-colors: none; |
277 | -moz-border-left-colors: none; |
278 | -moz-border-right-colors: none; |
279 | -moz-border-top-colors: none; |
280 | border-color: transparent #d2d6de transparent transparent; |
281 | border-image: none; |
282 | border-style: solid; |
283 | border-width: medium; |
284 | content: " "; |
285 | height: 0; |
286 | pointer-events: none; |
287 | position: absolute; |
288 | right: 100%; |
289 | top: 15px; |
290 | width: 0; |
291 | } |
292 | .direct-chat-text::after, .direct-chat-buttons::after {
|
293 | border-width: 5px; |
294 | margin-top: -5px; |
295 | } |
296 | .popup-messages .direct-chat-text, .popup-messages .direct-chat-buttons {
|
297 | background: #dfece7 none repeat scroll 0 0; |
298 | border: 1px solid #dfece7; |
299 | border-radius: 2px; |
300 | color: #1f2121; |
301 | } |
302 | .direct-chat-text, .direct-chat-buttons {
|
303 | background: #d2d6de none repeat scroll 0 0; |
304 | border: 1px solid #d2d6de; |
305 | border-radius: 5px; |
306 | color: #444; |
307 | margin: 5px 0 0 50px; |
308 | padding: 5px 10px; |
309 | position: relative; |
310 | } |
311 | |
312 | #actionMsg {
|
313 | position: absolute; |
314 | z-index: 9999; |
315 | left: 0; |
316 | bottom: 0; |
317 | height: 20px; |
318 | /*width: 300px;*/ |
319 | width: auto; |
320 | |
321 | background-color: white; |
322 | display: none; |
323 | } |
Began life as a copy of #1025911
Travelled to 6 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1025925 |
| Snippet name: | CSS for yellow web chat bot (OK) |
| Eternal ID of this version: | #1025925/4 |
| Text MD5: | 339587e8fda873aee6d78488bc93a07b |
| Author: | stefan |
| Category: | javax / web chat bots |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2019-11-05 11:24:17 |
| Source code size: | 7499 bytes / 323 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 203 / 133 |
| Version history: | 3 change(s) |
| Referenced in: | [show references] |