css 修改Soliloquy Lightbox风格

Posted 2021-05-13

.soliloquybox-overlay-fixed, .soliloquybox-wrap, .soliloquybox-skin, .soliloquybox-outer, soliloquybox-inner { height: 100% !important; width: auto !important; }
.soliloquybox-wrap {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 60% !important;
  height: 100% !important;
  padding: 20px 0 20px 20px !important
}
.soliloquybox-skin {
  background: none !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.soliloquybox-outer { background: #000 !important; }
.soliloquybox-inner {
  height: 100% !important;
  width: auto !important;
  margin: auto !important;
  text-align: center !important;
}
.soliloquybox-image {
  height: auto !important;
  width: auto !important;
  max-width: -webkit-calc(100% - 109px) !important;
  max-width: -moz-calc(100% - 109px) !important;
  max-width: -o-calc(100% - 109px) !important;
  max-width: calc(100% - 109px) !important;
  margin: auto !important;
}

/* Thumbnails */
#soliloquybox-thumbs {
  top: auto !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: 40% !important;
  height: 100% !important;
  padding: 20px 20px 20px 0 !important;
}
#soliloquybox-thumbs ul {
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  text-align: center !important;
  padding: 15px !important;
  background: #fff !important;
  overflow: scroll;
}
#soliloquybox-thumbs ul li {
  float: none !important;
  display: inline-block !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 2px !important;
  background: #fff !important;
}
#soliloquybox-thumbs ul li a {
  border: none !important;
  background: none !important;
}
#soliloquybox-thumbs ul li.active {
  border: 1px solid #000 !important;
}

/* Close Icon */
a.soliloquybox-close {
  top: 0 !important;
  right: 0 !important;
  background-color: #333 !important;
  height: 55px !important;
  width: 55px !important;
  background-image: none !important;
  opacity: 1;
  display: table !important;
  text-align: center !important;
}
a.soliloquybox-close:before {
  content: '\00d7';
  color: #666;
  font-size: 40px;
  font-family: serif;
  vertical-align: middle;
  display: table-cell;
}

/* Navigation */
.soliloquybox-nav span {
  visibility: visible !important;
  width: 55px !important;
  top: 0 !important;
  margin: auto !important;
  background-color: #aa8420 !important;
  background-image: none !important;
  height: 100% !important;
  display: table;
  text-align: center;
  opacity: 1;
}
.soliloquybox-next span { 
  right: 0 !important;
  height: -webkit-calc(100% - 55px) !important;
  height: -moz-calc(100% - 55px) !important;
  height: -o-calc(100% - 55px) !important;
  height: calc(100% - 55px) !important;
  top: 55px !important;
}
.soliloquybox-prev span { left: 0 !important; }
a.soliloquybox-close:hover,
.soliloquybox-nav:hover span {
  opacity: 0.7;
}
.soliloquybox-next span:before,
.soliloquybox-next span:after,
.soliloquybox-prev span:before,
.soliloquybox-prev span:after {
  display: table-cell;
  vertical-align: middle;
}
.soliloquybox-next span:after {
  content: '\2192';
  width: 100%;
  left: 0;
  font-size: 45px;
  color: rgba(255,255,255,0.5);
}
.soliloquybox-prev span:after {
  content: '\2190';
  width: 100%;
  left: 0;
  padding-top: 55px;
  font-size: 45px;
  color: rgba(255,255,255,0.5);
}

/* Lightbox Title / Caption */
.soliloquybox-title.soliloquybox-title-over-wrap {
  width: -webkit-calc(100% - 109px);
  width: -moz-calc(100% - 109px);
  width: -o-calc(100% - 109px);
  width: calc(100% - 109px);
  left: 55px;
}