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

Variable bubble shapes

Browse Source
This commit is contained in:
Andy Smith
2025-05-01 11:35:50 +02:00
parent 73c8a25808
commit e3ed381621
1 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/cards.css
+23 -9
View File
@@ -174,7 +174,7 @@
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
color: var(--btn-color);
font-weight: 700;
}
.card__move-button {
@@ -269,19 +269,30 @@
}
.card__bubble {
--bubble-shape: 42% 72% 68% 43% / 53% 73% 45% 67%;
--size: 5cqi;
background:
/* Iridescent color swirl */
radial-gradient(circle at 60% 40%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.0) 40%),
radial-gradient(circle at 70% 70%, rgba(255,182,193,0.5) 0%, rgba(173,216,230,0.5) 40%, rgba(144,238,144,0.2) 60%, rgba(255,255,224,0.2) 80%, rgba(255,255,255,0.0) 100%),
radial-gradient(circle at 30% 70%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.0) 50%),
radial-gradient(circle at 50% 50%, rgba(176,224,230,0.4) 0%, rgba(255,182,193,0.2) 60%, rgba(255,255,255,0.0) 100%);
box-shadow: 0 0 4px 2px rgba(100,150,255,0.1) inset;
radial-gradient(circle at 60% 40%,
oklch(var(--lch-ink-inverted)/80%) 0%,
oklch(var(--lch-ink-inverted)/0%) 40%),
radial-gradient(circle at 70% 70%,
oklch(var(--lch-red-medium)/40%) 0%,
oklch(var(--lch-purple-medium)/30%) 40%,
oklch(var(--lch-green-medium)/10%) 60%,
oklch(var(--lch-yellow-medium)/10%) 80%,
oklch(var(--lch-ink-inverted)/0%) 100%),
radial-gradient(circle at 30% 70%,
oklch(var(--lch-ink-inverted)/30%) 0%,
oklch(var(--lch-ink-inverted)/0%) 50%),
radial-gradient(circle at 50% 50%,
oklch(var(--lch-blue-medium)/50%) 0%,
oklch(var(--lch-pink-medium)/10%) 60%,
oklch(var(--lch-ink-inverted)/0%) 100%);
box-shadow: 0 0 4px 2px oklch(var(--lch-blue-medium)/0.2) inset;
block-size: var(--size);
border-radius: 42% 72% 68% 43% / 53% 73% 45% 67%;
border-radius: var(--bubble-shape);
padding: 0.5cqi;
/* color: var(--color-negative); */
container-type: inline-size;
font-size: 1.75rem;
font-weight: bold;
@@ -305,6 +316,9 @@
letter-spacing: 0.125ch;
text-transform: uppercase;
}
.card:nth-child(2n+1) & { --bubble-shape: 70% 72% 39% 80% / 74% 73% 64% 51%; }
.card:nth-child(3n+1) & { --bubble-shape: 45% 72% 65% 50% / 41% 73% 44% 72%; }
}
.card__bubble--today {