forked from noxious/client
Moved login css back to screen component, added new background, temporarily commented-out the full-screen btn in modal component
This commit is contained in:
parent
76c8cc57ab
commit
7e11a86604
@ -1,105 +0,0 @@
|
||||
@import '@/assets/scss/main';
|
||||
|
||||
#bg-img {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
.content-elements {
|
||||
margin: 80px 0;
|
||||
width: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
.login-form {
|
||||
width: inherit;
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba($white, 0.5);
|
||||
border-radius: 3px;
|
||||
min-width: 400px;
|
||||
margin: 0 auto;
|
||||
|
||||
label {
|
||||
color: $black;
|
||||
background-color: rgba($white, 0.5);
|
||||
padding: 4px;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 4px;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
.button {
|
||||
padding: 10px 0;
|
||||
min-width: 100px;
|
||||
|
||||
span {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
margin-top: 115px;
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
text-shadow:
|
||||
-1px -1px 0 $gray,
|
||||
1px -1px 0 $gray,
|
||||
-1px 1px 0 $gray,
|
||||
1px 1px 0 $gray;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Mobile screens (< 450px)
|
||||
@media screen and (max-width: 450px) {
|
||||
.content-wrapper {
|
||||
.content-elements {
|
||||
.login-form {
|
||||
.form-field {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<div class="login-screen">
|
||||
<div class="content-wrapper">
|
||||
<h1 class="main-title">NEW QUEST</h1>
|
||||
<form @submit.prevent="loginFunc">
|
||||
@ -21,8 +22,8 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
|
||||
<img draggable="false" src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -74,5 +75,119 @@ async function registerFunc() {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/assets/scss/login';
|
||||
@import '@/assets/scss/main';
|
||||
|
||||
.login-screen {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url('/assets/shapes/select-screen-bg-shape.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
background-color: $dark-gray;
|
||||
|
||||
.content-wrapper {
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.content-elements {
|
||||
margin: 80px 0;
|
||||
width: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
.login-form {
|
||||
width: inherit;
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba($white, 0.5);
|
||||
border-radius: 3px;
|
||||
min-width: 400px;
|
||||
margin: 0 auto;
|
||||
|
||||
label {
|
||||
color: $black;
|
||||
background-color: rgba($white, 0.5);
|
||||
padding: 4px;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 4px;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
.button {
|
||||
padding: 10px 0;
|
||||
min-width: 100px;
|
||||
|
||||
span {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
margin-top: 115px;
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
text-shadow:
|
||||
-1px -1px 0 $gray,
|
||||
1px -1px 0 $gray,
|
||||
-1px 1px 0 $gray,
|
||||
1px 1px 0 $gray;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Mobile screens (< 450px)
|
||||
@media screen and (max-width: 450px) {
|
||||
.content-wrapper {
|
||||
.content-elements {
|
||||
.login-form {
|
||||
.form-field {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="modal-header" @mousedown="startDrag">
|
||||
<slot name="modalHeader" />
|
||||
<div class="buttons">
|
||||
<button><img alt="resize" draggable="false" src="/assets/icons/modalFullscreen.svg" /></button>
|
||||
<!-- <button><img alt="resize" draggable="false" src="/assets/icons/modalFullscreen.svg" /></button>-->
|
||||
<button @click="close" v-if="closable"><img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user