You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

164 lines
2.9 KiB

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