Skip to content

Commit 6b29279

Browse files
amnwebamnweb
committed
Added new icons & Sidebar support and more...
1 parent 0b5dcba commit 6b29279

26 files changed

+676
-94
lines changed

‎README.md

+19-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,29 @@
33
<img src="screenshots/firefox-25-11-2023.jpg" alt="screenshot" title="Screenshot" width="900">
44
<img src="screenshots/Screenshot 2023-12-04 144143.png" alt="screenshot" title="Screenshot" width="900">
55

6+
7+
# Rounded Corners
8+
<img src="screenshots/rounded-corners.png" alt="screenshot" title="Screenshot" width="900">
9+
10+
# Sidebar Support
11+
<img src="screenshots/sidebar-demo.png" alt="screenshot" title="Screenshot" width="900">
12+
<video controls poster="screenshots/sidebar-demo-video.00_00_17_07.Still001.png" width="900" height="506" loop muted>
13+
<source src="screenshots/sidebar-demo-video.mp4" type="video/mp4">
14+
</video>
15+
616
# How to install
717
1. Go to `about:support` and click the "Open Folder/Show in Finder" button for the root directory of your browser profile/s.
818
2. Download and copy the `chrome` folder and `user.js` into the profile folder.
919
3. Restart firefox.
1020

1121
# Tweaks
12-
To enable macOS button style, open `user.js` and find `fp.tweak.macos-button` and set it to `true`.
13-
To disable bookmarks autohide open `user.js` and find `fp.tweak.autohide-bookmarks` and set it to `false`.
22+
- To enable macOS button style, open `user.js` and find `fp.tweak.macos-button` and set it to `true`.
23+
- To disable bookmarks autohide open `user.js` and find `fp.tweak.autohide-bookmarks` and set it to `false`.
24+
- To enable or disable rounded corners, open `user.js` and find `fp.tweak.rounded-corners` and set it to `true` or `false`.
25+
- To enable support for sidebar open `user.js` and find `fp.tweak.sidebar-enabled` and set it to `true` or `false`.
26+
27+
> [!NOTE]
28+
> <sub>To get sidebar support you will need to install extension [Sidebar Tabs](https://github.com/asamuzaK/sidebarTabs)</sub>
29+
1430

15-
Enjoy your enhanced browsing experience!
31+
Enjoy your enhanced browsing experience!

‎chrome/content/card-container.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@media (prefers-color-scheme: dark) {
2+
.card-container{
3+
--fxview-primary-action-background:#47CBFF;
4+
background-color: #33333e !important;
5+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
6+
}
7+
}
8+
@media (prefers-color-scheme: light) {
9+
.card-container{
10+
--fxview-primary-action-background:#3672e4;
11+
background-color: #ebebee !important;
12+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
13+
}
14+
}
15+
.fxview-tab-row-url {
16+
text-decoration: none !important;
17+
color:var(--fxview-primary-action-background) !important
18+
}
19+
.sticky-container.bottom-fade {
20+
background:linear-gradient( to bottom, var(--fxview-background-color) 0%, var(--fxview-background-color) 40%, transparent 100% )!important
21+
}

‎chrome/content/common.css

+146-55
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
/* colours */
2+
:root {
3+
--in-content-primary-button-text-color: rgb(255, 255, 255) !important;
4+
--in-content-primary-button-background: #0055D7 !important;
5+
--in-content-primary-button-background-hover: #0960e4 !important;
6+
--in-content-primary-button-background-active: #0751be !important;
7+
}
8+
29
@-moz-document url-prefix(about:) {
310
:root {
411
--in-content-page-color: light-dark(var(--newtab-background-color), #fff) !important;
@@ -8,16 +15,17 @@
815
--in-content-box-background-odd: light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .05)) !important;
916
--in-content-box-info-background: light-dark(#f7f7f7, rgb(255 255 255 / 0.15)) !important;
1017
--in-content-icon-color: light-dark(#666, #fff) !important;
11-
--in-content-accent-color: light-dark(#006CBE, #75B6E8) !important;
18+
--in-content-accent-color: light-dark(#006CBE, #3c90ff) !important;
1219
--in-content-accent-color-active: light-dark(#1683D8, #4C98D1) !important;
1320
--in-content-border-hover: light-dark(rgb(0 0 0 / .5), rgb(255 255 255 / .3)) !important;
1421
--in-content-border-invalid: var(--red-50) !important;
1522
--in-content-border-color: light-dark(#bebebe, rgb(255 255 255 / .2)) !important;
1623
--in-content-error-text-color: light-dark(#FF848A, #FF9AA2) !important;
17-
--in-content-link-color: light-dark(#0078D4, #75B6E8) !important;
18-
--in-content-link-color-hover: light-dark(#006CBE, #63ADE5) !important;
24+
--in-content-link-color: light-dark(#0078D4, #3c90ff) !important;
25+
/* --in-content-link-color-hover: light-dark(#006CBE, #63ADE5) !important; */
26+
--in-content-link-color-hover: light-dark(#006CBE, #0078d4) !important;
1927
--in-content-link-color-active: light-dark(#0749AC, #4C98D1) !important;
20-
--in-content-link-color-visited: light-dark(#0078D4, #75B6E8) !important;
28+
--in-content-link-color-visited: light-dark(#0078D4, #3c90ff) !important;
2129
--link-color: var(--in-content-link-color) !important;
2230
--link-color-hover: var(--in-content-link-color-hover) !important;
2331
--link-color-active: var(--in-content-link-color-active) !important;
@@ -35,21 +43,96 @@
3543
--in-content-danger-button-background: light-dark(#DF4951, #E12424) !important;
3644
--in-content-danger-button-background-hover: light-dark(#EA656C, #F94343) !important;
3745
--in-content-danger-button-background-active: light-dark(#BB353C, #AA1E1E) !important;
38-
--in-content-focus-outline-color: light-dark(rgb(0 85 215 / .5), #63ADE5) !important;
46+
/* --in-content-focus-outline-color: light-dark(rgb(0 85 215 / .5), #63ADE5) !important; */
47+
--in-content-focus-outline-color: light-dark(rgb(0 85 215 / .5), #0078d4) !important;
3948
--focus-outline-color: var(--in-content-focus-outline-color) !important;
40-
--in-content-table-background: light-dark(#f7f7f7,var(--newtab-background-color)) !important;
49+
--in-content-table-background: light-dark(#f7f7f7, var(--newtab-background-color)) !important;
4150
--in-content-text-color: var(--in-content-page-color) !important;
42-
scrollbar-color:
43-
light-dark(rgb(37 37 37 / .4), rgb(255 255 255 / .4))
44-
light-dark(#f7f7f7, var(--newtab-background-color)) !important;
51+
scrollbar-color: light-dark(rgb(37 37 37 / .4), rgb(255 255 255 / .4)) light-dark(#f7f7f7, var(--newtab-background-color)) !important;
52+
53+
--in-content-primary-button-text-color: rgb(255, 255, 255) !important;
54+
--in-content-primary-button-background: #0055D7 !important;
55+
--in-content-primary-button-background-hover: #0960e4 !important;
56+
--in-content-primary-button-background-active: #0751be !important;
57+
58+
59+
}
60+
61+
#translations-manage-install-list,
62+
#handlersView,
63+
#handlersViewHeader,
64+
#engineList,
65+
.web-appearance-choice-image-container,
66+
treecol:not([hideheader="true"]),
67+
input:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
68+
textarea,
69+
search-textbox {
70+
background-color: transparent !important;
71+
}
72+
73+
@media (prefers-color-scheme: dark) {
74+
75+
button:not(.ghost-button):not(.toggle-button):not(.category):not([role="menuitem"]):not(button[class*='devtools']):not(button[id*='toolbox']),
76+
menulist {
77+
border: 1px solid #44434f !important;
78+
background-color: light-dark(#EDEDED, #35343e) !important;
79+
}
80+
81+
button:hover:not(.ghost-button):not(.toggle-button):not(.category):not([role="menuitem"]):not(button[class*='devtools']):not(button[id*='toolbox']),
82+
menulist {
83+
border: 1px solid #4c4b57 !important;
84+
background-color: light-dark(#EDEDED, #393842) !important;
85+
}
86+
87+
button:hover:active:not(.ghost-button):not(.toggle-button):not(.category):not([role="menuitem"]):not(button[class*='devtools']):not(button[id*='toolbox']),
88+
menulist {
89+
border: 1px solid #4c4b57 !important;
90+
background-color: light-dark(#EDEDED, #403f49) !important;
91+
}
92+
93+
button:active:not(.ghost-button):not(.toggle-button):not(.category):not([role="menuitem"]):not(button[class*='devtools']):not(button[id*='toolbox']),
94+
menulist {
95+
border: 1px solid #44434f !important;
96+
background-color: light-dark(#EDEDED, #2d2c35) !important;
97+
}
98+
}
99+
}
100+
101+
102+
@-moz-document url("about:newtab"), url("about:blank"), url("about:home") {
103+
body {
104+
background-color: light-dark(#f7f7f7, rgb(43 42 51)) !important;
45105
}
46106
}
47-
@-moz-document url("about:newtab"),url("about:blank"), url("about:home") {
48-
body {background-color:light-dark(#f7f7f7, rgb(43 42 51)) !important; }
49-
};
107+
50108
/* preferences */
51-
@-moz-document url-prefix(about:preferences),
52-
url-prefix(about:addons) {
109+
@-moz-document url-prefix("about:preferences"), url-prefix("about:preferences#"), url-prefix("about:addons"), url-prefix("about:config") {
110+
table#prefs {
111+
background: transparent !important;
112+
}
113+
114+
.card {
115+
background: light-dark(#fff, #33333e) !important;
116+
}
117+
118+
@media (prefers-color-scheme: dark) {
119+
120+
.sticky-container,
121+
.table-shown #toolbar {
122+
background: #1c1b22 !important;
123+
}
124+
}
125+
126+
@media (prefers-color-scheme: light) {
127+
128+
.sticky-container,
129+
.table-shown #toolbar {
130+
background: #ffffff!important;
131+
}
132+
}
133+
134+
135+
53136
.category[selected] {
54137
position: relative !important;
55138
border-radius: 4px !important;
@@ -80,61 +163,69 @@ url-prefix(about:addons) {
80163
button.tab-button[selected]:hover {
81164
border-block-color: transparent currentColor !important;
82165
}
166+
83167
}
84168

85169
/* fix page flashes when loading some websites */
86-
@-moz-document url("about:newtab"),url("about:blank"), url("about:home"){
170+
@-moz-document url("about:newtab"), url("about:blank"), url("about:home") {
87171
body {
88172
background: var(--in-content-page-background);
89173
color: var(--in-content-page-color);
90174
}
91175
}
92-
@-moz-document url(about:newtab), url(about:home) {
93-
/* Changes the logo on the about:home screen */
94-
.search-wrapper .logo-and-wordmark .logo {
95-
background: url('../icons/firefox-logo.svg') !important;
96-
}
97-
.search-wrapper .logo-and-wordmark::after {
98-
content: "plus";
176+
177+
@-moz-document url(about:newtab), url(about:home){
178+
179+
/* Changes the logo on the about:home screen */
180+
.search-wrapper .logo-and-wordmark .logo {
181+
background: url('../icons/firefox-logo.svg') !important;
182+
}
183+
184+
.search-wrapper .logo-and-wordmark::after {
185+
content: "plus";
99186
font-size: 16px;
100187
margin-top: -8px;
101188
margin-left: 4px;
102189
opacity: 0.8;
103-
}
104-
190+
}
191+
192+
}
193+
194+
195+
196+
@-moz-document url("about:home"),
197+
url("about:newtab") {
198+
199+
#root .outer-wrapper .top-sites-list .top-site-outer {
200+
padding: 20px 20px 4px !important;
105201
}
106202

203+
#root .top-site-outer .tile .icon-wrapper,
204+
#root .outer-wrapper .top-site-outer .top-site-inner,
205+
#root .outer-wrapper .top-site-outer .top-site-inner .tile {
206+
border-radius: 50% !important;
107207

208+
}
209+
210+
.outer-wrapper .body-wrapper .top-site-outer .top-site-inner .tile {
211+
border-bottom: 1px solid #ffffff12 !important;
212+
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35) !important;
213+
}
214+
215+
#root .outer-wrapper .top-site-outer .default-icon {
216+
background-size: 48px !important;
217+
height: 72px !important;
218+
width: 72px !important;
219+
}
220+
221+
#root .top-site-outer .tile .icon-wrapper {
222+
width: 72px !important;
223+
height: 72px !important;
224+
}
225+
226+
.top-site-outer .tile .icon-wrapper.letter-fallback::before {
227+
font-size: 48px !important;
228+
top: -3px !important;
229+
}
108230

109-
@-moz-document url("about:home"),
110-
url("about:newtab") {
111-
112-
#root .outer-wrapper .top-sites-list .top-site-outer {
113-
padding: 20px 20px 4px !important;
114-
}
115-
116-
#root .top-site-outer .tile .icon-wrapper,
117-
#root .outer-wrapper .top-site-outer .top-site-inner,
118-
#root .outer-wrapper .top-site-outer .top-site-inner .tile {
119-
border-radius: 50% !important;
120-
121-
}
122-
.outer-wrapper .body-wrapper .top-site-outer .top-site-inner .tile {
123-
border-bottom: 1px solid #ffffff12 !important;
124-
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35) !important;
125-
}
126-
#root .outer-wrapper .top-site-outer .default-icon {
127-
background-size: 48px !important;
128-
height: 72px !important;
129-
width: 72px !important;
130-
}
131-
#root .top-site-outer .tile .icon-wrapper {
132-
width: 72px !important;
133-
height: 72px !important;
134-
}
135-
.top-site-outer .tile .icon-wrapper.letter-fallback::before {
136-
font-size: 48px !important;
137-
top: -3px !important;
138-
}
139-
140231
}

‎chrome/content/newtab.css

+6-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ url-prefix("about:home") {
8080

8181
.search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button {
8282
border-color: transparent !important;
83-
outline: 2px solid var(--newtab-primary-action-background) !important;
83+
outline: 1px solid #0078D4 !important;
8484
outline-offset: -1px !important;
8585
}
8686

@@ -129,6 +129,11 @@ url-prefix("about:home") {
129129
padding: 30px !important;
130130
}
131131

132+
.top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover){
133+
background-color: #3c3c47 !important;
134+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
135+
}
136+
132137
}
133138

134139
/* private browsing newtab */

‎chrome/global/colors.css

+13-5
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
--toolbar-field-border-color: light-dark(#0000, #0000) !important;
2020
--toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
2121
--toolbar-field-focus-color: var(--toolbar-field-color) !important;
22-
--toolbar-field-focus-border-color: light-dark(#0055D7, #63ADE5) !important;
22+
--toolbar-field-focus-border-color: light-dark(#0055D7, #0055D7) !important;
2323
--link-color: light-dark(#0078D4, #75B6E8) !important;
2424
--urlbar-hover-highlight-color: light-dark(rgb(192 192 192 / .5), rgb(128 128 128 / .5)) !important;
2525
--urlbar-box-bgcolor: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .11)) !important;
@@ -67,10 +67,17 @@
6767
--tab-icon-overlay-stroke: light-dark(#fff, #4b4b4b) !important;
6868
--tab-icon-overlay-fill: light-dark(#252525, #fff) !important;
6969
--toolbarseparator-color: color-mix(in srgb, currentColor 40%, transparent) !important;
70+
--in-content-primary-button-text-color: rgb(255, 255, 255) !important;
71+
--in-content-primary-button-background: #0055D7 !important;
72+
--in-content-primary-button-background-hover: #0960e4 !important;
73+
--in-content-primary-button-background-active: #0751be !important;
74+
75+
7076
}
7177

7278
/* ensure that dark mode is enabled completely in private browsing mode. */
7379
@media (-moz-bool-pref: "browser.theme.dark-private-windows") {
80+
7481
:root[privatebrowsingmode="temporary"],
7582
:root[privatebrowsingmode="temporary"] #nav-bar,
7683
:root[privatebrowsingmode="temporary"] #PersonalToolbar {
@@ -215,12 +222,13 @@
215222
}
216223

217224
@-moz-document url(chrome://browser/content/syncedtabs/sidebar.xhtml){
218-
body {
219-
background: transparent !important;
220-
}
225+
body {
226+
background: transparent !important;
227+
}
221228
}
222229

223230
@media(-moz-platform: windows) {
231+
224232
.sidebar-panel:not([lwt-sidebar]) #sidebar-search-container>#search-box,
225233
.sidebar-panel:not([lwt-sidebar]) #viewButton {
226234
appearance: none !important;
@@ -327,4 +335,4 @@
327335
--toolbar-field-focus-color: FieldText !important;
328336
}
329337
}
330-
}
338+
}

0 commit comments

Comments
 (0)