projects.mako.cc - editimage_extension/blob - 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 }