Improve readability of main stream info when grid hovered

This commit is contained in:
Max Goodhart
2026-01-25 21:52:39 -08:00
parent a48ede7e9c
commit 9a2a7c45e7

View File

@@ -1464,6 +1464,13 @@ const StyledGridPreview = styled.div`
height: 100%; height: 100%;
` `
const StyledGridInfo = styled.div`
text-align: center;
padding: 8px;
border-radius: 16px;
z-index: 1000; /* Keep above grid inputs */
`
const StyledGridPreviewBox = styled.div.attrs(() => ({ const StyledGridPreviewBox = styled.div.attrs(() => ({
borderWidth: 2, borderWidth: 2,
}))` }))`
@@ -1489,10 +1496,11 @@ const StyledGridPreviewBox = styled.div.attrs(() => ({
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
`
const StyledGridInfo = styled.div` ${StyledGridInfo} {
text-align: center; background: ${({ color }) =>
Color(color).lightness(50).hsl().string() || '#333'};
}
` `
const StyledGridLabel = styled.div` const StyledGridLabel = styled.div`
@@ -1543,7 +1551,7 @@ const StyledGridButtons = styled.div`
const StyledGridInput = styled(LazyChangeInput)` const StyledGridInput = styled(LazyChangeInput)`
width: 100%; width: 100%;
height: 100%; height: 100%;
outline: 1px solid black; outline: 1px solid rgba(0, 0, 0, 0.5);
border: none; border: none;
padding: 0; padding: 0;
background: ${({ color, isHighlighted }) => background: ${({ color, isHighlighted }) =>