waveterm/frontend/app/tab/tabbar.scss
Evan Simkowitz d8edea9fbc
Oops i actually made the tabs wrong (#1384)
forgot to update .editorconfig to include scss...
2024-12-04 13:49:14 -08:00

126 lines
2.5 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 {
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
display: flex;
flex-direction: row;
height: 33px;
}
.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;
margin: 6px 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);
}
.config-error-button {
height: 80%;
margin: auto 4px;
color: black;
flex: 0 0 fit-content;
}
.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;
}
}