mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 20:43:04 +00:00
add a new playlist view header
This commit is contained in:
geoffrey45
@@ -1,29 +1,24 @@
|
||||
<template>
|
||||
<div class="p-header rounded">
|
||||
<div class="info rounded">
|
||||
<p class="name">Because I Got High Radio</p>
|
||||
<p class="text">
|
||||
The best music to fade to while doing my thing. Featuring artists like
|
||||
Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
|
||||
</p>
|
||||
<div class="lower">
|
||||
<div class="statistics">
|
||||
<div class="count s-item"><p>45 Tracks</p></div>
|
||||
<div class="duration s-item"><p>3 Hrs 45 Min</p></div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="btns">
|
||||
<div class="play s-item"><p>Play Now</p></div>
|
||||
<div class="options s-item image"></div>
|
||||
</div>
|
||||
<div class="p-header rounded border">
|
||||
<div class="info rounded card-dark">
|
||||
<div>
|
||||
<div class="name">Makaveli Radio</div>
|
||||
<div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="albums">
|
||||
<div class="item third image"></div>
|
||||
<div class="item second image"></div>
|
||||
<div class="item first image"></div>
|
||||
<div class="buttons">
|
||||
<button class="play">
|
||||
<div class="icon"></div>
|
||||
Play
|
||||
</button>
|
||||
<button class="menu">
|
||||
<div class="icon"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-updated">
|
||||
Last updated yesterday |
|
||||
<span class="edit">Edit</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -32,162 +27,85 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
height: 15rem;
|
||||
margin-bottom: 1em;
|
||||
background: rgb(42, 46, 54);
|
||||
}
|
||||
|
||||
.p-header hr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.p-header .info {
|
||||
background-color: rgb(1, 5, 17);
|
||||
padding: 0.5rem;
|
||||
background-image: url("../../assets/images/eggs.jpg");
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-header .info .name {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin: 0.2em 0 0.5em 0;
|
||||
}
|
||||
.last-updated {
|
||||
position: absolute;
|
||||
bottom: $small;
|
||||
right: $small;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.699);
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 0.9rem;
|
||||
border-radius: $smaller;
|
||||
|
||||
.p-header .info .text {
|
||||
margin: 0.5rem 1em 0.5rem 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 4em;
|
||||
}
|
||||
.edit {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.p-header .banner {
|
||||
margin: 0.5rem;
|
||||
background-color: $blue;
|
||||
background: url("../../assets/images/null.webp");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.info {
|
||||
position: absolute;
|
||||
width: 25rem;
|
||||
height: 10rem;
|
||||
bottom: $small;
|
||||
left: $small;
|
||||
padding: $small;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: end;
|
||||
padding-bottom: 3.5rem;
|
||||
|
||||
.p-header .info .statistics {
|
||||
display: flex;
|
||||
}
|
||||
.name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
|
||||
.p-header .info .count {
|
||||
background: url(../../assets/icons/album.svg);
|
||||
}
|
||||
&::before {
|
||||
content: "😎 ";
|
||||
}
|
||||
}
|
||||
|
||||
.p-header .info .duration {
|
||||
background-image: url(../../assets/icons/clock.svg);
|
||||
}
|
||||
.metrics {
|
||||
margin-top: $small;
|
||||
background-color: rgba(47, 55, 129, 0.233);
|
||||
color: rgb(0, 60, 255);
|
||||
padding: $small;
|
||||
width: fit-content;
|
||||
border-radius: $smaller;
|
||||
}
|
||||
|
||||
.p-header .info .s-item {
|
||||
background-size: 1.2rem;
|
||||
background-position: 10% 50%;
|
||||
width: 9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: lighter;
|
||||
margin-right: $small;
|
||||
height: 2rem;
|
||||
border: solid 1px rgba(255, 255, 255, 0.445);
|
||||
border-radius: $small;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.buttons {
|
||||
position: absolute;
|
||||
bottom: $small;
|
||||
left: $small;
|
||||
display: flex;
|
||||
gap: $small;
|
||||
|
||||
.p-header .info .lower p {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
.play {
|
||||
width: 5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0.25rem $small;
|
||||
|
||||
.p-header .info .btns {
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
}
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background-image: url("../../assets/icons/play.svg");
|
||||
background-size: 1.5rem;
|
||||
background-position: center;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.p-header .info .btns .play {
|
||||
width: 8rem;
|
||||
height: 100%;
|
||||
background-color: $green;
|
||||
border: none;
|
||||
background-image: url(../../assets/icons/play.svg);
|
||||
}
|
||||
|
||||
.p-header .info .btns .options {
|
||||
width: 2.5rem;
|
||||
height: 100%;
|
||||
background-color: #0465a7;
|
||||
border-radius: 50%;
|
||||
background-image: url(../../assets/icons/options.svg);
|
||||
background-size: 80%;
|
||||
background-position: center;
|
||||
border: none;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.p-header .info .btns .options:hover {
|
||||
transform: rotate(90deg);
|
||||
transition: all 0.5s ease;
|
||||
background-color: #2da8c7;
|
||||
}
|
||||
|
||||
.p-header .info .albums {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 0.5rem;
|
||||
position: absolute;
|
||||
bottom: -0.5em;
|
||||
right: -1em;
|
||||
}
|
||||
|
||||
.p-header .info .albums .item {
|
||||
height: 5em;
|
||||
width: 5em;
|
||||
background-color: $blue;
|
||||
border-radius: $small;
|
||||
transition: transform 1s;
|
||||
}
|
||||
|
||||
.p-header .info .albums .first {
|
||||
position: absolute;
|
||||
transform: rotate(-30deg);
|
||||
right: 0.5em;
|
||||
bottom: 0em;
|
||||
background-color: $red;
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
}
|
||||
|
||||
.p-header .info .albums .second {
|
||||
position: absolute;
|
||||
transform: rotate(10deg);
|
||||
right: 4em;
|
||||
bottom: -1em !important;
|
||||
background-color: $green;
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-header .info .albums .third {
|
||||
position: absolute;
|
||||
transform: rotate(-10deg);
|
||||
bottom: -1em;
|
||||
right: 9em;
|
||||
background-color: $green;
|
||||
background-image: url("../../assets/images/null.webp");
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.p-header .info .albums .item:hover {
|
||||
transition: transform .5s;
|
||||
transform: scale(1.5);
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
.menu {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-image: url("../../assets/icons/options.svg");
|
||||
background-size: 2rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user