/* LoadingOverlay - shared styling for the plugin's message text (/js/loadingoverlay.min.js). Lives here, not in a per-surface stylesheet, because the plugin is loaded on every surface (ATS, candidate careers portal, hub, admin) and any of them can show a message. Link this file wherever loadingoverlay.min.js is linked. */ .loadingText { /* 1em, not 1rem: inherit the app's body size so the loading copy sits at the same size as the surrounding UI, rather than the plugin's auto-resized / 16px-root size. The !important overrides the inline font-size LoadingOverlay injects when it auto-resizes - without it a full-page () overlay renders the message at half the viewport width. */ font-size: 1em !important; font-weight: normal !important; color: #6c757d !important; } /* "AI is thinking" loader, shown while an AI request runs behind a panel. A STATIC sparkle sits in a white disc with a success-green aura rotating behind it - a bright green arc sweeping a dim grey ring. Injected as the overlay's 'custom' element by ai_loading_overlay_show() in /js/loading_overlay_defaults.js; never write this markup at a callsite, call the helper. Lives here with the rest of the shared LoadingOverlay styling so every surface gets it. The halo and disc must be their own elements, not pseudo-elements on the sparkle, because FontAwesome duotone already uses the 's ::before/::after for its two glyph layers. */ .ai_spinner { position: relative; width: 92px; height: 92px; flex: none; /* the LoadingOverlay wrapper is a flex row - don't let it shrink the circle */ display: grid; place-items: center; } /* LoadingOverlay hard-codes width/height:20px inline on its 'custom' wrapper (with overflow visible), so left alone the overlay reserves only 20px for the icon and the column's space-around lays the label out against a 20px icon. Reserve the sparkle's real size so icon and label sit correctly spaced. !important is needed to beat the plugin's inline style. */ .loadingoverlay_element:has(> .ai_spinner) { width: 92px !important; height: 92px !important; } /* these overlays carry a sentence rather than a bare "Loading...", so the label sits a touch larger than the shared 1em above. Scoped to overlays showing the sparkle - ordinary overlays keep the body-matching size. */ .loadingoverlay:has(.ai_spinner) .loadingText { font-size: 1.15em !important; } .ai_spinner_halo { position: absolute; inset: -4px; border-radius: 50%; z-index: 0; opacity: 0.72; filter: blur(5px); background: conic-gradient(from 0deg, rgba(108, 117, 125, 0.18) 0deg, rgba(108, 117, 125, 0.18) 165deg, #5cb85c 250deg, #8fd485 320deg, rgba(108, 117, 125, 0.18) 360deg); animation: ai_spinner_spin 2.2s linear infinite; } /* white disc masks the blur out of the centre so the sparkle stays crisp */ .ai_spinner_disc { position: absolute; inset: 3px; border-radius: 50%; background: #ffffff; z-index: 1; } /* the sparkle itself - static, sits above the halo and disc */ .ai_spinner_spark { position: relative; z-index: 3; font-size: 1.85em; line-height: 1; } @keyframes ai_spinner_spin { to { transform: rotate(360deg); } }