Fix: Auto Hide - z-index

This commit is contained in:
alstjr7375 2022-07-14 10:35:55 +09:00
parent 9d5ba38ab2
commit 2320f139ef
3 changed files with 60 additions and 4 deletions

View file

@ -5347,7 +5347,7 @@
--uc-sidebar-shadow-color: #28282f;
--uc-autohide-sidebar-delay: 600ms;
/* Wait 0.6s before hiding sidebar */
z-index: 1000 !important;
z-index: 1 !important;
position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color);
}
@ -5455,7 +5455,7 @@
#PersonalToolbar:not([customizing]) {
position: relative;
z-index: 1;
z-index: 2;
--uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
--uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1);
background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
@ -5478,7 +5478,6 @@
#nav-bar:focus-within + #PersonalToolbar,
#navigator-toolbox:hover #PersonalToolbar:not([customizing]) {
z-index: 1001;
transform: translateY(0%);
opacity: 1;
}

View file

@ -0,0 +1,57 @@
// Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css
#PersonalToolbar {
--uc-bm-height: calc(21px + (2 * var(--bookmark-block-padding, 4px))); /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */
--uc-bm-hide-height: calc(-1 * var(--uc-bm-height));
--uc-autohide-bookmarkbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
}
#PersonalToolbar:not([customizing]) {
position: relative;
z-index: 2;
// Titlebar + Navbar
// --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding));
--uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
--uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1);
background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
background-position: top left, top left, var(--lwt-background-alignment, top left);
background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y), var(--uc-bg-y);
background-image: var(--toolbar-bgimage),
linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),
var(--lwt-header-image,
var(--lwt-additional-images)) !important;
border-bottom: 1px solid var(--chrome-content-separator-color) !important;
margin-bottom: var(--uc-bm-hide-height);
transform: translateY(-100%);
opacity: 0;
}
:root[lwtheme-image] #navigator-toolbox:-moz-lwtheme #PersonalToolbar:not([customizing]) {
background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
background-repeat: var(--lwt-background-tiling) !important;
background-position: var(--lwt-background-alignment) !important;
/* right top */
}
#nav-bar:focus-within + #PersonalToolbar,
#navigator-toolbox:hover #PersonalToolbar:not([customizing]) {
transform: translateY(0%);
opacity: 1;
}
@include Animate {
#PersonalToolbar:not([customizing]) {
transition-property: transform, opacity;
transition-duration: 0.25s;
transition-timing-function: var(--animation-easing-function);
transition-delay: var(--uc-autohide-bookmarkbar-delay);
}
#nav-bar:focus-within + #PersonalToolbar,
#navigator-toolbox:hover #PersonalToolbar:not([customizing]) {
transition-delay: 0s;
}
}

View file

@ -12,7 +12,7 @@
--uc-sidebar-shadow-color: #28282F;
--uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
z-index: 1000 !important;
z-index: 1 !important;
position: relative !important;
box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color);