#main.tdx-spa-skeleton-active { width: 100%; min-height: 50vh; } #main.tdx-spa-content-enter { animation: tdxSpaContentIn 200ms ease forwards; } html.tdx-spa-navigating { cursor: progress; } .tdx-spa-skeleton__video, .tdx-spa-skeleton__thumb, .tdx-spa-skeleton__line, .tdx-spa-skeleton__btn, .tdx-spa-skeleton__tag, .tdx-spa-skeleton__block, .tdx-spa-skeleton__stat, .tdx-spa-skeleton__studio-tile { background: linear-gradient( 90deg, var(--color-surface-alt, #212121) 0%, var(--color-surface, #303030) 50%, var(--color-surface-alt, #212121) 100% ); background-size: 200% 100%; animation: tdxSpaShimmer 1.2s ease-in-out infinite; border-radius: var(--radius-md, 8px); } .tdx-spa-skeleton__video { width: 100%; aspect-ratio: 16 / 9; max-height: 72vh; margin-bottom: 16px; } .tdx-spa-skeleton__line { height: 14px; margin-bottom: 10px; } .tdx-spa-skeleton__line--title { height: 22px; width: 70%; } .tdx-spa-skeleton__line--short { width: 45%; } .tdx-spa-skeleton__line--label { height: 12px; width: 80px; margin-bottom: 8px; } .tdx-spa-skeleton__line--hero { height: 40px; width: min(280px, 60%); margin: 0 auto 12px; } .tdx-spa-skeleton__line--center { margin-left: auto; margin-right: auto; } .tdx-spa-skeleton__line--subnav { height: 36px; width: 60%; margin: 0; } .tdx-spa-skeleton__thumb { width: 100%; aspect-ratio: 264 / 388; display: block; } .tdx-spa-skeleton__btn { display: inline-block; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; } .tdx-spa-skeleton__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .tdx-spa-skeleton__tag { display: inline-block; height: 28px; width: 72px; border-radius: 999px; } .tdx-spa-skeleton__block { width: 100%; height: 120px; margin-top: 16px; } .tdx-spa-skeleton__stat { display: inline-block; height: 40px; width: 120px; border-radius: 999px; } .tdx-spa-skeleton__studio-tile { overflow: hidden; } .tdx-spa-skeleton__studio-tile .tdx-spa-skeleton__thumb { aspect-ratio: 1 / 1; border-radius: var(--radius-md, 8px); } .tdx-spa-skeleton__header { margin-bottom: 24px; } .tdx-spa-skeleton-card { pointer-events: none; } .tdx-spa-skeleton-card .title-fix .tdx-spa-skeleton__line { margin-bottom: 6px; } .tdx-spa-skeleton-card .title-fix .tdx-spa-skeleton__line:last-child { margin-bottom: 0; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] { align-items: stretch; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="listing"], #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="search"] { align-items: stretch; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] #contentWrapper > article.post { display: flex; flex-wrap: wrap; align-items: flex-start; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] #contentWrapper .videoWrap { float: none; flex: 1 1 calc(100% - 339px); width: auto; min-width: 0; max-width: calc(100% - 339px); } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] #contentWrapper .rvideos-wrap-container { flex: 0 0 324px; width: 324px; max-width: 324px; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] #contentWrapper .rvideos-sidebar { width: 100%; margin: 0 0 10px 15px; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] .title-container { margin: 12px 0; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] .video-action-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] #wrap.centered { width: 100%; max-width: 1100px; margin-top: 24px; margin-left: auto; margin-right: auto; box-sizing: border-box; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] #wrap.centered .video-posts-grid { width: 100%; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] .contentHead { margin-bottom: 16px; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] .contentHead p { margin: 0; float: none; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] .contentHead p .tdx-spa-skeleton__line { display: block; margin-bottom: 0; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="listing"] #wrap, #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="search"] #wrap { width: 100%; box-sizing: border-box; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="listing"] .video-posts-grid, #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="search"] .video-posts-grid { width: 100%; } @media (max-width: 984px) { #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] #contentWrapper .videoWrap, #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] #contentWrapper .rvideos-wrap-container { flex: 1 1 100%; width: 100%; max-width: 100%; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="single"] #contentWrapper .rvideos-sidebar { margin: 16px 0 0; } } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="explore"] .explore { max-width: 1420px; margin: 0 auto; padding: 24px 16px 48px; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="explore"] .ex-hero { text-align: center; padding: 32px 8px 20px; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="explore"] .ex-hero__stats { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="explore"] .ex-subnav { margin: 12px 0 20px; padding: 10px 8px; } #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="explore"] .ex-studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } @media (min-width: 768px) { #main.tdx-spa-skeleton-active[data-tdx-skeleton-type="explore"] .ex-studio-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } @keyframes tdxSpaShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes tdxSpaContentIn { from { opacity: 0.4; } to { opacity: 1; } }