├── chrome-icons
├── circle.svg
├── circle-dark.svg
├── menu-update.svg
├── arrow-right.svg
├── warning.svg
├── arrow-back.svg
├── close.svg
├── lock.svg
├── audio-blocked.svg
├── menu.svg
├── properties.svg
├── edit.svg
├── star.svg
├── download.svg
├── new-tab.svg
├── refresh.svg
├── check.svg
├── audio.svg
├── home.svg
├── close-tab.svg
├── no-src.svg
├── chevron.svg
├── audio-muted.svg
├── spinner-busy.svg
├── dev.svg
├── info.svg
├── extension.svg
├── extension-blocked.svg
├── tracking-protection.svg
├── settings.svg
├── spinner-progress.svg
└── folder.svg
├── README.md
├── newIcons.css
└── userChrome.css
/chrome-icons/circle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/circle-dark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/menu-update.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/arrow-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/warning.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/arrow-back.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/lock.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/audio-blocked.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/menu.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/properties.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/edit.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/chrome-icons/star.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/download.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/new-tab.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/refresh.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/chrome-icons/check.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/audio.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/home.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/chrome-icons/close-tab.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/no-src.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/chevron.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/audio-muted.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/spinner-busy.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/dev.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/info.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/extension.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/extension-blocked.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/tracking-protection.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/settings.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/chrome-icons/spinner-progress.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chrome-icons/folder.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # futur3f0x
3 | My personal userChrome.css tweaklist and some matching UI adjustments to make Firefox look ~pretty and blurry\~ on macOS
4 |
5 | |Light Theme|Dark Theme|
6 | |---|---|
7 | |||
8 |
9 | **Note:** This setup looks best on macOS, and although tested on Windows, blur doesn't work, and the layout needs tweaks to look right.
10 |
11 | ## Tweaks made
12 | - Misc
13 | - **BLUR!** Native macOS blur effects around the window. Looks great when focused or inactive!
14 | - Using Google Chrome icons/symbols around the UI
15 | - (Optional) Rounded border around the page in windowed mode (Arc-inspired)
16 | - (Optional) Compact 'unified extensions menu'
17 | - Added a bit of padding to the context menu(s)
18 | - Automatically adjusts to light/dark theme
19 | - Recommended to set to **system auto theme**
20 | - Custom themes *should* work but aren't technically supported.
21 | - Autohide
22 | - (Optional) Back/forward buttons only show when enabled
23 | - Tabs toolbar shows only when you have more than 1 tab
24 | - Tab close button only shows when tab icon (favicon) is hovered
25 | - Bookmarks toolbar shows when hovering in the navigation area
26 | - Small indicator dots (⋮) on each side of the urlbar indicate hidden items, shown when hovered
27 | - Tabs
28 | - Shown below the navbar (Safari-inspired)
29 | - Stretch to fill available width
30 | - Close button is combined with favicon; show on hover
31 | - Newtab button moved next to extensions button
32 | - URL bar
33 | - Centered text
34 | - Items hidden until hovered
35 | - Color/theme matched to UI
36 |
37 | ## Setup and Pre-Install
38 | If you've never setup a custom userChrome.css before, I won't go into full detail here, but there's a great writeup from Winaero that will get you where you need to be. Then, come back here to install futur3f0x!
39 | https://winaero.com/enable-loading-userchrome-css-usercontent-css-firefox/
40 |
41 | > Before you install futur3f0x's userChrome, I'd **highly** recommend setting up the navbar as some items change when it's installed.
42 |
43 | ### Customize Toolbar...
44 | 1. Remove any spacers from the toolbar
45 | 2. Add a spacer to the far-left of the toolbar, before the back, forward, reload buttons
46 | 3. Add another spacer to the right of the URL bar, before any buttons
47 | 4. Move the newtab button from the tabs bar to the left of the extensions button
48 | > If you experiment with different layouts and/or find something you like more, feel free to screenshot and tag me on socials!
49 |
50 | ### about:config tweaks
51 | 1. Navigate to **about:config** in a new tab
52 | 2. Set the **required** keys (see below)
53 | 3. Set any **optional** or **futur3f0x specific** keys (see below) as desired
54 | 4. Navigate to **about:support**
55 | 5. Click **Clear startup cache...** and then **Restart**
56 |
57 | **Required:**
58 | - Allow new icons to be properly colored:
59 | - Set `svg.context-properties.content.enabled` to `true`
60 | - IF YOU want to enable the context menu tweaks, you'll need to:
61 | - Set `widget.macos.native-context-menus` to `false`
62 |
63 | **Optional/Recommended:**
64 | - Remove the tab manager dropdown from the top-left:
65 | - Set `browser.tabs.tabmanager.enabled` to `false`
66 | - Enable double-click to close tabs:
67 | - Set `browser.tabs.closeTabByDblclick` to `true`
68 | - Not all Firefox versions have this, but for tab-hover previews:
69 | - Set `browser.tabs.cardPreview.enabled` to `true`
70 |
71 | **Futur3F0x specific:**
72 | - Enable the rounded window border+padding when windowed:
73 | - Set `userchrome.windowed-screen-border` to `true`
74 | - Hide back/forward buttons when disabled:
75 | - Set `userchrome.hide-history-nav` to `true`
76 | - Make address bar fully transparent until hovered/clicked:
77 | - Set `userchrome.transparent-urlbar` to `true`
78 | - Show more items in extensions menu by compacting it
79 | - Set `userchrome.compact-extensions-menu` to `true`
80 |
81 | ## Download/Install
82 | The setup follows the basic process for setting up a userChrome.css file. The main difference is the addition of icon images for use around the UI.
83 | 1. Follow the above steps ***FIRST!***
84 | 2. Open your Firefox's **chrome** folder, and remove any files inside
85 | 3. Download this repo, and copy the **userChrome.css, newIcons.css,** and the **chrome_icons** folder to your **chrome** folder
86 | 4. In Firefox, navigate to **about:support**, click **Clear startup cache...**, and then **Restart**
87 | 5. When Firefox relaunches, you should be greeted with a pretty new UI!
88 |
89 | ## Notes and bugs
90 | - Context menu looks a bit strange, the padding adjustments are newer so I'm still tweaking them
91 | - In fullscreen, the background and webpage **don't** shift down when the navbar is hovered
92 | - ~~The windowed border and padding is often broken, leaving sharp edges in place of the rounded ones~~
93 | - This issue has been fixed with Futur3F0x v1.2
94 | - Some may not prefer this, but you can enable it in **about:config** (see above)
95 |
96 | **I DO NOT** consider this an actively maintained project. I made this largely for personal use, so I'll only update the project when I make changes (rarely); with exception of UI-breaking changes that come through Firefox updates that need to be fixed.
97 | Of course, those who like tweaking are always welcome to propose changes, file issues/bugs, and even fork the project, but I may not commit changes that I don't want in my own setup, as this will mirror whatever I'm currently using.
98 |
99 | Lastly, HUGE thanks @MrOtherGuy for his incredible dedication to FirefoxCSS hacks & tricks; this would *not* be possible without him!
100 |
--------------------------------------------------------------------------------
/newIcons.css:
--------------------------------------------------------------------------------
1 | :root,
2 | html,
3 | body {
4 | --mf-fast-invoke: cubic-bezier(0, 0, 0, 1);
5 | --mf-strong-invoke: cubic-bezier(0.13, 1.62, 0, 0.92);
6 | --mf-fast-dismiss: cubic-bezier(0, 0, 0, 1);
7 | --mf-soft-dismiss: cubic-bezier(1, 0, 1, 1);
8 | --mf-point-to-point: cubic-bezier(0.55, 0.55, 0, 1);
9 | --mf-fade-in-out: linear;
10 | --mf-no-src-icon: url("chrome-icons/no-src.svg");
11 | --mf-audio-icon: url("chrome-icons/audio.svg");
12 | --mf-audio-muted-icon: url("chrome-icons/audio-muted.svg");
13 | --mf-audio-blocked-icon: url("chrome-icons/audio-blocked.svg");
14 | --mf-close-tab-icon: url("chrome-icons/close-tab.svg");
15 | --mf-new-tab-icon: url("chrome-icons/new-tab.svg");
16 | --mf-arrow-back-icon: url("chrome-icons/arrow-back.svg");
17 | --mf-refresh-icon: url("chrome-icons/refresh.svg");
18 | --mf-close-icon: url("chrome-icons/close.svg");
19 | --mf-home-icon: url("chrome-icons/home.svg");
20 | --mf-dev-icon: url("chrome-icons/dev.svg");
21 | --mf-menu-icon: url("chrome-icons/menu.svg");
22 | --mf-menu-update-icon: url("chrome-icons/menu-update.svg");
23 | --mf-extension-icon: url("chrome-icons/extension.svg");
24 | --mf-extension-blocked-icon: url("chrome-icons/extension-blocked.svg");
25 | --mf-download-icon: url("chrome-icons/download.svg");
26 | --mf-info-icon: url("chrome-icons/info.svg");
27 | --mf-lock-icon: url("chrome-icons/lock.svg");
28 | --mf-warning-icon: url("chrome-icons/warning.svg");
29 | --mf-properties-icon: url("chrome-icons/properties.svg");
30 | --mf-tracking-protection-icon: url("chrome-icons/tracking-protection.svg");
31 | --mf-star-icon: url("chrome-icons/star.svg");
32 | --mf-chevron-icon: url("chrome-icons/chevron.svg");
33 | --mf-folder-icon: url("chrome-icons/folder.svg");
34 | --mf-check-icon: url("chrome-icons/check.svg");
35 | --mf-edit-icon: url("chrome-icons/edit.svg");
36 | --mf-arrow-right-icon: url("chrome-icons/arrow-right.svg");
37 | --mf-white: #fff;
38 | --mf-black: #000;
39 | --mf-grey-900-white-4-percent: #292a2d;
40 | --mf-grey-900-white-5-percent: #35363a;
41 | --mf-grey-900: #202124;
42 | --mf-grey-800: #3c4043;
43 | --mf-grey-700: #5f6368;
44 | --mf-grey-600: #80868b;
45 | --mf-grey-500: #9aa0a6;
46 | --mf-grey-400: #bdc1c6;
47 | --mf-grey-300: #dadce0;
48 | --mf-grey-200: #e8eaed;
49 | --mf-grey-100: #f1f3f4;
50 | --mf-grey-50: #f8f9fa;
51 | --mf-blue-900: #174ea6;
52 | --mf-blue-800: #185abc;
53 | --mf-blue-700: #1967d2;
54 | --mf-blue-600: #1a73e8;
55 | --mf-blue-500: #4285f4;
56 | --mf-blue-400: #669df6;
57 | --mf-blue-300: #8ab4f8;
58 | --mf-blue-200: #aecbfa;
59 | --mf-blue-100: #d2e3fc;
60 | --mf-blue-50: #e8f0fe;
61 | --mf-elevation-2: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
62 | --mf-elevation-3: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
63 | --mf-elevation-4: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
64 | --mf-accent-color: var(--mf-blue-300);
65 | --mf-accent-color-hover: color-mix(in srgb, var(--mf-accent-color) 80%, transparent);
66 | --mf-accent-color-transparent: color-mix(in srgb, var(--mf-accent-color) 8.37%, transparent);
67 | --mf-accent-color-transparent-active: color-mix(in srgb, var(--mf-accent-color) 20%, transparent);
68 | --mf-background-color-0: var(--mf-grey-900);
69 | --mf-background-color-50: var(--mf-grey-900-white-4-percent);
70 | --mf-background-color-100: var(--mf-grey-900-white-5-percent);
71 | --mf-text-primary: var(--mf-grey-200);
72 | --mf-text-secondary: var(--mf-grey-500);
73 | --mf-text-on-accent: var(--mf-grey-900);
74 | --mf-secondary-button-text: var(--mf-accent-color);
75 | --mf-control-background-color: color-mix(in srgb, var(--mf-white) 6.05%, transparent);
76 | --mf-control-border-color: color-mix(in srgb, var(--mf-white) 6.05%, transparent);
77 | --mf-input-background-color: var(--mf-background-color-0);
78 | --mf-menu-background-color: var(--mf-background-color-50);
79 | --mf-menu-background-color-hover: #323334;
80 | --mf-menu-border-color: var(--mf-grey-800);
81 | --mf-tab-separator-color: color-mix(in srgb, var(--mf-white) 20%, transparent);
82 | --mf-tab-outline-color: color-mix(in srgb, var(--mf-black) 10%, transparent);
83 | --mf-tab-opacity: 1;
84 | --mf-tab-opacity-hover: 0.5;
85 | --mf-tab-icon-color: #c3c3c3;
86 | --mf-tab-label-color: #e3e3e3;
87 | --mf-icon-color-primary: var(--mf-grey-100);
88 | --mf-icon-color-secondary: var(--mf-grey-500);
89 | --mf-content-separator-color: #606164;
90 | --mf-selection-text-color: var(--mf-white);
91 | --mf-selection-background-color: var(--mf-blue-900)
92 | }
93 |
94 | /*
95 | .tab-icon-image:not([src]),
96 | .tab-icon-image:-moz-broken {
97 | content: var(--mf-no-src-icon) !important;
98 | fill: var(--mf-grey-600) !important
99 | } */
100 |
101 | .unified-nav-forward:not([_moz-menuactive])[uri*="about:"],
102 | .unified-nav-back:not([_moz-menuactive])[uri*="about:"] {
103 | list-style-image: var(--mf-no-src-icon) !important;
104 | fill: var(--mf-grey-600) !important
105 | }
106 |
107 | #urlbar-results .urlbarView-favicon[src="chrome://global/skin/icons/defaultFavicon.svg"] {
108 | fill: rgba(0, 0, 0, 0) !important;
109 | background: var(--mf-no-src-icon) !important
110 | }
111 |
112 | .all-tabs-button:not([src]) {
113 | list-style-image: var(--mf-no-src-icon) !important;
114 | fill: var(--mf-grey-600) !important
115 | }
116 |
117 | .tab-close-button,
118 | .close-icon {
119 | list-style-image: var(--mf-close-tab-icon) !important
120 | }
121 |
122 | #tabs-newtab-button,
123 | #new-tab-button {
124 | list-style-image: var(--mf-new-tab-icon) !important
125 | }
126 |
127 | .toolbarbutton-1:is(#back-button, #forward-button),
128 | #context-back,
129 | #context-forward,
130 | .subviewbutton-back,
131 | .identity-popup-expander {
132 | list-style-image: var(--mf-arrow-back-icon) !important
133 | }
134 |
135 | .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
136 | .unidied-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
137 | list-style-image: var(--mf-arrow-back-icon) !important
138 | }
139 |
140 | .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr)>hbox>image,
141 | .unidied-nav-back[_moz-menuactive]:-moz-locale-dir(rtl)>hbox>image {
142 | transform: scaleX(-1) !important
143 | }
144 |
145 | .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
146 | .unidied-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
147 | list-style-image: var(--mf-arrow-back-icon) !important
148 | }
149 |
150 | .toolbarbutton-1#forward-button .toolbarbutton-icon,
151 | #context-forward .menu-iconic-icon {
152 | transform: scaleX(-1) !important
153 | }
154 |
155 | #reload-button,
156 | #context-reload {
157 | list-style-image: var(--mf-refresh-icon) !important;
158 | -moz-box-align: center !important;
159 | align-items: center !important
160 | }
161 |
162 | #stop-button {
163 | list-style-image: var(--mf-close-icon) !important
164 | }
165 |
166 | /* #nav-bar #reload-button .toolbarbutton-icon,
167 | #nav-bar #stop-button .toolbarbutton-icon {
168 | padding: 4px !important
169 | } */
170 |
171 | #home-button {
172 | list-style-image: var(--mf-home-icon) !important
173 | }
174 |
175 | /* #nav-bar #home-button .toolbarbutton-icon {
176 | padding: 6px !important
177 | } */
178 |
179 | #identity-box[pageproxystate=valid]:is(.verifiedDomain, .mixedActiveBlocked) #identity-icon {
180 | list-style-image: var(--mf-lock-icon) !important
181 | }
182 |
183 | #identity-box[pageproxystate=valid]:is(.notSecure, .mixedActiveContent, .httpsOnlyErrorPage, .weakCipher, .mixedDisplayContent, .mixedDisplayContentLoadedActiveBlocked, .certUserOverridden, #identity-box[pageproxystate=valid].certErrorPage) #identity-icon {
184 | list-style-image: var(--mf-warning-icon) !important
185 | }
186 |
187 | #identity-popup[connection^=secure] .identity-popup-security-connection .identity-popup-security-connection-icon {
188 | list-style-image: var(--mf-lock-icon) !important
189 | }
190 |
191 | #identity-popup:is([connection=secure-cert-user-overridden], [connection=cert-error-page], [connection^=not-secure]) .identity-popup-security-connection .identity-popup-security-connection-icon {
192 | list-style-image: var(--mf-warning-icon) !important
193 | }
194 |
195 | #permissions-granted-icon {
196 | list-style-image: var(--mf-properties-icon) !important
197 | }
198 |
199 | #tracking-protection-icon {
200 | list-style-image: var(--mf-tracking-protection-icon) !important
201 | }
202 |
203 | #star-button,
204 | #context-bookmarkpage,
205 | #pageAction-panel-bookmark,
206 | #urlbar-engine-one-off-item-bookmarks {
207 | list-style-image: var(--mf-star-icon) !important;
208 | fill-opacity: 0 !important
209 | }
210 |
211 | #urlbar-engine-one-off-item-bookmarks {
212 | fill-opacity: 1 !important
213 | }
214 |
215 | #star-button[starred],
216 | #tracking-protection-icon-box[active] {
217 | fill: var(--mf-accent-color) !important
218 | }
219 |
220 | #star-button[starred],
221 | #context-bookmarkpage[starred] {
222 | fill-opacity: 1 !important
223 | }
224 |
225 | #PlacesChevron,
226 | #nav-bar-overflow-button {
227 | list-style-image: var(--mf-chevron-icon) !important
228 | }
229 |
230 | #unified-extensions-button,
231 | #identity-box[pageproxystate=valid].extensionPage #identity-icon,
232 | #identity-popup[connection=extension] .identity-popup-security-connection {
233 | list-style-image: var(--mf-extension-icon) !important
234 | }
235 |
236 | /* #unified-extensions-button>image {
237 | padding: 4.5px !important
238 | } */
239 |
240 | .tabbrowser-tab[image="chrome://mozapps/skin/extensions/extension.svg"] .tab-icon-image {
241 | content: var(--mf-extension-icon) !important
242 | }
243 |
244 | .install-icon {
245 | list-style-image: var(--mf-extension-icon) !important
246 | }
247 |
248 | .install-icon.blocked-permission-icon {
249 | list-style-image: var(--mf-extension-blocked-icon) !important
250 | }
251 |
252 | #pageActionButton,
253 | #PanelUI-menu-button {
254 | list-style-image: var(--mf-menu-icon) !important
255 | }
256 |
257 | #PanelUI-menu-button[badge-status|=update],
258 | .panel-banner-item[notificationid^=update] {
259 | list-style-image: var(--mf-menu-update-icon) !important
260 | }
261 |
262 | .panel-banner-item[notificationid^=update] {
263 | -moz-context-properties: fill, fill-opacity !important;
264 | fill: currentColor !important
265 | }
266 |
267 | .bookmark-item[container],
268 | treechildren::-moz-tree-image(container) {
269 | list-style-image: var(--mf-folder-icon) !important
270 | }
271 |
272 | .downloadIconShow .button-icon,
273 | .folder-icon {
274 | list-style-image: var(--mf-folder-icon) !important
275 | }
276 |
277 | @media(-moz-platform: windows) {
278 | menuitem[checked=true]>.menu-iconic-left {
279 | list-style-image: var(--mf-check-icon) !important
280 | }
281 | }
282 |
283 | .checkbox-check[checked] {
284 | background-image: var(--mf-check-icon) !important
285 | }
286 |
287 | :is(.all-tabs-secondary-button, .tab-icon-overlay)[soundplaying],
288 | .tab-icon-sound {
289 | list-style-image: var(--mf-audio-icon) !important;
290 | fill: var(--mf-tab-icon-color) !important
291 | }
292 |
293 | .all-tabs-secondary-button[muted],
294 | .tab-icon-overlay[muted],
295 | .tab-icon-sound[muted] {
296 | list-style-image: var(--mf-audio-muted-icon) !important;
297 | fill: var(--mf-tab-icon-color) !important
298 | }
299 |
300 | .all-tabs-secondary-button[activemedia-blocked],
301 | .tab-icon-overlay[activemedia-blocked],
302 | .tab-icon-sound[activemedia-blocked] {
303 | list-style-image: var(--mf-audio-muted-icon) !important;
304 | fill: var(--mf-tab-icon-color) !important
305 | }
306 |
307 | .urlbarView-row[type=bookmark]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-type-icon {
308 | background-image: var(--mf-star-icon) !important;
309 | fill: var(--mf-accent-color) !important
310 | }
311 |
312 | #downloads-button,
313 | #downloads-indicator-anchor {
314 | list-style-image: var(--mf-download-icon) !important
315 | }
316 |
317 | #identity-box.unknownIdentity #identity-icon,
318 | #identity-popup[connection=net-error-page] .identity-popup-security-connection,
319 | .panel-info-button>image {
320 | list-style-image: var(--mf-info-icon) !important
321 | }
322 |
323 | #developer-button {
324 | list-style-image: var(--mf-dev-icon) !important
325 | }
326 |
327 | /* #developer-button>image {
328 | padding: 4px !important
329 | } */
330 |
331 | #protections-popup-mainView .subviewbutton-nav:not(.notFound)::after,
332 | .widget-overflow-list .subviewbutton-nav::after,
333 | .PanelUI-subView .subviewbutton-nav::after {
334 | content: var(--mf-arrow-right-icon) !important
335 | }
--------------------------------------------------------------------------------
/userChrome.css:
--------------------------------------------------------------------------------
1 | @import url(./newIcons.css);
2 |
3 | /* Compact extensions menu */
4 |
5 | @media (-moz-bool-pref: "userchrome.compact-extensions-menu") {
6 | #unified-extensions-view {
7 | width: unset !important;
8 | }
9 |
10 | #overflowed-extensions-list,
11 | #unified-extensions-area,
12 | .unified-extensions-list
13 | {
14 | margin-inline: 6px !important;
15 | display: flex !important;
16 | }
17 |
18 |
19 | #unified-extensions-view .panel-header,
20 | #unified-extensions-view toolbarseparator
21 | {
22 | display: none !important;
23 | }
24 |
25 | #unified-extensions-panel #unified-extensions-view {
26 | margin-top: 4px !important;
27 | }
28 |
29 | #unified-extensions-manage-extensions
30 | {
31 | margin-top: 8px !important;
32 | }
33 |
34 | #unified-extensions-panel vbox#overflowed-extensions-list:not(:empty),
35 | #unified-extensions-panel vbox#unified-extensions-area:not(:empty),
36 | #unified-extensions-panel vbox.unified-extensions-list:not(:empty)
37 | {
38 | border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
39 | }
40 |
41 |
42 | #overflowed-extensions-list .toolbarbutton-icon,
43 | #unified-extensions-panel .toolbarbutton-icon,
44 | .unified-extensions-item-icon
45 | {
46 | --uei-icon-size: 16px;
47 | }
48 |
49 | .toolbaritem-combined-buttons {
50 | margin: 0 !important;
51 | margin-right: 3px !important;
52 | }
53 |
54 | #unified-extensions-view > vbox > vbox > .unified-extensions-item {
55 | padding-block: 0px !important;
56 | margin-block: 0px !important;
57 | }
58 |
59 | #unified-extensions-view .subviewbutton-iconic[data-l10n-id="unified-extensions-item-open-menu"] .toolbarbutton-icon {
60 | padding: 3px !important;
61 | }
62 |
63 | .unified-extensions-item-contents {
64 | line-height: 1 !important;
65 | white-space: nowrap !important;
66 | }
67 |
68 | .unified-extensions-item-name {
69 | font-size: 90% !important; }
70 |
71 | .unified-extensions-item-message {
72 | font-size: 0 !important; }
73 |
74 | #unified-extensions-view .unified-extensions-item-menu-button.subviewbutton:not(:hover)
75 | {
76 | opacity: 0.2 !important;
77 | }
78 |
79 | #unified-extensions-panel
80 | :where(toolbaritem,unified-extensions-item)[attention]
81 | .unified-extensions-item-action-button
82 | {
83 | box-shadow:
84 | 1px 1px var(--uei-button-attention-dot-color) inset,
85 | -1px -1px var(--uei-button-attention-dot-color) inset !important;
86 | }
87 | }
88 |
89 | /* Window padding (only in windowed mode) */
90 |
91 | #navigator-toolbox,
92 | #navigator-toolbox {
93 | &:-moz-window-inactive
94 | {
95 | background-color: transparent !important;
96 |
97 | }
98 | }
99 |
100 | @media (-moz-bool-pref: "userchrome.windowed-screen-border") {
101 |
102 | .browserContainer {
103 | border: solid 5px transparent !important;
104 | border-top-width: 0px !important;
105 | }
106 |
107 | .browserStack > * {
108 | border: none !important;
109 | border-radius: 10px !important;
110 | }
111 |
112 | #tabbrowser-tabpanels[flex],
113 | #appcontent[flex] {
114 | background: transparent !important;
115 | background-color: transparent !important;
116 | }
117 |
118 | #tabbrowser-tabbox[flex], #tabbrowser-tabpanels, browser[type="content-primary"], browser[type="content"] > html {
119 | background: transparent !important;
120 | background-color: transparent !important;
121 | clip-path: inset(0px 0px 0px round 10px 0) !important;
122 | }
123 |
124 |
125 | /*
126 | :root:has(#navigator-toolbox:not([inFullscreen="true"])) {
127 |
128 | :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel,
129 | :root[BookmarksToolbarOverlapsBrowser] #sidebar-box {
130 | padding-top: 0 !important;
131 | }
132 |
133 | :root[BookmarksToolbarOverlapsBrowser] #browser {
134 | margin-top: var(--bookmarks-toolbar-overlapping-browser-height);
135 | }
136 |
137 | :root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox:not([style*="z-index"]) {
138 | z-index: auto !important;
139 | }
140 |
141 | :root:not([BookmarksToolbarOverlapsBrowser]) #browser {
142 | z-index: 1 !important;
143 | }
144 |
145 | #appcontent {
146 | margin-top: 1px !important;
147 | margin-inline: 4px !important;
148 | margin-block-end: 4px !important;
149 | border-radius: 9px !important;
150 | overflow: hidden !important;
151 | }
152 |
153 | #sidebar-box {
154 | margin-top: 1px !important;
155 | margin-inline-start: 4px !important;
156 | margin-block-end: 4px !important;
157 | border-radius: 9px !important;
158 | overflow: hidden !important;
159 | box-shadow: 0 0 0 1px light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%)) !important;
160 |
161 | :root[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel,
162 | :root[BookmarksToolbarOverlapsBrowser] #sidebar-box {
163 | padding-top: 0 !important;
164 | }
165 |
166 | :root[BookmarksToolbarOverlapsBrowser] #browser {
167 | margin-top: var(--bookmarks-toolbar-overlapping-browser-height);
168 | }
169 |
170 | :root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox:not([style*="z-index"]) {
171 | z-index: auto !important;
172 | }
173 |
174 | :root:not([BookmarksToolbarOverlapsBrowser]) #browser {
175 | z-index: 1 !important;
176 | }
177 |
178 |
179 | #appcontent {
180 | margin-top: 1px !important;
181 | margin-inline: 4px !important;
182 | margin-block-end: 4px !important;
183 | border-radius: 9px !important;
184 | overflow: hidden !important;
185 | }
186 |
187 | #sidebar-box {
188 | margin-top: 1px !important;
189 | margin-inline-start: 4px !important;
190 | margin-block-end: 4px !important;
191 | border-radius: 9px !important;
192 | overflow: hidden !important;
193 | box-shadow: 0 0 0 1px light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%)) !important;
194 |
195 | &[positionend] {
196 | margin-inline-start: 0 !important;
197 | margin-inline-end: 8px !important;
198 | }
199 | }
200 |
201 | :not(:root[inFullscreen] #navigator-toolbox[style*="margin-top"])+#browser #sidebar-splitter {
202 | border-inline-width: 0 !important;
203 | }
204 |
205 | #browser {
206 | background-color: var(--toolbar-bgcolor);
207 | }
208 |
209 | #navigator-toolbox {
210 | border-bottom: none !important;
211 | }
212 |
213 | &[positionend] {
214 | margin-inline-start: 0 !important;
215 | margin-inline-end: 8px !important;
216 | }
217 | }
218 |
219 | :not(:root[inFullscreen] #navigator-toolbox[style*="margin-top"])+#browser #sidebar-splitter {
220 | border-inline-width: 0 !important;
221 | }
222 |
223 | #browser {
224 | background-color: var(--toolbar-bgcolor);
225 | }
226 |
227 | #navigator-toolbox {
228 | border-bottom: none !important;
229 | }
230 |
231 | } */
232 |
233 | }
234 |
235 | /* Tab background adjustments */
236 |
237 | .tab-background:is([selected], [multiselected]) {
238 | background-color: light-dark(rgb(255, 255, 255), rgb(96, 95, 107)) !important;
239 | }
240 |
241 | #TabsToolbar {
242 | padding: 0 6px !important;
243 | margin-top: -3px !important;
244 | padding-bottom: 3px !important;
245 | }
246 |
247 | /* Hides info icons (except remote control icon) on the sides of urlbar and shows them when urlbar is hovered. */
248 |
249 | #urlbar-search-button,
250 | #tracking-protection-icon-container,
251 | #identity-box,
252 | #identity-box.extensionPage #identity-icon-label,
253 | .urlbar-page-action{
254 | opacity: 0;
255 | transition: opacity 200ms linear;
256 | }
257 |
258 | #identity-box.extensionPage{ max-width: 32px }
259 |
260 | #urlbar:hover #urlbar-input-container > box,
261 | #urlbar:hover #identity-box.extensionPage #identity-icon-label,
262 | #urlbar:hover .urlbar-page-action,
263 | .urlbar-page-action[open],
264 | .urlbar-page-action[open] ~ .urlbar-page-action{
265 | opacity: 1;
266 | }
267 |
268 | #nav-bar:not([customizing="true"]):not(.searchButton)>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#page-action-buttons .urlbar-page-action {
269 | opacity: 0;
270 | transition-delay: 500ms;
271 | }
272 |
273 | #nav-bar:not([customizing="true"]):not(.searchButton)>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#identity-box>#identity-permission-box:not([open]) {
274 | opacity: 0;
275 | transition-delay: 500ms;
276 | }
277 |
278 | #page-action-buttons .urlbar-page-action,
279 | #identity-permission-box,
280 | #notification-popup-box .notification-anchor-icon {
281 | transition: opacity 0.2s ease;
282 | }
283 |
284 | #urlbar #identity-icon-box,
285 | #urlbar #identity-permission-box {
286 | opacity: 0 !important;
287 | margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
288 | transition: margin-inline-start 100ms linear, opacity 200ms linear;
289 | }
290 |
291 | #urlbar #identity-box.notSecureText #identity-icon-box {
292 | margin-inline-start: initial !important;
293 | opacity: 1 !important;
294 | color: #e36f6f !important;
295 | }
296 |
297 | #urlbar #identity-box.extensionPage #identity-icon-box {
298 | margin-inline-start: initial !important;
299 | opacity: 1 !important;
300 | }
301 |
302 | #identity-box:hover #identity-icon-box,
303 | #identity-box:hover #identity-permission-box,
304 | #identity-box #identity-permission-box[open="true"] {
305 | opacity: 1 !important;
306 | margin-inline-start: initial !important;
307 | }
308 |
309 | #urlbar-input-container .urlbar-input-box {
310 | padding-inline-start: 2px !important;
311 | }
312 |
313 | #identity-box:hover~.urlbar-input-box>#urlbar-input {
314 | mask-image: linear-gradient(to right, transparent, black 3ch) !important;
315 | }
316 |
317 | #page-action-buttons {
318 | padding-inline-start: 8px;
319 | }
320 |
321 | #page-action-buttons .urlbar-page-action {
322 | margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding));
323 | opacity: 0;
324 | transition: margin-inline-end 100ms linear, opacity 200ms linear;
325 | }
326 |
327 | #page-action-buttons:hover>.urlbar-page-action,
328 | .urlbar-page-action[open],
329 | .urlbar-page-action[open]~.urlbar-page-action {
330 | opacity: 1;
331 | margin-inline-end: 0px !important;
332 | }
333 |
334 | #identity-box.chromeUI #identity-icon-box {
335 | opacity: 1 !important;
336 | margin-inline-start: initial;
337 | }
338 |
339 | #identity-box.chromeUI::after,
340 | #identity-box.chromeUI:hover::after {
341 | opacity: 0 !important;
342 | }
343 |
344 | #page-action-buttons:not(:hover) #translations-button[translationsactive="true"]:not([open]) {
345 | visibility: collapse !important;
346 | }
347 |
348 | /* Create visual dots on both sides */
349 |
350 | #identity-box::after,
351 | #page-action-buttons::before {
352 | position: relative;
353 | content: "•••";
354 | pointer-events: none;
355 | transition: opacity 100ms ease;
356 | align-self: center;
357 | font-size: 0.7em;
358 | }
359 |
360 | #identity-box::after,
361 | #page-action-buttons::before {
362 | opacity: 0.2;
363 | }
364 |
365 | #identity-box::after {
366 | transform: rotate(90deg);
367 | left: 4px;
368 | }
369 |
370 | #page-action-buttons::before {
371 | transform: rotate(-90deg);
372 | right: 4px;
373 | }
374 |
375 | #identity-box:hover::after,
376 | #page-action-buttons:hover::before {
377 | opacity: 0.2 !important;
378 | transition: opacity 50ms ease;
379 | pointer-events: none;
380 | }
381 |
382 | #identity-box[pageproxystate="invalid"]::after,
383 | #urlbar-input-container[pageproxystate="invalid"]>#page-action-buttons::before {
384 | opacity: 0 !important;
385 | transition: opacity 50ms ease;
386 | }
387 |
388 | #identity-box[pageproxystate="valid"].notSecureText>.identity-box-button,
389 | #identity-box[pageproxystate="valid"].extensionPage>.identity-box-button,
390 | #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button,
391 | #urlbar-label-box,
392 | #urlbar-zoom-button {
393 | background-color: var(--firefoxcss-item-bg-color) !important;
394 | }
395 |
396 | #urlbar-zoom-button:hover {
397 | background-color: var(--firefoxcss-urlbar-zoom-button) !important;
398 | }
399 |
400 | #urlbar-input-container #identity-box>.identity-box-button,
401 | #tracking-protection-icon-container,
402 | #urlbar-go-button,
403 | #page-action-buttons .urlbar-page-action,
404 | #notification-popup-box {
405 | border-radius: 8px !important;
406 | }
407 |
408 | /* Transparent urlbar until hovered or focused */
409 |
410 | @media (-moz-bool-pref: "userchrome.transparent-urlbar") {
411 | #urlbar:not([focused]) #urlbar-background,
412 | #searchbar {
413 | opacity: 0 !important;
414 | }
415 |
416 | #urlbar:not([focused]):hover #urlbar-background,
417 | #searchbar {
418 | opacity: 1 !important;
419 | }
420 | }
421 |
422 | #urlbar:not([focused]) #urlbar-background,
423 | #searchbar {
424 | opacity: .4;
425 | }
426 |
427 | #urlbar:not([focused]):hover #urlbar-background,
428 | #searchbar {
429 | opacity: 1;
430 | }
431 |
432 | /* Rounded urlbar & tabs */
433 |
434 | .tab-background,
435 | #urlbar:not([focused]) #urlbar-background,
436 | #searchbar {
437 | border-radius: 11px !important;
438 | }
439 |
440 | /* center urlbar text */
441 |
442 | #urlbar:not([focused]) #urlbar-input,
443 | #urlbar:not([focused]) .urlbar-input {
444 | text-align: center !important;
445 | }
446 |
447 | /* Show tab audio icons next to the tab icon, and remove the tab secondary line */
448 |
449 | .tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted], [soundplaying], [activemedia-blocked]) {
450 | grid-template-areas: "a s";
451 | }
452 |
453 | .tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted], [soundplaying], [activemedia-blocked]) {
454 | grid-area: s;
455 | }
456 |
457 | .tab-icon-overlay,
458 | .tab-icon-image,
459 | .tab-throbber {
460 | opacity: 1 !important;
461 | }
462 |
463 | .tab-icon-overlay:not([pinned]) {
464 | padding: 0px !important;
465 | margin-inline: -3px 1px !important;
466 | }
467 |
468 | /* secondary audio label ain't much use with this style, but feel free to remove the next line if you want to show it. */
469 | .tab-secondary-label {
470 | display: none
471 | }
472 |
473 | /* show the secondary label when video is in PiP */
474 | .tab-secondary-label[pictureinpicture] {
475 | display: flex
476 | }
477 |
478 | /* These exist for compatibility with combined_favicon_and_tab_close_button.css */
479 | .tab-icon-overlay {
480 | pointer-events: auto
481 | }
482 |
483 | .tab-content>.tab-icon-stack,
484 | .tab-icon-stack:hover>.tab-icon-image {
485 | visibility: visible
486 | }
487 |
488 | /* centered tab label */
489 |
490 | .tab-label-container {
491 | display: grid;
492 | align-content: center;
493 | }
494 |
495 | .tab-secondary-label {
496 | justify-content: center;
497 | }
498 |
499 | .tab-label,
500 | .tab-secondary-label {
501 | overflow: hidden
502 | }
503 |
504 | .tabbrowser-tab {
505 | margin-inline-end: 6px;
506 | }
507 |
508 | /* Show tab close button when cursor is over the tab icon */
509 |
510 | .tab-content {
511 | pointer-events: none
512 | }
513 |
514 | .tab-icon-image:not([busy]) {
515 | display: block !important;
516 | }
517 |
518 | :where(.tab-content:hover) .tab-icon-image,
519 | :where(.tab-content:hover)>.tab-icon-stack {
520 | visibility: hidden;
521 | }
522 |
523 | .tab-close-button {
524 | order: -1;
525 | display: flex !important;
526 | position: relative;
527 | margin-inline: -4px -20px !important;
528 | padding-inline-start: 7px !important;
529 | opacity: 0;
530 | width: unset !important;
531 | pointer-events: auto;
532 | }
533 |
534 | .tab-close-button:hover {
535 | opacity: 1
536 | }
537 |
538 | .tabbrowser-tab[pinned] .tab-close-button {
539 | display: none !important;
540 | }
541 |
542 | /* Always show tab close button on hover and never otherwise */
543 |
544 | .tabbrowser-tab .tab-close-button {
545 | display: none;
546 | }
547 |
548 | .tabbrowser-tab:not([pinned]):hover .tab-close-button {
549 | display: flex !important;
550 | align-items: center;
551 | }
552 |
553 | /* Hide forward&back buttons when disabled */
554 |
555 | @media (-moz-bool-pref: "userchrome.hide-history-nav") {
556 |
557 | #forward-button[disabled],
558 | #back-button[disabled] {
559 | visibility: collapse !important;
560 | }
561 |
562 | #back-button {
563 | margin-left: -6px !important;
564 | }
565 |
566 | }
567 |
568 | /* Translucent navbar area */
569 |
570 | #navigator-toolbox {
571 | border-bottom: none !important;
572 | }
573 |
574 | #tabbrowser-tabpanels {
575 | background: transparent !important;
576 | }
577 |
578 | :root:not(:-moz-window-inactive) #navigator-toolbox,
579 | :root#main-window {
580 | background-color: transparent !important;
581 | }
582 |
583 | /* make tabs toolbar translucent */
584 | /* FF 121 removed support for -moz-mac-source-list - using menupopup instead */
585 | :root #TabsToolbar,
586 | :root #browser,
587 | :root #titlebar,
588 | :root #PersonalToolbar,
589 | :root #nav-bar,
590 | :root #tabbrowser-tabs {
591 | -moz-default-appearance: menupopup !important;
592 | appearance: auto !important;
593 | background-color: transparent !important;
594 | }
595 |
596 | :root:-moz-window-inactive .tab-content {
597 | opacity: 0.6;
598 | }
599 |
600 | :root {
601 | --toolbarbutton-hover-background: color-mix(in srgb, currentColor 11%, transparent) !important;
602 | --toolbarbutton-active-background: color-mix(in srgb, currentColor 21%, transparent) !important;
603 | }
604 |
605 | .tab-background:is([selected], [multiselected]):-moz-lwtheme {
606 | border: none !important;
607 | }
608 |
609 | #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
610 | box-shadow: 0 0 0 var(--tabs-navbar-shadow-size) rgba(0, 0, 0, .1), 0 1px 5px rgba(0, 0, 0, .1) !important;
611 | }
612 |
613 | :root:-moz-window-inactive #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
614 | box-shadow: 0 0 0 var(--tabs-navbar-shadow-size) rgba(0, 0, 0, .05) !important;
615 | }
616 |
617 | @media (-moz-content-prefers-color-scheme: dark) {
618 | :root #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
619 | box-shadow: 0 0 0 var(--tabs-navbar-shadow-size) hsla(280, 6%, 60%, 0.5) inset, 0 0 0 var(--tabs-navbar-shadow-size) rgba(0, 0, 0, .6), 0 1px 5px rgba(0, 0, 0, .1) !important;
620 | }
621 |
622 | :root:-moz-window-inactive #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
623 | box-shadow: 0 0 0 var(--tabs-navbar-shadow-size) rgba(0, 0, 0, .4) !important;
624 | }
625 | }
626 |
627 | /* Autohide bookmarks bar */
628 |
629 | #nav-bar {
630 | z-index: 1001 !important;
631 | }
632 |
633 | #PersonalToolbar{
634 | width: 100% !important;
635 | display: flex !important;
636 | }
637 |
638 | toolbar:not(#TabsToolbar) > #personal-bookmarks {
639 | flex: unset !important;
640 | }
641 |
642 | #PersonalToolbar:not([customizing]) #personal-bookmarks {
643 | background-color: var(--box-background-color) !important;
644 | box-shadow: 0 3px 7px 0 #00000033;
645 | border-radius: 6px !important;
646 | margin-top: 5px !important;
647 | padding: 3px !important;
648 |
649 | position: absolute !important;
650 | z-index: 1000 !important;
651 | left: 50% !important;
652 | transform: translateX(-50%) translateY(-35px);
653 |
654 | opacity: 0 !important;
655 | transition: .2s;
656 | pointer-events: none !important;
657 | }
658 |
659 | #personal-bookmarks::before {
660 | content: "" !important;
661 | position: absolute !important;
662 | z-index: -10 !important;
663 | top: -5px !important;
664 | left: -5% !important;
665 |
666 | width: 110% !important;
667 | height: 40px !important;
668 |
669 | background: transparent !important;
670 | }
671 |
672 | #nav-bar:focus-within + #PersonalToolbar:not([customizing]) #personal-bookmarks,
673 | #navigator-toolbox:is(:hover,:focus-within) #PersonalToolbar:not([customizing]) #personal-bookmarks,
674 | #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar:not([customizing]) #personal-bookmarks,
675 | #navigator-toolbox:hover > #PersonalToolbar:not([customizing]) #personal-bookmarks{
676 | opacity: 1 !important;
677 | pointer-events: all !important;
678 | transform: translateX(-50%) translateY(0);
679 | }
680 |
681 | /* :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px } */
682 | /*
683 | #PersonalToolbar:not([customizing]){
684 | position: relative;
685 | margin-bottom: calc(-1px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
686 | transform: rotateX(90deg);
687 | transform-origin: top;
688 | transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
689 | z-index: 1;
690 | background-color: transparent !important;
691 | background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling);
692 | --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 24px - var(--bookmark-block-padding));
693 | background-position: top left,top left,var(--lwt-background-alignment,top left);
694 | background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y);
695 | background-image: var(--toolbar-bgimage,linear-gradient(transparent,transparent)), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important;
696 | }
697 | :root[uidensity="compact"] #PersonalToolbar{
698 | --toolbarbutton-outer-padding: 1px !important;
699 | }
700 | #PlacesToolbarItems > .bookmark-item,
701 | #OtherBookmarks,
702 | #PersonalToolbar > #import-button{
703 | padding-block: var(--uc-bm-padding) !important;
704 | }
705 |
706 | #nav-bar:focus-within + #PersonalToolbar{
707 | transition-delay: 100ms !important;
708 | transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0));
709 | }
710 | #navigator-toolbox:is(:hover,:focus-within){
711 | border-bottom-color: transparent !important;
712 | }
713 | #navigator-toolbox:hover > #PersonalToolbar{
714 | transition-delay: 50ms !important;
715 | transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
716 | }
717 |
718 | #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {
719 | transform: rotateX(0);
720 | } */
721 |
722 | /* compact bookmarks */
723 |
724 | /* Hide label text & bookmark folder drop marker */
725 | .toolbarbutton-menu-dropmarker,
726 | #personal-bookmarks toolbarbutton[image] label {
727 | display: none !important;
728 | }
729 |
730 | /* No Favicon Available - Don't display default icon */
731 | toolbarbutton.bookmark-item:not([container]):not([image]) image {
732 | display: none !important;
733 | }
734 |
735 | /* Show Favicon Bookmarks */
736 | .bookmark-item>.toolbarbutton-icon {
737 | display: -moz-box ! important;
738 | background-position: 0px 1px !important;
739 | padding-right: 0px ! important;
740 | margin: 0 !important;
741 | }
742 |
743 | /* Hide folder icon for folders */
744 | .bookmark-item[container]>.toolbarbutton-icon {
745 | margin-right: 5px !important;
746 | display: none !important;
747 | }
748 |
749 |
750 | /* Center bookmarks bar */
751 |
752 | #PlacesToolbarItems {
753 | display: flex !important;
754 | justify-content: center !important;
755 | }
756 |
757 | /* Stretch tabs to fill width */
758 |
759 | :root[sizemode="normal"] #nav-bar {
760 | --uc-window-drag-space-width: 20px
761 | }
762 |
763 | #titlebar {
764 | -moz-appearance: none !important;
765 | }
766 |
767 | #tabbrowser-tabs,
768 | #tabbrowser-arrowscrollbox,
769 | #TabsToolbar {
770 | min-height: 0px !important
771 | }
772 |
773 | #TabsToolbar {
774 | padding: 0 3px !important;;
775 | padding-bottom: 0 !important;
776 | }
777 |
778 | .accessibility-indicator,
779 | .private-browsing-indicator {
780 | height: unset !important;
781 | }
782 |
783 | .accessibility-indicator>hbox {
784 | padding-block: 0 !important
785 | }
786 |
787 | .tabbrowser-tab {
788 | height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin, 0px));
789 | }
790 |
791 | .tabbrowser-tab:only-of-type,
792 | .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"] {
793 | visibility: collapse !important;
794 | min-height: 0 !important;
795 | height: 0;
796 | }
797 |
798 | /* Fix window controls not being clickable */
799 | :root[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive] {
800 | transition: height 0ms steps(1) 80ms;
801 | }
802 |
803 | :where(#nav-bar) {
804 | border-inline: var(--uc-window-drag-space-width, 0) solid var(--toolbar-bgcolor);
805 | }
806 |
807 | #tabbrowser-tabs:not([overflow])~#alltabs-button {
808 | display: none;
809 | }
810 |
811 | #tabbrowser-arrowscrollbox-periphery,
812 | #private-browsing-indicator-with-label,
813 | #TabsToolbar>.titlebar-buttonbox-container {
814 | contain: strict;
815 | contain-intrinsic-height: 0px;
816 | }
817 |
818 | #tabbrowser-arrowscrollbox-periphery {
819 | display: none !important;
820 | contain-intrinsic-width: 36px;
821 | padding-inline-end: 3px;
822 | }
823 |
824 | #private-browsing-indicator-with-label {
825 | contain-intrinsic-width: 116px;
826 | }
827 |
828 | #TabsToolbar>.titlebar-buttonbox-container {
829 | contain-intrinsic-width: var(--uc-window-control-width, 72px);
830 | margin-bottom: 0 !important;
831 | }
832 |
833 | .tabbrowser-tab[fadein]:not([style^="max-width"]) {
834 | max-width: 100vw !important
835 | }
836 |
837 | /* move tabs below navbar */
838 |
839 | #toolbar-menubar[autohide="true"]>.titlebar-buttonbox-container,
840 | #TabsToolbar>.titlebar-buttonbox-container {
841 | position: fixed;
842 | display: block;
843 | top: 0px;
844 | right: 0;
845 | height: 40px;
846 | }
847 |
848 | .titlebar-buttonbox-container {
849 | left: 0;
850 | right: unset !important;
851 | }
852 |
853 | :root[uidensity="compact"] #TabsToolbar>.titlebar-buttonbox-container {
854 | height: 32px
855 | }
856 |
857 | #toolbar-menubar[inactive]>.titlebar-buttonbox-container {
858 | opacity: 0
859 | }
860 |
861 | .titlebar-buttonbox-container>.titlebar-buttonbox {
862 | height: 70%;
863 | }
864 |
865 | #nav-bar-customization-target {
866 | padding-left: 70px !important;
867 | }
868 |
869 | #titlebar {
870 | order: 2;
871 | -moz-appearance: none !important;
872 | --tabs-navbar-shadow-size: 0px;
873 | --uc-menubar-vertical-overlap: 19px;
874 | }
875 |
876 | /* Re-order window and tab notification boxes */
877 | #navigator-toolbox>div {
878 | display: contents
879 | }
880 |
881 | .global-notificationbox,
882 | #tab-notification-deck {
883 | order: 2;
884 | }
885 |
886 | #TabsToolbar .titlebar-spacer {
887 | display: none;
888 | }
889 |
890 | /* Also hide the toolbox bottom border which isn't at bottom with this setup */
891 | #navigator-toolbox::after {
892 | display: none !important;
893 | }
894 |
895 | /* At Activated Menubar */
896 | :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"])+#TabsToolbar>.titlebar-buttonbox-container {
897 | display: block !important;
898 | }
899 |
900 | #toolbar-menubar:not([autohide="true"])>.titlebar-buttonbox-container {
901 | visibility: hidden;
902 | }
903 |
904 | /* These exist only for compatibility with autohide-tabstoolbar.css */
905 | toolbox#navigator-toolbox>toolbar#nav-bar.browser-toolbar {
906 | animation: none;
907 | }
908 |
909 | #navigator-toolbox:hover #TabsToolbar {
910 | animation: slidein ease-out 48ms 1
911 | }
912 |
913 | #TabsToolbar>.titlebar-buttonbox-container {
914 | visibility: visible
915 | }
916 |
917 | #PersonalToolbar {
918 | order: 2;
919 | }
920 |
921 | /* Context menu tweaks */
922 |
923 | menupopup :-moz-any(menu, menuitem) {
924 | margin-top: 0px !important;
925 | margin-bottom: 0px !important;
926 | padding-top: 4px !important;
927 | padding-bottom: 4px !important;
928 | }
929 |
930 | menupopup :-moz-any(menu:first-child, menuitem:first-child) {
931 | margin-top: 0px !important;
932 | }
933 |
934 | menupopup :-moz-any(menu:last-child, menuitem:last-child) {
935 | margin-bottom: 0px !important;
936 | }
937 |
938 | menuseparator {
939 | padding-block: 2px !important;
940 | }
941 |
942 | :not(#ContentSelectDropdown)>menupopup {
943 | --panel-padding: 5px 0 5px !important;
944 | --panel-border-radius: 8px !important;
945 | }
946 |
947 | #context-navigation:not([hidden]) {
948 | padding: 1px 0px 1px !important;
949 | border-top-left-radius: 8px !important;
950 | border-top-right-radius: 8px !important;
951 | margin-left: 0px !important;
952 | margin-right: 0px !important;
953 | }
954 |
955 | menupopup#contentAreaContextMenu {
956 | --panel-padding: unset !important;
957 | --panel-padding: 0 0 5px !important;
958 | }
959 |
960 | .menupopup-arrowscrollbox {
961 | overflow: hidden !important;
962 | }
963 |
964 | menupopup menuitem:is(#context-openlinkintab, #context-undo, #context-viewimage) {
965 | margin-top: 5px !important;
966 | }
967 |
968 | #context-sep-navigation {
969 | padding-block: 0px !important;
970 | }
971 |
972 | #context-navigation #context-forward[disabled="true"] .menu-iconic-left .menu-iconic-icon,
973 | #context-navigation #context-back[disabled="true"] .menu-iconic-left .menu-iconic-icon {
974 | opacity: 0.5 !important;
975 | }
976 |
977 | #context-navigation>.menuitem-iconic {
978 | &>.menu-iconic-left {
979 | &>.menu-iconic-icon {
980 | width: 42px !important;
981 | height: 32px !important;
982 | }
983 | }
984 | }
--------------------------------------------------------------------------------