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);

you can try and open your page in a browser with inspect mode. You then can see all the styles and play with them, then copy to to your azuracast. That's usually how it's done.
e.g.

@import url('https://fonts.googleapis.com/css2?family=Workbench:BLED,SCAN@10,-4&display=swap');
.card {
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.3);
  background: repeating-linear-gradient( 0deg, #90eeac30, #10290c33 2px, #10290c4d 2.5px );
  padding: 10px;
  font-family: "Workbench", sans-serif!important;
  color: lightgreen;

}
body.page-minimal:not(.embed) #main {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding:0rem!important;
}
.progress.h-5 {
  height: 10px;
}
.form-range::-webkit-slider-runnable-track {


    background: lightgreen!important;


    
}
.form-range::-moz-range-track {
 
    background: lightgreen!important;
}

@media (max-width: 450px) {
    .card-body.buttons {
        display: none;
    }
}
.card-body.buttons {
    position: absolute !important;
    top: 15px;
    right: 0;
}
.form-range::-webkit-slider-thumb {
   background:lightgreen!important;
  
}
.form-range::-moz-range-thumb {
  background:lightgreen!important;
}
.radio-player-widget .radio-controls .radio-control-select-stream #btn-select-stream {
  font-size: 1.2rem;
  color: lightgreen;
  background: #173b1c8a;
  border-color: lightgreen;
}
.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: lightgreen!important;
}

    .card-body.buttons {
        display: none;
    }



.text-secondary {
   color: lightgreen!important;
}
.radio-player-widget .radio-controls .radio-control-select-stream #btn-select-stream {
  font-size: 1.2rem;
  color: lightgreen;
  background: #173b1c8a;
}
.radio-player-widget .now-playing-details .time-display .time-display-played {
  margin-right:.5rem;
  color: lightgreen !important;
}
.radio-player-widget .now-playing-details .time-display .time-display-progress {
  color: lightgreen !important;

}
.radio-player-widget .now-playing-details .time-display .time-display-total  {
  color: lightgreen !important;
}
.radio-player-widget .radio-controls .radio-control-play-button .icon {
  font-size: 3.25rem;
  color: lightgreen;
}
.radio-player-widget .radio-controls .radio-control-select-stream #btn-select-stream {
  font-size: 1.2rem;
  color: lightgreen;
}
 
body.page-minimal .public-page {
  min-height: calc(100dvh - 5rem);
  display: flex;
  height: 100vh;
  /* background: repeating-linear-gradient( 0deg, #90ee9033, #10290c33 1px, #10290c33 1px, #10290c4d 2.5px ); */
  background: linear-gradient(rgba(24, 29, 25, 0.2) 50%,rgba(36, 92, 24, 0.25) 50%),linear-gradient(180deg,rgba(26, 237, 8, 0.04),rgba(0, 255, 0, 0.11),rgba(0, 0, 255, 0.12));
  background-size: 100% 4px,4px 100%;
  margin-top: calc(100vh - 100vh);
}

Nice!!
Now I understand why I hate frontend :D

Thanks a lot!

Sorry for abusing your kindness...
Do you have some example for the podcast section?

I don’t. Didn’t apply any styles to podcast page. But again you can open your page in a browser with inspect mode. You then can see all the styles and play with them, then copy to to your azuracast. It’s easier than you think and it’s fun;)

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!!!!!!!!!!!!!!!!!!