viewer.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. /*!
  2. * Viewer.js v1.6.2
  3. * https://fengyuanchen.github.io/viewerjs
  4. *
  5. * Copyright 2015-present Chen Fengyuan
  6. * Released under the MIT license
  7. *
  8. * Date: 2020-08-30T02:26:54.370Z
  9. */
  10. .viewer-zoom-in::before,
  11. .viewer-zoom-out::before,
  12. .viewer-one-to-one::before,
  13. .viewer-reset::before,
  14. .viewer-prev::before,
  15. .viewer-play::before,
  16. .viewer-next::before,
  17. .viewer-rotate-left::before,
  18. .viewer-rotate-right::before,
  19. .viewer-flip-horizontal::before,
  20. .viewer-flip-vertical::before,
  21. .viewer-fullscreen::before,
  22. .viewer-fullscreen-exit::before,
  23. .viewer-close::before {
  24. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC');
  25. background-repeat: no-repeat;
  26. background-size: 280px;
  27. color: transparent;
  28. display: block;
  29. font-size: 0;
  30. height: 20px;
  31. line-height: 0;
  32. width: 20px;
  33. }
  34. .viewer-zoom-in::before {
  35. background-position: 0 0;
  36. content: 'Zoom In';
  37. }
  38. .viewer-zoom-out::before {
  39. background-position: -20px 0;
  40. content: 'Zoom Out';
  41. }
  42. .viewer-one-to-one::before {
  43. background-position: -40px 0;
  44. content: 'One to One';
  45. }
  46. .viewer-reset::before {
  47. background-position: -60px 0;
  48. content: 'Reset';
  49. }
  50. .viewer-prev::before {
  51. background-position: -80px 0;
  52. content: 'Previous';
  53. }
  54. .viewer-play::before {
  55. background-position: -100px 0;
  56. content: 'Play';
  57. }
  58. .viewer-next::before {
  59. background-position: -120px 0;
  60. content: 'Next';
  61. }
  62. .viewer-rotate-left::before {
  63. background-position: -140px 0;
  64. content: 'Rotate Left';
  65. }
  66. .viewer-rotate-right::before {
  67. background-position: -160px 0;
  68. content: 'Rotate Right';
  69. }
  70. .viewer-flip-horizontal::before {
  71. background-position: -180px 0;
  72. content: 'Flip Horizontal';
  73. }
  74. .viewer-flip-vertical::before {
  75. background-position: -200px 0;
  76. content: 'Flip Vertical';
  77. }
  78. .viewer-fullscreen::before {
  79. background-position: -220px 0;
  80. content: 'Enter Full Screen';
  81. }
  82. .viewer-fullscreen-exit::before {
  83. background-position: -240px 0;
  84. content: 'Exit Full Screen';
  85. }
  86. .viewer-close::before {
  87. background-position: -260px 0;
  88. content: 'Close';
  89. }
  90. .viewer-container {
  91. bottom: 0;
  92. direction: ltr;
  93. font-size: 0;
  94. left: 0;
  95. line-height: 0;
  96. overflow: hidden;
  97. position: absolute;
  98. right: 0;
  99. -webkit-tap-highlight-color: transparent;
  100. top: 0;
  101. -ms-touch-action: none;
  102. touch-action: none;
  103. -webkit-touch-callout: none;
  104. -webkit-user-select: none;
  105. -moz-user-select: none;
  106. -ms-user-select: none;
  107. user-select: none;
  108. }
  109. .viewer-container::-moz-selection,
  110. .viewer-container *::-moz-selection {
  111. background-color: transparent;
  112. }
  113. .viewer-container::selection,
  114. .viewer-container *::selection {
  115. background-color: transparent;
  116. }
  117. .viewer-container img {
  118. display: block;
  119. height: auto;
  120. max-height: none !important;
  121. max-width: none !important;
  122. min-height: 0 !important;
  123. min-width: 0 !important;
  124. width: 100%;
  125. }
  126. .viewer-canvas {
  127. bottom: 0;
  128. left: 0;
  129. overflow: hidden;
  130. position: absolute;
  131. right: 0;
  132. top: 0;
  133. }
  134. .viewer-canvas > img {
  135. height: auto;
  136. margin: 15px auto;
  137. max-width: 90% !important;
  138. width: auto;
  139. }
  140. .viewer-footer {
  141. bottom: 0;
  142. left: 0;
  143. overflow: hidden;
  144. position: absolute;
  145. right: 0;
  146. text-align: center;
  147. }
  148. .viewer-navbar {
  149. background-color: rgba(0, 0, 0, 0.5);
  150. overflow: hidden;
  151. }
  152. .viewer-list {
  153. -webkit-box-sizing: content-box;
  154. box-sizing: content-box;
  155. height: 50px;
  156. margin: 0;
  157. overflow: hidden;
  158. padding: 1px 0;
  159. }
  160. .viewer-list > li {
  161. color: transparent;
  162. cursor: pointer;
  163. float: left;
  164. font-size: 0;
  165. height: 50px;
  166. line-height: 0;
  167. opacity: 0.5;
  168. overflow: hidden;
  169. -webkit-transition: opacity 0.15s;
  170. transition: opacity 0.15s;
  171. width: 30px;
  172. }
  173. .viewer-list > li:hover {
  174. opacity: 0.75;
  175. }
  176. .viewer-list > li + li {
  177. margin-left: 1px;
  178. }
  179. .viewer-list > .viewer-loading {
  180. position: relative;
  181. }
  182. .viewer-list > .viewer-loading::after {
  183. border-width: 2px;
  184. height: 20px;
  185. margin-left: -10px;
  186. margin-top: -10px;
  187. width: 20px;
  188. }
  189. .viewer-list > .viewer-active,
  190. .viewer-list > .viewer-active:hover {
  191. opacity: 1;
  192. }
  193. .viewer-player {
  194. background-color: #000;
  195. bottom: 0;
  196. cursor: none;
  197. display: none;
  198. left: 0;
  199. position: absolute;
  200. right: 0;
  201. top: 0;
  202. }
  203. .viewer-player > img {
  204. left: 0;
  205. position: absolute;
  206. top: 0;
  207. }
  208. .viewer-toolbar > ul {
  209. display: inline-block;
  210. margin: 0 auto 5px;
  211. overflow: hidden;
  212. padding: 3px 0;
  213. }
  214. .viewer-toolbar > ul > li {
  215. background-color: rgba(0, 0, 0, 0.5);
  216. border-radius: 50%;
  217. cursor: pointer;
  218. float: left;
  219. height: 24px;
  220. overflow: hidden;
  221. -webkit-transition: background-color 0.15s;
  222. transition: background-color 0.15s;
  223. width: 24px;
  224. }
  225. .viewer-toolbar > ul > li:hover {
  226. background-color: rgba(0, 0, 0, 0.8);
  227. }
  228. .viewer-toolbar > ul > li::before {
  229. margin: 2px;
  230. }
  231. .viewer-toolbar > ul > li + li {
  232. margin-left: 1px;
  233. }
  234. .viewer-toolbar > ul > .viewer-small {
  235. height: 18px;
  236. margin-bottom: 3px;
  237. margin-top: 3px;
  238. width: 18px;
  239. }
  240. .viewer-toolbar > ul > .viewer-small::before {
  241. margin: -1px;
  242. }
  243. .viewer-toolbar > ul > .viewer-large {
  244. height: 30px;
  245. margin-bottom: -3px;
  246. margin-top: -3px;
  247. width: 30px;
  248. }
  249. .viewer-toolbar > ul > .viewer-large::before {
  250. margin: 5px;
  251. }
  252. .viewer-tooltip {
  253. background-color: rgba(0, 0, 0, 0.8);
  254. border-radius: 10px;
  255. color: #fff;
  256. display: none;
  257. font-size: 12px;
  258. height: 20px;
  259. left: 50%;
  260. line-height: 20px;
  261. margin-left: -25px;
  262. margin-top: -10px;
  263. position: absolute;
  264. text-align: center;
  265. top: 50%;
  266. width: 50px;
  267. }
  268. .viewer-title {
  269. color: #ccc;
  270. display: inline-block;
  271. font-size: 12px;
  272. line-height: 1;
  273. margin: 0 5% 5px;
  274. max-width: 90%;
  275. opacity: 0.8;
  276. overflow: hidden;
  277. text-overflow: ellipsis;
  278. -webkit-transition: opacity 0.15s;
  279. transition: opacity 0.15s;
  280. white-space: nowrap;
  281. }
  282. .viewer-title:hover {
  283. opacity: 1;
  284. }
  285. .viewer-button {
  286. background-color: rgba(0, 0, 0, 0.5);
  287. border-radius: 50%;
  288. cursor: pointer;
  289. height: 80px;
  290. overflow: hidden;
  291. position: absolute;
  292. right: -40px;
  293. top: -40px;
  294. -webkit-transition: background-color 0.15s;
  295. transition: background-color 0.15s;
  296. width: 80px;
  297. }
  298. .viewer-button:focus,
  299. .viewer-button:hover {
  300. background-color: rgba(0, 0, 0, 0.8);
  301. }
  302. .viewer-button::before {
  303. bottom: 15px;
  304. left: 15px;
  305. position: absolute;
  306. }
  307. .viewer-fixed {
  308. position: fixed;
  309. }
  310. .viewer-open {
  311. overflow: hidden;
  312. }
  313. .viewer-show {
  314. display: block;
  315. }
  316. .viewer-hide {
  317. display: none;
  318. }
  319. .viewer-backdrop {
  320. background-color: rgba(0, 0, 0, 0.5);
  321. }
  322. .viewer-invisible {
  323. visibility: hidden;
  324. }
  325. .viewer-move {
  326. cursor: move;
  327. cursor: -webkit-grab;
  328. cursor: grab;
  329. }
  330. .viewer-fade {
  331. opacity: 0;
  332. }
  333. .viewer-in {
  334. opacity: 1;
  335. }
  336. .viewer-transition {
  337. -webkit-transition: all 0.3s;
  338. transition: all 0.3s;
  339. }
  340. @-webkit-keyframes viewer-spinner {
  341. 0% {
  342. -webkit-transform: rotate(0deg);
  343. transform: rotate(0deg);
  344. }
  345. 100% {
  346. -webkit-transform: rotate(360deg);
  347. transform: rotate(360deg);
  348. }
  349. }
  350. @keyframes viewer-spinner {
  351. 0% {
  352. -webkit-transform: rotate(0deg);
  353. transform: rotate(0deg);
  354. }
  355. 100% {
  356. -webkit-transform: rotate(360deg);
  357. transform: rotate(360deg);
  358. }
  359. }
  360. .viewer-loading::after {
  361. -webkit-animation: viewer-spinner 1s linear infinite;
  362. animation: viewer-spinner 1s linear infinite;
  363. border: 4px solid rgba(255, 255, 255, 0.1);
  364. border-left-color: rgba(255, 255, 255, 0.5);
  365. border-radius: 50%;
  366. content: '';
  367. display: inline-block;
  368. height: 40px;
  369. left: 50%;
  370. margin-left: -20px;
  371. margin-top: -20px;
  372. position: absolute;
  373. top: 50%;
  374. width: 40px;
  375. z-index: 1;
  376. }
  377. @media (max-width: 767px) {
  378. .viewer-hide-xs-down {
  379. display: none;
  380. }
  381. }
  382. @media (max-width: 991px) {
  383. .viewer-hide-sm-down {
  384. display: none;
  385. }
  386. }
  387. @media (max-width: 1199px) {
  388. .viewer-hide-md-down {
  389. display: none;
  390. }
  391. }