67 lines
1.4 KiB
SCSS
67 lines
1.4 KiB
SCSS
|
tabbox {
|
||
|
|
--color-form-element-base-background: var(--color-sidepane);
|
||
|
|
|
||
|
|
tabs {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
background: transparent;
|
||
|
|
|
||
|
|
spacer:first-of-type {
|
||
|
|
-moz-box-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);
|
||
|
|
|
||
|
|
&: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;
|
||
|
|
}
|
||
|
|
}
|