cropper.min.css 5.2 KB

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