@fefade/vue/dist/assets/Card.css

Reusable Vue UI components powered by the FEFADE core system.

:root{--border-width: 1px}._card_14stu_1{text-align:left;border:var(--border-width) solid var(--ff-border);box-sizing:border-box;isolation:isolate;border-radius:.5rem;margin:0;padding:1rem;transition:all .3s;position:relative;overflow:hidden}._card_14stu_1._contained_14stu_1{color:var(--ff-on-surface);background:color-mix(in srgb,var(--ff-surface) 50%,transparent)}._card_14stu_1._outlined_14stu_1{color:inherit;background:none}._card_14stu_1._isTranslucent_14stu_1{background:color-mix(in srgb,var(--ff-surface) 30%,transparent);-webkit-backdrop-filter:blur(3px);border:1px solid var(--ff-border)}._card_14stu_1._animatedBorder_14stu_1{--primary: var(--ff-on-surface);--secondary: var(--ff-border);border:var(--border-width) solid transparent;overflow:unset}._card_14stu_1._animatedBorder_14stu_1:before{content:" ";inset:calc(var(--border-width) * -1);z-index:-1;border:inherit;border-radius:inherit;background-image:conic-gradient(from var(--angle),var(--secondary) 80%,var(--primary) 88%,var(--primary) 92%,var(--secondary) 100%);background-origin:border-box;animation:3s linear infinite _spin-fallback_14stu_1;position:absolute;-webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@supports (background: conic-gradient(from 0deg,red,blue)) and (color: color(display-p3 1 0 0)){@property --angle{syntax: "<angle>"; inherits: true; initial-value: 0turn;}._card_14stu_1._animatedBorder_14stu_1:before{animation:3s linear infinite _spin-modern_14stu_1}@keyframes _spin-modern_14stu_1{to{--angle: 1turn}}}@keyframes _spin-fallback_14stu_1{0%{background-image:conic-gradient(from 0deg,var(--secondary) 80%,var(--primary) 88%,var(--primary) 92%,var(--secondary) 100%)}25%{background-image:conic-gradient(from 90deg,var(--secondary) 80%,var(--primary) 88%,var(--primary) 92%,var(--secondary) 100%)}50%{background-image:conic-gradient(from 180deg,var(--secondary) 80%,var(--primary) 88%,var(--primary) 92%,var(--secondary) 100%)}75%{background-image:conic-gradient(from 270deg,var(--secondary) 80%,var(--primary) 88%,var(--primary) 92%,var(--secondary) 100%)}to{background-image:conic-gradient(from 360deg,var(--secondary) 80%,var(--primary) 88%,var(--primary) 92%,var(--secondary) 100%)}}@supports not (background: conic-gradient(red,blue)){._card_14stu_1._animatedBorder_14stu_1:before{background:linear-gradient(45deg,var(--secondary),var(--primary),var(--secondary));animation:3s linear infinite _rotate-fallback_14stu_1}@keyframes _rotate-fallback_14stu_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}@supports not (mask-composite: exclude){._card_14stu_1._animatedBorder_14stu_1:before{-webkit-mask-composite:xor;-webkit-mask-composite:source-out;mask-composite:subtract}}@media (hover: hover) and (pointer: fine){._card_14stu_1._animatedBorder_14stu_1._stopOnHover_14stu_1:hover:before{animation-play-state:paused}}