☰

LightboxModern CSS

Styling LightboxModern

  1. /* ==UserStyle==
  2. @name         LightboxModern CSS
  3. @description  Styling LightboxModern
  4. @namespace    yu
  5. @version      1.0
  6. @preprocessor default
  7. @license      MIT
  8. ==/UserStyle== */
  9.  
  10. .LightboxModern {
  11.   position: fixed;
  12.   top: 0;
  13.   left: 0;
  14.   background-color: antiquewhite;
  15.   width: 100%;
  16.   height: 100%;
  17. }
  18.  
  19. .LightboxModern .Progress {
  20.   width: 0%;
  21.   height: 12px;
  22.   background-color: aquamarine;
  23. }
  24.  
  25. .LightboxModern .ImageWrapper{
  26.   position: absolute;
  27.   width: 100%;
  28.   height: 100%;
  29.   display: flex;
  30.   justify-content: center;
  31.   align-items: center;
  32.   opacity: 0%;
  33.   transition: opacity .5s ease;
  34. }
  35.  
  36. .LightboxModern .ImageWrapper.FadeIn {
  37.   opacity: 100%;
  38. }
  39.  
  40. .LightboxModern .ImageWrapper img {
  41.   width: 100%;
  42.   height: 100%;
  43.   object-fit: contain;
  44. }
  45.  
  46. .LightboxModern .ImageWrapper .ImagePadding {
  47.   padding: 20em;
  48.   position: absolute;
  49.   z-index: 10;
  50. } 
  51.  
  52. .LightboxModern .Swiper {
  53.   position: absolute;
  54.   top: 0;
  55.   left: 0;
  56.   width: 100%;
  57.   height: 100%;
  58.   z-index: 20;
  59. }