Andy Smith
36 lines
1.7 KiB
CSS
36 lines
1.7 KiB
CSS
@layer components {
|
|
.golden-effect {
|
|
/* Uncomment below to use the card color for golden effect */
|
|
/* --color-golden: color-mix(in srgb, var(--card-color) 35%, transparent); */
|
|
|
|
background-color: color-mix(in srgb, var(--color-golden) 4%, var(--color-canvas));
|
|
background-image: linear-gradient(60deg,
|
|
color-mix(in srgb, var(--color-golden) 25%, transparent) 0%,
|
|
color-mix(in srgb, var(--color-golden) 10%, transparent) 33%,
|
|
color-mix(in srgb, var(--color-golden) 5%, transparent) 66%,
|
|
color-mix(in srgb, var(--color-golden) 25%, transparent) 100%
|
|
);
|
|
box-shadow:
|
|
0 0 0 1px color-mix(in oklch, var(--color-golden) 100%, transparent),
|
|
0 0 0.2em 0.2em color-mix(in oklch, var(--color-golden) 25%, transparent),
|
|
0 0 1em 0.5em color-mix(in oklch, var(--color-golden) 25%, transparent);
|
|
|
|
@supports(mask: radial-gradient(black)) {
|
|
&:before {
|
|
background: linear-gradient(60deg,
|
|
color-mix(in oklch, var(--color-golden) 50%, transparent) 0%,
|
|
color-mix(in oklch, var(--color-golden) 0%, transparent) 25%,
|
|
color-mix(in oklch, var(--color-golden) 5%, transparent) 50%,
|
|
color-mix(in oklch, var(--color-golden) 50%, transparent) 100%
|
|
);
|
|
content: "";
|
|
inset: 0;
|
|
mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
|
|
radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
}
|
|
}
|