.player{ display:flex; background:linear-gradient(135deg, #ab58ff 0%, #6a3093 100%); } /* Image box */ .site-icon-small{ position:relative; width: 70px; height: 70px; border-radius: 8px; overflow:hidden; flex-shrink:0; } .link-type { display: table; background-color: #1a1a1a; color: white; font-size: .65rem; padding: 2px 8px; border-radius: 10px; margin-right: 10px; font-weight: 400; margin-top: 5px; } .cover img{ width:100%; height:100%; object-fit:cover; } /* Circular Progress */ .progress-ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70px; height:70px; } .progress-ring circle{ fill:none; stroke-width:4; stroke-linecap:round; } .progress-bg{ stroke:rgba(255,255,255,.2); } .progress{ stroke:#ffffff; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 0.3s linear; } /* Play Button */ .play-btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; border:none;background:linear-gradient(135deg, #ab58ff 0%, #6a3093 100%); color:#fff; cursor:pointer; font-size: 28px; display:flex; align-items:center; justify-content:center; z-index:2; } /* Info */ .info{ margin-left:15px; color:#fff; } .info h3{ margin:0; font-size:16px; } .info p{ margin:6px 0 0; font-size:13px; color:#aaa; }