add playlist concept
This commit is contained in:
sakrecoer
parent
4df2e1fa37
commit
4f6779e968
3 changed files with 363 additions and 183 deletions
|
|
@ -121,25 +121,6 @@ body {
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .main-header::before {
|
||||
background:
|
||||
/* Darker overlay for dark mode */
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.7) 0%,
|
||||
rgba(0, 0, 0, 0.4) 40%,
|
||||
rgba(0, 0, 0, 0.4) 60%,
|
||||
rgba(0, 0, 0, 0.7) 100%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
33deg,
|
||||
transparent,
|
||||
transparent 50px,
|
||||
var(--accent-yellow) 50px,
|
||||
var(--accent-yellow) 51px
|
||||
);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Decorative '>' character */
|
||||
.main-header::after {
|
||||
|
|
@ -156,6 +137,59 @@ body {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* */
|
||||
/* */
|
||||
|
||||
.playlist-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
/* Dark overlay for readability */
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.5) 0%,
|
||||
rgba(0, 0, 0, 0.25) 40%,
|
||||
rgba(0, 0, 0, 0.25) 60%,
|
||||
rgba(0, 0, 0, 0.5) 100%
|
||||
),
|
||||
/* Cyberpunk pattern */
|
||||
repeating-linear-gradient(
|
||||
33deg,
|
||||
transparent,
|
||||
transparent 50px,
|
||||
var(--accent-yellow) 50px,
|
||||
var(--accent-yellow) 51px
|
||||
);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Decorative '>' character */
|
||||
.playlist-header::after {
|
||||
content: '>';
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
z-index: 1;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 4rem;
|
||||
color: var(--accent-y);
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* */
|
||||
|
||||
|
||||
|
||||
#bannerino {
|
||||
filter: grayscale(50%);
|
||||
position:absolute;
|
||||
|
|
@ -2115,7 +2149,7 @@ button {
|
|||
|
||||
.playlist-card:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
}
|
||||
|
||||
.playlist-image {
|
||||
|
|
@ -2149,7 +2183,7 @@ button {
|
|||
|
||||
.playlist-track-count {
|
||||
display: inline-block;
|
||||
background: var(--accent-yellow);
|
||||
background: var(--accent-grey);
|
||||
color: var(--accent-black);
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
|
|
@ -2308,7 +2342,7 @@ button {
|
|||
|
||||
.playlist-card:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
}
|
||||
|
||||
.playlist-link {
|
||||
|
|
@ -2351,8 +2385,8 @@ button {
|
|||
|
||||
.playlist-track-count {
|
||||
display: inline-block;
|
||||
background: var(--accent-yellow);
|
||||
color: var(--accent-black);
|
||||
background: var(--accent-grey);
|
||||
color: var(--bg-primary);
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -2372,7 +2406,7 @@ button {
|
|||
background: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.playlist-card:hover .playlist-hover-overlay {
|
||||
|
|
@ -2382,22 +2416,22 @@ button {
|
|||
.playlist-view-btn {
|
||||
padding: 0.8rem 2rem;
|
||||
background: var(--accent-yellow);
|
||||
color: var(--accent-black);
|
||||
color: var(--bg-primary);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
border: 2px solid var(--accent-grey);
|
||||
transform: skewX(-33deg);
|
||||
border-radius: 7px;
|
||||
transition: all 0.3s ease;
|
||||
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||
}
|
||||
|
||||
.playlist-view-btn:hover {
|
||||
transform: skewX(-33deg) scale(1.1);
|
||||
background: var(--accent-black);
|
||||
color: var(--accent-yellow);
|
||||
border-color: var(--accent-yellow);
|
||||
background: var(--accent-yellow);
|
||||
color: var(--bg-primary);
|
||||
transition: all .3s ease;
|
||||
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -2458,7 +2492,7 @@ button {
|
|||
|
||||
.playlist-meta span {
|
||||
font-size: 0.85rem;
|
||||
color: var(--accent-grey);
|
||||
color: var(--bg-primary);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
|
@ -2484,7 +2518,7 @@ button {
|
|||
|
||||
.playlist-track-item:hover {
|
||||
transform: skewX(0deg) translate(-2px, -2px);
|
||||
box-shadow: 6px 6px 0 var(--accent-yellow);
|
||||
box-shadow: 6px 6px 0 var(--accent-grey);
|
||||
}
|
||||
|
||||
.track-number {
|
||||
|
|
@ -2553,7 +2587,7 @@ button {
|
|||
}
|
||||
|
||||
.track-player {
|
||||
width: 150px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--accent-grey);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -2582,27 +2616,26 @@ button {
|
|||
}
|
||||
|
||||
.playlist-play-all {
|
||||
background: var(--accent-yellow);
|
||||
color: var(--accent-black);
|
||||
border: 2px solid var(--accent-grey);
|
||||
padding: 1rem 3rem;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--accent-yellow) !important;
|
||||
border: 2px solid var(--accent-yellow);
|
||||
padding: .5rem 1.5rem;
|
||||
font-family: poppins,sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-size: .7rem;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transform: skewX(-33deg);
|
||||
box-shadow: 6px 6px 0 var(--accent-grey);
|
||||
transition: all .3s ease;
|
||||
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||
animation: glow 3s infinite alternate;
|
||||
}
|
||||
|
||||
.playlist-play-all:hover {
|
||||
transform: skewX(-33deg) scale(1.05);
|
||||
background: var(--accent-black);
|
||||
color: var(--accent-yellow);
|
||||
transform: scale(1.05);
|
||||
background: var(--accent-yellow);
|
||||
color: var(--bg-primary) !important;
|
||||
border-color: var(--accent-yellow);
|
||||
box-shadow: 8px 8px 0 var(--accent-yellow);
|
||||
}
|
||||
|
||||
/* Back link */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue