lido-player 0.0.2-beta-24 → 0.0.2-beta-26-dev

package/dist/collection/components/float/lido-float.css

@@ -1,30 +1,30 @@
-.lido-float {
-  position: relative;
-}
-
-.lido-float > * {
-  position: absolute;
-  cursor: pointer;
-}
-
-@keyframes float-up {
-  from {
-    top: var(--el-top);
-  }
-  to {
-    top: -500px;
-  }
-}
-
-#removeShadow {
-  box-shadow: unset !important;
-}
-
-@keyframes float-lr {
-  from {
-    right: var(--el-left);
-  }
-  to {
-    right: -500px;
-  }
-}
+.lido-float {
+  position: relative;
+}
+
+.lido-float > * {
+  position: absolute;
+  cursor: pointer;
+}
+
+@keyframes float-up {
+  from {
+    top: var(--el-top);
+  }
+  to {
+    top: -500px;
+  }
+}
+
+#removeShadow {
+  box-shadow: unset !important;
+}
+
+@keyframes float-lr {
+  from {
+    right: var(--el-left);
+  }
+  to {
+    right: -500px;
+  }
+}

package/dist/collection/components/float/lido-float.js

@@ -85,7 +85,7 @@ export class LidoFloat {
         };
     }
     render() {
-        return (h(Host, { key: '26ada4c2834a58fe1f45348a32f9d1dcecb79a14', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '6f4ca358f564e268390f221cc1f84af1f303761b' })));
+        return (h(Host, { key: 'c461f1142dd6addd9ceb41ade183b044b875681f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '240439bfda6a9e4e2d67e6ae2b5c878d99e632b3' })));
     }
     static get is() { return "lido-float"; }
     static get originalStyleUrls() {
@@ -328,7 +328,7 @@ export class LidoFloat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\nThis can be used to control the animation or positioning of the float elements."
+                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\r\nThis can be used to control the animation or positioning of the float elements."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/home/lido-home.css

@@ -1,310 +1,310 @@
-.lido-snackbar {
-  visibility: visible;
-  min-width: 250px;
-  background-color: #333;
-  color: #fff;
-  text-align: center;
-  border-radius: 2px;
-  padding: 16px;
-  position: fixed;
-  z-index: 1;
-  bottom: 30px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 17px;
-}
-
-.lido-dot-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  visibility: hidden;
-  position: absolute;
-  left: 50%;
-  padding: 0 5px;
-  /* Small safe padding from viewport edges */
-  z-index: 1;
-  width: 100vw;
-  max-width: 100vw;
-  box-sizing: border-box;
-  height: 0px;
-}
-
-.lido-dot {
-  height: 18px;
-  /* Default dot size */
-  width: 18px;
-  /* Default dot size */
-  margin: 0 4px;
-  /* Default dot margin */
-  background-color: #bbb;
-  border-radius: 50%;
-  display: inline-block;
-  transition: background-color 0.3s;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.lido-btn-dot-container {
-  flex-shrink: 1;
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  z-index: 1;
-  min-width: 0;
-  height: 0px;
-}
-
-.lido-dot.completed {
-  background-color: grey;
-}
-
-.lido-dot.current {
-  background-color: green;
-}
-
-.lido-dot:not(.completed):not(.current) {
-  background-color: #bbb;
-}
-
-#lido-arrow-left,
-#lido-arrow-right {
-  width: 88px;
-  height: 88px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* margin: 0 12px; */
-  border-radius: 12px;
-  z-index: 1000;
-  box-shadow: 0px 8px 0px 0px #8b310f;
-  background-color: #f34d08;
-  cursor: pointer;
-  visibility: hidden;
-  flex-shrink: 0;
-}
-
-#lido-arrow-left:active,
-#lido-arrow-right:active {
-  transform: translateY(8px);
-  box-shadow: 0px 0px 0px 0px;
-}
-
-.navbar {
-  display: flex;
-  justify-content: center;
-}
-
-.lido-exit-button,
-#main-audio {
-  width: 80px;
-  height: 80px;
-  z-index: 1000;
-  cursor: pointer;
-  background-color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 4px solid #f34d08;
-  border-radius: 16px;
-  box-shadow: 0px 8px #f34d08;
-  flex-shrink: 0;
-  /* margin: 0 10px; Default margin for these */
-}
-
-#main-audio:active,
-.popup-button:active,
-.lido-exit-button:active {
-  margin-bottom: -8px;
-  box-shadow: 0px 0px 0px 0px !important;
-}
-
-.lido-alert-popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-
-/* Tablet Portrait / Large Mobile Landscape */
-@media (max-width: 768px) {
-
-  #lido-arrow-left,
-  #lido-arrow-right {
-    width: 70px;
-    height: 70px;
-    margin: 0 8px;
-  }
-
-  .lido-exit-button,
-  #main-audio {
-    width: 65px;
-    height: 65px;
-    margin: 0 8px;
-  }
-
-  .lido-dot {
-    height: 16px;
-    width: 16px;
-    margin: 0 2.5px;
-  }
-}
-
-/* Common Mobile Portrait */
-@media (max-width: 480px) {
-
-  #lido-arrow-left,
-  #lido-arrow-right {
-    width: 74px;
-    height: 74px;
-    margin: 0px 5px;
-  }
-
-  .lido-exit-button,
-  #main-audio {
-    width: 65px;
-    height: 65px;
-    margin: 0px 5px;
-  }
-
-  .lido-dot {
-    height: 15px;
-    width: 15px;
-    margin: 0 1.5px;
-  }
-
-  .lido-dot-container {
-    padding: 0 3px;
-  }
-}
-
-/* for mobile device*/
-@media (max-width: 375px) {
-
-  #lido-arrow-left,
-  #lido-arrow-right {
-    width: 70px;
-    height: 70px;
-    margin: 0px 3px;
-  }
-
-  .lido-exit-button,
-  #main-audio {
-    width: 70px;
-    height: 70px;
-    margin: 0px 3px;
-  }
-
-  .lido-dot {
-    height: 14px;
-    width: 14px;
-    margin: 0 1px;
-  }
-
-  .lido-dot-container {
-    padding: 0 2px;
-  }
-}
-
-/* Smallest Mobile Portrait  */
-@media (max-width: 320px) {
-
-  #lido-arrow-left,
-  #lido-arrow-right,
-  .lido-exit-button,
-  #main-audio {
-    width: 70px;
-    height: 70px;
-    margin: 0px 2px;
-  }
-
-  .lido-dot {
-    height: 12px;
-    width: 12px;
-    margin: 0 0.5px;
-  }
-
-  .lido-dot-container {
-    padding: 0 2px;
-  }
-}
-
-/* Landscape orientation */
-@media (max-width: 900px) and (orientation: landscape) {
-
-  #lido-arrow-left,
-  #lido-arrow-right {
-    width: 70px;
-    height: 70px;
-    margin: 0px 5px;
-  }
-
-  .lido-exit-button,
-  #main-audio {
-    width: 70px;
-    height: 70px;
-    margin: 0px 5px;
-  }
-
-  .lido-dot {
-    height: 14px;
-    width: 14px;
-    margin: 0 1px;
-  }
-
-  .lido-dot-container {
-    padding: 0 5px;
-  }
-}
-
-
-.popup-exit-text {
-  white-space: nowrap;
-  font-size: 22px;
-  font-weight: 600;
-  margin-top: -8%;
-}
-
-.lido-alert-parent {
-  z-index: 10000 !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.popup-button {
-  width: 80px;
-  height: 80px;
-  z-index: 1000;
-  cursor: pointer;
-  /* background-color: white !important; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 4px solid #F34D08;
-  border-radius: 16px;
-  box-shadow: 0 8px 0 #F34D08;
-}
-
-.nav-for-lanai {
-  position: absolute;
-  top: 0%;
-  left: 0%;
-  max-width: none;
-  width: 100%;
-  height: auto;
-  visibility: visible;
-}
-
-/* .parent_dots{
-  pointer-events: none;
+.lido-snackbar {
+  visibility: visible;
+  min-width: 250px;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 17px;
+}
+
+.lido-dot-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  visibility: hidden;
+  position: absolute;
+  left: 50%;
+  padding: 0 5px;
+  /* Small safe padding from viewport edges */
+  z-index: 1;
+  width: 100vw;
+  max-width: 100vw;
+  box-sizing: border-box;
+  height: 0px;
+}
+
+.lido-dot {
+  height: 18px;
+  /* Default dot size */
+  width: 18px;
+  /* Default dot size */
+  margin: 0 4px;
+  /* Default dot margin */
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.3s;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.lido-btn-dot-container {
+  flex-shrink: 1;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  z-index: 1;
+  min-width: 0;
+  height: 0px;
+}
+
+.lido-dot.completed {
+  background-color: grey;
+}
+
+.lido-dot.current {
+  background-color: green;
+}
+
+.lido-dot:not(.completed):not(.current) {
+  background-color: #bbb;
+}
+
+#lido-arrow-left,
+#lido-arrow-right {
+  width: 88px;
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* margin: 0 12px; */
+  border-radius: 12px;
+  z-index: 1000;
+  box-shadow: 0px 8px 0px 0px #8b310f;
+  background-color: #f34d08;
+  cursor: pointer;
+  visibility: hidden;
+  flex-shrink: 0;
+}
+
+#lido-arrow-left:active,
+#lido-arrow-right:active {
+  transform: translateY(8px);
+  box-shadow: 0px 0px 0px 0px;
+}
+
+.navbar {
+  display: flex;
+  justify-content: center;
+}
+
+.lido-exit-button,
+#main-audio {
+  width: 80px;
+  height: 80px;
+  z-index: 1000;
+  cursor: pointer;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4px solid #f34d08;
+  border-radius: 16px;
+  box-shadow: 0px 8px #f34d08;
+  flex-shrink: 0;
+  /* margin: 0 10px; Default margin for these */
+}
+
+#main-audio:active,
+.popup-button:active,
+.lido-exit-button:active {
+  margin-bottom: -8px;
+  box-shadow: 0px 0px 0px 0px !important;
+}
+
+.lido-alert-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+
+/* Tablet Portrait / Large Mobile Landscape */
+@media (max-width: 768px) {
+
+  #lido-arrow-left,
+  #lido-arrow-right {
+    width: 70px;
+    height: 70px;
+    margin: 0 8px;
+  }
+
+  .lido-exit-button,
+  #main-audio {
+    width: 65px;
+    height: 65px;
+    margin: 0 8px;
+  }
+
+  .lido-dot {
+    height: 16px;
+    width: 16px;
+    margin: 0 2.5px;
+  }
+}
+
+/* Common Mobile Portrait */
+@media (max-width: 480px) {
+
+  #lido-arrow-left,
+  #lido-arrow-right {
+    width: 74px;
+    height: 74px;
+    margin: 0px 5px;
+  }
+
+  .lido-exit-button,
+  #main-audio {
+    width: 65px;
+    height: 65px;
+    margin: 0px 5px;
+  }
+
+  .lido-dot {
+    height: 15px;
+    width: 15px;
+    margin: 0 1.5px;
+  }
+
+  .lido-dot-container {
+    padding: 0 3px;
+  }
+}
+
+/* for mobile device*/
+@media (max-width: 375px) {
+
+  #lido-arrow-left,
+  #lido-arrow-right {
+    width: 70px;
+    height: 70px;
+    margin: 0px 3px;
+  }
+
+  .lido-exit-button,
+  #main-audio {
+    width: 70px;
+    height: 70px;
+    margin: 0px 3px;
+  }
+
+  .lido-dot {
+    height: 14px;
+    width: 14px;
+    margin: 0 1px;
+  }
+
+  .lido-dot-container {
+    padding: 0 2px;
+  }
+}
+
+/* Smallest Mobile Portrait  */
+@media (max-width: 320px) {
+
+  #lido-arrow-left,
+  #lido-arrow-right,
+  .lido-exit-button,
+  #main-audio {
+    width: 70px;
+    height: 70px;
+    margin: 0px 2px;
+  }
+
+  .lido-dot {
+    height: 12px;
+    width: 12px;
+    margin: 0 0.5px;
+  }
+
+  .lido-dot-container {
+    padding: 0 2px;
+  }
+}
+
+/* Landscape orientation */
+@media (max-width: 900px) and (orientation: landscape) {
+
+  #lido-arrow-left,
+  #lido-arrow-right {
+    width: 70px;
+    height: 70px;
+    margin: 0px 5px;
+  }
+
+  .lido-exit-button,
+  #main-audio {
+    width: 70px;
+    height: 70px;
+    margin: 0px 5px;
+  }
+
+  .lido-dot {
+    height: 14px;
+    width: 14px;
+    margin: 0 1px;
+  }
+
+  .lido-dot-container {
+    padding: 0 5px;
+  }
+}
+
+
+.popup-exit-text {
+  white-space: nowrap;
+  font-size: 22px;
+  font-weight: 600;
+  margin-top: -8%;
+}
+
+.lido-alert-parent {
+  z-index: 10000 !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.popup-button {
+  width: 80px;
+  height: 80px;
+  z-index: 1000;
+  cursor: pointer;
+  /* background-color: white !important; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4px solid #F34D08;
+  border-radius: 16px;
+  box-shadow: 0 8px 0 #F34D08;
+}
+
+.nav-for-lanai {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  max-width: none;
+  width: 100%;
+  height: auto;
+  visibility: visible;
+}
+
+/* .parent_dots{
+  pointer-events: none;
 } */