You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
3.6 KiB
166 lines
3.6 KiB
<script setup lang="ts"> |
|
interface Props { |
|
padding?: 'sm' | 'md' | 'lg' | 'xl' |
|
variant?: 'default' | 'subtle' | 'prominent' |
|
} |
|
|
|
withDefaults(defineProps<Props>(), { |
|
padding: 'md', |
|
variant: 'default' |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div :class="['bubble-container', `bubble-container--${padding}`, `bubble-container--${variant}`]"> |
|
<slot /> |
|
</div> |
|
</template> |
|
|
|
<style scoped> |
|
.bubble-container { |
|
/* Base structure */ |
|
position: relative; |
|
border-radius: 1.25rem; |
|
backdrop-filter: blur(10px); |
|
-webkit-backdrop-filter: blur(10px); |
|
|
|
/* Light mode base */ |
|
background: radial-gradient( |
|
circle at 30% 30%, |
|
rgba(255, 255, 255, 0.25), |
|
rgba(255, 255, 255, 0.08) |
|
); |
|
border: 1px solid rgba(255, 255, 255, 0.3); |
|
box-shadow: |
|
0 8px 32px rgba(0, 0, 0, 0.1), |
|
inset 0 1px 0 rgba(255, 255, 255, 0.4), |
|
inset 0 -1px 0 rgba(0, 0, 0, 0.05); |
|
} |
|
|
|
/* Dark mode */ |
|
@media (prefers-color-scheme: dark) { |
|
.bubble-container { |
|
background: radial-gradient( |
|
circle at 30% 30%, |
|
rgba(255, 255, 255, 0.12), |
|
rgba(255, 255, 255, 0.03) |
|
); |
|
border: 1px solid rgba(255, 255, 255, 0.15); |
|
box-shadow: |
|
0 8px 32px rgba(0, 0, 0, 0.3), |
|
inset 0 1px 0 rgba(255, 255, 255, 0.15), |
|
inset 0 -1px 0 rgba(0, 0, 0, 0.2); |
|
} |
|
} |
|
|
|
/* Padding variants */ |
|
.bubble-container--sm { |
|
padding: 0.75rem; |
|
} |
|
|
|
.bubble-container--md { |
|
padding: 1.25rem; |
|
} |
|
|
|
.bubble-container--lg { |
|
padding: 2rem; |
|
} |
|
|
|
.bubble-container--xl { |
|
padding: 3rem; |
|
} |
|
|
|
/* Style variants */ |
|
.bubble-container--subtle { |
|
/* Light mode subtle */ |
|
background: radial-gradient( |
|
circle at 30% 30%, |
|
rgba(255, 255, 255, 0.15), |
|
rgba(255, 255, 255, 0.05) |
|
); |
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
box-shadow: |
|
0 4px 16px rgba(0, 0, 0, 0.05), |
|
inset 0 1px 0 rgba(255, 255, 255, 0.25); |
|
} |
|
|
|
@media (prefers-color-scheme: dark) { |
|
.bubble-container--subtle { |
|
background: radial-gradient( |
|
circle at 30% 30%, |
|
rgba(255, 255, 255, 0.08), |
|
rgba(255, 255, 255, 0.02) |
|
); |
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
box-shadow: |
|
0 4px 16px rgba(0, 0, 0, 0.2), |
|
inset 0 1px 0 rgba(255, 255, 255, 0.1); |
|
} |
|
} |
|
|
|
.bubble-container--prominent { |
|
/* Light mode prominent */ |
|
background: radial-gradient( |
|
circle at 30% 30%, |
|
rgba(255, 255, 255, 0.35), |
|
rgba(255, 255, 255, 0.12) |
|
); |
|
border: 1px solid rgba(255, 255, 255, 0.4); |
|
box-shadow: |
|
0 12px 48px rgba(0, 0, 0, 0.15), |
|
inset 0 1px 0 rgba(255, 255, 255, 0.5), |
|
inset 0 -1px 0 rgba(0, 0, 0, 0.08); |
|
} |
|
|
|
@media (prefers-color-scheme: dark) { |
|
.bubble-container--prominent { |
|
background: radial-gradient( |
|
circle at 30% 30%, |
|
rgba(255, 255, 255, 0.18), |
|
rgba(255, 255, 255, 0.05) |
|
); |
|
border: 1px solid rgba(255, 255, 255, 0.25); |
|
box-shadow: |
|
0 12px 48px rgba(0, 0, 0, 0.4), |
|
inset 0 1px 0 rgba(255, 255, 255, 0.2), |
|
inset 0 -1px 0 rgba(0, 0, 0, 0.3); |
|
} |
|
} |
|
|
|
/* Hover effects */ |
|
.bubble-container { |
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
} |
|
|
|
.bubble-container:hover { |
|
transform: translateY(-2px); |
|
box-shadow: |
|
0 12px 40px rgba(0, 0, 0, 0.15), |
|
inset 0 1px 0 rgba(255, 255, 255, 0.5), |
|
inset 0 -1px 0 rgba(0, 0, 0, 0.08); |
|
} |
|
|
|
@media (prefers-color-scheme: dark) { |
|
.bubble-container:hover { |
|
box-shadow: |
|
0 12px 40px rgba(0, 0, 0, 0.4), |
|
inset 0 1px 0 rgba(255, 255, 255, 0.2), |
|
inset 0 -1px 0 rgba(0, 0, 0, 0.25); |
|
} |
|
} |
|
|
|
/* Responsive adjustments */ |
|
@media (max-width: 768px) { |
|
.bubble-container { |
|
border-radius: 1rem; |
|
} |
|
|
|
.bubble-container--lg { |
|
padding: 1.5rem; |
|
} |
|
|
|
.bubble-container--xl { |
|
padding: 2rem; |
|
} |
|
} |
|
</style> |