mirror of
https://github.com/streamwall/streamwall.git
synced 2026-04-03 20:32:08 -04:00
Improve readability of main stream info when grid hovered
This commit is contained in:
@@ -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 }) =>
|
||||||
|
|||||||
Reference in New Issue
Block a user