diff --git a/docs/assets/natural-gallery-js/natural-gallery.css b/docs/assets/natural-gallery-js/natural-gallery.css index 23277e4..c9dacf8 100644 --- a/docs/assets/natural-gallery-js/natural-gallery.css +++ b/docs/assets/natural-gallery-js/natural-gallery.css @@ -1,531 +1,4 @@ -/* src/styles/natural-gallery.scss */ -.natural-gallery-js .figure { - left: 0; - position: relative; - display: flex; - flex-direction: column; - float: left; - overflow: hidden; - margin: 0; - transition: 1s background-color; -} -.natural-gallery-js .figure:hover .title.hover, -.natural-gallery-js .figure:hover .title.hover, -.natural-gallery-js .figure:hover .selectBtn { - transform: translateY(0%); -} -.natural-gallery-js .figure.zoomable, -.natural-gallery-js .figure .zoomable { - cursor: zoom-in; -} -.natural-gallery-js .figure.activable, -.natural-gallery-js .figure .activable { - cursor: pointer; -} -.natural-gallery-js .figure.loaded > .image { - opacity: 1; - transition: - 1s ease-out opacity, - 1s ease-out transform, - 0.2s ease-out margin; -} -.natural-gallery-js .figure.selected .selectBtn { - transform: translateY(0%); - top: 0; - left: 0; -} -.natural-gallery-js .figure.zoomable:hover .image, -.natural-gallery-js .figure .image.zoomable:hover { - transform: rotate(1deg) scale(1.2); -} -.natural-gallery-js .figure.zoomable:active .image, -.natural-gallery-js .figure .image.zoomable:active { - transform: scale(1); - transition: - 1s ease-out opacity, - 0.1s ease-out transform, - 0.2s ease-out margin; -} -.natural-gallery-js .figure .image { - display: block; - position: relative; - margin: 0; - width: auto; - height: auto; - flex: 1; - z-index: 100; - opacity: 0; - background-repeat: no-repeat; - background-position: center center; - transition: 0.2s ease all; -} -.natural-gallery-js .figure .selectBtn { - position: absolute; - z-index: 991; - top: 0; - left: 0; - padding: 10px; - width: 36px; - height: 36px; - transition: 0.2s ease all; - transform: translateY(calc(-100% - 15px)); - color: rgba(255, 255, 255, 0.9); - fill: currentColor; - cursor: pointer; - background: rgba(0, 0, 0, 0.6); - border-bottom-right-radius: 5px; -} -.natural-gallery-js .figure .selectBtn .marker { - position: relative; - width: 18px; - height: 18px; - border-width: 2px; - border-style: solid; - box-sizing: border-box; - border-radius: 2px; -} -.natural-gallery-js .figure .selectBtn .marker::before, -.natural-gallery-js .figure .selectBtn .marker::after { - content: " "; - position: absolute; - display: block; - background: transparent; - width: 2px; -} -.natural-gallery-js .figure .selectBtn .marker::before { - left: 5px; - top: 5px; - height: 7px; - transform: rotateZ(-45deg); - transform-origin: 0 100%; -} -.natural-gallery-js .figure .selectBtn .marker::after { - left: 4px; - top: 0px; - height: 11px; - transform: rotateZ(45deg); - transform-origin: 100% 100%; -} -.natural-gallery-js .figure .title { - position: absolute; - bottom: 0; - left: 0; - right: 0; - z-index: 1100; - background: rgba(0, 0, 0, 0.6); - text-align: center; - color: white; - font-size: 14px; - line-height: 1.7em; - font-weight: normal; - padding: 10px; - transition: 0.2s ease all; - overflow: hidden; - white-space: normal; -} -.natural-gallery-js .figure .title.hover { - padding: 10px; - transform: translateY(calc(100% + 12px)); -} -.natural-gallery-js .figure .link { - border: none; - text-decoration: none; - cursor: pointer; -} -.natural-gallery-js .figure .button { - display: block; - margin: 10px; - padding: 5px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); - border-radius: 4px; -} -.pswp { - z-index: 9999999; -} -.pswp .pswp__caption__center { - text-align: center; -} -.natural-gallery-js { - position: relative; -} -.natural-gallery-js *, -.natural-gallery-js *::after, -.natural-gallery-js *::before { - box-sizing: border-box; - margin: 0; - padding: 0; -} -.natural-gallery-js iframe { - position: absolute; - width: 100%; - height: 0; - top: 0; - left: 0; - background-color: transparent; - border: 0; -} -.natural-gallery-js.scrolling, -.natural-gallery-js.scrolling * { - pointer-events: none !important; -} -.natural-gallery-js .column { - float: left; -} -.natural-gallery-js .column:last-child { - margin-right: 0 !important; -} -.natural-gallery-js .column .figure:last-child { - margin-bottom: 0 !important; -} -.natural-gallery-js .natural-gallery-body { - padding: 0; - margin: 0; -} -.natural-gallery-js .natural-gallery-body.resizing .figure, -.natural-gallery-js .natural-gallery-body.resizing .column { - transition: none; - opacity: 0; -} -.natural-gallery-js .natural-gallery-body::after { - content: ""; - display: block; - clear: both; -} -.natural-gallery-js .natural-gallery-body a.figure { - width: inherit; - height: inherit; - cursor: default; -} -.natural-gallery-js .natural-gallery-body a.figure img { - width: inherit; - height: inherit; - object-fit: cover; -} -.natural-gallery-js .natural-gallery-body a.figure.zoomable { - cursor: zoom-in; -} -.natural-gallery-js .natural-gallery-next { - display: block; - margin: 10px auto; - text-align: center; - height: 30px; -} -.natural-gallery-js .natural-gallery-next svg { - cursor: pointer; - font-size: 16px; - height: inherit; -} -.natural-gallery-js .natural-gallery-next::after { - content: ""; - display: block; - clear: both; -} -@keyframes loading { - 0% { - transform: scale(0, 0); - opacity: 0.3; - } - 100% { - transform: scale(1, 1); - opacity: 0.05; - } -} - -/* node_modules/photoswipe/dist/photoswipe.css */ -.pswp { - --pswp-bg: #000; - --pswp-placeholder-bg: #222; - --pswp-root-z-index: 100000; - --pswp-preloader-color: rgba(79, 79, 79, 0.4); - --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); - --pswp-icon-color: #fff; - --pswp-icon-color-secondary: #4f4f4f; - --pswp-icon-stroke-color: #4f4f4f; - --pswp-icon-stroke-width: 2px; - --pswp-error-text-color: var(--pswp-icon-color); -} -.pswp { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: var(--pswp-root-z-index); - display: none; - touch-action: none; - outline: 0; - opacity: 0.003; - contain: layout style size; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} -.pswp:focus { - outline: 0; -} -.pswp * { - box-sizing: border-box; -} -.pswp img { - max-width: none; -} -.pswp--open { - display: block; -} -.pswp, -.pswp__bg { - transform: translateZ(0); - will-change: opacity; -} -.pswp__bg { - opacity: 0.005; - background: var(--pswp-bg); -} -.pswp, -.pswp__scroll-wrap { - overflow: hidden; -} -.pswp__scroll-wrap, -.pswp__bg, -.pswp__container, -.pswp__item, -.pswp__content, -.pswp__img, -.pswp__zoom-wrap { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} -.pswp__img, -.pswp__zoom-wrap { - width: auto; - height: auto; -} -.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { - cursor: -webkit-zoom-in; - cursor: -moz-zoom-in; - cursor: zoom-in; -} -.pswp--click-to-zoom.pswp--zoomed-in .pswp__img { - cursor: move; - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: grab; -} -.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: grabbing; -} -.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, -.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, -.pswp__img { - cursor: -webkit-zoom-out; - cursor: -moz-zoom-out; - cursor: zoom-out; -} -.pswp__container, -.pswp__img, -.pswp__button, -.pswp__counter { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.pswp__item { - z-index: 1; - overflow: hidden; -} -.pswp__hidden { - display: none !important; -} -.pswp__content { - pointer-events: none; -} -.pswp__content > * { - pointer-events: auto; -} -.pswp__error-msg-container { - display: grid; -} -.pswp__error-msg { - margin: auto; - font-size: 1em; - line-height: 1; - color: var(--pswp-error-text-color); -} -.pswp .pswp__hide-on-close { - opacity: 0.005; - will-change: opacity; - transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); - z-index: 10; - pointer-events: none; -} -.pswp--ui-visible .pswp__hide-on-close { - opacity: 1; - pointer-events: auto; -} -.pswp__button { - position: relative; - display: block; - width: 50px; - height: 60px; - padding: 0; - margin: 0; - overflow: hidden; - cursor: pointer; - background: none; - border: 0; - box-shadow: none; - opacity: 0.85; - -webkit-appearance: none; - -webkit-touch-callout: none; -} -.pswp__button:hover, -.pswp__button:active, -.pswp__button:focus { - transition: none; - padding: 0; - background: none; - border: 0; - box-shadow: none; - opacity: 1; -} -.pswp__button:disabled { - opacity: 0.3; - cursor: auto; -} -.pswp__icn { - fill: var(--pswp-icon-color); - color: var(--pswp-icon-color-secondary); -} -.pswp__icn { - position: absolute; - top: 14px; - left: 9px; - width: 32px; - height: 32px; - overflow: hidden; - pointer-events: none; -} -.pswp__icn-shadow { - stroke: var(--pswp-icon-stroke-color); - stroke-width: var(--pswp-icon-stroke-width); - fill: none; -} -.pswp__icn:focus { - outline: 0; -} -div.pswp__img--placeholder, -.pswp__img--with-bg { - background: var(--pswp-placeholder-bg); -} -.pswp__top-bar { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 60px; - display: flex; - flex-direction: row; - justify-content: flex-end; - z-index: 10; - pointer-events: none !important; -} -.pswp__top-bar > * { - pointer-events: auto; - will-change: opacity; -} -.pswp__button--close { - margin-right: 6px; -} -.pswp__button--arrow { - position: absolute; - top: 0; - width: 75px; - height: 100px; - top: 50%; - margin-top: -50px; -} -.pswp__button--arrow:disabled { - display: none; - cursor: default; -} -.pswp__button--arrow .pswp__icn { - top: 50%; - margin-top: -30px; - width: 60px; - height: 60px; - background: none; - border-radius: 0; -} -.pswp--one-slide .pswp__button--arrow { - display: none; -} -.pswp--touch .pswp__button--arrow { - visibility: hidden; -} -.pswp--has_mouse .pswp__button--arrow { - visibility: visible; -} -.pswp__button--arrow--prev { - right: auto; - left: 0px; -} -.pswp__button--arrow--next { - right: 0px; -} -.pswp__button--arrow--next .pswp__icn { - left: auto; - right: 14px; - transform: scale(-1, 1); -} -.pswp__button--zoom { - display: none; -} -.pswp--zoom-allowed .pswp__button--zoom { - display: block; -} -.pswp--zoomed-in .pswp__zoom-icn-bar-v { - display: none; -} -.pswp__preloader { - position: relative; - overflow: hidden; - width: 50px; - height: 60px; - margin-right: auto; -} -.pswp__preloader .pswp__icn { - opacity: 0; - transition: opacity 0.2s linear; - animation: pswp-clockwise 600ms linear infinite; -} -.pswp__preloader--active .pswp__icn { - opacity: 0.85; -} -@keyframes pswp-clockwise { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -.pswp__counter { - height: 30px; - margin-top: 15px; - margin-inline-start: 20px; - font-size: 14px; - line-height: 30px; - color: var(--pswp-icon-color); - text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary); - opacity: 0.85; -} -.pswp--one-slide .pswp__counter { - display: none; -} +.natural-gallery-js .figure{left:0;position:relative;display:flex;flex-direction:column;float:left;overflow:hidden;margin:0;transition:1s background-color}.natural-gallery-js .figure:hover .title.hover,.natural-gallery-js .figure:hover .selectBtn{transform:translateY(0)}.natural-gallery-js .figure.zoomable,.natural-gallery-js .figure .zoomable{cursor:zoom-in}.natural-gallery-js .figure.activable,.natural-gallery-js .figure .activable{cursor:pointer}.natural-gallery-js .figure.loaded>.image{opacity:1;transition:1s ease-out opacity,1s ease-out transform,.2s ease-out margin}.natural-gallery-js .figure.selected .selectBtn{transform:translateY(0);top:0;left:0}.natural-gallery-js .figure.zoomable:hover .image,.natural-gallery-js .figure .image.zoomable:hover{transform:rotate(1deg) scale(1.2)}.natural-gallery-js .figure.zoomable:active .image,.natural-gallery-js .figure .image.zoomable:active{transform:scale(1);transition:1s ease-out opacity,.1s ease-out transform,.2s ease-out margin}.natural-gallery-js .figure .image{display:block;position:relative;margin:0;width:auto;height:auto;flex:1;z-index:100;opacity:0;background-repeat:no-repeat;background-position:center center;transition:.2s ease all}.natural-gallery-js .figure .selectBtn{position:absolute;z-index:991;top:0;left:0;padding:10px;width:36px;height:36px;transition:.2s ease all;transform:translateY(calc(-100% - 15px));color:#ffffffe6;fill:currentColor;cursor:pointer;background:#0009;border-bottom-right-radius:5px}.natural-gallery-js .figure .selectBtn .marker{position:relative;width:18px;height:18px;border-width:2px;border-style:solid;box-sizing:border-box;border-radius:2px}.natural-gallery-js .figure .selectBtn .marker:before,.natural-gallery-js .figure .selectBtn .marker:after{content:" ";position:absolute;display:block;background:transparent;width:2px}.natural-gallery-js .figure .selectBtn .marker:before{left:5px;top:5px;height:7px;transform:rotate(-45deg);transform-origin:0 100%}.natural-gallery-js .figure .selectBtn .marker:after{left:4px;top:0;height:11px;transform:rotate(45deg);transform-origin:100% 100%}.natural-gallery-js .figure .title{position:absolute;bottom:0;left:0;right:0;z-index:1100;background:#0009;text-align:center;color:#fff;font-size:14px;line-height:1.7em;font-weight:400;padding:10px;transition:.2s ease all;overflow:hidden;white-space:normal}.natural-gallery-js .figure .title.hover{padding:10px;transform:translateY(calc(100% + 12px))}.natural-gallery-js .figure .link{border:none;text-decoration:none;cursor:pointer}.natural-gallery-js .figure .button{display:block;margin:10px;padding:5px;box-shadow:0 2px 5px #00000080;border-radius:4px}.pswp{z-index:9999999}.pswp .pswp__caption__center{text-align:center}.natural-gallery-js{position:relative}.natural-gallery-js *,.natural-gallery-js *:after,.natural-gallery-js *:before{box-sizing:border-box;margin:0;padding:0}.natural-gallery-js iframe{position:absolute;width:100%;height:0;top:0;left:0;background-color:transparent;border:0}.natural-gallery-js.scrolling,.natural-gallery-js.scrolling *{pointer-events:none!important}.natural-gallery-js .column{float:left}.natural-gallery-js .column:last-child{margin-right:0!important}.natural-gallery-js .column .figure:last-child{margin-bottom:0!important}.natural-gallery-js .natural-gallery-body{padding:0;margin:0}.natural-gallery-js .natural-gallery-body.resizing .figure,.natural-gallery-js .natural-gallery-body.resizing .column{transition:none;opacity:0}.natural-gallery-js .natural-gallery-body:after{content:"";display:block;clear:both}.natural-gallery-js .natural-gallery-body a.figure{width:inherit;height:inherit;cursor:default}.natural-gallery-js .natural-gallery-body a.figure img{width:inherit;height:inherit;object-fit:cover}.natural-gallery-js .natural-gallery-body a.figure.zoomable{cursor:zoom-in}.natural-gallery-js .natural-gallery-next{display:block;margin:10px auto;text-align:center;height:30px}.natural-gallery-js .natural-gallery-next svg{cursor:pointer;font-size:16px;height:inherit}.natural-gallery-js .natural-gallery-next:after{content:"";display:block;clear:both}@keyframes loading{0%{transform:scale(0);opacity:.3}to{transform:scale(1);opacity:.05}}.pswp{--pswp-bg: #000;--pswp-placeholder-bg: #222;--pswp-root-z-index: 100000;--pswp-preloader-color: rgba(79, 79, 79, .4);--pswp-preloader-color-secondary: rgba(255, 255, 255, .9);--pswp-icon-color: #fff;--pswp-icon-color-secondary: #4f4f4f;--pswp-icon-stroke-color: #4f4f4f;--pswp-icon-stroke-width: 2px;--pswp-error-text-color: var(--pswp-icon-color)}.pswp{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--pswp-root-z-index);display:none;touch-action:none;outline:0;opacity:.003;contain:layout style size;-webkit-tap-highlight-color:rgba(0,0,0,0)}.pswp:focus{outline:0}.pswp *{box-sizing:border-box}.pswp img{max-width:none}.pswp--open{display:block}.pswp,.pswp__bg{transform:translateZ(0);will-change:opacity}.pswp__bg{opacity:.005;background:var(--pswp-bg)}.pswp,.pswp__scroll-wrap{overflow:hidden}.pswp__scroll-wrap,.pswp__bg,.pswp__container,.pswp__item,.pswp__content,.pswp__img,.pswp__zoom-wrap{position:absolute;top:0;left:0;width:100%;height:100%}.pswp__img,.pswp__zoom-wrap{width:auto;height:auto}.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,.pswp__img{cursor:-webkit-zoom-out;cursor:-moz-zoom-out;cursor:zoom-out}.pswp__container,.pswp__img,.pswp__button,.pswp__counter{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pswp__item{z-index:1;overflow:hidden}.pswp__hidden{display:none!important}.pswp__content{pointer-events:none}.pswp__content>*{pointer-events:auto}.pswp__error-msg-container{display:grid}.pswp__error-msg{margin:auto;font-size:1em;line-height:1;color:var(--pswp-error-text-color)}.pswp .pswp__hide-on-close{opacity:.005;will-change:opacity;transition:opacity var(--pswp-transition-duration) cubic-bezier(.4,0,.22,1);z-index:10;pointer-events:none}.pswp--ui-visible .pswp__hide-on-close{opacity:1;pointer-events:auto}.pswp__button{position:relative;display:block;width:50px;height:60px;padding:0;margin:0;overflow:hidden;cursor:pointer;background:none;border:0;box-shadow:none;opacity:.85;-webkit-appearance:none;-webkit-touch-callout:none}.pswp__button:hover,.pswp__button:active,.pswp__button:focus{transition:none;padding:0;background:none;border:0;box-shadow:none;opacity:1}.pswp__button:disabled{opacity:.3;cursor:auto}.pswp__icn{fill:var(--pswp-icon-color);color:var(--pswp-icon-color-secondary)}.pswp__icn{position:absolute;top:14px;left:9px;width:32px;height:32px;overflow:hidden;pointer-events:none}.pswp__icn-shadow{stroke:var(--pswp-icon-stroke-color);stroke-width:var(--pswp-icon-stroke-width);fill:none}.pswp__icn:focus{outline:0}div.pswp__img--placeholder,.pswp__img--with-bg{background:var(--pswp-placeholder-bg)}.pswp__top-bar{position:absolute;left:0;top:0;width:100%;height:60px;display:flex;flex-direction:row;justify-content:flex-end;z-index:10;pointer-events:none!important}.pswp__top-bar>*{pointer-events:auto;will-change:opacity}.pswp__button--close{margin-right:6px}.pswp__button--arrow{position:absolute;width:75px;height:100px;top:50%;margin-top:-50px}.pswp__button--arrow:disabled{display:none;cursor:default}.pswp__button--arrow .pswp__icn{top:50%;margin-top:-30px;width:60px;height:60px;background:none;border-radius:0}.pswp--one-slide .pswp__button--arrow{display:none}.pswp--touch .pswp__button--arrow{visibility:hidden}.pswp--has_mouse .pswp__button--arrow{visibility:visible}.pswp__button--arrow--prev{right:auto;left:0}.pswp__button--arrow--next{right:0}.pswp__button--arrow--next .pswp__icn{left:auto;right:14px;transform:scaleX(-1)}.pswp__button--zoom{display:none}.pswp--zoom-allowed .pswp__button--zoom{display:block}.pswp--zoomed-in .pswp__zoom-icn-bar-v{display:none}.pswp__preloader{position:relative;overflow:hidden;width:50px;height:60px;margin-right:auto}.pswp__preloader .pswp__icn{opacity:0;transition:opacity .2s linear;animation:pswp-clockwise .6s linear infinite}.pswp__preloader--active .pswp__icn{opacity:.85}@keyframes pswp-clockwise{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pswp__counter{height:30px;margin-top:15px;margin-inline-start:20px;font-size:14px;line-height:30px;color:var(--pswp-icon-color);text-shadow:1px 1px 3px var(--pswp-icon-color-secondary);opacity:.85}.pswp--one-slide .pswp__counter{display:none} /*! Bundled license information: photoswipe/dist/photoswipe.css: diff --git a/docs/assets/natural-gallery-js/natural-gallery.css.map b/docs/assets/natural-gallery-js/natural-gallery.css.map index 2676f5d..13a4966 100644 --- a/docs/assets/natural-gallery-js/natural-gallery.css.map +++ b/docs/assets/natural-gallery-js/natural-gallery.css.map @@ -1 +1 @@ -{"version":3,"sources":["../../../src/styles/_figure.scss","../../../src/styles/natural-gallery.scss","../../../node_modules/photoswipe/dist/photoswipe.css"],"sourcesContent":[".natural-gallery-js {\n\n .figure {\n left: 0;\n position: relative;\n display: flex;\n flex-direction: column;\n float: left;\n overflow: hidden;\n margin: 0;\n transition: 1s background-color;\n\n &:hover {\n .title.hover, .title.hover, .selectBtn {\n transform: translateY(0%);\n }\n }\n\n &.zoomable, .zoomable {\n cursor: zoom-in;\n }\n\n &.activable, .activable {\n cursor: pointer;\n }\n\n &.loaded > .image {\n opacity: 1;\n transition: 1s ease-out opacity, 1s ease-out transform, .2s ease-out margin;\n }\n\n &.selected {\n .selectBtn {\n transform: translateY(0%);\n top: 0;\n left: 0;\n }\n }\n\n &.zoomable:hover .image,\n .image.zoomable:hover {\n transform: rotate(1deg) scale(1.2);\n }\n\n &.zoomable:active .image,\n .image.zoomable:active {\n transform: scale(1.0);\n transition: 1s ease-out opacity, 0.1s ease-out transform, .2s ease-out margin;\n }\n\n .image {\n display: block;\n position: relative;\n margin: 0;\n width: auto;\n height: auto;\n flex: 1;\n z-index: 100;\n opacity: 0;\n background-repeat: no-repeat;\n background-position: center center;\n transition: .2s ease all;\n }\n\n .selectBtn {\n position: absolute;\n z-index: 991;\n top: 0;\n left: 0;\n padding: 10px;\n width: 36px;\n height: 36px;\n transition: .2s ease all;\n transform: translateY(calc(-100% - 15px));\n color: rgba(255, 255, 255, 0.9);\n fill: currentColor;\n cursor: pointer;\n background: rgba(0, 0, 0, 0.6);\n border-bottom-right-radius: 5px;\n\n .marker {\n position: relative;\n width: 18px;\n height: 18px;\n border-width: 2px;\n border-style: solid;\n box-sizing: border-box;\n border-radius: 2px;\n\n &::before, &::after {\n content: ' ';\n position: absolute;\n display: block;\n background: transparent;\n width: 2px;\n }\n\n &::before {\n left: 5px;\n top: 5px;\n height: 7px;\n transform: rotateZ(-45deg);\n transform-origin: 0 100%;\n }\n\n &::after {\n left: 4px;\n top: 0px;\n height: 11px;\n transform: rotateZ(45deg);\n transform-origin: 100% 100%;\n }\n\n }\n }\n\n .title {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1100;\n background: rgba(0, 0, 0, 0.6);\n text-align: center;\n color: white;\n font-size: 14px;\n line-height: 1.7em;\n font-weight: normal;\n padding: 10px;\n transition: .2s ease all;\n overflow: hidden;\n white-space: normal;\n\n // Status : Mouse out\n &.hover {\n padding: 10px;\n // + the margin of &[href]\n transform: translateY(calc(100% + 12px));\n }\n }\n\n .link {\n border: none;\n text-decoration: none;\n cursor: pointer;\n }\n\n .button {\n display: block;\n margin: 10px;\n padding: 5px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);\n border-radius: 4px;\n }\n }\n}\n","@import \"figure\";\n\n.pswp {\n z-index: 9999999;\n\n .pswp__caption__center {\n text-align: center;\n }\n}\n\n.natural-gallery-js {\n position: relative;\n\n *,\n *::after,\n *::before {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n iframe {\n position: absolute;\n width: 100%;\n height: 0;\n top: 0;\n left: 0;\n background-color: transparent;\n border: 0;\n }\n\n &.scrolling {\n &,\n & * {\n pointer-events: none !important;\n }\n }\n\n /**\n * Columns\n * ===================================================\n */\n\n .column {\n float: left;\n\n &:last-child {\n margin-right: 0 !important;\n }\n\n .figure:last-child {\n margin-bottom: 0 !important;\n }\n }\n\n /**\n * Pictures\n * ===================================================\n */\n .natural-gallery-body {\n padding: 0;\n margin: 0;\n\n &.resizing {\n .figure,\n .column {\n transition: none;\n opacity: 0;\n }\n }\n\n &::after {\n content: \"\";\n display: block;\n clear: both;\n }\n\n a.figure {\n width: inherit;\n height: inherit;\n cursor: default;\n\n img {\n width: inherit;\n height: inherit;\n object-fit: cover;\n }\n }\n\n a.figure.zoomable {\n cursor: zoom-in;\n }\n }\n\n /**\n * Next\n * ===================================================\n */\n .natural-gallery-next {\n display: block;\n margin: 10px auto;\n text-align: center;\n height: 30px;\n\n svg {\n cursor: pointer;\n font-size: 16px;\n height: inherit;\n }\n\n &::after {\n content: \"\";\n display: block;\n clear: both;\n }\n }\n\n /**\n * Animations\n * ===================================================\n */\n @keyframes loading {\n 0% {\n transform: scale(0, 0);\n opacity: 0.3;\n }\n\n 100% {\n transform: scale(1, 1);\n opacity: 0.05;\n }\n }\n}\n","/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */\r\n\r\n.pswp {\r\n --pswp-bg: #000;\r\n --pswp-placeholder-bg: #222;\r\n \r\n\r\n --pswp-root-z-index: 100000;\r\n \r\n --pswp-preloader-color: rgba(79, 79, 79, 0.4);\r\n --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);\r\n \r\n /* defined via js:\r\n --pswp-transition-duration: 333ms; */\r\n \r\n --pswp-icon-color: #fff;\r\n --pswp-icon-color-secondary: #4f4f4f;\r\n --pswp-icon-stroke-color: #4f4f4f;\r\n --pswp-icon-stroke-width: 2px;\r\n\r\n --pswp-error-text-color: var(--pswp-icon-color);\r\n}\r\n\r\n\r\n/*\r\n\tStyles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)\r\n*/\r\n\r\n.pswp {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tz-index: var(--pswp-root-z-index);\r\n\tdisplay: none;\r\n\ttouch-action: none;\r\n\toutline: 0;\r\n\topacity: 0.003;\r\n\tcontain: layout style size;\r\n\t-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n}\r\n\r\n/* Prevents focus outline on the root element,\r\n (it may be focused initially) */\r\n.pswp:focus {\r\n outline: 0;\r\n}\r\n\r\n.pswp * {\r\n box-sizing: border-box;\r\n}\r\n\r\n.pswp img {\r\n max-width: none;\r\n}\r\n\r\n.pswp--open {\r\n\tdisplay: block;\r\n}\r\n\r\n.pswp,\r\n.pswp__bg {\r\n\ttransform: translateZ(0);\r\n\twill-change: opacity;\r\n}\r\n\r\n.pswp__bg {\r\n opacity: 0.005;\r\n\tbackground: var(--pswp-bg);\r\n}\r\n\r\n.pswp,\r\n.pswp__scroll-wrap {\r\n\toverflow: hidden;\r\n}\r\n\r\n.pswp__scroll-wrap,\r\n.pswp__bg,\r\n.pswp__container,\r\n.pswp__item,\r\n.pswp__content,\r\n.pswp__img,\r\n.pswp__zoom-wrap {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.pswp__img,\r\n.pswp__zoom-wrap {\r\n\twidth: auto;\r\n\theight: auto;\r\n}\r\n\r\n.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {\r\n\tcursor: -webkit-zoom-in;\r\n\tcursor: -moz-zoom-in;\r\n\tcursor: zoom-in;\r\n}\r\n\r\n.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {\r\n\tcursor: move;\r\n\tcursor: -webkit-grab;\r\n\tcursor: -moz-grab;\r\n\tcursor: grab;\r\n}\r\n\r\n.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {\r\n cursor: -webkit-grabbing;\r\n cursor: -moz-grabbing;\r\n cursor: grabbing;\r\n}\r\n\r\n/* :active to override grabbing cursor */\r\n.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,\r\n.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,\r\n.pswp__img {\r\n\tcursor: -webkit-zoom-out;\r\n\tcursor: -moz-zoom-out;\r\n\tcursor: zoom-out;\r\n}\r\n\r\n\r\n/* Prevent selection and tap highlights */\r\n.pswp__container,\r\n.pswp__img,\r\n.pswp__button,\r\n.pswp__counter {\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n\r\n.pswp__item {\r\n\t/* z-index for fade transition */\r\n\tz-index: 1;\r\n\toverflow: hidden;\r\n}\r\n\r\n.pswp__hidden {\r\n\tdisplay: none !important;\r\n}\r\n\r\n/* Allow to click through pswp__content element, but not its children */\r\n.pswp__content {\r\n pointer-events: none;\r\n}\r\n.pswp__content > * {\r\n pointer-events: auto;\r\n}\r\n\r\n\r\n/*\r\n\r\n PhotoSwipe UI\r\n\r\n*/\r\n\r\n/*\r\n\tError message appears when image is not loaded\r\n\t(JS option errorMsg controls markup)\r\n*/\r\n.pswp__error-msg-container {\r\n display: grid;\r\n}\r\n.pswp__error-msg {\r\n\tmargin: auto;\r\n\tfont-size: 1em;\r\n\tline-height: 1;\r\n\tcolor: var(--pswp-error-text-color);\r\n}\r\n\r\n/*\r\nclass pswp__hide-on-close is applied to elements that\r\nshould hide (for example fade out) when PhotoSwipe is closed\r\nand show (for example fade in) when PhotoSwipe is opened\r\n */\r\n.pswp .pswp__hide-on-close {\r\n\topacity: 0.005;\r\n\twill-change: opacity;\r\n\ttransition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);\r\n\tz-index: 10; /* always overlap slide content */\r\n\tpointer-events: none; /* hidden elements should not be clickable */\r\n}\r\n\r\n/* class pswp--ui-visible is added when opening or closing transition starts */\r\n.pswp--ui-visible .pswp__hide-on-close {\r\n\topacity: 1;\r\n\tpointer-events: auto;\r\n}\r\n\r\n/*