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,9 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content-wrapper">
|
<div class="login-screen">
|
||||||
<h1 class="main-title">NEW QUEST</h1>
|
<div class="content-wrapper">
|
||||||
<form @submit.prevent="loginFunc">
|
<h1 class="main-title">NEW QUEST</h1>
|
||||||
<div class="content-elements">
|
<form @submit.prevent="loginFunc">
|
||||||
<div class="login-form">
|
<div class="content-elements">
|
||||||
|
<div class="login-form">
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
<label for="username">Username</label>
|
<label for="username">Username</label>
|
||||||
<input id="username" v-model="username" type="text" name="username" required autofocus />
|
<input id="username" v-model="username" type="text" name="username" required autofocus />
|
||||||
@ -12,17 +13,17 @@
|
|||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
<input id="password" v-model="password" type="password" name="password" required />
|
<input id="password" v-model="password" type="password" name="password" required />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row-buttons">
|
||||||
|
<button class="button btn-cyan" type="submit"><span>PLAY</span></button>
|
||||||
|
<button class="button btn-cyan" type="button" @click.prevent="registerFunc"><span>REGISTER</span></button>
|
||||||
|
<button class="button btn-cyan"><span>CREDITS</span></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row-buttons">
|
</form>
|
||||||
<button class="button btn-cyan" type="submit"><span>PLAY</span></button>
|
</div>
|
||||||
<button class="button btn-cyan" type="button" @click.prevent="registerFunc"><span>REGISTER</span></button>
|
|
||||||
<button class="button btn-cyan"><span>CREDITS</span></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
<audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -74,5 +75,119 @@ async function registerFunc() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<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>
|
</style>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
<div class="modal-header" @mousedown="startDrag">
|
<div class="modal-header" @mousedown="startDrag">
|
||||||
<slot name="modalHeader" />
|
<slot name="modalHeader" />
|
||||||
<div class="buttons">
|
<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>
|
<button @click="close" v-if="closable"><img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" /></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user