inset the windowbar

This commit is contained in:
jeffvli
2026-04-04 13:25:35 -07:00
parent 231b6f3865
commit efe94b3a3b
5 changed files with 53 additions and 29 deletions
+12 -4
View File
@@ -16,14 +16,22 @@
.windows { .windows {
grid-template-rows: grid-template-rows:
30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md)); calc(30px + var(--theme-spacing-md))
calc(100vh - 120px - 2 * var(--theme-spacing-md))
calc(90px + var(--theme-spacing-md));
grid-template-rows: grid-template-rows:
30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md)); calc(30px + var(--theme-spacing-md))
calc(100dvh - 120px - 2 * var(--theme-spacing-md))
calc(90px + var(--theme-spacing-md));
} }
.macos { .macos {
grid-template-rows: grid-template-rows:
30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md)); calc(30px + var(--theme-spacing-md))
calc(100vh - 120px - 2 * var(--theme-spacing-md))
calc(90px + var(--theme-spacing-md));
grid-template-rows: grid-template-rows:
30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md)); calc(30px + var(--theme-spacing-md))
calc(100dvh - 120px - 2 * var(--theme-spacing-md))
calc(90px + var(--theme-spacing-md));
} }
@@ -21,15 +21,19 @@
.windows, .windows,
.macos { .macos {
grid-template-rows: grid-template-rows:
30px calc(100vh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md)); calc(30px + var(--theme-spacing-md))
calc(100vh - 120px - 2 * var(--theme-spacing-md))
calc(90px + var(--theme-spacing-md));
grid-template-rows: grid-template-rows:
30px calc(100dvh - 120px - var(--theme-spacing-md)) calc(90px + var(--theme-spacing-md)); calc(30px + var(--theme-spacing-md))
calc(100dvh - 120px - 2 * var(--theme-spacing-md))
calc(90px + var(--theme-spacing-md));
} }
.drawer-button { .drawer-button {
position: absolute; position: absolute;
bottom: calc(90px + var(--theme-spacing-md) + 0.75rem); bottom: calc(90px + var(--theme-spacing-md) + 0.75rem);
left: 0.75rem; left: var(--theme-spacing-md);
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);
border: 1px solid var(--theme-colors-border); border: 1px solid var(--theme-colors-border);
+16 -6
View File
@@ -1,6 +1,20 @@
.window-bar { .wrapper {
box-sizing: border-box;
display: flex;
grid-area: window-bar; grid-area: window-bar;
height: 30px; height: 100%;
padding: var(--theme-spacing-md) var(--theme-spacing-md) 0;
background: var(--theme-colors-background);
}
.bar {
display: flex;
flex: 1;
width: 100%;
min-height: 0;
overflow: hidden;
background: var(--theme-colors-background);
border-radius: var(--theme-radius-lg);
} }
.windows-container { .windows-container {
@@ -9,8 +23,6 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--theme-colors-background);
border-bottom: 1px solid alpha(var(--theme-colors-border), 0.5);
-webkit-app-region: drag; -webkit-app-region: drag;
} }
@@ -95,8 +107,6 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--theme-colors-background);
border-bottom: 1px solid alpha(var(--theme-colors-border), 0.5);
-webkit-app-region: drag; -webkit-app-region: drag;
} }
+15 -13
View File
@@ -205,19 +205,21 @@ export const WindowBar = () => {
} }
return ( return (
<div className={styles.windowBar}> <div className={styles.wrapper}>
{windowBarStyle === Platform.WINDOWS && ( <div className={styles.bar}>
<WindowsControls {windowBarStyle === Platform.WINDOWS && (
controls={{ handleClose, handleMaximize, handleMinimize }} <WindowsControls
title={title} controls={{ handleClose, handleMaximize, handleMinimize }}
/> title={title}
)} />
{windowBarStyle === Platform.MACOS && ( )}
<MacOsControls {windowBarStyle === Platform.MACOS && (
controls={{ handleClose, handleMaximize, handleMinimize }} <MacOsControls
title={title} controls={{ handleClose, handleMaximize, handleMinimize }}
/> title={title}
)} />
)}
</div>
</div> </div>
); );
}; };
@@ -1,5 +1,5 @@
/* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-class-pattern */
.fs-player-bar-module-container { .fs-player-bar-module-bar {
background: rgb(0 0 0 / 40%) !important; background: rgb(0 0 0 / 40%) !important;
backdrop-filter: blur(2rem); backdrop-filter: blur(2rem);
} }
@@ -125,8 +125,8 @@ table {
height: 100vh; height: 100vh;
} }
:has(.fs-window-bar-module-window-bar) .fs-main-content-module-main-content-container { :has(.fs-window-bar-module-wrapper) .fs-main-content-module-main-content-container {
height: calc(100vh - 30px); height: calc(100vh - 30px - var(--theme-spacing-md));
} }
.mantine-Tabs-root { .mantine-Tabs-root {