vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-15 21:16:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

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
src/renderer/features/player/components/playerbar.tsx
+10 -4
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;
`;