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