lido-player 0.0.2-beta-18-dev → 0.0.2-beta-21-dev

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;
 } */

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

@@ -992,7 +992,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Exit button icon.\r\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Exit button icon.\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1011,7 +1011,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Previous button icon.\r\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Previous button icon.\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1030,7 +1030,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Next button icon.\r\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Next button icon.\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1049,7 +1049,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Speaker button icon.\r\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Speaker button icon.\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1087,7 +1087,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Unique identifier for the component instance.\r\nIf not provided, a UUID is generated to ensure uniqueness."
+                    "text": "Unique identifier for the component instance.\nIf not provided, a UUID is generated to ensure uniqueness."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,17 +1,17 @@
-.lido-image {
-  user-select: none;
-  -webkit-user-drag: none;
-  object-fit: contain;
-  width: 100% !important;
-  height: 100% !important;
-  aspect-ratio: 1 / 1; /* Ensures the image retains a 1:1 aspect ratio
-  /* The image will scale to fit within its container, keeping the aspect ratio */
-  transform: rotate(0) !important;
-  margin: 0 !important;
-}
-
-.slice {
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
-}
+.lido-image {
+  user-select: none;
+  -webkit-user-drag: none;
+  object-fit: contain;
+  width: 100% !important;
+  height: 100% !important;
+  aspect-ratio: 1 / 1; /* Ensures the image retains a 1:1 aspect ratio
+  /* The image will scale to fit within its container, keeping the aspect ratio */
+  transform: rotate(0) !important;
+  margin: 0 !important;
+}
+
+.slice {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}