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