[BUGFIX] Fix CSS layout of cropper UI for Firefox
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Less / TYPO3 / _element_cropper.less
1 .cropper {
2 .cropper-line {
3 background-color: transparent;
4 }
5
6 .cropper-dashed {
7 border: 1px dashed @color-orange;
8 }
9
10 .cropper-point {
11 background-color: @color-orange;
12
13 &.point-nw {
14 left: 0; /* 3 */
15 top: 0; /* 3 */
16 }
17
18 &.point-w {
19 left: 0; /* 3 */
20 }
21
22 &.point-sw {
23 left: 0; /* 3 */
24 bottom: 0; /* 3 */
25 }
26
27 &.point-ne {
28 right: 0; /* 3 */
29 top: 0; /* 3 */
30 }
31
32 &.point-e {
33 right: 0; /* 3 */
34 }
35
36 &.point-se {
37 right: 0; /* 3 */
38 bottom: 0; /* 3 */
39
40 &:before {
41 background-color: @color-white;
42 }
43 }
44
45 &.point-n {
46 top: 0; /* 3 */
47 }
48
49 &.point-s {
50 bottom: 0; /* 3 */
51 }
52 }
53
54 .cropper-view-box {
55 outline: 1px dashed @color-orange;
56 }
57
58 .cropper-modal {
59 background-color: transparent;
60 }
61
62 .cropper-bg {
63 background-image: data-uri("../Images/cropper-background.png");
64 }
65
66 .cropper-image-container {
67 height: 100% !important;
68 width: 100% !important;
69 max-width: 1000px !important;
70 }
71
72 // Custom styles for cropper radio buttons
73 .ratio-buttons {
74 margin-bottom: 10px;
75
76 .btn {
77 &.btn-default {
78 margin-bottom: 5px;
79 }
80 &:not(.active) .fa {
81 display: none;
82 }
83 }
84 }
85
86 // Cropper style tweaks for Bootstrap .panel
87 .panel-group {
88 [aria-expanded=true] {
89 border-left: 2px solid @color-orange;
90 position: relative;
91 &[data-toggle=collapse] {
92 background-color: #333;
93 }
94 }
95
96 [aria-expanded=false] {
97 border-left: 2px solid #444;
98 position: relative;
99 }
100
101 table, label {
102 color: @color-white;
103 }
104
105 position: relative;
106 margin: -15px;
107 }
108
109 .panel-collapse.collapse {
110 background-color: #2c2c2c !important;
111 border-left: 2px solid @color-orange;
112 }
113
114 .panel-heading {
115 padding: 0;
116
117 .panel-title {
118 > [data-crop-variant] {
119 display: flex;
120 padding: 10px 15px;
121 justify-content: space-between;
122 }
123
124 > a {
125 text-decoration: none !important;
126 user-select: none;
127 font-size: 13px;
128 }
129 }
130 }
131
132 .panel-default > .panel-heading + .panel-collapse > .panel-body {
133 border-top-color: #333;
134 }
135
136 .panel-group,
137 .panel-default .panel-heading,
138 .panel {
139 background: #222222;
140 border: none;
141 color: @color-white;
142 }
143
144 .btn-secondary {
145 color: @color-white;
146 background-color: #777;
147 border-color: #555;
148
149 &:hover,
150 &:focus,
151 &:active,
152 &.active {
153 color: @color-white;
154 background-color: #888;
155 border-color: #444;
156 }
157 }
158
159 .open .dropdown-toggle.btn-secondary {
160 &:extend(.cropper .btn-secondary);
161 }
162
163 /**
164 * Style overrides for CropperJS CSS and additional styles to make cropper look like expected
165 *
166 * 1. Fixes hidden drag/resize handles for cropper
167 * 2. Fixes containment on the jQuery UI resizeable
168 * 3. Offset cropper lines and handles to inside of container
169 */
170 .cropper-container.cropper-bg {
171 overflow: visible; /* 1 */
172 }
173
174 .cropper-crop-box {
175 overflow: hidden; /* 2 */
176
177 &:after {
178 background-color: @color-orange;
179 content: "Cropped area";
180 position: absolute;
181 left: 0;
182 top: 0;
183 font-size: 10px;
184 color: black;
185 height: 16px;
186 width: 100%;
187 max-width: 80px;
188 text-overflow: ellipsis;
189 white-space: nowrap;
190 padding: 0 4px;
191 pointer-events: none;
192 overflow: hidden;
193 }
194 }
195
196
197 .cropper-line {
198 &.line-w {
199 left: 0; /* 3 */
200 }
201
202 &.line-e {
203 right: 0; /* 3 */
204 }
205
206 &.line-n {
207 top: 0; /* 3 */
208 }
209
210 &.line-s {
211 bottom: 0; /* 3 */
212 }
213 }
214
215 // Style overrides for jQueryUI
216 .ui-resizable-handle {
217 &.ui-resizable-n,
218 &.ui-resizable-s,
219 &.ui-resizable-e,
220 &.ui-resizable-w {
221 border-color: transparent;
222 transform: none;
223 }
224
225 &.ui-resizable-e,
226 &.ui-resizable-w {
227 width: 6px;
228 }
229
230 &.ui-resizable-n,
231 &.ui-resizable-s {
232 height: 6px;
233 }
234
235 &.ui-resizable-e {
236 right: 0;
237 }
238
239 &.ui-resizable-w {
240 left: 0;
241 }
242
243 &.ui-resizable-n {
244 top: 0;
245 }
246
247 &.ui-resizable-s {
248 bottom: 0;
249 }
250
251 &.ui-resizable-sw,
252 &.ui-resizable-se,
253 &.ui-resizable-ne,
254 &.ui-resizable-nw {
255 transform: none;
256 background-color: #ccc;
257 height: 6px;
258 width: 6px;
259 }
260
261 &.ui-resizable-nw {
262 top: 0;
263 left: 0;
264 }
265
266 &.ui-resizable-ne {
267 top: 0;
268 right: 0;
269 }
270
271 &.ui-resizable-se {
272 bottom: 0;
273 right: 0;
274 }
275
276 &.ui-resizable-sw {
277 bottom: 0;
278 left: 0;
279 }
280 }
281
282 // Cropper UI-specific styles
283 .cropper-focus-area {
284 cursor: move;
285 height: 200px;
286 width: 200px;
287 background-color: rgba(215, 187, 0, .5);
288 position: absolute;
289 z-index: 999999;
290 opacity: 1;
291 overflow: hidden;
292 transition: background-color 300ms;
293
294 &.has-nodrop,
295 &.has-nodrop:hover {
296 background-color: rgba(211, 35, 46, .6) !important;
297 transition: background-color 300ms;
298 }
299
300 &:hover,
301 &:focus {
302 background-color: rgba(215, 187, 0, .7);
303 }
304
305 &:after {
306 background-color: rgba(255, 255, 255, .95);
307 content: "Focus";
308 position: absolute;
309 left: 0;
310 top: 0;
311 font-size: 10px;
312 color: black;
313 height: 16px;
314 width: 100%;
315 max-width: 44px;
316 text-overflow: ellipsis;
317 white-space: nowrap;
318 padding: 0 4px 0 8px; /* Additional 4px on left due to resize handle on focus area */
319 pointer-events: none;
320 overflow: hidden;
321 }
322 }
323
324 .cropper-cover-area {
325 background: url("../Images/cropper-background-cover-area.svg");
326 pointer-events: none;
327 cursor: not-allowed;
328 position: absolute;
329 opacity: 1;
330 z-index: 99999;
331
332 &:after {
333 background-color: rgba(255, 255, 255, .95);
334 content: "Cover area";
335 position: absolute;
336 left: 0;
337 top: 0;
338 font-size: 10px;
339 color: black;
340 height: 16px;
341 width: 100%;
342 max-width: 80px;
343 text-overflow: ellipsis;
344 white-space: nowrap;
345 padding: 0 4px;
346 pointer-events: none;
347 overflow: hidden;
348 }
349 }
350
351 .cropper-preview-thumbnail {
352 -webkit-user-select: none;
353 -moz-user-select: none;
354 -ms-user-select: none;
355 user-select: none;
356 position: relative;
357 max-width: 100px;
358 max-height: 100px;
359 overflow: hidden;
360
361 &:after {
362 background-color: rgba(0, 0, 0, .5);
363 content: " ";
364 top: 0;
365 left: 0;
366 bottom: 0;
367 right: 0;
368 position: absolute;
369 z-index: 9;
370 }
371
372 &.wide {
373 width: 100px;
374 height: auto;
375 }
376
377 &.tall {
378 width: auto;
379 height: 80px;
380 }
381 }
382
383 .cropper-preview-thumbnail-image {
384 left: 0;
385 top: 0;
386 }
387
388 .wide .cropper-preview-thumbnail-image {
389 width: 100%;
390 height: auto;
391 }
392
393 .tall .cropper-preview-thumbnail-image {
394 width: auto;
395 height: 100%;
396 }
397
398 .cropper-preview-thumbnail-crop-area {
399 border: 1px solid @color-orange;
400 position: absolute;
401 z-index: 10;
402 overflow: hidden;
403 }
404
405 .cropper-preview-thumbnail-focus-area {
406 background-color: rgba(215, 187, 0, .7);
407 position: absolute;
408 z-index: 11;
409 }
410 }
411
412 :root .cropper-preview-thumbnail-crop-image {
413 image-orientation: 0deg;
414 display: block;
415 height: 100%;
416 width: 100%;
417 min-width: 0;
418 max-width: none;
419 min-height: 0;
420 max-height: none;
421 }
422
423 .cropper-preview-container {
424 overflow: hidden;
425 position: relative;
426 img {
427 display: block;
428 position: absolute;
429 width: 100%;
430 min-width: 0 !important;
431 min-height: 0 !important;
432 max-width: none !important;
433 max-height: none !important;
434 }
435 }