Cropper.css 5.0 KB

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