1 | .ReactCrop {
|
2 | position: relative;
|
3 | display: inline-block;
|
4 | cursor: crosshair;
|
5 | overflow: hidden;
|
6 | max-width: 100%; }
|
7 | .ReactCrop:focus {
|
8 | outline: none; }
|
9 | .ReactCrop--disabled, .ReactCrop--locked {
|
10 | cursor: inherit; }
|
11 | .ReactCrop__image {
|
12 | display: block;
|
13 | max-width: 100%;
|
14 | touch-action: manipulation; }
|
15 | .ReactCrop__crop-selection {
|
16 | position: absolute;
|
17 | top: 0;
|
18 | left: 0;
|
19 | transform: translate3d(0, 0, 0);
|
20 | box-sizing: border-box;
|
21 | cursor: move;
|
22 | box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
|
23 | touch-action: manipulation;
|
24 | border: 1px solid;
|
25 | border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==");
|
26 | border-image-slice: 1;
|
27 | border-image-repeat: repeat; }
|
28 | .ReactCrop--disabled .ReactCrop__crop-selection {
|
29 | cursor: inherit; }
|
30 | .ReactCrop--circular-crop .ReactCrop__crop-selection {
|
31 | border-radius: 50%;
|
32 | box-shadow: 0px 0px 1px 1px white, 0 0 0 9999em rgba(0, 0, 0, 0.5); }
|
33 | .ReactCrop--invisible-crop .ReactCrop__crop-selection {
|
34 | display: none; }
|
35 | .ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
|
36 | content: '';
|
37 | display: block;
|
38 | position: absolute;
|
39 | background-color: rgba(255, 255, 255, 0.4); }
|
40 | .ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after {
|
41 | width: 1px;
|
42 | height: 100%; }
|
43 | .ReactCrop__rule-of-thirds-vt::before {
|
44 | left: 33.3333%;
|
45 | left: calc(100% / 3); }
|
46 | .ReactCrop__rule-of-thirds-vt::after {
|
47 | left: 66.6666%;
|
48 | left: calc(100% / 3 * 2); }
|
49 | .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
|
50 | width: 100%;
|
51 | height: 1px; }
|
52 | .ReactCrop__rule-of-thirds-hz::before {
|
53 | top: 33.3333%;
|
54 | top: calc(100% / 3); }
|
55 | .ReactCrop__rule-of-thirds-hz::after {
|
56 | top: 66.6666%;
|
57 | top: calc(100% / 3 * 2); }
|
58 | .ReactCrop__drag-handle {
|
59 | position: absolute; }
|
60 | .ReactCrop__drag-handle::after {
|
61 | position: absolute;
|
62 | content: '';
|
63 | display: block;
|
64 | width: 10px;
|
65 | height: 10px;
|
66 | background-color: rgba(0, 0, 0, 0.2);
|
67 | border: 1px solid rgba(255, 255, 255, 0.7);
|
68 | box-sizing: border-box;
|
69 | outline: 1px solid transparent; }
|
70 | .ReactCrop .ord-nw {
|
71 | top: 0;
|
72 | left: 0;
|
73 | margin-top: -5px;
|
74 | margin-left: -5px;
|
75 | cursor: nw-resize; }
|
76 | .ReactCrop .ord-nw::after {
|
77 | top: 0;
|
78 | left: 0; }
|
79 | .ReactCrop .ord-n {
|
80 | top: 0;
|
81 | left: 50%;
|
82 | margin-top: -5px;
|
83 | margin-left: -5px;
|
84 | cursor: n-resize; }
|
85 | .ReactCrop .ord-n::after {
|
86 | top: 0; }
|
87 | .ReactCrop .ord-ne {
|
88 | top: 0;
|
89 | right: 0;
|
90 | margin-top: -5px;
|
91 | margin-right: -5px;
|
92 | cursor: ne-resize; }
|
93 | .ReactCrop .ord-ne::after {
|
94 | top: 0;
|
95 | right: 0; }
|
96 | .ReactCrop .ord-e {
|
97 | top: 50%;
|
98 | right: 0;
|
99 | margin-top: -5px;
|
100 | margin-right: -5px;
|
101 | cursor: e-resize; }
|
102 | .ReactCrop .ord-e::after {
|
103 | right: 0; }
|
104 | .ReactCrop .ord-se {
|
105 | bottom: 0;
|
106 | right: 0;
|
107 | margin-bottom: -5px;
|
108 | margin-right: -5px;
|
109 | cursor: se-resize; }
|
110 | .ReactCrop .ord-se::after {
|
111 | bottom: 0;
|
112 | right: 0; }
|
113 | .ReactCrop .ord-s {
|
114 | bottom: 0;
|
115 | left: 50%;
|
116 | margin-bottom: -5px;
|
117 | margin-left: -5px;
|
118 | cursor: s-resize; }
|
119 | .ReactCrop .ord-s::after {
|
120 | bottom: 0; }
|
121 | .ReactCrop .ord-sw {
|
122 | bottom: 0;
|
123 | left: 0;
|
124 | margin-bottom: -5px;
|
125 | margin-left: -5px;
|
126 | cursor: sw-resize; }
|
127 | .ReactCrop .ord-sw::after {
|
128 | bottom: 0;
|
129 | left: 0; }
|
130 | .ReactCrop .ord-w {
|
131 | top: 50%;
|
132 | left: 0;
|
133 | margin-top: -5px;
|
134 | margin-left: -5px;
|
135 | cursor: w-resize; }
|
136 | .ReactCrop .ord-w::after {
|
137 | left: 0; }
|
138 | .ReactCrop__disabled .ReactCrop__drag-handle {
|
139 | cursor: inherit; }
|
140 | .ReactCrop__drag-bar {
|
141 | position: absolute; }
|
142 | .ReactCrop__drag-bar.ord-n {
|
143 | top: 0;
|
144 | left: 0;
|
145 | width: 100%;
|
146 | height: 6px;
|
147 | margin-top: -3px; }
|
148 | .ReactCrop__drag-bar.ord-e {
|
149 | right: 0;
|
150 | top: 0;
|
151 | width: 6px;
|
152 | height: 100%;
|
153 | margin-right: -3px; }
|
154 | .ReactCrop__drag-bar.ord-s {
|
155 | bottom: 0;
|
156 | left: 0;
|
157 | width: 100%;
|
158 | height: 6px;
|
159 | margin-bottom: -3px; }
|
160 | .ReactCrop__drag-bar.ord-w {
|
161 | top: 0;
|
162 | left: 0;
|
163 | width: 6px;
|
164 | height: 100%;
|
165 | margin-left: -3px; }
|
166 | .ReactCrop--new-crop .ReactCrop__drag-bar,
|
167 | .ReactCrop--new-crop .ReactCrop__drag-handle,
|
168 | .ReactCrop--fixed-aspect .ReactCrop__drag-bar {
|
169 | display: none; }
|
170 | .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
|
171 | .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
|
172 | .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
|
173 | .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
|
174 | display: none; }
|
175 | @media (pointer: coarse) {
|
176 | .ReactCrop .ord-n,
|
177 | .ReactCrop .ord-e,
|
178 | .ReactCrop .ord-s,
|
179 | .ReactCrop .ord-w {
|
180 | display: none; }
|
181 | .ReactCrop__drag-handle {
|
182 | width: 24px;
|
183 | height: 24px; } }
|