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.
73 lines
1.8 KiB
73 lines
1.8 KiB
<template>
|
|
<div class="relative">
|
|
<div class="bg-background border-gradient rounded-xl p-4">
|
|
<div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-950/10 dark:border-white/10">
|
|
<svg
|
|
class="absolute inset-0 h-full w-full stroke-gray-950/10 dark:stroke-white/10"
|
|
fill="none"
|
|
>
|
|
<defs>
|
|
<pattern
|
|
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
|
|
x="0"
|
|
y="0"
|
|
width="10"
|
|
height="10"
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
|
|
</pattern>
|
|
</defs>
|
|
<rect
|
|
stroke="none"
|
|
fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
|
|
width="100%"
|
|
height="100%"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.border-gradient:after {
|
|
--angle: 0deg;
|
|
--border-color: rgb(var(--color-gray-300));
|
|
--highlight-color: rgb(var(--color-primary-500));
|
|
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: -1px;
|
|
opacity: 0.5;
|
|
border-radius: 0.8rem;
|
|
z-index: -1;
|
|
background: var(--border-color);
|
|
|
|
@supports (background: paint(houdini)) {
|
|
background: linear-gradient(var(--angle), var(--border-color), var(--border-color), var(--border-color), var(--border-color), var(--highlight-color));
|
|
animation: 10s rotate linear infinite;
|
|
}
|
|
}
|
|
|
|
.dark .border-gradient:after {
|
|
--border-color: rgb(var(--color-gray-700));
|
|
--highlight-color: rgb(var(--color-gray-400));
|
|
}
|
|
|
|
@keyframes rotate {
|
|
to {
|
|
--angle: 360deg;
|
|
}
|
|
}
|
|
|
|
@property --angle {
|
|
syntax: '<angle>';
|
|
initial-value: 0deg;
|
|
inherits: false;
|
|
}
|
|
</style>
|