12,49d11
< // Thanks to https://stackoverflow.com/questions/66121101/html-change-progress-bar-color and https://verpex.com/blog/website-tips/how-to-style-a-progress-bar-using-css
< 
< progress {
<  border: none;
<  background: grey;
<  opacity: 0.6;
< }
< 
< progress {
<  color: lightblue;
< }
< 
< progress::-webkit-progress-value {
<  background: lightblue;
< }
< 
< progress::-moz-progress-bar {
<   background: lightcolor;
< }
< 
< .red::-webkit-progress-value {
<  background: red;
< }
< .blue::-webkit-progress-value {
<  background: blue;
< }
< progress::-webkit-progress-bar {
<  background: grey;
< }
< 
< 
< progress {
<   -webkit-appearance:none;
<   -moz-appearance:none;        
<   appearance: none;
<   border-radius: 10em;
< }
< 
52,53c14,15
<   var issueoid=[], gwhat='', backiurl='/HTMLCSS/karaoke_youtube_api.htm?minimize=Y&rand=rand8675876#youtubeid=++++++++++++Djibouti%2C%20Djibouti&youtube_duration=&email=&emoji=on&ir=140972061', lastlet='', lastlev='', lastta='', mode='', radioscr='';
<   var origtitle='' + document.title.split(' ...')[0] + ' ...';
---
>   var issueoid=[], gwhat='', backiurl='', lastlet='', lastlev='', lastta='', mode='', radioscr='';
>   var origtitle='' + document.title.split(' ... ')[0] + ' ... ';
68,70c30
<   var offonstodo=[], bbrect=null, lastrelifid='', lastreltitle='';
<   var stosofar=';';
<   var zwhat='';
---
>   var offonstodo=[];
72c32
<   var prevans='no', seloih2='', ggwhat='';
---
>   var prevans='no', seloih2='';
74c34
<   var smul='', tdtis='', dtis='';
---
>   var smul='';
77,88d36
<        if (window.top) { if (window.top != window.self) {
<          if (top.document.getElementById('phfloater') && !top.document.getElementById('listeleven')) {
<            top.document.getElementById('phfloater').innerHTML+="<div id=listeleven style='display:none;'></div>";
<          }
<          if (top.document.title.indexOf(' ...') == -1) {
<             tdtis=top.document.title;
<             dtis=document.title;
<             document.title=tdtis + ' ' + dtis;
<             origtitle='' + document.title.split(' ...')[0] + ' ...';
<             top.document.title=clit(401,document.title);
<          }
<        } }
90,98d37
<        if (window.top) { if (window.top != window.self) {
<          if (top.document.title.indexOf(' ...') == -1) {
<             tdtis=top.document.title;
<             dtis=document.title;
<             document.title=tdtis + ' ' + dtis;
<             origtitle='' + document.title.split(' ...')[0] + ' ...';
<             top.document.title=clit(411,document.title);
<          }
<        } }
101,103d39
<        if (window.top) { if (window.top != window.self) {
<          top.document.title=clit(421,document.title);
<        } }
113,132d48
<   var karbit='';
<   
<   function getlastreltitle() {
<     return lastreltitle;
<   }
<   
<   function getlastrelifid() {
<     return lastrelifid;
<   }
<   
<   function clit(lno, twhat) {
<     if (top.document.title.indexOf(twhat.split(' ...')[0]) > 0) {
<     document.title=top.document.title;
<     return top.document.title;
<     } else {
<     console.log('!' + origtitle + '! ... ' + lno + ': ' + ('' + (new Date())) + ' top.document.title=' + twhat);
<     return twhat;
<     }
<   }
<   
136,138d51
<        if (window.top) { if (window.top != window.self) {
<            top.document.title=clit(61,top.document.title.replace(origtitle, 'Playlist playing ...'));
<        } }
144,147c57
<          document.title=document.title.replace('' + document.title.split('background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', '');
<        if (window.top) { if (window.top != window.self) {
<          top.document.title=clit(70,top.document.title.replace('' + top.document.title.split('background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ''));
<        } }
---
>          document.title=document.title.replace(' ' + document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' ');
152,155c62
<          document.title=document.title.replace('' + document.title.split('background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', '');
<        if (window.top) { if (window.top != window.self) {
<          top.document.title=clit(78,top.document.title.replace('' + top.document.title.split('background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ''));
<        } }
---
>          document.title=document.title.replace(' ' + document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' ');
158,161d64
<        if (window.top) { if (window.top != window.self) {
<        console.log(document.title);
<        top.document.title=clit(83,top.document.title.replace(origtitle, origtitle + ' background:linear-gradient(180deg,#' + inic.value.replace('#','') + ',#' + inic.value.replace('#','') + ') !important; background-color:#' + inic.value.replace('#','') + ' !important; '));
<        } }
243,249d145
<         setTimeout(function(){
<             bbrect=document.getElementsByTagName('details')[0].getBoundingClientRect();
<             zwhat=document.getElementsByTagName('details')[0].id;
<             if (stosofar.indexOf(';' + zwhat + ',') != -1) {
<                windowscrollTo(0, eval(('' + stosofar.split(';' + zwhat + ',')[1].split(';')[0].split(',')[eval(-1 + stosofar.split(';' + zwhat + ',')[1].split(';')[0].split(',').length)]   )));
<             } 
<         }, 900);
259,261d154
<        if (window.top) { if (window.top != window.self) {
<            top.document.title=clit(176,top.document.title.replace(origtitle, 'Playlist playing ...'));
<        } }
267,269d159
<        if (window.top) { if (window.top != window.self) {
<          top.document.title=clit(184,top.document.title.replace(' ' + top.document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' '));
<        } }
272,274d161
<        if (window.top) { if (window.top != window.self) {
<        top.document.title=clit(189,top.document.title.replace(origtitle, origtitle + ' justaudio background:linear-gradient(180deg,transparent,transparent) !important; background-color:transparent !important; '));
<        } }
286,288d172
<        if (window.top) { if (window.top != window.self) {
<        top.document.title=clit(203,top.document.title.replace(/\ justaudio\ /g,' '));
<        } }
318c202
<   function upd(inone, intwo, inthree, detidis) {
---
>   function upd(inone, intwo, inthree) {
320,322c204
<     //if (detidis != '') {
<     //   alert(detidis);
<     //}
---
>     
374d255
<   
389,394d269
<       if (window.top) { if (window.top != window.self) {
<        if (top.document.title.indexOf(' background:') != -1) {
<          top.document.title=clit(305,top.document.title.replace(' ' + top.document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' '));
<        } }
<        top.document.title+=' justaudio background:linear-gradient(180deg,transparent,transparent) !important; background-color:transparent !important; '; 
<       }
437,438c312
<     if (window.top) { if (window.top != window.self) {
<               if (eval('' + top.document.title.length) >= eval('' + document.title.length) && top.document.title.indexOf(document.title) != -1) {
---
>     if (window.top != window.self) {
440,447d313
<               document.title=top.document.title;
<               } else {
<               console.log(top.document.title);
<               document.title+='  mute control  ddlist goes here  ';
<               top.document.title=clit(372,document.title);
<               }
<               //alert(564);
<               //top.document.title+='  mute control  ddlist goes here  ';
449c315
<     } }
---
>     }
490,491c356
<     backiurl=(backiurl == '' ? document.getElementById('karit').src : backiurl);
<     //alert('backiuRl=' + backiurl);
---
>     backiurl=document.getElementById('karit').src;
515,517d379
<        if (window.top) { if (window.top != window.self) {
<        top.document.title=clit(423,top.document.title.replace(top.document.title.split(' ..')[0], 'Playlist playing ...'));
<        } }
525,527d386
<        if (window.top) { if (window.top != window.self) {
<        top.document.title=clit(433,top.document.title.replace(top.document.title.split(' ..')[0], 'Playlist playing ...'));
<        } }
578,596d436
< 
<     backiurl=document.getElementById('karit').src;
<     //alert('bacKiurl=' + backiurl);
< 
<     setTimeout(function(){
<       var sto=(stosofar == ';' ? true : false);
<       var dets=[], jdets=0, ihs='';
<       if (7 == 7 || (('' + location.hash).replace(/^\#/g,'').toLowerCase().indexOf('oneatatime') == 0 || ('' + location.hash).replace(/^\#/g,'').toLowerCase().indexOf('radio') == 0)) {
<         dets=document.getElementsByTagName('details');
<         for (jdets=0; jdets<dets.length; jdets++) {
<           if (dets[jdets].innerHTML.indexOf('</summary>') != -1) {
<             if (sto) {
<               stosofar+=('' + dets[jdets].id + ',0,' + dets[jdets].getBoundingClientRect().top).split('.')[0] + ';';
<               //alert('Stsofar=' + stosofar);
<             }
<           }
<         }
<       }
<     }, 8000);
611c451
<       var sto=(stosofar == ';' ? true : false);
---
>   
617,620d456
<             if (sto) {
<               stosofar+=('' + dets[jdets].id + ',0,' + dets[jdets].getBoundingClientRect().top).split('.')[0] + ';';
<               //alert('stsofar=' + stosofar);
<             }
681,689d516
<   
<   function windowscrollTo(thex, they) {
<     document.getElementById('sbtt').style.position='absolute';
<     document.getElementById('sbtt').style.left='10px';
<     document.getElementById('sbtt').style.top='' + they + 'px';
<     document.getElementById('sbtt').style.zIndex='999';
<     document.getElementById('sbtt').style.display='inline-block';
<     window.scrollTo(thex, they);
<   }
700,719c527,529
<             bbrect=document.getElementById(what).getBoundingClientRect();
<             if (stosofar.indexOf(';' + what + ',') != -1) {
<             if (stosofar.indexOf(';' + what + ',') == 0) {
<                document.getElementById(what).scrollIntoView();
<                windowscrollTo(0, eval(('' + stosofar.split(';' + what + ',')[1].split(';')[0].split(',')[eval(-1 + stosofar.split(';' + what + ',')[1].split(';')[0].split(',').length)]   )));
<             } else if (stosofar.indexOf(';' + what + ',') != -1) {
<                windowscrollTo(0, eval(('' + stosofar.split(';' + what + ',')[1].split(';')[0].split(',')[eval(-1 + stosofar.split(';' + what + ',')[1].split(';')[0].split(',').length)]   )));
<             } else {
<                ggwhat=what;
<                setTimeout(function(){
<                   bbrect=document.getElementById(ggwhat).getBoundingClientRect();
<                   windowscrollTo(0, eval(('' + bbrect.top).split('.')[0]));
<                }, 3000);
<             }            
<             } else {
<             windowscrollTo(0, eval(('' + bbrect.top).split('.')[0]));
<             stosofar+='' + what + ',0,' + eval(('' + bbrect.top).split('.')[0] + ';');
<               //alert('stsofaR=' + stosofar);
<             }
<         },250);                 
---
>             var bbrect=document.getElementById(what).getBoundingClientRect();
>             window.scrollTo(0, eval(('' + bbrect.top).split('.')[0]));
>         },200);                 
777,781c587
<         if (document.getElementById(gwhat.replace('if','sum')).innerHTML.indexOf('<progress ') != -1) {
<         document.getElementById(gwhat.replace('if','sum')).innerHTML+='<span id="' + document.getElementById(gwhat.replace('if','sum')).innerHTML.split('<progress ')[1].split('id="')[1].split('"')[0].replace('_','') + '" title="' + document.getElementById(gwhat.replace('if','sum')).innerHTML.split('<progress ')[1].split('title="')[1].split('"')[0] + '" style=font-size:8px;color:blue;> ... is in play</span>';
<         } else {
<         document.getElementById(gwhat.replace('if','sum')).innerHTML+='<span style=font-size:8px;color:blue;> ... is in play</span>';
<         }
---
>         document.getElementById(gwhat.replace('if','sum')).innerHTML+='<font size=1 color=blue> ... is in play</font>';
799c605
<     var prevdelay=0, detbit='', ijk=0, iijk=0, kji=0, randis=Math.floor(Math.random() * 1987865);
---
>     var prevdelay=0, detbit='', karbit='', ijk=0, iijk=0, kji=0, randis=Math.floor(Math.random() * 1987865);
811,813d616
<        if (window.top) { if (window.top != window.self) {
<        top.document.title=clit(666,top.document.title.replace(top.document.title.split(' ..')[0], 'Playlist playing ...'));
<        } }
869,871d671
<        if (window.top) { if (window.top != window.self) {
<        top.document.title=clit(724,top.document.title.replace(top.document.title.split(' ..')[0], 'Playlist playing ..'));
<        } }
931,940d730
<           stosofar=';';
<       var sto=(stosofar == ';' ? true : false);
<       var dets=[], jdets=0, ihs='';
<         dets=document.getElementsByTagName('details');
<         for (jdets=0; jdets<dets.length; jdets++) {
<           if (dets[jdets].innerHTML.indexOf('</summary>') != -1) {
<               stosofar+=('' + dets[jdets].id + ',0,' + dets[jdets].getBoundingClientRect().top).split('.')[0] + ';';
<               //alert('StsOfar=' + stosofar);
<           }
<         }
1191d980
<     if (backiurl == '') { backiurl=document.getElementById('karit').src; }
1193c982
<     //alert('Backiurl=' + backiurl);
---
>     //alert(backiurl);
1244c1033
<           upd(aconto.getElementById('youtubeid').value, aconto.getElementById('youtube_duration').value, aconto.getElementById('myh1').innerHTML, iois.id.replace('if','det'));
---
>           upd(aconto.getElementById('youtubeid').value, aconto.getElementById('youtube_duration').value, aconto.getElementById('myh1').innerHTML);
1257c1046
<      upd(aconto.getElementById('youtubeid').value, aconto.getElementById('youtube_duration').value, aconto.getElementById('myh1').innerHTML, '');
---
>      upd(aconto.getElementById('youtubeid').value, aconto.getElementById('youtube_duration').value, aconto.getElementById('myh1').innerHTML);
1269,1273d1057
<     lastrelifid=('' + iois.id);
<     lastreltitle='';
<     if (document.getElementById(iois.id.replace('if','sum'))) {
<      lastreltitle=document.getElementById(iois.id.replace('if','sum')).innerText.split(' ...')[0];
<     }
1304c1088
<           upd(aconto.getElementById('youtubeid').value, aconto.getElementById('youtube_duration').value, aconto.getElementById('myh1').innerHTML, iois.id.replace('if','det'));
---
>           upd(aconto.getElementById('youtubeid').value, aconto.getElementById('youtube_duration').value, aconto.getElementById('myh1').innerHTML);
1317,1323d1100
<   setTimeout(function(){
<             bbrect=document.getElementsByTagName('details')[0].getBoundingClientRect();
<             zwhat=document.getElementsByTagName('details')[0].id;
<             if (stosofar.indexOf(';' + zwhat + ',') != -1) {
<                windowscrollTo(0, eval(('' + stosofar.split(';' + zwhat + ',')[1].split(';')[0].split(',')[eval(-1 + stosofar.split(';' + zwhat + ',')[1].split(';')[0].split(',').length)]   )));
<             } 
<   }, 900);
1343,1345d1119
<        if (window.top) { if (window.top != window.self) {
<     top.document.title=clit(1175,top.document.title.replace(' volume:mute',' ').replace(' volume:unmute',' '));
<        } }
1371c1145
<               top.document.title=clit(1202,top.document.title.replace(trest, trest.replace(top.document.title.split('volume:')[1].toLowerCase().replace(/^\ /g,'').replace(/^\ /g,'').replace(/^\ /g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'mute')));
---
>               top.document.title=top.document.title.replace(trest, trest.replace(top.document.title.split('volume:')[1].toLowerCase().replace(/^\ /g,'').replace(/^\ /g,'').replace(/^\ /g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'mute'));
1410c1184
<               top.document.title=clit(1241,top.document.title.replace(trest, trest.replace(top.document.title.split('volume:')[1].toLowerCase().replace(/^\ /g,'').replace(/^\ /g,'').replace(/^\ /g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'unmute')));
---
>               top.document.title=top.document.title.replace(trest, trest.replace(top.document.title.split('volume:')[1].toLowerCase().replace(/^\ /g,'').replace(/^\ /g,'').replace(/^\ /g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'unmute'));
1452,1454d1225
<        if (window.top) { if (window.top != window.self) {
<          top.document.title=clit(1284,top.document.title.replace('ddlist goes here', 'ddlist |' + ipbit + '| goes here'));
<        } }
1555d1325
< <a id=sbtt style=display:none;cursor:pointer;text-decoration:none; href='#myh1' title='Back to top'>&#128314;</a>