2024-03-02 07:51:55 +00:00
|
|
|
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;
|
2024-03-02 07:51:55 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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);
|
2024-05-07 19:25:20 +00:00
|
|
|
color-scheme: light dark;
|
2024-03-02 07:51:55 +00:00
|
|
|
|
|
|
|
&:first-of-type {
|
2024-07-09 08:02:52 +00:00
|
|
|
border-start-start-radius: 4px;
|
|
|
|
border-end-start-radius: 4px;
|
|
|
|
border-inline-start: 1px solid var(--fill-quinary);
|
2024-03-02 07:51:55 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:last-of-type {
|
2024-07-09 08:02:52 +00:00
|
|
|
border-start-end-radius: 4px;
|
|
|
|
border-end-end-radius: 4px;
|
|
|
|
border-inline-end: 1px solid var(--fill-quinary);
|
2024-03-02 07:51:55 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@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%;
|
|
|
|
}
|
2024-03-02 07:51:55 +00:00
|
|
|
}
|
|
|
|
}
|