antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Improve responsive styles for playerbar

Browse source
This commit is contained in:
jeffvli 2023-06-04 16:02:40 -07:00 • committed by Jeff
parent cf43bf360e
commit f380eccc68
5 changed files with 62 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/renderer/features/player/components/playerbar.tsx
View file

@ -25,20 +25,25 @@ const PlayerbarContainer = styled.div`
`;
const PlayerbarControlsGrid = styled.div`
display: flex;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 1rem;
height: 100%;
@media (max-width: 768px) {
grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 0.5fr);
}
`;
const RightGridItem = styled.div`
align-self: center;
width: calc(100% / 3);
width: 100%;
height: 100%;
overflow: hidden;
`;
const LeftGridItem = styled.div`
width: calc(100% / 3);
width: 100%;
height: 100%;
overflow: hidden;
`;
@ -47,8 +52,9 @@ const CenterGridItem = styled.div`
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
justify-content: center;
width: calc(100% / 3);
width: 100%;
height: 100%;
overflow: hidden;
`;