etesam913/slick-fox

:fox_face: A firefox config that has rounded tabs and a url bar that can disappear when not selected on. It works with any theme.

Slick-Fox

A modern theme for Firefox uses slick animations

slick-fox-proton.mp4

Steps for applying this configuration

1. Type about:profiles into your urlbar and go to the page
2. Open the root directory folder specified on the page
3. Inside this folder, create a folder named "chrome"
4. Put the userchrome.css file from this repo into the chrome folder
5. Type about:config into your urlbar and go to the page
6. Paste "toolkit.legacyUserProfileCustomizations.stylesheets" into the bar and set its value to true
7. Go back to about:profiles and click the restart normally buton
8. That should be it!

In Firefox 78+

You have to create the "ui.prefersReducedMotion" config in about:config and give it a value of 1 to prevent some stuttering in the animation.

In Firefox 75

You have to set "browser.urlbar.openViewOnFocus", and "browser.urlbar.update1" to false in about:config to fix a bug regarding a big white urlbar.

slick-fox's Issues

UserChrome readability

Is it possible to create with comments two categories in the CSS, one about the tabs, one about the URL bar? If I knew how to, I would do the PR myself

Because I just want the URL hiding without touching the tabs

Unreadable options when using dark themes

When I use a dark or black addons.mozilla.org theme, some fonts disappear in the black background of some settings options. Example: Hamburger > History > 'Recent history tab right-click menu'. I don't know if it depends on the theme itself or it can be fixed. And yes, I've tested it without Slickfox installed already.

Font Fallback

Please add a font-fallback as not everyone has "Airbnb Cereal App Book" and Firefox's next choice is terrible.

Please help with few modifications

1. https://ibb.co/SvMj5y0 Since this is only compatible with normal density. Its not working with my compact density for my 13'' screen. Can you at least where to look for modifications.
2. Remove every chrome like interface with just autohide functionality working properly without any of the glitches other autohide CSSes had.
3. Completely remove all kind of animation and transition so that it appears more slick and fast exception being something like 0.1 seconds. I was able to find every transition and animation code and replace higher seconds with lower but your advise will be better.
4. Right now, if open something like the hamburger menu or anything from the autohide bar and remove the cursor then the opened menu also goes up with bar getting hidden. I feel like if it doesn't move from its place even after the autohide function then it looks more stable and aesthetic. I was able to achieve that after applying the old autohide from somebody's 7 month old post but the workaround given there for keeping urlbar height normal doesn't work.

Lastly, thanks from the bottom of the heart for making this amazing CSS. Can you please suggest some resources to learn how to do this on your own.

Tabs To Tall

The tabs are too tall on my screen. Not sure if it's an issue with the fonts or something else.

Giant URL bar when installed

I just wanna test your userChome.css to change the theme of the browser, after installing it, it shows almost 60% of my screen with the URL bar, I activated all the options you mentioned on the README.
Tested on Windows 10 Pro.

Big Icons/Big Text

Right-clicking and hovering on tab seem a bit out of proportion. Also, big border on right click menu

Firefox ver 123.0.1 Clean Profile
Windows 10

Default FF styles broken

Hi, first of really great work, from the gif it looks really cool.
However applying this to my Firefox developer edition seems to break its styles. The url bar is offset and has incorrect height, tab icons are offset and overall it looks weird. I'm using default dark theme.
This is how FF looks without your userchrome:

And this is with yout userchrome:

Also it seems to break the url suggestion dropdown (it doesn't show up when using your userchrome).

Is there something I can do to just get the url bar hiding, without the other style changes?

19 pixels height empty bar after wrapping

Tab issue

Cant move a tab from one firefox window to another

Animations become choppy with inspect element open

video.mp4

Only change made to the userChrome.css was changing the font.
Effect is even worse with ui.prefersReducedMotion set to 1.

URL bar suggestions in Nightly have transparent background

Firefox Nightly version 93.0a1 (2021-08-11) (64-bit) on Intel 2019 Macbook Pro

Search suggestions in the URL bar have a transparent background, jumbling suggestions with page contents.

Active tab covering bookmarks

As title says. The gray bg of the active tab is covering part of the bookmarks under it.

Unrelated to slick fox, but what is the theme used in Firefox in the images of readme?

Messes up pinned tabs

Hi,

I use pinned tabs a lot, and slick fox seems to render them unreachable.
FFx 89.0 on archlinux

Other than that, hiding the nav bar works as expected :)

Scroll bar not visible

the scroll bar isn't visible which causes a loss in page content.
I assume this is because of

slick-fox/userChrome.css

Lines 484 to 489 in 17f392f

	:-moz-any(#content, #appcontent) browser {
	margin-right: -17px !important;
	overflow-y: scroll;
	margin-bottom: 0px !important;
	overflow-x: scroll;
	}

changine margin right -17px to 0 px solves it . is this intentional?

text is transparent in some areas

really like this theme but im not sure why this is happening but the text on some areas like downloads or saving password popup windows dont display the text at all and it makes it really difficult to use. changing the theme doesnt fix it either so no idea what needs to be done?

Tabs "black" out when hovering mouse over them

Hi,
The tabs title seems to black out or flicker when you hare hovering your cursor over the tab strip. Screenshot is attached.

To reproduce, try moving your cursor around over the active tab and watch the tabs in the background get dark.

Toolbar Icons

The fact that parts of toolbar icons are cut off makes the theme seem much less polished.

Firefox 85.0 Problem

There is extra empty space on the homepage underneath the search bar after the new 85.0 update.

it is completly broken

it is completly broken

Right click dialog box text is unreadable black in dark themes

I absolutely love this theme. Just one issue;

The text in the right click dialog box is black in dark themes like the default firefox dark theme and like nord polar dark theme. It makes the text unreadable.
I attached a screenshot;

No background on dropdowns and right click context menu, in Bookmarks Library View (Dark Theme)

When right clicking in Bookmarks library view, text is black, without any background. Same is the case with dropdown menus, where text is white, without any background:

F0bi0Qh6QP.mp4

Edit: I'm using Matte Black theme https://addons.mozilla.org/en-US/firefox/addon/matte-black-red/

Right click dialog box enlarge

When I right click on any page, the dialog box is enlarge (appears to increase in height).
Also some elements like text and forward/back button is hidden especially when it is greyed out.

Here what it looks without userchrome.css:
https://imgur.com/MQEq35d

Here with userchrome.css:
https://imgur.com/wtoWEiF

Firefox v79.0
Windows 10