Improve 360-Degree Viewer

1 files changed, 159 insertions, 40 deletions

diff --git a/docs/dist/spectre-rtl.css b/docs/dist/spectre-rtl.css
index 62b49e8..788a56c 100644
--- a/docs/dist/spectre-rtl.css
+++ b/docs/dist/spectre-rtl.css
@@ -1,5 +1,5 @@
 /*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */
-/*! Spectre.css v0.5.7 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css v0.5.8 | MIT License | github.com/picturepan2/spectre */
 /* Manually forked from Normalize.css */
 /* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 /** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
@@ -3694,7 +3694,7 @@ a.text-error:visited {
   word-wrap: break-word;
 }
 
-/*! Spectre.css Experimentals v0.5.7 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Experimentals v0.5.8 | MIT License | github.com/picturepan2/spectre */
 .form-autocomplete {
   position: relative;
 }
@@ -4761,147 +4761,267 @@ a.text-error:visited {
   flex-direction: column;
 }
 
-.viewer-360 .viewer-slider[value="1"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="1"] + .viewer-image {
   background-position-y: 0;
 }
 
-.viewer-360 .viewer-slider[value="2"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="2"] + .viewer-image {
   background-position-y: 2.8571428571%;
 }
 
-.viewer-360 .viewer-slider[value="3"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="3"] + .viewer-image {
   background-position-y: 5.7142857143%;
 }
 
-.viewer-360 .viewer-slider[value="4"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="4"] + .viewer-image {
   background-position-y: 8.5714285714%;
 }
 
-.viewer-360 .viewer-slider[value="5"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="5"] + .viewer-image {
   background-position-y: 11.4285714286%;
 }
 
-.viewer-360 .viewer-slider[value="6"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="6"] + .viewer-image {
   background-position-y: 14.2857142857%;
 }
 
-.viewer-360 .viewer-slider[value="7"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="7"] + .viewer-image {
   background-position-y: 17.1428571429%;
 }
 
-.viewer-360 .viewer-slider[value="8"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="8"] + .viewer-image {
   background-position-y: 20%;
 }
 
-.viewer-360 .viewer-slider[value="9"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="9"] + .viewer-image {
   background-position-y: 22.8571428571%;
 }
 
-.viewer-360 .viewer-slider[value="10"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="10"] + .viewer-image {
   background-position-y: 25.7142857143%;
 }
 
-.viewer-360 .viewer-slider[value="11"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="11"] + .viewer-image {
   background-position-y: 28.5714285714%;
 }
 
-.viewer-360 .viewer-slider[value="12"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="12"] + .viewer-image {
   background-position-y: 31.4285714286%;
 }
 
-.viewer-360 .viewer-slider[value="13"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="13"] + .viewer-image {
   background-position-y: 34.2857142857%;
 }
 
-.viewer-360 .viewer-slider[value="14"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="14"] + .viewer-image {
   background-position-y: 37.1428571429%;
 }
 
-.viewer-360 .viewer-slider[value="15"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="15"] + .viewer-image {
   background-position-y: 40%;
 }
 
-.viewer-360 .viewer-slider[value="16"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="16"] + .viewer-image {
   background-position-y: 42.8571428571%;
 }
 
-.viewer-360 .viewer-slider[value="17"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="17"] + .viewer-image {
   background-position-y: 45.7142857143%;
 }
 
-.viewer-360 .viewer-slider[value="18"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="18"] + .viewer-image {
   background-position-y: 48.5714285714%;
 }
 
-.viewer-360 .viewer-slider[value="19"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="19"] + .viewer-image {
   background-position-y: 51.4285714286%;
 }
 
-.viewer-360 .viewer-slider[value="20"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="20"] + .viewer-image {
   background-position-y: 54.2857142857%;
 }
 
-.viewer-360 .viewer-slider[value="21"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="21"] + .viewer-image {
   background-position-y: 57.1428571429%;
 }
 
-.viewer-360 .viewer-slider[value="22"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="22"] + .viewer-image {
   background-position-y: 60%;
 }
 
-.viewer-360 .viewer-slider[value="23"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="23"] + .viewer-image {
   background-position-y: 62.8571428571%;
 }
 
-.viewer-360 .viewer-slider[value="24"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="24"] + .viewer-image {
   background-position-y: 65.7142857143%;
 }
 
-.viewer-360 .viewer-slider[value="25"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="25"] + .viewer-image {
   background-position-y: 68.5714285714%;
 }
 
-.viewer-360 .viewer-slider[value="26"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="26"] + .viewer-image {
   background-position-y: 71.4285714286%;
 }
 
-.viewer-360 .viewer-slider[value="27"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="27"] + .viewer-image {
   background-position-y: 74.2857142857%;
 }
 
-.viewer-360 .viewer-slider[value="28"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="28"] + .viewer-image {
   background-position-y: 77.1428571429%;
 }
 
-.viewer-360 .viewer-slider[value="29"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="29"] + .viewer-image {
   background-position-y: 80%;
 }
 
-.viewer-360 .viewer-slider[value="30"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="30"] + .viewer-image {
   background-position-y: 82.8571428571%;
 }
 
-.viewer-360 .viewer-slider[value="31"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="31"] + .viewer-image {
   background-position-y: 85.7142857143%;
 }
 
-.viewer-360 .viewer-slider[value="32"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="32"] + .viewer-image {
   background-position-y: 88.5714285714%;
 }
 
-.viewer-360 .viewer-slider[value="33"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="33"] + .viewer-image {
   background-position-y: 91.4285714286%;
 }
 
-.viewer-360 .viewer-slider[value="34"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="34"] + .viewer-image {
   background-position-y: 94.2857142857%;
 }
 
-.viewer-360 .viewer-slider[value="35"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="35"] + .viewer-image {
   background-position-y: 97.1428571429%;
 }
 
-.viewer-360 .viewer-slider[value="36"] + .viewer-image {
+.viewer-360 .viewer-slider[max="36"][value="36"] + .viewer-image {
+  background-position-y: 100%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="1"] + .viewer-image {
+  background-position-y: 0;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="2"] + .viewer-image {
+  background-position-y: 3.4482758621%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="3"] + .viewer-image {
+  background-position-y: 6.8965517241%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="4"] + .viewer-image {
+  background-position-y: 10.3448275862%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="5"] + .viewer-image {
+  background-position-y: 13.7931034483%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="6"] + .viewer-image {
+  background-position-y: 17.2413793103%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="7"] + .viewer-image {
+  background-position-y: 20.6896551724%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="8"] + .viewer-image {
+  background-position-y: 24.1379310345%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="9"] + .viewer-image {
+  background-position-y: 27.5862068966%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="10"] + .viewer-image {
+  background-position-y: 31.0344827586%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="11"] + .viewer-image {
+  background-position-y: 34.4827586207%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="12"] + .viewer-image {
+  background-position-y: 37.9310344828%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="13"] + .viewer-image {
+  background-position-y: 41.3793103448%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="14"] + .viewer-image {
+  background-position-y: 44.8275862069%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="15"] + .viewer-image {
+  background-position-y: 48.275862069%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="16"] + .viewer-image {
+  background-position-y: 51.724137931%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="17"] + .viewer-image {
+  background-position-y: 55.1724137931%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="18"] + .viewer-image {
+  background-position-y: 58.6206896552%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="19"] + .viewer-image {
+  background-position-y: 62.0689655172%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="20"] + .viewer-image {
+  background-position-y: 65.5172413793%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="21"] + .viewer-image {
+  background-position-y: 68.9655172414%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="22"] + .viewer-image {
+  background-position-y: 72.4137931034%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="23"] + .viewer-image {
+  background-position-y: 75.8620689655%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="24"] + .viewer-image {
+  background-position-y: 79.3103448276%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="25"] + .viewer-image {
+  background-position-y: 82.7586206897%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="26"] + .viewer-image {
+  background-position-y: 86.2068965517%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="27"] + .viewer-image {
+  background-position-y: 89.6551724138%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="28"] + .viewer-image {
+  background-position-y: 93.1034482759%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="29"] + .viewer-image {
+  background-position-y: 96.5517241379%;
+}
+
+.viewer-360 .viewer-slider[max="30"][value="30"] + .viewer-image {
   background-position-y: 100%;
 }
 
@@ -4918,7 +5038,6 @@ a.text-error:visited {
   background-repeat: no-repeat;
   background-size: 100%;
   -ms-flex-order: 1;
-  height: 9rem;
+  max-width: 100%;
   order: 1;
-  width: 24rem;
 }
\ No newline at end of file