maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
2 lines (1 loc) • 1.13 kB
CSS
.m-card-spotlight[data-v-62fed5f8]{border-radius:var(--maz-radius);padding:max(var(--maz-border-width), 1px);contain:layout style paint;display:inline-flex;position:relative;overflow:hidden}.m-card-spotlight .inner[data-v-62fed5f8]{border-radius:calc(var(--maz-radius) - max(var(--maz-border-width), 1px));width:100%;height:auto;position:relative;overflow:hidden}.m-card-spotlight .inner[data-v-62fed5f8]:before{content:"";z-index:1;--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background) / var(--maz-tw-bg-opacity,1));width:100%;height:100%;opacity:var(--inner-opacity);position:absolute;top:0;left:0}.m-card-spotlight .content[data-v-62fed5f8]{z-index:2;width:100%;height:100%;position:relative}.m-card-spotlight .blob[data-v-62fed5f8]{z-index:0;--maz-tw-blur:blur(40px);filter:var(--maz-tw-blur) var(--maz-tw-brightness) var(--maz-tw-contrast) var(--maz-tw-grayscale) var(--maz-tw-hue-rotate) var(--maz-tw-invert) var(--maz-tw-saturate) var(--maz-tw-sepia) var(--maz-tw-drop-shadow);will-change:transform;border-radius:9999px;width:208px;height:208px;transition:opacity .15s ease-out;position:absolute;top:0;left:0}