mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Add theme: Sidebar Button Stash
This commit is contained in:
parent
cdccfde6b2
commit
ac24f2eaea
4 changed files with 133 additions and 0 deletions
115
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/chrome.css
Normal file
115
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/chrome.css
Normal 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
BIN
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/image.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 381 KiB |
4
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/readme.md
Normal file
4
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/readme.md
Normal 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
14
themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/theme.json
Normal 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"
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue