be1931863fbbc44b3ab8cc983092379d616db390
[pixelated-user-agent.git] / web-ui / app / scss / views / _compose-view.scss
1 .compose-view {
2     overflow: auto;
3
4     &__buttons {
5         &-attachment {
6             cursor: pointer;
7             margin-left: 18px;
8             padding-top: 0px;
9             display: inline;
10             border: 1px $contrast solid;
11             background: $background_light_grey;
12             padding: 7px 4px;
13             font-size: 0.8em;
14
15             span {
16               -ms-transform: rotate(224deg);
17               -webkit-transform: rotate(224deg);
18               transform: rotate(224deg);
19               outline: 0;
20             }
21
22             i.fa-paperclip {
23                 font-size: 1.7em;
24             }
25
26             &--busy {
27                 color: lighten($recipients_font_color, 10%);
28                 cursor: progress;
29             }
30         }
31     }
32
33     &__attachments {
34         &-wrapper {
35             padding: 0;
36             margin-top: 30px;
37         }
38
39         &-list {
40             &-item {
41                 display: block;
42                 position: relative;
43                 margin-bottom: 8px;
44                 padding: 5px;
45                 border: 1px solid $border_light_grey;
46                 border-radius: 2px;
47                 background-color: $contrast;
48
49                 &-label {
50                     color: $attachment_text;
51                     text-decoration: none;
52
53                     &:hover, &:focus {
54                         color: $attachment_icon;
55                         outline: none;
56                     }
57                 }
58
59                 &-icon {
60                     color: #a2a2a2;
61                     float: right;
62                     margin-top: 7px;
63                     cursor: pointer;
64                 }
65
66                 &-progress {
67                     width: 0%;
68                     position: absolute;
69                     right: 0;
70                     left: 0;
71                     top: 0;
72                     bottom: 0;
73                     min-height: 100%;
74
75                     &-bar {
76                         height: 100%;
77                         background-color: rgba($light_blue, 0.3);
78                     }
79                 }
80
81             }
82
83             &--upload {
84                 display: none;
85             }
86
87         }
88
89         &-error {
90             background-color: $background_light_grey;
91             border-radius: 2px;
92             border: 1px solid $error;
93             display: block;
94             font-size: 0.9rem;
95             margin-bottom: 20px;
96             padding: 5px;
97             width: 100%;
98
99             &-close {
100                 float: left;
101                 margin: 5px 5px 0 0;
102             }
103
104             & > * {
105                 color: $error;
106             }
107
108             & > a {
109                 display: inline-block;
110                 text-decoration: underline;
111                 padding: 5px;
112             }
113         }
114     }
115
116 }
117
118 // COMPOSE PANE
119 #compose-box, #draft-box, #reply-box, #feedback-box {
120     div.floatlabel {
121         position: relative;
122     }
123
124     .input-container {
125         padding: 1px;
126     }
127
128     label, span {
129         color: $recipients_font_color;
130         padding: 0.5rem;
131         display: inline-block;
132     }
133
134     label {
135         padding: 13px 10px;
136     }
137
138     span {
139         padding: 3px;
140
141         &.attachment-size {
142             color: $attachment_size;
143             cursor: pointer;
144         }
145     }
146
147     label.floatlabel {
148         padding: 0.4rem !important;
149         position: absolute;
150         font-size: 0.6rem;
151         transition: all 0.1s linear;
152         opacity: 0;
153         font-weight: bold;
154         display: none;
155     }
156
157     label.showfloatlabel {
158         color: $light_blue !important;
159         top: -0.3rem;
160         opacity: 1;
161         display: block;
162     }
163
164     input, textarea {
165         margin: 0;
166         border: none;
167         transition: all 0.1s linear;
168     }
169
170     input.showfloatlabel, textarea.showfloatlabel {
171         padding-top: 1rem !important;
172     }
173
174     input#subject, #feedback-subject {
175         font-size: 1.6875rem;
176         line-height: 1.4;
177         border-top: 1px solid $lighter_gray;
178     }
179
180     #feedback-subject {
181         color: $dark_grey;
182     }
183
184     textarea {
185         border-bottom: 2px solid $lighter_gray;
186         min-height: 400px;
187         font-family: inherit;
188         font-weight: normal;
189         font-size: 1rem;
190         line-height: 1.6;
191         text-rendering: optimizeLegibility;
192     }
193
194     &.reply-box, &.forward-box {
195         margin: 0;
196
197         h4 {
198             font-size: 0.9em;
199             font-style: italic;
200             color: $medium_grey;
201             margin: 2px 0;
202             clear: both;
203             cursor: pointer;
204
205             &:hover {
206                 background: $contrast;
207             }
208         }
209
210         textarea {
211             min-height: 200px;
212             margin: 10px 0;
213         }
214
215         p {
216             padding: 5px;
217             margin: 10px 0;
218             font-style: italic;
219             cursor: pointer;
220
221             &:hover {
222                 background: $contrast;
223             }
224         }
225     }
226
227     button.close-mail-button {
228         margin: 1px;
229     }
230
231     .buttons-group {
232         margin-top: 0px;
233     }
234
235     .recipients-area {
236         -webkit-appearance: none;
237         background-color: white;
238         font-family: inherit;
239         display: flex;
240         flex-wrap: wrap;
241         font-size: 0.898em;
242         -webkit-box-sizing: border-box;
243         -moz-box-sizing: border-box;
244         box-sizing: border-box;
245         position: relative;
246
247         .compose-column-label {
248             width: 5%;
249             display: inline-block;
250         }
251
252         .compose-column-recipients {
253             width: 95%;
254             display: inline-block;
255         }
256
257         .recipients-label {
258             width: 100%;
259             height: 100%;
260         }
261
262         .recipients-navigation-handler {
263             z-index: -1;
264             position: absolute;
265             top: -200px;
266         }
267
268         .twitter-typeahead {
269             flex: 1 1 50px;
270
271             .tt-dropdown-menu {
272               background: $dark_white;
273
274               div div {
275                 padding: 8px;
276
277                 &:hover {
278                   background: $background_dropdown_grey;
279                 }
280               }
281             }
282         }
283
284         .invalid-format {
285             border-bottom: 1px dotted $error;
286         }
287
288         input[type=text] {
289             vertical-align: top;
290             height: 35px;
291             margin-left: 1px;
292             font-size: 0.9em;
293             width: 100%;
294         }
295
296         .fixed-recipient {
297             display: inline-block;
298             margin-right: -3px;
299             flex: none;
300             position: relative;
301
302             .recipient-value {
303                 &.selected {
304                     border: 1px solid $medium_dark_grey;
305                 }
306
307                 &:before {
308                     font-family: FontAwesome;
309                     padding-right: 6px;
310                     font-size: 1.4em;
311                 }
312
313                 &.encrypted {
314                     border-bottom-color: $will_be_encrypted;
315
316                     &:before {
317                         color: $will_be_encrypted;
318                         content: "\f023 ";
319                     }
320                 }
321
322                 &.not-encrypted {
323                     border-bottom-color: $wont_be_encrypted;
324
325                     &:before {
326                         color: $wont_be_encrypted;
327                         content: "\f09c";
328                     }
329                 }
330
331                 &.deleting span {
332                     text-decoration: line-through;
333                 }
334
335                 & span {
336                     margin: 0px;
337                     padding: 0px 0px 0px 0px;
338                     vertical-align: top;
339                     cursor: pointer;
340                 }
341
342                 margin: 3px;
343                 padding: 5px;
344                 background-color: $background_light_grey;
345                 border: 1px solid $border_light_grey;
346                 border-radius: 2px;
347
348                 .recipient-mixnet {
349                     &:before {
350                         font-family: FontAwesome;
351                         padding-right: 6px;
352                         font-size: 1.4em;
353                     }
354
355                     &.mixnet {
356                         &:before {
357                             color: $will_be_mixed;
358                             content: "\f135";
359                         }
360                     }
361
362                     &.unsuported-mixnet {
363                         &:before {
364                             color: $unsuported_mixed;
365                             content: "\f135";
366                         }
367                     }
368
369                     &.not-mixnet {
370                         &:before {
371                             color: $unsuported_mixed;
372                             content: "";
373                         }
374                     }
375                 }
376             }
377
378             .recipient-del {
379                 position: relative;
380                 color: $recipients_font_color;
381
382                 &:hover, &:focus {
383                     color: $recipients_font_color;
384                 }
385
386                 &:before {
387                     margin-left: 0.4em;
388                     font-weight: bold;
389                     content: "x";
390                 }
391
392                 &.deleteTooltip:hover:after {
393                     position: absolute;
394                     content: attr(data-label);
395                     font-size: 0.5rem;
396
397                     @include tooltip(25px, 0px);
398                 }
399             }
400         }
401
402         input.recipients-input:focus {
403             background-color: $dark_white !important;
404             border-color: $medium_light_grey;
405             outline: none;
406             width: 270px;
407         }
408     }
409
410     .collapse {
411         display: block;
412         position: absolute;
413         right: 10px;
414         padding-right: 15px;
415         padding-left: 15px;
416         font-family: 'FontAwesome';
417         font-weight: bolder;
418         font-size: larger;
419         cursor: pointer;
420     }
421
422     .collapse + input, .collapse + input + * {
423         display: none;
424     }
425
426     .collapse + input:checked + * {
427         display: block;
428     }
429 }
430
431 #reply-section {
432     padding-left: 30px;
433
434     .reply-container {
435         margin: 10px 0;
436         padding: 10px;
437         border: 1px dashed darken($contrast, 10%);
438
439         @include btn-transition;
440     }
441
442     button {
443         margin: 0;
444     }
445
446     #all-recipients {
447         color: $black;
448     }
449
450     #all-recipients:focus {
451         background-color: darken($contrast, 10%);
452     }
453
454     #reply-button, #reply-all-button, #forward-button {
455         text-align: center;
456         font-weight: 100;
457         font-size: 1.1em;
458         background: $white;
459         color: $medium_light_grey;
460         padding: 25px;
461         margin: 0;
462
463         @include border-radius(0);
464
465         &:hover {
466             background: darken($contrast, 5%);
467             cursor: pointer;
468         }
469     }
470 }
471
472 .buttons-group {
473     clear: both;
474     margin: 20px 0 0;
475     padding: 0;
476 }
477
478 #draft-save-status {
479     float: right;
480     padding: 0.4rem 1.1rem;
481     color: $lighter_blue;
482 }