62 lines
1.2 KiB
Vue
62 lines
1.2 KiB
Vue
<template>
|
|
<div class="auth-layout h-screen flex items-center justify-center p-4">
|
|
<!-- Subtle gradient orbs for visual interest -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div class="auth-orb auth-orb-1" />
|
|
<div class="auth-orb auth-orb-2" />
|
|
<div class="auth-orb auth-orb-3" />
|
|
</div>
|
|
<div class="relative z-10 w-full max-w-md">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.auth-layout {
|
|
position: relative;
|
|
background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 50%, #ecfeff 100%);
|
|
}
|
|
|
|
.dark .auth-layout {
|
|
background: linear-gradient(180deg, #0a0a0a 0%, #042f2e 50%, #083344 100%);
|
|
}
|
|
|
|
/* Subtle floating orbs */
|
|
.auth-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.auth-orb-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
top: -100px;
|
|
right: -100px;
|
|
background: linear-gradient(135deg, #14b8a6, #22d3ee);
|
|
}
|
|
|
|
.auth-orb-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
bottom: -50px;
|
|
left: -50px;
|
|
background: linear-gradient(135deg, #22d3ee, #14b8a6);
|
|
}
|
|
|
|
.auth-orb-3 {
|
|
width: 200px;
|
|
height: 200px;
|
|
bottom: -50px;
|
|
right: 20%;
|
|
background: linear-gradient(135deg, #a78bfa, #7c3aed);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.dark .auth-orb {
|
|
opacity: 0.2;
|
|
}
|
|
</style>
|