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

Finished Initial Design of Login Page

Browse Source 
modified:   src/app.rs
	modified:   src/lib.rs
	new file:   src/pages.rs
	new file:   src/pages/login.rs
	new file:   src/pages/signup.rs
	new file:   style/login.scss
	modified:   style/main.scss
	new file:   style/signup.scss
	modified:   style/theme.scss
This commit is contained in:
Danny Zou
2024-02-09 17:15:00 -05:00
parent 9f1fece816
commit 598f3b2a18
9 changed files with 209 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
style/login.scss Normal file
View File

@ -0,0 +1,136 @@
@import 'theme.scss';
.login-container {
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 50%;
left: 50%;
width: 27rem;
height: 30rem;
transform: translate(-50%, -50%);
background: purple;
z-index: 1;
border-radius: 8px;
overflow: hidden;
}
.login-container .header h1 {
margin-top: 3rem;
font-size: 2.5rem;
color: #2c1308;
}
.login-container .login-form {
width: 75%;
}
.login-form .input-box:first-child {
margin-top: .5rem;
}
.login-form .input-box {
position: relative;
margin-top: 3rem;
}
.login-form .input-box input {
position: relative;
width: 100%;
max-width: 34vw;
padding: 17px 0px 10px;
background: transparent;
outline: none;
border: none;
box-shadow: none;
color: #23242a;
font-size: 1.1em;
font-family: "Roboto", sans-serif;
font-weight: 400;
letter-spacing: 0px;
text-indent: 10px;
vertical-align: middle;
z-index: 10;
color: #fff;
}
.login-form .input-box span {
position: absolute;
left: 0;
padding: 15px 0px 10px;
pointer-events: none;
color: #907163;
font-size: 1.2em;
letter-spacing: 0.5px;
transition: 0.5s;
}
.login-form .input-box input:valid ~ span,
.login-form .input-box input:focus ~ span {
color: #2c1308;
font-size: 1rem;
transform: translateY(-30px);
font-weight: 400;
}
.login-form .input-box i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #907163;
border-radius: 4px;
overflow: hidden;
transition: 0.5s;
pointer-events: none;
}
.login-form .input-box input:valid ~ i,
.login-form .input-box input:focus ~ i {
height: 2.6rem;
}
.login-form .forgot-pw {
display: inline-flex;
margin-top: 3px;
cursor: pointer;
color: #8f8f8f;
text-decoration: underline;
}
.login-form .forgot-pw:hover {
color: #fff;
transition: all 0.2s;
}
.login-form input[type="submit"] {
margin-top: 2.8rem;
width: 100%;
height: 3rem;
border: none;
border-radius: 8px;
color: rgb(210, 207, 207);
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
background-color: #582b17;
}
.login-form .go-to-signup {
margin-top: 11px;
color: #8f8f8f;
}
.login-form .go-to-signup span {
cursor: pointer;
color: #8f8f8f;
text-decoration: underline;
}
.login-form .go-to-signup span:hover {
color: #fff;
transition: all 0.2s;
}
.login-container .return {
position: absolute;
left: 15px;
top: 15px;
font-size: 1.8rem;
color: white;
cursor: pointer;
width: 50px;
transition: all 0.3s;
border-radius: 8px;
}
.login-container .return:hover {
background-color: rgba(0, 0, 0, 0.4);
}