materia-theme
materia-theme copied to clipboard
nana-4
Firefox theme (proposal)
I'm not sure if this is the right place for this as strictly spoken it is not a bug report or feature request, but it is the only place I found.
I really love this theme. It is the only gnome theme that really looks bleeding edgy modern. However it bothered me that firefox doesn't really fit in. So I developed a theme on my own.
I also discovered that a firefox theme is also planned as part of this repository:
Supports of Firefox theme
So I asked myself if you are interested in getting my theme. Some things are hacky, most things were done quick and dirty. Especially that css-keyframe animation that should handle the zooming circle on button works, but not quite as expected (although it strangely worked on my website). Also it is far from complete. I haven't done any menu, about page or private browsing indication yet and the url bar has still some aspects that need to be worked out. But hey it's a start! The theme is based on the gnome integration theme.
I'm attaching some screenshots and the xpi file. Feel free to use it (if you want to).
And here goes the extension itself: https://own.arrakiz.org/index.php/s/t4NWodBqeyWIXmu
(For me the classic theme restorer occasionally chrashed with this theme. So be sure to uninstall it if you have it. And be sure that you have HTitle installed: https://addons.mozilla.org/en-US/firefox/addon/htitle/?src=userprofile )
Do you have your work on github? You should submit a pull request!
The hackyness shows in a lot of ways, but hey its a start
No, (not yet). The hackyness is kind of the point I didn't have the courage to submit it. I should probably remove the bugs, fix the ripple effect, implement the missing stuff and tidy up the CSS code first. I originally started this as a just for fun project. But I will do it when I have more time.
This thing looks beautiful!
On Sat, Sep 24, 2016 at 8:04 PM, Cedric Wehrum [email protected] wrote:
No, (not yet). The hackyness is kind of the point I didn't have the courage to submit it. I should probably remove the bugs, fix the ripple effect, implement the missing stuff and tidy up the CSS code first. I originally started this as a just for fun project. But I will do it when I have more time.
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/nana-4/Flat-Plat/issues/78#issuecomment-249399730, or mute the thread https://github.com/notifications/unsubscribe-auth/ADS0WBdSzfkvmz__0r_54MBrGp8Owipfks5qteS9gaJpZM4KFx9B .
@USBA
- Install HTitle: https://addons.mozilla.org/en-US/firefox/addon/htitle/?src=userprofile
- Go to about:addons and click on extensions. Then click on "Preferences" in the HTitle row. For Gnome shell click on "Always", for Unity click on "When maximized". Unity is not supported however. It'll look like the gnome shell version, but with a title bar.
- Download the theme: https://own.arrakiz.org/index.php/s/t4NWodBqeyWIXmu
- Go to about:addons again and click on the gear icon / "Install Add-on From File":
Open the downloaded file, click on "Install" and then on "Restart now". Voila! - Be prepared for some bugs.
As a packager, I really go against stuffing chrome, firefox addons here. Firefox theme is great, but it should be in a separate repository as these themes here are for the DEs and not app specific. A link in README to your repository would do the trick.
Wow, it looks really great! Thank you for your hard work! I'd love to incorporate your brilliant work, but it might be better to have a separate repository as MPL. :)
@cthbleachbit Hmm, I don't think it's odd to stuff them. Because they are intended to match the appearance of this theme. And also, app specific style are not always only addons. For example, this GTK3 or GTK2 theme also has specific styling for third party apps.
wuauuuh it looks really cool!!! But this is how it looks in my firefox
How do you plan to show the tabs?
:(
The theme looks pretty great indeed.
As you can see, there're two issues
- Maximize and minimize buttons are not colored the same way as the close button.
- The URL text area is themed differently when it's focused
I think that the theming should stay the theme, just add a nice shadow or something else when it's focused. Don't anything about Material design guidelines but it will look better (i hope)
@jgato I'm pretty busy with other stuff right now. But I haven't forgotten it. The only progress I made so far is that I designed and integrated some plain white icons for common add-ons like AdBlockPlus. The tab bar and the navigation appear in reversed order for me and not in normal order like for you. I'm using flex-box properties for this. Maybe you are using an older version of Firefox that doesn't support flex-boxes yet or some Add-on or Stylish script that conflicts with the theme? It would be helpful for me to figure out the problen if you could tell me your FF version, your installed Add-ons and your Stylish scripts (if you have any).
@bil-elmoussaoui I will consider that. I used a similar design concept than gnome browser (epiphany) which I personally really like on a "looks" point of view. However working with it I discovered some really great disadvantages especially for small screens. So I will probably remove the focus animation.
@Scindix I think the problem was the gnome-theme extension I was using, because I have been using gnome theme (theme) for long time. Now:
As you said, now I have the tabs bar below the navigation bar. I would prefer the other way around, with the tabs bar in the top. I dont know, it looks more modern in my opinion. Other issues I have found :
- I cannot see minimize, maximize buttons.
- When I start typing in the navigation bar, the pull down options width is the maximum horizontal of the window. It looks strange and with tinny fonts.
Finally, did you consider that firefox themes will be soon no longer suported? here more info and here the firefox gnome-theme team talking about it and moving to Firefox User Styles.
In any case, this will be my theme nowadays ;)
Sorry but I was also busy with other stuff, so I could not focus on this.
BTW, I also noticed that Firefox might remove support for heavyweight themes. So I was experimentally making a theme based on the firefox-gnome-css repo and @Scindix 's great theme. This is still under development, so the code is quite dirty and big bugs are left. (e.g. the close button is not displayed on the top right.) But I will publish it in the hope of being helpful for something. 😎
Here: http://pastebin.com/Fz2Sq4Er
It is installable via Stylish.
Update: I've added previews.
- with HTitle
- without HTitle
The only issues with HTitle + Stylish script is that the window becomes undraggable using the top bar and needs to be dragged using that small bar in the top right corner (when window controls are enabled in HTitle settings).
@GeorgeSapkin: when using Linux you can drag windows by using Alt+LeftMouseButton (or Super+LeftMouseButton in GNOME Shell) since… always.
I almost never use titlebar for dragging windows, unless I'm eating ;)
@jgato
Sorry for the late reply.
It seems that you are setting devtools.theme to dark.
To display the theme correctly, please reset the value or change the value to light.
@Baemir
I'm not the author of flat-plat.xpi, but you should be able to install it using this:
https://addons.mozilla.org/ja/firefox/addon/checkcompatibility/
@Baemir I have stopped development on the xpi extension since nana-4 started developing the Stylish script. As complete themes definitely will be shut down by Firefox I think that makes sense. I recently checked it and my theme is incompatible with current versions of Firefox. Disabling the "Check compatibility" feature as nana-4 suggested will successfully force Firefox to use the theme, but some menus will be unusable.
@jgato I made some adjustments in the stylish script from nana-4. E.g. making the navigation bar draggable, adding flat icons for browser functions and common plugins or correction the scope of the CSS rules. I will post them here when I'm back home.
However I doubt that this development will lead to something because Mozilla now also announced that they want to shut down their plugin engine altogether by November. (See https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/ ) Instead they're replacing it with the all new WebExtensions API which has far less capabilities. I'm still reading through Mozilla's API and thus I still need to confirm this, but it doesn't seem to provide any method of injecting CSS into the browser UI. The developers of Stylish have announced that they will switch to the Chrome WebExtension and make it available for Firefox. However there is currently no support for modifying the browser UI (See https://forum.userstyles.org/discussion/47242/the-future-of-stylish-for-firefox ). They say it's one of their goals to preserve that functionality, but I highly doubt that Mozilla will add necessary API functions as they are shutting down XUL as well. And XUL was the whole basis of being able to style the browser UI via CSS.
It seems that Mozilla's approach of "Make Firefox Great Again" will lead us into a dark future in terms of the freedom that Firefox always provided compared to other browsers. My only hope is that Mozilla puts an unexpected big effort into the WebExtensions API and make it much more potent than anticipated (and much more potent than Chrome's engine). But for the moment it doesn't look like that.
good overview @Scindix I have been a supporter of Firefox from years ago, even before of changing the name to Firefox. I have read other articles about complains with this changes and the WebExtensions API, that I dont know how they work. I remember once programming an addon with XUL and JavaScript but even having to link it with other internal libraries in C. XUL seemed to me like a nightmare, you could modify the XUL of any place powerful, funny, but... it opens the possibility of making a big mess. Specially when you start mixing lots of add-ons. In the other hand, nowadays... at least for me, I use less and less addons, so maybe we dont need so much flexibility in the framework for addons. Is Webextensions API related to the new [testpilot](https://testpilot.firefox.com/]? These new addos are awesome!! The kind of new-fresh functionalities I like in a browser. do you also think Mozilla is doing wrong?
Hi, I'm sorry for the late response. Well, I investigated a bit about the future trend of Firefox themes and found some good materials.
- https://www.ghacks.net/2017/01/16/firefox-new-default-theme-theme-api-makes-an-appearance/
- https://docs.google.com/document/d/1ebB02HHc5Ni_ZyUwA41vJ9OlZsTEAMFOpXCaCqvuGTE/edit
- https://github.com/mozilla/firefox-themes/tree/master/notes
- http://browser-config.herokuapp.com/
If my understanding is not wrong, it seems that the new "Firefox theme" will be like the Chrome theme, and detailed customization by CSS is likely to be impossible as @Scindix pointed out. ~I didn't assume this, haha...~
I don't know what will happen in the future, but even if I continue to develop the CSS-based theme, it is likely that efforts will be in vain, so I'd like to stop this work once and see how it goes.
P.S.1. Either way I also would like to see the stylish script adjusted by @Scindix. :D
P.S.2. Although it is true that some functions are restricted by migrating to WebExtensions, I think it is reasonable from the viewpoint of maintainability, standardization, etc.
Just thought show everyone how Flat-Plat looks when using the new Stylo interface on FF 57. IMO the theme integrates well with the new interface, but obviously it is a far cry from the stylish theme posted above.
@The-King-of-Toasters Can you post that image to a longer-term host? I'm getting a 404 right now. Thanks!
Hey all, Mozilla just enabled Client-Side Decorations in the ff59 nightly, here's a screenshot showing how it looks. Other than a official theme I think this is as good as it gets. It's not as gnomey as Gnome Web, but I think a userChrome.css fix could be in order. Although that's up to the discretion of @nana-4. TBH i just want my check boxes fixed first.