/* CR-20260508-001 — App-wide session-sync overlay (HALF-EXTRACTION + iter 13). * * Markup lives in index.html, OUTSIDE Angular. CSS here is loaded from * so the overlay's GPU compositor layer is established at page * parse, before Angular bootstraps. * * Iteration 13 — match app-wide aesthetic: * - Background: #2a2a2a (matches body bg from index.html, login page, * and the rest of the webtrader app). * - Font: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif — * the DevExtreme dark theme default that the rest of the app inherits. * User explicitly requested "use font I use in initializer component" * and the initializer inherits this stack (no override on its * #progress-message). * - Cube grid retained from iter 12 (180px, CSS Grid, brand green * #0c8b0c, subtle inner glow). * * Strategy carried forward from iter 9–12: * - GPU layer forced via translate3d + keepalive animation * - body.ets-resyncing → content-visibility:hidden so the * post-return paint pass paints overlay only * - opacity:0/1 toggle = single GPU compositor bit-flip * - Initial state in index.html = is-visible (serves as bootstrap * loader, naturally warms layer) */ /* ---------- Overlay container --------------------------------------------- */ /* Iteration 14 — translucent backdrop. App-tinted color (#2a2a2a body bg) * with alpha so the app behind shows through dimly. Modal feel. The * iter-9 content-visibility:hidden paint-skip was removed because it * suppressed the entire subtree from rendering — any * transparency over a hidden subtree reveals only the body bg, defeating * the visible effect. iter-11's bootstrap-loader already warms the GPU * layer at boot, so the overlay itself paints instantly without needing * the paint-skip on the app subtree. */ #ets-sync-overlay { position: fixed; inset: 0; z-index: 10000000; display: flex; /* Iteration 19 — vertically centered. * iter 20 — `padding-bottom: 20px` shifts content 10px above center. */ align-items: center; justify-content: center; box-sizing: border-box; padding-bottom: 20px; /* Iter 23 — more see-through. App reads clearly through dim tint * (clock ticking visible). Blur dropped — was masking too much. */ background-color: rgba(42, 42, 42, 0.5); opacity: 0; pointer-events: none; /* Aggressive GPU layer promotion. */ transform: translate3d(0, 0, 0); backface-visibility: hidden; will-change: transform, opacity; animation: ets-sync-overlay-keepalive 60s infinite linear; } @keyframes ets-sync-overlay-keepalive { 0%, 100% { transform: translate3d(0, 0, 0); } } #ets-sync-overlay.is-visible { opacity: 1; pointer-events: all; } /* ---------- Content layout ------------------------------------------------ */ #ets-sync-overlay .ets-sync-overlay-content { width: min(420px, 90vw); text-align: center; color: #e8e8e8; /* DevExtreme dark theme stack — what the rest of the app uses. */ font-family: "Helvetica Neue", "Segoe UI", helvetica, verdana, sans-serif; } /* ---------- Cube grid ----------------------------------------------------- */ #ets-sync-overlay .sk-cube-grid { width: 180px; height: 180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; } #ets-sync-overlay .sk-cube-grid .sk-cube { background-color: #0c8b0c; border-radius: 2px; box-shadow: 0 0 8px rgba(12, 139, 12, 0.18); animation: ets-sync-cubeGridScaleDelay 1.4s infinite ease-in-out; animation-play-state: paused; transform-origin: center center; } #ets-sync-overlay.is-visible .sk-cube-grid .sk-cube { animation-play-state: running; } #ets-sync-overlay .sk-cube-grid .sk-cube1 { animation-delay: 0.20s; } #ets-sync-overlay .sk-cube-grid .sk-cube2 { animation-delay: 0.30s; } #ets-sync-overlay .sk-cube-grid .sk-cube3 { animation-delay: 0.40s; } #ets-sync-overlay .sk-cube-grid .sk-cube4 { animation-delay: 0.10s; } #ets-sync-overlay .sk-cube-grid .sk-cube5 { animation-delay: 0.20s; } #ets-sync-overlay .sk-cube-grid .sk-cube6 { animation-delay: 0.30s; } #ets-sync-overlay .sk-cube-grid .sk-cube7 { animation-delay: 0.00s; } #ets-sync-overlay .sk-cube-grid .sk-cube8 { animation-delay: 0.10s; } #ets-sync-overlay .sk-cube-grid .sk-cube9 { animation-delay: 0.20s; } @keyframes ets-sync-cubeGridScaleDelay { 0%, 70%, 100% { transform: scale3d(1, 1, 1); } 35% { transform: scale3d(0, 0, 1); } } /* ---------- Divider — thin accent rule under the grid -------------------- */ #ets-sync-overlay .ets-sync-overlay-divider { width: 48px; height: 1px; margin: 56px auto 0; background: linear-gradient( to right, transparent 0%, rgba(232, 232, 232, 0.32) 50%, transparent 100% ); } /* ---------- Status line --------------------------------------------------- */ #ets-sync-overlay .ets-sync-overlay-message { margin-top: 28px; font-size: 14px; font-weight: 500; text-transform: uppercase; /* Tighter tracking now that we're on a proportional sans rather than * monospace. ~0.22em reads as deliberate but not ostentatious. */ letter-spacing: 0.22em; padding-left: 0.22em; /* compensate right-bias of letter-spacing */ color: #e8e8e8; } /* ---------- Meta line ----------------------------------------------------- */ #ets-sync-overlay .ets-sync-overlay-meta { margin-top: 14px; font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: #6a6a6a; }