wp-includes/js/crop/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 its 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 }