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

Ohhhhh my... YOU'RE MY HERO!
It worked like a charm!!!
Thanks for this!!!!!

Do you have either some examples to how change the CSS layout of the public pages in general?
The Azucast documentation is not so handy for this specifically.

I want to add the color palette of my web on the players, podcast, etc.

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