luke-else/WMGZON
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created login and signup forms

Browse Source
This commit is contained in:
Luke Else
2023-12-31 19:03:29 +00:00
parent 2f63b6e89c
commit 03c7fc6918
9 changed files with 228 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
static/css/loginform.css Normal file
View File

@ -0,0 +1,78 @@
h2 {
font-weight:300;
text-align:center;
}
#login-form-wrap {
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(200px);
width: 35%;
margin: 30px auto;
text-align: center;
padding:20px 0 0 0;
border-radius: 4px;
box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.2);
}
.login-form {
padding:1em 2em;
display: flex;
flex-direction: column;
justify-items: center;
gap: 1em;
}
.login-form input {
width: 100%;
padding: 0 0 0 10px;
margin: 0;
color: var(--fg);
border: 1px solid var(--fg);
box-sizing: border-box;
outline: none;
height: 60px;
line-height: 60px;
border-radius: 4px;
font-style: normal;
font-size: 16px;
appearance: none;
position: relative;
display: inline-block;
background: none;
&:focus {
&:invalid {
color: var(--red);
border-color: var(--red);
}
}
&:valid {
border-color: var(--green);
}
}
.login-form input[type="submit"] {
border: none;
display:block;
background-color: rgba(255, 255, 255, .10);
color: var(--fg);
font-weight: bold;
text-transform:uppercase;
cursor: pointer;
transition: all 0.2s ease;
font-size: 18px;
position: relative;
display: inline-block;
cursor: pointer;
text-align: center;
&:hover {
background-color: rgba(255, 255, 255, .20);
transition: all 0.2s ease;
}
}
#create-account-wrap {
background-color: rgba(255, 255, 255, .15);
color:#dfdfdf;
font-size:14px;
width:100%;
padding:10px 0;
border-radius: 0 0 4px 4px;
}

56
static/css/style.css
View File

@ -39,12 +39,38 @@ nav {
font-size: 120%;
}
form {
nav form {
display: flex;
justify-content: center;
align-items: center;
}
.search-bar {
padding: .25rem;
margin-top: .25rem;
font-size: 1rem;
width: 15rem;
border: none;
transition: width 0.4s ease-in-out;
background-color: var(--fg);
}
@media (min-width:1500px) {
.search-bar:focus {
width: 30rem;
}
}
.search-button {
padding: .25rem .5rem;
margin-top: .25rem;
margin-right: .5rem;
background: #ddd;
font-size: 1rem;
border: none;
background-color: orange;
}
.sticky {
position: -webkit-sticky;
position: sticky;
@ -137,34 +163,6 @@ a:active {
height: 90%;
}
.search-bar {
padding: .25rem;
margin-top: .25rem;
font-size: 1rem;
width: 15rem;
border: none;
transition: width 0.4s ease-in-out;
background-color: var(--fg);
}
@media (min-width:1500px) {
.search-bar:focus {
width: 30rem;
}
}
.search-button {
padding: .25rem .5rem;
margin-top: .25rem;
margin-right: .5rem;
background: #ddd;
font-size: 1rem;
border: none;
background-color: orange;
}
.filter-pane {
padding: .5rem 2rem;
background-color: var(--bg-grad-3);