[fix](trx-frontend): improve spectrum resize interaction
Make the spectrum resize grip easier to use and style it closer to\nexisting controls.\n\nKeep auto-max behavior by default while allowing manual drag to\nresize beyond viewport fill, enforcing only the minimum height.\n\nCo-authored-by: Codex <codex@openai.com> Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
@@ -2191,24 +2191,28 @@ button:focus-visible, input:focus-visible, select:focus-visible {
|
||||
}
|
||||
#spectrum-size-grip {
|
||||
position: relative;
|
||||
height: 0.9rem;
|
||||
margin-top: 0.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
height: 1.1rem;
|
||||
margin: 0.18rem 0 0.42rem;
|
||||
cursor: ns-resize;
|
||||
touch-action: none;
|
||||
border-radius: 999px;
|
||||
}
|
||||
#spectrum-size-grip::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 3.8rem;
|
||||
height: 0.26rem;
|
||||
width: 4.2rem;
|
||||
height: 0.3rem;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent);
|
||||
background: color-mix(in srgb, var(--btn-bg) 78%, transparent);
|
||||
}
|
||||
#spectrum-size-grip:hover::before {
|
||||
border-color: color-mix(in srgb, var(--accent-yellow) 55%, var(--border-light));
|
||||
background: color-mix(in srgb, var(--accent-yellow) 22%, var(--btn-bg));
|
||||
}
|
||||
#spectrum-freq-axis span {
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
|
||||
Reference in New Issue
Block a user