autohide sidebar: handle .sidebar-browser-stack wrapper
This commit is contained in:
+32
-27
@@ -37,11 +37,10 @@ See the above repository for updates as well as full license text. */
|
|||||||
&:is([positionend],[sidebar-positionend]):not(:-moz-locale-dir(rtl)){
|
&:is([positionend],[sidebar-positionend]):not(:-moz-locale-dir(rtl)){
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
> :-moz-locale-dir(rtl){
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.sidebar-browser-stack{
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
#main-window[sizemode="fullscreen"] #browser{ --uc-sidebar-width: 1px; }
|
#main-window[sizemode="fullscreen"] #browser{ --uc-sidebar-width: 1px; }
|
||||||
|
|
||||||
#sidebar-splitter{ display: none }
|
#sidebar-splitter{ display: none }
|
||||||
@@ -64,9 +63,14 @@ See the above repository for updates as well as full license text. */
|
|||||||
transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
|
transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
|
||||||
min-width: var(--uc-sidebar-width) !important;
|
min-width: var(--uc-sidebar-width) !important;
|
||||||
will-change: min-width;
|
will-change: min-width;
|
||||||
|
direction: ltr;
|
||||||
|
&:-moz-locale-dir(rtl){
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
#sidebar-box:hover > #sidebar-header,
|
#sidebar-box:hover > #sidebar-header,
|
||||||
#sidebar-box:hover > #sidebar{
|
#sidebar-box:hover > #sidebar,
|
||||||
|
#sidebar-box:hover > .sidebar-browser-stack > #sidebar{
|
||||||
min-width: var(--uc-sidebar-hover-width) !important;
|
min-width: var(--uc-sidebar-hover-width) !important;
|
||||||
transition-delay: 0ms !important;
|
transition-delay: 0ms !important;
|
||||||
}
|
}
|
||||||
@@ -114,30 +118,31 @@ See the above repository for updates as well as full license text. */
|
|||||||
contain: size;
|
contain: size;
|
||||||
box-shadow: var(--content-area-shadow);
|
box-shadow: var(--content-area-shadow);
|
||||||
}
|
}
|
||||||
:root:not([inDOMFullscreen]) #tabbrowser-tabbox:not([sidebar-positionend]){
|
#sidebar{
|
||||||
margin-inline: var(--uc-sidebar-width) 0;
|
|
||||||
}
|
|
||||||
#sidebar-box:not([sidebar-positionend]){
|
|
||||||
position: absolute !important;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
|
|
||||||
&:hover{
|
|
||||||
min-width: var(--uc-sidebar-hover-width) !important;
|
|
||||||
transition-delay: 0ms !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#sidebar,#sidebar-header{
|
|
||||||
min-width: var(--uc-sidebar-hover-width) !important;
|
min-width: var(--uc-sidebar-hover-width) !important;
|
||||||
will-change: unset !important;
|
|
||||||
}
|
}
|
||||||
#sidebar-box[sidebar-positionend] > :is(#sidebar-header,#sidebar){
|
.sidebar-browser-stack{
|
||||||
transform: translateX(calc(var(--uc-sidebar-hover-width) - var(--uc-sidebar-width)));
|
overflow: hidden;
|
||||||
transition-property: transform !important;
|
width: 100%;
|
||||||
}
|
transition: width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay);
|
||||||
#sidebar-box[sidebar-positionend]:hover > :is(#sidebar-header,#sidebar){
|
direction: ltr;
|
||||||
transform: translateX(0);
|
&:hover{
|
||||||
transition-delay: 0ms !important;
|
transition-delay: 0ms;
|
||||||
|
width: var(--uc-sidebar-hover-width);
|
||||||
}
|
}
|
||||||
|
&:-moz-locale-dir(rtl){
|
||||||
|
transition-property: transform,width !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#sidebar-box[sidebar-positionend]:hover :is(#sidebar-header,#sidebar):-moz-locale-dir(ltr){
|
||||||
|
transform: translateX(0);
|
||||||
|
transition-delay: 0ms !important;
|
||||||
|
}
|
||||||
|
#sidebar-box:not([sidebar-positionend]):hover .sidebar-browser-stack:-moz-locale-dir(rtl){
|
||||||
|
transform: translateX(calc(-1 * var(--uc-sidebar-hover-width) + var(--uc-sidebar-width)));
|
||||||
|
}
|
||||||
|
#sidebar-box[sidebar-positionend]:hover > .sidebar-browser-stack:-moz-locale-dir(rtl){
|
||||||
|
transform: translateX(calc(var(--uc-sidebar-hover-width) - var(--uc-sidebar-width)));
|
||||||
|
transition-delay: 0ms !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user