diff --git a/README.md b/README.md
index 722c5f8..f0673db 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,10 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse
| **OPTIONAL: Add a second image named `background-1.(jpg/png)` for seperate dark mode background.** |
| `uc.tweak.newtab-background` |
+| Hide forward button when it's disabled (like in Edge) |
+| ------------------------------------------------------ |
+| `uc.tweak.hide-forward-button` |
+
| Hide Firefox logo on newtab page |
| -------------------------------- |
| `uc.tweak.hide-newtab-logo` |
diff --git a/chrome/content/common.css b/chrome/content/common.css
index 74d97f3..7491148 100644
--- a/chrome/content/common.css
+++ b/chrome/content/common.css
@@ -34,6 +34,9 @@
--in-content-primary-button-background: light-dark(#0061e0, #006CBE) !important;
--in-content-primary-button-background-hover: light-dark(#0250bb, #0078D4) !important;
--in-content-primary-button-background-active: light-dark(#053e94, #005CA3) !important;
+ --color-accent-primary: light-dark(#0078D4, #006CBE) !important;
+ --color-accent-primary-hover: light-dark(#006CBE, #0078D4) !important;
+ --color-accent-primary-active: light-dark(#0749AC, #005CA3) !important;
--in-content-danger-button-background: light-dark(#DF4951, #E12424) !important;
--in-content-danger-button-background-hover: light-dark(#EA656C, #F94343) !important;
--in-content-danger-button-background-active: light-dark(#BB353C, #AA1E1E) !important;
@@ -41,6 +44,7 @@
--focus-outline-color: var(--in-content-focus-outline-color) !important;
--in-content-table-background: light-dark(#f7f7f7, #252525) !important;
--in-content-text-color: var(--in-content-page-color) !important;
+ --border-interactive-color: light-dark(#929292, #858585) !important;
scrollbar-color:
light-dark(rgb(37 37 37 / .4), rgb(255 255 255 / .4))
light-dark(#f7f7f7, #252525) !important;
@@ -80,6 +84,16 @@ url-prefix(about:addons) {
button.tab-button[selected]:hover {
border-block-color: transparent currentColor !important;
}
+
+ .toggle-button {
+ --toggle-dot-margin: 4px !important;
+ --toggle-width: 40px !important;
+ --toggle-height: 20px !important;
+ --toggle-background-color: transparent !important;
+ --toggle-dot-background-color: var(--in-content-page-color) !important;
+ --toggle-dot-background-color-on-pressed: #fff !important;
+ --toggle-dot-transform-x: calc(var(--toggle-width) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) - var(--toggle-dot-width)) !important;
+ }
}
/* fix page flashes when loading some websites */
diff --git a/chrome/global/colors.css b/chrome/global/colors.css
index f775789..1254ddf 100644
--- a/chrome/global/colors.css
+++ b/chrome/global/colors.css
@@ -93,14 +93,19 @@
/* make the titlebar buttons black/white on default themes */
:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {
- color: light-dark(#000, #fff) !important;
+ color: var(--toolbar-color) !important;
}
#statuspanel-label {
background-color: var(--toolbar-field-focus-background-color) !important;
color: var(--toolbar-field-focus-color) !important;
border-color: transparent !important;
- box-shadow: 0 2px 5px #0004, 0 0 0 1px light-dark(#0002, #0004) !important;
+ box-shadow: 0 2px 5px #0002, 0 0 0 1px light-dark(#0001, #0002) !important;
+ border-radius: 0 4px 0 0 !important;
+
+ #statuspanel[mirror] & {
+ border-radius: 4px 0 0 0 !important;
+ }
}
@media (-moz-platform: windows) {
@@ -133,70 +138,38 @@
/* library window theme */
window#places {
- --organizer-color: #000 !important;
- --organizer-deemphasized-color: #666 !important;
- --organizer-toolbar-background: #f7f7f7 !important;
- --organizer-pane-background: #f7f7f7 !important;
- --organizer-content-background: #f7f7f7 !important;
- --organizer-hover-background: #00000025 !important;
- --organizer-selected-background: #006CBE80 !important;
- --organizer-outline-color: #0055D7a0 !important;
- --organizer-toolbar-field-background: #fff !important;
- --organizer-toolbar-field-background-focused: #fff !important;
- --organizer-border-color: #bfbfbf !important;
- scrollbar-color: #0006 #f7f7f740 !important;
+ --organizer-color: light-dark(#000, #fff) !important;
+ --organizer-deemphasized-color: light-dark(#666, #bbb) !important;
+ --organizer-toolbar-background: light-dark(#f7f7f7, #3B3B3B) !important;
+ --organizer-pane-background: light-dark(#f7f7f7, #2B2B2B) !important;
+ --organizer-content-background: light-dark(#f7f7f7, #1C1C1C) !important;
+ --organizer-hover-background: light-dark(#00000025, #ffffff25) !important;
+ --organizer-selected-background: light-dark(#006CBE80, #006CBE80) !important;
+ --organizer-outline-color: light-dark(#0055D7a0, #63ADE5) !important;
+ --organizer-toolbar-field-background: light-dark(#fff, #2B2B2B) !important;
+ --organizer-toolbar-field-background-focused: light-dark(#fff, #2B2B2B) !important;
+ --organizer-border-color: light-dark(#bfbfbf, #686868) !important;
+ scrollbar-color:
+ light-dark(#0006, #fff6)
+ light-dark(#f7f7f740, #2B2B2B40) !important;
}
#placesViewsBox #downloadsListBox richlistitem[selected="true"] {
- background-color: #006CBE !important;
- color: #fff !important;
+ background-color: light-dark(#006CBE, #006CBE) !important;
+ color: light-dark(#fff, #fff) !important;
}
#placeContentColumns :is(treecol, treecolpicker) {
- background-color: #f7f7f7 !important;
- color: #000 !important;
- border-inline-start: 1px solid #bfbfbf !important;
- box-shadow: inset 0 -1px #bfbfbf !important;
+ background-color: light-dark(#f7f7f7, #3B3B3B) !important;
+ color: light-dark(#000, #fff) !important;
+ border-inline-start: 1px solid light-dark(#bfbfbf, #686868) !important;
+ box-shadow: inset 0 -1px light-dark(#bfbfbf, #686868) !important;
appearance: none !important;
}
#placeContentColumns :is(treecol, treecolpicker):where(:hover) {
- background-color: #cecece !important;
- color: #000 !important;
- }
-
- @media (prefers-color-scheme: dark) {
- window#places {
- --organizer-color: #fff !important;
- --organizer-deemphasized-color: #bbb !important;
- --organizer-toolbar-background: #3B3B3B !important;
- --organizer-pane-background: #2B2B2B !important;
- --organizer-content-background: #1C1C1C !important;
- --organizer-hover-background: #ffffff25 !important;
- --organizer-selected-background: #006CBE80 !important;
- --organizer-outline-color: #63ADE5 !important;
- --organizer-toolbar-field-background: #2B2B2B !important;
- --organizer-toolbar-field-background-focused: #2B2B2B !important;
- --organizer-border-color: #686868 !important;
- scrollbar-color: #fff6 #2B2B2B40 !important;
- }
-
- #placesViewsBox #downloadsListBox richlistitem[selected="true"] {
- background-color: #006CBE !important;
- color: #fff !important;
- }
-
- #placeContentColumns :is(treecol, treecolpicker) {
- background-color: #3B3B3B !important;
- color: #fff !important;
- border-inline-start: 1px solid #686868 !important;
- box-shadow: inset 0 -1px #686868 !important;
- }
-
- #placeContentColumns :is(treecol, treecolpicker):where(:hover) {
- background-color: #4A4A4A !important;
- color: #fff !important;
- }
+ background-color: light-dark(#cecece, #4A4A4A ) !important;
+ color: light-dark(#000, #fff) !important;
}
}
@@ -214,6 +187,24 @@
.sidebar-panel:not([lwt-sidebar]) {
color: light-dark(#000, #fff) !important;
scrollbar-color: light-dark(#0006, #fff6) light-dark(#f7f7f740, #3b3b3b40) !important;
+
+ /* Sidebar search box (Windows) */
+ @media(-moz-platform: windows) {
+ & #sidebar-search-container>#search-box,
+ & #viewButton {
+ appearance: none !important;
+ background-color: light-dark(#fff, #2b2b2b) !important;
+ color: inherit !important;
+ border: 1px solid light-dark(#bfbfbf, #686868) !important;
+ border-radius: 4px !important;
+ padding: 6px 8px !important;
+
+ &:focus {
+ border-width: 2px !important;
+ padding: 5px 7px !important;
+ }
+ }
+ }
}
@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml){
@@ -222,17 +213,6 @@
}
}
-@media(-moz-platform: windows) {
- .sidebar-panel:not([lwt-sidebar]) #sidebar-search-container>#search-box,
- .sidebar-panel:not([lwt-sidebar]) #viewButton {
- appearance: none !important;
- background-color: light-dark(#fff, #2b2b2b) !important;
- color: inherit !important;
- border: 1px solid light-dark(#bfbfbf, #686868) !important;
- border-radius: 2px !important;
- }
-}
-
/* Linux / GTK csd support */
@media (-moz-gtk-csd-available) {
:root:not(:-moz-lwtheme) {
diff --git a/chrome/global/popup.css b/chrome/global/popup.css
index b7d0766..49d949b 100644
--- a/chrome/global/popup.css
+++ b/chrome/global/popup.css
@@ -281,6 +281,8 @@
#downloadsListBox,
.downloadsPanelFooterButton {
margin: var(--arrowpanel-menuitem-margin) !important;
+ width: auto !important;
+ min-width: auto !important;
}
#downloadsPanel-blockedSubview,
@@ -448,15 +450,6 @@ panelview .toolbarbutton-1,
box-shadow: var(--uc-box-shadow) !important;
}
- .popup-internal-box,
- .menupopup-arrowscrollbox {
- margin: 0 !important;
- }
-
- .menupopup-arrowscrollbox {
- margin: var(--uc-margin) !important;
- }
-
.popup-internal-box {
margin: 0 !important;
}
@@ -571,7 +564,9 @@ panelview .toolbarbutton-1,
width: 16px !important;
}
- menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before {
+ menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before,
+ menupopup>menuitem::before,
+ menupopup>menuitem::after {
display: none !important;
}
diff --git a/chrome/global/tree.css b/chrome/global/tree.css
new file mode 100644
index 0000000..2bbffb4
--- /dev/null
+++ b/chrome/global/tree.css
@@ -0,0 +1,87 @@
+/* Edge-Frfox - tree.css */
+
+/* Change height of tree items and add rounded corners */
+treechildren::-moz-tree-row,
+treecol:not([hideheader="true"]),
+.tree-columnpicker-button {
+ min-height: max(28px, 1.3em) !important;
+ border-radius: 2px !important;
+}
+
+/* Change the background colour on hover */
+@media not (prefers-contrast) {
+ treechildren::-moz-tree-row(hover) {
+ background-color: var(--toolbarbutton-hover-background) !important;
+ }
+}
+
+/* Change the background colour when pressed */
+treechildren::-moz-tree-row(selected) {
+ background-color: var(--toolbarbutton-active-background) !important;
+}
+
+/* Change the background colour when focused */
+treechildren::-moz-tree-row(selected, focus) {
+ background-color: var(--button-primary-bgcolor) !important;
+}
+
+treechildren::-moz-tree-row(current, focus) {
+ outline: var(--default-focusring);
+ outline-color: var(--button-primary-bgcolor) !important;
+ outline-offset: calc(-1 * var(--default-focusring-width));
+}
+
+treechildren::-moz-tree-image(selected),
+treechildren::-moz-tree-twisty(selected),
+treechildren::-moz-tree-cell-text(selected) {
+ color: inherit !important;
+}
+
+treechildren::-moz-tree-image(selected, focus),
+treechildren::-moz-tree-twisty(selected, focus),
+treechildren::-moz-tree-cell-text(selected, focus) {
+ color: var(--button-primary-color) !important;
+}
+
+/* Spacing between icon and label */
+treechildren::-moz-tree-image {
+ margin-inline-end: 8px !important;
+}
+
+/* Separator appearance */
+treechildren::-moz-tree-separator {
+ border-top: 1px solid var(--toolbarseparator-color) !important;
+ border-bottom: none !important;
+}
+
+/* Change the colour of the drop feedback elements */
+treechildren::-moz-tree-cell-text(primary, dropOn) {
+ background-color: var(--button-primary-bgcolor) !important;
+ color: var(--button-primary-color) !important;
+}
+
+treechildren::-moz-tree-drop-feedback {
+ background-color: var(--toolbarbutton-icon-fill-attention) !important;
+ border-radius: 2px !important;
+}
+
+/* Change the appearance for the expandable items */
+treechildren::-moz-tree-twisty {
+ padding-top: 0 !important;
+ padding-inline: 4px !important;
+ width: 16px !important;
+ list-style-image: url("../icons/arrow-filled-right.svg") !important;
+}
+
+treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
+ list-style-image: url("../icons/arrow-filled-left.svg") !important;
+}
+
+treechildren::-moz-tree-twisty(open) {
+ list-style-image: url("../icons/arrow-filled-down.svg") !important;
+}
+
+/* Change the identation of child items */
+treechildren::-moz-tree-indentation {
+ width: 16px !important;
+}
diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css
index 71235ab..126e378 100644
--- a/chrome/global/tweaks.css
+++ b/chrome/global/tweaks.css
@@ -17,12 +17,11 @@ bugs with certain themes eg. dark text on dark background.) */
/* remove tab separators */
@media (-moz-bool-pref: "uc.tweak.remove-tab-separators") {
- .tabbrowser-tab:not([selected="true"], :hover, [beforeselected-visible], [beforehovered]) .tab-stack::after {
- display: none !important;
- }
-
- .tabbrowser-tab:not([last-visible-tab="true"]) {
- margin-inline-end: 0px !important;
+ .tabbrowser-tab .tab-stack {
+ &::before,
+ &::after {
+ content: initial !important;
+ }
}
}
@@ -263,7 +262,7 @@ bugs with certain themes eg. dark text on dark background.) */
#TabsToolbar .titlebar-buttonbox {
--uc-position: calc((var(--uc-navbar-height) + var(--tab-block-margin)) / 2 - 8px);
visibility: visible !important;
- position: absolute;
+ position: absolute !important;
top: var(--uc-position);
left: var(--uc-position);
margin: 0 !important;
@@ -301,3 +300,9 @@ bugs with certain themes eg. dark text on dark background.) */
}
}
}
+
+@media (-moz-bool-pref: "uc.tweak.hide-forward-button") {
+ :root:not([customizing]) #forward-button[disabled] {
+ display: none !important;
+ }
+}
diff --git a/chrome/icons/arrow-filled-down.svg b/chrome/icons/arrow-filled-down.svg
new file mode 100644
index 0000000..bd111a7
--- /dev/null
+++ b/chrome/icons/arrow-filled-down.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/arrow-filled-left.svg b/chrome/icons/arrow-filled-left.svg
new file mode 100644
index 0000000..c0f6945
--- /dev/null
+++ b/chrome/icons/arrow-filled-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/arrow-filled-right.svg b/chrome/icons/arrow-filled-right.svg
new file mode 100644
index 0000000..2f65f5e
--- /dev/null
+++ b/chrome/icons/arrow-filled-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/firefox-view.svg b/chrome/icons/firefox-view.svg
new file mode 100644
index 0000000..6288a1e
--- /dev/null
+++ b/chrome/icons/firefox-view.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css
index 00e2f5e..e99d62c 100644
--- a/chrome/icons/icons.css
+++ b/chrome/icons/icons.css
@@ -133,6 +133,10 @@ and 11 so applied to both) */
list-style-image: url("new-tab.svg") !important;
}
+#firefox-view-button {
+ list-style-image: url("firefox-view.svg") !important;
+}
+
#sync-button,
.urlbarView-row[source="tabs"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon,
#urlbar-engine-one-off-item-tabs {
@@ -168,6 +172,11 @@ and 11 so applied to both) */
list-style-image: url("search-page.svg") !important;
}
+#appMenu-translate-button,
+#translations-button-icon {
+ list-style-image: url("translate.svg") !important;
+}
+
#open-file-button {
list-style-image: url("open.svg") !important;
}
@@ -361,7 +370,9 @@ and 11 so applied to both) */
.widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after,
.menu-right {
- content: url("arrow-right.svg") !important;
+ content: url("arrow-filled-right.svg") !important;
+ opacity: 0.6 !important;
+ scale: 0.75 !important;
}
#PlacesChevron,
@@ -933,3 +944,67 @@ and 11 so applied to both) */
--header-image: url("extension.svg");
--uc-enabled: 1;
}
+
+/* Tree items used for side bar and library windows */
+treechildren::-moz-tree-image {
+ fill-opacity: 1 !important;
+}
+
+treechildren::-moz-tree-image(title) {
+ list-style-image: url("page-portrait.svg") !important;
+}
+
+/* default folder icon */
+treechildren::-moz-tree-image(title, container),
+treechildren::-moz-tree-image(title, open) {
+ list-style-image: url("folder.svg") !important;
+}
+
+/* bookmarks bar icon */
+treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
+ list-style-image: url("bookmark-hollow.svg") !important;
+}
+
+/* bookmarks menu icon */
+treechildren::-moz-tree-image(container, queryFolder_menu________) {
+ list-style-image: url("folder.svg") !important;
+}
+
+/* smart folder icon */
+treechildren::-moz-tree-image(query) {
+ list-style-image: url("settings.svg") !important;
+}
+
+/* bookmarks category icon */
+treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
+ list-style-image: url("bookmark-hollow.svg") !important;
+}
+
+/* downloads category icon */
+treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
+ list-style-image: url("downloads.svg") !important;
+}
+
+/* tags category icon */
+treechildren::-moz-tree-image(title, query, tagContainer),
+treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
+ list-style-image: url("tag.svg") !important;
+}
+
+/* calendar icon for folders grouping items by date */
+treechildren::-moz-tree-image(title, query, dayContainer) {
+ list-style-image: url("history.svg") !important;
+}
+
+treechildren::-moz-tree-image(title, query, hostContainer) {
+ list-style-image: url("folder.svg") !important;
+}
+
+/* history category icon */
+treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
+ list-style-image: url("history.svg") !important;
+}
+
+treechildren::-moz-tree-image(title, query, folder) {
+ list-style-image: url("folder.svg") !important;
+}
diff --git a/chrome/icons/tag.svg b/chrome/icons/tag.svg
new file mode 100644
index 0000000..8864d48
--- /dev/null
+++ b/chrome/icons/tag.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/icons/translate.svg b/chrome/icons/translate.svg
new file mode 100644
index 0000000..58e8c43
--- /dev/null
+++ b/chrome/icons/translate.svg
@@ -0,0 +1,3 @@
+
diff --git a/chrome/toolbar/navbar.css b/chrome/toolbar/navbar.css
index c6f4c1d..ef37b6c 100644
--- a/chrome/toolbar/navbar.css
+++ b/chrome/toolbar/navbar.css
@@ -3,7 +3,7 @@
:root {
--toolbarbutton-border-radius: 4px !important;
--toolbarbutton-inner-padding: 7px !important;
- --uc-toolbarbutton-inner-inline-padding: 12px !important;
+ --uc-toolbarbutton-inner-inline-padding: 10px !important;
--tabs-navbar-shadow-size: 0 !important;
}
diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css
index de34c55..9e4a820 100644
--- a/chrome/toolbar/tabbar.css
+++ b/chrome/toolbar/tabbar.css
@@ -6,7 +6,7 @@
& #titlebar {
--tab-min-height: 32px !important;
--inline-tab-padding: 11px !important;
- --tab-border-radius: 8px !important;
+ --tab-border-radius: 4px !important;
--uc-toolbarbutton-inner-padding: 6px !important;
--toolbarbutton-border-radius: 4px !important;
@@ -82,6 +82,14 @@
}
}
+.tabbrowser-tab:where([selected], [multiselected], :hover) + .tabbrowser-tab:not([selected]) .tab-background {
+ border-bottom-left-radius: var(--tab-border-radius) !important;
+
+ &::before {
+ --uc-tab-corner-bg: transparent !important;
+ }
+}
+
.tab-background:is([selected], [multiselected]) {
--uc-tab-corner-bg: var(--tab-selected-bgcolor, var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor)));
}
diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css
index 91a8a26..d9871fc 100644
--- a/chrome/toolbar/urlbar.css
+++ b/chrome/toolbar/urlbar.css
@@ -3,7 +3,7 @@
:root {
--urlbar-min-height: 30px !important;
--urlbarView-item-inline-padding: 14px !important;
- --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) + 14px) !important;
+ --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important;
--urlbar-icon-padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important;
--uc-urlbar-icon-inline-padding: calc(var(--uc-toolbarbutton-inner-inline-padding) - 2px) !important;
--identity-box-margin-inline: 2px !important;
diff --git a/chrome/userChrome.css b/chrome/userChrome.css
index d8692d8..a43d558 100644
--- a/chrome/userChrome.css
+++ b/chrome/userChrome.css
@@ -9,6 +9,7 @@
@import url("global/popup.css");
@import url("global/tweaks.css");
@import url("global/browser.css");
+@import url("global/tree.css");
/* import custom stylesheet instead of modifying Edge-Frfox theme files */
@import url("custom.css");