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

Fix: Autohide - Transition delay #871

Browse source
This commit is contained in:
alstjr7375 2024-03-02 23:03:16 +09:00
parent ff92ab01be
commit e0b9f19892
5 changed files with 96 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

46
css/leptonChrome.css generated
View file

@ -9916,23 +9916,39 @@
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
@supports -moz-bool-pref("userChrome.decoration.animate") { @supports -moz-bool-pref("userChrome.decoration.animate") {
#navigator-toolbox { #navigator-toolbox {
will-change: margin-top, margin-bottom, background-color !important;
transition: margin-top 1s ease, transition: margin-top 1s ease,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay); var(--uc-autohide-toolbar-delay),
background-color 0.2s var(--animation-easing-function) !important;
}
#navigator-toolbox:-moz-window-inactive {
transition: margin-top 1s ease,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
background-color 0.5s var(--animation-easing-function) !important;
} }
#navigator-toolbox:is(:hover, :focus-within) { #navigator-toolbox:is(:hover, :focus-within) {
transition-delay: 0s !important; transition-delay: 0s, 0s, 0.2s !important;
} }
#navigator-toolbox[inFullscreen="true"] { #navigator-toolbox[inFullscreen="true"] {
transition: margin-top 1.3s var(--animation-easing-function) 50ms, transition: margin-top 1.3s var(--animation-easing-function) 50ms,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay); var(--uc-autohide-toolbar-delay),
background-color 0.2s var(--animation-easing-function) !important;
}
#navigator-toolbox[inFullscreen="true"]:-moz-window-inactive {
transition: margin-top 1.3s var(--animation-easing-function) 50ms,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
background-color 0.5s var(--animation-easing-function) !important;
} }
} }
@supports not -moz-bool-pref("userChrome.decoration.animate") { @supports not -moz-bool-pref("userChrome.decoration.animate") {
#navigator-toolbox { #navigator-toolbox {
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay); var(--uc-autohide-toolbar-delay),
background-color 0.2s var(--animation-easing-function) !important;
} }
#navigator-toolbox:is(:hover, :focus-within) { #navigator-toolbox:is(:hover, :focus-within) {
transition-delay: 0s !important; transition-delay: 0s !important;
@ -24215,15 +24231,28 @@
(-moz-bool-pref: "userChrome.autohide.bookmarkbar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate"), (-moz-bool-pref: "userChrome.autohide.bookmarkbar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate"),
(-moz-bool-pref: "userChrome.autohide.infobar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate") { (-moz-bool-pref: "userChrome.autohide.infobar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate") {
#navigator-toolbox { #navigator-toolbox {
will-change: margin-top, margin-bottom, background-color !important;
transition: margin-top 1s ease, transition: margin-top 1s ease,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
background-color 0.2s var(--animation-easing-function) !important;
}
#navigator-toolbox:-moz-window-inactive {
transition: margin-top 1s ease,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
background-color 0.5s var(--animation-easing-function) !important;
} }
#navigator-toolbox:is(:hover, :focus-within) { #navigator-toolbox:is(:hover, :focus-within) {
transition-delay: 0s !important; transition-delay: 0s, 0s, 0.2s !important;
} }
#navigator-toolbox[inFullscreen="true"] { #navigator-toolbox[inFullscreen="true"] {
transition: margin-top 1.3s var(--animation-easing-function) 50ms, transition: margin-top 1.3s var(--animation-easing-function) 50ms,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
background-color 0.2s var(--animation-easing-function) !important;
}
#navigator-toolbox[inFullscreen="true"]:-moz-window-inactive {
transition: margin-top 1.3s var(--animation-easing-function) 50ms,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
background-color 0.5s var(--animation-easing-function) !important;
} }
} }
@media (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (not (-moz-bool-pref: "userChrome.decoration.animate")), @media (-moz-bool-pref: "userChrome.autohide.tabbar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (not (-moz-bool-pref: "userChrome.decoration.animate")),
@ -24232,7 +24261,8 @@
(-moz-bool-pref: "userChrome.autohide.infobar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (not (-moz-bool-pref: "userChrome.decoration.animate")) { (-moz-bool-pref: "userChrome.autohide.infobar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (not (-moz-bool-pref: "userChrome.decoration.animate")) {
#navigator-toolbox { #navigator-toolbox {
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay); var(--uc-autohide-toolbar-delay),
background-color 0.2s var(--animation-easing-function) !important;
} }
#navigator-toolbox:is(:hover, :focus-within) { #navigator-toolbox:is(:hover, :focus-within) {
transition-delay: 0s !important; transition-delay: 0s !important;

24
css/leptonChromeESR.css generated
View file

@ -10351,23 +10351,39 @@
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
@supports -moz-bool-pref("userChrome.decoration.animate") { @supports -moz-bool-pref("userChrome.decoration.animate") {
#navigator-toolbox { #navigator-toolbox {
will-change: margin-top, margin-bottom, background-color !important;
transition: margin-top 1s ease, transition: margin-top 1s ease,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay); var(--uc-autohide-toolbar-delay),
background-color 0.2s var(--animation-easing-function) !important;
}
#navigator-toolbox:-moz-window-inactive {
transition: margin-top 1s ease,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
background-color 0.5s var(--animation-easing-function) !important;
} }
#navigator-toolbox:is(:hover, :focus-within) { #navigator-toolbox:is(:hover, :focus-within) {
transition-delay: 0s !important; transition-delay: 0s, 0s, 0.2s !important;
} }
#navigator-toolbox[inFullscreen="true"] { #navigator-toolbox[inFullscreen="true"] {
transition: margin-top 1.3s var(--animation-easing-function) 50ms, transition: margin-top 1.3s var(--animation-easing-function) 50ms,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay); var(--uc-autohide-toolbar-delay),
background-color 0.2s var(--animation-easing-function) !important;
}
#navigator-toolbox[inFullscreen="true"]:-moz-window-inactive {
transition: margin-top 1.3s var(--animation-easing-function) 50ms,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
background-color 0.5s var(--animation-easing-function) !important;
} }
} }
@supports not -moz-bool-pref("userChrome.decoration.animate") { @supports not -moz-bool-pref("userChrome.decoration.animate") {
#navigator-toolbox { #navigator-toolbox {
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay); var(--uc-autohide-toolbar-delay),
background-color 0.2s var(--animation-easing-function) !important;
} }
#navigator-toolbox:is(:hover, :focus-within) { #navigator-toolbox:is(:hover, :focus-within) {
transition-delay: 0s !important; transition-delay: 0s !important;

29
src/autohide/_toolbar_overlap.scss
View file

@ -1,23 +1,38 @@
@import "../decoration/animate_common";
#navigator-toolbox { #navigator-toolbox {
--uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0)); --uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0));
margin-bottom: var(--uc-toolbar-hide-height) !important; margin-bottom: var(--uc-toolbar-hide-height) !important;
@include Animate { @include Animate {
@include Option("userChrome.decoration.animate") { @include Option("userChrome.decoration.animate") {
transition: margin-top 1s ease, will-change: margin-top, margin-bottom, background-color !important;
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); transition: $toolbox-transition-margin-top,
$toolbox-transition-margin-bottom,
$toolbox-transition-background-color !important;
&:-moz-window-inactive {
transition: $toolbox-transition-margin-top,
$toolbox-transition-margin-bottom,
$toolbox-transition-background-color-inactive !important;
}
&:is(:hover, :focus-within) { &:is(:hover, :focus-within) {
transition-delay: 0s !important; transition-delay: 0s, 0s, 0.2s !important;
} }
&[inFullscreen="true"] { &[inFullscreen="true"] {
transition: margin-top 1.3s var(--animation-easing-function) 50ms, transition: $toolbox-transition-margin-top-fullscreen,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); $toolbox-transition-margin-bottom,
$toolbox-transition-background-color !important;
&:-moz-window-inactive {
transition: $toolbox-transition-margin-top-fullscreen,
$toolbox-transition-margin-bottom,
$toolbox-transition-background-color-inactive !important;
}
} }
} }
@include NotOption("userChrome.decoration.animate") { @include NotOption("userChrome.decoration.animate") {
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); transition: $toolbox-transition-margin-bottom,
$toolbox-transition-background-color !important;
&:is(:hover, :focus-within) { &:is(:hover, :focus-within) {
transition-delay: 0s !important; transition-delay: 0s !important;

20
src/decoration/_animate.scss
View file

@ -1,4 +1,6 @@
/*- Background Color -------------------------------------------------------*/ /*- Background Color -------------------------------------------------------*/
@import "./animate_common";
//-- Mixin --------------------------------------------------------------------- //-- Mixin ---------------------------------------------------------------------
@mixin _animate_bgColor($duration, $presudo: "") { @mixin _animate_bgColor($duration, $presudo: "") {
button#{$presudo}, button#{$presudo},
@ -127,7 +129,7 @@ xul|search-textbox.tabsFilter,
/*- Titlebar & Full Screen -------------------------------------------------*/ /*- Titlebar & Full Screen -------------------------------------------------*/
#titlebar { #titlebar {
will-change: background-color !important; will-change: background-color !important;
transition: background-color 0.2s var(--animation-easing-function) !important; transition: $toolbox-transition-background-color !important;
&:-moz-window-inactive { &:-moz-window-inactive {
transition: background-color 0.5s var(--animation-easing-function) !important; transition: background-color 0.5s var(--animation-easing-function) !important;
@ -136,13 +138,13 @@ xul|search-textbox.tabsFilter,
#navigator-toolbox { #navigator-toolbox {
/* Full screen out */ /* Full screen out */
will-change: margin-top, background-color !important; will-change: margin-top, background-color !important;
transition: margin-top 1s ease, transition: $toolbox-transition-margin-top,
background-color 0.2s var(--animation-easing-function) !important; $toolbox-transition-background-color !important;
transform-origin: top; transform-origin: top;
&:-moz-window-inactive { &:-moz-window-inactive {
transition: margin-top 1s ease, transition: $toolbox-transition-margin-top,
background-color 0.5s var(--animation-easing-function) !important; $toolbox-transition-background-color-inactive !important;
} }
&[inFullscreen="true"] { &[inFullscreen="true"] {
@ -153,11 +155,11 @@ xul|search-textbox.tabsFilter,
/* Full screen navbar not hover */ /* Full screen navbar not hover */
// transition: margin-top 0.3s var(--animation-easing-function) 50ms; // transition: margin-top 0.3s var(--animation-easing-function) 50ms;
transition: margin-top 1.3s var(--animation-easing-function) 50ms, transition: $toolbox-transition-margin-top-fullscreen,
background-color 0.2s var(--animation-easing-function) !important; $toolbox-transition-background-color !important;
&:-moz-window-inactive { &:-moz-window-inactive {
transition: margin-top 1.3s var(--animation-easing-function) 50ms, transition: $toolbox-transition-margin-top-fullscreen,
background-color 0.5s var(--animation-easing-function) !important; $toolbox-transition-background-color-inactive !important;
} }
&:hover { &:hover {

5
src/decoration/_animate_common.scss Normal file
View file

@ -0,0 +1,5 @@
$toolbox-transition-margin-top: margin-top 1s ease;
$toolbox-transition-margin-top-fullscreen: margin-top 1.3s var(--animation-easing-function) 50ms;
$toolbox-transition-margin-bottom: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
$toolbox-transition-background-color: background-color 0.2s var(--animation-easing-function);
$toolbox-transition-background-color-inactive: background-color 0.5s var(--animation-easing-function);