[TASK] Add missing space between language flag and title language diff
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _element_draguploader.less
1 //
2 // Dropzone Variables
3 //
4 @dropzone-text: #333333;
5 @dropzone-border: #cccccc;
6 @dropzone-margin: 15px 0;
7 @dropzone-hover-border:  #999999;
8
9 @dropzone-hint-title-size: 12px;
10 @dropzone-hint-title-weight: bold;
11
12 @dropzone-close-height: 26px;
13 @dropzone-close-width: 26px;
14 @dropzone-close-size: 14px;
15 @dropzone-close-bg: #eaeaea;
16 @dropzone-close-text: @dropzone-text;
17 @dropzone-close-hover-bg: @brand-danger;
18 @dropzone-close-hover-text: #ffffff;
19
20 @dropzone-icon-size: 16px;
21 @dropzone-icon-height: 40px;
22 @dropzone-icon-width: 40px;
23 @dropzone-icon-radius: 50%;
24 @dropzone-icon-bg: #eeeeee;
25
26 @dropzone-icon-ok-text: #ffffff;
27 @dropzone-icon-ok-bg: @brand-success;
28
29
30 //
31 // Dropzone
32 //
33 .dropzone {
34         position: relative;
35         cursor: pointer;
36         margin: @dropzone-margin;
37         padding: 1.25em;
38         padding-right: @dropzone-close-width + 20px;
39         color: @dropzone-text;
40         border: 1px dashed @dropzone-border;
41         .transition(all 0.3s ease-in-out);
42         &:hover {
43                 border-color: @dropzone-hover-border;
44         }
45 }
46 .dropzone-mask {
47         position: absolute;
48         left: 0;
49         right: 0;
50         bottom: 0;
51         top: 0;
52 }
53
54
55 //
56 // Dropzone Close
57 //
58 .dropzone-close {
59         cursor: pointer;
60         position: absolute;
61         top: 5px;
62         right: 5px;
63         height: @dropzone-close-height;
64         width: @dropzone-close-width;
65         font-family: FontAwesome;
66         font-size: @dropzone-close-size;
67         line-height: @dropzone-close-height;
68         text-align: center;
69         text-rendering: auto;
70         -webkit-font-smoothing: antialiased;
71         -moz-osx-font-smoothing: grayscale;
72         transform: translate(0, 0);
73         overflow: hidden;
74         background-color: @dropzone-close-bg;
75         color: @dropzone-close-text;
76         &:hover {
77                 color: @dropzone-close-hover-text;
78                 background-color: @dropzone-close-hover-bg;
79         }
80         &:before {
81                 content: "\f00d";
82         }
83 }
84
85
86 //
87 // Dropzone Hint
88 //
89 // Markup:
90 // <div class="dropzone-hint">
91 //   <div class="dropzone-hint-media">
92 //     <span class="dropzone-hint-icon"></span>
93 //   </div>
94 //   <div class="dropzone-hint-body">
95 //     <h3 class="dropzone-hint-title">Title</h3>
96 //     <p class="dropzone-hint-message">Message</h3>
97 //   </div>
98 // </div>
99 //
100 .dropzone-hint {
101         display: table;
102 }
103 .dropzone-hint-media,
104 .dropzone-hint-body {
105         display: table-cell;
106         vertical-align: middle;
107 }
108 .dropzone-hint-body {
109         *:first-child {
110                 margin-top: 0;
111         }
112         *:last-child {
113                 margin-bottom: 0;
114         }
115 }
116 .dropzone-hint-media {
117         padding-right: 1em;
118 }
119 .dropzone-hint-icon {
120         height: @dropzone-icon-height;
121         width: @dropzone-icon-width;
122         text-align: center;
123         line-height: @dropzone-icon-height;
124         font-size: @dropzone-icon-size;
125         background-color: @dropzone-icon-bg;
126         border-radius: @dropzone-icon-radius;
127         font-family: FontAwesome;
128         text-rendering: auto;
129         -webkit-font-smoothing: antialiased;
130         -moz-osx-font-smoothing: grayscale;
131         transform: translate(0, 0);
132         &:before {
133                 content: "\f093";
134         }
135 }
136 .dropzone-hint-title {
137         font-size: @dropzone-hint-title-size;
138         font-weight: @dropzone-hint-title-weight;
139         margin-bottom: 0.25em;
140 }
141
142
143 //
144 // Drop progress
145 //
146 .drop-status-ok {
147         .dropzone-hint-icon {
148                 color: @dropzone-icon-ok-text;
149                 background: @dropzone-icon-ok-bg;
150         }
151 }
152 .drop-in-progress {
153         .dropzone-hint-icon {
154                 &:before {
155                         content: "\f063";
156                 }
157         }
158 }
159
160
161 //
162 // Upload Variables
163 //
164 @upload-queue-margin: @dropzone-margin;
165 @upload-queue-progress-bg: @brand-success;
166 @upload-queue-progress-uploading-bg: @brand-info;
167 @upload-queue-progress-error-bg: @brand-danger;
168
169
170 //
171 // Upload queue
172 //
173 .upload-queue {
174         margin: @upload-queue-margin;
175 }
176 .upload-queue-progress {
177         position: relative;
178         padding: 5px;
179         color: #ffffff;
180         background-color: #999999;
181         border: 1px solid rgba(0,0,0,0.15);
182         text-align: right;
183 }
184 .upload-queue-progress-bar {
185         position: absolute;
186         z-index: 1;
187         top: 0;
188         left: 0;
189         bottom: 0;
190         background-color: @upload-queue-progress-bg;
191 }
192 .upload-queue-progress-percentage,
193 .upload-queue-progress-message {
194         display: inline;
195         position: relative;
196         z-index: 2;
197 }
198
199
200 //
201 // Upload filepicker
202 //
203 .upload-file-picker {
204         position: fixed;
205         bottom: 0;
206         right: 0;
207         height: 1px;
208         width: 1px;
209         visibility: hidden;
210 }
211
212
213 //
214 // Upload status
215 //
216 .uploading {
217         .upload-queue-progress-bar {
218                 background-color: @upload-queue-progress-uploading-bg;
219         }
220 }
221 .error {
222         .upload-queue-progress-bar {
223                 background-color: @upload-queue-progress-error-bg;
224         }
225 }