v5.7.5

yuuqilin · yuuqilin · commit 1696cd514591 · 2025-12-02T21:33:08.000+08:00
Fix tab group animations and indicator alignment, adjust Sidebery layout spacing, and add animated support for the Search Bar.
diff --git a/README.md b/README.md
@@ -20,15 +20,13 @@ https://github.com/user-attachments/assets/23d73b36-d2d4-4660-af5b-cde686d0934a
 
 ## 🆕 What's New
 
-**🦊 v5.7.4**
-* Fixed a regression introduced in v5.7.3 where Tab Split View caused background overflow inside tab groups.
+**🦊 v5.7.5**
+* Fixed an issue where the expand and collapse animations for tab groups stopped working when `uc.flex.disable-sidebery-autohide` or `Lock Sidebery` was enabled.
+* Fixed the misalignment of the expand/collapse indicator when tab group labels were centered and the label field was left empty.
+* Adjusted the spacing for Sidebery's navigation bar and pinned tab panels. Added layout support for the Sidebery Search Bar along with a new expand and collapse animation.
 
 <!-- END What's New -->
 
-**🦊 v5.7.3**
-* Fixed a regression introduced in v5.7.1 that caused Tab Split View to be displayed with an incorrect height.
-* Added expand and collapse animations for Tab Split View inside tab groups. The animations are enabled when `uc.flex.style-tab-group` is set to `2` or `4`.
-
 **🦊 v5.7.0**
 
 **New**
@@ -448,6 +446,13 @@ To change the default hotkeys, click the gear icon in the top-right corner and s
 
 <!-- END Release Note -->
 
+**v5.7.4**
+* Fixed a regression introduced in v5.7.3 where Tab Split View caused background overflow inside tab groups.
+
+**v5.7.3**
+* Fixed a regression introduced in v5.7.1 that caused Tab Split View to be displayed with an incorrect height.
+* Added expand and collapse animations for Tab Split View inside tab groups. The animations are enabled when `uc.flex.style-tab-group` is set to `2` or `4`.
+
 **v5.7.2**
 * Fixed a regression introduced in v5.7.1 where tabs inside tab groups were displayed with an incorrect height.
 
diff --git a/README_日本語版.md b/README_日本語版.md
@@ -20,12 +20,10 @@ https://github.com/user-attachments/assets/23d73b36-d2d4-4660-af5b-cde686d0934a
 
 ## 🆕 最新情報
 
-**🦊 v5.7.4**
-* v5.7.3 で発生していた、タブグループ内で「分割ビュー」の背景がはみ出してしまう不具合を修正しました。
-
-**🦊 v5.7.3**
-* v5.7.1 で発生していた「分割ビュー」の高さが正しく表示されない不具合を修正しました。
-* タブグループ内の「分割ビュー」に展開と折りたたみのアニメーションを追加しました。アニメーションは `uc.flex.style-tab-group` を `2` または `4` に設定している場合に有効になります。
+**🦊 v5.7.5**
+* `uc.flex.disable-sidebery-autohide` または `Lock Sidebery` を有効にした際に、タブグループの展開・折りたたみアニメーションが動作しなくなる問題を修正しました。
+* タブグループのラベルを中央揃えにして文字を入力していない場合、展開・折りたたみインジケーターが中央に配置されない問題を修正しました。
+* Sidebery のナビゲーションバーと固定タブパネルのレイアウト間隔を調整し、Sidebery の検索バーのレイアウトに対応しました。また、検索バーに展開・折りたたみアニメーションを追加しました。
 
 **🦊 v5.7.0**
 
@@ -444,6 +442,13 @@ FlexFox は [UserChrome Toggle Extended](https://addons.mozilla.org/firefox/addo
 
 <summary>💬 <b>過去の更新</b></summary>
 
+**v5.7.4**
+* v5.7.3 で発生していた、タブグループ内で「分割ビュー」の背景がはみ出してしまう不具合を修正しました。
+
+**v5.7.3**
+* v5.7.1 で発生していた「分割ビュー」の高さが正しく表示されない不具合を修正しました。
+* タブグループ内の「分割ビュー」に展開と折りたたみのアニメーションを追加しました。アニメーションは `uc.flex.style-tab-group` を `2` または `4` に設定している場合に有効になります。
+
 **v5.7.2**
 * v5.7.1 で発生していた、タブグループ内のタブの高さが正しく表示されない不具合を修正しました。
 
diff --git a/README_简体中文.md b/README_简体中文.md
@@ -20,12 +20,10 @@ https://github.com/user-attachments/assets/23d73b36-d2d4-4660-af5b-cde686d0934a
 
 ## 🆕 更新内容
 
-**🦊 v5.7.4**
-修复了 v5.7.3 中标签组内“分屏视图”背景溢出的问题。
-
-**🦊 v5.7.3**
-* 修复了 v5.7.1 中出现的“分屏视图”高度显示不正确的问题。
-* 为标签组内的“分屏视图”添加了展开和折叠动画效果。动画在 `uc.flex.style-tab-group` 设置为 `2` 或 `4` 时启用。
+**🦊 v5.7.5**
+* 修复启用 `uc.flex.disable-sidebery-autohide` 或 `Lock Sidebery` 时，标签组的展开 / 折叠动画失效的问题。
+* 修复将标签组标题设为居中且未输入文字时，展开 / 折叠指示器未能正确居中的问题。
+* 调整 Sidebery 导航栏和固定面板的布局间距，新增对 Sidebery 搜索栏的布局支持，并为搜索栏加入展开 / 折叠动画。
 
 **🦊 v5.7.0**
 
diff --git a/chrome/components/uc-sidebar.css b/chrome/components/uc-sidebar.css
@@ -1900,7 +1900,7 @@
                     max-width: 100% !important;
 
                     &::before {
-                        left: calc((var(--uc-sidebar-main-hover-width) - var(--space-medium)) / 2);
+                        left: calc((var(--uc-sidebar-main-hover-width) - 2 * var(--space-medium)) / 2 - 3px);
                         transform: translateX(-50%);
                     }
                 }
@@ -1922,7 +1922,7 @@
                         max-width: 100% !important;
 
                         &::before {
-                            left: calc((var(--uc-sidebar-main-hover-width) - var(--space-medium)) / 2);
+                            left: calc((var(--uc-sidebar-main-hover-width) - 2 * var(--space-medium)) / 2 - 3px);
                             transform: translateX(-50%);
                         }
                     }
@@ -1976,12 +1976,17 @@
         tab-group {
             .tabbrowser-tab {
                 min-height: 39px;
-                max-height: 39px;
+                max-height: 40px;
+                transition:
+                    min-height 150ms ease,
+                    max-height 150ms ease,
+                    padding-block 150ms ease,
+                    opacity 150ms ease !important;
             }
             tab-split-view-wrapper {
                 display: grid !important;
                 min-height: 68px;
-                max-height: 72px;
+                max-height: 84px;
                 transition:
                     min-height 150ms ease,
                     max-height 150ms ease,
@@ -2143,7 +2148,7 @@
         > .tabbrowser-tab {
             #tabbrowser-tabs[expanded] & {
                 min-height: 34px;
-                max-height: 34px;
+                max-height: 40px;
                 padding-block: 0 !important;
             }
             tab-group & {
@@ -2394,7 +2399,7 @@
                                     var(--uc-hover-sidebar-delay) allow-discrete !important;
 
                             &::before {
-                                left: calc((var(--uc-sidebar-main-hover-width) - var(--space-medium)) / 2);
+                                left: calc((var(--uc-sidebar-main-hover-width) - 2 * var(--space-medium)) / 2 - 3px);
                                 transform: translateX(-50%);
                                 transition:
                                     left var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
diff --git a/chrome/content/uc-aboutconfig.css b/chrome/content/uc-aboutconfig.css
@@ -3,22 +3,22 @@
     @media not -moz-pref("uc.flex.show-flexfox-version-info-in-about-config", false) {
         body:lang(ja) {
             &::before {
-                content: "🎉  FlexFox v5.7.4 のインストールが完了しました。 \A 📝  オプションを調整するには、検索バーに `uc.flex` と入力してください。";
+                content: "🎉  FlexFox v5.7.5 のインストールが完了しました。 \A 📝  オプションを調整するには、検索バーに `uc.flex` と入力してください。";
             }
         }
         body:lang(zh-CN) {
             &::before {
-                content: "🎉  FlexFox v5.7.4 已成功安装。 \A 📝  如需调整选项，请在搜索栏中输入 `uc.flex`。";
+                content: "🎉  FlexFox v5.7.5 已成功安装。 \A 📝  如需调整选项，请在搜索栏中输入 `uc.flex`。";
             }
         }
         body:lang(zh-tw) {
             &::before {
-                content: "🎉  FlexFox v5.7.4 已成功安裝。 \A 📝  若需要調整選項，請在搜尋欄中輸入 `uc.flex`。";
+                content: "🎉  FlexFox v5.7.5 已成功安裝。 \A 📝  若需要調整選項，請在搜尋欄中輸入 `uc.flex`。";
             }
         }
 
         body::before {
-            content: "🎉  FlexFox v5.7.4 has been successfully installed. \A 📝  To adjust options, type `uc.flex` in the search bar.";
+            content: "🎉  FlexFox v5.7.5 has been successfully installed. \A 📝  To adjust options, type `uc.flex` in the search bar.";
             /* !-- End of version info -- */
             display: block;
             margin: 10px 10px 0px 10px;
diff --git a/chrome/content/uc-sidebery.css b/chrome/content/uc-sidebery.css
@@ -118,6 +118,56 @@
 
     .NavigationBar {
         border-bottom: 1px solid var(--uc-sb-navigation-border-color) !important;
+        margin-bottom: 2px !important;
+    }
+
+    /* Adjust spacing and layout of the search bar */
+    #search_bar {
+        margin-bottom: 2px;
+
+        @media (max-width: 50px) {
+            @media not -moz-pref("uc.flex.sidebery-allow-resizable-width") {
+                #root:not(:hover) & {
+                    &::before {
+                        left: 5px !important;
+                        width: 34px !important;
+                    }
+                    .search-icon {
+                        margin-left: 25px;
+                    }
+                    .placeholder,
+                    .clear-btn {
+                        visibility: hidden;
+                    }
+                }
+            }
+            @media -moz-pref("uc.flex.sidebery-allow-resizable-width") {
+                @media not (-moz-pref("uc.flex.fully-hide-sidebery") or (display-mode: fullscreen)) {
+                    &::before {
+                        left: 5px !important;
+                        width: 34px !important;
+                    }
+                    .search-icon {
+                        margin-left: 25px;
+                    }
+                    .placeholder,
+                    .clear-btn {
+                        visibility: hidden;
+                    }
+                }
+            }
+        }
+    }
+
+    .PinnedTabsBar {
+        margin-bottom: 2px;
+    }
+
+    .AnimatedTabList {
+        margin-top: -2px;
+        .Tab {
+            padding-block: 2px;
+        }
     }
 
     .tab-wrapper .Tab .body {
@@ -211,6 +261,25 @@
                 height 50ms ease-in-out 5ms,
                 padding-left 0s var(--uc-autohide-transition-type) 0s !important;
         }
+        #search_bar {
+            &::before {
+                transition:
+                    left var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type)
+                        var(--uc-autohide-sidebar-delay),
+                    width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type)
+                        var(--uc-autohide-sidebar-delay);
+            }
+            .search-icon {
+                transition: margin-left var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) 0s;
+            }
+            .placeholder,
+            .clear-btn {
+                transition:
+                    opacity var(--d-fast),
+                    transform var(--d-fast),
+                    visibility 0s var(--uc-autohide-transition-type) 0s !important;
+            }
+        }
         /* Override inline padding-left transition time to avoid pinned tabs jitter caused by delayed shifting */
         .PinnedTabsBar {
             transition: none !important;
@@ -315,6 +384,27 @@
                     padding-left var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
                         var(--uc-hover-sidebar-delay) !important;
             }
+            #search_bar {
+                &::before {
+                    transition:
+                        left var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
+                            var(--uc-hover-sidebar-delay),
+                        width var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
+                            var(--uc-hover-sidebar-delay);
+                }
+                .search-icon {
+                    transition: margin-left var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
+                        calc(var(--uc-hover-sidebar-delay) - 28ms);
+                }
+                .placeholder,
+                .clear-btn {
+                    transition:
+                        opacity var(--d-fast),
+                        transform var(--d-fast),
+                        visibility var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)
+                            calc(var(--uc-hover-sidebar-delay) + 28ms) !important;
+                }
+            }
             /*
             .PinnedTabsBar {
                 transition:
@@ -438,7 +528,7 @@
             max-height: 40px;
             height: 40px !important;
             padding: 3px 0px 2.5px 5px !important;
-            margin-bottom: 4px !important;
+            margin-bottom: 2px !important;
             /*
             border-bottom: 1px solid #ced1d4 !important;
             @media (prefers-color-scheme: dark) {
diff --git a/chrome/userChrome.css b/chrome/userChrome.css
@@ -1,4 +1,4 @@
-﻿/*            FlexFox v5.7.4            */
+﻿/*            FlexFox v5.7.5            */
 /*      ____ _          ____            */
 /*     / __/ /__  _  __/ __/___  _  __  */
 /*    / /_/ / _ \| |/_/ /_/ __ \| |/_/  */

Original file line number	Diff line number	Diff line change
`@@ -3,22 +3,22 @@`
`3`	`3`	`@media not -moz-pref("uc.flex.show-flexfox-version-info-in-about-config", false) {`
`4`	`4`	`body:lang(ja) {`
`5`	`5`	`&::before {`
`6`		- content: "🎉 FlexFox v5.7.4 のインストールが完了しました。 \A 📝 オプションを調整するには、検索バーに `uc.flex` と入力してください。";
	`6`	+ content: "🎉 FlexFox v5.7.5 のインストールが完了しました。 \A 📝 オプションを調整するには、検索バーに `uc.flex` と入力してください。";
`7`	`7`	`}`
`8`	`8`	`}`
`9`	`9`	`body:lang(zh-CN) {`
`10`	`10`	`&::before {`
`11`		- content: "🎉 FlexFox v5.7.4 已成功安装。 \A 📝 如需调整选项，请在搜索栏中输入 `uc.flex`。";
	`11`	+ content: "🎉 FlexFox v5.7.5 已成功安装。 \A 📝 如需调整选项，请在搜索栏中输入 `uc.flex`。";
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`	`body:lang(zh-tw) {`
`15`	`15`	`&::before {`
`16`		- content: "🎉 FlexFox v5.7.4 已成功安裝。 \A 📝 若需要調整選項，請在搜尋欄中輸入 `uc.flex`。";
	`16`	+ content: "🎉 FlexFox v5.7.5 已成功安裝。 \A 📝 若需要調整選項，請在搜尋欄中輸入 `uc.flex`。";
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`body::before {`
`21`		- content: "🎉 FlexFox v5.7.4 has been successfully installed. \A 📝 To adjust options, type `uc.flex` in the search bar.";
	`21`	+ content: "🎉 FlexFox v5.7.5 has been successfully installed. \A 📝 To adjust options, type `uc.flex` in the search bar.";
`22`	`22`	`/* !-- End of version info -- */`
`23`	`23`	`display: block;`
`24`	`24`	`margin: 10px 10px 0px 10px;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/* FlexFox v5.7.4 */`
	`1`	`+/* FlexFox v5.7.5 */`
`2`	`2`	`/* ____ _ ____ */`
`3`	`3`	`/* / __/ /__ _ __/ __/___ _ __ */`
`4`	`4`	`/* / /_/ / _ \\| \|/_/ /_/ __ \\| \|/_/ */`