Add: Auto Hide - Fill URL bar

This commit is contained in:
alstjr7375 2022-08-11 09:34:31 +09:00
parent da23a8007b
commit d3735aadf7
5 changed files with 131 additions and 15 deletions

View file

@ -4144,9 +4144,16 @@
@supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.one_liner") {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
:root { :root {
--uc-navbar-size: 40vw; --uc-navbar-width-origin: 40vw;
--uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); --uc-navbar-width: var(--uc-navbar-width-origin);
--uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px)); --uc-tabbar-width: calc(100vw - var(--uc-navbar-width));
--uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px));
}
@supports -moz-bool-pref("userChrome.autohide.fill_urlbar") {
:root {
--uc-navbar-width-origin: 50vw;
--uc-navbar-width: 24em;
}
} }
#nav-bar { #nav-bar {
@ -4223,7 +4230,7 @@
} }
#nav-bar { #nav-bar {
margin-inline-end: var(--uc-tabbar-size) !important; margin-inline-end: var(--uc-tabbar-width) !important;
} }
.titlebar-spacer[type="pre-tabs"] { .titlebar-spacer[type="pre-tabs"] {
@ -4236,7 +4243,7 @@
} }
#nav-bar { #nav-bar {
margin-inline-start: var(--uc-tabbar-size) !important; margin-inline-start: var(--uc-tabbar-width) !important;
} }
.titlebar-spacer[type="post-tabs"] { .titlebar-spacer[type="post-tabs"] {
@ -4247,9 +4254,16 @@
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (min-width: 1100px) { @media screen and (min-width: 1100px) {
:root { :root {
--uc-navbar-size: 40vw; --uc-navbar-width-origin: 40vw;
--uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); --uc-navbar-width: var(--uc-navbar-width-origin);
--uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px)); --uc-tabbar-width: calc(100vw - var(--uc-navbar-width));
--uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px));
}
@supports -moz-bool-pref("userChrome.autohide.fill_urlbar") {
:root {
--uc-navbar-width-origin: 50vw;
--uc-navbar-width: 24em;
}
} }
#nav-bar { #nav-bar {
@ -4326,7 +4340,7 @@
} }
#nav-bar { #nav-bar {
margin-inline-end: var(--uc-tabbar-size) !important; margin-inline-end: var(--uc-tabbar-width) !important;
} }
.titlebar-spacer[type="pre-tabs"] { .titlebar-spacer[type="pre-tabs"] {
@ -4339,7 +4353,7 @@
} }
#nav-bar { #nav-bar {
margin-inline-start: var(--uc-tabbar-size) !important; margin-inline-start: var(--uc-tabbar-width) !important;
} }
.titlebar-spacer[type="post-tabs"] { .titlebar-spacer[type="post-tabs"] {
@ -7255,6 +7269,67 @@
} }
} }
} }
@supports -moz-bool-pref("userChrome.autohide.fill_urlbar") {
#nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
-moz-box-ordinal-group: 0;
min-width: calc(
var(--uc-navbar-width, 100vw) -
(2 * var(--urlbar-margin-inline) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))
) !important;
}
@supports -moz-bool-pref("userChrome.tabbar.one_liner") {
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
--uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin));
}
}
@media (prefers-reduced-motion: no-preference) {
@supports -moz-bool-pref("userChrome.tabbar.one_liner") {
@supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
#nav-bar {
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
transition-delay: 0s !important;
}
}
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
#nav-bar {
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
transition-delay: 0s !important;
}
}
}
}
@supports not -moz-bool-pref("userChrome.tabbar.one_liner") {
#urlbar-container {
transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
transition-delay: 0s !important;
}
}
@supports -moz-bool-pref("userChrome.tabbar.one_liner") {
@supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
#urlbar-container {
transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
transition-delay: 0s !important;
}
}
}
}
}
}
/** Hidden ********************************************************************/ /** Hidden ********************************************************************/
@supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") {
@supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports -moz-bool-pref("userChrome.hidden.tabbar") {

View file

@ -0,0 +1,30 @@
#nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
-moz-box-ordinal-group: 0;
min-width: calc(var(--uc-navbar-width, 100vw) - ((2 * var(--urlbar-margin-inline)) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))) !important;
}
@include Option("userChrome.tabbar.one_liner") {
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
--uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin));
}
}
@include Animate {
@include OneLiner {
#nav-bar {
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
transition-delay: 0s !important;
}
}
@include OneLinerNavbarContent {
#urlbar-container {
transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
transition-delay: 0s !important;
}
}
}

View file

@ -29,3 +29,7 @@
} }
@import "sidebar"; @import "sidebar";
@include Option("userChrome.autohide.fill_urlbar") {
@import "fill_urlbar";
}

View file

@ -1,8 +1,14 @@
:root { :root {
--uc-navbar-size: 40vw; --uc-navbar-width-origin: 40vw;
--uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); --uc-navbar-width: var(--uc-navbar-width-origin);
--uc-tabbar-width: calc(100vw - var(--uc-navbar-width));
--uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px)); --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px));
@include Option("userChrome.autohide.fill_urlbar") {
--uc-navbar-width-origin: 50vw;
--uc-navbar-width: 24em;
}
} }
#nav-bar { #nav-bar {
@ -79,7 +85,7 @@ toolbarspring.chromeclass-toolbar-additional {
margin-inline-start: var(--uc-navbar-margin) !important; margin-inline-start: var(--uc-navbar-margin) !important;
} }
#nav-bar { #nav-bar {
margin-inline-end: var(--uc-tabbar-size) !important; margin-inline-end: var(--uc-tabbar-width) !important;
} }
.titlebar-spacer[type="pre-tabs"] { .titlebar-spacer[type="pre-tabs"] {
display: none !important; display: none !important;
@ -90,7 +96,7 @@ toolbarspring.chromeclass-toolbar-additional {
margin-inline-end: var(--uc-navbar-margin) !important; margin-inline-end: var(--uc-navbar-margin) !important;
} }
#nav-bar { #nav-bar {
margin-inline-start: var(--uc-tabbar-size) !important; margin-inline-start: var(--uc-tabbar-width) !important;
} }
.titlebar-spacer[type="post-tabs"] { .titlebar-spacer[type="post-tabs"] {
display: none !important; display: none !important;

View file

@ -81,6 +81,7 @@ user_pref("userChrome.rounding.square_tab", false);
// user_pref("userChrome.autohide.navbar", true); // user_pref("userChrome.autohide.navbar", true);
// user_pref("userChrome.autohide.bookmarkbar", true); // user_pref("userChrome.autohide.bookmarkbar", true);
// user_pref("userChrome.autohide.sidebar", true); // user_pref("userChrome.autohide.sidebar", true);
// user_pref("userChrome.autohide.fill_urlbar", true);
// user_pref("userChrome.autohide.back_button", true); // user_pref("userChrome.autohide.back_button", true);
// user_pref("userChrome.autohide.forward_button", true); // user_pref("userChrome.autohide.forward_button", true);
// user_pref("userChrome.autohide.page_action", true); // user_pref("userChrome.autohide.page_action", true);