waveterm/frontend/app/tab/tabbar.less
Evan Simkowitz 824a8540ff
Add banner for app updates, clean up updater logic (#200)
This improves the app updater so that it doesn't rely on unreliable
system notifications. Now, a banner in the tab bar will display when an
update is available. Clicking this will prompt the user to restart the
app and complete the installation.

This also updates the tab bar to move to the smaller tab size earlier so
we don't need to make the tab bar scrollable as much.


![image](https://github.com/user-attachments/assets/79e24617-d609-4554-bdb2-979f810a9b66)
2024-08-06 11:05:26 -07:00

103 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;
.tabs-wrapper {
transition: var(--tabs-wrapper-transition);
height: 32px;
}
.tab-bar {
position: relative; // Needed for absolute positioning of child tabs
height: 33px;
}
.dev-label {
width: 26x;
height: 100%;
font-size: 26px;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
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-label {
height: 80%;
opacity: 0.7;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
margin: auto 4px;
color: black;
background-color: var(--accent-color);
padding: 0 5px;
border-radius: var(--block-border-radius);
flex: 0 0 fit-content;
}
}