diff --git a/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/chrome.css b/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/chrome.css new file mode 100644 index 00000000..30d9ce7f --- /dev/null +++ b/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/chrome.css @@ -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); + } + } +} diff --git a/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/image.png b/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/image.png new file mode 100644 index 00000000..9a668a0e Binary files /dev/null and b/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/image.png differ diff --git a/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/readme.md b/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/readme.md new file mode 100644 index 00000000..577da743 --- /dev/null +++ b/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/readme.md @@ -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 diff --git a/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/theme.json b/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/theme.json new file mode 100644 index 00000000..f83dc520 --- /dev/null +++ b/themes/dec34bcf-3c6b-4209-9f45-c201c9311aec/theme.json @@ -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" +} \ No newline at end of file