From d74fd2a1f2f6db7e3a57f38b5632ddc6776b990a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 27 Jul 2022 22:15:44 +0900 Subject: [PATCH] Add: Auto Hide - Infobar --- css/leptonChrome.css | 74 ++++++++++++++++++++++++++++---------- src/autohide/_common.scss | 2 +- src/autohide/_index.scss | 3 ++ src/autohide/_infobar.scss | 27 ++++++++++++++ src/padding/_info_bar.scss | 41 +++++++++++++-------- 5 files changed, 114 insertions(+), 33 deletions(-) create mode 100644 src/autohide/_infobar.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 89601c5..f9e4e04 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -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; diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index e6df5b6..a4a46d4 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -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; } diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index bc69cc0..8ea7d1a 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -21,5 +21,8 @@ @include Option("userChrome.autohide.bookmarkbar") { @import "bookmarkbar"; } +@include Option("userChrome.autohide.infobar") { + @import "infobar"; +} @import "sidebar"; diff --git a/src/autohide/_infobar.scss b/src/autohide/_infobar.scss new file mode 100644 index 0000000..77536b7 --- /dev/null +++ b/src/autohide/_infobar.scss @@ -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; + } +} diff --git a/src/padding/_info_bar.scss b/src/padding/_info_bar.scss index 409550c..098e5b2 100644 --- a/src/padding/_info_bar.scss +++ b/src/padding/_info_bar.scss @@ -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 */