daniel-c-harvey
37 lines
1.8 KiB
Plaintext
37 lines
1.8 KiB
Plaintext
@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
|
|
|
|
<button class="lmf-fab-btn" type="button" @onclick="OnClick">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="lmf-icon" aria-hidden="true">
|
|
<defs>
|
|
<!-- Vertical gradient anchored to viewBox (userSpaceOnUse), bottom -> top.
|
|
y1=24 (bottom) is the green end; y2=0 (top) is the orange end. -->
|
|
<linearGradient id="lmf-grad-@(IdSuffix)"
|
|
gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="0" y2="0">
|
|
<stop offset="0%" stop-color="#2ECC71" />
|
|
<stop offset="55%" stop-color="#2ECC71" />
|
|
<stop offset="62%" stop-color="#F4C430" />
|
|
<stop offset="82%" stop-color="#F4C430" />
|
|
<stop offset="88%" stop-color="#FF6B35" />
|
|
<stop offset="100%" stop-color="#FF6B35" />
|
|
</linearGradient>
|
|
|
|
<!-- The note silhouette, used to clip the fill rect. -->
|
|
<clipPath id="lmf-clip-@(IdSuffix)">
|
|
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<!-- Always-on dim silhouette: the idle look and the unfilled remainder. -->
|
|
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"
|
|
fill="rgba(255,255,255,0.25)" />
|
|
|
|
<!-- Clipped fill: a full-width rect revealed through the note shape. -->
|
|
<g clip-path="url(#lmf-clip-@(IdSuffix))">
|
|
<rect class="lmf-fill-rect"
|
|
x="0" width="24"
|
|
y="@FillY" height="@FillH"
|
|
fill="url(#lmf-grad-@(IdSuffix))" />
|
|
</g>
|
|
</svg>
|
|
</button>
|