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

Changed global styling so its readable

Browse Source 
Placeholder changes before new design is implemented
This commit is contained in:
Colin Kallemein
2024-10-12 21:32:41 +02:00
parent 4293ec63b6
commit 474de8b14a
19 changed files with 47 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/utilities/ConfirmationModal.vue
View File

@ -40,12 +40,12 @@ const modalOpened = ref(props.modalOpened)
<template>
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
<template #modalHeader>
<div class="text-white">
<div class="text-gray-300">
<slot name="modalHeader"></slot>
</div>
</template>
<template #modalBody>
<div class="text-white h-full">
<div class="text-gray-300 h-full">
<div class="flex h-full flex-col justify-between">
<span class="p-2">
<slot name="modalBody"></slot>

6
src/components/utilities/Modal.vue
View File

@ -1,7 +1,7 @@
<template>
<Teleport to="body">
<div v-if="isModalOpenRef" class="fixed bg-gray-300/80 border-solid border-2 border-cyan-200 z-50 flex flex-col 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">
<div v-if="isModalOpenRef" class="fixed bg-gray border-solid border-2 border-gray-500 z-50 flex flex-col 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-gray-500">
<slot name="modalHeader" />
<div class="flex gap-2.5">
<button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
@ -16,7 +16,7 @@
<slot name="modalBody" />
<img v-if="isResizable && !isFullScreen" 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-12 flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
<div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-gray-500">
<slot name="modalFooter" />
</div>
</div>

2
src/components/utilities/Notifications.vue
View File

@ -1,7 +1,7 @@
<template>
<Modal v-for="notification in gameStore.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
<template #modalHeader v-if="notification.title">
<h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
<h3 class="m-0 font-medium shrink-0 text-gray-300">{{ notification.title }}</h3>
</template>
<template #modalBody v-if="notification.message">
<p class="m-4">{{ notification.message }}</p>