mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
edfe711eda
This PR implements the [Window Controls Overlay API](https://web.dev/articles/window-controls-overlay) to let us hide the menu bar on Windows and Linux and directly embed the window controls in our tab bar. With #239 merged, we no longer need the menu bar on these platforms. The overlaid window controls are transparent so they will take on the background from the app. I've updated the tab bar to flow properly using the API's CSS environment variables. At some point, we may want to update the logic around the symbolColor so that it can ensure a proper contrast between the background and the symbols in the window controls. For now, setting them to white works for all the backgrounds we currently support.  https://github.com/user-attachments/assets/8d19b512-5281-42b9-8abb-ccb9b850061f
110 lines
2.2 KiB
Plaintext
110 lines
2.2 KiB
Plaintext
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
.tab-bar-wrapper {
|
|
--default-indent: 10px;
|
|
--darwin-not-fullscreen-indent: 74px;
|
|
}
|
|
|
|
.darwin:not(.fullscreen) .tab-bar-wrapper {
|
|
.window-drag.left {
|
|
width: var(--darwin-not-fullscreen-indent);
|
|
}
|
|
}
|
|
|
|
.tab-bar-wrapper {
|
|
position: relative;
|
|
user-select: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: env(titlebar-area-width);
|
|
|
|
.tabs-wrapper {
|
|
transition: var(--tabs-wrapper-transition);
|
|
height: 32px;
|
|
}
|
|
|
|
.tab-bar {
|
|
position: relative; // Needed for absolute positioning of child tabs
|
|
height: 33px;
|
|
}
|
|
|
|
.dev-label,
|
|
.app-menu-button {
|
|
height: 100%;
|
|
font-size: 26px;
|
|
user-select: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 2px 2px 0 0;
|
|
}
|
|
|
|
.app-menu-button {
|
|
cursor: pointer;
|
|
color: var(--secondary-text-color);
|
|
|
|
&:hover {
|
|
color: var(--main-text-color);
|
|
}
|
|
}
|
|
|
|
.dev-label {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.add-tab-btn {
|
|
width: 22px;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
user-select: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0.5;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
i {
|
|
overflow: hidden;
|
|
margin-top: 5px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
.window-drag {
|
|
height: 100%;
|
|
width: var(--default-indent);
|
|
flex-shrink: 0;
|
|
|
|
&.right {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
// Customize scrollbar styles
|
|
.os-theme-dark,
|
|
.os-theme-light {
|
|
box-sizing: border-box;
|
|
--os-size: 2px;
|
|
--os-padding-perpendicular: 0px;
|
|
--os-padding-axis: 0px;
|
|
--os-track-border-radius: 2px;
|
|
--os-handle-interactive-area-offset: 0px;
|
|
--os-handle-border-radius: 2px;
|
|
}
|
|
|
|
.update-available-button {
|
|
height: 80%;
|
|
opacity: 0.7;
|
|
margin: auto 4px;
|
|
color: black;
|
|
background-color: var(--accent-color);
|
|
flex: 0 0 fit-content;
|
|
}
|
|
}
|