ten-design-vue/lib/style-tight/image-viewer.css

ten-vue

/* dependencies icon */
/**
 * 文字部分
 * size 大小，line 行高， color 颜色
 */
/* button */
/* input */
/* transfer */
/* alert */
/* menu */
/* message */
/* modal */
/* badge */
/* tag */
/* progress */
/* popup */
/* tooltip */
/* loading */
/* tabs */
/* check */
/* mention */
/* popup */
/* steps */
/* tabs */
/* modal */
/* form */
/* table */
/* pagination */
/* upload */
/* collapse */
/* anchor */
/* list */
.ten-image-viewer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.ten-image-viewer__mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.37);
}
.ten-image-viewer__header {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 40px;
  text-align: center;
  background: rgba(0, 0, 0, 0.37);
}
.ten-image-viewer__header-indexes {
  font-size: 16px;
  line-height: 40px;
  color: #fff;
}
.ten-image-viewer__header-close {
  display: inline-block;
  position: absolute;
  top: 8px;
  right: 24px;
  color: #fff;
  font-size: 0;
  cursor: pointer;
}
.ten-image-viewer__header-close .ten-icon {
  font-size: 18px;
}
.ten-image-viewer__btn {
  position: absolute;
  z-index: 1;
  top: 50%;
  margin-top: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.24);
  font-size: 24px;
  color: #C0C0C0;
  cursor: pointer;
}
.ten-image-viewer__btn.ten-image-viewer__btn-prev {
  left: 24px;
}
.ten-image-viewer__btn.ten-image-viewer__btn-next {
  right: 24px;
}
.ten-image-viewer__btn:hover {
  color: #FFFFFF;
}
.ten-image-viewer__btn--disabled {
  background: rgba(0, 0, 0, 0.14);
  cursor: default;
}
.ten-image-viewer__btn--disabled:hover {
  color: #C0C0C0;
}
.ten-image-viewer__image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: bottom 0.3s;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ten-image-viewer__image img {
  cursor: -webkit-grab;
  cursor: grab;
}
.ten-image-viewer__footer {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 100%;
  height: 48px;
  background: rgba(0, 0, 0, 0.37);
  transition: height 0.3s;
}
.ten-image-viewer__footer-actions {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ten-image-viewer__footer-actions .ten-image-viewer__action {
  position: relative;
  color: #FFFFFF;
  opacity: 0.6;
  font-size: 14px;
  line-height: 28px;
  margin-right: 20px;
  cursor: pointer;
}
.ten-image-viewer__footer-actions .ten-image-viewer__action:hover {
  opacity: 1;
}
.ten-image-viewer__footer-actions .ten-image-viewer__action:last-child {
  margin-right: 0;
}
.ten-image-viewer__footer-actions .ten-image-viewer__action--divided {
  padding-left: 24px;
}
.ten-image-viewer__footer-actions .ten-image-viewer__action--divided:after {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 1px;
  height: 12px;
  background-color: #D8D8D8;
}
.ten-image-viewer__footer-actions .ten-image-viewer__action .ten-icon {
  vertical-align: middle;
  font-size: 20px;
}
.ten-image-viewer__footer-actions .ten-image-viewer__action a {
  text-decoration: none;
  color: inherit;
}
.ten-image-viewer__footer-thumbs {
  margin: 0 auto;
  height: 44px;
  overflow: hidden;
}
.ten-image-viewer__footer-thumbs ul {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.ten-image-viewer__footer-thumbs-item {
  flex-shrink: 0;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.2s;
}
.ten-image-viewer__footer-thumbs-item:last-child {
  margin-right: 0;
}
.ten-image-viewer__footer-thumbs-item--active {
  border: 1px solid #0052D9;
  opacity: 0.8;
}
.ten-image-viewer__footer-thumbs-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.ten-image-viewer__slide-up-enter-active {
  -webkit-animation: ten-image-viewer__slide-up-in 0.3s;
  animation: ten-image-viewer__slide-up-in 0.3s;
}
.ten-image-viewer__slide-up-leave-active {
  -webkit-animation: ten-image-viewer__slide-up-out 0.3s;
  animation: ten-image-viewer__slide-up-out 0.3s;
}
@-webkit-keyframes ten-image-viewer__slide-up-in {
  0% {
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}
@keyframes ten-image-viewer__slide-up-in {
  0% {
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes ten-image-viewer__slide-up-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    opacity: 0;
  }
}
@keyframes ten-image-viewer__slide-up-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    opacity: 0;
  }
}
.ten-image-viewer__slide-down-enter-active {
  -webkit-animation: ten-image-viewer__slide-down-in 0.3s;
  animation: ten-image-viewer__slide-down-in 0.3s;
}
.ten-image-viewer__slide-down-leave-active {
  -webkit-animation: ten-image-viewer__slide-down-out 0.3s;
  animation: ten-image-viewer__slide-down-out 0.3s;
}
@-webkit-keyframes ten-image-viewer__slide-down-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}
@keyframes ten-image-viewer__slide-down-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes ten-image-viewer__slide-down-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes ten-image-viewer__slide-down-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
/**
 * 紧凑版变量覆写
 * 如发现需要用到的变量没有定义，先在样式文件中抽出来在 vars.less 中添加该变量
 * 变量命名方式 组件名-属性-修饰 如 button-fontsize-small
 */
/* input */
/* check */
/* select */
/* popup */
/* menu */
/* steps */
/* tabs */
/* modal */
/* table */
/* pagination */
/* upload */
/* form */