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

Bubble CSS

Browse Source
This commit is contained in:
Andy Smith
2025-05-01 11:19:52 +02:00
parent 6c7de54137
commit 73c8a25808
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/cards.css
+12 -7
View File
@@ -269,20 +269,25 @@
}
.card__bubble {
--size: 4cqi;
--size: 5cqi;
border: 1.5px solid currentColor;
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;
block-size: var(--size);
border-radius: 50%;
color: var(--color-negative);
border-radius: 42% 72% 68% 43% / 53% 73% 45% 67%;
padding: 0.5cqi;
/* color: var(--color-negative); */
container-type: inline-size;
font-size: 1.75rem;
font-weight: bold;
inset: 50% auto auto -0.5ch;
inline-size: var(--size);
padding: calc(var(--size) * 0.05);
inset: 50% auto auto -0.5ch;
position: absolute;
transform: rotate(-10deg);
translate: -100% -50%;
span {