diff --git a/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/chrome.css b/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/chrome.css new file mode 100644 index 00000000..bf82e955 --- /dev/null +++ b/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/chrome.css @@ -0,0 +1,46 @@ + +/* Hover effect for all tabs - macOS Dock style zoom */ +.tabbrowser-tab { + transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), + filter 0.3s ease, + opacity 0.3s ease !important; +} + +/* Tab directly under the cursor (unpinned) */ +.tabbrowser-tab:not([pinned]):hover { + transform: scale(1.15) !important; + filter: brightness(1.1) saturate(1.2) !important; + z-index: 2 !important; +} + +/* Pinned tabs: they only grow smoothly, no wave generated to avoid breaking the grid */ +.tabbrowser-tab[pinned]:hover { + transform: scale(1.1) !important; + filter: brightness(1.1) saturate(1.2) !important; + z-index: 2 !important; +} + +/* Immediate adjacent tabs (1 position away) to the hovered tab */ +.tabbrowser-tab:not([pinned]):has(+ .tabbrowser-tab:not([pinned]):hover), +.tabbrowser-tab:not([pinned]):hover+.tabbrowser-tab:not([pinned]) { + transform: scale(1.08) !important; +} + +/* Distant adjacent tabs (2 positions away) to the hovered tab */ +.tabbrowser-tab:not([pinned]):has(+ .tabbrowser-tab:not([pinned]) + .tabbrowser-tab:not([pinned]):hover), +.tabbrowser-tab:not([pinned]):hover+.tabbrowser-tab:not([pinned])+.tabbrowser-tab:not([pinned]) { + transform: scale(1.03) !important; +} + +/* State: Pending/unloaded tab */ +.tabbrowser-tab[pending="true"] { + filter: saturate(0.4) brightness(0.8) !important; + opacity: 0.8 !important; + transition: filter 0.5s ease, opacity 0.5s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; +} + +/* State: Hovering over a pending tab */ +.tabbrowser-tab[pending="true"]:hover { + filter: saturate(1) brightness(1) !important; + opacity: 1 !important; +} diff --git a/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/image.png b/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/image.png new file mode 100644 index 00000000..6ddc423a Binary files /dev/null and b/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/image.png differ diff --git a/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/readme.md b/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/readme.md new file mode 100644 index 00000000..facb6aa7 --- /dev/null +++ b/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/readme.md @@ -0,0 +1,2 @@ + +Better tabs make unloaded tabs easier to notice by making them desaturated, transparent and add hover effect like macOS dock. diff --git a/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/theme.json b/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/theme.json new file mode 100644 index 00000000..064ae050 --- /dev/null +++ b/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/theme.json @@ -0,0 +1,14 @@ +{ + "id": "cdbf12d0-8e70-4939-9f39-b195058ed8d1", + "name": "better tabs", + "description": "better tabs Makes unloaded tabs easier to notice, and add hover effect like macos dock", + "homepage": "https://github.com/alzari555/better-zen-browser-better-unloaded-tabs", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cdbf12d0-8e70-4939-9f39-b195058ed8d1/image.png", + "author": "alzari555", + "version": "1.0.0", + "tags": [], + "createdAt": "2026-03-19", + "updatedAt": "2026-03-19" +} \ No newline at end of file