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

Changed units to be more responsive and removed unnecessary properties

Browse Source
This commit is contained in:
Daniel Miller 2024-12-11 04:59:00 +00:00
parent 71d410bc0a
commit 622b79f79b
1 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
style/signup.scss
View File

@ -21,141 +21,150 @@
transform: translate(-50%, -50%);
background: $auth-containers;
z-index: 1;
border-radius: 8px;
border-radius: 0.5rem;
overflow: hidden;
}
.signup-container .header h1 {
margin-top: 3rem;
font-size: 2.5rem;
color: $accent-color;
}
.signup-container .signup-form {
width: 80%;
}
.signup-form .input-box {
position: relative;
margin-top: 3rem;
}
.signup-form .input-box:first-child {
margin-top: 0.7rem;
}
.signup-form .input-box input {
position: relative;
width: 100%;
max-width: 34vw;
padding: 17px 0px 10px;
padding: 1.0625rem 0 0.625rem;
background: transparent;
outline: none;
border: none;
box-shadow: none;
color: #23242a;
font-size: 1.1em;
color: #fff;
font-size: 1.1rem;
font-family: "Roboto", sans-serif;
font-weight: 400;
letter-spacing: 0px;
text-indent: 10px;
text-indent: 0.625rem;
vertical-align: middle;
z-index: 10;
color: #fff;
}
.signup-form .input-box span {
position: absolute;
left: 0;
padding: 15px 0px 10px;
padding: 0.9375rem 0 0.625rem;
pointer-events: none;
color: black;
font-size: 1.19em;
font-size: 1.19rem;
letter-spacing: 0.5px;
transition: 0.5s;
}
.signup-form .input-box input:valid ~ span,
.signup-form .input-box input:focus ~ span {
color: rgb(94, 93, 93);
font-size: 0.9rem;
transform: translateY(-30px);
transform: translateY(-1.875rem);
font-weight: 400;
}
.signup-form .input-box i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
height: 0.125rem;
background: $auth-inputs;
border-radius: 4px;
overflow: hidden;
border-radius: 0.25rem;
transition: 0.5s;
pointer-events: none;
}
.signup-form .input-box input:valid ~ i,
.signup-form .input-box input:focus ~ i {
height: 2.6rem;
height: 1.625rem;
}
.signup-form .error-msg {
color: $error-color;
margin-top: 1rem;
height: 1rem;
}
.signup-form .loading {
margin-top: 4.5rem;
margin-left: auto;
margin-right: auto;
margin-bottom: calc(1.5rem - 10px);
}
.signup-form input[type="submit"] {
margin-top: 3.5rem;
width: 100%;
height: 45px;
height: 2.8125rem;
border: none;
border-radius: 8px;
border-radius: 0.5rem;
color: white;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
background-color: $accent-color;
}
.signup-form .go-to-login {
color: #8f8f8f;
font-size: 0.9rem;
}
.signup-form .go-to-login a {
cursor: pointer;
color: #8f8f8f;
text-decoration: underline;
}
.signup-form .go-to-login a:hover {
color: black;
transition: all 0.2s;
transition: color 0.2s;
}
.signup-container .return {
position: absolute;
left: 10px;
top: 10px;
left: 0.625rem;
top: 0.625rem;
font-size: 1.8rem;
color: white;
cursor: pointer;
transition: all 0.3s;
border-radius: 8px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.3rem;
transition: background-color 0.3s;
}
.signup-container .return:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.password-visibility {
position: absolute;
font-size: 1.7rem;
top: 28%;
right: 5px;
z-index: 5;
right: 0.3125rem;
cursor: pointer;
border: none;
background-color: transparent;
color: white;
}
.pw-requirements {
font-size: 0.7rem;
}