☰

LightboxModern CSS

Styling LightboxModern

/* ==UserStyle==
@name         LightboxModern CSS
@description  Styling LightboxModern
@namespace    yu
@version      1.0
@preprocessor default
@license      MIT
==/UserStyle== */

.LightboxModern {
  position: fixed;
  top: 0;
  left: 0;
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
}

.LightboxModern .Progress {
  width: 0%;
  height: 12px;
  background-color: aquamarine;
}

.LightboxModern .ImageWrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0%;
  transition: opacity .5s ease;
}

.LightboxModern .ImageWrapper.FadeIn {
  opacity: 100%;
}

.LightboxModern .ImageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.LightboxModern .ImageWrapper .ImagePadding {
  padding: 20em;
  position: absolute;
  z-index: 10;
} 

.LightboxModern .Swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}