lashman/core-cooldown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Fix fullscreen break screen - centering, progress bar, ripple sizing

Browse Source 
- Center break content on fullscreen (was top-left aligned)
- Move fullscreen progress bar to screen bottom (was overlapping buttons)
- Scale ripple circles to match ring size per mode (140/160/200px)
- Increase ripple expansion for more dramatic spread
This commit is contained in:
Your Name
2026-02-07 01:56:10 +02:00
parent 3aeb83f69b
commit 6bba2835bb
1 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/components/BreakScreen.svelte
View File

@@ -168,23 +168,19 @@
{:else} {:else}
<!-- ── In-app break screen: full-screen fill OR modal with backdrop ── --> <!-- ── In-app break screen: full-screen fill OR modal with backdrop ── -->
<div <div
class="relative h-full" class="relative h-full flex items-center justify-center"
class:flex={isModal} style="background: #000;"
class:items-center={isModal}
class:justify-center={isModal}
style={isModal ? `background: #000;` : ""}
> >
<div <div
class="relative flex flex-col" class="relative flex flex-col items-center"
class:h-full={!isModal}
class:break-modal={isModal} class:break-modal={isModal}
> >
<!-- Break ring with breathing pulse + ripples --> <!-- Break ring with breathing pulse + ripples -->
<div class="mb-6 relative" use:scaleIn={{ duration: 0.6, delay: 0.1 }}> <div class="mb-6 relative" use:scaleIn={{ duration: 0.6, delay: 0.1 }}>
<div class="absolute inset-0 flex items-center justify-center pointer-events-none"> <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
<div class="break-ripple ripple-1" style="--ripple-color: {$config.break_color}"></div> <div class="break-ripple ripple-1" style="--ripple-color: {$config.break_color}; --ripple-size: {isModal ? 160 : 200}px"></div>
<div class="break-ripple ripple-2" style="--ripple-color: {$config.break_color}"></div> <div class="break-ripple ripple-2" style="--ripple-color: {$config.break_color}; --ripple-size: {isModal ? 160 : 200}px"></div>
<div class="break-ripple ripple-3" style="--ripple-color: {$config.break_color}"></div> <div class="break-ripple ripple-3" style="--ripple-color: {$config.break_color}; --ripple-size: {isModal ? 160 : 200}px"></div>
</div> </div>
<div class="break-breathe relative"> <div class="break-breathe relative">
@@ -267,7 +263,8 @@
{/if} {/if}
{/if} {/if}
<!-- Bottom progress bar for modal - uses clip-path to respect border radius --> <!-- Bottom progress bar for modal -->
{#if isModal}
<div class="break-modal-progress-container"> <div class="break-modal-progress-container">
<div class="break-modal-progress-track"> <div class="break-modal-progress-track">
<div <div
@@ -276,7 +273,20 @@
></div> ></div>
</div> </div>
</div> </div>
{/if}
</div> </div>
<!-- Fullscreen progress bar - anchored to bottom of screen -->
{#if !isModal}
<div class="absolute bottom-8 left-12 right-12 h-[3px] rounded-full overflow-hidden">
<div class="w-full h-full" style="background: rgba(255,255,255,0.03);">
<div
class="h-full transition-[width] duration-1000 ease-linear"
style="width: {$timer.breakProgress * 100}%; background: {barGradient};"
></div>
</div>
</div>
{/if}
</div> </div>
{/if} {/if}
@@ -393,8 +403,8 @@
/* ── Ripple circles ── */ /* ── Ripple circles ── */
.break-ripple { .break-ripple {
position: absolute; position: absolute;
width: 140px; width: var(--ripple-size, 140px);
height: 140px; height: var(--ripple-size, 140px);
border-radius: 50%; border-radius: 50%;
border: 1.5px solid var(--ripple-color); border: 1.5px solid var(--ripple-color);
opacity: 0; opacity: 0;
@@ -407,10 +417,10 @@
@keyframes ripple-expand { @keyframes ripple-expand {
0% { 0% {
transform: scale(1); transform: scale(1);
opacity: 0.3; opacity: 0.25;
} }
100% { 100% {
transform: scale(2.2); transform: scale(2.5);
opacity: 0; opacity: 0;
} }
} }