]> git.mxchange.org Git - friendica.git/blob - cropper/cropper.css
Edited view/sv/strings.php via GitHub
[friendica.git] / cropper / cropper.css
1 .imgCrop_wrap {\r
2         /* width: 500px;   @done_in_js */\r
3         /* height: 375px;  @done_in_js */\r
4         position: relative;\r
5         cursor: crosshair;\r
6 }\r
7 \r
8 /* an extra classname is applied for Opera < 9.0 to fix it's lack of opacity support */\r
9 .imgCrop_wrap.opera8 .imgCrop_overlay,\r
10 .imgCrop_wrap.opera8 .imgCrop_clickArea { \r
11         background-color: transparent;\r
12 }\r
13 \r
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 */\r
15 .imgCrop_wrap,\r
16 .imgCrop_wrap * {\r
17         font-size: 0;\r
18 }\r
19 \r
20 .imgCrop_overlay {\r
21         background-color: #000;\r
22         opacity: 0.5;\r
23         filter:alpha(opacity=50);\r
24         position: absolute;\r
25         width: 100%;\r
26         height: 100%;\r
27 }\r
28 \r
29 .imgCrop_selArea {\r
30         position: absolute;\r
31         /* @done_in_js \r
32         top: 20px;\r
33         left: 20px;\r
34         width: 200px;\r
35         height: 200px;\r
36         background: transparent url(castle.jpg) no-repeat  -210px -110px;\r
37         */\r
38         cursor: move;\r
39         z-index: 2;\r
40 }\r
41 \r
42 /* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */\r
43 .imgCrop_clickArea {\r
44         width: 100%;\r
45         height: 100%;\r
46         background-color: #FFF;\r
47         opacity: 0.01;\r
48         filter:alpha(opacity=01);\r
49 }\r
50 \r
51 .imgCrop_marqueeHoriz {\r
52         position: absolute;\r
53         width: 100%;\r
54         height: 1px;\r
55         background: transparent url(marqueeHoriz.gif) repeat-x 0 0;\r
56         z-index: 3;\r
57 }\r
58 \r
59 .imgCrop_marqueeVert {\r
60         position: absolute;\r
61         height: 100%;\r
62         width: 1px;\r
63         background: transparent url(marqueeVert.gif) repeat-y 0 0;\r
64         z-index: 3;\r
65 }\r
66 \r
67 /* \r
68  *  FIX MARCHING ANTS IN IE\r
69  *      As IE <6 tries to load background images we can uncomment the follwoing hack \r
70  *  to remove that issue, not as pretty - but is anything in IE?\r
71  *  And yes I do know that 'filter' is evil, but it will make it look semi decent in IE\r
72  *\r
73 * html .imgCrop_marqueeHoriz,\r
74 * html .imgCrop_marqueeVert {\r
75         background: transparent;\r
76         filter: Invert; \r
77 }\r
78 * html .imgCrop_marqueeNorth { border-top: 1px dashed #000; }\r
79 * html .imgCrop_marqueeEast  { border-right: 1px dashed #000; }\r
80 * html .imgCrop_marqueeSouth { border-bottom: 1px dashed #000; }\r
81 * html .imgCrop_marqueeWest  { border-left: 1px dashed #000; }\r
82 */\r
83 \r
84 .imgCrop_marqueeNorth { top: 0; left: 0; }\r
85 .imgCrop_marqueeEast  { top: 0; right: 0; }\r
86 .imgCrop_marqueeSouth { bottom: 0px; left: 0; }\r
87 .imgCrop_marqueeWest  { top: 0; left: 0; }\r
88 \r
89 \r
90 .imgCrop_handle {\r
91         position: absolute;\r
92         border: 1px solid #333;\r
93         width: 6px;\r
94         height: 6px;\r
95         background: #FFF;\r
96         opacity: 0.5;\r
97         filter:alpha(opacity=50);\r
98         z-index: 4;\r
99 }\r
100 \r
101 /* fix IE 5 box model */\r
102 * html .imgCrop_handle {\r
103         width: 8px;\r
104         height: 8px;\r
105         wid\th: 6px;\r
106         hei\ght: 6px;\r
107 }\r
108 \r
109 .imgCrop_handleN {\r
110         top: -3px;\r
111         left: 0;\r
112         /* margin-left: 49%;    @done_in_js */\r
113         cursor: n-resize;\r
114 }\r
115 \r
116 .imgCrop_handleNE { \r
117         top: -3px;\r
118         right: -3px;\r
119         cursor: ne-resize;\r
120 }\r
121 \r
122 .imgCrop_handleE {\r
123         top: 0;\r
124         right: -3px;\r
125         /* margin-top: 49%;    @done_in_js */\r
126         cursor: e-resize;\r
127 }\r
128 \r
129 .imgCrop_handleSE {\r
130         right: -3px;\r
131         bottom: -3px;\r
132         cursor: se-resize;\r
133 }\r
134 \r
135 .imgCrop_handleS {\r
136         right: 0;\r
137         bottom: -3px;\r
138         /* margin-right: 49%; @done_in_js */\r
139         cursor: s-resize;\r
140 }\r
141 \r
142 .imgCrop_handleSW {\r
143         left: -3px;\r
144         bottom: -3px;\r
145         cursor: sw-resize;\r
146 }\r
147 \r
148 .imgCrop_handleW {\r
149         top: 0;\r
150         left: -3px;\r
151         /* margin-top: 49%;  @done_in_js */\r
152         cursor: w-resize;\r
153 }\r
154 \r
155 .imgCrop_handleNW {\r
156         top: -3px;\r
157         left: -3px;\r
158         cursor: nw-resize;\r
159 }\r
160 \r
161 /**\r
162  * Create an area to click & drag around on as the default browser behaviour is to let you drag the image \r
163  */\r
164 .imgCrop_dragArea {\r
165         width: 100%;\r
166         height: 100%;\r
167         z-index: 200;\r
168         position: absolute;\r
169         top: 0;\r
170         left: 0;\r
171 }\r
172 \r
173 .imgCrop_previewWrap {\r
174         /* width: 200px;  @done_in_js */\r
175         /* height: 200px; @done_in_js */\r
176         overflow: hidden;\r
177         position: relative;\r
178 }\r
179 \r
180 .imgCrop_previewWrap img {\r
181         position: absolute;\r
182 }