vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +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 {
width: 100vw;
width: 100%;
height: 100%;
border-top: 1px solid alpha(var(--theme-colors-border), 0.5);
}
.controls-grid {
src/renderer/layouts/default-layout.module.css
+12 -6
View File
@@ -4,8 +4,10 @@
'window-bar'
'main-content'
'player';
grid-template-rows: 0 calc(100vh - 90px) 90px;
grid-template-rows: 0 calc(100dvh - 90px) 90px;
grid-template-rows:
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;
gap: 0;
height: 100%;
@@ -13,11 +15,15 @@
}
.windows {
grid-template-rows: 30px calc(100vh - 120px) 90px;
grid-template-rows: 30px calc(100dvh - 120px) 90px;
grid-template-rows:
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 {
grid-template-rows: 30px calc(100vh - 120px) 90px;
grid-template-rows: 30px calc(100dvh - 120px) 90px;
grid-template-rows:
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;
box-sizing: border-box;
display: flex;
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 {
background: darken(var(--theme-colors-background), 5%);
@@ -9,12 +24,8 @@
@mixin dark {
background: darken(var(--theme-colors-background), 10%);
}
transition: background 0.5s;
}
.open-drawer {
&:hover {
background: darken(var(--theme-colors-background), 20%);
}
.open-drawer .bar:hover {
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 (
<div
className={clsx({
[styles.container]: true,
className={clsx(styles.wrapper, {
[styles.openDrawer]: playerbarOpenDrawer,
})}
id="player-bar"
>
<Playerbar />
<div className={styles.bar}>
<Playerbar />
</div>
</div>
);
};
src/renderer/layouts/mobile-layout/mobile-layout.module.css
+9 -5
View File
@@ -5,8 +5,10 @@
'window-bar'
'main-content'
'player';
grid-template-rows: 0 calc(100vh - 90px) 90px;
grid-template-rows: 0 calc(100dvh - 90px) 90px;
grid-template-rows:
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;
gap: 0;
width: 100vw;
@@ -18,13 +20,15 @@
.windows,
.macos {
grid-template-rows: 30px calc(100vh - 120px) 90px;
grid-template-rows: 30px calc(100dvh - 120px) 90px;
grid-template-rows:
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 {
position: absolute;
bottom: calc(90px + 0.75rem);
bottom: calc(90px + var(--theme-spacing-md) + 0.75rem);
left: 0.75rem;
z-index: 100;
background: color-mix(in srgb, var(--theme-colors-background) 90%, transparent);