noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated packages, updated websocket to socket.io, moved login styling to its own scss file

Browse Source
This commit is contained in:
Dennis Postma
2024-05-03 01:25:47 +02:00
parent 79e1525345
commit 1631f1b9ca
8 changed files with 231 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/assets/login.scss Normal file
View File

@ -0,0 +1,102 @@
#bg-img {
height: 100vh;
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.content-wrapper {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
.login-form {
position: absolute;
bottom: 9rem;
width: 100%;
form {
display: grid;
gap: 1.5rem;
width: inherit;
.form-field {
display: flex;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 3px;
width: 30%;
margin: 0 auto;
label {
color: #000;
background-color: rgba(255, 255, 255, 0.5);
padding: 0.25rem 0.5rem;
}
input {
background-color: transparent;
border: none;
padding: 0.5rem 0.25rem;
font-size: 16px;
}
}
}
}
.row-buttons {
display: flex;
gap: 0.5rem;
position: absolute;
bottom: 5rem;
.button {
padding: 1.2rem 0;
min-width: 6rem;
text-align: center;
position: relative;
font-size: 12px;
&.button-1 {
background-image: url('/assets/Button_1.png');
}
&.button-2 {
background-image: url('/assets/Button_2.png');
}
&.button-3 {
background-image: url('/assets/Button_3.png');
}
&.button-4 {
background-image: url('/assets/Button_4.png');
}
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
color:white;
&:hover {
filter: brightness(60%);
}
}
}
}
.main-title {
position: absolute;
text-align: center;
top: 40%;
font-size: 3rem;
color: #FFF;
text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
}