Christmas Lights for Azuracast Public Page (quick and very dirty)

Christmas_Lights_Azuracast.css

.lightrope {
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
     position: absolute;
     z-index: 9999;
     margin: -17px 0 0 0;
     padding: 0;
     pointer-events: none;
     width: 100%;
     height: 65px;
     top:0;
     margin-top: -51px;
}
 .lightrope li {
     position: relative;
     animation-fill-mode: both;
     animation-iteration-count: infinite;
     list-style: none;
     margin: 0;
     padding: 0;
     display: block;
     width: 9px;
     height: 13px;
     border-radius: 50%;
     margin: 19px;
     display: inline-block;
     background: rgba(0, 247, 165, 1);
     box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
     animation-name: flash-1;
     animation-duration: 2s;
}
 .lightrope li:nth-child(2n+1) {
     background: rgba(0, 255, 255, 1);
     box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
     animation-name: flash-2;
     animation-duration: 0.4s;
}
 .lightrope li:nth-child(4n+2) {
     background: rgba(247, 0, 148, 1);
     box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
     animation-name: flash-3;
     animation-duration: 1.1s;
}
 .lightrope li:nth-child(odd) {
     animation-duration: 1.8s;
}
 .lightrope li:nth-child(3n+1) {
     animation-duration: 1.4s;
}
 .lightrope li:before {
     content: "";
     position: absolute;
      
     /*** Change cap color if needed ***/
      
     background: #2e2e2e;
     width: 7px;
     height: 7px;
     border-radius: 3px;
     top: -5px;
     left: 1px;
}
 .lightrope li:after {
     content: "";
     top: -15px;
     left: 3px;
     position: absolute;
     width: 50px;
     height: 18px;
      
     /*** Change wire color if needed ***/
      
     border-bottom: solid #2e2e2e 2px;
     border-radius: 50%;
}
 .lightrope li:last-child:after {
     content: none;
}
 .lightrope li:first-child {
     margin-left: -40px;
}
 @keyframes flash-1 {
     0%, 100% {
         background: rgba(0, 247, 165, 1);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
    }
     50% {
         background: rgba(0, 247, 165, 0.4);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}
 @keyframes flash-2 {
     0%, 100% {
         background: rgba(0, 255, 255, 1);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1);
    }
     50% {
         background: rgba(0, 255, 255, 0.4);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
    }
}
 @keyframes flash-3 {
     0%, 100% {
         background: rgba(247, 0, 148, 1);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
    }
     50% {
         background: rgba(247, 0, 148, 0.4);
         box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}

JS_for_Public_Pages.js

lightrope_div = document.createElement( 'div' ); 
lightrope_div.classList.add("lightrope");
li_item = document.createElement( 'li' ); 
for(var i = 0; i < 50; i++){
  lightrope_div.appendChild(li_item.cloneNode(true));
}
document.body.appendChild(lightrope_div);

Yes I know about the inpection part.

But I don't fully understand all the clases and another things. I'll look for some YT tutorial or something.

Thanks again!!!!

as example

#podcast  .card {
  border-radius: 40px;
  background: red !important;
  padding: 10px;
}
#podcast .card-header {
 background: linear-gradient(153deg, rgb(2, 0, 36) 0%, rgb(121, 9, 42) 35%, rgba(87,0,255,0.8897758932674632) 100%) !important;
  border-radius: 40px;
}

#podcast  .page-link  {
  background-color:green;
}

#podcast  .datatable-main {
    border-radius: 10px;
}

[data-bs-theme="dark"] .table-striped {
  --bs-table-striped-bg: #5b6a97;
}

[data-bs-theme="light"] .table-striped {
  --bs-table-striped-bg: #5b6a97;
}

you're the best!
I'm fully happy with this.

Thanks a lot!!!!!!!!!!!!!!!!!!