diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index ae84f94..745079c 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -59,7 +59,7 @@ input {
}
.input-cyan {
- @apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white bg-opacity-80 rounded;
+ @apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white/80 rounded;
&:focus,
&:focus-visible {
@apply outline-2 outline-cyan;
@@ -70,7 +70,7 @@ button {
@apply text-center;
&.btn-cyan {
- @apply bg-cyan bg-opacity-50 border border-solid border-white border-opacity-25 rounded drop-shadow-20;
+ @apply bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20;
&.active,
&:hover {
@@ -79,7 +79,7 @@ button {
}
&.btn-bordeaux {
- @apply bg-bordeaux bg-opacity-50 border border-solid border-white border-opacity-25 rounded drop-shadow-20;
+ @apply bg-bordeaux/50 border border-solid border-white/25 rounded drop-shadow-20;
&.active,
&:hover {
diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index 14b7a42..3845a18 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -1,5 +1,5 @@
<template>
<div class="chat-wrapper w-full h-full flex justify-start items-center">
- <input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white bg-opacity-85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
+ <input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white/85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
</div>
</template>
diff --git a/src/components/gui/Hud.vue b/src/components/gui/Hud.vue
index d79c141..8c50f63 100644
--- a/src/components/gui/Hud.vue
+++ b/src/components/gui/Hud.vue
@@ -1,6 +1,6 @@
<template>
<div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
- <div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
+ <div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] left-0 z-20">
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%]" draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud-bg absolute top-0 left-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
@@ -24,7 +24,7 @@
<!-- TODO: Replace socket.character with other (selected) player's -->
<div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
- <div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
+ <div class="absolute w-[54px] h-[54px] bg-white/80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]" draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud-bg absolute top-0 right-[30px] w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index 81d8a3a..2945a86 100644
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@@ -5,7 +5,7 @@
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p>
<div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div>
- <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+ <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
</a>
</li>
@@ -14,7 +14,7 @@
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">World</p>
<div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div>
- <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+ <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
</a>
</li>
@@ -23,7 +23,7 @@
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Users</p>
<div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div>
- <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+ <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
</a>
</li>
@@ -32,7 +32,7 @@
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Inventory</p>
<div class="group-hover:block absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
</div>
- <a class="group-hover:bg-gray group-hover:bg-opacity-70 group-hover:cursor-pointer p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
+ <a class="group-hover:bg-gray/70 group-hover:cursor-pointer p-2 bg-gray-300/70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
<img class="group-hover:drop-shadow-default w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
</a>
</li>
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index a8cbc68..4912cc2 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,6 +1,6 @@
<template>
<Teleport to="body">
- <div v-if="isModalOpenRef" class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg" :style="modalStyle">
+ <div v-if="isModalOpenRef" class="fixed bg-gray-300/80 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg" :style="modalStyle">
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
<slot name="modalHeader" />
<div class="flex gap-2.5">
@@ -9,9 +9,9 @@
</button>
</div>
</div>
- <div class="overflow-auto flex-grow">
+ <div class="overflow-auto grow">
<slot name="modalBody" />
- <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]" @mousedown="startResize" />
+ <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
</div>
<div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
<slot name="modalFooter" />
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index e4ec3a8..737ea8d 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -2,11 +2,11 @@
<div class="flex h-full w-full relative">
<div class="w-[15%] flex flex-col relative">
<!-- Asset Categories -->
- <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+ <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
<span>Tiles</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
- <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+ <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<span>Objects</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
@@ -27,7 +27,7 @@
<ObjectList v-if="selectedCategory === 'objects'" />
</div>
- <button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan bg-opacity-50 p-0 hover:bg-opacity-80" v-show="hasScrolled" @click="toTop">
+ <button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
<img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button>
<div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index be331f1..3d15820 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -1,13 +1,13 @@
<template>
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
- <label for="upload-asset" class="bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+ <label for="upload-asset" class="bg-cyan/50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload object(s)
</label>
<input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
- <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
+ <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
<div class="flex items-center gap-2.5">
<div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 2de7bc8..1e35dc8 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -1,6 +1,6 @@
<template>
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
- <label for="upload-asset" class="bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+ <label for="upload-asset" class="bg-cyan/50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload tile(s)
</label>
@@ -8,7 +8,7 @@
<div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
</div>
<div>
- <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap w-full" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
+ <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap w-full" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
<div class="flex items-center gap-2.5">
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
<span class="">{{ tile }}</span>
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index e694806..e967bc8 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -1,6 +1,6 @@
<template>
<div class="flex justify-center">
- <div class="toolbar fixed top-0 left-0 right-0 flex bg-gray-300 bg-opacity-80 solid border-solid border-b-2 border-b-cyan border-t-0 border-r-0 border-l-0 text-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
+ <div class="toolbar fixed top-0 left-0 right-0 flex bg-gray-300/80 solid border-solid border-b-2 border-b-cyan border-t-0 border-r-0 border-l-0 text-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
<div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
@@ -15,20 +15,20 @@
{{ zoneEditorStore.drawMode }}
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div>
- <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
- <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
+ <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
+ <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('tile')">
Tile
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
- <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('object')">
+ <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('object')">
Object
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
- <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('teleport')">
+ <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
Teleport
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
- <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('blocking tile')">Blocking tile</span>
+ <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div>
</div>
</button>
@@ -42,20 +42,20 @@
{{ zoneEditorStore.drawMode }}
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
</div>
- <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300 bg-opacity-80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
- <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('tile')">
+ <div class="flex flex-col absolute top-[100%] mt-5 left-[50%] translate-x-[-50%] bg-gray-300/80 rounded min-w-[100px] border border-cyan border-solid text-left" v-show="selectEraserOpen">
+ <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('tile')">
Tile
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
- <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('object')">
+ <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('object')">
Object
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
- <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('teleport')">
+ <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
Teleport
<div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
</span>
- <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('blocking tile')">Blocking tile</span>
+ <span class="py-[8px] px-[10px] relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
</div>
</div>
</button>
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 6ca095a..c6d3898 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -19,7 +19,7 @@
<div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-[65%] h-[3px] bg-white rounded-[3px] left-1/2 bottom-[-15px] translate-x-[-50%] transition-all ease-in-out duration-300"></div>
</div>
- <div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50 bg-opacity-50 bg-no-repeat shadow-character" v-if="characters.length < 4">
+ <div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
<button class="h-full w-full py-[40px] flex flex-col justify-between" @click="isModalOpen = true">
<div class="filler"></div>
<img class="w-[100px] h-[100px] m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
@@ -33,7 +33,7 @@
<div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
<button
- class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
+ class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
:disabled="!selected_character"
@click="select_character()"
>
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index 1a994d4..f3799a6 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -7,12 +7,12 @@
<form @submit.prevent="loginFunc">
<div class="my-[80px] mx-0 w-full flex flex-col gap-[24px]">
<div class="w-full grid gap-[15px]">
- <div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
- <label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
+ <div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
+ <label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
<input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
</div>
- <div class="flex flex-col bg-white bg-opacity-50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
- <label class="text-black bg-white bg-opacity-50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
+ <div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
+ <label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
<input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
</div>
</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 334344e..c7cc2f9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
- content: [],
- purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+ content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
fontFamily: {
'titles': ['Poppins', 'serif'],