4c68f834c1
Set focusring on the child hbox, instead of the actual tab. The hbox is the element with visibly rounded corners, so this way the focus-ring will have the right shape. Fixes: #4744
81 lines
No EOL
1.8 KiB
SCSS
81 lines
No EOL
1.8 KiB
SCSS
tabbox {
|
|
--color-form-element-base-background: var(--color-sidepane);
|
|
|
|
tabs {
|
|
position: relative;
|
|
z-index: 1;
|
|
background: transparent;
|
|
|
|
spacer:first-of-type {
|
|
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-start-start-radius: 4px;
|
|
border-end-start-radius: 4px;
|
|
border-inline-start: 1px solid var(--fill-quinary);
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-start-end-radius: 4px;
|
|
border-end-end-radius: 4px;
|
|
border-inline-end: 1px solid var(--fill-quinary);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// focus-ring if tabbox is not marked as clicked (to avoid blinking)
|
|
&:not([clicked]) tab:focus-visible {
|
|
outline: none;
|
|
// outline should appear around hbox with rounded corners
|
|
hbox {
|
|
outline: var(--color-focus-outer-border) solid var(--width-focus-outer-border) !important;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
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;
|
|
|
|
tabpanel {
|
|
min-width: 500px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
} |