Нема описа

um-crop.css 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. .cropper-container {
  2. position: relative;
  3. overflow: hidden;
  4. -webkit-user-select: none;
  5. -moz-user-select: none;
  6. -ms-user-select: none;
  7. user-select: none;
  8. -webkit-tap-highlight-color: transparent;
  9. -webkit-touch-callout: none;
  10. }
  11. .cropper-container img {
  12. width: 100%;
  13. height: 100%;
  14. min-width: 0 !important;
  15. min-height: 0 !important;
  16. max-width: none !important;
  17. max-height: none !important;
  18. }
  19. .cropper-modal,
  20. .cropper-canvas {
  21. position: absolute;
  22. top: 0;
  23. right: 0;
  24. bottom: 0;
  25. left: 0;
  26. }
  27. .cropper-canvas {
  28. background-color: #fff;
  29. opacity: 0;
  30. filter: alpha(opacity=0);
  31. }
  32. .cropper-modal {
  33. background-color: #000;
  34. opacity: .5;
  35. filter: alpha(opacity=50);
  36. }
  37. .cropper-dragger {
  38. position: absolute;
  39. top: 10%;
  40. left: 10%;
  41. width: 80%;
  42. height: 80%;
  43. }
  44. .cropper-viewer {
  45. display: block;
  46. width: 100%;
  47. height: 100%;
  48. overflow: hidden;
  49. outline-width: 1px;
  50. outline-style: solid;
  51. outline-color: #69f;
  52. outline-color: rgba(51, 102, 255, .75);
  53. }
  54. .cropper-dashed {
  55. position: absolute;
  56. display: block;
  57. border: 0 dashed #fff;
  58. opacity: .5;
  59. filter: alpha(opacity=50);
  60. }
  61. .cropper-dashed.dashed-h {
  62. top: 33.3%;
  63. left: 0;
  64. width: 100%;
  65. height: 33.3%;
  66. border-top-width: 1px;
  67. border-bottom-width: 1px;
  68. }
  69. .cropper-dashed.dashed-v {
  70. top: 0;
  71. left: 33.3%;
  72. width: 33.3%;
  73. height: 100%;
  74. border-right-width: 1px;
  75. border-left-width: 1px;
  76. }
  77. .cropper-face,
  78. .cropper-line,
  79. .cropper-point {
  80. position: absolute;
  81. display: block;
  82. width: 100%;
  83. height: 100%;
  84. opacity: .1;
  85. filter: alpha(opacity=10);
  86. }
  87. .cropper-face {
  88. top: 0;
  89. left: 0;
  90. cursor: move;
  91. background-color: #fff;
  92. }
  93. .cropper-line {
  94. background-color: #69f;
  95. }
  96. .cropper-line.line-e {
  97. top: 0;
  98. right: -3px;
  99. width: 5px;
  100. cursor: e-resize;
  101. }
  102. .cropper-line.line-n {
  103. top: -3px;
  104. left: 0;
  105. height: 5px;
  106. cursor: n-resize;
  107. }
  108. .cropper-line.line-w {
  109. top: 0;
  110. left: -3px;
  111. width: 5px;
  112. cursor: w-resize;
  113. }
  114. .cropper-line.line-s {
  115. bottom: -3px;
  116. left: 0;
  117. height: 5px;
  118. cursor: s-resize;
  119. }
  120. .cropper-point {
  121. width: 5px;
  122. height: 5px;
  123. background-color: #69f;
  124. opacity: .75;
  125. filter: alpha(opacity=75);
  126. }
  127. .cropper-point.point-e {
  128. top: 50%;
  129. right: -3px;
  130. margin-top: -3px;
  131. cursor: e-resize;
  132. }
  133. .cropper-point.point-n {
  134. top: -3px;
  135. left: 50%;
  136. margin-left: -3px;
  137. cursor: n-resize;
  138. }
  139. .cropper-point.point-w {
  140. top: 50%;
  141. left: -3px;
  142. margin-top: -3px;
  143. cursor: w-resize;
  144. }
  145. .cropper-point.point-s {
  146. bottom: -3px;
  147. left: 50%;
  148. margin-left: -3px;
  149. cursor: s-resize;
  150. }
  151. .cropper-point.point-ne {
  152. top: -3px;
  153. right: -3px;
  154. cursor: ne-resize;
  155. }
  156. .cropper-point.point-nw {
  157. top: -3px;
  158. left: -3px;
  159. cursor: nw-resize;
  160. }
  161. .cropper-point.point-sw {
  162. bottom: -3px;
  163. left: -3px;
  164. cursor: sw-resize;
  165. }
  166. .cropper-point.point-se {
  167. right: -3px;
  168. bottom: -3px;
  169. width: 20px;
  170. height: 20px;
  171. cursor: se-resize;
  172. opacity: 1;
  173. filter: alpha(opacity=100);
  174. }
  175. .cropper-point.point-se:before {
  176. position: absolute;
  177. right: -50%;
  178. bottom: -50%;
  179. display: block;
  180. width: 200%;
  181. height: 200%;
  182. content: " ";
  183. background-color: #69f;
  184. opacity: 0;
  185. filter: alpha(opacity=0);
  186. }
  187. @media (min-width: 768px) {
  188. .cropper-point.point-se {
  189. width: 15px;
  190. height: 15px;
  191. }
  192. }
  193. @media (min-width: 992px) {
  194. .cropper-point.point-se {
  195. width: 10px;
  196. height: 10px;
  197. }
  198. }
  199. @media (min-width: 1200px) {
  200. .cropper-point.point-se {
  201. width: 5px;
  202. height: 5px;
  203. opacity: .75;
  204. filter: alpha(opacity=75);
  205. }
  206. }
  207. /* Helper classes for JavaScript */
  208. .cropper-hidden {
  209. display: none !important;
  210. }
  211. .cropper-invisible {
  212. position: fixed;
  213. top: 0;
  214. left: 0;
  215. z-index: -1;
  216. width: auto !important;
  217. max-width: none !important;
  218. height: auto !important;
  219. max-height: none !important;
  220. opacity: 0;
  221. filter: alpha(opacity=0);
  222. }
  223. .cropper-move {
  224. cursor: move;
  225. }
  226. .cropper-crop {
  227. cursor: crosshair;
  228. }
  229. .cropper-disabled .cropper-canvas,
  230. .cropper-disabled .cropper-face,
  231. .cropper-disabled .cropper-line,
  232. .cropper-disabled .cropper-point {
  233. cursor: not-allowed;
  234. }