thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "/play Bloom: enlarge the flower so it fills the tile (it was already centered)"

Browse Source 
This reverts commit 3dc72b1d31.
This commit is contained in:
jay
2026-06-25 20:47:09 -04:00
parent 3dc72b1d31
commit 123602dc52
1 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/play/+page.svelte
+11 -12
View File
@@ -540,18 +540,17 @@
.m-ws { padding: 12px 16px 66px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: center; }
.wc { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }
.wc.hl { background: rgba(255, 255, 255, 0.93); color: #2f7fb0; border-radius: 7px; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12); }
/* flex-center the (enlarged) flower in the space above the title — fills the tile like
the other motifs instead of floating small. padding-bottom clears the foot. */
.m-bloom { display: flex; align-items: center; justify-content: center; padding-bottom: 58px; box-sizing: border-box; }
.bloom-ring { position: relative; width: 168px; height: 168px; }
.m-bloom .petal { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #4f8a58; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); }
.m-bloom .pc { width: 58px; height: 58px; background: #3e7a47; color: #fff; font-size: 25px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.m-bloom .p1 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0, -66px); }
.m-bloom .p2 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(57px, -33px); }
.m-bloom .p3 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(57px, 33px); }
.m-bloom .p4 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0, 66px); }
.m-bloom .p5 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-57px, 33px); }
.m-bloom .p6 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-57px, -33px); }
/* flex-center the flower in the space above the title (padding-bottom clears the foot) */
.m-bloom { display: flex; align-items: center; justify-content: center; padding-bottom: 64px; box-sizing: border-box; }
.bloom-ring { position: relative; width: 150px; height: 150px; }
.m-bloom .petal { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #4f8a58; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); }
.m-bloom .pc { width: 50px; height: 50px; background: #3e7a47; color: #fff; font-size: 22px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.m-bloom .p1 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0, -56px); }
.m-bloom .p2 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(48px, -28px); }
.m-bloom .p3 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(48px, 28px); }
.m-bloom .p4 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(0, 56px); }
.m-bloom .p5 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-48px, 28px); }
.m-bloom .p6 { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-48px, -28px); }
.m-match { padding: 18px 22px 66px; display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; justify-content: center; align-content: center; }
.mm { width: 50px; height: 50px; border-radius: 9px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; }
.mm.flip { background: #fff; }