mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-06 02:30:54 -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) {
@supports -moz-bool-pref("userChrome.decoration.animate") {
#navigator-toolbox {
will-change: margin-top, margin-bottom, background-color !important;
transition: margin-top 1s ease,
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) {
transition-delay: 0s !important;
transition-delay: 0s, 0s, 0.2s !important;
}
#navigator-toolbox[inFullscreen="true"] {
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);
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") {
#navigator-toolbox {
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) {
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.infobar") and (-moz-bool-pref: "userChrome.autohide.toolbar_overlap") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userChrome.decoration.animate") {
#navigator-toolbox {
will-change: margin-top, margin-bottom, background-color !important;
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) {
transition-delay: 0s !important;
transition-delay: 0s, 0s, 0.2s !important;
}
#navigator-toolbox[inFullscreen="true"] {
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")),
@ -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")) {
#navigator-toolbox {
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) {
transition-delay: 0s !important;

24
css/leptonChromeESR.css generated
View file

@ -10351,23 +10351,39 @@
@media (prefers-reduced-motion: no-preference) {
@supports -moz-bool-pref("userChrome.decoration.animate") {
#navigator-toolbox {
will-change: margin-top, margin-bottom, background-color !important;
transition: margin-top 1s ease,
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) {
transition-delay: 0s !important;
transition-delay: 0s, 0s, 0.2s !important;
}
#navigator-toolbox[inFullscreen="true"] {
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);
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") {
#navigator-toolbox {
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) {
transition-delay: 0s !important;

29
src/autohide/_toolbar_overlap.scss
View file

@ -1,23 +1,38 @@
@import "../decoration/animate_common";
#navigator-toolbox {
--uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0));
margin-bottom: var(--uc-toolbar-hide-height) !important;
@include Animate {
@include Option("userChrome.decoration.animate") {
transition: margin-top 1s ease,
margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
will-change: margin-top, margin-bottom, background-color !important;
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) {
transition-delay: 0s !important;
transition-delay: 0s, 0s, 0.2s !important;
}
&[inFullscreen="true"] {
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);
transition: $toolbox-transition-margin-top-fullscreen,
$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") {
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) {
transition-delay: 0s !important;

20
src/decoration/_animate.scss
View file

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