viewer.min.css 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. /*!
  2. * Viewer.js v0.3.1
  3. * https://github.com/fengyuanchen/viewerjs
  4. *
  5. * Copyright (c) 2015-2016 Fengyuan Chen
  6. * Released under the MIT license
  7. *
  8. * Date: 2016-02-02T11:35:36.273Z
  9. */
  10. .viewer-container, .viewer-navbar {
  11. background-color: #000;
  12. overflow: hidden
  13. }
  14. .viewer-canvas, .viewer-container, .viewer-footer, .viewer-player {
  15. right: 0;
  16. bottom: 0;
  17. left: 0
  18. }
  19. .viewer-button, .viewer-canvas, .viewer-container, .viewer-footer, .viewer-list, .viewer-navbar, .viewer-open, .viewer-title, .viewer-toolbar, .viewer-toolbar > li {
  20. overflow: hidden
  21. }
  22. .viewer-close:before, .viewer-flip-horizontal:before, .viewer-flip-vertical:before, .viewer-fullscreen-exit:before, .viewer-fullscreen:before, .viewer-next:before, .viewer-one-to-one:before, .viewer-play:before, .viewer-prev:before, .viewer-reset:before, .viewer-rotate-left:before, .viewer-rotate-right:before, .viewer-zoom-in:before, .viewer-zoom-out:before {
  23. font-size: 0;
  24. line-height: 0;
  25. display: block;
  26. width: 20px;
  27. height: 20px;
  28. color: transparent;
  29. 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);
  30. background-repeat: no-repeat
  31. }
  32. .viewer-zoom-in:before {
  33. content: 'Zoom In';
  34. background-position: 0 0
  35. }
  36. .viewer-zoom-out:before {
  37. content: 'Zoom Out';
  38. background-position: -20px 0
  39. }
  40. .viewer-one-to-one:before {
  41. content: 'One to One';
  42. background-position: -40px 0
  43. }
  44. .viewer-reset:before {
  45. content: 'Reset';
  46. background-position: -60px 0
  47. }
  48. .viewer-prev:before {
  49. content: 'Previous';
  50. background-position: -80px 0
  51. }
  52. .viewer-play:before {
  53. content: 'Play';
  54. background-position: -100px 0
  55. }
  56. .viewer-next:before {
  57. content: 'Next';
  58. background-position: -120px 0
  59. }
  60. .viewer-rotate-left:before {
  61. content: 'Rotate Left';
  62. background-position: -140px 0
  63. }
  64. .viewer-rotate-right:before {
  65. content: 'Rotate Right';
  66. background-position: -160px 0
  67. }
  68. .viewer-flip-horizontal:before {
  69. content: 'Flip Horizontal';
  70. background-position: -180px 0
  71. }
  72. .viewer-flip-vertical:before {
  73. content: 'Flip Vertical';
  74. background-position: -200px 0
  75. }
  76. .viewer-fullscreen:before {
  77. content: 'Enter Full Screen';
  78. background-position: -220px 0
  79. }
  80. .viewer-fullscreen-exit:before {
  81. content: 'Exit Full Screen';
  82. background-position: -240px 0
  83. }
  84. .viewer-close:before {
  85. content: 'Close';
  86. background-position: -260px 0
  87. }
  88. .viewer-container {
  89. font-size: 0;
  90. line-height: 0;
  91. position: absolute;
  92. top: 0;
  93. -webkit-user-select: none;
  94. -moz-user-select: none;
  95. -ms-user-select: none;
  96. user-select: none;
  97. background-color: rgba(0, 0, 0, .5);
  98. direction: ltr !important;
  99. -ms-touch-action: none;
  100. touch-action: none;
  101. -webkit-tap-highlight-color: transparent;
  102. -webkit-touch-callout: none;
  103. display: flex;
  104. flex-direction: column;
  105. }
  106. .viewer-container ::-moz-selection, .viewer-container::-moz-selection {
  107. background-color: transparent
  108. }
  109. .viewer-container ::selection, .viewer-container::selection {
  110. background-color: transparent
  111. }
  112. .viewer-container img {
  113. display: block;
  114. width: 100%;
  115. min-width: 0 !important;
  116. max-width: none !important;
  117. height: auto;
  118. min-height: 0 !important;
  119. max-height: none !important
  120. }
  121. .viewer-player, .viewer-tooltip {
  122. display: none;
  123. position: absolute
  124. }
  125. .viewer-canvas {
  126. position: absolute;
  127. top: 0
  128. }
  129. .viewer-canvas > img {
  130. width: auto;
  131. max-width: 90% !important;
  132. height: auto;
  133. margin: 15px auto
  134. }
  135. .viewer-footer {
  136. position: absolute;
  137. text-align: center
  138. }
  139. .viewer-navbar {
  140. background-color: rgba(0, 0, 0, .5)
  141. }
  142. .viewer-list {
  143. -webkit-box-sizing: content-box;
  144. -moz-box-sizing: content-box;
  145. box-sizing: content-box;
  146. height: 50px;
  147. margin: 0;
  148. padding: 1px 0
  149. }
  150. .viewer-list > li {
  151. font-size: 0;
  152. line-height: 0;
  153. float: left;
  154. overflow: hidden;
  155. width: 30px;
  156. height: 50px;
  157. cursor: pointer;
  158. opacity: .5;
  159. color: transparent;
  160. filter: alpha(opacity=50)
  161. }
  162. .viewer-list > li + li {
  163. margin-left: 1px
  164. }
  165. .viewer-list > .viewer-active {
  166. opacity: 1;
  167. filter: alpha(opacity=100)
  168. }
  169. .viewer-player {
  170. top: 0;
  171. cursor: none;
  172. background-color: #000
  173. }
  174. .viewer-player > img {
  175. position: absolute;
  176. top: 0;
  177. left: 0
  178. }
  179. .viewer-toolbar {
  180. width: 280px;
  181. margin: 0 auto 5px;
  182. padding: 3px 0
  183. }
  184. .viewer-toolbar > li {
  185. float: left;
  186. width: 24px;
  187. height: 24px;
  188. cursor: pointer;
  189. border-radius: 50%;
  190. background-color: #000;
  191. background-color: rgba(0, 0, 0, .5)
  192. }
  193. .viewer-toolbar > li:hover {
  194. background-color: #000;
  195. background-color: rgba(0, 0, 0, .8)
  196. }
  197. .viewer-toolbar > li:before {
  198. margin: 2px
  199. }
  200. .viewer-toolbar > li + li {
  201. margin-left: 1px
  202. }
  203. .viewer-toolbar > .viewer-play {
  204. width: 30px;
  205. height: 30px;
  206. margin-top: -3px;
  207. margin-bottom: -3px
  208. }
  209. .viewer-toolbar > .viewer-play:before {
  210. margin: 5px
  211. }
  212. .viewer-tooltip {
  213. font-size: 12px;
  214. line-height: 20px;
  215. top: 50%;
  216. left: 50%;
  217. width: 50px;
  218. height: 20px;
  219. margin-top: -10px;
  220. margin-left: -25px;
  221. text-align: center;
  222. color: #fff;
  223. border-radius: 10px;
  224. background-color: #000;
  225. background-color: rgba(0, 0, 0, .8)
  226. }
  227. .viewer-title {
  228. font-size: 12px;
  229. line-height: 1;
  230. display: inline-block;
  231. max-width: 90%;
  232. margin: 0 5% 5px;
  233. white-space: nowrap;
  234. text-overflow: ellipsis;
  235. opacity: .8;
  236. color: #ccc;
  237. filter: alpha(opacity=80)
  238. }
  239. .viewer-title:hover {
  240. opacity: 1;
  241. filter: alpha(opacity=100)
  242. }
  243. .viewer-button {
  244. position: absolute;
  245. top: -40px;
  246. right: -40px;
  247. width: 80px;
  248. height: 80px;
  249. cursor: pointer;
  250. border-radius: 50%;
  251. background-color: #000;
  252. background-color: rgba(0, 0, 0, .5)
  253. }
  254. .viewer-button:before {
  255. position: absolute;
  256. bottom: 15px;
  257. left: 15px
  258. }
  259. .viewer-fixed {
  260. position: fixed
  261. }
  262. .viewer-show {
  263. display: block
  264. }
  265. .viewer-hide {
  266. display: none
  267. }
  268. .viewer-invisible {
  269. visibility: hidden
  270. }
  271. .viewer-move {
  272. cursor: move;
  273. cursor: -webkit-grab;
  274. cursor: -moz-grab;
  275. cursor: grab
  276. }
  277. .viewer-fade {
  278. opacity: 0;
  279. filter: alpha(opacity=0)
  280. }
  281. .viewer-in {
  282. opacity: 1;
  283. filter: alpha(opacity=100)
  284. }
  285. .viewer-transition {
  286. -webkit-transition: all .3s ease-out;
  287. -o-transition: all .3s ease-out;
  288. transition: all .3s ease-out
  289. }
  290. @media (max-width: 767px) {
  291. .viewer-hide-xs-down {
  292. display: none
  293. }
  294. }
  295. @media (max-width: 991px) {
  296. .viewer-hide-sm-down {
  297. display: none
  298. }
  299. }
  300. @media (max-width: 1199px) {
  301. .viewer-hide-md-down {
  302. display: none
  303. }
  304. }