mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2026-01-01 15:00:32 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Add: Auto Hide - Infobar

Browse source
This commit is contained in:
alstjr7375 2022-07-27 22:15:44 +09:00
parent 4efe8af6ee
commit d74fd2a1f2
5 changed files with 114 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

74
css/leptonChrome.css
View file

@ -3523,44 +3523,44 @@
/*= Info Bar - Reduce Padding ================================================*/
@supports -moz-bool-pref("userChrome.padding.infobar") {
:root:not([uidensity]) #tab-notification-deck {
--infobar-message-margin: 0 4px 3px;
}
:root[uidensity="compact"] #tab-notification-deck {
--infobar-message-margin: 0 4px 2px;
}
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
margin: var(--infobar-message-margin, 0 4px 4px) !important;
}
:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
--infobar-message-vertical-margin: 3px;
--infobar-vertical-margin: 7px;
--infobar-button-vertical-margin: 3px;
}
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
:root[uidensity="compact"] #tab-notification-deck {
--infobar-message-vertical-margin: 2px;
--infobar-vertical-margin: 6px;
--infobar-button-vertical-margin: 2px;
}
:root[uidensity="touch"] #tab-notification-deck {
--infobar-message-vertical-margin: 4px;
--infobar-vertical-margin: 8px;
--infobar-button-vertical-margin: 4px;
}
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin)) !important;
}
.infobar > .icon {
margin-block: var(--infobar-vertical-margin, 8px) !important;
margin-block: var(--infobar-vertical-margin) !important;
/* Original: 8px */
}
.notification-message {
padding-block: var(--infobar-vertical-margin, 8px) !important;
padding-block: var(--infobar-vertical-margin) !important;
/* Original: 8px */
}
.notification-button-container > .notification-button {
margin-block: var(--infobar-button-vertical-margin, 4px) !important;
margin-block: var(--infobar-button-vertical-margin) !important;
/* Original: 4px */
}
.notification-close {
margin: var(--infobar-button-vertical-margin, 4px) 8px !important;
margin: var(--infobar-button-vertical-margin) 8px !important;
/* Original: 4px 8px */
}
@ -5740,7 +5740,8 @@
}
@supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref(
"userChrome.autohide.bookmarkbar"
) {
)
or -moz-bool-pref("userChrome.autohide.infobar") {
:root {
--uc-autohide-toolbar-delay: 600ms;
}
@ -5961,6 +5962,43 @@
}
}
}
@supports -moz-bool-pref("userChrome.autohide.infobar") {
#tab-notification-deck:not([customizing]) > .notificationbox-stack {
--infobar-height: calc(
25px + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px)
);
}
#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
--infobar-message-margin: 0 4px calc(-1 * var(--infobar-height));
opacity: 0;
will-change: margin-bottom, opacity;
}
#navigator-toolbox:is(:hover, :focus-within)
#tab-notification-deck:not([customizing])
> .notificationbox-stack[slot="selected"]
> notification-message {
--infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px);
margin-bottom: 0;
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
#navigator-toolbox:is(:hover, :focus-within)
#tab-notification-deck:not([customizing])
> .notificationbox-stack[slot="selected"]
> notification-message {
transition-delay: 0s !important;
}
}
}
@supports -moz-bool-pref("userChrome.autohide.sidebar") {
#sidebar-box {
min-width: var(--uc-sidebar-width) !important;

2
src/autohide/_common.scss
View file

@ -9,7 +9,7 @@
}
}
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar") {
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") {
:root {
--uc-autohide-toolbar-delay: 600ms;
}

3
src/autohide/_index.scss
View file

@ -21,5 +21,8 @@
@include Option("userChrome.autohide.bookmarkbar") {
@import "bookmarkbar";
}
@include Option("userChrome.autohide.infobar") {
@import "infobar";
}
@import "sidebar";

27
src/autohide/_infobar.scss Normal file
View file

@ -0,0 +1,27 @@
#tab-notification-deck:not([customizing]) > .notificationbox-stack {
$infobarFixedHeight: 13px + ((1px + 5px) * 2); // button height + (button border + [button.small-button padding]) * 2
// fiexedHeight + (button margin * 2) + messagebar margin
--infobar-height: calc(#{ $infobarFixedHeight } + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px));
}
#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
--infobar-message-margin: 0 4px calc(-1 * var(--infobar-height));
opacity: 0;
will-change: margin-bottom, opacity;
}
#navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
--infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px);
margin-bottom: 0;
opacity: 1;
}
@include Animate {
#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
#navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
transition-delay: 0s !important;
}
}

41
src/padding/_info_bar.scss
View file

@ -1,32 +1,45 @@
:root:not([uidensity]) #tab-notification-deck {
--infobar-message-margin: 0 4px 3px;
}
:root[uidensity="compact"] #tab-notification-deck {
--infobar-message-margin: 0 4px 2px;
}
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
margin: var(--infobar-message-margin, 0 4px 4px) !important;
}
--infobar-message-vertical-margin: 3px;
:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
--infobar-vertical-margin: 7px;
--infobar-button-vertical-margin: 3px;
}
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
:root[uidensity="compact"] #tab-notification-deck {
--infobar-message-vertical-margin: 2px;
--infobar-vertical-margin: 6px;
--infobar-button-vertical-margin: 2px;
}
:root[uidensity="touch"] #tab-notification-deck {
--infobar-message-vertical-margin: 4px;
--infobar-vertical-margin: 8px;
--infobar-button-vertical-margin: 4px;
}
#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) {
margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin)) !important;
}
:root:not([uidensity]) #tab-notification-deck,
:root:not([uidensity]) notification-message[message-bar-type="infobar"] {
}
:root[uidensity="compact"] #tab-notification-deck,
:root[uidensity="compact"] notification-message[message-bar-type="infobar"] {
}
:root[uidensity="touch"] #tab-notification-deck,
:root[uidensity="touch"] notification-message[message-bar-type="infobar"] {
}
.infobar > .icon {
margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */
}
.notification-message {
padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */
padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */
}
.notification-button-container > .notification-button {
margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */
margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */
}
.notification-close {
margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */
margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */
}
/* Hard coded for compatibility - Disappearing phenomenon */