mucksponge / materialfox Goto Github PK
View Code? Open in Web Editor NEWA Material Design-inspired userChrome.css theme for Firefox
License: MIT License
A Material Design-inspired userChrome.css theme for Firefox
License: MIT License
Not sure if it makes sense to support Firefox Color, but I thought I'd raise the issue anyway; the issue being that some of the pre-selected themes don't play nice with this theme.
Hello!
I am using Windows 10 and with MaterialFox enabled I get this bug when closing tabs. I created a short clip to demonstrate my issue:
This code is problematic for me because it removes useful functionality (e.g. Awesome RSS button).
Can you reconsider having them stay visible by default?
Inactive Private Window showing top border in white color.
Since I applied this theme, Firefox now doesn't use my system's min/max/close buttons
They don't even match the theme's color.
I'm on Windows 10 and I am using the Arc theme, and the buttons look like
I've searched on reddit and a user said that it can be fixed by commenting out or deleting tags titlebar-min, titlebar-max and titlebar-close on the .css files, however, Material Fox doesn't seem to have any.
Is there anything that can solve this issue?
...could emulate Chrome's Incognito mode. Not sure if you should only replace the Firefox one or also add a check for the Synced Tabs button though.
It'd be good to note in the ReadMe that Firefox should be running the Light theme in order to match the preview. Using the Default theme produces unexpected results. Using the Dark theme however, it still looks amazing.
I also want too say this is fantastic! Thank you.
We no longer control the light and dark themes so we should instead show the default and private browsing themes in the preview.
If you select the dark theme in Firefox, the urlbar and tabs still look "light" in normal browsing windows.
There should be a way to detect the current theme by lwthemetextcolor="bright"
or "dark"
.
I think you should place the SVG and CSS files in their respective folders, except for userChrome.css
of course. The files you add may increase and showing them all at once just clutters the chrome
folder.
If you provide a preference - quoting the readme:
Replicate Chrome identity colours (or lack thereof):
- [about:config] Add new entry
materialFox.disableIdentityColors
with valuetrue
.- Restart Firefox.
then please make the green locks/texts consistently gray or consistently green on all pages with HTTPS.
Pages with EV SSL are not more secure than those without, this has been proven many times by leading security experts, even Google knows that (so they have an experiment for hiding the text).
My personal opinion is that you should just keep it gray like Chrome and therefore remove the redundancy of a preference/green text code. (Hence my initial confusion at #24)
Commit 8171483 removes the ability to highlight the text in the urlbar. The issue is also mentioned on the reddit thread.
The mouse is being held down when dragged in both examples.
The problem stems from the #urlbar[focused]::after
styles as it doesn't let the pointer pass through correctly.
I have found two possible fixes:
Add pointer-events: none;
to #urlbar[focused]::after
Upside: Better than no text selections at all.
Downside: urlbar must be pressed at least once before being able to select text on the second time. All text is not highlighted when you click on it for the first time. More clunkier than default Firefox.
I wouldn't use this unless fix 2 is incompatible for some reason.
Remove the entire #urlbar[focused]::after
selector and styles, add the following style to #urlbar[focused]
Upside: Behaves exactly like default firefox
Downside: There are some artifacts on the curved parts of the outline due to box-shadow
. Not sure if it works on MacOS correctly, I'm trying to get a VM running.
box-shadow: 0 0 0 1px var(--textbox-outer-color-focused),
0 0 0 1px var(--textbox-outer-color-focused) inset !important;
Previous commits had a variant of the box-shadow solution, but with 2px instead, I'm not sure why it was changed to add a specific element for the border as it breaks the interactivity with the urlbar.
If you'd like to merge the second solution, my fork already has it and you can pull request from it: https://github.com/mnxn/MaterialFox
GIFs and solutions were tested on Windows 1803 with Firefox Developer Edition 63.0b2. I'll update this Issue if I find any problems with the second solution in a MacOS VM.
Edit: Just checked in MacOS and it seems to work fine.
The EV SSL company name label is green on Firefox 63.0b6. Maybe you're using some old identifiers? This issue does not occur on sites without an EV cert.
Tested on Firefox 63.0b6, macOS 10.13.6.
In Chromium, any internal chrome://
pages - like settings, bookmarks, extensions - have a "Chromium" title in the address bar, along with the product icon. Firefox also has this style for everything that starts with about:
Why does this userstyle hide the title then? Or even if intended, a preference would make sense.
Firefox 63.0b8, style build b000227.
Firefox 62 introduces an automatic dark theme change when using MacOS Mojave in a system-wide dark mode. It doesn't appear that this is working with MaterialFox enabled?
With Default Theme, Firefox changes to the Dark Theme if you're enabling the Dark Mode automatically starting with Firefox 64.
The tab bar has a blue tint while swiping with OSX between fullscreen apps.
On swipe finish, the tab bar flickers black then back to the theme.
I did exacly all steps on the README, plus disabled Test Pilot and Vivaldi-Fox but the style havent changed.
This is the layout of my browser (locale is pt-br):
Thanks in advance!
When looking at a normal HTTP site, the lock changes to an info icon like Chrome (please recommend users to enable security.insecure_connection_text.enabled
for the "Not Secure" text - see PR #27).
However, when looking at a HTTP site with a password field, the info icon persists but the normal lock icon persists too, which is a huge security issue.
I would recommend swapping the broken lock with the warning icon and when the icon exists, make the whole text red, like Chrome in October (also available now on broken HTTPS, FWIW).
Firefox 63.0b6, macOS 10.13.6.
A short movie says more than thousands words...
https://youtu.be/VYoWlDjgXEk
On UserChrome.css, you have @import "personalbar/personalbar.css";
but the folder and the file are both named personaltoolbar
Thank you for this wonderful theme.
Tab selection is a new feature in Firefox 63 (should be partly available in 62 by enabling browser.tabs.multiselect
) and this theme does not seem to highlight the selected tabs in any way. Chrome has had this feature for a long time, so it's not hard to guess what they should look like :P
Tested on Firefox 63.0b6, macOS 10.13.6.
Thanks for the great theme, the screenshot looks amazing!
I'm having problems using it on Windows, below are the details.
Please let me know if there's anything I can help with to get this fixed, I don't know if this could be related to my machine only or something general for Windows users.
I think the page info popup can also be made quite similar to Chromium's. Here's my (working, but not pretty yet) start on it, feel free to include:
#identity-popup-mainView { /* Limit overall popup width - default is 33 */
min-width: 25em !important;
max-width: 25em !important;
}
#identity-popup-mainView-panel-header { /* Remove primary header "Site information for..." */
display: none !important;
}
.identity-popup-security-content > description {
font-size: 135% !important; /* Increase security text size */
-moz-box-ordinal-group: 0 !important; /* Make the text topmost */
}
.identity-popup-headline {
font-size: 100% !important; !important; /* Decrease domain font size to look like the 3 bottom-aligned buttons on Chromium */
margin-block-start: 0.4em !important; /* Add space between the domain and security state */
margin-inline-start: 0.2em !important; /* Align similarly to permissions */
}
#identity-popup-security-descriptions > description {
color: inherit !important; /* Black text for security description */
font-size: 100% !important; /* Normalize description text */
}
.identity-popup-warning-gray, .identity-popup-warning-yellow {
background: none !important; /* Remove in-text triangles for mixed content */
padding-inline-start: 0em !important;
}
#tracking-protection-label, #content-blocking-label, #identity-popup-permissions-headline {
font-size: 100% !important; !important; /* Decrease category title font size to look like the 3 bottom-aligned buttons on Chromium */
margin-inline-start: 0.6em !important; /* Align similarly to permissions */
margin-block-end: 0em !important; /* Remove bottom margin */
}
.identity-popup-security-content, #identity-popup-permissions-content, #identity-popup-content-blocking-content {
background-image: none !important; /* Remove big category icons */
padding: 0.5em !important; /* Normalize padding */
}
/* Hide generic messages, including: */
#identity-popup-content-blocking-not-detected, /* Blockable content not detected */
#identity-popup-content-blocking-detected, /* Blockable content detected */
#identity-popup-content-blocking-disabled-label, /* Content blocking itself disabled */
#identity-popup-permission-empty-hint { /* Permissions not given */
display: none !important;
}
.identity-popup-section {
border-top: none !important; /* Remove separators */
}
#identity-popup-security-expander {
/* The inline identity info button - could look like the Certificate button on Chromium */
-moz-box-ordinal-group: 0 !important; /* Move the expanding arrow before text */
background: none !important;
/* Demo: low-res cert icon */
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOETk3luqeSQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAExSURBVCjPlZK9TsJgFIYfoSOd6IIjJi2jTBK8BaUmYHDBRePNEK9A0URWYQAmDG6WO4D2Gy0LTbsUUyesg2lj/eHnnc75zvuck7z5duZzJ3xot1kuP9hE6XSK80YDqdPtMp2abKPHTgfJ9xcAqKpKQVNXAqYlEEKwWLwhRY+KkkUraCtB1/MQ4quOQcuycF0vYRSR6w/F4GG5jK5XEsOLy6v1YK8/oNcfbBxQDFaOj9D1CqZl0Wxex4ZicZ+zeh3Hcbi5beH7fhJ8MQxMS/AeBInNJ7qOomRRlCyl0gHD4RMAqcigaRp7+Tz2bJYAbdsGIAxDZt9m8UXX9Qh+XANo3d2T281hGGMmk+lv8L/owzBkNHrGfrWT4chyZm2ChjFO9LKcQTqtVQmCYKtPXqtW+QRoEHiPUN97ZgAAAABJRU5ErkJggg==') !important;
}
.identity-popup-expander > .button-box {
-moz-box-ordinal-group: 99 !important;
border-right: none !important; /* Remove inline identity separator */
}
#identity-popup-securityView-body {
margin-inline-start: 1em !important; /* Fix security details padding when opened */
}
.identity-popup-preferences-button {
/* The Content Blocking settings button - could look a fill-width button on Chromium, but with adblock icon */
-moz-box-ordinal-group: 0 !important; /* Move settings buttons before text to look more like Chromium full-width buttons*/
/* Demo: low-res adblock icon */
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOEToUH6C8+AAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACiSURBVCjPY/z9+/f/7Tt2M1y7foPh////DMQARkZGBi1NDQZPD1cGliNHjzOs27CJgVRw4+YtBl5eHgamDx8+MpALPnz4yMAC4ygqyDOwsbERpfHXr18M9x88ZGBgYEAYkJIUzyAlJUmUAU+fPWOoqWtmYGBgYGBioBCMGjAYDGAREOBnYGBgYKiuayJZs4AAPwOLjbUlw+fPX8jKTDbWlgwAZgMxfMlgM2AAAAAASUVORK5CYII=') !important; */
}
#identity-popup-clear-sitedata-button {
/* "Clear Cookies and Site Data..." button - make it look like the cookie button */
background: white !important;
border-block-start: none !important;
margin-left: -8em !important; /* Hacky way to left-align the button, there are probably better ways */
/* Demo: low-res cookie icon */
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOETsMFdcV7wAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAJFSURBVDjLjZNLT1NhEIaf0sppm5LQixIESxqhiJKuhAh4gY0QNYIRUIGfIJioe6Mb0agxQoyiiGsvJCBuMAi6EBRRYGELKSkWVi1NBQsnQDmfi6OFWjDObpKZ531nMqMRQgj+CkVR8HqnmJmdZbvNisvlYqvQbUzm5ubo7X3Dx0/DRCIRAPbk5v4fwOfzcfvOXWRZjitYU9b4VyQBRCIR7rW0IssyKSkpXGg6T+mRwwBMT3/nxs1bjI2Nb+3g2fMXLCz8BCAzMxOXy4Veb2Dg3XtWV1eZnJwkOXkbkl4ibUcaZnNqDKCZn18QFy9dZuMu7XY7oVCIxcXFBMWMjAyuXb2y7sDj8SCEoLLyJDvT02l79Bi/37/lzMFgkK6ubpK0Wg4dLEEXDocBKCkuxmq18LKzk0AgiMlk4uyZWr6OjjIy8iUGWFlZoftVj5oIgS66pm75enMzkqQnEAgCUFhYQFHRAYxGYwyQlWXH75+JjStJEjqrxQJAOPwjzurg4BBGo5HxcXX7NdWnqagop739CR8GhwCw2WzonM6cTWeVZZmentdx1hVFYWlJvRONRkN+/j40Qgjx4GEbw8Of4wAOhwOnM4e+vrdEo9EEgbKyUhrq69RDaqivw2QyxRU01J+jtqaavXl5Cc0Wi4VTVVWqkz/P5Ha7aWm9z/LyMgDZ2btxOBz09w/EOTCbU2lqbMRu3xUPUJ8pREfHUzwTEwmqWq2WE8ePUV5+FEmS1i9xs3f2eqf45nYjFOW3qpmCgv0YDIYE8C/lYedSnVP+RQAAAABJRU5ErkJggg==') !important;
}
#identity-popup-permission-preferences-button {
/* The permission settings button - could look like Site Settings on Chromium */
/* Demo: low-res cog (page settings) icon */
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOEToxVKRovwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAHqSURBVDjLlZNNU1JhFMd/h3sdWFzABSPBAoYPkEsvUE4Bu+wFnElzX32IUkvBPkS1rzaiM+rOcgc4Ywv7ANfbDDCYCxjc2eVpQVxRpJnO6rz+n/Oc/zmilFLcIPv7Xzk/PwfAMAxyuexNaeiMkU+fvzDAFpGxAJ6B0mq1cBwHgBPbZrgxpRQntg2A4zi0Wi03Jkop1e50eP1qGX1igunp21QqVa7/TERIpZIcH//g98UFG+9KTAaDfYD3Hz5Sqx3yP2KaM7x88RxPs9m8sXhqaorHjx4ye/cOPp9vJF6rHdJoNJBer6fKW9vs7u65wUAgwPraG/x+PwDtTodicYN2u+3mzM09oJB/gkdEmC/kSZqmG8xlM24xwGQwSDZz37XTqSTzhTwicsmCeMRN0HRtpOXe0FCHdY9Sis3NMpVK1XUeHX2/wkK32+Xg24FrV6s1ylvbKKWQer2uVlbfjryYSCTIZO4BsLOzx+np6UhOqbiGHo1GMc2ZESYsy8KyrLE0Jk2TSCTSn8HCwlN8Xi+GYZBOpxCRkQIRIZ1OYRgGPq+XpaXFy00crHIoFELTNGz7J+vF0hWA1ZVl4vEYjuPw6+yMW+Hw1WMK/3UAxOMxRMQdpK7rxOOxPkOa5hb/8xqXni1envPQTlyXP5pov06hpTmBAAAAAElFTkSuQmCC') !important;
}
.identity-popup-permission-item, /* Permission item */
#identity-popup-content-blocking-category-fastblock, /* Slow-loading trackers */
#identity-popup-content-blocking-category-tracking-protection, /* All detected trackers */
#identity-popup-content-blocking-category-3rdpartycookies { /* Third-party cookies */
margin: 0.5em !important; /* More margin for Chrome likeness */
}
.identity-popup-content-blocking-category, .identity-popup-permission-item {
padding-inline-start: 2.2em !important; /* Add padding to content blocking/permission items in order to make their icons visible */
}
.desktop-notification-icon {
/* Demo: low-res notification icon */
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAPCAYAAADQ4S5JAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOETsiyQEYIAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAADhSURBVCjPlZJNboJAGECf1A0XqSegS3uRxgtUV9p26x3Uhel1DDWCWwnQJS4d0JowC9LPjWCdGglvN/nem59kEIOiKOTt/UOGw5Forc2xWBh8LZfsdoo02+P5vjmmJSICkOc5k+mMMIyuhE7nkUH/Fdu2AahOuCUDhGHEZDqr1hZAHH/flP9GURxfgiRJqGObbC/BYX+oDUrHAji/+y6lY9GQ5oFSGQvXrRUXrotSGQ+/wjhN09pAa8167dPaBIE0uVL1NUpWnsd8/glAr/fCc7d7FbTNHZ4ch+PPEeCfDHACeoiOLJ50LOEAAAAASUVORK5CYII=') !important;
}
Edit 07.10: improved design
Edit 14.10: added demo icons
Edit 12.11: fixes for FX 64
Is it possible to have dark context menus? (favorites, etc)
Wonderful theme! thanks so much!
thanks for the theme :) ... let me know if you fix your account at buymeacoffe.com ([email protected])
The URL bar becomes smaller when empty
Commit Id: 8171483
You can either:
It's easily noticed when adding/removing a single character from the URL bar
When the favicon is hidden to make way for the tab load throbber, the tab will jitter slightly due to the throbber having different margins compared to the favicon.
Might be best to tackle this with a Material redesign of the tab load behaviour, including the throbber and flash that occurs after loading has completed.
Firefox's built-in light theme
Firefox's built-in dark theme
Firefox's built-in default theme - looks better, but I'm not sure if it is fully accurate.
Hover and selected states look fine in all except dark theme. Probably related to #9.
Tested on commit b0aa0cd, Firefox 63.0b11, macOS 10.14 (Mojave, light theme).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.