athena-x-ai-headless 2.2.14 → 2.2.16

package/example/athena/athena.css

@@ -147,6 +147,134 @@
     }
 }
 
+/* Lazy loaders — global (any host page, not scoped to demo wrapper) */
+.form-input-element__container {
+    position: relative;
+    isolation: isolate;
+}
+.athena-lazy-image {
+    position: relative;
+    display: block;
+    overflow: hidden;
+}
+.athena-lazy-image__img {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: auto;
+    opacity: 0;
+    transition: opacity 0.35s ease;
+}
+.athena-lazy-image__img--loaded,
+.athena-lazy-image--loaded .athena-lazy-image__img {
+    opacity: 1;
+}
+.athena-lazy-image--error .athena-lazy-image__img {
+    opacity: 1;
+}
+.athena-lazy-image__loader {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}
+.athena-lazy-image__loader-ring,
+.athena-search-input-loader__ring {
+    display: block;
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 3px solid rgba(168, 198, 243, 0.25);
+    border-top-color: #6b9de8;
+    -webkit-animation: athena-loader-spin 0.85s linear infinite;
+    animation: athena-loader-spin 0.85s linear infinite;
+    transform-origin: center center;
+    box-sizing: border-box;
+}
+.athena-autocomplete-panel-loader {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.72);
+    backdrop-filter: blur(2px);
+}
+.athena-autocomplete-panel-loader .athena-lazy-image__loader-ring {
+    width: 42px;
+    height: 42px;
+}
+.athena-spinner-loader--inline {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    background: none;
+}
+.athena-spinner-loader__infinite,
+.athena-spinner-loader-infinite {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 16px 0;
+    position: relative;
+    left: auto;
+    bottom: auto;
+    transform: none;
+    z-index: 1;
+    background: none;
+    box-shadow: none;
+    pointer-events: none;
+}
+.autocomplete-l3__infinite-scroll {
+    position: relative;
+    width: 100%;
+}
+.autocomplete-l3__infinite-scroll--loading {
+    min-height: 52px;
+}
+.autocomplete-l3__infinite-scroll .athena-spinner-loader-infinite {
+    padding: 12px 0;
+}
+.athena-search-input-loader {
+    position: absolute;
+    left: 13px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}
+.athena-search-input-loader__ring {
+    width: 18px;
+    height: 18px;
+    border-width: 2px;
+    -webkit-animation-duration: 0.7s;
+    animation-duration: 0.7s;
+}
+.form-input-element__container.athena-search-input--loading #search,
+.form-input-element__container.athena-search-input--loading .search-input {
+    padding-right: 40px;
+}
+@-webkit-keyframes athena-loader-spin {
+    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@keyframes athena-loader-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
 /* --- autocomplete.css --- */
 /*==================
 Reset CSS
@@ -982,24 +1110,6 @@ Autocomplete Layout 3
     height: 100%;
     min-height: 100vh;
 }
-.athena-spinner-loader-infinite {
-    background: url(../../../images/loader-icon.svg) no-repeat;
-    position: fixed;
-    bottom: calc(15% - 15px);
-    left: calc(50% - 15px);
-    transform: translate(-50%, -50%);
-    width: 30px;
-    height: 30px;
-    animation: spin 2s linear infinite;
-}
-@keyframes spin{
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
 /* Banner Top */
 .autocomplete-l3__flex-container #banner_top{
     width: 100%;
@@ -1999,17 +2109,6 @@ Segments
     background: rgba(0,0,0,0.3);
     z-index: 99;
 }
-.athena-spinner-loader__infinite{
-    background: url(../../../images/loader-icon.svg) no-repeat;
-    position: absolute;
-    bottom: -15px;
-    left: calc(50% - 15px);
-    width: 30px;
-    z-index: 1;
-    height: 30px;
-    -webkit-animation: spin 2s linear infinite;
-    animation: spin 2s linear infinite;
-}
 
 /**
     Input slider