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

create artist

Browse Source
This commit is contained in:
Danny Zou
2024-05-21 22:39:56 -04:00
parent 3ce762ce5b
commit fcc5870824
8 changed files with 190 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
style/addArtist.scss Normal file
View File

@ -0,0 +1,112 @@
@import "theme.scss";
.add-artist-container {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 15rem;
border: 1px solid white;
border-radius: 5px;
padding: 1rem;
padding-top: 0;
z-index: 2;
display: flex;
flex-direction: column;
background-color: #1c1c1c;
.upload-header {
font-size: .7rem;
font-weight: 300;
padding-bottom: 0;
border-bottom: 1px solid white;
font-family: "Roboto", sans-serif;
}
.close-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 50%;
font-size: 1.6rem;
transition: all 0.3s;
border: none;
}
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
}
.close-button:active {
transform: scale(0.8);
}
.create-artist-form {
width:100%;
height: 100%;
position: relative;
.input-bx{
margin-top: 1rem;
width: 300px;
input{
width: 100%;
padding: 10px;
border: 2px solid #7f8fa6;
border-radius: 5px;
outline: none;
font-size: 1rem;
transition: 0.6s;
background-color: transparent;
}
span{
position: absolute;
left: 0;
padding: 10px;
font-size: 1rem;
color: #7f8fa6;
text-transform: uppercase;
pointer-events: none;
transition: 0.6s;
background-color: transparent;
}
input:valid ~ span,
input:focus ~ span{
color: #fff;
transform: translateX(10px) translateY(-7px);
font-size: 0.65rem;
font-weight: 600;
padding: 0 10px;
background: #1c1c1c;
letter-spacing: 0.1rem;
}
input:valid,
input:focus{
color: #fff;
border: 2px solid #fff;
}
}
.upload-button {
position: absolute;
bottom: 5px;
margin-top: 1rem;
padding: 10px;
background-color: #7f8fa6;
color: #fff;
width: 100%;
font-size: 1rem;
font-family: "Roboto", sans-serif;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
&:hover {
background-color: #fff;
color: #7f8fa6;
}
}
}
}

1
style/main.scss
View File

@ -9,6 +9,7 @@
@import 'search.scss';
@import 'personal.scss';
@import 'upload.scss';
@import 'addArtist.scss';
body {
font-family: sans-serif;

43
style/upload.scss
View File

@ -27,9 +27,7 @@
font-size: 1.6rem;
transition: all 0.3s;
border: none;
}
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
@ -48,6 +46,9 @@
padding: .1rem;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
.input-bx{
margin-top: 1rem;
position: relative;
@ -90,42 +91,10 @@
border: 2px solid #fff;
}
}
.release-date {
margin-top: 1rem;
font-size: 1.2rem;
color: #7f8fa6;
font-family: "Roboto", sans-serif;
display: flex;
align-items: center;
.left {
display: flex;
flex-direction: column;
margin-left: 5px;
margin-right: 10px;
}
span {
font-size: .85rem;
}
input {
padding: 8px;
}
}
.file {
margin-top: .5rem;
display: flex;
align-items: center;
span {
font-size: .9rem;
color: #7f8fa6;
font-family: "Roboto", sans-serif;
margin-left: 5px;
margin-right: 10px;
}
input {
padding: 10px;
}
}
.upload-button {
position: absolute;
bottom: 5px;
width: 100%;
margin-top: 1rem;
padding: 10px;
background-color: #7f8fa6;