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

package/dist/collection/css/index.css

@@ -1,315 +1,324 @@
-@font-face {
-  font-family: 'Baloo Bhai 2';
-  font-style: normal;
-  font-weight: 400 800;
-  font-display: swap;
-  src: url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2');
-}
-body {
-  overflow: hidden;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  height: 100vh;
-}
-
-/* Prevent any field selection  */
-* {
-  user-select: none;
-}
-
-.lido-disable-check-button {
-  pointer-events: none;
-  background-color: #9393935c !important;
-  color: white;
-}
-
-.lido-element-selected {
-  border: 2px solid;
-  background-color: #ffdf7d !important;
-}
-
-.diagonal-target,
-.diagonal-drop * {
-  transform: scale(0.8) !important;
-  opacity: 1 !important;
-}
-
-.cloned-element {
-  display: flex !important;
-  position: absolute !important;
-  filter: grayscale(100%);
-  pointer-events: none;
-}
-
-.removeShadow {
-  box-shadow: 0px 0px 0px 0px #ff8900 !important;
-}
-
-.highlight-element {
-  border: 2px solid white;
-  box-shadow: rgb(243, 77, 8) 0px 0px 40px !important;
-}
-
-.drop-element.empty {
-  border: 4px dashed #f34d08 !important;
-}
-
-.drop-element.filled {
-  border: 'none' !important ;
-}
-
-.drag-element {
-  box-shadow: 0px 15px 11px rgba(43, 0, 0, 0.3) !important ;
-}
-
-.drag-element.dropped {
-  box-shadow: none !important ;
-  
-}
-
-.click-element {
-  background-color: var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;
-  box-shadow: var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;
-  cursor: pointer; /* Important for mouse, good practice */
-  transition: box-shadow 0.1s ease-out, transform 0.2s ease-out;
-  /* border: none !important; */
-  /* padding-right: 20px; */
-}
-
-.click-element:active {
-  box-shadow: 0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;
-  transform: translateY(var(--btn-active)); /* 31px (original shadow) - 5px (new shadow) = 26px */
-}
-
-.click-element:focus {
-  outline: 2px solid dodgerblue; /* Or your preferred focus style */
-  outline-offset: 3px;
-}
-
-/* Overlay/popup container */
-.after-drop-popup-container {
-  width: 200%;
-  height: 200%;
-  background-color: rgba(0, 0, 0, 0.8);
-  position: absolute;
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  justify-content: center !important;
-  gap: 80px;
-}
-
-/* Drag element inside popup */
-.after-drop-popup-drag-element {
-  scale: 1.5;
-  border-radius: 8px;
-  transform: none !important;
-  position: unset !important;
-}
-
-/* Drop element inside popup */
-.after-drop-popup-drop-element {
-  scale: 1.5;
-  border: unset;
-  border-radius: 8px;
-  transform: none !important;
-  position: unset !important;
-}
-
-/* Zoom In Animation */
-@keyframes zoomFadeIn {
-  0% {
-    transform: scale(0.6);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-.zoom-fade-in {
-  animation: zoomFadeIn 0.8s ease-out forwards;
-}
-
-/* Zoom Out Animation */
-@keyframes zoomFadeOut {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(0.6);
-    opacity: 0;
-  }
-}
-.zoom-fade-out {
-  animation: zoomFadeOut 0.8s ease-in forwards;
-}
-
-.slide-numbers {
-  width: 70px;
-  height: 70px;
-  border: 1px solid #f57139;
-  background-color: white;
-  font-weight: 500;
-  color: #f57139;
-  font-size: 44px;
-  border-radius: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: 'Baloo Bhai 2', serif;
-}
-
-.slide-numbers-bottom {
-  position: absolute;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  bottom: -25px;
-  width: 100%;
-  height: 50px;
-}
-
-.slide-numbers-left {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  height: 100%;
-  width: 50px;
-  left: -25px;
-  bottom: 0px;
-}
-/* speakIcon for each element */
-.lido-speak-icon{
-  /* pointer-events: auto;
-  user-select: none;
-  -webkit-user-drag: none;  */
-  width : 56px;
-  height:56px;
-  position: absolute;
-  top: -25px;
-  right: -25px;
-  z-index: 10;
-  background-color:   white;
-  border : 4px solid #F34D08;
-  border-radius :16px;
-  box-shadow: 0px 4px 0px 0px #F34D08; 
-  background-size: contain;
-  background-repeat:   no-repeat;
-  cursor : pointer;
-}
-.lido-speak-icon:active{
- transform:translateY(8px);
-  box-shadow: 0px 0px 0px 0px !important;
-}
-
-
-
-/* diffrent shaking animations for cell element */
-
-.lido-strong-shake {
-  animation: strongShake 0.3s ease;
-}
-
-.lido-scaled-shake {
-  animation: scaledShake 0.6s ease-in-out;
-}
-
-.lido-horizontal-shake {
-  animation: horizontalShake 0.6s ease-in-out;
-  border-radius: 20px;
-}
-
-.lido-vertical-shake {
-  animation: verticalShake 0.6s ease-in-out;
-  border-radius: 20px;
-}
-
-.lido-diagonal-shake {
-  animation: diagonalShake 0.5s ease-in-out;
-  border-radius: 20px;
-  will-change: transform;
-}
-
-.lido-glow {
-  animation: glowPulse 1s infinite alternate;
-  transition: opacity 0.5s ease-in-out;
-}
-
-.lido-box-highlight {
-  animation: topToPlace 0.3s linear;
-}
-.lido-display-hiddenvalue {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 80px;
-  font-weight: 1000;
-  color: brown;
-  -webkit-text-stroke: 2px white;
-  font-family: 'Baloo Bhai 2', sans-serif;
-  pointer-events: none;
-}
-
-.lido-image-colorize {
-  position: relative;
-  display: inline-block;
-}
-
-.lido-image-colorize::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--tint-color);
-  mix-blend-mode: multiply;
-  opacity: 0.8;
-  pointer-events: none;
-
-  /* this line ensures tint fits only in visible image area */
-  mask-image: var(--mask-url);
-  mask-size: cover;
-  mask-repeat: no-repeat;
-  mask-position: center;
-}
-
-
-.lido-tts-highlight-overlay {
-  position: fixed;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  z-index: 9999;
-
-  /* Visual */
-  background: linear-gradient(
-    180deg,
-    rgba(255, 235, 59, 0.95),
-    rgba(255, 214, 0, 0.95)
-  );
-  border-radius: 6px;
-
-  /* Soft depth */
-  box-shadow:
-    0 2px 6px rgba(0, 0, 0, 0.18),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
-
-  /* Motion */
-  transition:
-    width 25ms ease-out,
-    height 25ms ease-out,
-    opacity 80ms ease-out;
-
-  opacity: 0.95;
-
-  /* Safety */
-  will-change: transform, width, height;
-  contain: layout paint style;
-}
+@font-face {
+  font-family: 'Baloo Bhai 2';
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2');
+}
+body {
+  overflow: hidden;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 100vh;
+}
+
+/* Prevent any field selection  */
+* {
+  user-select: none;
+}
+
+.lido-disable-check-button {
+  pointer-events: none;
+  background-color: #9393935c !important;
+  color: white;
+}
+
+.lido-element-selected {
+  border: 2px solid;
+  background-color: #ffdf7d !important;
+}
+
+.diagonal-target,
+.diagonal-drop * {
+  transform: scale(0.8) !important;
+  opacity: 1 !important;
+}
+
+.cloned-element {
+  display: flex !important;
+  position: absolute !important;
+  filter: grayscale(100%);
+  pointer-events: none;
+}
+
+.removeShadow {
+  box-shadow: 0px 0px 0px 0px #ff8900 !important;
+}
+
+.highlight-element {
+  border: 2px solid white;
+  box-shadow: rgb(243, 77, 8) 0px 0px 40px !important;
+}
+
+.drop-element.empty {
+  border: 4px dashed #f34d08 !important;
+}
+
+.drop-element.filled {
+  border: 'none' !important ;
+}
+
+.drag-element {
+  box-shadow: 0px 15px 11px rgba(43, 0, 0, 0.3) !important ;
+}
+
+.drag-element.dropped {
+  box-shadow: none !important ;
+  
+}
+
+.click-element {
+  background-color: var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;
+  box-shadow: var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;
+  cursor: pointer; /* Important for mouse, good practice */
+  transition: box-shadow 0.1s ease-out, transform 0.2s ease-out;
+  /* border: none !important; */
+  /* padding-right: 20px; */
+}
+
+.click-element:active {
+  box-shadow: 0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;
+  transform: translateY(var(--btn-active)); /* 31px (original shadow) - 5px (new shadow) = 26px */
+}
+
+.click-element:focus {
+  outline: 2px solid dodgerblue; /* Or your preferred focus style */
+  outline-offset: 3px;
+}
+
+/* Overlay/popup container */
+.after-drop-popup-container {
+  width: 200%;
+  height: 200%;
+  background-color: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: center !important;
+  gap: 80px;
+}
+
+/* Drag element inside popup */
+.after-drop-popup-drag-element {
+  scale: 1.5;
+  border-radius: 8px;
+  transform: none !important;
+  position: unset !important;
+}
+
+/* Drop element inside popup */
+.after-drop-popup-drop-element {
+  scale: 1.5;
+  border: unset;
+  border-radius: 8px;
+  transform: none !important;
+  position: unset !important;
+}
+
+/* Zoom In Animation */
+@keyframes zoomFadeIn {
+  0% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.zoom-fade-in {
+  animation: zoomFadeIn 0.8s ease-out forwards;
+}
+
+/* Zoom Out Animation */
+@keyframes zoomFadeOut {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+}
+.zoom-fade-out {
+  animation: zoomFadeOut 0.8s ease-in forwards;
+}
+
+.slide-numbers {
+  width: 70px;
+  height: 70px;
+  border: 1px solid #f57139;
+  background-color: white;
+  font-weight: 500;
+  color: #f57139;
+  font-size: 44px;
+  border-radius: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Baloo Bhai 2', serif;
+}
+
+.slide-numbers-bottom {
+  position: absolute;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  bottom: -25px;
+  width: 100%;
+  height: 50px;
+}
+
+.slide-numbers-left {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+  width: 50px;
+  left: -25px;
+  bottom: 0px;
+}
+/* speakIcon for each element */
+.lido-speak-icon{
+  /* pointer-events: auto;
+  user-select: none;
+  -webkit-user-drag: none;  */
+  width : 56px;
+  height:56px;
+  position: absolute;
+  top: -25px;
+  right: -25px;
+  z-index: 10;
+  background-color:   white;
+  border : 4px solid #F34D08;
+  border-radius :16px;
+  box-shadow: 0px 4px 0px 0px #F34D08; 
+  background-size: contain;
+  background-repeat:   no-repeat;
+  cursor : pointer;
+}
+.lido-speak-icon:active{
+ transform:translateY(8px);
+  box-shadow: 0px 0px 0px 0px !important;
+}
+
+
+
+/* diffrent shaking animations for cell element */
+
+.lido-strong-shake {
+  animation: strongShake 0.3s ease;
+}
+
+.lido-scaled-shake {
+  animation: scaledShake 0.6s ease-in-out;
+}
+
+.lido-horizontal-shake {
+  animation: horizontalShake 0.6s ease-in-out;
+  border-radius: 20px;
+}
+
+.lido-vertical-shake {
+  animation: verticalShake 0.6s ease-in-out;
+  border-radius: 20px;
+}
+
+.lido-diagonal-shake {
+  animation: diagonalShake 0.5s ease-in-out;
+  border-radius: 20px;
+  will-change: transform;
+}
+
+.lido-glow {
+  animation: glowPulse 1s infinite alternate;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.lido-box-highlight {
+  animation: topToPlace 0.3s linear;
+}
+.lido-display-hiddenvalue {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80px;
+  font-weight: 1000;
+  color: brown;
+  -webkit-text-stroke: 2px white;
+  font-family: 'Baloo Bhai 2', sans-serif;
+  pointer-events: none;
+}
+
+.lido-image-colorize {
+  position: relative;
+  display: inline-block;
+}
+
+.lido-image-colorize::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--tint-color);
+  mix-blend-mode: multiply;
+  opacity: 0.8;
+  pointer-events: none;
+
+  /* this line ensures tint fits only in visible image area */
+  mask-image: var(--mask-url);
+  mask-size: cover;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+
+
+.lido-tts-highlight-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  z-index: 9999;
+
+  /* Visual */
+  background: linear-gradient(
+    180deg,
+    rgba(255, 235, 59, 0.95),
+    rgba(255, 214, 0, 0.95)
+  );
+  border-radius: 6px;
+
+  /* Soft depth */
+  box-shadow:
+    0 2px 6px rgba(0, 0, 0, 0.18),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.25);
+
+  /* Motion */
+  transition:
+    width 25ms ease-out,
+    height 25ms ease-out,
+    opacity 80ms ease-out;
+
+  opacity: 0.95;
+
+  /* Safety */
+  will-change: transform, width, height;
+  contain: layout paint style;
+}
+
+
+.category-dropped-onCorrect{
+  box-shadow: rgba(129, 193, 39, 1) 0px 8px 8px 0px !important;
+}
+
+.category-dropped-onInCorrect{
+  box-shadow: rgba(255, 4, 16, 1) 0px 8px 8px 0px !important;
+}