mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-28 21:30:59 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add: Autohide - Animation speed option #462

Browse source
This commit is contained in:
alstjr7375 2022-09-09 14:23:18 +09:00
parent 5e4aab535e
commit cc3591adc5
8 changed files with 61 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

64
css/leptonChrome.css
View file

@ -7566,6 +7566,11 @@
}
}
}
:root {
--uc-autohide-toolbar-speed: 0.25s;
--uc-autohide-toolbar-delay: 600ms;
}
@supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref(
"userChrome.autohide.bookmarkbar"
)
@ -7611,10 +7616,6 @@
"userChrome.autohide.bookmarkbar"
)
or -moz-bool-pref("userChrome.autohide.infobar") {
:root {
--uc-autohide-toolbar-delay: 600ms;
}
#navigator-toolbox {
position: relative;
z-index: 2;
@ -7646,19 +7647,22 @@
@supports -moz-bool-pref("userChrome.decoration.animate") {
#navigator-toolbox {
transition: margin-top 1s ease,
margin-bottom 0.25s 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);
}
#navigator-toolbox:is(:hover, :focus-within) {
transition-delay: 0s !important;
}
#navigator-toolbox[inFullscreen="true"] {
transition: margin-top 1.3s var(--animation-easing-function) 50ms,
margin-bottom 0.25s 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);
}
}
@supports not -moz-bool-pref("userChrome.decoration.animate") {
#navigator-toolbox {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay);
}
#navigator-toolbox:is(:hover, :focus-within) {
transition-delay: 0s !important;
@ -7857,18 +7861,21 @@
}
@media (prefers-reduced-motion: no-preference) {
#titlebar:not([customizing]) {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
background-color 1s var(--animation-easing-function) !important;
}
@supports not -moz-bool-pref("userChrome.tabbar.on_bottom") {
#TabsToolbar:not([customizing]) {
transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important;
transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay) !important;
}
}
@supports -moz-bool-pref("userChrome.tabbar.on_bottom") {
#TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) {
transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important;
transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay) !important;
}
}
@ -7925,15 +7932,18 @@
}
@media (prefers-reduced-motion: no-preference) {
#nav-bar:not([customizing]) {
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),
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
@supports -moz-bool-pref("userChrome.autohide.fill_urlbar") {
#nav-bar:not([customizing]) {
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
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),
transition: margin-inline 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),
opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
}
@ -7968,9 +7978,10 @@
@media (prefers-reduced-motion: no-preference) {
#PersonalToolbar:not([customizing]) {
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), min-height 170ms ease-out,
max-height 170ms ease-out, var(--ext-theme-background-transition) !important;
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important;
}
#navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) {
@ -8006,8 +8017,9 @@
}
@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),
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
@ -8140,7 +8152,8 @@
@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),
transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
@ -8151,7 +8164,8 @@
@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),
transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
@ -8163,7 +8177,8 @@
}
@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);
transition: min-width var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay);
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
@ -8174,7 +8189,8 @@
@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);
transition: min-width var(--uc-autohide-toolbar-speed) var(--animation-easing-function)
var(--uc-autohide-toolbar-delay);
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {

4
src/autohide/_bookmarkbar.scss
View file

@ -24,8 +24,8 @@
@include Animate {
#PersonalToolbar:not([customizing]) {
// --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
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),
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important;
}
#navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) {

9
src/autohide/_common.scss
View file

@ -1,3 +1,8 @@
:root {
--uc-autohide-toolbar-speed: 0.25s;
--uc-autohide-toolbar-delay: 600ms;
}
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") {
:root {
--uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height));
@ -24,10 +29,6 @@
}
@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") {
:root {
--uc-autohide-toolbar-delay: 600ms;
}
#navigator-toolbox {
position: relative;
z-index: 2;

4
src/autohide/_fill_urlbar.scss
View file

@ -12,7 +12,7 @@
@include Animate {
@include OneLiner {
#nav-bar {
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
#nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) {
@ -22,7 +22,7 @@
@include OneLinerNavbarContent {
#urlbar-container {
transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
transition: min-width var(--uc-autohide-toolbar-speed) 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;

4
src/autohide/_infobar.scss
View file

@ -22,8 +22,8 @@
@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),
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
opacity var(--uc-autohide-toolbar-speed) 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 {

10
src/autohide/_navbar.scss
View file

@ -12,14 +12,14 @@
@include Animate {
#nav-bar:not([customizing]) {
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),
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
@include Option("userChrome.autohide.fill_urlbar") {
transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
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),
transition: margin-inline 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),
opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
var(--ext-theme-background-transition) !important;
}
}

4
src/autohide/_tabbar.scss
View file

@ -38,13 +38,13 @@
@include Animate {
#titlebar:not([customizing]) {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
background-color 1s var(--animation-easing-function) !important;
}
#TabsToolbar:not([customizing]) {
@include _autohide_tabbar {
transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important;
transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important;
}
}

6
src/autohide/_toolbar_overlap.scss
View file

@ -5,7 +5,7 @@
@include Animate {
@include Option("userChrome.decoration.animate") {
transition: margin-top 1s ease,
margin-bottom 0.25s 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);
&:is(:hover, :focus-within) {
transition-delay: 0s !important;
@ -13,11 +13,11 @@
&[inFullscreen="true"] {
transition: margin-top 1.3s var(--animation-easing-function) 50ms,
margin-bottom 0.25s 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);
}
}
@include NotOption("userChrome.decoration.animate") {
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay);
&:is(:hover, :focus-within) {
transition-delay: 0s !important;