Instantly share code, notes, and snippets.

Embed
What would you like to do?
@import url('https://fonts.googleapis.com/css?family=Gruppo');
$primary-color: white;
* {
font-family: 'Gruppo', serif;
color: white;
}
#custom .inner::before {
position: fixed;
pointer-events: none;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E, #4BC0C8);
background-position-x: 0vw;
}
#gd-beatdown .inner::before {
animation: hues 30s linear infinite;
}
@keyframes hues {
0% { background-position-x: 0vw; }
100% { background-position-x: 100vw; }
}
#custom .inner {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
background: black;
box-shadow: none;
background-blend-mode: normal;
overflow: hidden;
}
#custom .section {
position: absolute;
max-width: unset;
min-width: unset;
max-height: unset;
min-height: unset;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: auto;
height: 40%;
width: 75%;
overflow: hidden;
background: none;
border: none;
box-shadow: none;
mix-blend-mode: exclusion;
}
#gd-beatdown .handle-heading {
display: none;
}
span#gd-track-artwork_url {
width: 170px;
}
span#gd-track-title a, span#gd-track-user a {
text-decoration: none;
text-transform: uppercase;
color: white;
font-weight: 100;
font-size: 1.2em;
}
span#gd-track-title a {
font-weight: 900;
font-size: 1.5em;
}
#custom .eq {
position: fixed;
max-width: unset;
min-width: unset;
max-height: unset;
min-height: unset;
top: -40%;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: auto;
width: 80vw;
height: 50vh;
background: none;
mix-blend-mode: overlay;
z-index: 1;
transform-origin: center bottom;
opacity: 0.5;
}
#gd-beatdown .eq {
animation: rotate 30s linear infinite;
}
@keyframes rotate {
0% { transform: scale(1.5) rotate(360deg); }
50% { transform: scale(2) rotate(180deg); }
100% { transform: scale(1.5) rotate(0deg); }
}
/* Animations */
.gd-slides #custom .section.old,
.gd-slides #custom .section.current {
animation-duration: 3s;
}
@keyframes in {
0% { opacity: 1; transform: scale(1); filter: contrast(0%) brightness(150%) blur(18px); }
100% { opacity: 1; transform: scale(1); filter: contrast(100%) brightness(100%) blur(0px); }
}
@keyframes out {
0% { opacity: 1; filter: contrast(100%) brightness(100%) blur(0px); }
100% { opacity: 1; filter: contrast(0%) brightness(150%) blur(18px); }
}
@keyframes in-reverse {
100% { opacity: 1; transform: scale(1); filter: contrast(0%) brightness(150%) blur(18px); }
0% { opacity: 1; transform: scale(1); filter: contrast(100%) brightness(100%) blur(0px); }
}
@keyframes out-reverse {
100% { opacity: 1; filter: contrast(100%) brightness(100%) blur(0px); }
0% { opacity: 1; filter: contrast(0%) brightness(150%) blur(18px); }
}
#custom .eq .band {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
margin-right: 6px;
}
#custom .eq .band::after {
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
position: absolute;
pointer-events: none;
content: "";
top: 0;
bottom: -100%;
left: 0;
right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment