mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-14 20:23:53 +02:00
115 lines
4.3 KiB
CSS
115 lines
4.3 KiB
CSS
|
|
@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);
|
|
}
|
|
}
|
|
}
|