zotero/scss/win/components/_tabbox.scss

73 lines
1.5 KiB
SCSS
Raw Normal View History

tabbox {
--color-form-element-base-background: var(--color-sidepane);
tabs {
position: relative;
z-index: 1;
background: transparent;
spacer:first-of-type {
2024-03-03 09:33:14 +00:00
flex: 1;
}
tab {
appearance: none;
height: 28px;
margin-top: 0;
margin-bottom: -14px;
padding: 0;
// Since the tab with opacity is weird, we just use hard-coded colors
@include light-dark(--tabbox-tab-background, #ededed, #252525);
background: var(--tabbox-tab-background);
border-block: 1px solid var(--fill-quinary);
border-inline: 1px solid var(--tabbox-tab-background);
color-scheme: light dark;
&:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-left: 1px solid var(--fill-quinary);
}
&:last-of-type {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid var(--fill-quinary);
}
@include focus-ring;
.tab-middle {
outline: none !important;
padding: 4px 11px 5px 11px;
}
&[visuallyselected=true] {
tab {
border-radius: 4px;
}
.tab-middle {
@include windows-form-element-base;
padding: 4px 11px 5px 11px;
border-radius: 4px;
}
}
}
}
tabpanels {
appearance: none;
color-scheme: inherit;
background: var(--color-sidepane);
border: 1px solid var(--fill-quinary);
border-radius: 8px;
// 8 (original) + 14 (from tabs)
padding-top: 22px;
2024-03-03 09:33:14 +00:00
tabpanel {
min-width: 500px;
max-width: 100%;
}
}
}