You are here

jquery.Jcrop.css in Imagefield Crop 7

/* jquery.Jcrop.css v0.9.12 - MIT License */
/*
  The outer-most container in a typical Jcrop instance
  If you are having difficulty with formatting related to styles
  on a parent element, place any fixes here or in a like selector

  You can also style this element if you want to add a border, etc
  A better method for styling can be seen below with .jcrop-light
  (Add a class to the holder and style elements for that extended class)
*/
.jcrop-holder {
  direction: ltr;
  text-align: left;
}
/* Selection Border */
.jcrop-vline,
.jcrop-hline {
  background: #ffffff url("Jcrop.gif");
  font-size: 0;
  position: absolute;
}
.jcrop-vline {
  height: 100%;
  width: 1px !important;
}
.jcrop-vline.right {
  right: 0;
}
.jcrop-hline {
  height: 1px !important;
  width: 100%;
}
.jcrop-hline.bottom {
  bottom: 0;
}
/* Invisible click targets */
.jcrop-tracker {
  height: 100%;
  width: 100%;
  /* "turn off" link highlight */
  -webkit-tap-highlight-color: transparent;
  /* disable callout, image save panel */
  -webkit-touch-callout: none;
  /* disable cut copy paste */
  -webkit-user-select: none;
}
/* Selection Handles */
.jcrop-handle {
  background-color: #333333;
  border: 1px #eeeeee solid;
  width: 7px;
  height: 7px;
  font-size: 1px;
}
.jcrop-handle.ord-n {
  left: 50%;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -4px;
  margin-left: -4px;
}
.jcrop-handle.ord-e {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 50%;
}
.jcrop-handle.ord-w {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 50%;
}
.jcrop-handle.ord-nw {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-ne {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 0;
}
.jcrop-handle.ord-se {
  bottom: 0;
  margin-bottom: -4px;
  margin-right: -4px;
  right: 0;
}
.jcrop-handle.ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -4px;
  margin-left: -4px;
}
/* Dragbars */
.jcrop-dragbar.ord-n,
.jcrop-dragbar.ord-s {
  height: 7px;
  width: 100%;
}
.jcrop-dragbar.ord-e,
.jcrop-dragbar.ord-w {
  height: 100%;
  width: 7px;
}
.jcrop-dragbar.ord-n {
  margin-top: -4px;
}
.jcrop-dragbar.ord-s {
  bottom: 0;
  margin-bottom: -4px;
}
.jcrop-dragbar.ord-e {
  margin-right: -4px;
  right: 0;
}
.jcrop-dragbar.ord-w {
  margin-left: -4px;
}
/* The "jcrop-light" class/extension */
.jcrop-light .jcrop-vline,
.jcrop-light .jcrop-hline {
  background: #ffffff;
  filter: alpha(opacity=70) !important;
  opacity: .70!important;
}
.jcrop-light .jcrop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #000000;
  border-color: #ffffff;
  border-radius: 3px;
}
/* The "jcrop-dark" class/extension */
.jcrop-dark .jcrop-vline,
.jcrop-dark .jcrop-hline {
  background: #000000;
  filter: alpha(opacity=70) !important;
  opacity: 0.7 !important;
}
.jcrop-dark .jcrop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #ffffff;
  border-color: #000000;
  border-radius: 3px;
}
/* Simple macro to turn off the antlines */
.solid-line .jcrop-vline,
.solid-line .jcrop-hline {
  background: #ffffff;
}
/* Fix for twitter bootstrap et al. */
.jcrop-holder img,
img.jcrop-preview {
  max-width: none;
}

File

Jcrop/css/jquery.Jcrop.css
View source
  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. direction: ltr;
  12. text-align: left;
  13. }
  14. /* Selection Border */
  15. .jcrop-vline,
  16. .jcrop-hline {
  17. background: #ffffff url("Jcrop.gif");
  18. font-size: 0;
  19. position: absolute;
  20. }
  21. .jcrop-vline {
  22. height: 100%;
  23. width: 1px !important;
  24. }
  25. .jcrop-vline.right {
  26. right: 0;
  27. }
  28. .jcrop-hline {
  29. height: 1px !important;
  30. width: 100%;
  31. }
  32. .jcrop-hline.bottom {
  33. bottom: 0;
  34. }
  35. /* Invisible click targets */
  36. .jcrop-tracker {
  37. height: 100%;
  38. width: 100%;
  39. /* "turn off" link highlight */
  40. -webkit-tap-highlight-color: transparent;
  41. /* disable callout, image save panel */
  42. -webkit-touch-callout: none;
  43. /* disable cut copy paste */
  44. -webkit-user-select: none;
  45. }
  46. /* Selection Handles */
  47. .jcrop-handle {
  48. background-color: #333333;
  49. border: 1px #eeeeee solid;
  50. width: 7px;
  51. height: 7px;
  52. font-size: 1px;
  53. }
  54. .jcrop-handle.ord-n {
  55. left: 50%;
  56. margin-left: -4px;
  57. margin-top: -4px;
  58. top: 0;
  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. margin-right: -4px;
  68. margin-top: -4px;
  69. right: 0;
  70. top: 50%;
  71. }
  72. .jcrop-handle.ord-w {
  73. left: 0;
  74. margin-left: -4px;
  75. margin-top: -4px;
  76. top: 50%;
  77. }
  78. .jcrop-handle.ord-nw {
  79. left: 0;
  80. margin-left: -4px;
  81. margin-top: -4px;
  82. top: 0;
  83. }
  84. .jcrop-handle.ord-ne {
  85. margin-right: -4px;
  86. margin-top: -4px;
  87. right: 0;
  88. top: 0;
  89. }
  90. .jcrop-handle.ord-se {
  91. bottom: 0;
  92. margin-bottom: -4px;
  93. margin-right: -4px;
  94. right: 0;
  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. height: 7px;
  106. width: 100%;
  107. }
  108. .jcrop-dragbar.ord-e,
  109. .jcrop-dragbar.ord-w {
  110. height: 100%;
  111. width: 7px;
  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. margin-right: -4px;
  122. right: 0;
  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. background: #ffffff;
  131. filter: alpha(opacity=70) !important;
  132. opacity: .70!important;
  133. }
  134. .jcrop-light .jcrop-handle {
  135. -moz-border-radius: 3px;
  136. -webkit-border-radius: 3px;
  137. background-color: #000000;
  138. border-color: #ffffff;
  139. border-radius: 3px;
  140. }
  141. /* The "jcrop-dark" class/extension */
  142. .jcrop-dark .jcrop-vline,
  143. .jcrop-dark .jcrop-hline {
  144. background: #000000;
  145. filter: alpha(opacity=70) !important;
  146. opacity: 0.7 !important;
  147. }
  148. .jcrop-dark .jcrop-handle {
  149. -moz-border-radius: 3px;
  150. -webkit-border-radius: 3px;
  151. background-color: #ffffff;
  152. border-color: #000000;
  153. border-radius: 3px;
  154. }
  155. /* Simple macro to turn off the antlines */
  156. .solid-line .jcrop-vline,
  157. .solid-line .jcrop-hline {
  158. background: #ffffff;
  159. }
  160. /* Fix for twitter bootstrap et al. */
  161. .jcrop-holder img,
  162. img.jcrop-preview {
  163. max-width: none;
  164. }