vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-10 04:30:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

inset the playerbar

Browse Source
This commit is contained in:
jeffvli
2026-04-04 13:21:22 -07:00
parent 2fbd3ab02d
commit 231b6f3865
5 changed files with 44 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/player/components/playerbar.module.css
+1 -2
View File
@@ -1,7 +1,6 @@
.container { .container {
width: 100vw; width: 100%;
height: 100%; height: 100%;
border-top: 1px solid alpha(var(--theme-colors-border), 0.5);
} }
.controls-grid { .controls-grid {
src/renderer/layouts/default-layout.module.css
+12 -6
View File
@@ -4,8 +4,10 @@
'window-bar' 'window-bar'
'main-content' 'main-content'
'player'; 'player';
grid-template-rows: 0 calc(100vh - 90px) 90px; grid-template-rows:
grid-template-rows: 0 calc(100dvh - 90px) 90px; 0 calc(100vh - 90px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
grid-template-rows:
0 calc(100dvh - 90px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0; gap: 0;
height: 100%; height: 100%;
@@ -13,11 +15,15 @@
} }
.windows { .windows {
grid-template-rows: 30px calc(100vh - 120px) 90px; grid-template-rows:
grid-template-rows: 30px calc(100dvh - 120px) 90px; 30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
grid-template-rows:
30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
} }
.macos { .macos {
grid-template-rows: 30px calc(100vh - 120px) 90px; grid-template-rows:
grid-template-rows: 30px calc(100dvh - 120px) 90px; 30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
grid-template-rows:
30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
} }
src/renderer/layouts/default-layout/player-bar.module.css
+18 -7
View File
@@ -1,6 +1,21 @@
.container { .wrapper {
z-index: 200; z-index: 200;
box-sizing: border-box;
display: flex;
grid-area: player; grid-area: player;
height: 100%;
padding: 0 var(--theme-spacing-md) var(--theme-spacing-md);
background: var(--theme-colors-background);
}
.bar {
display: flex;
flex: 1;
width: 100%;
min-height: 0;
overflow: hidden;
border-radius: var(--theme-radius-lg);
transition: background 0.5s;
@mixin light { @mixin light {
background: darken(var(--theme-colors-background), 5%); background: darken(var(--theme-colors-background), 5%);
@@ -9,12 +24,8 @@
@mixin dark { @mixin dark {
background: darken(var(--theme-colors-background), 10%); background: darken(var(--theme-colors-background), 10%);
} }
transition: background 0.5s;
} }
.open-drawer { .open-drawer .bar:hover {
&:hover { background: darken(var(--theme-colors-background), 20%);
background: darken(var(--theme-colors-background), 20%);
}
} }
src/renderer/layouts/default-layout/player-bar.tsx
+4 -3
View File
@@ -10,13 +10,14 @@ export const PlayerBar = () => {
return ( return (
<div <div
className={clsx({ className={clsx(styles.wrapper, {
[styles.container]: true,
[styles.openDrawer]: playerbarOpenDrawer, [styles.openDrawer]: playerbarOpenDrawer,
})} })}
id="player-bar" id="player-bar"
> >
<Playerbar /> <div className={styles.bar}>
<Playerbar />
</div>
</div> </div>
); );
}; };
src/renderer/layouts/mobile-layout/mobile-layout.module.css
+9 -5
View File
@@ -5,8 +5,10 @@
'window-bar' 'window-bar'
'main-content' 'main-content'
'player'; 'player';
grid-template-rows: 0 calc(100vh - 90px) 90px; grid-template-rows:
grid-template-rows: 0 calc(100dvh - 90px) 90px; 0 calc(100vh - 90px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
grid-template-rows:
0 calc(100dvh - 90px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0; gap: 0;
width: 100vw; width: 100vw;
@@ -18,13 +20,15 @@
.windows, .windows,
.macos { .macos {
grid-template-rows: 30px calc(100vh - 120px) 90px; grid-template-rows:
grid-template-rows: 30px calc(100dvh - 120px) 90px; 30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
grid-template-rows:
30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md));
} }
.drawer-button { .drawer-button {
position: absolute; position: absolute;
bottom: calc(90px + 0.75rem); bottom: calc(90px + var(--theme-spacing-md) + 0.75rem);
left: 0.75rem; left: 0.75rem;
z-index: 100; z-index: 100;
background: color-mix(in srgb, var(--theme-colors-background) 90%, transparent); background: color-mix(in srgb, var(--theme-colors-background) 90%, transparent);