/* VSL Shorts Scroll Scopes styles to archive/single of vsl_short. */ /* Archive grid */ .post-type-archive-vsl_short .vslss-card { overflow: hidden; border-radius: 12px; } .post-type-archive-vsl_short .vslss-thumb { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; background: rgba(255,255,255,0.06); overflow: hidden; } .post-type-archive-vsl_short .vslss-thumb img, .post-type-archive-vsl_short .vslss-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .post-type-archive-vsl_short .vslss-thumb video { background: #000; pointer-events: none; } /* Defensive: hide any native controls if a browser decides to show them */ .post-type-archive-vsl_short .vslss-thumb video::-webkit-media-controls, .post-type-archive-vsl_short .vslss-thumb video::-webkit-media-controls-enclosure { display: none !important; } .post-type-archive-vsl_short .vslss-thumb-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(255,255,255,0.7); font-size: 12px; } .post-type-archive-vsl_short .vslss-play { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,0.6); border-radius: 999px; padding: 6px 10px; font-size: 12px; color: #fff; } .post-type-archive-vsl_short .vslss-tags { display: flex; gap: 6px; flex-wrap: wrap; } /* Viewer */ .single-vsl_short .vslss-viewer { position: fixed; inset: 0; background: #000; z-index: 99999; height: 100vh; /* fallback */ height: 100dvh; /* modern mobile viewport */ overflow: hidden; } /* Prevent the page behind the viewer from scrolling */ html, body { height: 100%; } body.single-vsl_short { overflow: hidden; } /* WordPress admin bar adds a margin-top on . Remove it for true fullscreen on scroll pages. */ body.post-type-archive-vsl_short.admin-bar #wpadminbar, body.single-vsl_short.admin-bar #wpadminbar { display: none !important; } html { margin-top: 0 !important; } .single-vsl_short .vslss-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 50; display: flex; gap: 10px; align-items: center; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); background: linear-gradient(to bottom, rgba(0,0,0,0.78), rgba(0,0,0,0.35)); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.10); transform: translateY(0); transition: transform 180ms ease, opacity 180ms ease; } /* Hide on scroll down, show on scroll up */ .single-vsl_short .vslss-viewer.is-topbar-hidden .vslss-topbar { transform: translateY(-110%); opacity: 0; pointer-events: none; } .single-vsl_short .vslss-back { color: #fff; text-decoration: none; font-weight: 600; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,0.08); } .single-vsl_short .vslss-search { margin-left: auto; display: flex; gap: 8px; align-items: center; max-width: 520px; width: 100%; } .single-vsl_short .vslss-search input { flex: 1; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: #fff; padding: 10px 12px; outline: none; } .single-vsl_short .vslss-search button { border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.12); color: #fff; padding: 10px 12px; } .single-vsl_short .vslss-feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .single-vsl_short .vslss-item { position: relative; height: 100vh; /* fallback */ height: 100dvh; /* modern */ scroll-snap-align: start; scroll-snap-stop: always; background: #000; overflow: hidden; } /* ================= Ads (reel-style) ================= */ .single-vsl_short .vslss-item--ad { background: #000; } .single-vsl_short .vslss-item--ad .vslss-ad-media { display: flex; align-items: center; justify-content: center; padding: 14px; } .single-vsl_short .vslss-ad-label { position: absolute; top: 14px; left: 14px; z-index: 2; color: rgba(255,255,255,0.9); font-size: 12px; letter-spacing: 0.2px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12); } .single-vsl_short .vslss-ad-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .single-vsl_short .vslss-ad-iframe { width: 100%; height: 100%; border: 0; } .single-vsl_short .vslss-ad-spinner { position: absolute; inset: auto 0 18px 0; text-align: center; color: rgba(255,255,255,0.65); font-size: 12px; pointer-events: none; } .single-vsl_short .vslss-media { position: absolute; inset: 0; } .single-vsl_short .vslss-video { width: 100%; height: 100%; object-fit: contain; background: #000; } /* Center play/pause button */ .single-vsl_short .vslss-play-toggle { touch-action: manipulation; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 6; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .18s ease, transform .18s ease; } .single-vsl_short .vslss-play-toggle:active { transform: translate(-50%, -50%) scale(0.98); } .single-vsl_short .vslss-play-icon { font-size: 28px; line-height: 1; } /* Hide the center play/pause button while actively playing (Instagram-style). */ .single-vsl_short .vslss-item.is-playing .vslss-play-toggle { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.96); } .single-vsl_short .vslss-item.is-paused .vslss-play-toggle { opacity: 1; pointer-events: auto; } /* Buffering spinner (shown while loading/buffering) */ .single-vsl_short .vslss-spinner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 999px; border: 3px solid rgba(255,255,255,.25); border-top-color: rgba(255,255,255,.9); animation: vslss-spin 1s linear infinite; opacity: 0; pointer-events: none; z-index: 7; } .single-vsl_short .vslss-spinner.is-visible { opacity: 1; } @keyframes vslss-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .single-vsl_short .vslss-missing { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.75); font-size: 14px; } .single-vsl_short .vslss-overlay { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 14px; pointer-events: none; } .single-vsl_short .vslss-left { align-self: flex-end; max-width: 70%; } .single-vsl_short .vslss-taglist { display: flex; flex-wrap: wrap; gap: 8px; } .single-vsl_short .vslss-tag { pointer-events: auto; display: inline-block; text-decoration: none; color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12); } .single-vsl_short .vslss-tag--muted { opacity: 0.7; } .single-vsl_short .vslss-right { align-self: center; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; } .single-vsl_short .vslss-vote-btn, .single-vsl_short .vslss-sound-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 54px; height: 54px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.45); color: #fff; cursor: pointer; } .single-vsl_short .vslss-vote-btn .vslss-icon { font-size: 18px; } .single-vsl_short .vslss-like-count, .single-vsl_short .vslss-dislike-count { font-size: 12px; opacity: 0.85; } .single-vsl_short .vslss-item.vslss-voted-like .vslss-vote-btn[data-vote="like"], .single-vsl_short .vslss-item.vslss-voted-dislike .vslss-vote-btn[data-vote="dislike"] { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.12); } .single-vsl_short .vslss-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 12px; background: rgba(0,0,0,0.45); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); pointer-events: none; } .single-vsl_short .vslss-loading { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.85); font-size: 12px; border: 1px solid rgba(255,255,255,0.12); display: none; } .single-vsl_short .vslss-loading.is-visible { display: block; } /* On very small screens, remove topbar search button text overflow */ @media (max-width: 480px) { .single-vsl_short .vslss-search button { padding: 10px; } }