mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2026-02-03 22:10:30 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix: Auto Hide - Navbar with bookmarkbar

Browse source
This commit is contained in:
alstjr7375 2022-07-17 02:39:58 +09:00
parent 881f2ef78a
commit bf6f69ceae
4 changed files with 98 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

133
css/leptonChrome.css
View file

@ -5449,19 +5449,72 @@
--uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
--uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height));
}
#PersonalToolbar:not([customizing]) {
position: relative;
z-index: 2;
}
}
@supports -moz-bool-pref("userChrome.autohide.navbar") {
:root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) {
transform: translateY(var(--uc-navbar-hide-height));
}
:root:is([customizing], [chromehidden*="toolbar"])
:where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) {
transform: none !important;
opacity: 1 !important;
}
#navigator-toolbox > div {
display: contents;
}
#nav-bar:not([customizing]) {
--uc-autohide-navbar-delay: 600ms;
position: relative;
z-index: 2;
opacity: 0;
}
#TabsToolbar {
position: relative;
z-index: 3;
}
#navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar {
transform: translateY(0);
opacity: 1;
}
/* Move up the content view */
:root[sessionrestored]:not([inFullscreen]) > body > #browser {
margin-top: var(--uc-navbar-hide-height);
}
:root[sessionrestored] #nav-bar:-moz-lwtheme {
transition: var(--ext-theme-background-transition);
}
@media (prefers-reduced-motion: no-preference) {
#nav-bar:not([customizing]) {
transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay),
var(--ext-theme-background-transition) !important;
}
#navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar {
transition-delay: 0s !important;
}
}
}
@supports -moz-bool-pref("userChrome.autohide.bookmarkbar") {
#PersonalToolbar {
#PersonalToolbar:not([customizing]) {
--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;
--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);
@ -5481,7 +5534,7 @@
/* right top */
}
#nav-bar:focus-within + #PersonalToolbar,
#nav-bar:focus-within + #PersonalToolbar:not([customizing]),
#navigator-toolbox:hover #PersonalToolbar:not([customizing]) {
transform: translateY(0%);
opacity: 1;
@ -5489,75 +5542,17 @@
@media (prefers-reduced-motion: no-preference) {
#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);
transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay), min-height 170ms ease-out,
max-height 170ms ease-out, var(--ext-theme-background-transition) !important;
}
#nav-bar:focus-within + #PersonalToolbar,
#nav-bar:focus-within + #PersonalToolbar:not([customizing]),
#navigator-toolbox:hover #PersonalToolbar:not([customizing]) {
transition-delay: 0s;
}
}
}
@supports -moz-bool-pref("userChrome.autohide.navbar") {
#navigator-toolbox > div {
display: contents;
}
:root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) {
transform: translateY(var(--uc-navbar-hide-height));
}
:root:is([customizing], [chromehidden*="toolbar"])
:where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) {
transform: none !important;
opacity: 1 !important;
}
#nav-bar:not([customizing]) {
opacity: 0;
transition: transform 400ms ease 1.8s, opacity 400ms ease 1.8s !important;
position: relative;
z-index: 2;
}
#TabsToolbar {
position: relative;
z-index: 3;
}
/* Show when toolbox is focused, like when urlbar has received focus */
#navigator-toolbox:focus-within > .browser-toolbar {
transform: translateY(0);
opacity: 1;
transition-duration: 500ms, 200ms !important;
transition-delay: 0s !important;
}
/* Show when toolbox is hovered */
#titlebar:hover ~ .browser-toolbar,
#nav-bar:hover,
#nav-bar:hover + #PersonalToolbar {
transform: translateY(0);
opacity: 1;
transition-duration: 500ms, 200ms !important;
transition-delay: 0s !important;
}
/* Bookmarks toolbar needs so extra rules */
#PersonalToolbar {
transition: transform 400ms ease 1.8s !important;
position: relative;
z-index: 1;
}
/* Move up the content view */
:root[sessionrestored]:not([inFullscreen]) > body > #browser {
margin-top: var(--uc-navbar-hide-height);
}
}
@supports -moz-bool-pref("userChrome.autohide.sidebar") {
#sidebar-box {
min-width: var(--uc-sidebar-width) !important;

20
src/autohide/_bookmarkbar.scss
View file

@ -1,14 +1,8 @@
// Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css
#PersonalToolbar {
#PersonalToolbar:not([customizing]) {
--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));
@ -36,7 +30,7 @@
/* right top */
}
#nav-bar:focus-within + #PersonalToolbar,
#nav-bar:focus-within + #PersonalToolbar:not([customizing]),
#navigator-toolbox:hover #PersonalToolbar:not([customizing]) {
transform: translateY(0%);
opacity: 1;
@ -44,12 +38,12 @@
@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);
// --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay),
min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important;
}
#nav-bar:focus-within + #PersonalToolbar,
#nav-bar:focus-within + #PersonalToolbar:not([customizing]),
#navigator-toolbox:hover #PersonalToolbar:not([customizing]) {
transition-delay: 0s;
}

5
src/autohide/_common.scss
View file

@ -3,4 +3,9 @@
--uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
--uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height));
}
#PersonalToolbar:not([customizing]) {
position: relative;
z-index: 2;
}
}

48
src/autohide/_navbar.scss
View file

@ -1,6 +1,3 @@
#navigator-toolbox > div {
display: contents;
}
:root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) {
transform: translateY(var(--uc-navbar-hide-height));
}
@ -8,44 +5,43 @@
transform: none !important;
opacity: 1 !important;
}
#navigator-toolbox > div {
display: contents;
}
#nav-bar:not([customizing]) {
opacity: 0;
transition: transform 400ms ease 1.8s, opacity 400ms ease 1.8s !important;
--uc-autohide-navbar-delay: 600ms;
position: relative;
z-index: 2;
opacity: 0;
}
#TabsToolbar {
position: relative;
z-index: 3;
}
/* Show when toolbox is focused, like when urlbar has received focus */
#navigator-toolbox:focus-within > .browser-toolbar {
#navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar {
transform: translateY(0);
opacity: 1;
transition-duration: 500ms, 200ms !important;
transition-delay: 0s !important;
}
/* Show when toolbox is hovered */
#titlebar:hover ~ .browser-toolbar,
#nav-bar:hover,
#nav-bar:hover + #PersonalToolbar {
transform: translateY(0);
opacity: 1;
transition-duration: 500ms, 200ms !important;
transition-delay: 0s !important;
}
/* Bookmarks toolbar needs so extra rules */
#PersonalToolbar {
transition: transform 400ms ease 1.8s !important;
position: relative;
z-index: 1;
}
/* Move up the content view */
:root[sessionrestored]:not([inFullscreen]) > body > #browser{
margin-top: var(--uc-navbar-hide-height);
}
:root[sessionrestored] #nav-bar:-moz-lwtheme {
transition: var(--ext-theme-background-transition);
}
@include Animate {
#nav-bar:not([customizing]) {
transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay),
var(--ext-theme-background-transition) !important;
}
#navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar {
transition-delay: 0s !important;
}
}