mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 12:30:12 +02:00
inset the windowbar
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user