JonathanMcCaffrey/IGP-Fan-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
Jonathan McCaffrey
2026-06-04 17:12:17 -04:00
parent 9bd7620a3b
commit a92a3205be
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Components/Inputs/CooldownButtonComponent.razor
+12 -5
View File
@@ -9,9 +9,7 @@
</button> </button>
@if (_isCooldown) @if (_isCooldown)
{ {
<div class="cooldown-overlay" <div class="cooldown-overlay" style="--angle: @(_elapsedAngle)deg">
style="mask-image: conic-gradient(transparent 0deg, transparent @(_elapsedAngle)deg, #000 @(_elapsedAngle)deg, #000 360deg);
-webkit-mask-image: conic-gradient(transparent 0deg, transparent @(_elapsedAngle)deg, #000 @(_elapsedAngle)deg, #000 360deg);">
<span class="cooldown-label">@_remainingSeconds</span> <span class="cooldown-label">@_remainingSeconds</span>
</div> </div>
} }
@@ -50,7 +48,6 @@
transform: scale(0.97); transform: scale(0.97);
} }
.cooldown-btn:disabled { .cooldown-btn:disabled {
opacity: 0;
cursor: default; cursor: default;
} }
.cooldown-btn-text { .cooldown-btn-text {
@@ -60,19 +57,29 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 12px; border-radius: 12px;
background: rgba(22, 22, 24, 0.82);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }
.cooldown-overlay::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(22, 22, 24, 0.45);
mask-image: conic-gradient(transparent 0deg, transparent var(--angle), #000 var(--angle), #000 360deg);
-webkit-mask-image: conic-gradient(transparent 0deg, transparent var(--angle), #000 var(--angle), #000 360deg);
}
.cooldown-label { .cooldown-label {
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 900; font-weight: 900;
color: #999; color: #999;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
pointer-events: none; pointer-events: none;
position: relative;
z-index: 1;
} }
</style> </style>