74 lines
1.8 KiB
SCSS
74 lines
1.8 KiB
SCSS
@layer components {
|
|
.card-gradient {
|
|
background: radial-gradient(
|
|
58.83% 95.12% at 62.37% 97.91%,
|
|
rgba(238, 203, 255, 0.59) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
),
|
|
linear-gradient(
|
|
155deg,
|
|
rgba(50, 107, 255, 0.8) 68.16%,
|
|
rgba(194, 226, 255, 0.8) 94.33%
|
|
);
|
|
|
|
backdrop-filter: blur(7.174633026123047px);
|
|
}
|
|
|
|
.card-link-bg {
|
|
background: linear-gradient(180deg, #fafafa 0%, #ededed 100%);
|
|
box-shadow:
|
|
0px 4px 12px 0px rgba(0, 0, 0, 0.12),
|
|
0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
|
|
0px 1px 1px 0px #fff inset;
|
|
}
|
|
|
|
.card-link-bg-dark {
|
|
background: var(--color-bg-elevated, #27272a);
|
|
box-shadow:
|
|
0px 4px 12px 0px rgba(0, 0, 0, 0.12),
|
|
0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
|
|
0px 1px 1px 0px #4c4c4c inset;
|
|
}
|
|
|
|
.card-wrapper {
|
|
border-radius: 16px;
|
|
background: linear-gradient(180deg, #fafafa 0%, #ededed 100%);
|
|
box-shadow:
|
|
0px 4px 12px 0px rgba(0, 0, 0, 0.12),
|
|
0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
|
|
0px 1px 1px 0px #fff inset;
|
|
}
|
|
|
|
.card-wrapper-dark {
|
|
border-radius: 12px;
|
|
background: var(
|
|
--Linear-dark,
|
|
linear-gradient(
|
|
268deg,
|
|
rgba(117, 117, 117, 0.38) 0%,
|
|
rgba(121, 119, 128, 0.33) 100%
|
|
)
|
|
);
|
|
box-shadow:
|
|
0px 4px 12px 0px rgba(0, 0, 0, 0.12),
|
|
0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
|
|
0px 0.2px 1px 0px #fff inset;
|
|
}
|
|
|
|
.card {
|
|
@apply rounded-xl border bg-gray-50 border-gray-50 dark:border-[#202231] dark:bg-[#111217]/50;
|
|
|
|
&-link {
|
|
display: inline-flex;
|
|
padding: 8px 16px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-radius: 16px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|