Add theme: Icon Only Pins

This commit is contained in:
MihkelMK 2025-03-07 16:13:19 +00:00 committed by GitHub
parent 5afb1dd7df
commit a9c1114492
4 changed files with 74 additions and 0 deletions

View file

@ -0,0 +1,50 @@
/* 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;
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View file

@ -0,0 +1,10 @@
# 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)

View file

@ -0,0 +1,14 @@
{
"id": "c1f846ad-19f4-40e4-9cf2-597824e25af0",
"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",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/c1f846ad-19f4-40e4-9cf2-597824e25af0/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/c1f846ad-19f4-40e4-9cf2-597824e25af0/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/c1f846ad-19f4-40e4-9cf2-597824e25af0/image.png",
"author": "MihkelMK",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-07",
"updatedAt": "2025-03-07"
}