/* ============================================================================= PageTransitionLoaderWidget Brand-themed full-screen overlay shown during slow navigations. Reuses the project's design tokens and the global @keyframes skeleton-shimmer defined in site.css. Defines its own ptl-icon-pulse keyframe (no global "pulse"). ========================================================================== */ /* Lock background scroll while the overlay is up. Set on by JS. */ body.ptl-locked { overflow: hidden; } /* ----------------------------------------------------------------------------- Overlay root -------------------------------------------------------------------------- */ .ptl { position: fixed; inset: 0; z-index: 1060; /* Above bootstrap modal (1050) */ display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--overlay-bg); backdrop-filter: blur(var(--backdrop-blur-md)); -webkit-backdrop-filter: blur(var(--backdrop-blur-md)); opacity: 0; pointer-events: none; transition: opacity var(--duration-300) var(--ease-in-out); } .ptl--visible { opacity: 1; pointer-events: auto; } /* ----------------------------------------------------------------------------- Centered panel -------------------------------------------------------------------------- */ .ptl__panel { width: 100%; max-width: 560px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); padding: 2rem 1.75rem 1.75rem; text-align: center; transform: translateY(8px); transition: transform var(--duration-300) var(--ease-in-out); } .ptl--visible .ptl__panel { transform: translateY(0); } /* ----------------------------------------------------------------------------- Pulsing brand icon -------------------------------------------------------------------------- */ .ptl__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 1rem; border-radius: var(--radius-full); background: rgba(var(--color-primary-500-rgb), 0.12); color: var(--color-primary-500); font-size: 2rem; line-height: 1; animation: ptl-icon-pulse 1.6s ease-in-out infinite; } @keyframes ptl-icon-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--color-primary-500-rgb), 0.35); } 50% { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(var(--color-primary-500-rgb), 0); } } /* ----------------------------------------------------------------------------- Title + cycling status text -------------------------------------------------------------------------- */ .ptl__title { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 600; color: var(--text-primary); } .ptl__status { min-height: 1.25rem; margin: 0 0 1.5rem; font-size: 0.9375rem; color: var(--text-secondary); transition: opacity var(--duration-200) var(--ease-in-out); } .ptl__status--out { opacity: 0; } /* ----------------------------------------------------------------------------- Skeleton primitives -------------------------------------------------------------------------- */ .ptl__skeleton { display: flex; flex-direction: column; gap: 0.625rem; text-align: left; } .ptl__skel-row { display: flex; align-items: center; gap: 0.625rem; } .ptl__skel-block { position: relative; overflow: hidden; background: var(--bg-tertiary); border-radius: var(--radius-md); } .ptl__skel-block::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100% ); transform: translateX(-100%); animation: skeleton-shimmer 1.6s ease-in-out infinite; } [data-theme="dark"] .ptl__skel-block::after { background-image: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100% ); } .ptl__skel-block--circle { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-full); } .ptl__skel-block--pill { flex-shrink: 0; width: 56px; height: 18px; border-radius: var(--radius-full); } .ptl__skel-block--bar { /* horizontal full-width status strip */ width: 100%; height: 48px; } .ptl__skel-block--row { /* accordion / list row */ flex-grow: 1; height: 64px; } .ptl__skel-block--line { /* a text line inside a row */ flex-grow: 1; height: 14px; border-radius: var(--radius-full); } .ptl__skel-block--card { /* KPI card */ flex: 1 1 0; height: 88px; } .ptl__skel-block--panel { /* large content rectangle */ width: 100%; height: 160px; } .ptl__skel-block--input { /* form input */ width: 100%; height: 36px; } .ptl__skel-block--label { /* form label */ width: 35%; height: 12px; border-radius: var(--radius-full); } .ptl__skel-block--nav { /* settings sidebar nav pill */ width: 100%; height: 32px; } /* Builder shape: status strip + 4 accordion rows. Each row has a leading circle + a flex-grow line + a trailing pill so it visually matches the website builder index (Pages, Navigation, Homepage, Theme). */ /* Dashboard shape: header strip + a 3-card KPI grid + a wide content panel. */ .ptl__skel-grid { display: flex; gap: 0.625rem; } /* Settings shape: sidebar (4 nav pills) + form panel (5 label/input rows). Stacks on narrow viewports so it never overflows the 560 px panel. */ .ptl__skel-split { display: flex; gap: 1rem; } .ptl__skel-side { flex: 0 0 30%; display: flex; flex-direction: column; gap: 0.5rem; } .ptl__skel-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.625rem; } .ptl__skel-field { display: flex; flex-direction: column; gap: 0.375rem; } @media (max-width: 575.98px) { .ptl__skel-split { flex-direction: column; } .ptl__skel-side { flex-direction: row; flex-wrap: wrap; } .ptl__skel-side > .ptl__skel-block { flex: 1 1 calc(33.33% - 0.5rem); } .ptl__skel-block--panel { height: 120px; } } /* ----------------------------------------------------------------------------- Reduced motion: keep the layout but hold animations still. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ptl, .ptl__panel { transition: none; } .ptl__icon, .ptl__skel-block::after { animation: none; } }