smartphoto 1.6.4 → 2.0.0

package/css/smartphoto.css

@@ -6,7 +6,6 @@
     opacity: 1;
   }
 }
-
 @keyframes smartphoto-img-wrap {
   from {
     opacity: 0;
@@ -15,7 +14,6 @@
     opacity: 1;
   }
 }
-
 @keyframes smartphoto-inner {
   from {
     transform: translate(0, 100px);
@@ -24,10 +22,9 @@
     transform: translate(0, 0);
   }
 }
-
 @keyframes smartphoto-loader {
   0% {
-    opacity: .4;
+    opacity: 0.4;
     transform: rotate(0deg);
   }
   50% {
@@ -35,66 +32,56 @@
     transform: rotate(180deg);
   }
   100% {
-    opacity: .4;
+    opacity: 0.4;
     transform: rotate(360deg);
   }
 }
-
 @keyframes smartphoto-appear {
   0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: block;
     opacity: 0;
   }
   100% {
-    display: block;
     opacity: 1;
   }
 }
-
 @keyframes smartphoto-hide {
   0% {
-    display: block;
     opacity: 1;
   }
-  99% {
-    display: block;
-    opacity: 0;
-  }
   100% {
-    display: none;
     opacity: 0;
   }
 }
+:root:has(dialog.smartphoto[open]) {
+  overflow: hidden;
+}
 
 .smartphoto {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  outline: none;
   position: fixed;
-  z-index: 100;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   overflow: hidden;
-  background-color: black;
+  height: 100dvh;
+  max-height: 100dvh;
+  background-color: var(--smartphoto-backdrop-color, rgb(0, 0, 0));
   opacity: 1;
   font-family: sans-serif;
   cursor: pointer;
-  -webkit-transition: opacity 0.3s ease-out;
-  -moz-transition: opacity 0.3s ease-out;
-  -ms-transition: opacity 0.3s ease-out;
-  -o-transition: opacity 0.3s ease-out;
-  transition: opacity 0.3s ease-out;
-  transition: all 0.3s ease-out;
-  animation-name: smartphoto;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-out;
-}
-
-.smartphoto[aria-hidden="true"] {
-  display: none;
+  transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out), display var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out) allow-discrete, overlay var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out) allow-discrete;
+}
+.smartphoto:not([open]) {
+  opacity: 0;
+}
+.smartphoto::backdrop {
+  background-color: var(--smartphoto-backdrop-color, rgb(0, 0, 0));
 }
 
 .smartphoto-close {
@@ -103,7 +90,7 @@
 
 .smartphoto-count {
   display: inline-block;
-  color: #FFF;
+  color: #fff;
   font-size: 16px;
 }
 
@@ -117,7 +104,7 @@
   width: 100%;
   height: 50px;
   padding: 15px;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--smartphoto-header-color, rgba(0, 0, 0, 0.2));
 }
 
 .smartphoto-content {
@@ -127,6 +114,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  touch-action: none;
 }
 
 .smartphoto-dismiss {
@@ -140,8 +128,8 @@
   border: none;
   background-color: transparent;
   background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik0xNTc2LjQyLDE0MDYuNzYsMjc4NCwxOTkuMTlhNTYuODYsNTYuODYsMCwwLDAsMC04MC4xOGwtNzguOTItNzguOTJhNTYuODYsNTYuODYsMCwwLDAtODAuMTgsMEwxNDE3LjMyLDEyNDcuNjYsMjA5Ljc1LDQwLjA5YTU2Ljg2LDU2Ljg2LDAsMCwwLTgwLjE4LDBMNTAuNjUsMTE5YTU2Ljg2LDU2Ljg2LDAsMCwwLDAsODAuMThMMTI1OC4yMywxNDA2Ljc2LDUwLjY1LDI2MTQuMzRhNTYuODYsNTYuODYsMCwwLDAsMCw4MC4xOGw3OC45Miw3OC45MmE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwTDE0MTcuMzIsMTU2NS44NiwyNjI0LjksMjc3My40NGE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwbDc4LjkyLTc4LjkyYTU2Ljg2LDU2Ljg2LDAsMCwwLDAtODAuMThaIi8+PC9zdmc+);
-  text-shadow: 0 1px 0 #FFF;
-  color: #FFF;
+  text-shadow: 0 1px 0 #fff;
+  color: #fff;
   font-size: 30px;
   text-decoration: none;
   cursor: pointer;
@@ -173,7 +161,7 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  transition: transform 0.3s ease-out;
+  transition: transform var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
   -webkit-user-drag: none;
 }
 
@@ -188,20 +176,21 @@
 }
 
 .smartphoto-img-elasticmove {
-  transition: transform 0.3s ease-out;
+  transition: transform var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
 }
 
 .smartphoto-img-wrap {
   display: inline-block;
   opacity: 1;
-  -webkit-transition: opacity 0.3s ease-out;
-  -moz-transition: opacity 0.3s ease-out;
-  -ms-transition: opacity 0.3s ease-out;
-  -o-transition: opacity 0.3s ease-out;
-  transition: opacity 0.3s ease-out;
+  touch-action: none;
+  -webkit-transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
+  -moz-transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
+  -ms-transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
+  -o-transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
+  transition: opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
   animation-name: smartphoto-img-wrap;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-out;
+  animation-duration: var(--smartphoto-animation-speed, 0.3s);
+  animation-timing-function: var(--smartphoto-animation-function, ease-out);
 }
 
 .smartphoto-img-left {
@@ -222,11 +211,11 @@
   left: 0;
   opacity: 1;
   animation-name: smartphoto-appear;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-out;
+  animation-duration: var(--smartphoto-animation-speed, 0.3s);
+  animation-timing-function: var(--smartphoto-animation-function, ease-out);
 }
 
-.smartphoto-arrows[aria-hidden="true"] {
+.smartphoto-arrows[aria-hidden=true] {
   animation-name: smartphoto-hide;
   display: none;
 }
@@ -239,25 +228,29 @@
   height: 30px;
   margin-top: -20px;
   box-sizing: content-box;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-out;
+  animation-duration: var(--smartphoto-animation-speed, 0.3s);
+  animation-timing-function: var(--smartphoto-animation-function, ease-out);
   animation-name: smartphoto-appear;
 }
-
 .smartphoto-arrows li:focus {
   outline: none;
 }
 
-.smartphoto-arrows [aria-hidden="true"] {
+.smartphoto-arrows [aria-hidden=true] {
   animation-name: smartphoto-hide;
   display: none;
 }
 
-.smartphoto-arrows a {
+.smartphoto-arrows button {
+  appearance: none;
   display: block;
   width: 100%;
   height: 100%;
-  text-decoration: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
 }
 
 .smartphoto-arrow-right {
@@ -265,8 +258,7 @@
   padding: 5px 0;
   background-color: rgba(0, 0, 0, 0.5);
 }
-
-.smartphoto-arrow-right a {
+.smartphoto-arrow-right button {
   background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiAiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTgzNy44OCwxNDE3LjMyLDY0My41OSwyMjNhNzIuMjEsNzIuMjEsMCwwLDEsMC0xMDEuODJMNzQzLjgyLDIxYTcyLjIxLDcyLjIxLDAsMCwxLDEwMS44MiwwTDIwOTAuODMsMTI2Ni4xOWwxMDAuMjMsMTAwLjIzYTcyLjIxLDcyLjIxLDAsMCwxLDAsMTAxLjgyTDg0NS42NCwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwxLTEwMS44MiwwTDY0My41OSwyNzEzLjQyYTcyLjIxLDcyLjIxLDAsMCwxLDAtMTAxLjgyWiIvPjwvc3ZnPg==);
 }
 
@@ -275,8 +267,7 @@
   padding: 5px 0;
   background-color: rgba(0, 0, 0, 0.5);
 }
-
-.smartphoto-arrow-left a {
+.smartphoto-arrow-left button {
   background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik05OTYuNzcsMTQxNy4zMiwyMTkxLjA2LDIyM2E3Mi4yMSw3Mi4yMSwwLDAsMCwwLTEwMS44MkwyMDkwLjgzLDIxQTcyLjIxLDcyLjIxLDAsMCwwLDE5ODksMjFMNzQzLjgyLDEyNjYuMTksNjQzLjU5LDEzNjYuNDJhNzIuMjEsNzIuMjEsMCwwLDAsMCwxMDEuODJMMTk4OSwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwwLDEwMS44MiwwbDEwMC4yMy0xMDAuMjNhNzIuMjEsNzIuMjEsMCwwLDAsMC0xMDEuODJaIi8+PC9zdmc+);
 }
 
@@ -291,11 +282,11 @@
   width: 100%;
   opacity: 1;
   animation-name: smartphoto-appear;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-out;
+  animation-duration: var(--smartphoto-animation-speed, 0.3s);
+  animation-timing-function: var(--smartphoto-animation-function, ease-out);
 }
 
-.smartphoto-nav[aria-hidden="true"] {
+.smartphoto-nav[aria-hidden=true] {
   animation-name: smartphoto-hide;
   display: none;
 }
@@ -318,21 +309,25 @@
   height: 50px;
 }
 
-.smartphoto-nav a {
+.smartphoto-nav button {
+  appearance: none;
   display: block;
   width: 100%;
   height: 100%;
-  background-color: #FFF;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: #fff;
   background-position: center center;
   background-size: cover;
-  opacity: .5;
+  opacity: 0.5;
+  cursor: pointer;
 }
-
-.smartphoto-nav a:focus {
-  opacity: .8;
+.smartphoto-nav button:focus {
+  opacity: 0.8;
 }
 
-.smartphoto-nav a.current {
+.smartphoto-nav button.current {
   opacity: 1;
 }
 
@@ -351,7 +346,6 @@
   padding: 0;
   white-space: nowrap;
 }
-
 .smartphoto-list li {
   display: block;
   position: absolute;
@@ -359,15 +353,14 @@
   left: 0;
   width: 100%;
   height: 100%;
-  transition: all 0.3s ease-out;
+  transition: all var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
 }
-
 .smartphoto-list li:focus {
   outline: none;
 }
 
 .smartphoto-list-onmove {
-  transition: all 0.3s ease-out;
+  transition: all 0.3s var(--smartphoto-animation-function, ease-out);
 }
 
 .smartphoto-caption {
@@ -379,14 +372,15 @@
   width: 100%;
   height: 50px;
   padding: 0 50px;
-  color: #FFF;
+  color: #fff;
   font-size: 12px;
   text-align: center;
   line-height: 50px;
   white-space: nowrap;
   text-overflow: ellipsis;
+  margin: 0;
+  font-weight: normal;
 }
-
 .smartphoto-caption:focus {
   outline: none;
 }
@@ -398,6 +392,7 @@
   width: 0;
   height: 0;
   transform: translate(50vw, 50vh);
+  transform: translate(50vw, 50dvh);
 }
 
 .smartphoto-loader {
@@ -409,10 +404,10 @@
   height: 30px;
   margin-top: -25px;
   margin-left: -25px;
-  border: 8px solid #17CDDD;
+  border: 8px solid #17cddd;
   border-right-color: transparent;
   border-radius: 50%;
-  animation: smartphoto-loader .5s infinite linear;
+  animation: smartphoto-loader 0.5s infinite linear;
 }
 
 .smartphoto-img-clone {
@@ -420,7 +415,7 @@
   z-index: 100;
   top: 0;
   left: 0;
-  transition: all 0.3s ease-out;
+  transition: all var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);
 }
 
 .smartphoto-sr-only {
@@ -433,3 +428,5 @@
   border: 0;
   clip: rect(0, 0, 0, 0);
 }
+
+/*# sourceMappingURL=smartphoto.css.map */

package/css/smartphoto.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/smartphoto.scss"],"names":[],"mappings":"AAKA;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAUJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAIF;EAEE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAKA;EAKA;EACA;EACA;EACA;EACA;EACA;EAKA,YACE;;AAIF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"smartphoto.css"}

package/css/smartphoto.min.css

@@ -1 +1 @@
-@keyframes smartphoto{from{opacity:0}to{opacity:1}}@keyframes smartphoto-img-wrap{from{opacity:0}to{opacity:1}}@keyframes smartphoto-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}@keyframes smartphoto-loader{0%{opacity:.4;transform:rotate(0deg)}50%{opacity:1;transform:rotate(180deg)}100%{opacity:.4;transform:rotate(360deg)}}@keyframes smartphoto-appear{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}@keyframes smartphoto-hide{0%{display:block;opacity:1}99%{display:block;opacity:0}100%{display:none;opacity:0}}.smartphoto{position:fixed;z-index:100;top:0;left:0;width:100%;height:100%;overflow:hidden;background-color:#000;opacity:1;font-family:sans-serif;cursor:pointer;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out;transition:all 0.3s ease-out;animation-name:smartphoto;animation-duration:.3s;animation-timing-function:ease-out}.smartphoto[aria-hidden="true"]{display:none}.smartphoto-close{opacity:0}.smartphoto-count{display:inline-block;color:#FFF;font-size:16px}.smartphoto-header{display:block;box-sizing:border-box;position:fixed;z-index:102;top:0;left:0;width:100%;height:50px;padding:15px;background-color:rgba(0,0,0,0.2)}.smartphoto-content{display:block;position:absolute;top:0;left:0;width:100%;height:100%}.smartphoto-dismiss{display:block;position:absolute;top:15px;right:10px;width:20px;height:20px;padding:0;border:none;background-color:transparent;background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik0xNTc2LjQyLDE0MDYuNzYsMjc4NCwxOTkuMTlhNTYuODYsNTYuODYsMCwwLDAsMC04MC4xOGwtNzguOTItNzguOTJhNTYuODYsNTYuODYsMCwwLDAtODAuMTgsMEwxNDE3LjMyLDEyNDcuNjYsMjA5Ljc1LDQwLjA5YTU2Ljg2LDU2Ljg2LDAsMCwwLTgwLjE4LDBMNTAuNjUsMTE5YTU2Ljg2LDU2Ljg2LDAsMCwwLDAsODAuMThMMTI1OC4yMywxNDA2Ljc2LDUwLjY1LDI2MTQuMzRhNTYuODYsNTYuODYsMCwwLDAsMCw4MC4xOGw3OC45Miw3OC45MmE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwTDE0MTcuMzIsMTU2NS44NiwyNjI0LjksMjc3My40NGE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwbDc4LjkyLTc4LjkyYTU2Ljg2LDU2Ljg2LDAsMCwwLDAtODAuMThaIi8+PC9zdmc+);text-shadow:0 1px 0 #FFF;color:#FFF;font-size:30px;text-decoration:none;cursor:pointer;line-height:1}.smartphoto-body{position:relative;z-index:102;width:100%;height:100%;margin:0 auto}.smartphoto-inner{position:relative;width:100%;height:100%;vertical-align:top}.smartphoto-img{display:none;max-width:none;width:auto;height:auto;cursor:zoom-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform 0.3s ease-out;-webkit-user-drag:none}.smartphoto-img.active{display:block}.smartphoto-img-onmove{cursor:grab;cursor:-webkit-grab;transition:none}.smartphoto-img-elasticmove{transition:transform 0.3s ease-out}.smartphoto-img-wrap{display:inline-block;opacity:1;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out;animation-name:smartphoto-img-wrap;animation-duration:.3s;animation-timing-function:ease-out}.smartphoto-img-left{transform:translateX(150%) !important}.smartphoto-img-right{transform:translateX(-150%) !important}.smartphoto-arrows{list-style-type:none;margin:0;padding:0;position:relative;z-index:1002;top:50%;left:0;opacity:1;animation-name:smartphoto-appear;animation-duration:.3s;animation-timing-function:ease-out}.smartphoto-arrows[aria-hidden="true"]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows li{display:block;position:absolute;top:50%;width:30px;height:30px;margin-top:-20px;box-sizing:content-box;animation-duration:.3s;animation-timing-function:ease-out;animation-name:smartphoto-appear}.smartphoto-arrows li:focus{outline:none}.smartphoto-arrows [aria-hidden="true"]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows a{display:block;width:100%;height:100%;text-decoration:none}.smartphoto-arrow-right{right:0;padding:5px 0;background-color:rgba(0,0,0,0.5)}.smartphoto-arrow-right a{background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiAiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTgzNy44OCwxNDE3LjMyLDY0My41OSwyMjNhNzIuMjEsNzIuMjEsMCwwLDEsMC0xMDEuODJMNzQzLjgyLDIxYTcyLjIxLDcyLjIxLDAsMCwxLDEwMS44MiwwTDIwOTAuODMsMTI2Ni4xOWwxMDAuMjMsMTAwLjIzYTcyLjIxLDcyLjIxLDAsMCwxLDAsMTAxLjgyTDg0NS42NCwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwxLTEwMS44MiwwTDY0My41OSwyNzEzLjQyYTcyLjIxLDcyLjIxLDAsMCwxLDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartphoto-arrow-left{left:0;padding:5px 0;background-color:rgba(0,0,0,0.5)}.smartphoto-arrow-left a{background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik05OTYuNzcsMTQxNy4zMiwyMTkxLjA2LDIyM2E3Mi4yMSw3Mi4yMSwwLDAsMCwwLTEwMS44MkwyMDkwLjgzLDIxQTcyLjIxLDcyLjIxLDAsMCwwLDE5ODksMjFMNzQzLjgyLDEyNjYuMTksNjQzLjU5LDEzNjYuNDJhNzIuMjEsNzIuMjEsMCwwLDAsMCwxMDEuODJMMTk4OSwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwwLDEwMS44MiwwbDEwMC4yMy0xMDAuMjNhNzIuMjEsNzIuMjEsMCwwLDAsMC0xMDEuODJaIi8+PC9zdmc+)}.smartPhotoArrowHideIcon{display:none}.smartphoto-nav{position:absolute;bottom:0;left:0;width:100%;opacity:1;animation-name:smartphoto-appear;animation-duration:.3s;animation-timing-function:ease-out}.smartphoto-nav[aria-hidden="true"]{animation-name:smartphoto-hide;display:none}.smartphoto-nav ul{display:block;overflow-x:auto;list-style:none;margin:0;padding:0;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.smartphoto-nav li{display:inline-block;overflow:hidden;width:50px;height:50px}.smartphoto-nav a{display:block;width:100%;height:100%;background-color:#FFF;background-position:center center;background-size:cover;opacity:.5}.smartphoto-nav a:focus{opacity:.8}.smartphoto-nav a.current{opacity:1}.smartphoto-nav img{width:auto;height:100%}.smartphoto-list{list-style-type:none;position:absolute;z-index:101;top:0;left:0;margin:0;padding:0;white-space:nowrap}.smartphoto-list li{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:all 0.3s ease-out}.smartphoto-list li:focus{outline:none}.smartphoto-list-onmove{transition:all 0.3s ease-out}.smartphoto-caption{overflow:hidden;box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:50px;padding:0 50px;color:#FFF;font-size:12px;text-align:center;line-height:50px;white-space:nowrap;text-overflow:ellipsis}.smartphoto-caption:focus{outline:none}.smartphoto-loader-wrap{display:block;position:relative;z-index:103;width:0;height:0;transform:translate(50vw, 50vh)}.smartphoto-loader{position:absolute;z-index:101;top:0;left:0;width:30px;height:30px;margin-top:-25px;margin-left:-25px;border:8px solid #17CDDD;border-right-color:transparent;border-radius:50%;animation:smartphoto-loader .5s infinite linear}.smartphoto-img-clone{position:fixed;z-index:100;top:0;left:0;transition:all .3s ease-out}.smartphoto-sr-only{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0, 0, 0, 0)}
+@keyframes smartphoto{from{opacity:0}to{opacity:1}}@keyframes smartphoto-img-wrap{from{opacity:0}to{opacity:1}}@keyframes smartphoto-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}@keyframes smartphoto-loader{0%{opacity:.4;transform:rotate(0deg)}50%{opacity:1;transform:rotate(180deg)}100%{opacity:.4;transform:rotate(360deg)}}@keyframes smartphoto-appear{0%{opacity:0}100%{opacity:1}}@keyframes smartphoto-hide{0%{opacity:1}100%{opacity:0}}:root:has(dialog.smartphoto[open]){overflow:hidden}.smartphoto{border:none;background:rgba(0,0,0,0);padding:0;margin:0;outline:none;position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;height:100dvh;max-height:100dvh;background-color:var(--smartphoto-backdrop-color, rgb(0, 0, 0));opacity:1;font-family:sans-serif;cursor:pointer;transition:opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out),display var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out) allow-discrete,overlay var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out) allow-discrete}.smartphoto:not([open]){opacity:0}.smartphoto::backdrop{background-color:var(--smartphoto-backdrop-color, rgb(0, 0, 0))}.smartphoto-close{opacity:0}.smartphoto-count{display:inline-block;color:#fff;font-size:16px}.smartphoto-header{display:block;box-sizing:border-box;position:fixed;z-index:102;top:0;left:0;width:100%;height:50px;padding:15px;background-color:var(--smartphoto-header-color, rgba(0, 0, 0, 0.2))}.smartphoto-content{display:block;position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none}.smartphoto-dismiss{display:block;position:absolute;top:15px;right:10px;width:20px;height:20px;padding:0;border:none;background-color:rgba(0,0,0,0);background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik0xNTc2LjQyLDE0MDYuNzYsMjc4NCwxOTkuMTlhNTYuODYsNTYuODYsMCwwLDAsMC04MC4xOGwtNzguOTItNzguOTJhNTYuODYsNTYuODYsMCwwLDAtODAuMTgsMEwxNDE3LjMyLDEyNDcuNjYsMjA5Ljc1LDQwLjA5YTU2Ljg2LDU2Ljg2LDAsMCwwLTgwLjE4LDBMNTAuNjUsMTE5YTU2Ljg2LDU2Ljg2LDAsMCwwLDAsODAuMThMMTI1OC4yMywxNDA2Ljc2LDUwLjY1LDI2MTQuMzRhNTYuODYsNTYuODYsMCwwLDAsMCw4MC4xOGw3OC45Miw3OC45MmE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwTDE0MTcuMzIsMTU2NS44NiwyNjI0LjksMjc3My40NGE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwbDc4LjkyLTc4LjkyYTU2Ljg2LDU2Ljg2LDAsMCwwLDAtODAuMThaIi8+PC9zdmc+);text-shadow:0 1px 0 #fff;color:#fff;font-size:30px;text-decoration:none;cursor:pointer;line-height:1}.smartphoto-body{position:relative;z-index:102;width:100%;height:100%;margin:0 auto}.smartphoto-inner{position:relative;width:100%;height:100%;vertical-align:top}.smartphoto-img{display:none;max-width:none;width:auto;height:auto;cursor:zoom-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);-webkit-user-drag:none}.smartphoto-img.active{display:block}.smartphoto-img-onmove{cursor:grab;cursor:-webkit-grab;transition:none}.smartphoto-img-elasticmove{transition:transform var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out)}.smartphoto-img-wrap{display:inline-block;opacity:1;touch-action:none;-webkit-transition:opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);-moz-transition:opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);-ms-transition:opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);-o-transition:opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);transition:opacity var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out);animation-name:smartphoto-img-wrap;animation-duration:var(--smartphoto-animation-speed, 0.3s);animation-timing-function:var(--smartphoto-animation-function, ease-out)}.smartphoto-img-left{transform:translateX(150%) !important}.smartphoto-img-right{transform:translateX(-150%) !important}.smartphoto-arrows{list-style-type:none;margin:0;padding:0;position:relative;z-index:1002;top:50%;left:0;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed, 0.3s);animation-timing-function:var(--smartphoto-animation-function, ease-out)}.smartphoto-arrows[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows li{display:block;position:absolute;top:50%;width:30px;height:30px;margin-top:-20px;box-sizing:content-box;animation-duration:var(--smartphoto-animation-speed, 0.3s);animation-timing-function:var(--smartphoto-animation-function, ease-out);animation-name:smartphoto-appear}.smartphoto-arrows li:focus{outline:none}.smartphoto-arrows [aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:rgba(0,0,0,0);cursor:pointer}.smartphoto-arrow-right{right:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-right button{background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiAiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTgzNy44OCwxNDE3LjMyLDY0My41OSwyMjNhNzIuMjEsNzIuMjEsMCwwLDEsMC0xMDEuODJMNzQzLjgyLDIxYTcyLjIxLDcyLjIxLDAsMCwxLDEwMS44MiwwTDIwOTAuODMsMTI2Ni4xOWwxMDAuMjMsMTAwLjIzYTcyLjIxLDcyLjIxLDAsMCwxLDAsMTAxLjgyTDg0NS42NCwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwxLTEwMS44MiwwTDY0My41OSwyNzEzLjQyYTcyLjIxLDcyLjIxLDAsMCwxLDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartphoto-arrow-left{left:0;padding:5px 0;background-color:rgba(0,0,0,.5)}.smartphoto-arrow-left button{background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik05OTYuNzcsMTQxNy4zMiwyMTkxLjA2LDIyM2E3Mi4yMSw3Mi4yMSwwLDAsMCwwLTEwMS44MkwyMDkwLjgzLDIxQTcyLjIxLDcyLjIxLDAsMCwwLDE5ODksMjFMNzQzLjgyLDEyNjYuMTksNjQzLjU5LDEzNjYuNDJhNzIuMjEsNzIuMjEsMCwwLDAsMCwxMDEuODJMMTk4OSwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwwLDEwMS44MiwwbDEwMC4yMy0xMDAuMjNhNzIuMjEsNzIuMjEsMCwwLDAsMC0xMDEuODJaIi8+PC9zdmc+)}.smartPhotoArrowHideIcon{display:none}.smartphoto-nav{position:absolute;bottom:0;left:0;width:100%;opacity:1;animation-name:smartphoto-appear;animation-duration:var(--smartphoto-animation-speed, 0.3s);animation-timing-function:var(--smartphoto-animation-function, ease-out)}.smartphoto-nav[aria-hidden=true]{animation-name:smartphoto-hide;display:none}.smartphoto-nav ul{display:block;overflow-x:auto;list-style:none;margin:0;padding:0;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.smartphoto-nav li{display:inline-block;overflow:hidden;width:50px;height:50px}.smartphoto-nav button{appearance:none;display:block;width:100%;height:100%;margin:0;padding:0;border:none;background-color:#fff;background-position:center center;background-size:cover;opacity:.5;cursor:pointer}.smartphoto-nav button:focus{opacity:.8}.smartphoto-nav button.current{opacity:1}.smartphoto-nav img{width:auto;height:100%}.smartphoto-list{list-style-type:none;position:absolute;z-index:101;top:0;left:0;margin:0;padding:0;white-space:nowrap}.smartphoto-list li{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:all var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out)}.smartphoto-list li:focus{outline:none}.smartphoto-list-onmove{transition:all .3s var(--smartphoto-animation-function, ease-out)}.smartphoto-caption{overflow:hidden;box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:50px;padding:0 50px;color:#fff;font-size:12px;text-align:center;line-height:50px;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:normal}.smartphoto-caption:focus{outline:none}.smartphoto-loader-wrap{display:block;position:relative;z-index:103;width:0;height:0;transform:translate(50vw, 50vh);transform:translate(50vw, 50dvh)}.smartphoto-loader{position:absolute;z-index:101;top:0;left:0;width:30px;height:30px;margin-top:-25px;margin-left:-25px;border:8px solid #17cddd;border-right-color:rgba(0,0,0,0);border-radius:50%;animation:smartphoto-loader .5s infinite linear}.smartphoto-img-clone{position:fixed;z-index:100;top:0;left:0;transition:all var(--smartphoto-animation-speed, 0.3s) var(--smartphoto-animation-function, ease-out)}.smartphoto-sr-only{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0, 0, 0, 0)}