pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
smart-chat.less
(9215B)
1 #chat-container *, #chat-container *:after, #chat-container *:before {
2 box-sizing:content-box;
3 -moz-box-sizing:content-box;
4 -webkit-box-sizing:content-box;
5 }
6
7 #chat-container input[type='text'] {
8 box-sizing:border-box;
9 -moz-box-sizing:border-box;
10 -webkit-box-sizing:border-box;
11 }
12
13 #chat-container {
14 position: absolute;
15 background: #fff;
16 width: 250px;
17 height: 270px;
18 z-index: 2;
19 border-left: 1px solid #CDCECF;
20 right: -251px;
21 top: 0px;
22 background: #fff;
23 transition-duration: .25s;
24 -webkit-transition-duration:.25s;
25 -moz-transition-duration:.25s;
26 -o-transition-duration:.25s;
27 -ms-transition-duration:.25s;
28
29 }
30
31 #chat-container:hover, #chat-container:hover .chat-list-open-close {
32 border-color: #A7A7A7;
33 }
34
35 #chat-container.open {
36 right: 0px;
37 top: 0px;
38 }
39
40 #chat-container .chat-list-open-close {
41 display: block;
42 width: 25px;
43 height: 25px;
44 border: 1px solid #CDCECF;
45 border-right: 1px solid #f2f4f8 !important;
46 position: absolute;
47 left: -32px;
48 top: 7%;
49 border-radius: 50% 0 0 50%;
50 background: #FFF;
51 padding: 3px 1px 3px 5px;
52 font-size: 21px;
53 line-height: 22px;
54 cursor: pointer;
55 color: #868686;
56 box-shadow: inset 0 0.2em 0 rgba(0, 0, 0, 0.05);
57 -moz-box-shadow: inset 0 0.2em 0 rgba(0, 0, 0, 0.05);
58 background:#f2f4f8;
59 text-align:center;
60 }
61
62 #chat-container .chat-list-open-close b {
63 position: absolute;
64 right: 0px;
65 background: #ed1c24;
66 line-height: 9px;
67 height: 10px;
68 width: 10px;
69 font-size: 0;
70 top: 3px;
71 border: 1px solid #FFF;
72 border-radius: 3px;
73 font-size: 9px;
74 text-align: center;
75 vertical-align: middle;
76 color: #fff;
77 font-weight: normal;
78 }
79
80 #chat-container.open .chat-list-open-close i:before {
81 content: "\f00d" !important;
82 }
83
84 #chat-container.open .chat-list-open-close b {
85 display:none;
86 }
87
88 #chat-container .chat-list-body {
89 height: 217px;
90 overflow-y: scroll;
91 overflow-x:hidden;
92 display:block;
93 padding:0;
94 box-sizing:border-box;
95 -webkit-box-sizing:border-box;
96 -moz-box-sizing:border-box;
97 background:#f2f4f8;
98 }
99
100 #chat-container #chat-users {
101 list-style:none;
102 margin:10px 0;
103 padding:0;
104 }
105 #chat-container #chat-users li {
106 margin-bottom:3px;
107 margin-left:5px;
108 }
109
110 #chat-container #chat-users li a {
111 display:block;
112 font-size:13px;
113 color:#3d3d3d;
114 text-decoration:none !important;
115 box-sizing:border-box;
116 -webkit-box-sizing:border-box;
117 -moz-box-sizing:border-box;
118 padding:3px 8px 3px 3px;
119 line-height:33px;
120 vertical-align:middle;
121 }
122 #chat-container #chat-users li a:hover {
123 background:#e0e4ee;
124 }
125
126 #chat-container #chat-users li a img {
127 width:33px;
128 height:auto;
129 margin-right:10px;
130 }
131 #chat-container #chat-users li a i {
132 color:#ACACAC;
133 font-size:8px;
134 line-height:34px;
135 font-style:normal;
136 }
137 #chat-container #chat-users li a i.last-online {
138 font-size:12px;
139 letter-spacing:-1px;
140 }
141
142 #chat-container .chat-list-footer {
143 overflow: hidden;
144 border-top:1px solid #CCC;
145 padding:10px;
146 box-sizing:border-box;
147 -webkit-box-sizing:border-box;
148 -moz-box-sizing:border-box;
149 }
150
151 #chat-container .chat-list-footer input[type="text"] {
152 border: 1px solid #bababa !important;
153 }
154
155 #chat-container .control-group {
156 padding:0px;
157 }
158
159 .chat-body {
160 background: #FAFAFA;
161 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
162 background: -moz-linear-gradient(top, #FAFAFA 0%, #FFF 100%);
163 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#FFF));
164 background: -webkit-linear-gradient(top, #FAFAFA 0%,#FFF 100%);
165 background: -o-linear-gradient(top, #FAFAFA 0%,#FFF 100%);
166 background: -ms-linear-gradient(top, #FAFAFA 0%,#FFF 100%);
167 background: linear-gradient(to bottom, #F5FCFF 0%,#FFF 100%);
168 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff',GradientType=0 );
169 box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.04);
170 -moz-box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.04);
171 display: block;
172 height: 270px;
173 overflow-y: scroll;
174 overflow-x:hidden;
175 padding:10px;
176 box-sizing:border-box;
177 -webkit-box-sizing:border-box;
178 -moz-box-sizing:border-box;
179 border:1px solid #fff;
180 border-top:none;
181 }
182
183 .chat-body ul {
184 margin:0;
185 padding:0;
186 }
187
188 .chat-body li.message {
189 display:block;
190 position:relative;
191 margin:20px 20px 0;
192 }
193 .chat-body li:first-child {
194 margin-top:10px;
195 }
196 .chat-body li.message img {
197 display:inline-block;
198 border-left:4px solid #fff;
199 position:absolute;
200 }
201 .chat-body li.message img.online {
202 border-left-color:#00a300;
203 }
204 .chat-body li.message img.offline {
205 border-left-color:#ddd;
206 }
207 .chat-body li.message img.busy {
208 border-left-color:#A90329;
209 }
210 .chat-body li.message img.away {
211 border-left-color:#ffc40d;
212 }
213 .chat-body li.message .message-text {
214 display:inline-block;
215 vertical-align:top;
216 box-sizing:border-box;
217 -webkit-box-sizing:border-box;
218 -moz-box-sizing:border-box;
219 padding:0;
220 margin-left: 65px;
221 line-height: normal;
222 }
223 .chat-body li.message .message-text time {
224 position:absolute;
225 top:1px;
226 right:0px;
227 font-size:10px;
228 line-height:10px;
229 color:#AFAFAF;
230 }
231 .chat-body li.message .message-text .chat-file:nth-child(3){
232 margin-top:15px;
233 }
234 .chat-body li.message .message-text .chat-file {
235 display:block;
236 margin:3px 0;
237 padding:4px;
238 border:1px dotted #ddd;
239 background:rgba(0,0,0,.05);
240 border-radius:4px;
241 -webkit-border-radius: 4px;
242 -moz-border-radius: 4px;
243 text-align:right;
244 box-sizing:border-box;
245 -webkit-box-sizing:border-box;
246 -moz-box-sizing:border-box;
247 }
248 .chat-body li.message .message-text .chat-file.row-fluid [class*="span"] {
249 min-height:10px !important;
250 }
251 .chat-body li.message .message-text .chat-file b {
252 font-style:italic;
253 white-space: nowrap;
254 width: 250px;
255 overflow: hidden;
256 text-overflow: ellipsis;
257 text-align:left;
258 }
259
260 .chat-body li.message .message-text a.username {
261 display:block;
262 font-weight:bold;
263 margin-bottom:4px;
264 vertical-align:top;
265 line-height:14px;
266 font-size:14px;
267 letter-spacing:-1px;
268 text-decoration:none !important;
269 }
270
271 /* message reply */
272
273 .profile-message {
274 background:none !important;
275 height:auto !important;
276 box-shadow:none !important;
277 -moz-box-shadow:none !important;
278 -webkit-box-shadow:none !important;
279 overflow:hidden;
280 }
281
282 .profile-message li.message.message-reply {
283 margin-left: 85px !important;
284 background: #F7F7F7;
285 padding: 10px;
286 margin: 3px 0 0 20px;
287 }.profile-message li.message.message-reply img {
288 width: 35px !important;
289 }.profile-message li.message.message-reply .message-text {
290 margin-left:45px !important;
291 }
292
293 .profile-message .wall-comment-reply {
294 margin-left:85px;
295 margin-bottom:20px;
296 }
297
298
299
300 .chat-footer {
301 border-top: 1px solid rgba(0, 0, 0, 0.1);
302 background: rgba(248, 248, 248, 0.9);
303 padding: 0 10px 15px;
304 position: relative;
305 box-sizing: border-box;
306 -webkit-box-sizing: border-box;
307 -moz-box-sizing: border-box;
308 }
309 .textarea-div {
310 background-color: #FFF;
311 border: 1px solid #CCC;
312 border-bottom: none;
313 margin: 10px 0 0;
314 }
315 .typearea {
316 cursor: text;
317 overflow-x: hidden;
318 overflow-y: auto;
319 max-height: 90px;
320 padding: 5px 25px 5px 5px;
321 position: relative;
322 border-bottom: 1px solid #EEE;
323 }
324 .typearea textarea {
325 width: 100%;
326 border-color: transparent !important;
327 box-sizing: border-box;
328 box-shadow: none;
329 -moz-box-shadow: none ;
330 -moz-box-sizing :border-box;
331 -webkit-box-sizing: border-box;
332 -webkit-box-shadow: none;
333 overflow: hidden;
334 resize: none;
335 padding: 0;
336 margin: 0;
337 -webkit-transition: height 0.2s;
338 -moz-transition: height 0.2s;
339 transition: height 0.2s;
340 outline: none;
341 resize: none;
342 min-height:61px;
343 }
344
345 textarea.clone {
346 position: absolute;
347 visibility: hidden;
348 }
349
350 .textarea-controls {
351 box-sizing: border-box;
352 -moz-box-sizing: border-box;
353 -webkit-box-sizing: border-box;
354 padding: 5px;
355 display: block;
356 background-color: #FFF;
357 border: 1px solid #CCC;
358 border-top: none;
359 height: 43px;
360 line-height:33px;
361 overflow: hidden;
362 }
363
364 .textarea-controls > label {
365 margin:3px 10px 0 10px;
366 }
367
368 .textarea-controls .smart-form .checkbox {
369 padding-left: 22px !important;
370 }
371
372 @media (min-width: 768px) and (max-width: 880px) {
373 .chat-body li.message .message-text .chat-file b {
374 width: 150px;
375 }
376 }
377
378 @media only screen and (min-width: 320px) and (max-width: 479px) {
379 .chat-body li.message .message-text .chat-file b {
380 width: 150px;
381 }
382 }
383
384 @media (max-width: 480px) {
385 .chat-body li.message .message-text .chat-file b {
386 width: 150px;
387 }
388 }
389
390
391