theme: Adapt some of the notebook style

Make the tab bar appear similar to the way
GtkNotebook looks.
This commit is contained in:
Matthias Clasen
2023-07-04 18:27:37 -04:00
parent 389da86351
commit 5215ae5228

View File

@@ -2103,6 +2103,94 @@ menubar {
}
/************
* Tabbar *
************/
tabbar {
padding: 1px;
border-color: $borders_color;
border-width: 1px;
background-color: $dark_fill;
margin: -1px;
&.top {
border-bottom-style: solid;
margin-bottom: -2px;
> tab {
&:hover { box-shadow: inset 0 -4px $borders_color; }
&:selected { box-shadow: inset 0 -4px $selected_bg_color; }
}
}
&.bottom {
border-top-style: solid;
margin-top: -2px;
> tab {
&:hover { box-shadow: inset 0 4px $borders_color; }
&:selected { box-shadow: inset 0 4px $selected_bg_color; }
}
}
&.left {
border-right-style: solid;
margin-right: -2px;
> tab {
&:hover { box-shadow: inset -4px 0 $borders_color; }
&:selected { box-shadow: inset -4px 0 $selected_bg_color; }
}
}
&.right {
border-left-style: solid;
margin-left: -2px;
> tab {
&:hover { box-shadow: inset 4px 0 $borders_color; }
&:selected { box-shadow: inset 4px 0 $selected_bg_color; }
}
}
> tab {
transition: $focus_transition;
min-height: 30px;
min-width: 30px;
padding: 3px 12px;
color: $fg_color;
font-weight: normal;
border-width: 1px; // for reorderable tabs
border-color: transparent; //
&:hover {
color: $fg_color;
background-color: darken($dark_fill,4%);
&.reorderable-page {
border-color: transparentize($borders_color, 0.7);
background-color: transparentize($bg_color, 0.8);
}
}
&:not(:selected) {
outline-color: transparent;
}
&:selected {
color: $fg_color;
&.reorderable-page {
border-color: transparentize($borders_color, 0.5);
background-color: transparentize($bg_color, 0.5);
&:hover { background-color: transparentize($bg_color, 0.3); }
}
}
}
&.top > tab { padding-bottom: 4px; }
&.bottom > tab { padding-top: 4px; }
}
/*************
* Notebooks *
*************/