|
1 .imgCrop_wrap { |
|
2 /* width: 500px; @done_in_js */ |
|
3 /* height: 375px; @done_in_js */ |
|
4 position: relative; |
|
5 cursor: crosshair; |
|
6 } |
|
7 |
|
8 /* an extra classname is applied for Opera < 9.0 to fix it's lack of opacity support */ |
|
9 .imgCrop_wrap.opera8 .imgCrop_overlay, |
|
10 .imgCrop_wrap.opera8 .imgCrop_clickArea { |
|
11 background-color: transparent; |
|
12 } |
|
13 |
|
14 /* fix for IE displaying all boxes at line-height by default, although they are still 1 pixel high until we combine them with the pointless span */ |
|
15 .imgCrop_wrap, |
|
16 .imgCrop_wrap * { |
|
17 font-size: 0; |
|
18 } |
|
19 |
|
20 .imgCrop_overlay { |
|
21 background-color: #000; |
|
22 opacity: 0.5; |
|
23 filter:alpha(opacity=50); |
|
24 position: absolute; |
|
25 width: 100%; |
|
26 height: 100%; |
|
27 } |
|
28 |
|
29 .imgCrop_selArea { |
|
30 position: absolute; |
|
31 /* @done_in_js |
|
32 top: 20px; |
|
33 left: 20px; |
|
34 width: 200px; |
|
35 height: 200px; |
|
36 background: transparent url(castle.jpg) no-repeat -210px -110px; |
|
37 */ |
|
38 cursor: move; |
|
39 z-index: 2; |
|
40 } |
|
41 |
|
42 /* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */ |
|
43 .imgCrop_clickArea { |
|
44 width: 100%; |
|
45 height: 100%; |
|
46 background-color: #FFF; |
|
47 opacity: 0.01; |
|
48 filter:alpha(opacity=01); |
|
49 } |
|
50 |
|
51 .imgCrop_marqueeHoriz { |
|
52 position: absolute; |
|
53 width: 100%; |
|
54 height: 1px; |
|
55 background: transparent url(marqueeHoriz.gif) repeat-x 0 0; |
|
56 z-index: 3; |
|
57 } |
|
58 |
|
59 .imgCrop_marqueeVert { |
|
60 position: absolute; |
|
61 height: 100%; |
|
62 width: 1px; |
|
63 background: transparent url(marqueeVert.gif) repeat-y 0 0; |
|
64 z-index: 3; |
|
65 } |
|
66 |
|
67 .imgCrop_marqueeNorth { top: 0; left: 0; } |
|
68 .imgCrop_marqueeEast { top: 0; right: 0; } |
|
69 .imgCrop_marqueeSouth { bottom: 0px; left: 0; } |
|
70 .imgCrop_marqueeWest { top: 0; left: 0; } |
|
71 |
|
72 |
|
73 .imgCrop_handle { |
|
74 position: absolute; |
|
75 border: 1px solid #333; |
|
76 width: 6px; |
|
77 height: 6px; |
|
78 background: #FFF; |
|
79 opacity: 0.5; |
|
80 filter:alpha(opacity=50); |
|
81 z-index: 4; |
|
82 } |
|
83 |
|
84 /* fix IE 5 box model */ |
|
85 * html .imgCrop_handle { |
|
86 width: 8px; |
|
87 height: 8px; |
|
88 wid\th: 6px; |
|
89 hei\ght: 6px; |
|
90 } |
|
91 |
|
92 .imgCrop_handleN { |
|
93 top: -3px; |
|
94 left: 0; |
|
95 /* margin-left: 49%; @done_in_js */ |
|
96 cursor: n-resize; |
|
97 } |
|
98 |
|
99 .imgCrop_handleNE { |
|
100 top: -3px; |
|
101 right: -3px; |
|
102 cursor: ne-resize; |
|
103 } |
|
104 |
|
105 .imgCrop_handleE { |
|
106 top: 0; |
|
107 right: -3px; |
|
108 /* margin-top: 49%; @done_in_js */ |
|
109 cursor: e-resize; |
|
110 } |
|
111 |
|
112 .imgCrop_handleSE { |
|
113 right: -3px; |
|
114 bottom: -3px; |
|
115 cursor: se-resize; |
|
116 } |
|
117 |
|
118 .imgCrop_handleS { |
|
119 right: 0; |
|
120 bottom: -3px; |
|
121 /* margin-right: 49%; @done_in_js */ |
|
122 cursor: s-resize; |
|
123 } |
|
124 |
|
125 .imgCrop_handleSW { |
|
126 left: -3px; |
|
127 bottom: -3px; |
|
128 cursor: sw-resize; |
|
129 } |
|
130 |
|
131 .imgCrop_handleW { |
|
132 top: 0; |
|
133 left: -3px; |
|
134 /* margin-top: 49%; @done_in_js */ |
|
135 cursor: e-resize; |
|
136 } |
|
137 |
|
138 .imgCrop_handleNW { |
|
139 top: -3px; |
|
140 left: -3px; |
|
141 cursor: nw-resize; |
|
142 } |
|
143 |
|
144 /** |
|
145 * Create an area to click & drag around on as the default browser behaviour is to let you drag the image |
|
146 */ |
|
147 .imgCrop_dragArea { |
|
148 width: 100%; |
|
149 height: 100%; |
|
150 z-index: 200; |
|
151 position: absolute; |
|
152 top: 0; |
|
153 left: 0; |
|
154 } |
|
155 |
|
156 .imgCrop_previewWrap { |
|
157 /* width: 200px; @done_in_js */ |
|
158 /* height: 200px; @done_in_js */ |
|
159 overflow: hidden; |
|
160 position: relative; |
|
161 } |
|
162 |
|
163 .imgCrop_previewWrap img { |
|
164 position: absolute; |
|
165 } |