diff --git a/css/leptonChrome.css b/css/leptonChrome.css index d1e630e..c2f7ccd 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -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; } diff --git a/src/autohide/_bookmarkbar.scss b/src/autohide/_bookmarkbar.scss new file mode 100644 index 0000000..cc5a718 --- /dev/null +++ b/src/autohide/_bookmarkbar.scss @@ -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; + } +} diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss index 59c0a22..baa0157 100644 --- a/src/sidebar/_overlap.scss +++ b/src/sidebar/_overlap.scss @@ -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);