imageviewer_terrydr/dist/viewer.css

A simple jQuery image viewing plugin.

/*!
 * Viewer v@VERSION
 * https://github.com/fengyuanchen/viewer
 *
 * Copyright (c) 2015-@YEAR Fengyuan Chen
 * Released under the MIT license
 *
 * Date: @DATE
 */
.viewer-zoom-in:before,
.viewer-zoom-out:before,
.viewer-one-to-one:before,
.viewer-reset:before,
.viewer-prev:before,
.viewer-play:before,
.viewer-next:before,
.viewer-rotate-left:before,
.viewer-rotate-right:before,
.viewer-flip-horizontal:before,
.viewer-flip-vertical:before,
.viewer-fullscreen:before,
.viewer-fullscreen-exit:before,
.viewer-close:before {
  display: block;
  width: 30px;
  height: 30px;
  /*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");*/
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeMAAAAYCAYAAADJVZVWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTY0RUM3RjlDMzM3MTFFNjg1NkI4OTMwMjM5NkQwMjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTY0RUM3RkFDMzM3MTFFNjg1NkI4OTMwMjM5NkQwMjMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NjRFQzdGN0MzMzcxMUU2ODU2Qjg5MzAyMzk2RDAyMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1NjRFQzdGOEMzMzcxMUU2ODU2Qjg5MzAyMzk2RDAyMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiLpNKYAAAqqSURBVHja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");
  background-repeat: no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent; }

.viewer-zoom-in:before {
  content: "Zoom In";
  background-position: 0 0; }

.viewer-zoom-out:before {
  content: "Zoom Out";
  background-position: -20px 0; }

.viewer-one-to-one:before {
  content: "One to One";
  background-position: -40px 0; }

.viewer-reset:before {
  content: "Reset";
  background-position: -154px 0; }

.viewer-prev:before {
  content: "Previous";
  background-position: -75px 0; }

.viewer-play:before {
  content: "Play";
  background-position: 0 0; }

.viewer-next:before {
  content: "Next";
  background-position: -230px 0; }

.viewer-rotate-left:before {
  content: "Rotate Left";
  background-position: -388px 0; }

.viewer-rotate-right:before {
  content: "Rotate Right";
  background-position: -308px 0; }

.viewer-flip-horizontal:before {
  content: "Flip Horizontal";
  background-position: -180px 0; }

.viewer-flip-vertical:before {
  content: "Flip Vertical";
  background-position: -200px 0; }

.viewer-fullscreen:before {
  content: "Enter Full Screen";
  background-position: -220px 0; }

.viewer-fullscreen-exit:before {
  content: "Exit Full Screen";
  background-position: -240px 0; }

.viewer-close:before {
  content: "Close";
  background-position: -458px 0; }

.viewer-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  direction: ltr !important;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; }
  .viewer-container::selection,
  .viewer-container *::selection {
    background-color: transparent; }
  .viewer-container img {
    display: block;
    width: 100%;
    height: auto;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important; }

.viewer-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden; }
  .viewer-canvas > img {
    width: auto;
    height: auto;
    max-width: 90% !important;
    margin: 15px auto; }
  .viewer-canvas > video {
    width: 100%;
    margin-top: 25px;
    z-index: 9991;
    cursor: pointer; }

.video-tip {
  position: absolute;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
  color: #000;
  left: 50%;
  margin-left: -40px;
  top: 90px;
  font-size: 14px;
  text-align: center;
  border-radius: 19px;
  opacity: 0.8;
  cursor: default;
  display: none; }

.viewer-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  text-align: center; }

.viewer-navbar {
  overflow: hidden;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5); }

.viewer-list {
  box-sizing: content-box;
  overflow: hidden;
  height: 60px;
  margin: 0;
  padding: 1px 0; }
  .viewer-list > li {
    float: left;
    overflow: hidden;
    width: 38px;
    height: 60px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: pointer; }
    .viewer-list > li + li {
      margin-left: 1px; }
  .viewer-list > .viewer-active {
    opacity: 1;
    filter: alpha(opacity=100); }

.viewer-player {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background-color: #000;
  cursor: none; }
  .viewer-player > img {
    position: absolute;
    top: 0;
    left: 0; }

.viewer-toolbar {
  overflow: hidden;
  width: 280px;
  margin: 0 auto 5px;
  padding: 3px 0; }
  .viewer-toolbar > li {
    float: left;
    overflow: hidden;
    padding: 4px;
    width: 38px;
    height: 38px;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer; }
    .viewer-toolbar > li:hover {
      background-color: #000;
      background-color: rgba(0, 0, 0, 0.8); }
    .viewer-toolbar > li:before {
      margin: 2px; }
    .viewer-toolbar > li + li {
      margin-left: 1px; }
  .viewer-toolbar > .viewer-play {
    width: 38px;
    height: 38px;
    margin-top: 0;
    margin-bottom: -3px;
    padding: 3px; }
    .viewer-toolbar > .viewer-play:before {
      margin: 5px; }

.viewer-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 20px;
  display: none;
  margin-top: -10px;
  margin-left: -25px;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8); }

.viewer-title {
  display: inline-block;
  overflow: hidden;
  max-width: 90%;
  margin: 0 5% 5px;
  font-size: 12px;
  line-height: 1;
  color: #ccc;
  opacity: 0.8;
  filter: alpha(opacity=80);
  text-overflow: ellipsis;
  white-space: nowrap; }
  .viewer-title:hover {
    opacity: 1;
    filter: alpha(opacity=100); }

.viewer-button {
  position: absolute;
  top: -50px;
  right: -50px;
  z-index: 9999;
  overflow: hidden;
  width: 100px;
  height: 100px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer; }
  .viewer-button:before {
    position: absolute;
    bottom: 12px;
    left: 20px; }

.viewer-fixed {
  position: fixed; }

.viewer-open {
  overflow: hidden; }

.viewer-show {
  display: block; }

.viewer-hide {
  display: none; }

.viewer-invisible {
  visibility: hidden; }

.viewer-move {
  cursor: move;
  cursor: grab; }

.viewer-fade {
  opacity: 0;
  filter: alpha(opacity=0); }

.viewer-in {
  opacity: 1;
  filter: alpha(opacity=100); }

.viewer-transition {
  transition: all .3s ease-out; }

@media (max-width: 767px) {
  .viewer-hide-xs-down {
    display: none; } }

@media (max-width: 991px) {
  .viewer-hide-sm-down {
    display: none; } }

@media (max-width: 1199px) {
  .viewer-hide-md-down {
    display: none; } }

/*# sourceMappingURL=viewer.css.map */