/** * S-Cloud — Skeleton loaders + animations Fluent-style * v2.2.37 — Vague 6 UX Productivité (dernière release) * * Remplace les "Chargement..." textuels par des squelettes animés. * Toutes les transitions calibrées Fluent (180-300ms cubic-bezier). */ /* ── Base skeleton shimmer ──────────────────────────────────────────── */ .sc-skel, .sc-skeleton { display: inline-block; background: linear-gradient(90deg, #eef0f3 0%, #f8f9fa 50%, #eef0f3 100%); background-size: 200% 100%; animation: scSkelShimmer 1.4s linear infinite; border-radius: 4px; color: transparent !important; user-select: none; pointer-events: none; line-height: 1; } @keyframes scSkelShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ── Variantes shape ────────────────────────────────────────────────── */ .sc-skel--text { height: .9em; min-width: 60px; border-radius: 3px; } .sc-skel--text-lg { height: 1.25em; min-width: 120px; border-radius: 3px; } .sc-skel--title { height: 1.6em; min-width: 180px; border-radius: 4px; } .sc-skel--avatar { width: 32px; height: 32px; border-radius: 50%; } .sc-skel--circle { border-radius: 50%; } .sc-skel--button { height: 32px; min-width: 80px; border-radius: 6px; } .sc-skel--card { width: 100%; height: 120px; border-radius: 8px; } .sc-skel--thumb { width: 60px; height: 60px; border-radius: 6px; } .sc-skel--bar { height: 8px; border-radius: 4px; } /* Skeleton composé : row de liste (avatar + 2 lignes + meta) */ .sc-skel-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #f3f4f6; } .sc-skel-row > .sc-skel--avatar { flex-shrink: 0; } .sc-skel-row__main { flex: 1; min-width: 0; } .sc-skel-row__main .sc-skel { display: block; margin-bottom: 4px; } .sc-skel-row__meta { width: 80px; } /* Skeleton composé : card */ .sc-skel-card { padding: 16px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.04); border: 1px solid #eef0f3; } .sc-skel-card .sc-skel { display: block; margin-bottom: 8px; } /* ── Animations Fluent ─────────────────────────────────────────────── */ :root { --sc-ease-fluent: cubic-bezier(.42, 0, .58, 1); --sc-ease-decel: cubic-bezier(.1, .9, .2, 1); --sc-ease-accel: cubic-bezier(.7, 0, .84, 0); --sc-dur-fast: 120ms; --sc-dur-base: 180ms; --sc-dur-mod: 240ms; --sc-dur-slow: 320ms; } /* Transitions calibrées pour les composants existants */ .btn, .dropdown-menu, .modal-content, .sc-flyout, .sc-card-head, .card, .alert, .badge { transition: background-color var(--sc-dur-base) var(--sc-ease-fluent), color var(--sc-dur-base) var(--sc-ease-fluent), border-color var(--sc-dur-base) var(--sc-ease-fluent), box-shadow var(--sc-dur-base) var(--sc-ease-fluent), transform var(--sc-dur-base) var(--sc-ease-fluent), opacity var(--sc-dur-base) var(--sc-ease-fluent); } /* Hover state sur les liens et boutons (très subtil) */ .sp-list-row { transition: background-color 120ms ease-out; } /* Page enter fade-in (sur le main content) — v2.3.15 refined spring */ main.app-content > *:not(.sc-no-fade) { animation: scPageFadeIn 320ms var(--sc-ease-decel) both; } @keyframes scPageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ─── v2.3.23 FIX MODAL CONTAINING BLOCK ───────────────────────────────────── * Quand Bootstrap ouvre une modale, il pose `modal-open` sur . * On en profite pour SUPPRIMER immédiatement tout transform en cours sur les * enfants animés de main — sinon le transform crée un "containing block" CSS * qui emprisonne le position:fixed de la modal (elle se positionne par rapport * au parent transformé au lieu du viewport → décalée + derrière le backdrop). * Cette règle est plus forte que l'animation (animation-fill-mode: both) car * elle arrive après dans la cascade et utilise !important. * ─────────────────────────────────────────────────────────────────────────── */ body.modal-open main.app-content > *, body.modal-open main.app-content > *:not(.sc-no-fade) { transform: none !important; animation: none !important; opacity: 1 !important; } /* Staggered entrance for card children inside content */ .app-content-inner .card:not(.app-content-inner), .app-content-inner .row > [class*="col-"] > .card { animation: scCardFadeIn 350ms var(--sc-ease-decel) both; } .app-content-inner .row > [class*="col-"]:nth-child(2) > .card { animation-delay: 40ms; } .app-content-inner .row > [class*="col-"]:nth-child(3) > .card { animation-delay: 80ms; } .app-content-inner .row > [class*="col-"]:nth-child(4) > .card { animation-delay: 120ms; } .app-content-inner .row > [class*="col-"]:nth-child(5) > .card { animation-delay: 150ms; } .app-content-inner .row > [class*="col-"]:nth-child(6) > .card { animation-delay: 180ms; } @keyframes scCardFadeIn { /* v2.3.22 : `transform: none` au final pour ne pas créer de containing block résiduel */ from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } /* Toast / notif entrance (override style existant) */ .sc-toast, .toast { animation: scToastSlideIn 280ms var(--sc-ease-decel); } @keyframes scToastSlideIn { /* v2.3.22 : `transform: none` au final pour ne pas créer de containing block résiduel */ from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } /* Modal Bootstrap : amélioration subtile */ .modal.fade .modal-dialog { transition: transform var(--sc-dur-mod) var(--sc-ease-decel); transform: scale(.96) translate(0, -8px); } .modal.show .modal-dialog { transform: scale(1) translate(0, 0); } /* Dropdown : entrance */ .dropdown-menu.show { animation: scDropdownPop 180ms var(--sc-ease-decel); } @keyframes scDropdownPop { /* v2.3.22 : `transform: none` au final pour ne pas créer de containing block résiduel */ from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } /* Respect prefers-reduced-motion (a11y) */ @media (prefers-reduced-motion: reduce) { .sc-skel, .sc-skeleton { animation: none !important; } main.app-content > *, .sc-toast, .toast, .modal.fade .modal-dialog, .dropdown-menu.show, .app-content-inner .card, .app-content-inner .row > [class*="col-"] > .card { animation: none !important; } #scProgress .sc-prog-bar { animation: none !important; } body.app-layout.is-leaving .app-content { transition: none !important; } body.app-layout.is-leaving #scPageOverlay { transition: none !important; } #scPageOverlay .sc-spinner { animation: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }