Source
r/FirefoxCSS•
ketchup64

Quietfox - my clean mod, Updated for Firefox 70

Code

​

https://preview.redd.it/pl5v555667x31.png?width=1196&format=png&auto=webp&s=ea2abf7298b45ccd6db3a86c4bad085ad2223449

https://github.com/coekuss/quietfox

​

Customizable from within the userChrome.css 👍👍

/* -------------------- 🎨 Customization 🎨 -------------------- */
    --tab-corner-rounding: 7px;
    --animation-speed: 0.4s;
    --button-corner-rounding: 20px;

https://i.redd.it/iz5lyl5667x31.gif

/* -------------------- 🎨 Customization 🎨 -------------------- */
    --tab-corner-rounding: 0px;
    --animation-speed: 0s;
    --button-corner-rounding: 0px;

https://i.redd.it/ln1fgfji67x31.gif

Posted Nov 7, 2019, 5:20 AM UTC

7230
r3ddawn74•

As always, friendly dev that responds to questions/issues, and best looking CSS theme for Firefox, continue the great work!!

3
quanghung28•

this look really nice!

2
H310•

Good job man!

2
willpower3309•

How did you get only the favicon to appear on the currently opened tab?

2
ketchup64OP•

Yes it's a pinned tab, right click on a tab > "Pin tab"

3
willpower3309•

Beauty, thanks

1
ReekyMarko•

Looks like they have just pinned the tab. Could be wrong though

2
pcw2015•

Glad to see that it has been updated for Firefox 71, but somehow the first tab doesn't have left shadow. Macos or Windows 10.

2
ketchup64OP•

True, I missed that. Will update sometime today

1
LLAdmir•

The new version of FF broke this beautiful CSS.

2
ketchup64OP•

new version is up, check github page 🔥

2
LLAdmir•

Thanks. Do you know how can I change the highlight color in the urlbar?

1
ketchup64OP•

If you mean the text highlight color in the urlbar, I'm not sure how to do that. But if you mean the background color when you hover and type in the urlbar, you would go to line 623, and change the background-color to whatever, and replace line 641 with

#urlbar:not([focused]) .urlbar-input-box:hover {
    background-color: [color] !important;
}
1
kebabisgott•

Ty

1
jeerobus•

Very nice, but buggy switching tabs on the Mac

1
ketchup64OP•

dang I wasn't able to test on a mac, but I'll see if I can address this

1
aarspar•

This is so good! Thanks a lot!

1
PenPinapplPen•

This is really nice! However, I am having one problem. There is this grey 'bar' cutting through the top of my tabs and little black areas jutting out into tabs when I use my AMOLED black theme. Only visible when hovering over a tab. Can you help? Thanks!

1
ketchup64OP•

Yes sadly some odd things happen when using themes with a transparent toolbar. Removing this section of the code removes tab-rounding at the bottom corners, but it should help your issue

2
PenPinapplPen•

Alright, thanks!

1
PenPinapplPen•

Alright, I have a few more things I would like to ask. Sorry, CSS newbie here. This code is way too huge for me to understand. First, how do I change the hover colour? Second, how can I remove the hovering animation from the URL bar? I prefer it not to change at all when hovering. Third, since using this code, whenever I select a folder when bookmarking an item, the popup with the list of folders is bright white. I am going for a black and cyan Firefox theme. Any way I can make the background white? Again, sorry to bother. I'm new to this :P Thanks!

1
ketchup64OP•

To change the button hover color, you can add these two lines under the Customization section:

--toolbarbutton-hover-background: red !important; 
--toolbarbutton-active-background: green !important;

To remove hover effects on the URL bar, change the color at line 603 to transparent, and remove line 621 and put this in its place:

#urlbar:not([focused]) .urlbar-input-box:hover {
    background-color: transparent !important;
}

And for the bright white folder list, this may be because I forgot to actually update the github repository with my newer version of this mod, I only had it available at a download link lower on the page. Now i've updated it properly and you could try re-downloading

2
zanios•

Stopping by to say thanks for the gorgeous style!
Loving the shadows on the tabs.

https://imgur.com/yLDt2fu

1
r3ddawn74•

Thanks again..

1
pcw2015•

Maybe the best css theme for firefox. Thank you!

1
ThePigeonThatCould•

I love this, it's a great style!

1
f3rmion•

Thanks a lot, this is exactly what I was looking for. Unfortunately the latest Firefox 71 update broke the context menu dark color with the dark theme.

1
ketchup64OP•

Can you show a screenshot of your context menu and the thing you're right clicking on?

1
f3rmion•

NM, the latest update fixed it. Thanks.

2
[deleted]•

[deleted]

1
ketchup64OP•

🙏 thank you, you can delete line 523, 524, and 525 to make urlbar icons not disappear

522 | .urlbar-icon, #userContext-indicator, #userContext-label {
523 |     fill: transparent !important;
524 |     background-color: transparent !important;
525 |     color: transparent !important;
526 |     transition: var(--animation-speed) !important;
527 | }
1
Smithbm_2316•

This is a brilliant theme! Just installed it and am loving it! Big help for trying to get all the menus to be the same color with the custom theme I built with no fuss, thanks for your hard work!

1
Eidorian-San•

Hey!

I love your config but one thing is bugging me out.

While maximised (Windows 10) there is a little space between the first tab and the left side of the window. (I'm used to just click the top left corner to go to the first tab) Is there a way to remove it?

1
ketchup64OP•

Try adding this somewhere in the code:

[sizemode="maximized"] [first-visible-tab] {
    margin-left: -12px !important;
}

[sizemode="maximized"] [first-visible-tab] stack {
    margin-left: 12px !important;
}

and on line 143, change tab[visuallyselected] to tab[visuallyselected] .tab-background.

​

This keeps the space visually there (to keep the style consistent), but lets you click the first tab from the top left of your screen. Good suggestion, I'll put it in the next update

1
Eidorian-San•

Thanks, works perfect now! Also thanks for including it in the next update!

1