[create-theme]: Collapsed Close Tab

[thatcomputerguy0101]

Name

Collapsed Close Tab

Description

Shows a close tab button when hovering over tabs when the tab bar is collapsed

Homepage

https://github.com/thatcomputerguy0101/zen-collapsed-close-tab

Image

https://github.com/thatcomputerguy0101/zen-collapsed-close-tab/blob/main/demo.png?raw=true

Type

• [ ] JSON Color Theme

Theme Styles

@keyframes zen-slide-in-left {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes zen-slide-in-right {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}

@media (-moz-bool-pref: "zen.tabs.vertical") and (not (-moz-bool-pref: "zen.view.sidebar-expanded")) {
  #navigator-toolbox {
    --tab-outwards-direction: rtl;
    --tab-inwards-direction: ltr;
    z-index: 4;

    .tabbrowser-tab {
      animation: none !important;

      & > * {
        animation: zen-slide-in-left 0.2s ease-in-out;
      }
    }
  }

  #navigator-toolbox[zen-right-side="true"] {
    --tab-outwards-direction: ltr;
    --tab-inwards-direction: rtl;

    .tabbrowser-tab > * {
      animation: zen-slide-in-right 0.2s ease-in-out;
    }
  }

  #tabbrowser-arrowscrollbox {
    pointer-events: none;
    margin-inline-start: -30px;
    direction: var(--tab-outwards-direction);

    &::part(scrollbox) {
      & {
        padding-inline-start: 30px;
      }

      & > * {
        pointer-events: auto;
        direction: ltr;
      }
    }

    & > * {
      direction: var(--tab-inwards-direction);
    }
  }

  .tabbrowser-tab:not([pinned]):hover {
    --tab-icon-width: 12px;
    --tab-collapsed-hover-expansion-width: calc(24px + var(--toolbarbutton-inner-padding) - var(--tab-inline-padding) / 2);
    height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));
    margin-inline-start: var(--zen-toolbox-padding) !important;
    margin-inline-end: calc(var(--zen-toolbox-padding) - var(--tab-collapsed-hover-expansion-width)) !important;

    & .tab-background {
      position: relative;
      width: calc(var(--tab-collapsed-background-width) + var(--tab-collapsed-hover-expansion-width)) !important;

      &:not([selected]) {
        background-color: color-mix(in lch, var(--zen-navigator-toolbox-background, var(--zen-main-browser-background)) 50%, transparent) !important;
      }
    }

    & .tab-background:not([selected])::before {
      content: " ";
      position: absolute;
      top: 0px;
      width: 100%;
      height: 100%;
      background-color: var(--tab-hover-background-color);
    }

    & .tab-close-button {
      margin-inline-start: var(--toolbarbutton-inner-padding);
      display: flex !important;
    }
  }
}

Readme

# Zen Collapsed Close Tab

This mod shows closed tab buttons when hovering over tabs when the tab bar is collapsed. It works with the tab bar on either side of the window.

## Quirks

The scrollbar for tabs appears on the outside edge of the window, instead of always appearing on the right edge. This is so that tabs can extend over the content area when hovered over.

This mod was confirmed to be compatible with the built-in color themes, but user-installed themes may cause unexpected tab colors. The background under hovered tabs may appear strange if the tab bar background is not a solid color.

This relies on a niche CSS bug to set the `pointer-events` style on the correct elements, and therefore is at (low) risk of being unable to interact with the scrollable portion of the tab bar at some point in the future.

Preferences

No response

[github-actions[bot]]

Thank you for your contribution! :tada:

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-737 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.