zotero/scss/components/_tabBar.scss

215 lines
3.4 KiB
SCSS

#tab-bar-container {
// These variables can be overridden in platform styles to set platform-specific safe areas
--safe-area-start: 0;
--safe-area-end: 0;
min-height: 30px;
&:not([hidden]) {
// display: flex overrides the hidden attribute
display: flex;
}
&::before {
content: '';
min-width: var(--safe-area-start);
// Add bottom border to safe area space
border-bottom: $tab-border;
}
&::after {
content: '';
min-width: var(--safe-area-end);
// Add bottom border to safe area space
border-bottom: $tab-border;
}
& > div {
flex-grow: 1;
}
}
.tab-bar-inner-container {
display: flex;
.tabs-wrapper {
position: relative;
flex-grow: 1;
}
.scroll-start-arrow, .scroll-end-arrow {
height: 30px;
padding: 0 3px;
align-items: center;
z-index: 1;
color: #bebebe;
display: none;
box-shadow: none;
// Add bottom border to scroll arrows,
// and negate the extra vertical pixel added by the border with a negative margin
border-bottom: $tab-border;
margin-bottom: -1px;
box-sizing: border-box;
.icon {
display: flex;
}
&.active {
color: #505050;
&:hover {
background-color: rgba(0, 0, 0, 0.08);
}
}
}
.scroll-start-arrow {
border-right: 1px solid transparent;
&.active {
border-right: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 1px 0 0 0 rgba(0,0,0,0.05);
}
}
.scroll-end-arrow {
border-left: 1px solid transparent;
&.active {
border-left: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: -1px 0 0 0 rgba(0,0,0,0.05);
}
}
.pinned-tabs {
display: none;
.tab {
max-width: 110px;
}
}
&.scrollable {
.tabs-wrapper > .tabs > :first-child {
display: none;
}
.scroll-start-arrow, .scroll-end-arrow {
display: flex;
}
.pinned-tabs {
display: block;
}
}
}
.tabs {
display: flex;
position: absolute;
overflow: hidden;
left: 0;
right: 0;
&:before {
content: "";
width: 0;
min-width: 0;
border-inline-end: $tab-border;
}
&:after {
content: "";
flex: 1 0 0;
width: 100%;
min-width: 0;
// Add bottom border to the space between the last tab and the spacer in #tab-bar-container::after
border-bottom: $tab-border;
border-inline-start: $tab-border;
}
}
.tab {
box-sizing: border-box;
-moz-appearance: none;
max-width: 200px;
flex: 1 1 200px;
height: 30px;
line-height: 30px;
position: relative;
background: #f9f9f9;
border-top: 2px solid transparent;
color: #000;
text-align: center;
padding: 0 22px;
min-width: 110px;
&:not(:last-child) {
border-inline-end: $tab-border;
}
&.selected {
border-top: 2px solid $tab-background-color-selected;
}
&.dragging {
border-inline-start: $tab-border;
z-index: 1;
}
&.dragging + & {
border-inline-start: $tab-border;
}
.tab-name {
line-height: 30px;
overflow-x: hidden;
text-overflow: ellipsis;
display: -moz-box;
-moz-box-pack: center;
position: relative;
top: -2px;
overflow-y: hidden;
.icon-bg {
margin-inline-end: 7px;
margin-top: -2px;
}
}
.tab-close {
position: absolute;
&:dir(ltr) {
right: 6px;
}
&:dir(rtl) {
left: 6px;
}
top: 6px;
width: 16px;
height: 16px;
text-align: center;
line-height: 16px;
border-radius: 3px;
.icon {
display: flex;
}
&:hover {
background-color: rgba(0, 0, 0, 0.08);
}
&:active {
background-color: rgba(0, 0, 0, 0.16);
}
}
&:first-child .tab-close {
display: none;
}
&:not(.selected) {
border-bottom: $tab-border;
}
}