ideaweb / firefox-safari-style Goto Github PK

Since installing the theme, the Overflow menu is broken. None of the addons I move to the overflow menu can correctly display their controls within the overflow menu. As a result, I have to keep icons displayed on the toolbar.

There is no point on having colors and bg-colors in there since we want to use this css with custom firefox themes.
Having color in this file breaks the layout and make things like urlbar and such very ugly.

Here is the comparison, the urlbar is white with black text while the nord firefox theme has black urlbar with light text.

Stock firefox

vs github master on Firefox nightly

Thanks for your amazing work on this project.

Hey there. First off, thanks for taking the time to create this awesome userChrome.css. It's hands down the best Safari clone of Firefox I've ever used. I'm seriously blown away how integrated the look is into Firefox.

My question is: Would it be possible to include some optional code to hide 'unneeded' elements in the URL bar?

Here's what I normally run in my userChrome.css that allows me to hide — among other things — FF tracking protection icon and the secure padlock, which is my preference:

/**** Hide Firefox Tracking Protection badge ****/
#tracking-protection-icon-box {visibility: collapse !important;}
#tracking-protection-icon-container {display: none;}

/**** Remove unnecessary identity-box content ****/
#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
display: none !important;
}
#urlbar[pageproxystate=valid] > #identity-box.notSecureText,
#urlbar[pageproxystate=valid] > #identity-box.verifiedIdentity,
#urlbar[pageproxystate=valid] > #identity-box.chromeUI,
#urlbar[pageproxystate=valid] > #identity-box.extensionPage,
#urlbar[pageproxystate=valid] > #identity-box[pageproxystate="valid"].certUserOverridden > #identity-icon,
.drm-icon {
display: none !important;
}
#urlbar-display-box {
border: none !important;
margin-right: 0 !important;
}

The above code doesn't work with your userChrome.css. Between me not knowing hardly anything about CSS and the document having so many elements, I don't know where to begin troubleshooting. This is the first time that I've had an issue with hiding elements in the URL bar.

Thanks for looking into this!

For comparision, with firefox-safari-style on nightly.

vs stock firefox

So Safari 15 got a huge redesign in the Tab bar.
Maybe there will be motivation to reimplement the redesign into this project.

In Safari when there's only one tab open the tab bar is hidden. The add tab button moves up to the bookmarks bar when the tab bar is hidden. With this style the tab bar is always shown, even if there's only one tab.

The extension icons in the top bar are without colour. https://ibb.co/P5LYW8L
Is there a way to change that?

As shown by the image below...

...pinned tab icons seem to be positioned a few pixels too low, but more importantly the new tab icon looks completely out of place (too high up and too much to the right).

I want some opinions on whether or not this css style completely breaks on the new Firefox proton 89 release. Thanks.

When I rearrange a tab, Firefox will act like I did nothing at all, and when Ctrl+Tabbing, it shows the order of tabs I had before rearranging.

Firefox Nightly 85.0a1 on macOS Big Sur 11.0.1 running on a Mac Mini with Apple Silicon

If the user did not leave anything open from his previous session while "Restore previous session" was enabled, the browser opens two New Tab pages.

The Flags in the top bar with the Flagfox extension are squished together: https://ibb.co/P5LYW8L

Here is the link to the extension: https://addons.mozilla.org/en-US/firefox/addon/flagfox/

Hello,

Would it be possible to align properly the padlock icon in the address bar?

Thanks!

The Tabs Toolbar appears dark like the dark theme with the rest being the light theme, when firefox is set to the default theme.

I temporarily fixed this by adding the following to my userChrome:

`toolbar#TabsToolbar {

-moz-appearance: none !important;
background-color: transparent !important;
}

toolbar-menubar, #menubar-items, #main-menubar {
background-color: transparent !important; background-image: none !important; } `

May be just me so apologies if not a widespread problem, but has anyone else on some websites (google ones like Drive and Calendar main ones for me) seen glitches with like half the window going black and having to drag your mouse over the affected areas to get back to normal sometimes have to restart the page?

Will delete if just an issue for me!

A white border appears around the window using the legacy theme with a dark theme selected in Firefox. The white border also persists in fullscreen videos.

Firefox 89

github master on Firefox nightly

vs Stock Firefox 76

Extension in question is the side-view extension from Mozilla.

I don't know if this is possible, but centering the bookmarks on the bookmarks bar would be one more step closer to this being the perfect Safari replacement.

I did a little digging around and found this: https://highvaluedaygame.com/my-firefox-css/, which is another attempt to make Firefox more Safari-like. Don't know if it would be any use, but figured I'd leave it there.

Thanks for making this, I really love it.

This issue is mostly noticeable on Twitter (but I've noticed it on other sites like YouTube), whenever I scroll down and there's a tweet with a video, the entire site starts to flicker with a black background. It looks like this:

It's only like this in windowed mode, when I enter fullscreen mode the problem disappears.

I've tried disabling all my extensions, but that didn't change anything. The problem disappears only when I remove the theme.

I'm on Firefox 81.0.2, MacOS Catalina 10.15.7.

After the upgrade of firefox to 100, due to the addition of the website appearance option to firefox, all userChrome files cannot display the dark mode interface properly after changing to dark mode.

When the picture is displayed, it is in dark mode, but the interface is still bright, and there are errors in the selection shadow and font color in the address bar.

I guess it may be because userChrome cannot correctly identify whether the firefox has been changed to dark mode after upgrading to firefox100, resulting in not successfully changing to dark mode. Has the author considered supporting firefox100?

The YouTube shortcuts do not work with firefox-safari-style theme.

When clicking f, it does not go into fullscreen like it should. i and t work sometimes but not always.

When using userChrome-vibrancy.css in dark mode, the main bar seems to retain the light mode color while the other elements (search bar etc.) turn darker, and the text changes to white as expected. As a result, text becomes mostly illegible and dark mode is rendered useless:

Also see related discussion in #34.

Hey, just a small improvement:

In Safari the Favicons are glued to the tab title while in this Theme the icons are glued to the left side of the tab

There is a small thin line at the top of all full screen videos (YouTube, Netflix, etc). Is this intentional?

MacOS 10.15.7 (19H114)
Firefox 84.0 (64-bit)
Theme: d87e798

Theme no longer works in Firefox 84. Screenshot attached. Maybe the names of tabs have changed? See attached image.

You can hide horizontal tabs completely (to display tabs in a tree using addons) with this theme using the following styles in your userChrome.css

#TabsToolbar {
  visibility:collapse;
}

#navigator-toolbox #titlebar {
  height: 0px !important;
  min-height: 0px !important;
  max-height: 0px !important;
}

You can bring back favicons of your bookmarks on the bookmarks toolbar using this:

#navigator-toolbox #PersonalToolbar #personal-bookmarks #PlacesToolbarItems .bookmark-item .toolbarbutton-icon {
  display: inline !important;
}

Hopefully someone will find this useful :)

The spacing in macOS Big Sur has more spacing for the bookmarks within a folder (on the bookmarks toolbar). Is there a way to space out these bookmarks?

Thanks for making this great theme. The items seem to have no spacing in between them. I can provide a screenshot if needed. Thanks!

The suggested userChrome styles for hiding a single tab does not work in Firefox 110. If anyone else is having this problem, this seems to work:

#tabbrowser-tabs .tabbrowser-tab:only-of-type,
#tabbrowser-tabs .tabbrowser-tab:only-of-type + #tabbrowser-arrowscrollbox-periphery {
  display: none !important;
}

#tabbrowser-tabs, #tabbrowser-arrowscrollbox {
  min-height: 0 !important;
}

I have a folder in my bookmarks toolbar and it seems the dropdown icon is missing:

hey @ideaweb , thanks a lot for this theme, it quickly became my favourite !

do you know if there's an easy way to swap the purple used by private browsing mode? I noticed there's quite a lot of css using [privatebrowsingmode], is there a variable or a central place where calculations are made around that purple tone?

Example above :)

There wasn't any userChrome.css file under profile folder by default, i added in and together with the line. Restarted FF and still the same as before.

p.s. about:config changed

Hi,

the right most pinned tab currently has a "white box" to the right of it. Would appreciate help in fixing this :)

Since I updated to the latest Firefox Version 88.0, the indicator for the currently used Multi-Account Container is stretched vertically through the URL-Bar, as seen in the attached picture below.

Before the update, there was some (white) space at the top and the bottom of the indicator. I tried to fix it by myself, going through the .css, but couldn't find the corresponding part.

I'm using the legacy macOS theme and it would be very nice if this could be fixed in some way.

https://i.postimg.cc/5tnNKQRs/IMG-2882.jpg

Example above on Netflix video.

Since SCSS is used, why not separate colors from the rest of the css?

I would love to use this style with any possibile theme

Hey, I'm on Firefox Dev Edition (87.0b2) and the 0.1 branch (catalina theme) broke tab alignment of text and icons.

I wanted to move the new tab button upwards so that I could hide the solo tab; however this happened

According to this screenshot, safari 14's toolbar size is 37pt, while firefox-safari-style's --firefox-safari-style-bar-height is 38pt as defined in version 0.1.28.
I noticed this while having safari and firefox open in parallel. Very minor issue.

I had to add this to userChrome.css to get the titles to be centered:

.tab-label{
margin-inline: auto !important;
}

.tab-close-button{
width: 24px !important;
padding: 6px !important;
}

The back/forward buttons activate when there's history, but cannot be actually clicked.

Revision d87e798
Firefox 83.0
MacOS 10.15.7 (19H15)

Is it possible to edit the theme to enable some sort of transparency? The following example is a decent implementation of it: https://imgur.com/a/6IWDThn/

It's from the following userChrome.css, but I wasn't able to adapt it to this repo. Any help is much appreciated:
https://www.reddit.com/r/FirefoxCSS/comments/fbg0bv/safariesque_for_firefox_73_on_macos/

When you access the menubar in full screen mode, the theme drops the location bar to make room for the menu bar. However, on a newer MacBook Pro, the menu bar is remains above the top of the "content" area so you end up with a gap

.

Some tabs (like 10%) seem to close, but when using Ctrl/⌘+[0-9], they are still present, and will retain after restarting Firefox.

Device

Firefox 85.0a1 on macOS 11.0.1 Big Sur

Unfocussed

vs Focussed

I only noticed on windows with dark backgrounds.

Hey I found another bug with firefox 110
the mute button is broken it shows as a black circle and doesn't work at all