Skip to content

Commit f2fe143

Browse files
yuuqilinyuuqilin
committed
v5.6.2
Add translucent URL bar popup and menu option, support v146 “Preview Link”, add icons for new context menu items, fix Tab Split View in vertical tabs, sidebar stripe bottom line in horizontal tabs, and Web Developer Tools shadow on Nightly v147.
1 parent bfc0ecb commit f2fe143

19 files changed

+357
-770
lines changed

‎README.md‎

Lines changed: 44 additions & 167 deletions
Large diffs are not rendered by default.

‎README_日本語版.md‎

Lines changed: 44 additions & 167 deletions
Large diffs are not rendered by default.

‎README_简体中文.md‎

Lines changed: 44 additions & 167 deletions
Large diffs are not rendered by default.

‎chrome/components/uc-browser.css‎

Lines changed: 58 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
outline: none !important;
4141
box-shadow: none !important;
4242
@media -moz-pref("sidebar.revamp.round-content-area") {
43+
overflow: unset !important;
44+
4345
&:not([sidebar-positionend]) {
4446
border-start-start-radius: var(--uc-sb-tabbox-border-radius, var(--border-radius-medium)) !important;
4547
}
@@ -113,6 +115,24 @@
113115
}
114116
}
115117
}
118+
119+
/* !TEMPORARY: Fix for Nightly v147 change that broke border-radius.
120+
This is still under development and the fix may need adjustments in the future. */
121+
&[splitview] {
122+
> .split-view-panel {
123+
margin: 0 !important;
124+
125+
&:not(.deck-selected) {
126+
overflow: unset !important;
127+
}
128+
129+
@media not -moz-pref("uc.flex.enable-rounded-web-content") {
130+
> split-view-footer {
131+
border-end-end-radius: 0 !important;
132+
}
133+
}
134+
}
135+
}
116136
}
117137

118138
/* ════════════════════════════════════════════════════════════════════
@@ -255,19 +275,28 @@
255275
border-top-right-radius: var(--uc-web-content-radius);
256276
margin-right: var(--uc-web-content-margin);
257277
box-shadow: 0 1.5px 9px light-dark(#00000026, #00000040);
278+
@media -moz-pref("uc.flex.-dev-web-content-box-shadow-highlight") {
279+
box-shadow: 0 1.5px 9px red;
280+
}
258281
}
259282
/* When DevTools is docked on the right, override sharp corner with a rounded one and add left margin */
260283
@media -moz-pref("devtools.toolbox.host", "right") {
261284
border-top-left-radius: var(--uc-web-content-radius);
262285
margin-left: var(--uc-web-content-margin);
263286
box-shadow: 0 1.5px 9px light-dark(#00000026, #00000040);
287+
@media -moz-pref("uc.flex.-dev-web-content-box-shadow-highlight") {
288+
box-shadow: 0 1.5px 9px red;
289+
}
264290
}
265291
}
266292

267293
.devtools-toolbox-bottom-iframe {
268294
border-radius: var(--uc-web-content-radius);
269295
margin-top: var(--uc-web-content-margin);
270296
box-shadow: 0 1.5px 9px light-dark(#00000026, #00000040);
297+
@media -moz-pref("uc.flex.-dev-web-content-box-shadow-highlight") {
298+
box-shadow: 0 1.5px 9px red;
299+
}
271300
}
272301

273302
.devtools-side-splitter,
@@ -603,6 +632,34 @@
603632
background-color: transparent !important;
604633
}
605634

635+
findbar,
636+
.found-matches {
637+
background-color: light-dark(
638+
rgba(249, 249, 251, var(--uc-urlbar-backdrop-transparency)),
639+
rgba(32, 32, 32, var(--uc-urlbar-backdrop-transparency))
640+
) !important;
641+
background-image: none !important;
642+
}
643+
findbar {
644+
backdrop-filter: blur(26px) saturate(140%);
645+
}
646+
findbar:has(> .findbar-container > .found-matches:not([hidden])) {
647+
border-bottom-left-radius: 0px;
648+
}
649+
.found-matches {
650+
height: 25px;
651+
padding: 2px 12px 0px 10px;
652+
top: 35px;
653+
border-bottom-right-radius: var(--uc-findbar-outer-border-radius);
654+
&::after {
655+
display: none;
656+
}
657+
}
658+
}
659+
660+
@media -moz-pref("extensions.activeThemeID", "default-theme@mozilla.org") and -moz-pref("widget.windows.mica"),
661+
-moz-pref("uc.flex.browser-wallpaper-enabled"),
662+
-moz-pref("uc.flex.enable-translucent-urlbar-popup-and-menus") {
606663
.toolbar-menupopup,
607664
menupopup {
608665
--panel-background: light-dark(
@@ -625,7 +682,7 @@
625682

626683
/* backdrop-filter doesn't blur remote <browser> element https://bugzilla.mozilla.org/show_bug.cgi?id=1799334 */
627684
/* Needed to enable backdrop-filter effects on <browser> */
628-
browser {
685+
browser:not(.devtools-toolbox-side-iframe, .devtools-toolbox-bottom-iframe) {
629686
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
630687
}
631688

@@ -641,30 +698,6 @@
641698
) !important;
642699
background-image: none !important;
643700
}
644-
645-
findbar,
646-
.found-matches {
647-
background-color: light-dark(
648-
rgba(249, 249, 251, var(--uc-urlbar-backdrop-transparency)),
649-
rgba(32, 32, 32, var(--uc-urlbar-backdrop-transparency))
650-
) !important;
651-
background-image: none !important;
652-
}
653-
findbar {
654-
backdrop-filter: blur(26px) saturate(140%);
655-
}
656-
findbar:has(.found-matches:not([hidden])) {
657-
border-bottom-left-radius: 0px;
658-
}
659-
.found-matches {
660-
height: 25px;
661-
padding: 2px 12px 0px 10px;
662-
top: 35px;
663-
border-bottom-right-radius: var(--uc-findbar-outer-border-radius);
664-
&::after {
665-
display: none;
666-
}
667-
}
668701
}
669702

670703
@media -moz-pref("extensions.activeThemeID", "default-theme@mozilla.org") and -moz-pref("widget.windows.mica") {

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

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
#link-preview-panel {
2+
--panel-border-radius: 0 !important;
3+
}
4+
15
/* Modified from https://gist.github.com/emvaized/a379d61ed8970e5711ca7278a39c1895/ */
26

37
/* Iconic Firefox (https://gist.github.com/emvaized/a379d61ed8970e5711ca7278a39c1895/) */
@@ -120,6 +124,14 @@
120124
background-image: url("../icons/menu/select-all-on.svg");
121125
background-position-x: 1.076em !important;
122126
}
127+
#context-previewlink {
128+
background-image: url("../icons/menu/context-preview-link.svg");
129+
background-position-x: 0.75em;
130+
background-size: 21px;
131+
}
132+
#context-visual-search {
133+
background-image: url("../icons/menu/google-lens-logo.svg");
134+
}
123135
#context-add-engine {
124136
background-image: url("../icons/menu/context-add-engine.svg");
125137
background-position-x: 1em;
@@ -207,14 +219,31 @@
207219
background-image: url("../icons/menu/new-group.svg");
208220
background-size: 18px;
209221
}
210-
#context_ungroupTab {
222+
#context_ungroupTab,
223+
#context_ungroupSplitView {
211224
background-image: url("../icons/menu/ungroup-tab.svg");
212225
background-position-x: 0.9em;
213226
background-size: 18px;
214227
}
228+
#context_moveTabToSplitView {
229+
background-image: url("../icons/menu/context-move-tab-to-split-view.svg");
230+
background-position-x: 0.9em;
231+
background-size: 18px;
232+
}
233+
#context_separateSplitView {
234+
background-image: url("../icons/menu/context-separate-split-view.svg");
235+
background-position-x: 0.9em;
236+
background-size: 18px;
237+
}
215238
#context_unloadTab {
216239
background-image: url("../icons/menu/quit.svg");
217240
}
241+
#context_addNote,
242+
#context_editNote {
243+
background-image: url("../icons/menu/context-add-note.svg");
244+
background-position-x: 0.9em;
245+
background-size: 20px;
246+
}
218247
#context_selectAllTabs {
219248
background-image: url("../icons/menu/select-all-tabs-rounded.svg");
220249
}

‎chrome/components/uc-sidebar.css‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142

143143
/* Expand sidebar header on hover */
144144
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][sidebar-panel-open] {
145-
#sidebar-header:is(:hover, :has(#sidebar-switcher-target.active)) {
145+
#sidebar-header:is(:hover, :has(> #sidebar-switcher-target.active)) {
146146
border-bottom: 1px solid var(--uc-sidebar-header-border-color) !important;
147147
max-height: 100%;
148148
max-width: 100%;
@@ -174,7 +174,7 @@
174174

175175
/* Modified from https://www.reddit.com/r/FirefoxCSS/comments/77ehp1/how_to_hide_the_title_of_webextension_sidebars/ */
176176
/* Minimize sidebar header to a stripe (except Bookmarks, History, Sync'd Tabs); appears normally on hover */
177-
#sidebar-header:not(:hover):has(#sidebar-switcher-target:not(.active)) {
177+
#sidebar-header:not(:hover):has(> #sidebar-switcher-target:not(.active)) {
178178
min-height: 5px;
179179
max-height: 5px;
180180
min-width: var(--uc-sb-sidebar-width);
@@ -214,7 +214,7 @@
214214
/*
215215
--sidebar-background-color: var(--uc-sidebar-header-bgcolor, var(--lwt-accent-color)) !important;
216216
*/
217-
#sidebar-header:not(:hover):has(#sidebar-switcher-target:not(.active)) {
217+
#sidebar-header:not(:hover):has(> #sidebar-switcher-target:not(.active)) {
218218
max-width: var(--uc-sidebar-stripe-width);
219219
min-width: var(--uc-sidebar-stripe-width);
220220
}
@@ -230,7 +230,7 @@
230230
/*
231231
--sidebar-background-color: var(--uc-sidebar-header-bgcolor, var(--lwt-accent-color)) !important;
232232
*/
233-
#sidebar-header:not(:hover):has(#sidebar-switcher-target:not(.active)) {
233+
#sidebar-header:not(:hover):has(> #sidebar-switcher-target:not(.active)) {
234234
max-width: var(--uc-sidebar-stripe-width);
235235
min-width: var(--uc-sidebar-stripe-width);
236236
}
@@ -239,13 +239,13 @@
239239

240240
/* Remove header's bottom line */
241241
#sidebar-header:not(:hover) {
242-
border-bottom: none !important;
242+
border-bottom: 0px solid transparent !important;
243243
}
244244
}
245245

246246
@media -moz-pref("uc.flex.fully-hide-sidebery") {
247247
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][sidebar-panel-open] {
248-
&:hover #sidebar-header:not(:hover):has(#sidebar-switcher-target:not(.active)) {
248+
&:hover #sidebar-header:not(:hover):has(> #sidebar-switcher-target:not(.active)) {
249249
min-height: 5px;
250250
max-height: 5px;
251251
min-width: var(--uc-sidebar-stripe-width);
@@ -277,7 +277,7 @@
277277
@media not -moz-pref("uc.flex.fully-hide-sidebery") {
278278
:root:is([inFullscreen], [titlepreface*="\200c "], [titlepreface*="\200d "]) {
279279
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][sidebar-panel-open] {
280-
&:hover #sidebar-header:not(:hover):has(#sidebar-switcher-target:not(.active)) {
280+
&:hover #sidebar-header:not(:hover):has(> #sidebar-switcher-target:not(.active)) {
281281
min-height: 5px;
282282
max-height: 5px;
283283
min-width: var(--uc-sidebar-stripe-width);
@@ -466,10 +466,6 @@
466466
@media -moz-pref("uc.flex.remove-sidebar-stripe") {
467467
--uc-sb-sidebar-main-stripe-height: 0px;
468468
}
469-
470-
~ #tabbrowser-tabbox {
471-
--uc-sb-tabbox-border-radius: 0px;
472-
}
473469
}
474470
#sidebar-main[sidebar-panel-open]:has(
475471
~ #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]
@@ -1873,7 +1869,7 @@
18731869
background-image: url("../icons/tab-group/tab-group-expanded.svg");
18741870
background-position: 1px 6px;
18751871
background-repeat: no-repeat;
1876-
background-size: 11px;
1872+
background-size: 11.25px;
18771873
fill: currentColor;
18781874
opacity: 0;
18791875
}
@@ -2001,7 +1997,9 @@
20011997

20021998
/* !TEMPORARY: Support for Split View in Nightly v146. This is a temporary style since the feature may still change in future builds. */
20031999
tab-group > tab-split-view-wrapper {
2000+
/*
20042001
margin-block: 2px !important;
2002+
*/
20052003

20062004
#tabbrowser-tabs[orient="vertical"] & {
20072005
margin-inline-start: 0 !important;
@@ -2020,9 +2018,10 @@
20202018

20212019
.tab-group-line {
20222020
inset-block: -3px -3px !important;
2021+
inset-inline-start: 0 !important;
20232022
}
20242023

2025-
#tabbrowser-tabs .tab-split-view-container {
2024+
#tabbrowser-tabs tab-split-view-wrapper {
20262025
/*
20272026
@media not -moz-pref("uc.flex.disable-sidebery-autohide") {
20282027
:root:not([titlepreface*="\180e "]) & {
@@ -2090,7 +2089,7 @@
20902089
transition: var(--uc-tab-split-view-transition);
20912090
}
20922091

2093-
tab-split-view-wrapper:not([hasactivetab]) > & {
2092+
&:not([hasactivetab]) {
20942093
.tabbrowser-tab {
20952094
&:hover .tab-background:not([multiselected]) {
20962095
background-color: var(--tab-hover-background-color) !important;
@@ -2292,7 +2291,7 @@
22922291
}
22932292
}
22942293
> .tabbrowser-tab,
2295-
.tab-split-view-container > .tabbrowser-tab {
2294+
> tab-split-view-wrapper > .tabbrowser-tab {
22962295
margin-inline-start: 0px !important;
22972296
transition:
22982297
margin-inline-start var(--uc-autohide-transition-duration)
@@ -2378,7 +2377,7 @@
23782377
}
23792378
}
23802379
> .tabbrowser-tab,
2381-
.tab-split-view-container > .tabbrowser-tab {
2380+
> tab-split-view-wrapper > .tabbrowser-tab {
23822381
margin-inline-start: var(--space-medium) !important;
23832382
transition:
23842383
margin-inline-start var(--uc-hover-transition-duration) var(--uc-autohide-transition-type)

‎chrome/components/uc-tabs-bar.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
#TabsToolbar:not([customizing]) {
1414
visibility: hidden;
15-
transition: var(--uc-autohide-tabs-toolbar-transition) !important;
15+
transition: var(--uc-autohide-tabstoolbar-transition) !important;
1616
}
1717
/* Add a hover target pseudo-element to capture hovering */
1818
@media -moz-pref("uc.flex.auto-hide-horizontal-tabs-and-keep-navbar", 3) {
@@ -32,7 +32,7 @@
3232
z-index: 1;
3333
/* When the tabs toolbar loses hover while the navigator may still be hovered,
3434
use the hover-state transition timing even when not hovered so their animations stay synchronized. */
35-
transition: var(--uc-hover-tabs-toolbar-transition) !important;
35+
transition: var(--uc-hover-tabstoolbar-transition) !important;
3636
}
3737
}
3838
/* These rules make sure that height of tabs toolbar doesn't exceed tab-min-height */
@@ -58,7 +58,7 @@
5858
/*
5959
transition-delay: var(--uc-autohide-tabstoolbar-delay) !important;
6060
*/
61-
transition: var(--uc-hover-tabs-toolbar-transition) !important;
61+
transition: var(--uc-hover-tabstoolbar-transition) !important;
6262
}
6363
}
6464
}
@@ -73,7 +73,7 @@
7373
#TabsToolbar {
7474
visibility: var(--uc-autohide-tabstoolbar-visibility);
7575
margin-bottom: var(--uc-autohide-tabstoolbar-bottom);
76-
transition: var(--uc-hover-tabs-toolbar-transition) !important;
76+
transition: var(--uc-hover-tabstoolbar-transition) !important;
7777
}
7878
}
7979
}
@@ -175,7 +175,7 @@
175175
#nav-bar:hover + #PersonalToolbar {
176176
*/
177177
#navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar {
178-
--uc-tabs-toolbar-windows-controls-transition: var(--uc-hover-navbar-transition);
178+
--uc-tabstoolbar-windows-controls-transition: var(--uc-hover-navbar-transition);
179179
transform: translateY(0);
180180
opacity: 1;
181181
/*
@@ -327,7 +327,7 @@
327327
--uc-navigator-z-index: var(--uc-sb-bm-disable-autohide-z-index, 5);
328328
--uc-navbar-transform: 0;
329329
--uc-navbar-opacity: 1;
330-
--uc-tabs-toolbar-windows-controls-margin-right: 0;
330+
--uc-tabstoolbar-windows-controls-margin-right: 0;
331331
}
332332
}
333333
}

‎chrome/components/uc-urlbar.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@
185185
#identity-icon-box.identity-box-button {
186186
*/
187187
#identity-icon-box {
188-
margin: 3px 3px 3px 3px;
188+
margin: 2px 3px 2px 3px;
189189
/* The variable --urlbar-icon-border-radius was deprecated after v145 and replaced with --urlbar-inner-border-radius.
190190
This fallback can be removed once support for older versions is no longer needed. */
191191
border-radius: var(

0 commit comments

Comments
 (0)