Fix floating compact mode: revert logic in ZenCompactMode.mjs, use invisible padding.

This commit is contained in:
brahim
2024-10-10 13:54:37 +02:00
parent 945ee1245e
commit 34e47d79dd

View File

@@ -31,21 +31,45 @@
position: absolute;
height: calc(100% - var(--zen-element-separation) * 2);
z-index: 9;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
right: calc(100% - var(--zen-element-separation));
top: var(--zen-element-separation);
opacity: 0;
padding-left: calc(var(--zen-element-separation) + 2px) !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
padding-left: unset !important;
padding-right: calc(var(--zen-element-separation) + 2px) !important;
left: calc(100% - var(--zen-element-separation) + 1px);
right: unset;
}
}
#titlebar {
background: var(--zen-themed-toolbar-bg) !important;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
border-radius: calc(var(--zen-border-radius) + 2px);
border: 1px solid var(--zen-colors-border);
border-left-width: 0;
padding: var(--zen-toolbox-padding) !important;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
right: calc(100% - var(--zen-element-separation) - 2px);
top: var(--zen-element-separation);
opacity: 0;
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
left: calc(100% - var(--zen-element-separation) + 2px);
right: unset;
}
position: relative;
}
/* Mark: toolbox as collapsed */
#navigator-toolbox:not(
#navigator-toolbox:is(
#navigator-toolbox[zen-user-hover='true'][zen-has-hover],
#navigator-toolbox[zen-user-hover='true']:focus-within,
#navigator-toolbox[zen-user-hover='true'][movingtab],
#navigator-toolbox[zen-user-hover='true'][flash-popup],
#navigator-toolbox[zen-user-hover='true'][has-popup-menu],
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
#navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])
)
) {
max-width: calc(var(--zen-toolbox-max-width) + var(--zen-element-separation) + 2px) !important;
min-width: calc(var(--zen-toolbox-max-width) + var(--zen-element-separation) + 2px) !important;
}
#navigator-toolbox:hover,
@@ -60,9 +84,9 @@
#navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) {
opacity: 1;
transform: translateX(100%);
transform: translateX(calc(100% - var(--zen-element-separation)));
#browser:has(#navigator-toolbox[zen-right-side='true']) & {
transform: translateX(-100%);
transform: translateX(calc(-100% + var(--zen-element-separation)));
}
}
}