cropper.css 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. /*!
  2. * Cropper.js v1.5.13
  3. * https://fengyuanchen.github.io/cropperjs
  4. *
  5. * Copyright 2015-present Chen Fengyuan
  6. * Released under the MIT license
  7. *
  8. * Date: 2022-11-20T05:30:43.444Z
  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. -webkit-backface-visibility: hidden;
  24. backface-visibility: hidden;
  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: 0.5;
  56. }
  57. .cropper-view-box {
  58. display: block;
  59. height: 100%;
  60. outline: 1px solid #39f;
  61. outline-color: rgba(51, 153, 255, 75%);
  62. overflow: hidden;
  63. width: 100%;
  64. }
  65. .cropper-dashed {
  66. border: 0 dashed #eee;
  67. display: block;
  68. opacity: 0.5;
  69. position: absolute;
  70. }
  71. .cropper-dashed.dashed-h {
  72. border-bottom-width: 1px;
  73. border-top-width: 1px;
  74. height: calc(100% / 3);
  75. left: 0;
  76. top: calc(100% / 3);
  77. width: 100%;
  78. }
  79. .cropper-dashed.dashed-v {
  80. border-left-width: 1px;
  81. border-right-width: 1px;
  82. height: 100%;
  83. left: calc(100% / 3);
  84. top: 0;
  85. width: calc(100% / 3);
  86. }
  87. .cropper-center {
  88. display: block;
  89. height: 0;
  90. left: 50%;
  91. opacity: 0.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: 0.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: 0.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. }
  214. }
  215. @media (min-width: 992px) {
  216. .cropper-point.point-se {
  217. height: 10px;
  218. width: 10px;
  219. }
  220. }
  221. @media (min-width: 1200px) {
  222. .cropper-point.point-se {
  223. height: 5px;
  224. opacity: 0.75;
  225. width: 5px;
  226. }
  227. }
  228. .cropper-point.point-se::before {
  229. background-color: #39f;
  230. bottom: -50%;
  231. content: " ";
  232. display: block;
  233. height: 200%;
  234. opacity: 0;
  235. position: absolute;
  236. right: -50%;
  237. width: 200%;
  238. }
  239. .cropper-invisible {
  240. opacity: 0;
  241. }
  242. .cropper-bg {
  243. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
  244. }
  245. .cropper-hide {
  246. display: block;
  247. height: 0;
  248. position: absolute;
  249. width: 0;
  250. }
  251. .cropper-hidden {
  252. display: none !important;
  253. }
  254. .cropper-move {
  255. cursor: move;
  256. }
  257. .cropper-crop {
  258. cursor: crosshair;
  259. }
  260. .cropper-disabled .cropper-drag-box,
  261. .cropper-disabled .cropper-face,
  262. .cropper-disabled .cropper-line,
  263. .cropper-disabled .cropper-point {
  264. cursor: not-allowed;
  265. }