/adei/ui

To get this branch, use:
bzr branch http://darksoft.org/webbzr/adei/ui

« back to all changes in this revision

Viewing changes to includes/cropper.1.2/cropper.css

  • Committer: Suren A. Chilingaryan
  • Date: 2008-04-02 10:23:22 UTC
  • Revision ID: csa@dside.dyndns.org-20080402102322-okib92sicg2dx3o3
Initial import

Show diffs side-by-side

added added

removed removed

Lines of Context:
includes/cropper.1.2/cropper.css
 
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
/* 
 
68
 *  FIX MARCHING ANTS IN IE
 
69
 *      As IE <6 tries to load background images we can uncomment the follwoing hack 
 
70
 *  to remove that issue, not as pretty - but is anything in IE?
 
71
 *  And yes I do know that 'filter' is evil, but it will make it look semi decent in IE
 
72
 *
 
73
* html .imgCrop_marqueeHoriz,
 
74
* html .imgCrop_marqueeVert {
 
75
        background: transparent;
 
76
        filter: Invert; 
 
77
}
 
78
* html .imgCrop_marqueeNorth { border-top: 1px dashed #000; }
 
79
* html .imgCrop_marqueeEast  { border-right: 1px dashed #000; }
 
80
* html .imgCrop_marqueeSouth { border-bottom: 1px dashed #000; }
 
81
* html .imgCrop_marqueeWest  { border-left: 1px dashed #000; }
 
82
*/
 
83
 
 
84
.imgCrop_marqueeNorth { top: 0; left: 0; }
 
85
.imgCrop_marqueeEast  { top: 0; right: 0; }
 
86
.imgCrop_marqueeSouth { bottom: 0px; left: 0; }
 
87
.imgCrop_marqueeWest  { top: 0; left: 0; }
 
88
 
 
89
 
 
90
.imgCrop_handle {
 
91
        position: absolute;
 
92
        border: 1px solid #333;
 
93
        width: 6px;
 
94
        height: 6px;
 
95
        background: #FFF;
 
96
        opacity: 0.5;
 
97
        filter:alpha(opacity=50);
 
98
        z-index: 4;
 
99
}
 
100
 
 
101
/* fix IE 5 box model */
 
102
* html .imgCrop_handle {
 
103
        width: 8px;
 
104
        height: 8px;
 
105
        wid\th: 6px;
 
106
        hei\ght: 6px;
 
107
}
 
108
 
 
109
.imgCrop_handleN {
 
110
        top: -3px;
 
111
        left: 0;
 
112
        /* margin-left: 49%;    @done_in_js */
 
113
        cursor: n-resize;
 
114
}
 
115
 
 
116
.imgCrop_handleNE { 
 
117
        top: -3px;
 
118
        right: -3px;
 
119
        cursor: ne-resize;
 
120
}
 
121
 
 
122
.imgCrop_handleE {
 
123
        top: 0;
 
124
        right: -3px;
 
125
        /* margin-top: 49%;    @done_in_js */
 
126
        cursor: e-resize;
 
127
}
 
128
 
 
129
.imgCrop_handleSE {
 
130
        right: -3px;
 
131
        bottom: -3px;
 
132
        cursor: se-resize;
 
133
}
 
134
 
 
135
.imgCrop_handleS {
 
136
        right: 0;
 
137
        bottom: -3px;
 
138
        /* margin-right: 49%; @done_in_js */
 
139
        cursor: s-resize;
 
140
}
 
141
 
 
142
.imgCrop_handleSW {
 
143
        left: -3px;
 
144
        bottom: -3px;
 
145
        cursor: sw-resize;
 
146
}
 
147
 
 
148
.imgCrop_handleW {
 
149
        top: 0;
 
150
        left: -3px;
 
151
        /* margin-top: 49%;  @done_in_js */
 
152
        cursor: w-resize;
 
153
}
 
154
 
 
155
.imgCrop_handleNW {
 
156
        top: -3px;
 
157
        left: -3px;
 
158
        cursor: nw-resize;
 
159
}
 
160
 
 
161
/**
 
162
 * Create an area to click & drag around on as the default browser behaviour is to let you drag the image 
 
163
 */
 
164
.imgCrop_dragArea {
 
165
        width: 100%;
 
166
        height: 100%;
 
167
        z-index: 200;
 
168
        position: absolute;
 
169
        top: 0;
 
170
        left: 0;
 
171
}
 
172
 
 
173
.imgCrop_previewWrap {
 
174
        /* width: 200px;  @done_in_js */
 
175
        /* height: 200px; @done_in_js */
 
176
        overflow: hidden;
 
177
        position: relative;
 
178
}
 
179
 
 
180
.imgCrop_previewWrap img {
 
181
        position: absolute;
 
182
}
 
 
b'\\ No newline at end of file'