waveterm/frontend/app/tab/tab.less
Evan Simkowitz 0fbb42863c
Remove left indent for tab-bar for non-Mac targets and when in full screen (#128)
This adds a new global atom to track whether a window is in full screen.
It also updates the behavior of the tab bar so that it will only add an
extra left indent on macOS windows that are not in full screen.
Otherwise, the indent will be much smaller.
2024-07-22 13:33:10 -07:00

85 lines
1.9 KiB
Plaintext

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
.tab {
position: absolute;
width: 130px;
height: calc(100% - 1px);
padding: 6px 3px 0px;
box-sizing: border-box;
font-weight: bold;
color: var(--secondary-text-color);
.tab-inner {
position: relative;
width: 100%;
height: 100%;
white-space: nowrap;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
}
&.animate {
transition:
transform 0.3s ease,
background-color 0.3s ease-in-out;
}
&.active {
.tab-inner {
background: radial-gradient(ellipse 92px 32px at bottom, rgba(118, 255, 53, 0.3) 0%, transparent 100%),
rgba(255, 255, 255, 0.1);
box-shadow:
inset 0 1px 0 0 hsla(0, 0%, 100%, 0.05),
0 0 0 0.5px hsla(0, 0%, 100%, 0.35),
inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}
.name {
color: white;
}
}
.name {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
user-select: none;
z-index: 3;
font-size: 11px;
font-weight: 500;
&.focused {
outline: none;
border: 1px solid rgba(255, 255, 255, 0.179);
padding: 2px 6px;
border-radius: 2px;
}
}
.close {
visibility: hidden;
position: absolute;
top: 50%;
right: 0px;
transform: translate3d(0, -50%, 0);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.5;
z-index: 3;
&:hover {
opacity: 1;
}
}
&.active:hover .close {
visibility: visible;
}
}