Skip to content

Commit d6c969a

Browse files
yuuqilinyuuqilin
committed
v6.0.2
Rework URL bar options, add auto-hide icons & center text, fix pinned tab shift, Sidebery hover highlights, and sidebar toggle button color.
1 parent 8320a0a commit d6c969a

File tree

11 files changed

+265
-169
lines changed

11 files changed

+265
-169
lines changed

‎README.md‎

Lines changed: 54 additions & 28 deletions
Large diffs are not rendered by default.

‎README_日本語版.md‎

Lines changed: 54 additions & 28 deletions
Large diffs are not rendered by default.

‎README_简体中文.md‎

Lines changed: 54 additions & 28 deletions
Large diffs are not rendered by default.

‎chrome/components/uc-findbar.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -316,14 +316,14 @@ findbar checkbox:hover {
316316
findbar checkbox:active {
317317
background-color: var(--button-background-color-active, var(--button-active-bgcolor));
318318
}
319-
findbar checkbox[checked="true"] {
319+
findbar checkbox[checked] {
320320
color: var(--button-text-color-primary, var(--button-primary-color));
321321
background-color: var(--color-accent-primary, var(--button-primary-bgcolor));
322322
}
323-
findbar checkbox[checked="true"]:hover {
323+
findbar checkbox[checked]:hover {
324324
background-color: var(--color-accent-primary-hover, var(--button-primary-hover-bgcolor));
325325
}
326-
findbar checkbox[checked="true"]:active {
326+
findbar checkbox[checked]:active {
327327
background-color: var(--color-accent-primary-active, var(--button-primary-active-bgcolor));
328328
}
329329
findbar checkbox:focus-visible {

‎chrome/components/uc-menu-icons.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@
291291

292292
/* !TEMPORARY: This rule is still needed in v140+, as the issue wasn't fully fixed.
293293
If Firefox addresses this properly in a future update, this rule can be removed. */
294-
menupopup:not(.in-menulist, [aria-label]) > menuitem[checked="true"] {
294+
menupopup:not(.in-menulist, [aria-label]) > menuitem:is([checked=""], [checked="true"]) {
295295
> .menu-icon {
296296
list-style-image: none !important;
297297
display: none !important;
@@ -347,11 +347,11 @@
347347
}
348348
#context-showonlythisframe,
349349
#context-media-showcontrols,
350-
#toolbar-context-always-open-downloads-panel:not([checked="true"]) {
350+
#toolbar-context-always-open-downloads-panel:not([checked]) {
351351
background-image: url("../icons/menu/password.svg");
352352
}
353353
#context-media-hidecontrols,
354-
#toolbar-context-autohide-downloads-button:not([checked="true"]) {
354+
#toolbar-context-autohide-downloads-button:not([checked]) {
355355
background-image: url("../icons/menu/password-hide.svg");
356356
}
357357

@@ -680,7 +680,7 @@
680680
#repair-text-encoding {
681681
background-image: url("chrome://browser/skin/characterEncoding.svg");
682682
}
683-
#fullScreenItem:not([checked="true"]) {
683+
#fullScreenItem:not([checked]) {
684684
background-image: url("chrome://browser/skin/fullscreen.svg");
685685
}
686686
#menu_readerModeItem {
@@ -970,7 +970,7 @@
970970
padding-inline-start: 1em !important;
971971
}
972972
*/
973-
#context-video-pictureinpicture:not([checked="true"]) {
973+
#context-video-pictureinpicture:not([checked]) {
974974
background-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
975975
}
976976
#spell-dictionaries {

‎chrome/components/uc-sidebar.css‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,11 @@
9393
}
9494
}
9595

96-
&:not([checked="true"]) {
96+
&:not([checked]) {
9797
/* When `uc.flex.style-sidebar-stripe-color-apply-to-all-icons` is enabled,
9898
* --toolbarbutton-icon-fill is overridden in :root.
9999
* We reassign it on the endpoint element so that icons in the non-checked state
100-
* (:not([checked="true"])) are properly displayed as highlighted.
100+
* (:not([checked])) are properly displayed as highlighted.
101101
*/
102102
--toolbarbutton-icon-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
103103
@media -moz-pref("uc.flex.style-sidebar-button", 3) {
@@ -108,7 +108,7 @@
108108
}
109109
}
110110

111-
&[checked="true"] {
111+
&[checked] {
112112
fill: var(--uc-flexfox-logo-color) !important;
113113
@media -moz-pref("uc.flex.style-sidebar-stripe-color-use-gradient") {
114114
fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254)) !important;
@@ -1536,12 +1536,6 @@
15361536
pointer-events: none;
15371537
}
15381538

1539-
/* Keep the pinned tab grid wide enough so the second column doesn't spill into the collapsed vertical tab bar on hover */
1540-
/*
1541-
#tabbrowser-tabs[orient="vertical"][expanded] {
1542-
min-width: var(--uc-sidebar-main-hover-width) !important;
1543-
}
1544-
*/
15451539
/* Fix v144 container change that broke vertical tabs' ability to size to its children */
15461540
/*
15471541
#sidebar-main:not([sidebar-launcher-expanded][sidebar-panel-open]) #vertical-tabs {
@@ -1550,13 +1544,25 @@
15501544
/*
15511545
contain-intrinsic-width: var(--uc-sidebar-stripe-width);
15521546
*/
1553-
/* Set the width on the parent #vertical-tabs so the child #tabbrowser-tabs
1554-
no longer needs its own width, and ensure #vertical-tabs is wide enough
1555-
to prevent vertical tabs from shifting when switching between native
1556-
vertical tabs and Sidebery with `uc.flex.show-tab-count-in-alltabs-button` enabled. */
1547+
/*
1548+
* Ensure #vertical-tabs has a stable minimum width to avoid layout shifts when
1549+
* switching between native vertical tabs and Sidebery, especially with
1550+
* `uc.flex.show-tab-count-in-alltabs-button` enabled. This works together with
1551+
* the min-width on #tabbrowser-tabs to keep the layout consistent.
1552+
*/
15571553
min-width: var(--uc-sidebar-main-hover-width);
15581554
}
15591555

1556+
/**
1557+
* Prevent the pinned tab grid from compressing and forcing the second column
1558+
* into the collapsed vertical tab bar. Even though #vertical-tabs has a
1559+
* min-width, the splitter can temporarily exceed it on hover, so we still give
1560+
* #tabbrowser-tabs its own min-width to keep the pinned icons stable.
1561+
*/
1562+
#tabbrowser-tabs[orient="vertical"][expanded] {
1563+
min-width: var(--uc-sidebar-main-hover-width) !important;
1564+
}
1565+
15601566
/* Pinned tabs panel: set max height, tighten spacing, and style pinned tab borders/background */
15611567
:is(#vertical-pinned-tabs-container, #pinned-tabs-container) {
15621568
#sidebar-main[sidebar-launcher-expanded] & {

‎chrome/components/uc-urlbar.css‎

Lines changed: 54 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -29,37 +29,32 @@
2929

3030
/* Glow outline when hovering over the unfocused urlbar */
3131
#urlbar:not(.megabar):not([focused]):not([breakout-extend]) {
32-
@media -moz-pref("uc.flex.style-urlbar", 2) or -moz-pref("uc.flex.style-urlbar", 3) or -moz-pref("uc.flex.style-urlbar", 4) {
33-
.urlbar-input-container {
34-
border-radius: var(--uc-urlbar-border-radius, var(--toolbarbutton-border-radius)) !important;
35-
transition: box-shadow 0.25s ease-out;
36-
}
32+
.urlbar-input-container {
33+
border-radius: var(--uc-urlbar-border-radius, var(--toolbarbutton-border-radius)) !important;
34+
transition: box-shadow 0.25s ease-out;
3735
}
3836
&:hover {
39-
outline: 1px solid var(--uc-urlbar-outline);
4037
:where(#urlbar-background, .urlbar-background) {
4138
box-shadow: none !important;
4239
}
43-
@media -moz-pref("uc.flex.style-urlbar", 2) or -moz-pref("uc.flex.style-urlbar", 3) or -moz-pref("uc.flex.style-urlbar", 4) {
44-
outline: none;
40+
41+
.urlbar-input-container {
42+
box-shadow:
43+
0px 0px 5px -2px rgba(12, 12, 16, 0.8),
44+
0 0 0 1px rgb(from var(--uc-urlbar-outline) r g b / 0.93) !important;
45+
}
46+
@media (prefers-color-scheme: dark) {
4547
.urlbar-input-container {
46-
box-shadow:
47-
0px 0px 5px -2px rgba(12, 12, 16, 0.8),
48-
0 0 0 1px rgb(from var(--uc-urlbar-outline) r g b / 0.93) !important;
49-
}
50-
@media (prefers-color-scheme: dark) {
51-
.urlbar-input-container {
52-
/*
48+
/*
5349
box-shadow:
5450
0px 0px 8px rgb(from var(--uc-urlbar-outline) r g b / calc(alpha * 0.87)),
5551
0 0 0 2px rgb(from var(--uc-urlbar-outline) r g b / calc(alpha * 0.97)) !important;
5652
*/
57-
box-shadow:
58-
0px 0px 8px
59-
color-mix(in srgb, color-mix(in srgb, var(--uc-urlbar-outline) 77%, white) 82%, transparent),
60-
0 0 0 2px
61-
color-mix(in srgb, color-mix(in srgb, var(--uc-urlbar-outline) 87%, white) 92%, transparent) !important;
62-
}
53+
box-shadow:
54+
0px 0px 8px
55+
color-mix(in srgb, color-mix(in srgb, var(--uc-urlbar-outline) 77%, white) 82%, transparent),
56+
0 0 0 2px
57+
color-mix(in srgb, color-mix(in srgb, var(--uc-urlbar-outline) 87%, white) 92%, transparent) !important;
6358
}
6459
}
6560
}
@@ -201,18 +196,14 @@
201196
--uc-urlbar-icon-radius,
202197
var(--urlbar-icon-border-radius, var(--urlbar-inner-border-radius))
203198
) !important;
204-
@media not -moz-pref("uc.flex.style-urlbar", 0) {
205-
background-color: var(--uc-identity-btn-bgcolor) !important;
206-
opacity: 0.8;
207-
}
199+
background-color: var(--uc-identity-btn-bgcolor) !important;
200+
opacity: 0.8;
208201
}
209202

210203
#identity-icon-box.identity-box-button:hover,
211204
#trust-icon-container:hover {
212205
cursor: pointer;
213-
@media not -moz-pref("uc.flex.style-urlbar", 0) {
214-
background-color: var(--identity-btn-hover-color, var(--urlbar-box-hover-bgcolor)) !important;
215-
}
206+
background-color: var(--identity-btn-hover-color, var(--urlbar-box-hover-bgcolor)) !important;
216207
}
217208

218209
/* Track protection icon */
@@ -390,6 +381,7 @@
390381

391382
/* Show URL buttons on Hover */
392383
/* !v143 */
384+
/*
393385
@media not (-moz-pref("uc.flex.style-urlbar", 0) or -moz-pref("uc.flex.style-urlbar", 2) or -moz-pref("uc.flex.style-urlbar", 3) or -moz-pref("uc.flex.style-urlbar", 4)) {
394386
#nav-bar:not([customizing="true"]):not([customizing=""])
395387
> #nav-bar-customization-target
@@ -426,29 +418,36 @@
426418
transition: opacity var(--uc-hover-navbar-icons-duration) var(--uc-autohide-navbar-icons-type);
427419
}
428420
}
421+
*/
429422

430-
/**
431-
* When the web content is an extension page, #identity-box.extensionPage becomes visible.
432-
* In this case, we hide the trust icon to save space. As with similar cases elsewhere,
433-
* we define variables on the parent element and pass them to #trust-icon-container,
434-
* instead of directly styling the child inside :has(). This avoids unnecessary
435-
* performance costs from selector evaluation.
436-
*/
423+
/* Hide the Trust Panel icon */
437424
@media -moz-pref("browser.urlbar.trustPanel.featureGate") {
438-
.urlbar-input-container:has(> .extensionPage) {
439-
--uc-trust-icon-margin-inline-start: calc(-19px - 2 * var(--urlbar-icon-padding));
440-
--uc-trust-icon-bgcolor: transparent;
441-
--uc-trust-icon-opacity: 0;
442-
}
443-
@media not -moz-pref("uc.flex.style-urlbar", 0) {
444-
#trust-icon-container {
445-
background-color: var(--uc-trust-icon-bgcolor, var(--uc-identity-btn-bgcolor)) !important;
425+
.urlbar-input-container {
426+
@media -moz-pref("uc.flex.style-urlbar", 4) {
427+
--uc-trust-icon-margin-inline-start: calc(-19px - 2 * var(--urlbar-icon-padding));
428+
--uc-trust-icon-opacity: 0;
429+
}
430+
/**
431+
* When the web content is an extension page, #identity-box.extensionPage becomes visible.
432+
* In this case, we hide the trust icon to save space. As with similar cases elsewhere,
433+
* we define variables on the parent element and pass them to #trust-icon-container,
434+
* instead of directly styling the child inside :has(). This avoids unnecessary
435+
* performance costs from selector evaluation.
436+
*/
437+
&:has(> .extensionPage) {
438+
--uc-trust-icon-margin-inline-start: calc(-19px - 2 * var(--urlbar-icon-padding));
439+
--uc-trust-icon-bgcolor: transparent;
440+
--uc-trust-icon-opacity: 0;
446441
}
447442
}
443+
#trust-icon-container {
444+
background-color: var(--uc-trust-icon-bgcolor, var(--uc-identity-btn-bgcolor)) !important;
445+
}
448446
}
449447

450-
@media -moz-pref("uc.flex.style-urlbar", 2) or -moz-pref("uc.flex.style-urlbar", 3) or -moz-pref("uc.flex.style-urlbar", 4) {
451-
#urlbar:not([breakout][breakout-extend], [focused][usertyping]) {
448+
#urlbar:not([breakout][breakout-extend], [focused][usertyping]) {
449+
/* Center the URL bar text */
450+
@media -moz-pref("uc.flex.style-urlbar-center-text") {
452451
.urlbar-input {
453452
text-align: center !important;
454453
margin-bottom: 1px !important;
@@ -491,7 +490,10 @@
491490
}
492491
}
493492
}
493+
}
494494

495+
/* Hide URL bar icons */
496+
@media not -moz-pref("uc.flex.auto-hide-urlbar-icons", false), -moz-pref("uc.flex.style-urlbar", 4) {
495497
#identity-permission-box,
496498
#notification-popup-box,
497499
#tracking-protection-icon-container {
@@ -513,7 +515,7 @@
513515
display: none;
514516
}
515517

516-
@media -moz-pref("uc.flex.style-urlbar", 2) or -moz-pref("uc.flex.style-urlbar", 3) {
518+
@media not -moz-pref("uc.flex.style-urlbar", 4) {
517519
.urlbar-page-action:where(:not(#star-button-box, [open])) {
518520
margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding));
519521
opacity: 0;
@@ -548,11 +550,11 @@
548550
}
549551

550552
@media -moz-pref("uc.flex.style-urlbar", 4) {
551-
&[open] :where(#identity-icon-box, #trust-icon-container),
552-
&:hover :where(#identity-icon-box, #trust-icon-container),
553-
:where(#identity-icon-box[open], #trust-icon-container[open]) {
554-
opacity: 1;
555-
margin-inline-start: 0 !important;
553+
&[open] :is(#identity-icon-box, #trust-icon-container),
554+
&:hover :is(#identity-icon-box, #trust-icon-container),
555+
:is(#identity-icon-box[open], #trust-icon-container[open]) {
556+
opacity: 0.8;
557+
margin-inline-start: 3px !important;
556558
}
557559
}
558560

@@ -571,7 +573,7 @@
571573
}
572574
}
573575

574-
@media -moz-pref("uc.flex.style-urlbar", 2) or -moz-pref("uc.flex.style-urlbar", 3) {
576+
@media not -moz-pref("uc.flex.style-urlbar", 4) {
575577
&:-moz-window-inactive:hover .urlbar-page-action:not(#star-button-box),
576578
&:-moz-window-inactive:hover #identity-permission-box,
577579
&:-moz-window-inactive:hover #notification-popup-box {

‎chrome/content/uc-aboutconfig.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@
33
@media not -moz-pref("uc.flex.show-flexfox-version-info-in-about-config", false) {
44
body:lang(ja) {
55
&::before {
6-
content: "🎉 FlexFox v6.0.1 のインストールが完了しました。 \A 📝 オプションを調整するには、検索バーに `uc.flex` と入力してください。";
6+
content: "🎉 FlexFox v6.0.2 のインストールが完了しました。 \A 📝 オプションを調整するには、検索バーに `uc.flex` と入力してください。";
77
}
88
}
99
body:lang(zh-CN) {
1010
&::before {
11-
content: "🎉 FlexFox v6.0.1 已成功安装。 \A 📝 如需调整选项，请在搜索栏中输入 `uc.flex`。";
11+
content: "🎉 FlexFox v6.0.2 已成功安装。 \A 📝 如需调整选项，请在搜索栏中输入 `uc.flex`。";
1212
}
1313
}
1414
body:lang(zh-tw) {
1515
&::before {
16-
content: "🎉 FlexFox v6.0.1 已成功安裝。 \A 📝 若需要調整選項，請在搜尋欄中輸入 `uc.flex`。";
16+
content: "🎉 FlexFox v6.0.2 已成功安裝。 \A 📝 若需要調整選項，請在搜尋欄中輸入 `uc.flex`。";
1717
}
1818
}
1919

2020
body::before {
21-
content: "🎉 FlexFox v6.0.1 has been successfully installed. \A 📝 To adjust options, type `uc.flex` in the search bar.";
21+
content: "🎉 FlexFox v6.0.2 has been successfully installed. \A 📝 To adjust options, type `uc.flex` in the search bar.";
2222
/* !-- End of version info -- */
2323
display: block;
2424
margin: 10px 10px 0px 10px;

‎chrome/content/uc-sidebery.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -817,7 +817,10 @@
817817
--uc-sb-active-tab-drop-shadow: 0px 0px 3px -1px
818818
color-mix(in srgb, var(--uc-sidebar-header-stripe) 75%, white);
819819
}
820-
--frame-el-overlay-hover-bg: transparent !important;
820+
--frame-el-overlay-hover-bg: var(--uc-sb-pinned-tab-hover-bgcolor) !important;
821+
.panel-box {
822+
--frame-el-overlay-hover-bg: transparent !important;
823+
}
821824
/*
822825
--frame-el-overlay-clicked-bg: transparent !important;
823826
*/
@@ -1017,6 +1020,9 @@
10171020

10181021
/* Prevent a gap below the new tab button */
10191022
.TabsPanel .new-tab-btns {
1023+
@media -moz-pref("uc.flex.style-tab-items", 2) {
1024+
--frame-el-overlay-hover-bg: var(--uc-sb-pinned-tab-hover-bgcolor) !important;
1025+
}
10201026
bottom: -1px !important;
10211027
padding-bottom: 1px !important;
10221028
}

‎chrome/userChrome.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* FlexFox v6.0.1 */
1+
/* FlexFox v6.0.2 */
22
/* ____ _ ____ */
33
/* / __/ /__ _ __/ __/___ _ __ */
44
/* / /_/ / _ \| |/_/ /_/ __ \| |/_/ */

0 commit comments

Comments
 (0)