mirror of
https://github.com/clash-verge-rev/clash-verge-rev.git
synced 2026-04-14 05:51:02 +08:00
bfd1274a8c
- Added WindowControls component for managing window actions (minimize, maximize, close) based on the operating system. - Integrated window decoration toggle functionality to allow users to prefer system titlebar. - Updated layout styles to accommodate new titlebar and window controls. - Refactored layout components to utilize new window management hooks. - Enhanced layout viewer to include a switch for enabling/disabling window decorations. - Improved overall window management by introducing useWindow and useWindowDecorations hooks for better state handling.
161 lines
3.0 KiB
SCSS
161 lines
3.0 KiB
SCSS
.layout {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
.layout-content {
|
|
/* New container for the flex layout */
|
|
display: flex;
|
|
flex: 1; /* Take remaining height */
|
|
overflow: hidden;
|
|
|
|
&__left {
|
|
flex: 1 0 200px;
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0 0 8px;
|
|
flex-direction: column;
|
|
align-self: stretch;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
overflow: hidden;
|
|
border-right: 1px solid var(--divider-color);
|
|
|
|
.the-logo {
|
|
position: relative;
|
|
flex: 1 0 58px;
|
|
display: flex;
|
|
height: 100%;
|
|
padding: 0 20px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
align-self: stretch;
|
|
box-sizing: border-box;
|
|
|
|
img,
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.the-newbtn {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 15px;
|
|
border-radius: 8px;
|
|
padding: 2px 4px;
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
|
|
.the-menu {
|
|
flex: 1 1 80%;
|
|
overflow-y: auto;
|
|
margin-bottom: 0px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.the-traffic {
|
|
flex: 0 0 60px;
|
|
|
|
> div {
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__right {
|
|
position: relative;
|
|
flex: 1 1 100%;
|
|
height: 100%;
|
|
|
|
.the-bar {
|
|
height: 36px;
|
|
display: flex;
|
|
justify-content: end;
|
|
box-sizing: border-box;
|
|
z-index: 2;
|
|
|
|
.the-dragbar {
|
|
margin-top: 5px;
|
|
app-region: drag;
|
|
}
|
|
}
|
|
|
|
.the-content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 1px;
|
|
bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.linux,
|
|
.windows,
|
|
.unknown {
|
|
&.layout {
|
|
.the_titlebar {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
height: 36px;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.layout-content__left .the-logo {
|
|
flex: 1 0 58px;
|
|
margin-top: 10px;
|
|
margin-left: 10px;
|
|
padding-top: 5px;
|
|
padding-left: 10px;
|
|
padding-right: 20px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.layout-content__right .the-content {
|
|
top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.macos {
|
|
&.layout {
|
|
.the_titlebar {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
height: 36px;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
}
|
|
|
|
.layout-content__left {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.layout-content__right .the-content {
|
|
top: 5px;
|
|
}
|
|
|
|
.layout-content__left .the-newbtn {
|
|
right: 9px;
|
|
top: 2px;
|
|
}
|
|
}
|
|
}
|