viewer.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. /*!
  2. * Viewer.js v1.10.2
  3. * https://fengyuanchen.github.io/viewerjs
  4. *
  5. * Copyright 2015-present Chen Fengyuan
  6. * Released under the MIT license
  7. *
  8. * Date: 2021-10-22T13:59:46.805Z
  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:focus {
  118. outline: 0;
  119. }
  120. .viewer-container img {
  121. display: block;
  122. height: auto;
  123. max-height: none !important;
  124. max-width: none !important;
  125. min-height: 0 !important;
  126. min-width: 0 !important;
  127. width: 100%;
  128. }
  129. .viewer-canvas {
  130. bottom: 0;
  131. left: 0;
  132. overflow: hidden;
  133. position: absolute;
  134. right: 0;
  135. top: 0;
  136. }
  137. .viewer-canvas > img {
  138. height: auto;
  139. margin: 15px auto;
  140. max-width: 90% !important;
  141. width: auto;
  142. }
  143. .viewer-footer {
  144. bottom: 0;
  145. left: 0;
  146. overflow: hidden;
  147. position: absolute;
  148. right: 0;
  149. text-align: center;
  150. }
  151. .viewer-navbar {
  152. background-color: rgba(0, 0, 0, 0.5);
  153. overflow: hidden;
  154. }
  155. .viewer-list {
  156. -webkit-box-sizing: content-box;
  157. box-sizing: content-box;
  158. height: 50px;
  159. margin: 0;
  160. overflow: hidden;
  161. padding: 1px 0;
  162. }
  163. .viewer-list > li {
  164. color: transparent;
  165. cursor: pointer;
  166. float: left;
  167. font-size: 0;
  168. height: 50px;
  169. line-height: 0;
  170. opacity: 0.5;
  171. overflow: hidden;
  172. -webkit-transition: opacity 0.15s;
  173. transition: opacity 0.15s;
  174. width: 30px;
  175. }
  176. .viewer-list > li:focus,
  177. .viewer-list > li:hover {
  178. opacity: 0.75;
  179. }
  180. .viewer-list > li:focus {
  181. outline: 0;
  182. }
  183. .viewer-list > li + li {
  184. margin-left: 1px;
  185. }
  186. .viewer-list > .viewer-loading {
  187. position: relative;
  188. }
  189. .viewer-list > .viewer-loading::after {
  190. border-width: 2px;
  191. height: 20px;
  192. margin-left: -10px;
  193. margin-top: -10px;
  194. width: 20px;
  195. }
  196. .viewer-list > .viewer-active,
  197. .viewer-list > .viewer-active:focus,
  198. .viewer-list > .viewer-active:hover {
  199. opacity: 1;
  200. }
  201. .viewer-player {
  202. background-color: #000;
  203. bottom: 0;
  204. cursor: none;
  205. display: none;
  206. left: 0;
  207. position: absolute;
  208. right: 0;
  209. top: 0;
  210. z-index: 1;
  211. }
  212. .viewer-player > img {
  213. left: 0;
  214. position: absolute;
  215. top: 0;
  216. }
  217. .viewer-toolbar > ul {
  218. display: inline-block;
  219. margin: 0 auto 5px;
  220. overflow: hidden;
  221. padding: 6px 3px;
  222. }
  223. .viewer-toolbar > ul > li {
  224. background-color: rgba(0, 0, 0, 0.5);
  225. border-radius: 50%;
  226. cursor: pointer;
  227. float: left;
  228. height: 24px;
  229. overflow: hidden;
  230. -webkit-transition: background-color 0.15s;
  231. transition: background-color 0.15s;
  232. width: 24px;
  233. }
  234. .viewer-toolbar > ul > li:focus,
  235. .viewer-toolbar > ul > li:hover {
  236. background-color: rgba(0, 0, 0, 0.8);
  237. }
  238. .viewer-toolbar > ul > li:focus {
  239. -webkit-box-shadow: 0 0 3px #fff;
  240. box-shadow: 0 0 3px #fff;
  241. outline: 0;
  242. position: relative;
  243. z-index: 1;
  244. }
  245. .viewer-toolbar > ul > li::before {
  246. margin: 2px;
  247. }
  248. .viewer-toolbar > ul > li + li {
  249. margin-left: 1px;
  250. }
  251. .viewer-toolbar > ul > .viewer-small {
  252. height: 18px;
  253. margin-bottom: 3px;
  254. margin-top: 3px;
  255. width: 18px;
  256. }
  257. .viewer-toolbar > ul > .viewer-small::before {
  258. margin: -1px;
  259. }
  260. .viewer-toolbar > ul > .viewer-large {
  261. height: 30px;
  262. margin-bottom: -3px;
  263. margin-top: -3px;
  264. width: 30px;
  265. }
  266. .viewer-toolbar > ul > .viewer-large::before {
  267. margin: 5px;
  268. }
  269. .viewer-tooltip {
  270. background-color: rgba(0, 0, 0, 0.8);
  271. border-radius: 10px;
  272. color: #fff;
  273. display: none;
  274. font-size: 12px;
  275. height: 20px;
  276. left: 50%;
  277. line-height: 20px;
  278. margin-left: -25px;
  279. margin-top: -10px;
  280. position: absolute;
  281. text-align: center;
  282. top: 50%;
  283. width: 50px;
  284. }
  285. .viewer-title {
  286. color: #ccc;
  287. display: inline-block;
  288. font-size: 12px;
  289. line-height: 1.2;
  290. margin: 0 5% 5px;
  291. max-width: 90%;
  292. opacity: 0.8;
  293. overflow: hidden;
  294. text-overflow: ellipsis;
  295. -webkit-transition: opacity 0.15s;
  296. transition: opacity 0.15s;
  297. white-space: nowrap;
  298. }
  299. .viewer-title:hover {
  300. opacity: 1;
  301. }
  302. .viewer-button {
  303. background-color: rgba(0, 0, 0, 0.5);
  304. border-radius: 50%;
  305. cursor: pointer;
  306. height: 80px;
  307. overflow: hidden;
  308. position: absolute;
  309. right: -40px;
  310. top: -40px;
  311. -webkit-transition: background-color 0.15s;
  312. transition: background-color 0.15s;
  313. width: 80px;
  314. }
  315. .viewer-button:focus,
  316. .viewer-button:hover {
  317. background-color: rgba(0, 0, 0, 0.8);
  318. }
  319. .viewer-button:focus {
  320. -webkit-box-shadow: 0 0 3px #fff;
  321. box-shadow: 0 0 3px #fff;
  322. outline: 0;
  323. }
  324. .viewer-button::before {
  325. bottom: 15px;
  326. left: 15px;
  327. position: absolute;
  328. }
  329. .viewer-fixed {
  330. position: fixed;
  331. }
  332. .viewer-open {
  333. overflow: hidden;
  334. }
  335. .viewer-show {
  336. display: block;
  337. }
  338. .viewer-hide {
  339. display: none;
  340. }
  341. .viewer-backdrop {
  342. background-color: rgba(0, 0, 0, 0.5);
  343. }
  344. .viewer-invisible {
  345. visibility: hidden;
  346. }
  347. .viewer-move {
  348. cursor: move;
  349. cursor: -webkit-grab;
  350. cursor: grab;
  351. }
  352. .viewer-fade {
  353. opacity: 0;
  354. }
  355. .viewer-in {
  356. opacity: 1;
  357. }
  358. .viewer-transition {
  359. -webkit-transition: all 0.3s;
  360. transition: all 0.3s;
  361. }
  362. @-webkit-keyframes viewer-spinner {
  363. 0% {
  364. -webkit-transform: rotate(0deg);
  365. transform: rotate(0deg);
  366. }
  367. 100% {
  368. -webkit-transform: rotate(360deg);
  369. transform: rotate(360deg);
  370. }
  371. }
  372. @keyframes viewer-spinner {
  373. 0% {
  374. -webkit-transform: rotate(0deg);
  375. transform: rotate(0deg);
  376. }
  377. 100% {
  378. -webkit-transform: rotate(360deg);
  379. transform: rotate(360deg);
  380. }
  381. }
  382. .viewer-loading::after {
  383. -webkit-animation: viewer-spinner 1s linear infinite;
  384. animation: viewer-spinner 1s linear infinite;
  385. border: 4px solid rgba(255, 255, 255, 0.1);
  386. border-left-color: rgba(255, 255, 255, 0.5);
  387. border-radius: 50%;
  388. content: '';
  389. display: inline-block;
  390. height: 40px;
  391. left: 50%;
  392. margin-left: -20px;
  393. margin-top: -20px;
  394. position: absolute;
  395. top: 50%;
  396. width: 40px;
  397. z-index: 1;
  398. }
  399. @media (max-width: 767px) {
  400. .viewer-hide-xs-down {
  401. display: none;
  402. }
  403. }
  404. @media (max-width: 991px) {
  405. .viewer-hide-sm-down {
  406. display: none;
  407. }
  408. }
  409. @media (max-width: 1199px) {
  410. .viewer-hide-md-down {
  411. display: none;
  412. }
  413. }