cropper.css 4.5 KB

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