SHA256
101 lines
2.9 KiB
CSS
101 lines
2.9 KiB
CSS
/*
|
|
* Please dont remove this attribution its required by the license of this code.
|
|
* This code is licensed under the CPSL License.
|
|
*
|
|
* Original code by: @chillcog
|
|
* See https://git.chillcog.com/chillcog/azuracast-themes
|
|
* Copyright (c) 2024-2026 ChillCog
|
|
*/
|
|
|
|
:root {
|
|
--backrooms-yellow: #d1c28a;
|
|
--backrooms-dark-yellow: #a3955e;
|
|
--backrooms-shadow: #2b281a;
|
|
--backrooms-fluorescent: #f4eedb;
|
|
--backrooms-alert: #8b0000;
|
|
}
|
|
|
|
body, .public-page {
|
|
background-image: url('https://chillcog.com/gifs/backrooms.gif') !important;
|
|
background-size: cover !important;
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
background-attachment: fixed !important;
|
|
background-color: var(--backrooms-dark-yellow) !important;
|
|
font-family: 'Courier New', Courier, monospace !important;
|
|
color: var(--backrooms-shadow) !important;
|
|
}
|
|
|
|
.card, .player-page .card {
|
|
background-color: rgba(209, 194, 138, 0.9) !important;
|
|
border: 3px solid var(--backrooms-shadow) !important;
|
|
border-radius: 0px !important;
|
|
box-shadow: 10px 10px 0px var(--backrooms-shadow) !important;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, .now-playing-title {
|
|
color: var(--backrooms-shadow) !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.now-playing-artist, .text-muted {
|
|
color: #4a4531 !important;
|
|
}
|
|
|
|
.album-art img, .now-playing-art img {
|
|
border-radius: 0px !important;
|
|
border: 2px solid var(--backrooms-shadow);
|
|
filter: sepia(0.6) contrast(1.2) brightness(0.9);
|
|
}
|
|
|
|
.btn-player, .play-pause-btn {
|
|
background-color: var(--backrooms-shadow) !important;
|
|
color: var(--backrooms-fluorescent) !important;
|
|
border-radius: 0px !important;
|
|
border: 1px solid var(--backrooms-dark-yellow) !important;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.btn-player:hover, .play-pause-btn:hover {
|
|
background-color: var(--backrooms-fluorescent) !important;
|
|
color: var(--backrooms-shadow) !important;
|
|
box-shadow: 0px 0px 8px var(--backrooms-fluorescent);
|
|
}
|
|
|
|
.progress {
|
|
background-color: #544f37 !important;
|
|
border-radius: 0px !important;
|
|
height: 10px !important;
|
|
border: 1px solid var(--backrooms-shadow);
|
|
}
|
|
|
|
.progress-bar {
|
|
background-color: var(--backrooms-fluorescent) !important;
|
|
box-shadow: 0 0 5px var(--backrooms-fluorescent);
|
|
}
|
|
|
|
input[type=range] {
|
|
accent-color: var(--backrooms-shadow) !important;
|
|
}
|
|
|
|
.list-group-item {
|
|
background-color: transparent !important;
|
|
border-bottom: 1px dashed var(--backrooms-shadow) !important;
|
|
color: var(--backrooms-shadow) !important;
|
|
}
|
|
|
|
.now-playing-title::after {
|
|
content: " [LIVE_FEED]";
|
|
font-size: 0.65em;
|
|
color: var(--backrooms-alert);
|
|
vertical-align: super;
|
|
animation: blink 1.5s infinite steps(2);
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
} |