Added global empty btn styling, adjusted and WIP modal styling

This commit is contained in:
2024-10-16 20:47:29 +02:00
parent f24a498246
commit be3cbf77bf
26 changed files with 89 additions and 75 deletions

View File

@ -1,7 +1,7 @@
<template>
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-gray-300">Create new zone</h3>
<h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
</template>
<template #modalBody>

View File

@ -2,7 +2,7 @@
<Teleport to="body">
<Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
<template #modalHeader>
<h3 class="text-lg text-gray-300">Objects</h3>
<h3 class="text-lg text-white">Objects</h3>
<div class="flex">
<div class="w-full flex gap-1.5 flex-row">
<div>

View File

@ -1,7 +1,7 @@
<template>
<Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-gray-300">Teleport settings</h3>
<h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
</template>
<template #modalBody>

View File

@ -2,7 +2,7 @@
<Teleport to="body">
<Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
<template #modalHeader>
<h3 class="text-lg text-gray-300">Tiles</h3>
<h3 class="text-lg text-white">Tiles</h3>
<div class="flex">
<div class="w-full flex gap-1.5 flex-row">
<div>

View File

@ -4,7 +4,7 @@
<Teleport to="body">
<Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360">
<template #modalHeader>
<h3 class="text-lg text-gray-300">Zones</h3>
<h3 class="text-lg text-white">Zones</h3>
</template>
<template #modalBody>
<div class="my-4 mx-auto">
@ -13,14 +13,14 @@
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
</div>
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
<div class="absolute left-0 top-0 w-full h-px bg-cyan-200" v-if="index === 0"></div>
<div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
<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-red py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
<button class="btn-red w-11 h-11 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>
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
</div>
</div>
</template>

View File

@ -1,7 +1,7 @@
<template>
<Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0 text-gray-300">Zone settings</h3>
<h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
</template>
<template #modalBody>