:root { --arg-overlay-bg: rgba(0, 0, 0, 0.28); --arg-card-bg: rgba(255, 255, 255, 0.95); --arg-shadow: 0 8px 30px rgba(0,0,0,0.15); --arg-radius: 14px; --arg-gap: 12px; --arg-spinner-size: 28px; --arg-spinner-border: 3px; --arg-accent: #1f6feb; } /* Overlay nascosto di default */ .arg-spinner-overlay { position: fixed; inset: 0; display: none; /* appare solo con .spinnershow sul */ align-items: center; justify-content: center; background: var(--arg-overlay-bg); z-index: 2147483647; /* z-index massimo pratico */ } /* Mostra overlay quando ha .spinnershow */ body.spinnershow .arg-spinner-overlay { display: flex; } /* Blur del contenuto sottostante quando lo spinner è attivo Applica il filtro a TUTTI i figli diretti di eccetto l’overlay */ body.spinnershow > :not(.arg-spinner-overlay) { filter: blur(8px); transition: filter 160ms ease; } /* Card centrale */ .arg-spinner-card { color: rgba(49, 94, 170, 1.0); font-size: 16px; display: inline-flex; align-items: center; gap: var(--arg-gap); padding: 16px 20px; border-radius: var(--arg-radius); background: var(--arg-card-bg); box-shadow: var(--arg-shadow); } /* Spinner ad anello */ .arg-spinner { width: var(--arg-spinner-size); height: var(--arg-spinner-size); border: var(--arg-spinner-border) solid rgba(0, 0 , 0 , 0.12); border-top-color: var(--arg-accent); border-radius: 50%; /* forza l'animazione anche se altri CSS la annullano */ animation: arg-spin 0.9s linear infinite !important; display: inline-block; box-sizing: border-box; } @keyframes arg-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Accessibilità */ @media (prefers-reduced-motion: reduce) { .arg-spinner { animation: none; } body.spinnershow > :not(.arg-spinner-overlay) { transition: none; } } .arg-sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; }