@betaweb/lightbox/dist/lightbox.min.css

A simple JavaScript class to generate images Lightbox

:root{--lightbox-black-rgb:0,0,0;--lightbox-white-rgb:255,255,255;--lightbox-black:rgb(var(--lightbox-black-rgb));--lightbox-white:rgb(var(--lightbox-white-rgb));--lightbox-nav-chevron-color:var(--lightbox-black)}.lightbox,.lightbox *{box-sizing:border-box}.lightbox{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;justify-content:center;align-items:center;z-index:1000;background-color:rgba(var(--lightbox-white-rgb),.8);opacity:0;visibility:hidden;cursor:pointer;user-select:none}.lightbox.visible{transition:opacity .3s;visibility:visible;opacity:1}.lightbox:not(.is-loading) .lightbox--inner{transition:width .3s,height .3s,transform .3s,opacity .3s;transform:scale(1);opacity:1}.lightbox.is-loading:before{position:absolute;content:"";width:50px;height:50px;border-radius:50px;background-color:rgba(var(--lightbox-black-rgb),.5);box-shadow:0 0 0 0 var(--lightbox-black);transform:scale(1);animation:pulse 2s infinite}.lightbox--inner{position:relative;display:block;width:auto;height:auto;background-color:transparent;background-size:cover;background-repeat:no-repeat;background-position:50%;border-radius:10px;opacity:0;transform:scale(1.05);cursor:default}.lightbox--nav-next.is-hidden,.lightbox--nav-prev.is-hidden{display:none}.lightbox--nav-next,.lightbox--nav-prev{position:fixed;top:0;bottom:0;background-color:transparent;width:20%;z-index:1001;opacity:0;cursor:pointer;transition:opacity .3s}.lightbox--nav-next:before,.lightbox--nav-prev:before{position:absolute;content:"";top:calc(50% - 10px);transform:translate(-50%,-50%);border-color:var(--lightbox-nav-chevron-color);border-style:solid;border-width:5px 5px 0 0;width:20px;height:20px;z-index:1002}.lightbox--nav-next:after,.lightbox--nav-prev:after{position:absolute;content:"";top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lightbox-black);font-size:3rem;font-weight:700;background-color:rgba(var(--lightbox-white-rgb),.4);border-radius:50%;width:70px;height:70px;text-align:center;line-height:70px}.lightbox--nav-prev{right:auto;left:0}.lightbox--nav-prev:before{left:calc(50% - 8px);transform:rotate(-135deg)}.lightbox--nav-next{right:0;left:auto}.lightbox--nav-next:before{left:calc(50% - 15px);transform:rotate(45deg)}.lightbox--nav-next:hover,.lightbox--nav-prev:hover{opacity:1}.lightbox--nav-dots{display:flex;position:absolute;justify-content:center;align-items:center;list-style-type:none;margin:0;bottom:24px;left:50%;transform:translateX(-50%)}.lightbox--nav-dots li{width:8px;height:8px;border-radius:50%;background-color:rgba(var(--lightbox-black-rgb),.2);margin:0 .25rem;cursor:pointer;transform:scale(1);transform-origin:center;transition:transform .3s,background-color .3s}.lightbox--nav-dots li.active,.lightbox--nav-dots li:hover{transform:scale(1.6);background-color:rgba(var(--lightbox-black-rgb),.6)}.lightbox--legend{position:absolute;bottom:2rem;width:100%;padding:2rem 0;background-color:rgba(var(--lightbox-white-rgb),.7);color:var(--lightbox-black-rgb);display:flex;justify-content:center;align-items:center;font-weight:700}.lightbox-link{cursor:pointer}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(var(--lightbox-black-rgb),.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(var(--lightbox-black-rgb),0)}to{transform:scale(.95);box-shadow:0 0 0 0 rgba(var(--lightbox-black-rgb),0)}}
/*# sourceMappingURL=/lightbox.min.css.map */