Sweet-topborder/gtk-4.0/widgets/_notebooks.scss

/*************
 * Notebooks *
 *************/
notebook {
  > header {
    padding: 1px;
    border-color: transparent;
    border-width: 1px;
    background-color: mix($base_color, $headerbar_color, 30%);

    &:backdrop {
      border-color: $backdrop_borders_color;
      background-color: $backdrop_bg_color;
    }

    tabs { margin: 0px; }

    &.top {
      border-bottom-style: solid;
      > tabs {
        margin-bottom: -2px;
        > tab {


          &:backdrop { box-shadow: none; }

          &:checked {
            @include selected-tab(right);
          }
        }
      }
    }

    &.bottom {
      border-top-style: solid;
      > tabs {
        margin-top: -2px;
        > tab {


          &:backdrop { box-shadow: none; }

          &:checked { 
            @include selected-tab(right);
          }
        }
      }
    }

    &.left {
      border-right-style: solid;
      > tabs {
        margin-right: -2px;
        > tab {


          &:backdrop { box-shadow: none; }

          &:checked { 
            @include selected-tab(bottom);
          }
        }
      }
    }

    &.right {
      border-left-style: solid;
      > tabs {
        margin-left: -2px;
        > tab {


          &:backdrop { box-shadow: none; }

          &:checked { 
            @include selected-tab(bottom);
          }
        }
      }
    }

    &.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: -5px;
      margin-right: -5px;
      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: -5px;
      margin-bottom: -5px;
      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: 14px;
      min-width: 14px;
      border-radius: 0;

      &:hover:not(:active):not(:backdrop) {
        background-clip: padding-box;
        background-image: none;
        background-color: transparentize(white, 0.7);
        border-color: transparent;
        box-shadow: none;
      }

      &:disabled { @include button(undecorated); }
    }

    tab {
      min-height: 24px;
      min-width: 24px;
      padding: 1px 12px;

      outline-offset: -5px;

      color: $insensitive_fg_color;
      font-weight: normal;

      border-width: 1px;         // for reorderable tabs
      border-color: transparent; //

      &:hover {
        color: mix($insensitive_fg_color, $fg_color, 50%);

        &.reorderable-page {
          border-color: transparentize($borders_color, 0.7);
          background-color: transparentize($bg_color, 0.8);
        }
      }

      &:backdrop {
        color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);

        &.reorderable-page {
          border-color: transparent;
          background-color: transparent;
        }
      }

      &:checked {
        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); }
        }
      }

      &: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 {  
          background: transparent;
          box-shadow: none;
          color: $red; 
        }

        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }

        padding: 0;
        margin-top: 4px;
        margin-bottom: 4px;
        // FIXME: generalize .small-button?
        min-width: 20px;
        min-height: 20px;
      }
    }

    &.top,
    &.bottom {
      tabs {
        padding-left: 0px;
        padding-right: 0px;

        &:not(:only-child) {
          margin-left: 0.5px;
          margin-right: 0.5px;

          &:first-child { margin-left: -1px; }
          &:last-child { margin-right: -1px; }
        }

        tab {
          margin-left: 0.5px;
          margin-right: 0.5px;

          &.reorderable-page { border-style: none solid; }
        }
      }
    }

    &.left,
    &.right {
      tabs {
        padding-top: 4px;
        padding-bottom: 4px;

        &:not(:only-child) {
          margin-top: 3px;
          margin-bottom: 3px;

          &:first-child { margin-top: -1px; }
          &:last-child { margin-bottom: -1px; }
        }

        tab {
          margin-top: 4px;
          margin-bottom: 4px;

          &.reorderable-page { border-style: solid none; }
        }
      }
    }

    &.top tab { padding-bottom: 3px; }
    &.bottom tab { padding-top: 3px; }
    button{
      margin-top: 1px;
      margin-bottom: 1px;
      padding: 1px 1px;
    }
  }

  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
    background-color: $base_color;

    &:backdrop { background-color: $backdrop_base_color; }
  }
}

tabbar {
  &:backdrop .box {
    > scrolledwindow,
    > .start-action,
    > .end-action {
      filter: opacity(1);
    }
  }
  tabbox {
    background-color:  mix($base_color, $headerbar_color, 30%);
    padding: 0px;
    color: $fg_color;
    > tabboxchild {
      margin: 0 -3px;
      border-radius: 0;
    }
    > tab,
    > tabboxchild > tab {
      border-radius: 0;
      &:checked, &:selected { 
        @include selected-tab(right); 
        color: $fg_color;
      }
    }
  }
}