vanillaboxcss

vanillabox.css

/*
 * Vanillabox
 * (C) 2013 cocopon.
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/mit-license.php
 */
.vnbx * {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}

.vnbx-mask {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 999;
}

.vnbx-frame {
  position: absolute;
}

.vnbx-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.vnbx-prev,
.vnbx-next {
  visibility: hidden;
}

.vnbx-group .vnbx-prev,
.vnbx-group .vnbx-next {
  visibility: visible;
}

.vnbx-pager {
  visibility: hidden;
}

.vnbx-group .vnbx-pager {
  visibility: visible;
}

.vnbx-container {
  overflow: hidden;
  position: relative;
}

.vnbx-content {
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
}
.vnbx-content > img {
  vertical-align: middle;
}
.vnbx-content > iframe {
  border-width: 0;
  vertical-align: middle;
}
.vnbx-ios .vnbx-content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.vnbx-ios .vnbx-content > iframe {
  display: block;
  height: 100%;
  width: 100%;
}

.vnbx-empty {
  height: 150px;
  width: 200px;
}

.vnbx-loading,
.vnbx-error {
  height: 150px;
  width: 200px;
}
.vnbx-loading > img, .vnbx-loading > iframe,
.vnbx-error > img,
.vnbx-error > iframe {
  display: none;
  height: 150px;
  width: 200px;
}

.vnbx-mask {
  background-color: rgba(0, 0, 0, 0.7);
}

.vnbx-frame {
  padding-top: 32px;
}

.vnbx-button {
  position: absolute;
}

.vnbx-button.vnbx-disabled {
  display: none;
}

.vnbx-close {
  background-image: url("img/close0.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
  height: 32px;
  right: -8px;
  top: 0;
  width: 32px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-close {
    background-image: url("img/close0@2x.png");
  }
}

.vnbx-close:hover {
  background-image: url("img/close1.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-close:hover {
    background-image: url("img/close1@2x.png");
  }
}

.vnbx-prev,
.vnbx-next {
  height: 100%;
  margin-top: 16px;
  top: 0;
  width: 44px;
}

.vnbx-prev {
  background-image: url("img/prev0.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
  left: -44px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-prev {
    background-image: url("img/prev0@2x.png");
  }
}

.vnbx-prev:active,
.vnbx-prev:hover {
  background-image: url("img/prev1.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-prev:active,
  .vnbx-prev:hover {
    background-image: url("img/prev1@2x.png");
  }
}

.vnbx-next {
  background-image: url("img/next0.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
  right: -44px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-next {
    background-image: url("img/next0@2x.png");
  }
}

.vnbx-next:active,
.vnbx-next:hover {
  background-image: url("img/next1.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-next:active,
  .vnbx-next:hover {
    background-image: url("img/next1@2x.png");
  }
}

.vnbx-label {
  font-family: sans-serif;
  font-size: 1em;
  position: absolute;
}

.vnbx-title {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #eeeeee;
  height: 32px;
  left: 0;
  line-height: 32px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
  width: 100%;
}
.vnbx-close-button-enabled .vnbx-title {
  padding-right: 32px;
}

.vnbx-pager {
  bottom: -30px;
  color: #aaaaaa;
  font-size: 90%;
  height: 22px;
  left: 0;
  line-height: 22px;
  text-align: center;
  width: 100%;
}

.vnbx-container {
  background-color: #222222;
  text-align: center;
}

.vnbx-loading {
  background-image: url("img/loading.gif");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-loading {
    background-image: url("img/loading@2x.gif");
  }
}

.vnbx-error {
  background-image: url("img/error.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .vnbx-error {
    background-image: url("img/error@2x.png");
  }
}