bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bubble matches card color

Browse Source
This commit is contained in:
Andy Smith
2025-05-14 15:44:27 -05:00
parent 15e3802a33
commit 3854d1e27e
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/bubble.css
+7 -3
View File
@@ -1,12 +1,12 @@
@layer components {
.bubble {
--bubble-color: radial-gradient(oklch(var(--lch-blue-medium) / 10%) 50%, oklch(var(--lch-blue-medium) / 50%) 100%);
--bubble-color: var(--card-color, oklch(var(--lch-blue-medium)));
--bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
--bubble-rotate: 0deg;
--bubble-size-default: 4rem;
block-size: var(--bubble-size, var(--bubble-size-default));
color: oklch(var(--lch-blue-darkest));
color: var(--color-ink);
container-type: inline-size;
font-size: 1.75rem;
font-weight: bold;
@@ -16,12 +16,16 @@
inset-block-start: 50%;
&:before {
background: var(--bubble-color);
background: radial-gradient(
color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%,
color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100%
);
border-radius: var(--bubble-shape);
content: "";
inset: 0;
position: absolute;
transform: rotate(var(--bubble-rotate));
z-index: -1;
}
@media (any-hover: hover) {