jquery.magnify.css 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. /**
  2. * ___ ___ _____ ______ __ __ _____ ______ __ __
  3. * | \/ |/ _ \ / __ \| \ | |_ _| ___| \ / |
  4. * | | / \ | | \__| \| | | | | |___ \ \/ /
  5. * | |\/| | |_| | | ___ | | | | ___| \ /
  6. * | | | | _ | \_/ | |\ |_| |_| | | |
  7. * |__| |__|__| |__|\____/|_|__| \__|_____|__| |__|
  8. *
  9. * magnify.css v0.1.0
  10. *
  11. * Copyright (c) 2017 nzbin
  12. *
  13. */
  14. .magnify-modal {
  15. position: absolute;
  16. width: 320px;
  17. height: 320px;
  18. background-color: #111;
  19. background-color: rgba(0, 0, 0, 0.85);
  20. -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
  21. box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
  22. z-index: 1090;
  23. }
  24. .magnify-header {
  25. position: relative;
  26. height: 40px;
  27. color: #fff;
  28. z-index: 2;
  29. }
  30. .magnify-header .magnify-toolbar {
  31. position: absolute;
  32. top: 0;
  33. right: 0;
  34. width: 80px;
  35. height: 40px;
  36. }
  37. .magnify-title {
  38. margin-right: 80px;
  39. padding: 13px 10px;
  40. font-size: 14px;
  41. line-height: 1;
  42. white-space: nowrap;
  43. overflow: hidden;
  44. text-overflow: ellipsis;
  45. -webkit-user-select: none;
  46. -moz-user-select: none;
  47. -ms-user-select: none;
  48. user-select: none;
  49. cursor: default;
  50. }
  51. .magnify-stage {
  52. position: absolute;
  53. top: 40px;
  54. left: 10px;
  55. bottom: 40px;
  56. right: 10px;
  57. border: 1px solid #ccc;
  58. overflow: hidden;
  59. z-index: 1;
  60. }
  61. .magnify-stage img {
  62. display: inline-block;
  63. position: relative;
  64. }
  65. .magnify-footer {
  66. position: absolute;
  67. bottom: 0;
  68. width: 100%;
  69. height: 40px;
  70. text-align: center;
  71. color: #fff;
  72. z-index: 2;
  73. }
  74. .magnify-footer .magnify-toolbar {
  75. display: inline-block;
  76. height: 40px;
  77. }
  78. .magnify-toolbar {
  79. font-size: 0;
  80. }
  81. .magnify-button {
  82. display: inline-block;
  83. width: 40px;
  84. height: 40px;
  85. margin: 0;
  86. padding: 10px;
  87. border-width: 0;
  88. border-radius: 0;
  89. text-align: center;
  90. font-size: 14px;
  91. background: none;
  92. color: #ccc;
  93. cursor: pointer;
  94. outline: none;
  95. -webkit-box-sizing: border-box;
  96. box-sizing: border-box;
  97. }
  98. .magnify-button:hover {
  99. color: #fff;
  100. }
  101. .magnify-button.magnify-button-close:hover {
  102. background-color: #ff4545;
  103. }
  104. .magnify-button.magnify-button-maximize:hover {
  105. background-color: #525252;
  106. }
  107. .is-grab {
  108. cursor: move;
  109. cursor: -webkit-grab;
  110. cursor: grab;
  111. }
  112. .is-grabbing {
  113. cursor: move;
  114. cursor: -webkit-grabbing;
  115. cursor: grabbing;
  116. }
  117. .resizable-handle-e {
  118. position: absolute;
  119. top: 0;
  120. bottom: 0;
  121. right: -5px;
  122. left: auto;
  123. width: 10px;
  124. z-index: 10;
  125. cursor: e-resize;
  126. }
  127. .resizable-handle-s {
  128. position: absolute;
  129. top: auto;
  130. bottom: -5px;
  131. right: 0;
  132. left: 0;
  133. height: 10px;
  134. z-index: 10;
  135. cursor: s-resize;
  136. }
  137. .resizable-handle-w {
  138. position: absolute;
  139. top: 0;
  140. bottom: 0;
  141. left: -5px;
  142. right: auto;
  143. width: 10px;
  144. z-index: 10;
  145. cursor: w-resize;
  146. }
  147. .resizable-handle-n {
  148. position: absolute;
  149. top: -5px;
  150. bottom: auto;
  151. right: 0;
  152. left: 0;
  153. height: 10px;
  154. z-index: 10;
  155. cursor: n-resize;
  156. }
  157. .resizable-handle-se {
  158. position: absolute;
  159. width: 10px;
  160. height: 10px;
  161. bottom: -5px;
  162. right: -5px;
  163. top: auto;
  164. left: auto;
  165. z-index: 11;
  166. cursor: se-resize;
  167. }
  168. .resizable-handle-sw {
  169. position: absolute;
  170. width: 10px;
  171. height: 10px;
  172. bottom: -5px;
  173. right: auto;
  174. top: auto;
  175. left: -5px;
  176. z-index: 11;
  177. cursor: sw-resize;
  178. }
  179. .resizable-handle-nw {
  180. position: absolute;
  181. width: 10px;
  182. height: 10px;
  183. bottom: auto;
  184. right: auto;
  185. top: -5px;
  186. left: -5px;
  187. z-index: 11;
  188. cursor: nw-resize;
  189. }
  190. .resizable-handle-ne {
  191. position: absolute;
  192. width: 10px;
  193. height: 10px;
  194. bottom: auto;
  195. right: -5px;
  196. top: -5px;
  197. left: auto;
  198. z-index: 11;
  199. cursor: ne-resize;
  200. }
  201. :-webkit-full-screen {
  202. width: 100% !important;
  203. height: 100% !important;
  204. top: 0 !important;
  205. left: 0 !important;
  206. }
  207. :-webkit-full-screen .magnify-header,
  208. :-webkit-full-screen .magnify-footer,
  209. :-webkit-full-screen .resizable-handle {
  210. display: none;
  211. }
  212. :-webkit-full-screen .magnify-stage {
  213. top: 0;
  214. left: 0;
  215. bottom: 0;
  216. right: 0;
  217. border-width: 0;
  218. }
  219. :-moz-full-screen {
  220. width: 100% !important;
  221. height: 100% !important;
  222. top: 0 !important;
  223. left: 0 !important;
  224. }
  225. :-moz-full-screen .magnify-header,
  226. :-moz-full-screen .magnify-footer,
  227. :-moz-full-screen .resizable-handle {
  228. display: none;
  229. }
  230. :-moz-full-screen .magnify-stage {
  231. top: 0;
  232. left: 0;
  233. bottom: 0;
  234. right: 0;
  235. border-width: 0;
  236. }
  237. :-ms-fullscreen {
  238. width: 100% !important;
  239. height: 100% !important;
  240. top: 0 !important;
  241. left: 0 !important;
  242. }
  243. :-ms-fullscreen .magnify-header,
  244. :-ms-fullscreen .magnify-footer,
  245. :-ms-fullscreen .resizable-handle {
  246. display: none;
  247. }
  248. :-ms-fullscreen .magnify-stage {
  249. top: 0;
  250. left: 0;
  251. bottom: 0;
  252. right: 0;
  253. border-width: 0;
  254. }
  255. :full-screen {
  256. width: 100% !important;
  257. height: 100% !important;
  258. top: 0 !important;
  259. left: 0 !important;
  260. }
  261. :full-screen .magnify-header,
  262. :full-screen .magnify-footer,
  263. :full-screen .resizable-handle {
  264. display: none;
  265. }
  266. :full-screen .magnify-stage {
  267. top: 0;
  268. left: 0;
  269. bottom: 0;
  270. right: 0;
  271. border-width: 0;
  272. }
  273. :-webkit-full-screen {
  274. width: 100% !important;
  275. height: 100% !important;
  276. top: 0 !important;
  277. left: 0 !important;
  278. }
  279. :-moz-full-screen {
  280. width: 100% !important;
  281. height: 100% !important;
  282. top: 0 !important;
  283. left: 0 !important;
  284. }
  285. :-ms-fullscreen {
  286. width: 100% !important;
  287. height: 100% !important;
  288. top: 0 !important;
  289. left: 0 !important;
  290. }
  291. :fullscreen {
  292. width: 100% !important;
  293. height: 100% !important;
  294. top: 0 !important;
  295. left: 0 !important;
  296. }
  297. :-webkit-full-screen .magnify-header,
  298. :-webkit-full-screen .magnify-footer,
  299. :-webkit-full-screen .resizable-handle {
  300. display: none;
  301. }
  302. :-moz-full-screen .magnify-header,
  303. :-moz-full-screen .magnify-footer,
  304. :-moz-full-screen .resizable-handle {
  305. display: none;
  306. }
  307. :-ms-fullscreen .magnify-header,
  308. :-ms-fullscreen .magnify-footer,
  309. :-ms-fullscreen .resizable-handle {
  310. display: none;
  311. }
  312. :fullscreen .magnify-header,
  313. :fullscreen .magnify-footer,
  314. :fullscreen .resizable-handle {
  315. display: none;
  316. }
  317. :-webkit-full-screen .magnify-stage {
  318. top: 0;
  319. left: 0;
  320. bottom: 0;
  321. right: 0;
  322. border-width: 0;
  323. }
  324. :-moz-full-screen .magnify-stage {
  325. top: 0;
  326. left: 0;
  327. bottom: 0;
  328. right: 0;
  329. border-width: 0;
  330. }
  331. :-ms-fullscreen .magnify-stage {
  332. top: 0;
  333. left: 0;
  334. bottom: 0;
  335. right: 0;
  336. border-width: 0;
  337. }
  338. :fullscreen .magnify-stage {
  339. top: 0;
  340. left: 0;
  341. bottom: 0;
  342. right: 0;
  343. border-width: 0;
  344. }
  345. /*# sourceMappingURL=jquery.magnify.css.map */