202 lines
4.2 KiB
SCSS
202 lines
4.2 KiB
SCSS
|
|
|
|
|
|
|
|
|
|
|
|
//
|
|
// Notebooks and Tabs
|
|
//
|
|
notebook {
|
|
padding: 0;
|
|
|
|
&.frame {
|
|
border: 1px solid $borders_color;
|
|
|
|
> header {
|
|
// ugly hack to hide the borders around the header
|
|
margin: -1px;
|
|
&.top {
|
|
margin-bottom: 0;
|
|
}
|
|
&.bottom {
|
|
margin-top: 0;
|
|
}
|
|
&.left {
|
|
margin-right: 0;
|
|
}
|
|
&.right {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.top,
|
|
&.bottom {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
&.left,
|
|
&.right {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
> stack:not(:only-child) {
|
|
// the :not(:only-child) is for "hidden" notebooks
|
|
background-color: $base_color;
|
|
}
|
|
|
|
> header {
|
|
padding: 2px;
|
|
background-color: $bg_color;
|
|
|
|
&.top {
|
|
box-shadow: inset 0 -1px $borders_color;
|
|
}
|
|
&.bottom {
|
|
box-shadow: inset 0 1px $borders_color;
|
|
}
|
|
&.right {
|
|
box-shadow: inset 1px 0 $borders_color;
|
|
}
|
|
&.left {
|
|
box-shadow: inset -1px 0 $borders_color;
|
|
}
|
|
|
|
@each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
|
|
// sizing and borders
|
|
&.#{$_pos} {
|
|
padding-#{$_bpos}: 0;
|
|
|
|
> tabs > tab {
|
|
padding: 2px 10px;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
|
|
outline-offset: -4px;
|
|
|
|
border: 1px solid transparent;
|
|
border-#{$_bpos}: none;
|
|
|
|
// tab overlap
|
|
+ tab {
|
|
@if $_pos==top or $_pos==bottom {
|
|
margin-left: -1px;
|
|
} @else {
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
// tab border radius
|
|
@if $_pos==top {
|
|
border-radius: 1px 1px 0 0;
|
|
} @else if $_pos==bottom {
|
|
border-radius: 0 0 1px 1px;
|
|
} @else if $_pos==left {
|
|
border-radius: 1px 0 0 1px;
|
|
} @else if $_pos==right {
|
|
border-radius: 0 1px 1px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// overflow arrows
|
|
&.top,
|
|
&.bottom {
|
|
> tabs > arrow.up {
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
&:last-child {
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
> tabs > arrow.down {
|
|
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
|
|
&:first-child {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
}
|
|
&.left,
|
|
&.right {
|
|
> tabs > arrow.up {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
&:last-child {
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
> tabs > arrow.down {
|
|
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
|
&:first-child {
|
|
margin-bottom: 2px;
|
|
}
|
|
}
|
|
}
|
|
> tabs > arrow {
|
|
color: $insensitive_fg_color;
|
|
|
|
&:hover {
|
|
color: mix($fg_color, $insensitive_fg_color, 50%);
|
|
}
|
|
&:active {
|
|
color: $fg_color;
|
|
}
|
|
&:disabled {
|
|
color: transparentize($insensitive_fg_color, 0.3);
|
|
}
|
|
}
|
|
|
|
// tab colors
|
|
|
|
&.top > tabs > tab:hover:not(:checked) {
|
|
box-shadow: inset 0 -1px $borders_color;
|
|
}
|
|
&.bottom > tabs > tab:hover:not(:checked) {
|
|
box-shadow: inset 0 1px $borders_color;
|
|
}
|
|
&.left > tabs > tab:hover:not(:checked) {
|
|
box-shadow: inset -1px 0 $borders_color;
|
|
}
|
|
&.right > tabs > tab:hover:not(:checked) {
|
|
box-shadow: inset 1px 0 $borders_color;
|
|
}
|
|
|
|
> tabs > tab {
|
|
color: $insensitive_fg_color;
|
|
background-color: transparentize($base_color, 1);
|
|
|
|
&:hover:not(:checked) {
|
|
color: mix($fg_color, $insensitive_fg_color, 50%);
|
|
background-color: transparentize($base_color, 0.5);
|
|
border-color: $borders_color;
|
|
}
|
|
&:checked {
|
|
color: $fg_color;
|
|
background-color: $base_color;
|
|
border-color: $borders_color;
|
|
}
|
|
// close button
|
|
button.flat {
|
|
min-height: 22px;
|
|
min-width: 16px;
|
|
padding: 0;
|
|
color: mix($bg_color, $fg_color, 35%);
|
|
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
color: lighten(red, 15%);
|
|
}
|
|
&:active,
|
|
&:active:hover {
|
|
@extend %undecorated_button;
|
|
color: $selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* button in headers */
|
|
button.flat {
|
|
padding: 2px;
|
|
}
|
|
}
|
|
} |