cropper.css 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. /*!
  2. * Cropper v3.0.0-rc.2
  3. * https://github.com/fengyuanchen/cropper
  4. *
  5. * Copyright (c) 2017 Fengyuan Chen
  6. * Released under the MIT license
  7. *
  8. * Date: 2017-05-30T05:04:38.958Z
  9. */
  10. .cropper-container {
  11. font-size: 0;
  12. line-height: 0;
  13. position: relative;
  14. -webkit-user-select: none;
  15. -moz-user-select: none;
  16. -ms-user-select: none;
  17. user-select: none;
  18. direction: ltr;
  19. -ms-touch-action: none;
  20. touch-action: none
  21. }
  22. .cropper-container img {
  23. /* Avoid margin top issue (Occur only when margin-top <= -height) */
  24. display: block;
  25. min-width: 0 !important;
  26. max-width: none !important;
  27. min-height: 0 !important;
  28. max-height: none !important;
  29. width: 100%;
  30. height: 100%;
  31. image-orientation: 0deg
  32. }
  33. .cropper-wrap-box,
  34. .cropper-canvas,
  35. .cropper-drag-box,
  36. .cropper-crop-box,
  37. .cropper-modal {
  38. position: absolute;
  39. top: 0;
  40. right: 0;
  41. bottom: 0;
  42. left: 0;
  43. }
  44. .cropper-wrap-box {
  45. overflow: hidden;
  46. }
  47. .cropper-drag-box {
  48. opacity: 0;
  49. background-color: #fff;
  50. }
  51. .cropper-modal {
  52. opacity: .5;
  53. background-color: #000;
  54. }
  55. .cropper-view-box {
  56. display: block;
  57. overflow: hidden;
  58. width: 100%;
  59. height: 100%;
  60. outline: 1px solid #39f;
  61. outline-color: rgba(51, 153, 255, 0.75);
  62. }
  63. .cropper-dashed {
  64. position: absolute;
  65. display: block;
  66. opacity: .5;
  67. border: 0 dashed #eee
  68. }
  69. .cropper-dashed.dashed-h {
  70. top: 33.33333%;
  71. left: 0;
  72. width: 100%;
  73. height: 33.33333%;
  74. border-top-width: 1px;
  75. border-bottom-width: 1px
  76. }
  77. .cropper-dashed.dashed-v {
  78. top: 0;
  79. left: 33.33333%;
  80. width: 33.33333%;
  81. height: 100%;
  82. border-right-width: 1px;
  83. border-left-width: 1px
  84. }
  85. .cropper-center {
  86. position: absolute;
  87. top: 50%;
  88. left: 50%;
  89. display: block;
  90. width: 0;
  91. height: 0;
  92. opacity: .75
  93. }
  94. .cropper-center:before,
  95. .cropper-center:after {
  96. position: absolute;
  97. display: block;
  98. content: ' ';
  99. background-color: #eee
  100. }
  101. .cropper-center:before {
  102. top: 0;
  103. left: -3px;
  104. width: 7px;
  105. height: 1px
  106. }
  107. .cropper-center:after {
  108. top: -3px;
  109. left: 0;
  110. width: 1px;
  111. height: 7px
  112. }
  113. .cropper-face,
  114. .cropper-line,
  115. .cropper-point {
  116. position: absolute;
  117. display: block;
  118. width: 100%;
  119. height: 100%;
  120. opacity: .1;
  121. }
  122. .cropper-face {
  123. top: 0;
  124. left: 0;
  125. background-color: #fff;
  126. }
  127. .cropper-line {
  128. background-color: #39f
  129. }
  130. .cropper-line.line-e {
  131. top: 0;
  132. right: -3px;
  133. width: 5px;
  134. cursor: e-resize
  135. }
  136. .cropper-line.line-n {
  137. top: -3px;
  138. left: 0;
  139. height: 5px;
  140. cursor: n-resize
  141. }
  142. .cropper-line.line-w {
  143. top: 0;
  144. left: -3px;
  145. width: 5px;
  146. cursor: w-resize
  147. }
  148. .cropper-line.line-s {
  149. bottom: -3px;
  150. left: 0;
  151. height: 5px;
  152. cursor: s-resize
  153. }
  154. .cropper-point {
  155. width: 5px;
  156. height: 5px;
  157. opacity: .75;
  158. background-color: #39f
  159. }
  160. .cropper-point.point-e {
  161. top: 50%;
  162. right: -3px;
  163. margin-top: -3px;
  164. cursor: e-resize
  165. }
  166. .cropper-point.point-n {
  167. top: -3px;
  168. left: 50%;
  169. margin-left: -3px;
  170. cursor: n-resize
  171. }
  172. .cropper-point.point-w {
  173. top: 50%;
  174. left: -3px;
  175. margin-top: -3px;
  176. cursor: w-resize
  177. }
  178. .cropper-point.point-s {
  179. bottom: -3px;
  180. left: 50%;
  181. margin-left: -3px;
  182. cursor: s-resize
  183. }
  184. .cropper-point.point-ne {
  185. top: -3px;
  186. right: -3px;
  187. cursor: ne-resize
  188. }
  189. .cropper-point.point-nw {
  190. top: -3px;
  191. left: -3px;
  192. cursor: nw-resize
  193. }
  194. .cropper-point.point-sw {
  195. bottom: -3px;
  196. left: -3px;
  197. cursor: sw-resize
  198. }
  199. .cropper-point.point-se {
  200. right: -3px;
  201. bottom: -3px;
  202. width: 20px;
  203. height: 20px;
  204. cursor: se-resize;
  205. opacity: 1
  206. }
  207. @media (min-width: 768px) {
  208. .cropper-point.point-se {
  209. width: 15px;
  210. height: 15px
  211. }
  212. }
  213. @media (min-width: 992px) {
  214. .cropper-point.point-se {
  215. width: 10px;
  216. height: 10px
  217. }
  218. }
  219. @media (min-width: 1200px) {
  220. .cropper-point.point-se {
  221. width: 5px;
  222. height: 5px;
  223. opacity: .75
  224. }
  225. }
  226. .cropper-point.point-se:before {
  227. position: absolute;
  228. right: -50%;
  229. bottom: -50%;
  230. display: block;
  231. width: 200%;
  232. height: 200%;
  233. content: ' ';
  234. opacity: 0;
  235. background-color: #39f
  236. }
  237. .cropper-invisible {
  238. opacity: 0;
  239. }
  240. .cropper-bg {
  241. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
  242. }
  243. .cropper-hide {
  244. position: absolute;
  245. display: block;
  246. width: 0;
  247. height: 0;
  248. }
  249. .cropper-hidden {
  250. display: none !important;
  251. }
  252. .cropper-move {
  253. cursor: move;
  254. }
  255. .cropper-crop {
  256. cursor: crosshair;
  257. }
  258. .cropper-disabled .cropper-drag-box,
  259. .cropper-disabled .cropper-face,
  260. .cropper-disabled .cropper-line,
  261. .cropper-disabled .cropper-point {
  262. cursor: not-allowed;
  263. }