viewer.css 9.0 KB

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