Please Wait For Few Seconds To Play The TV Or Tap Play! .iframe-wrapper { position: relative; width: 100%; height: 450px; overflow: hidden; } .iframe-wrapper iframe { width: 100%; height: 450px; display: block; border: 0; } /* Top crop on mobile only */ @media (max-width: 600px) { .iframe-wrapper iframe { position: relative; top: -50px; } } .logo-blur { position: absolute; top: 10px; left: 7px; width: 110px; height: 25px; backdrop-filter: blur(8px); background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: 9; } .logo-block { position: absolute; top: 10px; left: 7px; width: 110px; height: 25px; z-index: 10; } @media (min-width: 601px) { .top-click-block { position: absolute; top: 0; left: 0; width: 100%; height: 60px; z-index: 10; } } * { box-sizing: border-box; } #vt-container { width: 100%; } .vt-panel { width: 100%; } .vt-panel video, .vt-panel iframe, .vt-panel object, .vt-panel embed, .vt-panel .vplayer-wrap, .vt-panel [class*="player"], .vt-panel [class*="video"] { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; display: block; } /* ── Button bar ───────────────────────────────────────────────── */ #vt-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 4px 2px; } /* ── Each button ──────────────────────────────────────────────── */ #vt-buttons button { flex: 1 1 auto; min-width: 100px; position: relative; padding: 12px 22px; border: none; border-radius: 50px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; cursor: pointer; overflow: hidden; /* Depth */ box-shadow: 0 4px 15px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.12); /* Smooth everything */ transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s ease; } /* Shine sweep on hover */ #vt-buttons button::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); transition: left 0.45s ease; } #vt-buttons button:hover::before { left: 130%; } /* Hover lift */ #vt-buttons button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.22), 0 4px 8px rgba(0,0,0,0.14); } /* Click press */ #vt-buttons button:active { transform: translateY(0px) scale(0.97); box-shadow: 0 2px 8px rgba(0,0,0,0.18); } /* Inactive = faded & flat */ #vt-buttons button.vt-inactive { opacity: 0.42; filter: saturate(0.6); box-shadow: 0 2px 6px rgba(0,0,0,0.10); transform: translateY(0); } #vt-buttons button.vt-inactive:hover { opacity: 0.7; filter: saturate(0.9); transform: translateY(-2px); } /* Active badge dot */ #vt-buttons button.vt-active-btn::after { content: ''; display: inline-block; width: 7px; height: 7px; background: #fff; border-radius: 50%; margin-left: 8px; vertical-align: middle; box-shadow: 0 0 6px rgba(255,255,255,0.9); animation: vt-pulse 1.4s ease infinite; } @keyframes vt-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } } /* ── Mobile ───────────────────────────────────────────────────── */ @media (max-width: 480px) { #vt-buttons { gap: 8px; } #vt-buttons button { flex: 1 1 45%; font-size: 11px; padding: 10px 14px; letter-spacing: 0.3px; } .vt-panel.vt-active { padding: 10px; } } /* ── Gradient palette — each pair = a gradient ──────────────────*/ var gradients = [ "linear-gradient(135deg,#f83d6e,#f7634b)", "linear-gradient(135deg,#6a11cb,#2575fc)", "linear-gradient(135deg,#11998e,#38ef7d)", "linear-gradient(135deg,#f7971e,#ffd200)", "linear-gradient(135deg,#c471ed,#f64f59)", "linear-gradient(135deg,#4facfe,#00f2fe)", "linear-gradient(135deg,#43e97b,#38f9d7)", "linear-gradient(135deg,#fa709a,#fee140)", "linear-gradient(135deg,#a18cd1,#fbc2eb)", "linear-gradient(135deg,#fd7043,#ff8a65)", ]; /* Shuffle every page load */ gradients.sort(function () { return Math.random() - 0.5; }); /* ── Refresh button ─────────────────────────────────────────── */ document.addEventListener("DOMContentLoaded", function () { var bar = document.getElementById("vt-buttons"); var refreshBtn = document.createElement("button"); refreshBtn.id = "vt-refresh"; refreshBtn.innerHTML = "↻ Refresh"; refreshBtn.style.background = "linear-gradient(135deg,#434343,#000000)"; refreshBtn.onclick = function () { location.reload(); }; bar.appendChild(refreshBtn); }); document.addEventListener("DOMContentLoaded", function () { var panels = document.querySelectorAll(".vt-panel"); var bar = document.getElementById("vt-buttons"); panels.forEach(function (panel, i) { panel.id = "vt-panel-" + i; var btn = document.createElement("button"); btn.id = "vt-btn-" + i; btn.textContent = panel.dataset.label || ("Tab " + (i + 1)); btn.style.background = gradients[i % gradients.length]; btn.onclick = function () { switchTab(i); }; if (i === 0) { btn.classList.add("vt-active-btn"); } else { btn.classList.add("vt-inactive"); } bar.appendChild(btn); }); }); function switchTab(activeIndex) { document.querySelectorAll("video").forEach(function (v) { v.pause(); }); document.querySelectorAll(".vt-panel").forEach(function (panel, i) { if (i === activeIndex) { panel.classList.add("vt-active"); panel.style.height = "auto"; panel.style.overflow = "visible"; panel.style.padding = "10px"; } else { panel.classList.remove("vt-active"); panel.style.height = "0"; panel.style.overflow = "hidden"; panel.style.padding = "0"; } }); document.querySelectorAll("[id^='vt-btn-']").forEach(function (btn, i) { if (i === activeIndex) { btn.classList.remove("vt-inactive"); btn.classList.add("vt-active-btn"); } else { btn.classList.add("vt-inactive"); btn.classList.remove("vt-active-btn"); } }); } Refresh Stream Alternate Link About Tolo News Live TV: From Wikipedia, the free encyclopedia TOLOnews is Afghanistan's first 24/7 news channel, owned by MOBY Group. Its sister channels are TOLO TV and Lemar TV in Afghanistan. Whether it’s breaking the news, providing indepth reports or inspiring discussion among Afghanistan’s political leaders, TOLOnews has captured the attention of a nation who want fast, credible and reliable information as it happens, on the ground. Afghanistan’s first 24-hour news and current affairs channel serves Afghans’ growing appetite for the most up to date news, both domestic and international, across broadcast, online and social media platforms.
