ZenBrowserMirrors/theme-store
1
0
Fork 0
mirror of https://github.com/zen-browser/theme-store.git synced 2025-07-07 17:05:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add theme: Sidebar Button Stash

Browse source
This commit is contained in:
Tanay-Kar 2025-03-03 08:26:11 +00:00 • committed by GitHub
parent cdccfde6b2
commit ac24f2eaea
4 changed files with 133 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

115
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/chrome.css Normal file
View file

@ -0,0 +1,115 @@
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
:root:not([customizing]) {
/* Main container setup - creates a 3-column grid with extended hover area */
#zen-sidebar-bottom-buttons:has(> :nth-child(4)) {
display: grid !important;
grid-template-columns: repeat(3, auto) !important;
position: relative !important;
z-index: 10 !important;
overflow: visible !important;
}
/* Position the three always-visible buttons */
#zen-sidebar-bottom-buttons:has(> :nth-child(4)) > *:nth-last-child(1),
#zen-sidebar-bottom-buttons:has(> :nth-child(4)) > *:nth-last-child(2),
#zen-sidebar-bottom-buttons:has(> :nth-child(4)) > *:nth-last-child(3) {
grid-column: auto !important;
}
/* Position all overflow buttons in the dropdown */
#zen-sidebar-bottom-buttons:has(> :nth-child(4))
> *:not(:nth-last-child(-n + 3)) {
position: absolute !important;
z-index: 11 !important;
width: calc(100% / 3) !important;
/* Hide by default, show on hover */
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
/* Show overflow items on hover */
#zen-sidebar-bottom-buttons:has(> :nth-child(4)):hover
> *:not(:nth-last-child(-n + 3)),
#zen-sidebar-bottom-buttons:has(> :nth-child(4)):has(
*:not(:nth-last-child(-n + 3))[open="true"]
)
> *:not(:nth-last-child(-n + 3)) {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Column positioning for overflow items */
#zen-sidebar-bottom-buttons:has(> :nth-child(4))
> *:nth-child(3n + 1):not(:nth-last-child(-n + 3)) {
left: 0 !important;
}
#zen-sidebar-bottom-buttons:has(> :nth-child(4))
> *:nth-child(3n + 2):not(:nth-last-child(-n + 3)) {
left: calc(100% / 3) !important;
}
#zen-sidebar-bottom-buttons:has(> :nth-child(4))
> *:nth-child(3n + 3):not(:nth-last-child(-n + 3)) {
left: calc(2 * 100% / 3) !important;
}
/* Apply specific row positioning for each group */
#zen-sidebar-bottom-buttons
> *:nth-child(-n + 3):not(:nth-last-child(-n + 3)) {
bottom: calc(100% + 20px) !important; /* Row 2 */
}
#zen-sidebar-bottom-buttons
> *:nth-child(n + 4):nth-child(-n + 6):not(:nth-last-child(-n + 3)) {
bottom: calc(100% + 60px) !important; /* Row 3 */
}
#zen-sidebar-bottom-buttons
> *:nth-child(n + 7):nth-child(-n + 9):not(:nth-last-child(-n + 3)) {
bottom: calc(100% + 100px) !important; /* Row 4 */
}
#zen-sidebar-bottom-buttons
> *:nth-child(n + 10):nth-child(-n + 12):not(:nth-last-child(-n + 3)) {
bottom: calc(100% + 140px) !important; /* Row 5 */
}
#zen-sidebar-bottom-buttons
> *:nth-child(n + 13):nth-child(-n + 15):not(:nth-last-child(-n + 3)) {
bottom: calc(100% + 140px) !important; /* Row 6 */
}
#zen-sidebar-bottom-buttons
> *:nth-child(n + 16):nth-child(-n + 18):not(:nth-last-child(-n + 3)) {
bottom: calc(100% + 140px) !important; /* Row 7 */
}
#zen-sidebar-bottom-buttons
> *:nth-child(n + 19):nth-child(-n + 21):not(:nth-last-child(-n + 3)) {
bottom: calc(100% + 140px) !important; /* Row 8 */
}
#zen-sidebar-bottom-buttons
> *:nth-child(n + 22):nth-child(-n + 24):not(:nth-last-child(-n + 3)) {
bottom: calc(100% + 140px) !important; /* Row 9 */
}
#zen-sidebar-bottom-buttons
> *:nth-child(n + 25):nth-child(-n + 27):not(:nth-last-child(-n + 3)) {
bottom: calc(100% + 140px) !important; /* Row 10 */
}
/* Extended hover area with blur effect */
#zen-sidebar-bottom-buttons:has(> :nth-child(4)):hover::after,
#zen-sidebar-bottom-buttons:has(> :nth-child(4)):has(
*:not(:nth-last-child(-n + 3))[open="true"]
)::after {
content: "";
position: absolute !important;
top: -300px !important; /* Change height according to number of buttons */
left: 1px !important;
right: 1px !important;
bottom: 0 !important;
z-index: -1 !important;
pointer-events: auto !important;
mask: linear-gradient(to top, black, black, transparent);
border-radius: var(--zen-native-inner-radius);
backdrop-filter: blur(20px);
}
}
}

BIN
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 381 KiB

4
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/readme.md Normal file
View file

@ -0,0 +1,4 @@
Stash your sidebar bottom buttons away and show them on hover.
Note : The last three buttons are chosen to be always shown

14
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/theme.json Normal file
View file

@ -0,0 +1,14 @@
{
"id": "dec34bcf-3c6b-4209-9f45-c201c9311aec",
"name": "Sidebar Button Stash",
"description": "Provides a way to hide bottom sidebar buttons and show them on hover",
"homepage": "https://github.com/Tanay-Kar/Zen-Themes/tree/main/Sidebar%20Button%20Stash",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/image.png",
"author": "Tanay-Kar",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-03",
"updatedAt": "2025-03-03"
}