jcrop.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. /* jquery.Jcrop.css v0.9.12 - MIT License */
  2. /*
  3. The outer-most container in a typical Jcrop instance
  4. If you are having difficulty with formatting related to styles
  5. on a parent element, place any fixes here or in a like selector
  6. You can also style this element if you want to add a border, etc
  7. A better method for styling can be seen below with .jcrop-light
  8. (Add a class to the holder and style elements for that extended class)
  9. */
  10. .jcrop-holder {
  11. text-align: left;
  12. direction: ltr;
  13. }
  14. /* Selection Border */
  15. .jcrop-vline,
  16. .jcrop-hline {
  17. font-size: 0;
  18. position: absolute;
  19. background: #fff url('../../images/jcrop.gif');
  20. }
  21. .jcrop-vline {
  22. width: 1px !important;
  23. height: 100%;
  24. }
  25. .jcrop-vline.right {
  26. right: 0;
  27. }
  28. .jcrop-hline {
  29. width: 100%;
  30. height: 1px !important;
  31. }
  32. .jcrop-hline.bottom {
  33. bottom: 0;
  34. }
  35. /* Invisible click targets */
  36. .jcrop-tracker {
  37. width: 100%;
  38. height: 100%;
  39. /* disable cut copy paste */
  40. -webkit-user-select: none;
  41. /* "turn off" link highlight */
  42. -webkit-tap-highlight-color: transparent;
  43. /* disable callout, image save panel */
  44. -webkit-touch-callout: none;
  45. }
  46. /* Selection Handles */
  47. .jcrop-handle {
  48. font-size: 1px;
  49. width: 7px;
  50. height: 7px;
  51. border: 1px #eee solid;
  52. background-color: #333;
  53. }
  54. .jcrop-handle.ord-n {
  55. top: 0;
  56. left: 50%;
  57. margin-top: -4px;
  58. margin-left: -4px;
  59. }
  60. .jcrop-handle.ord-s {
  61. bottom: 0;
  62. left: 50%;
  63. margin-bottom: -4px;
  64. margin-left: -4px;
  65. }
  66. .jcrop-handle.ord-e {
  67. top: 50%;
  68. right: 0;
  69. margin-top: -4px;
  70. margin-right: -4px;
  71. }
  72. .jcrop-handle.ord-w {
  73. top: 50%;
  74. left: 0;
  75. margin-top: -4px;
  76. margin-left: -4px;
  77. }
  78. .jcrop-handle.ord-nw {
  79. top: 0;
  80. left: 0;
  81. margin-top: -4px;
  82. margin-left: -4px;
  83. }
  84. .jcrop-handle.ord-ne {
  85. top: 0;
  86. right: 0;
  87. margin-top: -4px;
  88. margin-right: -4px;
  89. }
  90. .jcrop-handle.ord-se {
  91. right: 0;
  92. bottom: 0;
  93. margin-right: -4px;
  94. margin-bottom: -4px;
  95. }
  96. .jcrop-handle.ord-sw {
  97. bottom: 0;
  98. left: 0;
  99. margin-bottom: -4px;
  100. margin-left: -4px;
  101. }
  102. /* Dragbars */
  103. .jcrop-dragbar.ord-n,
  104. .jcrop-dragbar.ord-s {
  105. width: 100%;
  106. height: 7px;
  107. }
  108. .jcrop-dragbar.ord-e,
  109. .jcrop-dragbar.ord-w {
  110. width: 7px;
  111. height: 100%;
  112. }
  113. .jcrop-dragbar.ord-n {
  114. margin-top: -4px;
  115. }
  116. .jcrop-dragbar.ord-s {
  117. bottom: 0;
  118. margin-bottom: -4px;
  119. }
  120. .jcrop-dragbar.ord-e {
  121. right: 0;
  122. margin-right: -4px;
  123. }
  124. .jcrop-dragbar.ord-w {
  125. margin-left: -4px;
  126. }
  127. /* The "jcrop-light" class/extension */
  128. .jcrop-light .jcrop-vline,
  129. .jcrop-light .jcrop-hline {
  130. opacity: .70!important;
  131. background: #fff;
  132. filter: alpha(opacity=70) !important;
  133. }
  134. .jcrop-light .jcrop-handle {
  135. border-color: #fff;
  136. -webkit-border-radius: 3px;
  137. -moz-border-radius: 3px;
  138. border-radius: 3px;
  139. background-color: #000;
  140. }
  141. /* The "jcrop-dark" class/extension */
  142. .jcrop-dark .jcrop-vline,
  143. .jcrop-dark .jcrop-hline {
  144. opacity: .7 !important;
  145. background: #000;
  146. filter: alpha(opacity=70) !important;
  147. }
  148. .jcrop-dark .jcrop-handle {
  149. border-color: #000;
  150. -webkit-border-radius: 3px;
  151. -moz-border-radius: 3px;
  152. border-radius: 3px;
  153. background-color: #fff;
  154. }
  155. /* Simple macro to turn off the antlines */
  156. .solid-line .jcrop-vline,
  157. .solid-line .jcrop-hline {
  158. background: #fff;
  159. }
  160. /* Fix for twitter bootstrap et al. */
  161. .jcrop-holder img,
  162. img.jcrop-preview {
  163. max-width: none;
  164. }
  165. /* Apply these styles only when #preview-pane has
  166. been placed within the Jcrop widget */
  167. .jcrop-holder #preview-pane {
  168. position: absolute;
  169. z-index: 2000;
  170. top: 10px;
  171. right: -280px;
  172. display: block;
  173. padding: 6px;
  174. border: 1px rgba(0, 0, 0, .4) solid;
  175. -webkit-border-radius: 6px;
  176. -moz-border-radius: 6px;
  177. border-radius: 6px;
  178. background-color: white;
  179. }
  180. /* The Javascript code will set the aspect ratio of the crop
  181. area based on the size of the thumbnail preview,
  182. specified here */
  183. #preview-pane .preview-container {
  184. overflow: hidden;
  185. width: 250px;
  186. height: 170px;
  187. }