su-react-mobile-imgview/dist/react-mobile-imgview.css

A image album for mobile preview, built with reactjs. esay to use and less config.

.tags{
}html,
body,
div,
ul,
li,
a {
  padding: 0;
  margin: 0;
}
.hide {
  opacity: 0;
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
}
.imageview {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  background-color: #000;
  overflow: hidden;
  animation: easeshow 0.25s;
}
.imageview .page {
  font-family: -apple-system-font, 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
  position: fixed;
  font-size: 14px;
  color: #fff;
  padding: 2px 5px;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.imageview .spinner {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.imageview .double-bounce1,
.imageview .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2s infinite ease-in-out;
  animation: sk-bounce 2s infinite ease-in-out;
}
.imageview .double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.imageview .errorpage {
  position: absolute;
  font-size: 16px;
  text-align: center;
  color: #aaaaaa;
  top: 28%;
  left: 50%;
  margin-left: -70px;
}
.imageview .errorpage:before {
  content: '';
  display: block;
  width: 150px;
  height: 140px;
  margin: 0 auto;
  padding-bottom: 20px;
  background: url(data:image/png;base64,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) no-repeat;
  background-size: 100%;
  opacity: .4;
}
@keyframes easeshow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes easeshow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.imagelist {
  display: -webkit-box;
  display: box;
  height: 100%;
  list-style-type: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.imagelist .imagelist-item {
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  background-color: #000;
  overflow-y: scroll;
}
.imagelist .imagelist-item .imagelist-item-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.su-imagelist-item-tags-div {
  background-color: #eee;
}
.su-imagelist-item-tags {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: 'tnum';
  display: inline-block;
  height: auto;
  margin-right: 8px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: default;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
@-webkit-keyframes sk-bounce {
  0%,
  100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bounce {
  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}