eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

added a playlist component and a song component

Browse Source
This commit is contained in:
Danny Zou
2024-04-18 19:44:12 -04:00
parent 8d704ac6bd
commit f56e13eaa9
6 changed files with 283 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
style/sidebar.scss
View File

@ -176,20 +176,40 @@
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
.screen-darkener {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.name {
font-size: 1rem;
margin-left: 1rem;
margin-top: 0.5rem;
color: white;
}
.playlist-container {
background-color: red;
width: 10rem;
height: 10rem;
background-color: #1c1c1c;
width: 40rem;
height: 40rem;
position: fixed;
top: 40%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid white;
border-radius: 5px;
padding: 1rem;
padding-top: 0;
z-index: 2;
display: flex;
flex-direction: column;
.close-button {
position: absolute;
@ -212,6 +232,58 @@
.close-button:active {
transform: scale(0.8);
}
h1 {
font-size: 2rem;
font-weight: bolder;
margin-bottom: 0.5rem;
}
.info {
display:flex;
flex-direction: row;
}
.songs {
list-style: none;
padding: 0;
margin: 0;
.song {
display: flex;
align-items: center;
padding: 7px 10px 7px 10px;
border-bottom: 1px solid #ccc; /* Separator line color */
img {
max-width: 40px; /* Adjust maximum width for images */
margin-right: 10px; /* Add spacing between image and text */
border-radius: 5px; /* Add border radius to image */
}
.song-info {
h3 {
margin: 0; /* Remove default margin for heading */
color: #fff; /* Adjust text color for song */
font-size: 1rem;
font-weight: 200;
}
p {
margin: 0; /* Remove default margin for paragraph */
color: #aaa; /* Adjust text color for artist */
font-size: 0.9rem;
}
}
.right {
position: fixed;
right: 25px;
transition: all 0.3s ease;
.duration {
}
}
}
.song:first-child {
border-top: 1px solid #ccc;
}
}
}
}
.playlist:hover {
@ -219,5 +291,6 @@
}
}
}
}