LightboxModern CSS

Styling LightboxModern

2023-11-25 या दिनांकाला. सर्वात नवीन आवृत्ती पाहा.

ही स्क्रिप्ट इंस्टॉल करा ? युझरस्टाईलच्या रूपात इंस्टॉल करा ?

Ask a question, post a review, or report the script.

Wrap lines

/* ==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;
}