mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-19 04:00:59 -04:00
98 lines
2.2 KiB
CSS
98 lines
2.2 KiB
CSS
|
|
|
|
#main-wrapper {
|
|
width: 500px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* This forces both containers to be the same height */
|
|
gap: 1em;
|
|
opacity: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#vinyl-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.5));
|
|
animation: spin 10s linear infinite;
|
|
}
|
|
|
|
#vinyl-background {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
#album-art-container {
|
|
position: absolute;
|
|
width: 35%;
|
|
height: 35%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
-webkit-mask-image: radial-gradient(circle, transparent 3%, black 3.5%);
|
|
mask-image: radial-gradient(circle, transparent 3%, black 3.5%);
|
|
}
|
|
|
|
#album-art-layer,
|
|
#album-art-transition-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
transition: opacity 0.5s ease;
|
|
display: var(--show-album-art);
|
|
}
|
|
|
|
#album-art-layer {
|
|
z-index: 2;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
#album-art-transition-layer {
|
|
z-index: 1;
|
|
}
|
|
|
|
#progress-ring-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20%;
|
|
overflow: hidden; /* This masks the 'pie slice' */
|
|
z-index: 0;
|
|
}
|
|
|
|
#progress-svg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
/* Rotates the start point to 12 o'clock */
|
|
transform: rotate(-90deg);
|
|
-webkit-mask-image: radial-gradient(circle, transparent 3%, black 3.5%);
|
|
mask-image: radial-gradient(circle, transparent 3%, black 3.5%);
|
|
}
|
|
|
|
#progress-pie-circle {
|
|
fill: transparent;
|
|
stroke: var(--accent-color); /* Falls back to red if var fails */
|
|
stroke-width: 50; /* This thickness makes it a solid pie */
|
|
|
|
/* 157.1 is the exact circumference of a circle with r=25 (2 * PI * 25) */
|
|
stroke-dasharray: 157.1;
|
|
stroke-dashoffset: 157.1; /* Starts empty */
|
|
|
|
/* This creates the smooth, non-stuttering animation */
|
|
transition: all 1s linear;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
} |