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