tokyonight-theme/Tokyonight-dark/gtk-3.20/scss/widgets/_notebook.scss

262 lines
9.7 KiB
SCSS

@import "button";
/**********
! Notebook
***********/
@include exports("notebook") {
$tab_border_width: 1px;
$tab_marker_width: 3px;
$max_single_tab_roundness: 6px;
$max_tab_bar_roundness: 13px;
$vertical_tab_spacing: $spacing + if($roundness <= $max_tab_bar_roundness,
if($roundness > 8px, $roundness, 8px),
8px
);
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: $bg_color;
}
> header {
padding: $spacing;
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;
}
// 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 {
@extend %close_button;
color: $insensitive_fg_color;
&:hover { color: mix($fg_color, $insensitive_fg_color, .5); }
&:active { color: $fg_color; }
&:disabled { color: alpha($insensitive_fg_color, .3); }
}
> tabs > tab {
@include linear-gradient(alpha(mix($bg_color, $fg_color, .1), .7));
border-color: mix($borders_color, $insensitive_fg_color, .15);
color: alpha($fg_color, .8);
padding: $spacing $vertical_tab_spacing;
min-width: 20px;
min-height: 20px;
outline-offset: -4px;
border-width: $tab_border_width;
border-style: solid;
&:hover:not(:checked) {
//@include linear-gradient(mix($bg_color, $fg_color, .12));
@include linear-gradient(mix($bg_color, $fg_color, .04));
color: mix($fg_color, $insensitive_fg_color, .5);
}
&:checked, &:checked:hover {
background: $bg_color;
border-color: $borders_color;
color: $fg_color;
}
// close button
button.flat {
min-height: 22px;
min-width: 22px;
padding: 0;
color: mix($bg_color, $fg_color, .35);
&:hover {
@extend %undecorated_button;
color: lighten($error_color, 15%);
}
&:active, &:active:hover {
@extend %undecorated_button;
color: $selected_bg_color;
}
}
}
// 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; }
@each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
// sizing and borders
&.#{$_pos} {
padding-#{$_bpos}: 0;
> tabs > tab {
border-#{$_bpos}: none;
//border-#{$_pos}-color: $bg_color;
-gtk-outline-radius: 0;
@if $roundness <= $max_single_tab_roundness {
margin-#{$_pos}: $roundness;
}
// tab overlap
+ tab {
@if $_pos == top or $_pos == bottom {
margin-left: -1px;
} @else {
margin-top: -1px;
}
}
// tab border radius
&:first-child {
@if $roundness <= $max_tab_bar_roundness {
@if $_pos == top {
border-radius: $roundness 0 0;
-gtk-outline-radius: $roundness 0 0;
} @else if $_pos == bottom {
border-radius: 0 0 0 $roundness;
-gtk-outline-radius: 0 0 0 $roundness;
} @else if $_pos == left {
border-radius: $roundness 0 0;
-gtk-outline-radius: $roundness 0 0;
} @else if $_pos == right {
border-radius: 0 $roundness 0 0;
-gtk-outline-radius: 0 $roundness 0 0;
}
} @else {
border-radius: 0;
}
}
&:last-child {
@if $roundness <= $max_tab_bar_roundness {
@if $_pos == top {
border-radius: 0 $roundness 0 0;
-gtk-outline-radius: 0 $roundness 0 0;
} @else if $_pos == bottom {
border-radius: 0 0 $roundness;
-gtk-outline-radius: 0 0 $roundness;
} @else if $_pos == left {
border-radius: 0 0 0 $roundness;
-gtk-outline-radius: 0 0 0 $roundness;
} @else if $_pos == right {
border-radius: 0 0 $roundness;
-gtk-outline-radius: 0 0 $roundness;
}
} @else {
border-radius: 0;
}
}
&:hover:not(:checked),
&:checked {
$compensate_tab_marker_padding: $tab_marker_width - $tab_border_width - if(
$roundness <= $max_single_tab_roundness, $roundness, 0
);
border-#{$_pos}-width: $tab_marker_width;
border-#{$_pos}-color: $selected_bg_color;
margin-#{$_pos}: 0;
@if $roundness <= $max_single_tab_roundness {
-gtk-outline-radius: $roundness;
@if $_pos == top {
border-radius: $roundness $roundness 0 0;
} @else if $_pos == bottom {
border-radius: 0 0 $roundness $roundness;
} @else if $_pos == left {
border-radius: $roundness 0 0 $roundness;
} @else if $_pos == right {
border-radius: 0 $roundness $roundness 0;
}
}
@if $_pos == top or $_pos == bottom {
padding-#{$_pos}: if($spacing > $compensate_tab_marker_padding, $spacing, $compensate_tab_marker_padding) - $compensate_tab_marker_padding;
} @else if $_pos == left or $_pos == right {
padding-#{$_pos}: if($vertical_tab_spacing > $compensate_tab_marker_padding, $vertical_tab_spacing, $compensate_tab_marker_padding) - $compensate_tab_marker_padding;
}
}
&:hover:not(:checked) {
border-#{$_pos}-color: mix($selected_bg_color, mix($bg_color, $fg_color, .2), .66);
}
}
}
}
}
}
}