47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
|
||
|
|
<div class="w-full max-w-2xl max-h-[80vh] flex flex-col bg-[#1b1026] border-4 border-[#4a3b5e] shadow-[0_0_20px_rgba(0,0,0,0.5)] relative animate-in fade-in zoom-in duration-200">
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="flex items-center justify-between p-2 border-b-2 border-[#4a3b5e] bg-[#231533]">
|
||
|
|
<h2 class="text-[#f6b26b] font-bold tracking-[0.2em] ml-2 text-sm md:text-base">{{ title }}</h2>
|
||
|
|
<button @click="$emit('close')" class="p-1 hover:bg-[#d95763] hover:text-white text-[#8f80a0] transition-colors">
|
||
|
|
<X :size="18" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Content -->
|
||
|
|
<div class="flex-grow overflow-y-auto p-4 custom-scrollbar text-[#e0d8f0]">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { X } from 'lucide-vue-next';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
isOpen: boolean;
|
||
|
|
title: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
defineProps<Props>();
|
||
|
|
defineEmits(['close']);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.custom-scrollbar::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
}
|
||
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||
|
|
background: #0f0816;
|
||
|
|
}
|
||
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
|
|
background: #4a3b5e;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #f6b26b;
|
||
|
|
}
|
||
|
|
</style>
|