← Back to branch summary

~ya-bo-ng/ubuntu-online-tour/13.10

« back to all changes in this revision

Viewing changes to 13.04/12.04/css/email.css

  • Committer: Anthony Dillon
  • Date: 2013-10-02 09:35:39 UTC
  • Revision ID: anthony.dillon@canonical.com-20131002093539-ewxr0tx9oi85ppoi
Inishal setup of the 13.10 version of the tour

Show diffs side-by-side

added added

removed removed

Lines of Context:
13.04/12.04/css/email.css
 
1
/*
 
2
 *  Email CSS
 
3
 *   author: Anthony Dillon
 
4
 */
 
5
 
 
6
.email-window{
 
7
    height: 600px;
 
8
    left: 640px;
 
9
    top: 240px;
 
10
    width: 900px;
 
11
    display:none;
 
12
}
 
13
 
 
14
#email-window .email-get-mail{
 
15
        background:url(../img/email/get-mail.jpg) no-repeat;
 
16
        font-size: 15px;
 
17
    height: 26px;
 
18
    overflow: hidden;
 
19
    padding-left: 31px;
 
20
    padding-top: 9px;
 
21
    width: 77px;
 
22
}
 
23
#email-window .email-write{
 
24
        height:26px;
 
25
        width:45px;
 
26
        overflow:hidden;
 
27
        background:url(../img/email/write.jpg) no-repeat;
 
28
        font-size: 15px;
 
29
        padding-left: 31px;
 
30
    padding-top: 9px;
 
31
}
 
32
#email-window .email-address-book{
 
33
        height:35px;
 
34
        width:132px;
 
35
        overflow:hidden;
 
36
        background:url(../img/email/address-book.jpg) no-repeat;
 
37
}
 
38
#email-window .email-divider, #email-write .email-divider{
 
39
        height:35px;
 
40
        width:16px;
 
41
        overflow:hidden;
 
42
        background:url("../img/email/divider.png") no-repeat scroll 8px 7px transparent;
 
43
}
 
44
#email-window .email-tag{
 
45
        height:35px;
 
46
        width:76px;
 
47
        overflow:hidden;
 
48
        background:url(../img/email/tag.jpg) no-repeat;
 
49
}
 
50
 
 
51
#email-window .buttons{
 
52
        width:100%;
 
53
        height:42px;
 
54
        margin-top:6px;
 
55
        background-color:#F2F1F0;
 
56
}
 
57
 
 
58
#email-window .buttons div, #email-write  .buttons div{
 
59
        float:left;
 
60
}
 
61
 
 
62
#email-window .buttons div:hover{
 
63
        background-position: 0px -35px;
 
64
}
 
65
 
 
66
#email-window .buttons .email-search input{
 
67
        width:350px;
 
68
        background:url(../img/firefox/search_icon.jpg) no-repeat center right;
 
69
        background-color:#fff;
 
70
}
 
71
 
 
72
#email-window .buttons .email-search{
 
73
        float:right;
 
74
        margin-right:10px;
 
75
}
 
76
 
 
77
#email-window .bottom-buttons {
 
78
    height: 24px;
 
79
    margin: 5px;
 
80
}
 
81
 
 
82
#email-window .email-content{
 
83
        border-top:1px solid #b8b4b0;
 
84
}
 
85
 
 
86
#email-window .folder-list{
 
87
        float:left;
 
88
}
 
89
 
 
90
#email-window .list{
 
91
        height: 470px;
 
92
        background-color:white;
 
93
        border: 1px solid #c4c1bd;
 
94
        width:180px;
 
95
        margin-right:4px;
 
96
}
 
97
 
 
98
#email-window .bottom-buttons {
 
99
    height: 17px;
 
100
 }
 
101
 
 
102
#email-window .email-contents{
 
103
        float:left;
 
104
        border-top:0px;
 
105
        width: 710px;
 
106
 }
 
107
 
 
108
#email-window .email-contents .email-categories{
 
109
        width:100%;
 
110
        height:26px;
 
111
        background:url(../img/email/header-bg.jpg) repeat-x;
 
112
        border-bottom:1px solid #c4c1bd;
 
113
        border-left:1px solid #c4c1bd;
 
114
}
 
115
 
 
116
#email-window .email-contents .email-categories .subject{
 
117
        width:38%;
 
118
 }
 
119
 
 
120
 .email-categories .from,  .email-categories .date{
 
121
        width: 15%;
 
122
 }
 
123
 
 
124
#email-window .email-contents .email-categories div{
 
125
        float:left;
 
126
        min-width: 25px;
 
127
        border-right:1px solid #c4c1bd;
 
128
        height:22px;
 
129
        padding:2px 5px;
 
130
}
 
131
 
 
132
#email-window .email-contents .email-list{
 
133
        background:#ffffff;
 
134
        border:1px solid #c4c1bd;
 
135
        border-top:0px;
 
136
        width:100%;
 
137
        height:175px;
 
138
        overflow: scroll;
 
139
        overflow-x: hidden; 
 
140
}
 
141
 
 
142
#email-window .email-contents .email-list div{
 
143
        width:100%;
 
144
        height:25px;
 
145
        vertical-align: middle;
 
146
}
 
147
 
 
148
#email-window .email-contents .email-list .unread{
 
149
        font-weight:bold;
 
150
}
 
151
 
 
152
#email-window .folder-list .list div{
 
153
        padding:1px 10px;
 
154
        height:20px;
 
155
        border:1px dotted transparent;
 
156
}
 
157
 
 
158
.email-list div.grey{
 
159
        background-color: rgb(238, 238, 238);
 
160
}
 
161
 
 
162
.email-list div.replied ul li.message-subject{
 
163
        background:url(../img/email/reply-logo.png) no-repeat scroll 2px center;
 
164
}
 
165
 
 
166
.email-list div.forwarded ul li.message-subject{
 
167
        background:url(../img/email/forward-logo.png) no-repeat scroll 2px center;
 
168
}
 
169
 
 
170
.email-list div.repliedforwarded ul li.message-subject{
 
171
        background:url(../img/email/forward-reply-logo.png) no-repeat scroll 2px center;
 
172
}
 
173
 
 
174
.email-list div.selected{
 
175
        background:#f07746;
 
176
        color:white;
 
177
}
 
178
 
 
179
#email-window .folder-list .list div img{
 
180
        vertical-align: middle;
 
181
}
 
182
 
 
183
#email-window .folder-list .list .selected{
 
184
        background:#f07746;
 
185
        border:1px dashed #f3d982;
 
186
        color:white;
 
187
}
 
188
 
 
189
#email-window .email-contents .email-list  ul{
 
190
        padding:0px;
 
191
        margin:0px;
 
192
}
 
193
 
 
194
#email-window .email-contents .email-list  li{
 
195
        float: left;
 
196
        margin-right: 1px;
 
197
    height: 16px;
 
198
    min-width: 24px;
 
199
    padding: 2px 5px;
 
200
        overflow: hidden;
 
201
}
 
202
 
 
203
#email-window .email-contents .email-list  li.message-t{
 
204
        min-width: 25px;
 
205
}
 
206
 
 
207
#email-window .email-contents .email-list  li.message-subject{
 
208
        padding-left: 20px;
 
209
    width: 37%;
 
210
}
 
211
.email-list  li.message-from{
 
212
        width:15%;
 
213
}
 
214
 
 
215
.email-list  li.message-date{
 
216
        width:15%;
 
217
}
 
218
 
 
219
.email-list  li.message-glasses{
 
220
        background:url(../img/email/message-glasses.png) no-repeat center 0px;
 
221
}
 
222
 
 
223
.email-list  li.message-star{
 
224
        background:url(../img/email/message-starred.png) no-repeat center 0px;
 
225
}
 
226
 
 
227
.email-list .attachment li.message-clip{
 
228
        background:url(../img/email/clip.png) no-repeat center 0px;
 
229
}
 
230
 
 
231
.email-list .fire li.message-fire{
 
232
        background:url(../img/email/fire.png) no-repeat center 0px;
 
233
}
 
234
 
 
235
.email-list .unread  li.message-glasses, 
 
236
.email-list .starred  li.message-star{
 
237
        background-position:center -20px;
 
238
}
 
239
 
 
240
#email-window .email-contents .email-body{
 
241
        background:#ffffff;
 
242
        border:1px solid #c4c1bd;
 
243
        width:100%;
 
244
        margin-top:5px;
 
245
        height:288px;
 
246
}
 
247
#email-window .email-contents .email-body div{
 
248
        display:none;
 
249
}
 
250
 
 
251
#email-window .email-contents .message-body{
 
252
        padding:10px;
 
253
        overflow: scroll;
 
254
        overflow-x: hidden; 
 
255
        height: 169px;
 
256
}
 
257
 
 
258
#email-window .email-contents .email-body .message-header{
 
259
        background:#F2F1F0;
 
260
        border-bottom:1px solid #c4c1bd;
 
261
}
 
262
 
 
263
#email-window .email-contents .email-body .message-header dl{
 
264
        margin:0px 0px 5px 0px;
 
265
        padding:0px;
 
266
        
 
267
}
 
268
 
 
269
#email-window .email-contents .email-body .message-header dt{
 
270
        display:inline-block;
 
271
        width:50px;
 
272
        text-align:right;
 
273
        margin-right:10px;
 
274
        color:#999;
 
275
}
 
276
 
 
277
#email-window .email-contents .email-body .message-header dl dd{
 
278
        display:inline;
 
279
        padding:2px 5px;
 
280
        color:#4c4c4c;
 
281
}
 
282
 
 
283
#email-window .email-contents .email-body .message-header .subject  dd{
 
284
        font-weight:bold;
 
285
}
 
286
 
 
287
#email-window .email-contents .email-body .message-header .from dd:hover{
 
288
        background:#F07746;
 
289
        color:white;
 
290
}
 
291
 
 
292
#email-window .email-contents .email-body .message-header .to dd:hover{
 
293
        background:#F07746;
 
294
        color:white;
 
295
}
 
296
 
 
297
#email-window .email-contents .email-body .message-header .cc dd:hover{
 
298
        background:#F07746;
 
299
        color:white;
 
300
}
 
301
 
 
302
#email-window .email-contents .email-body .message-header .email-buttons{
 
303
        /*height:20px;
 
304
        margin-top:5px;
 
305
        height:20px;
 
306
        background-color:#fff;
 
307
        border: 1px solid #ada9a5;
 
308
        -webkit-border-radius:2px 2px 2px 2px;
 
309
        -moz-border-radius:2px 2px 2px 2px;
 
310
        border-radius:2px 2px 2px 2px;  
 
311
        padding:2px;*/
 
312
        float:right;
 
313
}
 
314
 
 
315
 
 
316
 
 
317
#email-window .email-contents .email-body .message-header .email-buttons div span{
 
318
        height:24px;
 
319
        float:left;
 
320
        padding-left:26px;
 
321
        font-size: 15px;
 
322
        padding-top: 3px;
 
323
        margin:4px 4px 0 0;
 
324
}
 
325
 
 
326
#email-window .email-contents .email-body .message-header .email-buttons span:hover{
 
327
        background-position: 0px -27px;
 
328
}
 
329
 
 
330
#email-window .email-contents .email-body .message-header .email-buttons .message-reply{
 
331
        background:url(../img/email/reply.jpg) no-repeat;
 
332
        width:42px;
 
333
}
 
334
#email-window .email-contents .email-body .message-header .email-buttons .message-forward{
 
335
        background:url(../img/email/forward.jpg) no-repeat;
 
336
        width:62px;
 
337
}
 
338
#email-window .email-contents .email-body .message-header .email-buttons .message-archive{
 
339
        background:url(../img/email/archive.jpg) no-repeat;
 
340
        width:55px;
 
341
}
 
342
#email-window .email-contents .email-body .message-header .email-buttons .message-junk{
 
343
        background:url(../img/email/junk.jpg) no-repeat;
 
344
        width:36px;
 
345
}
 
346
#email-window .email-contents .email-body .message-header .email-buttons .message-delete{
 
347
        background:url(../img/email/delete.jpg) no-repeat;
 
348
        width:50px;
 
349
}
 
350
 
 
351
#email-window .email-contents .email-body .message-header .date{
 
352
        margin:30px 10px 0px 10px;
 
353
        float:right;
 
354
}
 
355
 
 
356
#email-window .email-contents .junk-mail-banner{
 
357
        height:34px;
 
358
        width:100%;
 
359
        background-color:#000;
 
360
        color:#fff;
 
361
        padding-top:5px;
 
362
}
 
363
 
 
364
#email-window .email-contents .junk-mail-banner img{
 
365
        vertical-align:bottom;
 
366
        margin-left:10px;
 
367
}
 
368
 
 
369
#email-window .email-contents .junk-mail-banner .not-junk{
 
370
        float:right;
 
371
        background:url(../img/email/not-junk.jpg) no-repeat;
 
372
        width:76px;
 
373
        height:23px;
 
374
        overflow:hidden;
 
375
        margin-right:10px;
 
376
        color:#4C4C4C;
 
377
        padding:6px 0 0 16px;
 
378
}
 
379
#email-window .email-contents .junk-mail-banner .not-junk:hover{
 
380
        background-position: 0px -29px;
 
381
}
 
382
 
 
383
#email-window .emails-info{
 
384
        background:url(../img/email/connection.jpg) no-repeat scroll 5px center;
 
385
        width:100%;
 
386
        height:27px;
 
387
}
 
388
 
 
389
#email-window .emails-info div{
 
390
        float:right;
 
391
        margin: 4px 20px 0px 0px;
 
392
}
 
393
 
 
394
#email-window .emails-info div #details-unread{
 
395
        margin-right:20px;
 
396
}
 
397
 
 
398
#email-window.fullsize .buttons{
 
399
        margin-top: 0px;
 
400
}
 
401
 
 
402
#email-write{
 
403
    background: url("../img/folder/top-bg.jpg") repeat-x scroll 0 0 #F2F1F0;
 
404
    border-radius: 4px 4px 0 0;
 
405
    box-shadow: 0 0 10px #000000;
 
406
    color: #666666;
 
407
    font-size: 14px;
 
408
    height: 610px;
 
409
    left: 140px;
 
410
    position: absolute;
 
411
    top: 40px;
 
412
    width: 900px;
 
413
    display:none;
 
414
}
 
415
 
 
416
#email-write .buttons{
 
417
        margin-top: -40px;
 
418
        background: #3C3B37;
 
419
        width: 100%;
 
420
        height: 42px;
 
421
        margin-bottom: 10px;
 
422
}
 
423
 
 
424
#email-write #write-send{
 
425
        padding-left: 31px;
 
426
    padding-top: 9px;
 
427
    margin-left:10px;
 
428
        height:25px;
 
429
        width:38px;
 
430
        color: #DFDBD2;
 
431
        overflow:hidden;
 
432
        background:url(../img/email/write-send.jpg) no-repeat;
 
433
}
 
434
 
 
435
#email-write #write-attach{
 
436
        padding-left: 31px;
 
437
    padding-top: 9px;
 
438
        height:25px;
 
439
        width:50px;
 
440
        color: #DFDBD2;
 
441
        overflow:hidden;
 
442
        background:url(../img/email/attach.jpg) no-repeat;
 
443
}
 
444
#email-write #write-attach:hover{
 
445
        background-position: 0px -34px;
 
446
        color:#333;
 
447
}
 
448
 
 
449
#email-write #write-send:hover{
 
450
        background-position: 0px -34px;
 
451
        color:#333;
 
452
}
 
453
 
 
454
#write-to, #write-from, #write-subject{
 
455
        padding-left:5px;
 
456
        margin-bottom:10px;
 
457
}
 
458
 
 
459
#write-to div, #write-from div, #write-subject div{
 
460
        float:left;
 
461
        width:60px;
 
462
        color:#333;
 
463
        padding-top: 5px;
 
464
}
 
465
 
 
466
#write-subject input, #write-to input, #write-from input{
 
467
        width:90%;
 
468
}
 
469
 
 
470
#write-body textarea{
 
471
        width:894px;
 
472
        height:350px;
 
473
}
 
474
 
 
475
#email-write input{
 
476
        height:20px;
 
477
        background-color:#fff;
 
478
        border: 1px solid #ada9a5;
 
479
        -webkit-border-radius:2px 2px 2px 2px;
 
480
        -moz-border-radius:2px 2px 2px 2px;
 
481
        border-radius:2px 2px 2px 2px;
 
482
        padding:2px;
 
483
}
 
484
 
 
485
#email-write .loading-bar{
 
486
        background:#e5e3e1;
 
487
        -webkit-border-radius:6px 6px 6px 6px;
 
488
        -moz-border-radius:6px 6px 6px 6px;
 
489
        border-radius:6px 6px 6px 6px;
 
490
        height:14px;
 
491
        width:96px;
 
492
        float:right;
 
493
        margin:7px 20px 0px 0px;
 
494
        border-top: 1px solid #bab6b2;
 
495
        border-bottom: 1px solid #fefefe;
 
496
}
 
497
 
 
498
#email-write .loading-bar .progress{
 
499
        -webkit-border-radius:6px 6px 6px 6px;
 
500
        -moz-border-radius:6px 6px 6px 6px;
 
501
        border-radius:6px 6px 6px 6px;
 
502
        height:14px;
 
503
        width:0px;
 
504
        background:#dd4814 ;
 
505
}
 
506
 
 
507
#email-write .control{
 
508
    margin-left: 0;
 
509
    padding-bottom: 43px;
 
510
    padding-left: 10px;
 
511
}