diff --git a/gtk-3.20/scss/widgets/_notebook.scss b/gtk-3.20/scss/widgets/_notebook.scss
index 3c9169a..59d3963 100644
--- a/gtk-3.20/scss/widgets/_notebook.scss
+++ b/gtk-3.20/scss/widgets/_notebook.scss
@@ -6,116 +6,278 @@
***********/
@include exports("notebook") {
-
notebook {
> header {
- padding: 0;
- margin: 0;
- border-width: 0;
- border-radius: 0;
- background-image: none;
- background-clip: border-box;
+ padding: 1px;
+ border-color: $borders_color;
+ border-width: 1px;
background-color: shade($base_color, .9);
- color: $text_color;
- &.frame {
- border-color: border_normal($base_color);
-
- &.top { border-width: 1px 1px 0; }
-
- &.right { border-width: 1px 1px 1px 0; }
-
- &.bottom { border-width: 0 1px 1px; }
-
- &.left { border-width: 1px 0 1px 1px; }
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: shade($backdrop_base_color, .9);
}
- tabs arrow {
- margin: 5px;
- }
- }
-
- viewport {
- border-width: 0;
- background-color: $base_color;
- color: $text_color;
- }
-
- tab {
- padding: ($spacing + 1) ($spacing * 2);
- border: 1px solid transparent;
- background-color: transparent;
- background-image: none;
-
- &:hover {
- background-color: shade($base_color, .95);
- border-color: shade($base_color, .8);
- }
-
- &:checked {
- background-color: $base_color;
- background-image: none;
- border-color: shade($base_color, .85);
-
- label { color: $text_color; }
- }
+ tabs { margin: -1px; }
&.top {
- border-bottom-width: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- }
+ border-bottom-style: solid;
- &.right {
- border-left-width: 0;
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
- }
+ > tabs {
+ margin-bottom: -2px;
+ > tab {
+ &:hover { box-shadow: inset 0 -3px $borders_color; }
+
+ &:backdrop { box-shadow: none; }
+
+ &:checked { box-shadow: inset 0 -3px $selected_bg_color; }
+ }
+ }
+ }
&.bottom {
- border-top-width: 0;
- border-top-right-radius: 0;
- border-top-left-radius: 0;
+ border-top-style: solid;
+
+ > tabs {
+ margin-top: -2px;
+
+ > tab {
+ &:hover { box-shadow: inset 0 3px $borders_color; }
+
+ &:backdrop { box-shadow: none; }
+
+ &:checked { box-shadow: inset 0 3px $selected_bg_color; }
+ }
+ }
}
&.left {
- border-right-width: 0;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
+ border-right-style: solid;
+
+ > tabs {
+ margin-right: -2px;
+
+ > tab {
+ &:hover { box-shadow: inset -3px 0 $borders_color; }
+
+ &:backdrop { box-shadow: none; }
+
+ &:checked { box-shadow: inset -3px 0 $selected_bg_color; }
+ }
+ }
}
- label { color: mix($text_color, $base_color, .3); }
+ &.right {
+ border-left-style: solid;
- /* close button styling */
- button { @extend %close_button; }
- }
+ > tabs {
+ margin-left: -2px;
- .prelight-page {
- &, label { color: mix($text_color, $base_color, .15); }
- }
+ > tab {
+ &:hover { box-shadow: inset 3px 0 $borders_color; }
- .active-page {
- &, label { color: $text_color; }
- }
+ &:backdrop { box-shadow: none; }
- .reorderable-page {
- &:hover {
- background-color: shade($base_color, .85);
- border-left: 0;
- border-right: 0;
- /* using box shadows instead of borders due to slanted edges */
- box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
- inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7);
+ &:checked { box-shadow: inset 3px 0 $selected_bg_color; }
+ }
+ }
}
- &:checked {
- background-color: shade($base_color, .9);
- border-left: 0;
- border-right: 0;
- box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
- inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75);
+ &.top > tabs > arrow {
+ @extend %notebook_vert_arrows;
+
+ border-top-style: none;
}
+
+ &.bottom > tabs > arrow {
+ @extend %notebook_vert_arrows;
+
+ border-bottom-style: none;
+ }
+
+ @at-root %notebook_vert_arrows {
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 4px;
+ padding-right: 4px;
+
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+ }
+
+ &.left > tabs > arrow {
+ @extend %notebook_horz_arrows;
+
+ border-left-style: none;
+ }
+
+ &.right > tabs > arrow {
+ @extend %notebook_horz_arrows;
+
+ border-right-style: none;
+ }
+
+ @at-root %notebook_horz_arrows {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 4px;
+ padding-bottom: 4px;
+
+ &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+
+ &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+ }
+
+ > tabs > arrow {
+ //@extend %button_basic;
+
+ //@extend %button_basic.flat;
+
+ min-height: 16px;
+ min-width: 16px;
+ border-radius: 0;
+
+ &:hover:not(:active):not(:backdrop) {
+ background-clip: padding-box;
+ background-image: none;
+ background-color: transparentize(white, .7);
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ //&:disabled { @include button(undecorated); }
+ }
+
+ tab {
+ min-height: 30px;
+ min-width: 30px;
+ padding: $spacing $spacing * 2;
+
+ outline-offset: -5px;
+
+ color: $insensitive_fg_color;
+ border-width: 1px; // for reorderable tabs
+ border-color: transparent; //
+
+ &:hover {
+ color: mix($insensitive_fg_color, $fg_color, .5);
+
+ &.reorderable-page {
+ border-color: transparentize($borders_color, .7);
+ background-color: transparentize($base_color, .8);
+ }
+ }
+
+ &:backdrop {
+ color: mix($backdrop_fg_color, $backdrop_bg_color, .6);
+
+ &.reorderable-page {
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+
+ &:checked {
+ color: $fg_color;
+
+ &.reorderable-page {
+ border-color: transparentize($borders_color, .4);
+ background-color: transparentize($base_color, .5);
+
+ &:hover { background-color: transparentize($base_color, .3); }
+ }
+ }
+
+ &:backdrop:checked {
+ color: $backdrop_fg_color;
+
+ &.reorderable-page {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_base_color;
+ }
+ }
+
+ // colors the button like the label, overridden otherwise
+ button.flat {
+ &:hover { color: currentColor; }
+
+ &, &:backdrop { color: gtkalpha(currentColor, .3); }
+
+ padding: 0;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ // FIXME: generalize .small-button?
+ min-width: 20px;
+ min-height: 20px;
+
+ &:last-child {
+ margin-left: 4px;
+ margin-right: -4px;
+ }
+
+ &:first-child {
+ margin-left: -4px;
+ margin-right: 4px;
+ }
+ }
+ }
+
+ &.top,
+ &.bottom {
+ tabs {
+ padding-left: 0;
+ padding-right: 0;
+
+ &:not(:only-child) {
+ margin-left: 3px;
+ margin-right: 3px;
+
+ &:first-child { margin-left: -1px; }
+ &:last-child { margin-right: -1px; }
+ }
+
+ tab {
+ margin-left: 0;
+ margin-right: 0;
+
+ &.reorderable-page { border-style: none solid; }
+ }
+ }
+ }
+
+ &.left,
+ &.right {
+ tabs {
+ padding-top: 0;
+ padding-bottom: 0;
+
+ &:not(:only-child) {
+ margin-top: 3px;
+ margin-bottom: 3px;
+
+ &:first-child { margin-top: -1px; }
+ &:last-child { margin-bottom: -1px; }
+ }
+
+ tab {
+ margin-top: 0;
+ margin-bottom: 0;
+
+ &.reorderable-page { border-style: solid none; }
+ }
+ }
+ }
+
+ &.top tab { padding-bottom: 4px; }
+ &.bottom tab { padding-top: 4px; }
+ }
+
+ > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+ background-color: $base_color;
+
+ &:backdrop { background-color: $backdrop_base_color; }
}
}
}