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