/* ========================================================= RGO Skeleton ========================================================= */ :root { --rgo-skeleton-bg: #e5e7eb; --rgo-skeleton-highlight: rgba(255, 255, 255, 0.75); --rgo-skeleton-duration: 1.4s; --rgo-skeleton-radius: 0.375rem; /* Page loader */ --rgo-skeleton-page-bg: #e5e7eb; --rgo-skeleton-page-highlight: rgba(255, 255, 255, 0.75); } /* ========================================================= Element skeleton ========================================================= */ .is-skeleton { position: relative; overflow: hidden; /* * El tamaño real del elemento se conserva porque * no alteramos su layout. */ background-color: var(--rgo-skeleton-bg) !important; /* * Shimmer */ background-image: linear-gradient( 90deg, transparent 10%, var(--rgo-skeleton-highlight) 40%, transparent 80% ) !important; background-repeat: no-repeat !important; background-size: 200% 100% !important; background-position: 100% 0; animation: rgoSkeletonShimmer var(--rgo-skeleton-duration) linear infinite; border-radius: var(--rgo-skeleton-radius); /* * Evitamos que el contenido real sea visible. */ color: transparent !important; text-shadow: none !important; /* * Evitamos interacción mientras está cargando. */ pointer-events: none; user-select: none; /* * Elementos con borde/sombra propios no deberían * contaminar visualmente el skeleton. */ border-color: transparent !important; box-shadow: none !important; } /* * Ocultamos visualmente el contenido interno pero * mantenemos su espacio en el layout. * * Esto es importante: * el skeleton conserva dimensiones y evita * layout shifts. */ .is-skeleton > * { visibility: hidden !important; } /* ========================================================= Variantes ========================================================= */ /* * Skeleton para líneas de texto. * * Uso: * * */ .is-skeleton.is-skeleton--text { display: block; width: 100%; min-height: 1em; border-radius: 0.35em; } /* * Texto corto */ .is-skeleton.is-skeleton--text-short { display: block; width: 60%; min-height: 1em; border-radius: 0.35em; } /* * Texto muy corto */ .is-skeleton.is-skeleton--text-xs { display: block; width: 35%; min-height: 1em; border-radius: 0.35em; } /* * Rectángulo genérico */ .is-skeleton.is-skeleton--block { display: block; width: 100%; min-height: 3rem; } .is-skeleton.is-skeleton--block.x2 { min-height: 6rem; } .is-skeleton.is-skeleton--block.x3 { min-height: 9rem; } .is-skeleton.is-skeleton--block.x4 { min-height: 12rem; } .is-skeleton.is-skeleton--block.x5 { min-height: 15rem; } /* * Avatar / círculo */ .is-skeleton.is-skeleton--circle { aspect-ratio: 1 / 1; border-radius: 50%; } /* * Pill / badge */ .is-skeleton.is-skeleton--pill { border-radius: 999px; } /* ========================================================= Page skeleton ========================================================= */ /* * Puede activarse directamente desde HTML: * * * * No depende de JS para aparecer. */ body.rgo-skeleton-page { overflow: hidden !important; } /* * Ocultamos el contenido real. * * visibility mantiene el layout. */ body.rgo-skeleton-page > * { visibility: hidden !important; } /* * Capa base */ body.rgo-skeleton-page::before { content: ""; position: fixed; inset: 0; z-index: 2147483646; background-color: var(--rgo-skeleton-page-bg); } /* * Shimmer de página completa */ body.rgo-skeleton-page::after { content: ""; position: fixed; inset: 0; z-index: 2147483647; background-image: linear-gradient( 90deg, transparent 0%, var(--rgo-skeleton-page-highlight) 50%, transparent 100% ); background-repeat: no-repeat; background-size: 200% 100%; background-position: 100% 0; animation: rgoSkeletonPageShimmer var(--rgo-skeleton-duration) linear infinite; pointer-events: none; } /* ========================================================= Animations ========================================================= */ @keyframes rgoSkeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes rgoSkeletonPageShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ========================================================= Reduced motion ========================================================= */ @media (prefers-reduced-motion: reduce) { .is-skeleton, body.rgo-skeleton-page::after { animation: none !important; } }