hotfix(jumpbar): jump bar fixed on mobile

This commit is contained in:
trashtemp 2021-12-28 23:40:07 +01:00
parent 17a2ca773b
commit e4159e1c6d
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
2 changed files with 25 additions and 4 deletions

View file

@ -13,16 +13,32 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
z-index: 10;
position: relative;
${(props) =>
props.position === "top" &&
css`
top: 0;
`}
${(props) =>
props.position === "bottom" &&
css`
top: 65px;
${() =>
isTouchscreenDevice &&
css`
top: -90px;
`}
`}
> div {
${(props) =>
props.position === "bottom" &&
css`
top: -26px;
${() =>
isTouchscreenDevice &&
css`
top: -32px;
top: -90px;
`}
`}
@ -37,7 +53,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
user-select: none;
justify-content: space-between;
transition: color ease-in-out 0.08s;
top: 48px;
top: -90px;
${(props) =>
props.accent
@ -53,6 +69,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
${(props) =>
props.position === "top"
? css`
top: 48px;
border-radius: 0 0 var(--border-radius)
var(--border-radius);
`

View file

@ -19,4 +19,8 @@ export default styled.select`
&:focus {
box-shadow: 0 0 0 1.5pt var(--accent);
}
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
`;