imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Added new colors, adjusted login styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-10-08 21:28:16 +02:00
parent 15442764c2
commit e610e866c7
10 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/scss/main.scss
View File

@ -26,14 +26,14 @@ h5,
h6,
button,
a {
@apply font-default text-gray-500 font-medium m-0;
@apply font-default text-gray-200 font-medium m-0;
}
p,
span,
li,
label {
@apply font-default text-gray-500;
@apply font-default text-gray-200;
}
button,
@ -87,7 +87,7 @@ button {
@apply text-center;
&.btn-cyan {
@apply bg-cyan drop-shadow-20 text-white;
@apply bg-cyan drop-shadow-20 text-gray-50;
&.active,
&:hover {
@ -95,12 +95,12 @@ button {
}
}
&.btn-bordeaux {
@apply bg-bordeaux drop-shadow-20;
&.btn-red {
@apply bg-red drop-shadow-20;
&.active,
&:hover {
@apply bg-bordeaux/50;
@apply bg-red/50;
}
}

2
src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
View File

@ -3,7 +3,7 @@
<div class="relative p-2.5 flex flex-col items-center justify-between h-72">
<div class="filler"></div>
<img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
<button class="btn-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
</div>
<div class="m-2.5 p-2.5 block">

4
src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
View File

@ -9,7 +9,7 @@
<div class="w-full flex gap-2 mt-2 pb-4 relative">
<button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
<button class="btn-bordeaux px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
<button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
<div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-cyan-200"></div>
</div>
</div>
@ -19,7 +19,7 @@
<template #header>
<div class="flex justify-between items-center">
{{ action.action }}
<button class="btn-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
</div>
</template>
<template #content>

2
src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
View File

@ -3,7 +3,7 @@
<div class="relative p-2.5 flex flex-col items-center justify-between h-72">
<div class="filler"></div>
<img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
<button class="btn-bordeaux px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
</div>
<div class="m-2.5 p-2.5 block">

2
src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
View File

@ -5,7 +5,7 @@
<label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
<input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
</div>
<button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4">
<button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
<img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
</button>
<button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>

2
src/components/gameMaster/zoneEditor/partials/ZoneList.vue
View File

@ -17,7 +17,7 @@
<div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
<span>{{ zone.name }}</span>
<span class="ml-auto gap-1 flex">
<button class="btn-bordeaux py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
<button class="btn-red py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
</span>
</div>
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>

2
src/screens/Characters.vue
View File

@ -46,7 +46,7 @@
<div class="button-wrapper flex gap-8" v-if="!isLoading">
<button
class="btn-bordeaux py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
class="btn-red py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
@click.stop="gameStore.disconnectSocket()"
>
<img class="h-8 drop-shadow-20 rotate-180" draggable="false" src="/assets/icons/arrow.svg" alt="Logout icon" />

30
src/screens/Login.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="relative">
<div class="bg-gradient-to-r from-gray-50 to-transparent w-1/2 h-dvh absolute right-0 top-0 z-10"></div>
<div class="bg-gradient-to-r from-gray-900 to-transparent w-1/2 h-dvh absolute right-0 top-0 z-10"></div>
<div class="bg-[url('/assets/login/login-bg.png')] w-1/2 h-dvh absolute right-0 top-0 bg-no-repeat bg-cover bg-center"></div>
<div class="bg-gray-50 z-20 w-1/2 h-dvh relative">
<div class="bg-gray-900 z-20 w-1/2 h-dvh relative">
<div class="w-full h-dvh flex items-center justify-center flex-col px-8">
<img src="/assets/login/nq-logo-v1.png" class="mb-10" />
<div class="relative">
@ -10,25 +10,25 @@
<img src="/assets/login/login-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" />
<!-- Login Form -->
<form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative p-10">
<div class="flex flex-col gap-6 p-2 mb-8 relative">
<div class="w-full grid gap-2 mb-9 relative">
<input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
<input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative px-6 py-11">
<div class="flex flex-col gap-5 p-2 mb-8 relative">
<div class="w-full grid gap-3 relative">
<input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
<input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<span v-if="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
</div>
<button class="text-right text-cyan-50 text-base">Forgot password?</button>
<button class="btn-cyan py-2 px-0 w-full text-xl" type="submit">Play now</button>
<button class="text-right text-cyan-300 text-base">Forgot password?</button>
<button class="btn-cyan py-3 px-0 w-full text-base rounded" type="submit">Play now</button>
<!-- Divider shape -->
<div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
<div class="w-0.5 h-full bg-white/30"></div>
<div class="w-36 h-full bg-white/30"></div>
<div class="w-0.5 h-full bg-white/30"></div>
<div class="w-0.5 h-full bg-gray-300"></div>
<div class="w-36 h-full bg-gray-300"></div>
<div class="w-0.5 h-full bg-gray-300"></div>
</div>
</div>
<div class="pt-8">
<p class="m-0 text-center">Don't have an account? <button ref="toggleRegister" class="text-cyan-50 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p>
<p class="m-0 text-center">Don't have an account? <button ref="toggleRegister" class="text-cyan-300 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p>
</div>
</form>
@ -37,8 +37,8 @@
<div class="flex flex-col gap-6 p-2 mb-8 relative">
<div class="w-full grid gap-2 mb-9 relative">
<input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
<input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<span v-if="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
<input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px] bg-[url('/assets/icons/eye.svg')] bg-no-repeat" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
<span v-if="gameStore.loginMessage" class="text-red-200 text-xs absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
</div>
<button class="text-right text-cyan-50 text-base">Forgot password?</button>
<button class="btn-cyan py-2 px-0 w-full text-xl" type="submit">Register</button>