|
1 /* |
|
2 * Mail-style application |
|
3 */ |
|
4 |
|
5 #inbox-table { |
|
6 font-size: 13px; |
|
7 border-top: 0; |
|
8 border-left-color: transparent!important; |
|
9 border-right-color: transparent!important; |
|
10 |
|
11 tbody tr:hover { |
|
12 cursor: pointer; |
|
13 background: #E4E4E4; |
|
14 } |
|
15 tr td { |
|
16 border-right: 0; |
|
17 border-left: 0; |
|
18 line-height: 26px; |
|
19 padding: 6px 4px 7px!important; |
|
20 } |
|
21 .inbox-table-icon { |
|
22 padding-left: 15px!important; |
|
23 |
|
24 @media (max-width:979px) { |
|
25 padding-left: 10px!important; |
|
26 } |
|
27 } |
|
28 tbody tr th { |
|
29 overflow: hidden; |
|
30 } |
|
31 &.table tbody >tr >td { |
|
32 border-color: #fff!important; |
|
33 } |
|
34 .checkbox, |
|
35 .radio { |
|
36 margin-top: -1px; |
|
37 margin-bottom: 0; |
|
38 } |
|
39 } |
|
40 |
|
41 .inbox { |
|
42 &-badge { |
|
43 .minified & { |
|
44 border-radius: 50%; |
|
45 font-size: 9px; |
|
46 padding: 2px; |
|
47 position: absolute; |
|
48 top: 6px; |
|
49 right: 6px; |
|
50 background: #ED1C24; |
|
51 min-width: 13px; |
|
52 } |
|
53 } |
|
54 &-body { |
|
55 position: relative; |
|
56 |
|
57 .table-wrap { |
|
58 background: #fff; |
|
59 padding: 10px 14px 7px; |
|
60 position: relative; |
|
61 margin-left: 200px; |
|
62 |
|
63 @media (max-width:1024px) { |
|
64 margin-left: 0!important; |
|
65 } |
|
66 @media (max-width:979px) { |
|
67 padding: 0!important; |
|
68 } |
|
69 } |
|
70 &.no-content-padding { |
|
71 margin-top: 0; |
|
72 background: #fff; |
|
73 } |
|
74 } |
|
75 &-nav-bar { |
|
76 height: 70px; |
|
77 margin-bottom: 0; |
|
78 padding: 20px 14px; |
|
79 background: #fff; |
|
80 |
|
81 @media (max-width:979px) { |
|
82 padding-left: 5px; |
|
83 padding-right: 5px; |
|
84 } |
|
85 &.no-content-padding { |
|
86 @media (min-width:768px) and (max-width:880px) { |
|
87 margin-top: -10px!important; |
|
88 } |
|
89 @media (max-width:767px) { |
|
90 margin-top: -10px!important; |
|
91 } |
|
92 @media only screen and (min-width:0) and (max-width:679px) { |
|
93 margin-top: -10px!important; |
|
94 } |
|
95 @media only screen and (min-width:320px) and (max-width:479px) { |
|
96 margin-top: -10px!important; |
|
97 } |
|
98 } |
|
99 .page-title { |
|
100 display: inline-block; |
|
101 margin: 0; |
|
102 width: 196px; |
|
103 line-height: 33px; |
|
104 vertical-align: middle; |
|
105 } |
|
106 } |
|
107 &-footer { |
|
108 height: 52px; |
|
109 padding: 15px 14px 0; |
|
110 border-top: 1px solid #CECECE; |
|
111 background: #2a2725; |
|
112 position: absolute; |
|
113 bottom: -53px; |
|
114 width: 100%; |
|
115 } |
|
116 &-footer .btn-group, |
|
117 &-paging { |
|
118 margin-left: 10px; |
|
119 } |
|
120 &-data-attachment, |
|
121 &-table-icon { |
|
122 width: 28px; |
|
123 text-align: left; |
|
124 padding-left: 12px!important; |
|
125 padding-right: 0!important; |
|
126 } |
|
127 &-data-from { |
|
128 width: 200px; |
|
129 } |
|
130 &-data-from >:first-child { |
|
131 width: 200px; |
|
132 display: block; |
|
133 overflow: hidden; |
|
134 text-overflow: ellipsis; |
|
135 white-space: nowrap; |
|
136 } |
|
137 &-data-date { |
|
138 width: 80px; |
|
139 padding-left: 7px!important; |
|
140 padding-right: 0!important; |
|
141 } |
|
142 &-data-message { |
|
143 >:first-child { |
|
144 width: 100%; |
|
145 overflow: hidden; |
|
146 text-overflow: ellipsis; |
|
147 white-space: nowrap; |
|
148 height: 27px; |
|
149 color: #8A8A8A; |
|
150 |
|
151 @media (max-width:979px) { |
|
152 height: 50px; |
|
153 overflow: hidden; |
|
154 } |
|
155 |
|
156 span { |
|
157 color: #111; |
|
158 |
|
159 &.label { |
|
160 color: #fff; |
|
161 } |
|
162 } |
|
163 >:first-child { |
|
164 @media (max-width:979px) { |
|
165 display: block!important; |
|
166 font-size: 14px; |
|
167 } |
|
168 &:after { |
|
169 content: " - "; |
|
170 } |
|
171 } |
|
172 } |
|
173 } |
|
174 &-checkbox-triggered { |
|
175 display: inline-block; |
|
176 |
|
177 >.btn-group { |
|
178 margin-right: 10px; |
|
179 } |
|
180 >.btn-group .btn { |
|
181 padding-left: 14px; |
|
182 padding-right: 14px; |
|
183 |
|
184 @media (max-width:979px) { |
|
185 padding-left: 10px; |
|
186 padding-right: 10px; |
|
187 } |
|
188 } |
|
189 } |
|
190 &-side-bar { |
|
191 height: 100%; |
|
192 position: absolute; |
|
193 background: #fff; |
|
194 display: block; |
|
195 width: 200px; |
|
196 padding: 10px 0 10px 14px; |
|
197 |
|
198 @media (max-width:1024px) { |
|
199 display: none!important; |
|
200 } |
|
201 h6 { |
|
202 font-weight: 400; |
|
203 font-size: 11px; |
|
204 display: block; |
|
205 padding: 0 15px; |
|
206 text-transform: uppercase; |
|
207 color: #838383; |
|
208 |
|
209 a { |
|
210 font-size: 14px; |
|
211 margin-top: -2px; |
|
212 } |
|
213 .tooltip { |
|
214 text-transform: none!important; |
|
215 } |
|
216 } |
|
217 >.btn { |
|
218 margin-bottom: 35px; |
|
219 } |
|
220 .input-group { |
|
221 margin-bottom: 25px; |
|
222 } |
|
223 } |
|
224 &-space { |
|
225 display: block; |
|
226 width: 185px; |
|
227 |
|
228 >.progress { |
|
229 margin-top: 5px; |
|
230 } |
|
231 } |
|
232 .inbox-menu-lg { |
|
233 list-style: none; |
|
234 padding: 0; |
|
235 margin: 0 0 20px; |
|
236 |
|
237 .inbox-menu-lg li { |
|
238 display: block; |
|
239 width: 100%; |
|
240 |
|
241 a { |
|
242 display: block; |
|
243 padding: 6px 15px 7px; |
|
244 font-size: 13px; |
|
245 color: #333; |
|
246 |
|
247 &:hover { |
|
248 text-decoration: none; |
|
249 background: #f4f4f4; |
|
250 } |
|
251 } |
|
252 &.active a { |
|
253 font-weight: 700; |
|
254 background: #F0F0F0; |
|
255 border-bottom: 1px solid #E7E7E7; |
|
256 color: #3276b1; |
|
257 } |
|
258 } |
|
259 } |
|
260 .inbox-menu-sm { |
|
261 list-style: none; |
|
262 padding: 0; |
|
263 margin: 0 0 20px; |
|
264 |
|
265 .inbox-menu-sm li { |
|
266 display: block; |
|
267 width: 100%; |
|
268 |
|
269 a { |
|
270 display: block; |
|
271 padding: 8px 15px 10px; |
|
272 font-size: 13px; |
|
273 color: #333; |
|
274 |
|
275 &:hover { |
|
276 text-decoration: none; |
|
277 background: #f4f4f4; |
|
278 } |
|
279 } |
|
280 &.active a { |
|
281 font-weight: 700; |
|
282 background: #F0F0F0; |
|
283 border-bottom: 1px solid #E7E7E7; |
|
284 color: #3276b1; |
|
285 } |
|
286 } |
|
287 } |
|
288 &-info-bar { |
|
289 padding: 10px 0; |
|
290 border-bottom: 1px solid #bfbfbf; |
|
291 |
|
292 .form-group { |
|
293 margin: 0; |
|
294 } |
|
295 .form-group input, |
|
296 .select2-container-multi .select2-choices { |
|
297 border-color: #fff!important; |
|
298 } |
|
299 .select2-choices >div { |
|
300 display: none; |
|
301 } |
|
302 .col-md-1, |
|
303 .col-md-11 { |
|
304 padding-left: 0; |
|
305 padding-right: 0; |
|
306 |
|
307 @media (max-width:1024px) { |
|
308 padding-left: 26px; |
|
309 padding-right: 26px; |
|
310 } |
|
311 } |
|
312 img { |
|
313 width: 35px; |
|
314 height: auto; |
|
315 display: inline-block; |
|
316 vertical-align: middle; |
|
317 margin-right: 7px; |
|
318 margin-left: 2px; |
|
319 border-left: 3px solid #fff; |
|
320 } |
|
321 em { |
|
322 position: absolute; |
|
323 top: 6px; |
|
324 right: 20px; |
|
325 text-align: right; |
|
326 font-style: normal; |
|
327 } |
|
328 } |
|
329 &-download { |
|
330 .inbox-message { |
|
331 padding: 15px 4px; |
|
332 border-bottom: 1px solid #bfbfbf; |
|
333 } |
|
334 &-list { |
|
335 list-style: none; |
|
336 margin: 5px 0 0; |
|
337 padding: 0; |
|
338 |
|
339 li { |
|
340 display: inline-block; |
|
341 margin: 0 5px 0 0; |
|
342 vertical-align: top; |
|
343 |
|
344 >:first-child { |
|
345 margin-bottom: 0; |
|
346 width: 150px; |
|
347 overflow: hidden; |
|
348 |
|
349 &:hover { |
|
350 background: #fff; |
|
351 border-color: silver; |
|
352 } |
|
353 >:first-child { |
|
354 text-align: center; |
|
355 display: block; |
|
356 color: #D6D6D6; |
|
357 |
|
358 >.fa { |
|
359 font-size: 150px; |
|
360 } |
|
361 >img { |
|
362 max-width: 120px; |
|
363 } |
|
364 } |
|
365 } |
|
366 } |
|
367 } |
|
368 } |
|
369 &-compose-footer { |
|
370 padding: 10px; |
|
371 background: #F5F5F5; |
|
372 border-bottom: 1px solid #A9A9A9; |
|
373 } |
|
374 &-compose-footer, |
|
375 &-download, |
|
376 &-info-bar, |
|
377 &-message { |
|
378 margin-right: 240px; |
|
379 position: relative; |
|
380 |
|
381 @media (max-width:1280px) { |
|
382 margin-right: 0; |
|
383 } |
|
384 } |
|
385 &-table-icon { |
|
386 >:first-child { |
|
387 @media (max-width:979px) { |
|
388 margin-top: 12px; |
|
389 } |
|
390 } |
|
391 } |
|
392 } |
|
393 |
|
394 .unread { |
|
395 td { |
|
396 background: #fff; |
|
397 } |
|
398 .inbox-data-date >:first-child, |
|
399 .inbox-data-from >:first-child, |
|
400 .inbox-data-message >:first-child >:first-child { |
|
401 font-weight: 700; |
|
402 } |
|
403 } |
|
404 |
|
405 tr.highlight td, |
|
406 tr.unread.highlight td { |
|
407 background: #ffc!important; |
|
408 color: #333; |
|
409 } |
|
410 |
|
411 #compose-mail-mini { |
|
412 margin-left: 4px; |
|
413 } |
|
414 |
|
415 .email-open-header { |
|
416 margin: -10px 0 0 0; |
|
417 font-size: 20px; |
|
418 border-bottom: 1px solid #bfbfbf; |
|
419 border-top: 1px solid #eee; |
|
420 padding: 15px 3px; |
|
421 |
|
422 >span { |
|
423 font-size: 10px; |
|
424 font-weight: 400; |
|
425 padding: 3px 5px; |
|
426 letter-spacing: normal; |
|
427 text-transform: uppercase; |
|
428 vertical-align: middle; |
|
429 line-height: 33px; |
|
430 background: #ACACAC; |
|
431 } |
|
432 } |
|
433 |
|
434 .email-infobox { |
|
435 display: block; |
|
436 width: 180px; |
|
437 border-bottom: 1px solid #bfbfbf; |
|
438 padding-bottom: 0; |
|
439 padding-top: 15px; |
|
440 position: absolute; |
|
441 top: 65px; |
|
442 right: 15px; |
|
443 |
|
444 @media (max-width:1280px) { |
|
445 .email-infobox { |
|
446 display: none; |
|
447 } |
|
448 } |
|
449 } |
|
450 |
|
451 .email-reply-text { |
|
452 >div { |
|
453 border-left: 1px solid #D6D6D6; |
|
454 padding-left: 10px; |
|
455 margin-left: 50px; |
|
456 color: #A9A9A9; |
|
457 } |
|
458 >:first-child { |
|
459 padding-left: 45px; |
|
460 } |
|
461 } |
|
462 |
|
463 |
|
464 .profile { |
|
465 &-pic { |
|
466 text-align: right; |
|
467 |
|
468 >img { |
|
469 border-radius: 0; |
|
470 position: relative; |
|
471 border: 5px solid #fff; |
|
472 top: -30px; |
|
473 display: inline-block; |
|
474 text-align: right; |
|
475 z-index: 4; |
|
476 width: 120px; |
|
477 margin-bottom: -30px; |
|
478 } |
|
479 } |
|
480 &-carousel .carousel-inner { |
|
481 max-height: 150px; |
|
482 } |
|
483 } |
|
484 |
|
485 .friends-list li { |
|
486 margin-bottom: 10px; |
|
487 |
|
488 img { |
|
489 width: 35px; |
|
490 border: 1px solid #fff; |
|
491 outline: 1px solid #bfbfbf; |
|
492 } |
|
493 } |
|
494 |
|
495 .search-results { |
|
496 padding: 18px 5px; |
|
497 |
|
498 +.search-results { |
|
499 border-top: 1px dashed #E3E3E3; |
|
500 } |
|
501 >:first-child { |
|
502 margin-bottom: 4px; |
|
503 font-weight: 400; |
|
504 |
|
505 a { |
|
506 text-decoration: underline; |
|
507 } |
|
508 } |
|
509 .url { |
|
510 font-style: normal; |
|
511 font-size: 14px; |
|
512 } |
|
513 img { |
|
514 display: inline-block; |
|
515 margin-top: 4px; |
|
516 margin-right: 4px; |
|
517 width: 80px; |
|
518 } |
|
519 >div { |
|
520 display: inline-block; |
|
521 vertical-align: top; |
|
522 } |
|
523 .note { |
|
524 margin: 0; |
|
525 line-height: normal; |
|
526 |
|
527 a { |
|
528 text-decoration: none!important; |
|
529 color: #333; |
|
530 |
|
531 &:hover { |
|
532 color: #ed1c24; |
|
533 } |
|
534 } |
|
535 } |
|
536 } |