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 {
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:
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 {
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:
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,
.macos {
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:
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 {
position: absolute;
bottom: calc(90px + var(--theme-spacing-md) + 0.75rem);
left: 0.75rem;
left: var(--theme-spacing-md);
z-index: 100;
background: color-mix(in srgb, var(--theme-colors-background) 90%, transparent);
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;
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 {
@@ -9,8 +23,6 @@
align-items: center;
width: 100%;
height: 100%;
background: var(--theme-colors-background);
border-bottom: 1px solid alpha(var(--theme-colors-border), 0.5);
-webkit-app-region: drag;
}
@@ -95,8 +107,6 @@
justify-content: center;
width: 100%;
height: 100%;
background: var(--theme-colors-background);
border-bottom: 1px solid alpha(var(--theme-colors-border), 0.5);
-webkit-app-region: drag;
}
+15 -13
View File
@@ -205,19 +205,21 @@ export const WindowBar = () => {
}
return (
<div className={styles.windowBar}>
{windowBarStyle === Platform.WINDOWS && (
<WindowsControls
controls={{ handleClose, handleMaximize, handleMinimize }}
title={title}
/>
)}
{windowBarStyle === Platform.MACOS && (
<MacOsControls
controls={{ handleClose, handleMaximize, handleMinimize }}
title={title}
/>
)}
<div className={styles.wrapper}>
<div className={styles.bar}>
{windowBarStyle === Platform.WINDOWS && (
<WindowsControls
controls={{ handleClose, handleMaximize, handleMinimize }}
title={title}
/>
)}
{windowBarStyle === Platform.MACOS && (
<MacOsControls
controls={{ handleClose, handleMaximize, handleMinimize }}
title={title}
/>
)}
</div>
</div>
);
};
@@ -1,5 +1,5 @@
/* stylelint-disable selector-class-pattern */
.fs-player-bar-module-container {
.fs-player-bar-module-bar {
background: rgb(0 0 0 / 40%) !important;
backdrop-filter: blur(2rem);
}
@@ -125,8 +125,8 @@ table {
height: 100vh;
}
:has(.fs-window-bar-module-window-bar) .fs-main-content-module-main-content-container {
height: calc(100vh - 30px);
:has(.fs-window-bar-module-wrapper) .fs-main-content-module-main-content-container {
height: calc(100vh - 30px - var(--theme-spacing-md));
}
.mantine-Tabs-root {