/* Static Skeleton Container (RPlugin). Szkielety ładowania z twardą rezerwacją wysokości (contain) i animacją shimmer zgodną z zasadą GPU: animujemy WYŁĄCZNIE transform pseudo-elementu, nigdy background-position/width/height. */ .rplugin-skeleton, .rplugin-skeleton-item { position: relative; overflow: hidden; background: #e8eaed; border-radius: 6px; /* Twarda rezerwacja miejsca — przeglądarka nie przelicza layoutu sąsiadów */ contain: layout paint; } /* Warstwa błysku — przesuwana transformem (GPU) */ .rplugin-skeleton::after, .rplugin-skeleton-item::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: rplugin-shimmer 1.5s infinite; } @keyframes rplugin-shimmer { 100% { transform: translateX(100%); } } /* Warianty kształtu */ .rplugin-skeleton-text { height: 0.9em; margin: 0.35em 0; border-radius: 4px; } .rplugin-skeleton-title { height: 1.6em; width: 60%; margin: 0.4em 0; border-radius: 4px; } .rplugin-skeleton-image { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; } .rplugin-skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; } .rplugin-skeleton-button { height: 44px; width: 120px; border-radius: 8px; } .rplugin-skeleton-text.is-short { width: 40%; } .rplugin-skeleton-text.is-long { width: 90%; } /* Karta-szkielet (np. kafel produktu / wpisu) */ .rplugin-skeleton-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #e8eaed; border-radius: 12px; } /* Siatka szkieletów z shortcode */ .rplugin-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } /* ---- Mechanizm wrappera: szkielet widoczny, treść ukryta do załadowania ---- */ .rplugin-skeleton-wrap > .rplugin-skeleton-content { display: none; } .rplugin-skeleton-wrap.is-loaded > .rplugin-skeleton { display: none; } .rplugin-skeleton-wrap.is-loaded > .rplugin-skeleton-content { display: block; animation: rplugin-skeleton-fade 0.3s ease; } @keyframes rplugin-skeleton-fade { from { opacity: 0; } to { opacity: 1; } } /* Dostępność: bez animacji dla użytkowników z prefers-reduced-motion oraz gdy JS oznaczy słabe łącze klasą na (Adaptive Loading) */ @media (prefers-reduced-motion: reduce) { .rplugin-skeleton::after, .rplugin-skeleton-item::after { animation: none; } .rplugin-skeleton-wrap.is-loaded > .rplugin-skeleton-content { animation: none; } } html.rplugin-save-data .rplugin-skeleton::after, html.rplugin-save-data .rplugin-skeleton-item::after { animation: none; } /* Wariant ciemny */ @media (prefers-color-scheme: dark) { .rplugin-skeleton, .rplugin-skeleton-item { background: #2a2d31; } .rplugin-skeleton::after, .rplugin-skeleton-item::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); } }