[create-theme]: Icon Only Pins

[MihkelMK]

Name

Icon Only Pins

Description

Change pinned tabs to a horizontal list of icons.

Homepage

https://github.com/MihkelMK/zen-mods/tree/main/icon_only_pins

Image

https://raw.githubusercontent.com/MihkelMK/zen-mods/refs/heads/main/icon_only_pins/thumbnail.png

Type

• JSON Color Theme

Theme Styles

/* Hide label, reset and close buttons */
/* Based on code from SuperPins by jLBlk https://github.com/JLBlk/Zen-Themes */
#vertical-pinned-tabs-container .tabbrowser-tab[pinned] {
  & .tab-close-button,
  .tab-reset-button,
  .tab-reset-pin-button,
  .tab-label-container {
    display: none !important;
  }
}

/* Fix icon shift on tab label change */
/* Code from SuperPins by jLBlk https://github.com/JLBlk/Zen-Themes */
#navigator-toolbox[zen-sidebar-expanded="true"] {
  & #tabbrowser-tabs {
    & .tabbrowser-tab {
      &[zen-pinned-changed="true"]:not([zen-essential])
        > .tab-stack
        > .tab-content
        > .tab-icon-stack {
        left: unset !important;
      }
    }
  }
}

/* Change pin area flex direction and make it wrap */
#vertical-pinned-tabs-container > .zen-workspace-tabs-section {
  flex-direction: row !important;
  flex-wrap: wrap;
}

/* Make pinned tabs square */
#navigator-toolbox[zen-sidebar-expanded="true"] {
  & #vertical-pinned-tabs-container:has(tab:not([hidden])) {
    & .tabbrowser-tab {
      --tab-pinned-margin-inline-expanded: 2px !important;
      --toolbarbutton-inner-padding: 0; /* Fix overflow from restricting width */

      /* Make pin width same as height by using var(--tab-min-height) */
      /* instead of var(--tab-pinned-expanded-background-width) */
      --tab-pinned-min-width-expanded: calc(
        var(--tab-min-height) + 2 * var(--tab-pinned-margin-inline-expanded)
      ) !important;

      width: var(--tab-pinned-min-width-expanded) !important;
    }
  }
}

Readme

# Icon Only Pins

Change pinned tabs to a horizontal list of icons.

Inspired by sideberry pinned tabs.

CSS that hides the label, reset and close buttons based on code from [SuperPins - Zen Mods](https://zen-browser.app/mods/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/) by [JLBlk](https://github.com/JLBlk).

![Screenshot of customized tabs](https://raw.githubusercontent.com/MihkelMK/zen-mods/refs/heads/main/icon_only_pins/image.png)

Preferences

[github-actions]

Thank you for your contribution! 🎉

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-1224 branch.

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