Last active
September 26, 2024 12:19
-
-
Save gAlleb/8df10a0c40f461909f2a060abf945e1a to your computer and use it in GitHub Desktop.
Christmas Lights for Azuracast Public Page (quick and very dirty)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
hi! Thanks for share this.
I'm trying to use this in a test instance without any luck.
This instance is a fresh new one, so there is not any customization yet.
This should work with new Azuracast versions?
Hi! Probably in newer versions has been a change with layouts.
You can try removing margin-top: -51px; from
.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;
-----
Remove this
margin-top: -51px;
----
}
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;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A lit bit of Xmas for your Azuracast Station public page (very dirty but quick ;) ).
Administration->Custom BrandingcssintoCustom CSS for Public Pagessection– if you need to change wire color and cap color of bulbs — change
backgroundcolor in.lightrope li:beforeand.lightrope li:afterjsintoCustom JS for Public PagessectionSpecial thanks to tobyj from codepen for initial scss styles :)