waveterm/frontend/app/tab/tabbar.scss
Evan Simkowitz a9eeb55021
Fix inconsistent tab sizing between views (#1502)
The windowdrag right spacer was acting erratic. It's also not necessary,
since we can just use margins to let the banner buttons fill empty space
so they float to the right side of the tab bar. Without it, though, I
had to add more padding for the add tab button so it has more room.
2024-12-11 18:25:36 -08:00

123 lines
2.4 KiB
SCSS

// 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);
}
}
.config-error-message {
max-width: 500px;
h3 {
margin-bottom: 10px;
}
margin-bottom: 20px;
}
.tab-bar-wrapper {
padding-top: 6px;
position: relative;
user-select: none;
display: flex;
flex-direction: row;
width: 100vw;
-webkit-app-region: drag;
button {
-webkit-app-region: no-drag;
}
.tabs-wrapper {
transition: var(--tabs-wrapper-transition);
height: 26px;
}
.tab-bar {
position: relative; // Needed for absolute positioning of child tabs
display: flex;
flex-direction: row;
height: 27px;
-webkit-app-region: no-drag;
}
.pinned-tab-spacer {
display: block;
height: 100%;
margin: 2px;
border: 1px solid var(--border-color);
}
.dev-label,
.app-menu-button {
font-size: 26px;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px 0 0;
}
.app-menu-button {
cursor: pointer;
color: var(--secondary-text-color);
&:hover {
color: var(--main-text-color);
}
}
.dev-label {
color: var(--accent-color);
}
.tab-bar-right {
display: flex;
flex-direction: row;
gap: 6px;
&:not(:empty) {
margin-left: auto;
margin-right: 6px;
}
}
.config-error-button {
color: black;
padding: 0 6px;
flex: 0 0 fit-content;
}
.add-tab {
padding: 0 10px;
}
.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;
}
}