+ .actions a {
+ display: inline-flex; align-items: center; justify-content: center;
+ width: 40px; height: 40px; border-radius: 10px; color: #fff; text-decoration: none;
+ }
+ .actions a:hover { background: rgba(255,255,255,0.08); }
-
-
-
-
-
-
+ .section-card { margin-top: 18px; padding: 16px; }
+
+ .video-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+ gap: var(--grid-gap);
+ }
+
+ .video {
+ display: grid; grid-template-rows: auto 1fr;
+ text-decoration: none; color: inherit;
+ border-radius: var(--radius-lg); overflow: hidden; position: relative;
+ background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08);
+ box-shadow: var(--shadow-2);
+ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
+ font-family: "poketube flex", Inter, system-ui;
+ }
+ .video:hover {
+ transform: translateY(-4px);
+ border-color: rgba(223,3,168,0.55);
+ box-shadow: 0 8px 28px rgba(223,3,168,0.22);
+ }
+
+ .thumbnail {
+ position: relative;
+ background: var(--thumbnail-bg) center/cover no-repeat;
+ aspect-ratio: 16 / 9;
+ }
+ .thumbnail::after {
+ content: ""; position: absolute; inset: 0;
+ background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
+ }
+ .video-length {
+ position: absolute; right: 8px; bottom: 8px; z-index: 2;
+ font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 8px;
+ background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.18);
+ font-family: "poketube flex", Inter, system-ui;
+ }
+
+ .info {
+ display: grid; gap: 6px; padding: 10px 12px 12px 12px; min-height: 84px;
+ background: rgba(0,0,0,0.18); border-top: 1px solid rgba(255,255,255,0.08);
+ font-family: "poketube flex", Inter, system-ui;
+ }
+ .info .title {
+ font-weight: 800; line-height: 1.25; color: var(--text-primary);
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+ font-family: "poketube flex", Inter, system-ui;
+ }
+ .info .byline {
+ margin-top: -2px; font-size: 13px; color: var(--text-dim);
+ font-family: "poketube flex", Inter, system-ui;
+ }
+
+ @media (max-width: 780px) {
+ .navbar-inner { grid-template-columns: 1fr auto; }
+ .brand { display: none; }
+ .tabs { overflow-x: auto; scrollbar-width: none; }
+ .tabs::-webkit-scrollbar { display: none; }
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ .video, .progress-bar { transition: none !important; }
+ }
+
+
+
+
+
+
+
+
+
+ Discover Popular Videos On Poke :3
+ uses the United States trending page(s) from YouTube
+
+
+
+
+
+
+
-
-
Discover Popular Videos On Poke :3
-
uses the united states trending page(s) from youtube!!
- <% if (!tab) { %>
+
-
-
-
+ if ('IntersectionObserver' in window) {
+ const io = new IntersectionObserver((entries, obs) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ load(entry.target);
+ obs.unobserve(entry.target);
+ }
+ });
+ }, { rootMargin: '200px 0px' });
+ nodes.forEach(n => io.observe(n));
+ } else {
+ const onScroll = () => {
+ const vh = window.innerHeight || document.documentElement.clientHeight;
+ nodes.forEach(n => {
+ if (!n.hasAttribute('data-bg')) return;
+ const r = n.getBoundingClientRect();
+ if (r.top < vh + 200 && r.bottom > -200) load(n);
+ });
+ };
+ onScroll();
+ window.addEventListener('scroll', onScroll, { passive: true });
+ window.addEventListener('resize', onScroll);
+ }
+ }());
+
+
+<% } %>
+
<% } %>