mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-15 15:20:33 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add: Auto Hide - Nav Bar

Browse source
This commit is contained in:
alstjr7375 2022-07-16 19:10:25 +09:00
parent 2320f139ef
commit 881f2ef78a
6 changed files with 126 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

64
css/leptonChrome.css
View file

@ -5444,6 +5444,12 @@
}
}
}
@supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.autohide.bookmarkbar") {
:root {
--uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
--uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height));
}
}
@supports -moz-bool-pref("userChrome.autohide.bookmarkbar") {
#PersonalToolbar {
--uc-bm-height: calc(21px + (2 * var(--bookmark-block-padding, 4px)));
@ -5456,7 +5462,6 @@
#PersonalToolbar:not([customizing]) {
position: relative;
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);
background-position: top left, top left, var(--lwt-background-alignment, top left);
@ -5496,6 +5501,63 @@
}
}
}
@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;

1
src/autohide/_bookmarkbar.scss
View file

@ -12,7 +12,6 @@
// 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);

6
src/autohide/_common.scss Normal file
View file

@ -0,0 +1,6 @@
@include Option("userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar") {
:root {
--uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)));
--uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height));
}
}

4
src/autohide/_index.scss
View file

@ -2,6 +2,10 @@
@import "forward_button";
}
@import "common";
@include Option("userChrome.autohide.navbar") {
@import "navbar";
}
@include Option("userChrome.autohide.bookmarkbar") {
@import "bookmarkbar";
}

51
src/autohide/_navbar.scss Normal file
View file

@ -0,0 +1,51 @@
#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);
}

3
user.js
View file

@ -71,8 +71,9 @@ user_pref("userChrome.tab.bottom_rounded_corner", true);
// user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
// user_pref("userChrome.autohide.bookmarkbar", true);
// user_pref("userChrome.autohide.forward_button", true);
// user_pref("userChrome.autohide.navbar", true);
// user_pref("userChrome.autohide.sidebar", true);
// user_pref("userChrome.autohide.forward_button", true);
// user_pref("userChrome.rounding.square_button", true);
// user_pref("userChrome.rounding.square_panel", true);