search

Aris-t2 / CustomCSSforFx

Custom CSS tweaks for Firefox
GNU General Public License v3.0
1.79k stars 181 forks source link

GENERAL discussion, feedback, questions belong here! (v14) #417

Closed Aris-t2 closed 2 years ago

Aris-t2 commented 2 years ago

Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!

Continued from https://github.com/Aris-t2/CustomCSSforFx/issues/3, https://github.com/Aris-t2/CustomCSSforFx/issues/41, https://github.com/Aris-t2/CustomCSSforFx/issues/88, https://github.com/Aris-t2/CustomCSSforFx/issues/109, https://github.com/Aris-t2/CustomCSSforFx/issues/133, https://github.com/Aris-t2/CustomCSSforFx/issues/163, https://github.com/Aris-t2/CustomCSSforFx/issues/189, https://github.com/Aris-t2/CustomCSSforFx/issues/211, https://github.com/Aris-t2/CustomCSSforFx/issues/241, https://github.com/Aris-t2/CustomCSSforFx/issues/273, https://github.com/Aris-t2/CustomCSSforFx/issues/308, https://github.com/Aris-t2/CustomCSSforFx/issues/368 and https://github.com/Aris-t2/CustomCSSforFx/issues/404

Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.

Custom JS scripts to restore more classic features https://github.com/Aris-t2/CustomJSforFx

Things this project will not target/recreate

Things not possible with CSS

BoomerangAide commented 2 years ago

Since we were talking about compact stuff recently, I wanted to share another piece of code from my my_userChrome.css file:

/* Hide lines with something else than the id in login popup */
#PopupAutoComplete richlistbox richlistitem div div :not(.line1-label)  {
    display: none !important;
}

On a site with multiple login, it get rid of that stupidly repeating "From this website" line below each login entry. Not sure what would make that line say something else, maybe a feature I don't use, but maybe that code could fit somewhere?

Ps: I thought I already shared that, but a search gave nothing. But I wonder if the github search really work that well to begin with. 🤔

Aris-t2 commented 2 years ago

Never though about removing that line, but its great we can achieve it using CSS.

About the Github search. Once a thread gets too long, entries get hidden and you have to click "Load more..." link to show them again. Search won't find the hidden stuff, so I think this is what happened to your post.

image

ImSpecial commented 2 years ago

So I've been getting these kind of "popups" since I updated to Firefox 92.0, happens on sites like "Spotify, Apple, Outlook, etc.

https://i.imgur.com/P0mZtC8.png https://i.imgur.com/KcXuj4d.png

I was wondering if these can be completely hidden and removed from happening, or is this not even CSS stuff anymore?

EdwardKiefer commented 2 years ago

So I've been getting these kind of "popups" since I updated to Firefox 92.0, happens on sites like "Spotify, Apple, Outlook, etc.

https://i.imgur.com/P0mZtC8.png https://i.imgur.com/KcXuj4d.png

I was wondering if these can be completely hidden and removed from happening, or is this not even CSS stuff anymore?

Do you use any kind of adblocker like ublock Origin, I would think that would take care of the second one (that seems like spam). Not sure on the DRM one.

ImSpecial commented 2 years ago

Yes, uBlock Origin, but these don't seem to be your typical popups like from ads, more like notifications from Firefox. Like when you go and install an "Add-on" and a small pop up will occur, asking to allow or deny.

ImSpecial commented 2 years ago

FYI, I was able to solve this with two about:config pref's.

DRM popup; browser.eme.ui.enabled to false

Mailto popup; network.protocol-handler.external.mailto to false

BoomerangAide commented 2 years ago

So I've been getting these kind of "popups" since I updated to Firefox 92.0, happens on sites like "Spotify, Apple, Outlook, etc.

https://i.imgur.com/P0mZtC8.png https://i.imgur.com/KcXuj4d.png

I was wondering if these can be completely hidden and removed from happening, or is this not even CSS stuff anymore?

Though you already found a solution, yes, it probably could have been hidden by CSS, if those have an id and/or other properties than can be used to target with css (see the id finding part of the readme) I myself have this:

/* Hide the "update available" popup */
#appMenu-notification-popup {
    display: none !important;
}

To no longer be bothered with Firefox reminders that it can be updated. Though I haven't seen that popup for so long I can't tell for sure if my css is still working, or if the popup was just removed at some point 😛

bendover22 commented 2 years ago

Unless I missed - a lot, does customCSSforFx have any code to change heights of urlbar-container , urlbar-input-container & matching searchbar elements? Some of the code I tried to use as root and / or like the example below. Since this isn't a feature of CustomCSS (I guess), maybe someone besides Aris could point me in the right direction.

I'm looking mostly to chg the heights of entry field(s) for URL & Search input containers, and the 40px TALL #urlbar-container and #search-container. Everything "Photon" is turned off AFAIK- nothing expands or jumps out.

Mozilla has set the "--urlbar-container-height: 40.00px" as root & nothing I've found online or thought of myself, has overridden the 40px.
(See screenshot) I was able to chg heights of the INPUT containers (url & search), but NOT the outer 40px container (see screen).

Code below is from Mozilla support. I'm not sure why (cor-el) did some things, like repeat "#urlbar-input-container" in succession, but he is usually right. https://support.mozilla.org/en-US/questions/1284030

#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
  --urlbar-height: 28px !important;
  --urlbar-toolbar-height: 30px !important;

  width: 100% !important;
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-input-container,
#urlbar-input-container {
  height: var(--urlbar-height) !important;
  width: 100% !important;
  padding-block: unset !important;
  padding-inline: unset !important;
  transition: none !important;
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  animation: none !important;
}

Modified April 11, 2020 at 2:11:24 PM PDT by cor-el

fx-92-nav-bar_urlbar-container-can't chg size

BoomerangAide commented 2 years ago

@bendover22 : I'm not sure we would be talking about the same thing, but in my case, I had an issue of nav-bar having too much height, causing empty space above and below, and the separators between the url bar and search bar being stretched vertically. And same experience, css was powerless, so I eventually ended up using my custom js changes file, that work along CustomJSforFx enabled scripts, with the following code:

        ///
        /// Change navbar height because too big otherwise
        ///

        try {
            let nav_bar = document.getElementById("nav-bar");
            nav_bar.setAttribute("height","28px");
        }
        catch(e) { console.log("height setting failed");  console.log(e); }

To recap:

bendover22 commented 2 years ago

@BoomerangAide - "What is in a name? Would not a nav-bar by any other name be just...." W.S. We are talking about the same thing (essentially). Thanks for the code. Do you have to enable one or ? many files from CustomJSforFx? If so, which one(s)? Do you then have to comment out certain parts that change things you don't want changed?

Here's what I found to change height of urlbar-container; search-container; and the text entry containers.

:root {
    --urlbar-container-height: 34px !important; }

:root { 
   --urlbar-min-height: XXpx !important; } /*optional*/

#urlbar-container, #search-container {
    padding-block: 1px !important; } /*** This puts 1px padding ABOVE / BELOW the url & search input ***/

Decide what height you want for the urlbar-container ("text entry field") & search-container (the tallest part of this toolbar). URL & Search containers must be same ht., so the toolbar's bottom edge is even .

The magic bullet to override Fx's 40px H urlbar-container (& search-container)is shown. In my_userChrome.css, "must define" the fixed ht of url & search containers, < 40px:

If you need to change height of URL & Seach bars (input area) from the default (32px for Normal density), you can define it the same way as --urlbar-container-height:

I found I needed to override the Moz value for padding-block:4px; on urlbar-container, search-container, or the url-container extends past the input containers more than I wanted. Adjust values as desired. Hope there are no errors - working on my desktop.

Acid-Crash commented 2 years ago

Hi @Aris-t2 Maybe I am mistaken, but some time ago there was a module to change Bookmark folder icon color to the one you like (vial fill css rule). I tried to find one within the latest files, but the only thing I have found is the complete replacement for the Bookmark icon.

Maybe you can help with the following... I would like to replace and recolor the new Bookmark folder icon (chrome://global/skin/icons/folder.svg) that appears in the Bookmarks Menubar, Toolbar, and Places/History (basically everywhere it is present)...

I tried to reverse engineer the mentioned module but got a mixed results (messed up Bookmark Gear and tag icons)

Thank you in advance

bendover22 commented 2 years ago

https://github.com/Acid-Crash Depending on what you want - one color of folder, to use everywhere a typical, small folder icon is used? Like in Fx 92, the plain "folder" image is just a black outline of a folder shape. No color fill, other than the BG color.

I think what you may want is something like /chrome/css/generalui/bookmark_icons_colorized.css If you search the customcssforFx package's "userChrome.css" file , you'll find several for "bookmarks" & possibly "folders."

The former has more than just a colored folder icon. If you don't like the color of the folder icons (like yellow), you can backup / save the orig. image under the customcss "image" folder, then either change the color in another drawing or graphic editor app. Then save it to the images folder, using the SAME name as the original. Or find images already colored & put them in the proper path in customcssforFx.

What ever OS you use, get a "text editor" w/ a GOOD search function, that shows results (in partial sentences, for context), the line # where located, etc. You can find what you're looking for MUCH faster. For Windows, Notepad++ - very popular; (free, open source) was one I used before moving to Linux. For Linux, there are many. One w/o too steep a learning curve, but still lots of features (& excellent search / find tool) is Geany, that I've used several yrs. Both have good help sites / forums and / or mailing list, where help usually comes quickly.

Regardless, I suggest getting a dark theme for the text editor. Black or V dark background & as bright of syntax coloring as you want (say for CSS files). Much easier to see for search thru a file, or make simple changes, rather than white / nearly white BG. Easier on the eyes.

Acid-Crash commented 2 years ago

@bendover22

I think what you may want is something like /chrome/css/generalui/bookmark_icons_colorized.css

I know about this module, it replaces every icon within Bookmarks (folder, tag, gear).

I am interested only in replacing the bookmark folder icon (I have the needed SVG file). As mentioned earlier, I tried to reverse engineer bookmark_icons_colorized.css but did not manage to do it right (tag and gear icon are also become replaced with folder icon) As for the editing the icon, choosing the text editor, I am aware of this matter.

silverwings15 commented 2 years ago

does anyone know how to remove the "Find in text" placeholder text in the findbar?

BoomerangAide commented 2 years ago

https://github.com/Aris-t2/CustomCSSforFx/issues/417#issuecomment-925407479 @bendover22 : we must be going for a different effect after all. Your code has no effect over my situation:

Not resized forcefully through javascript

ffox_navbar_not_resized

Resized forcefully through javascript

ffox_navbar_resized

I hope you managed to get things to look like how you wanted. Note: this is on Firefox 91, maybe some things would get unlocked on another more recent version.

ghost commented 2 years ago

Hello everyone. Is there any way I can make the appmenu completely square?

appbuton
Aris-t2 commented 2 years ago

@bendover22 @BoomerangAide

This worked for me without breaking other code. Not sure, if it interferes with anything else.

:root {
  --urlbar-container-height: 40px !important;
  --urlbar-min-height: calc( var(--urlbar-container-height) - 2px ) !important;
}

@Acid-Crash This will override folder icons with a custom SVG image, that can be colorized:

toolbarbutton.bookmark-item[container],
.bookmark-item[container] .menu-iconic-left .menu-iconic-icon,
.bookmark-item[query][hostContainer],
.folder-icon,
#editBMPanel_chooseFolderMenuItem .menu-iconic-icon,
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, query, hostContainer) {
 -moz-image-region: rect(0px, 16px, 16px, 0) !important;
 -moz-context-properties: fill !important;
 list-style-image: url("chrome://browser/skin/developer.svg")!important;
 fill: red !important;
}

toolbarbutton.bookmark-item[container][open],
.bookmark-item[container][open] .menu-iconic-left .menu-iconic-icon,
treechildren::-moz-tree-image(title, open),
.bookmark-item[query][hostContainer][open] {
 -moz-image-region: rect(0px, 16px, 16px, 0) !important;
 -moz-context-properties: fill !important;
 list-style-image: url("chrome://browser/skin/developer.svg")!important;
 fill: blue !important;
}

@mimecry You can not hide the placeholder using CSS.

@PorigonZ 

#main-window[tabsintitlebar] #PanelUI-button #PanelUI-menu-button {
  border-radius: 0 !important;
}
silverwings15 commented 2 years ago

@Aris-t2 i managed to hide it using

input.findbar-textbox::placeholder {opacity: 0 !important;}
Acid-Crash commented 2 years ago

@Aris-t2

This will override folder icons with a custom SVG image, that can be colorized:

Tried this version, unfortunately it also affects other Bookmark-related icons:

Also, the every subfolder icon (for example Globe icon) color changes for the opened folder, meaning, that it is also partially affected

I do understand that this is a lot of work, but maybe you can still look at this...

![bookmark](https://user-images.githubusercontent.com/32600318/134813015-b55ac80a-a00d-46c5-8d3f-060424604646.png)
BoomerangAide commented 2 years ago

I don't have version 92 or above, but I think the trick is the elements you want changed would be .bookmark-item[container] and .bookmark-item[container][open] or an equivalent, and the elements you want unchanged are also it, and something more. Either you need to find every "something more", and allow them to set themselves on their usual/default value, or maybe you need to find something common to all you want to exclude (data-l10n-idmaybe?) and exclude it with the css rule (not sure which one would work...if one work).

ghost commented 2 years ago

@Aris-t2 Thank you.

Aris-t2 commented 2 years ago

@Acid-Crash

This was a summary of what the folder icon changes look like, if using the code from bookmark_icons_colorized.css file.

You can tweak it, but colors will always affect iconized folders/containers unless one overrides them manually later.

.bookmark-item[container],
treechildren::-moz-tree-image(container) {
 fill: red !important;
}

.bookmark-item[container][open],
treechildren::-moz-tree-image(container, open) {
 fill: blue !important;
}

Excluing [data-l10n-id] will work for bookmarks toolbar and bookmarks popups, but not for sidebar and library.

.bookmark-item[container]:not([data-l10n-id]),
treechildren::-moz-tree-image(container) {
 fill: red !important;
}

.bookmark-item[container]:not([data-l10n-id])[open],
treechildren::-moz-tree-image(container, open) {
 fill: blue !important;
}

That would require to remove the fill rule from containers with icons manually.

I only know some of their names:

treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),
treechildren::-moz-tree-image(container, queryFolder_toolbar_____),
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),
treechildren::-moz-tree-image(container, queryFolder_menu________),
treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
treechildren::-moz-tree-image(container, queryFolder_unfiled_____),
treechildren::-moz-tree-image(container, OrganizerQuery_History),
treechildren::-moz-tree-image(container, OrganizerQuery_history____v),
treechildren::-moz-tree-image(container, OrganizerQuery_downloads__v),
treechildren::-moz-tree-image(container, OrganizerQuery_allbms_____v),
treechildren::-moz-tree-image(container, tagContainer),
treechildren::-moz-tree-image(container, OrganizerQuery_tags_______v) {
 fill: unset !important;
}

EDIT

I looked through the code and found a few more "names".

That should cover all items incl. sidebar and library now. Based on the above entries one could write custom code for those containers independent of the "default folder icons".

plomari commented 2 years ago

Is there anything that rectifies all the round UI buttons? I looked here but there doesn't seem to be anything.

Is it correct that scrollbars both in the Firefox UI and web content (assuming the website doesn't override them) are defined by the system toolkit? They changed to the worse when updating from Firefox 88 to 92: instead of an elaborate rendering of a scrollbar, it's a grey rectangle with a grey oval as "handle" in it. This is on Linux. Firefox 92 is built against GTK 3, and Firefox 88 probably as well but not sure. Does anyone know why it changed and how it can be fixed? I found and modified this to make it look slightly better, but it's still ugly and with worse usability.

BoomerangAide commented 2 years ago

I feel like some compact-ness has hit the wrong place in latest css:

Version 78.14 ESR (normal)

78 14 esr

Version 91.0.2

91 0 2

Disabling "popup_compact_menus" make it look better (though not as good as in the past), I wonder if it's possible to exclude that popup (or whatever it should be called) from the "compact" changes?

On a more personal point (so low priority), I don't like the new "shield" icon (look like an empty vessel to me), I would be interested in getting the old one back / seeing it customizable in the future.

BoomerangAide commented 2 years ago

Not editing the previous entry since it's completely unrelated: After some struggle in https://github.com/Aris-t2/CustomJSforFx/issues/29#issuecomment-933568597 I managed to get back a warning icon for pages whose loading is broken. But horror: Mozilla changed the icon from an orange one to a full black one, and that meant that what worked on Firefox 78:

#favimginurlbar[style*="warning.svg"]
{
    filter: hue-rotate(-45deg) saturate(100);
}

was now broken on Firefox 91. But I managed to get around it with the following code:

#favimginurlbar[style*="warning.svg"]
{
    filter: invert(100%) brightness(50%) sepia(100%) hue-rotate(-45deg) saturate(10000%);
}

I don't know if other icons one want from black to another color will show up, but maybe my experience will be useful.

Aris-t2 commented 2 years ago

@plomari By default the buttons have rounded corners, but modifying buttons_on_navbar_button_roundness.css can create fully squared buttons.

Besides custom_scrollbar_appearance.css custom JavaScript can also modify scrollbars. Look here: https://github.com/Aris-t2/CustomJSforFx https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js

@BoomerangAide I will tweak the code a bit to optimize that popup when popup_compact_menus is active.

It should be possible to replace the shield icon with the old one: tracking protection icon

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon {
  list-style-image: url(tracking-protection.svg) !important;
}

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon {
  list-style-image: url(tracking-protection-disabled.svg) !important;
}

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
  list-style-image: url(tracking-protection.svg) !important;
}
BoomerangAide commented 2 years ago

Thanks, this is my final code:

/* Replace tracking protection icon by old one */
#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon {
  list-style-image: url(./image/tracking-protection.svg) !important;
}

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon {
  list-style-image: url(./image/tracking-protection-disabled.svg) !important;
}

#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
  list-style-image: url(./image/tracking-protection.svg) !important;
}

#tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon {
    filter: invert(100%) brightness(50%);
}

#tracking-protection-icon-container:hover:not([open=true]) > #tracking-protection-icon-box > #tracking-protection-icon {
    filter: invert(100%) brightness(0%);
}

#tracking-protection-icon-container:hover:active > #tracking-protection-icon-box > #tracking-protection-icon,
#tracking-protection-icon-container[open=true] > #tracking-protection-icon-box > #tracking-protection-icon{
    filter: invert(100%) brightness(0%);
}
/**/

This is after putting the 2 tracking protection icons from the zip file in the "image" folder in the chrome folder of all modding.

nollinvoyd commented 2 years ago

@Aris-t2

Firefox 93, CustomCSSforFx v4.1.0v3

I jumped from v3.3.2.1, to v4.1.0v3

Issue #1:

v3.3.2.1 toolbar display: Navbar partially obscures tab bar

css1

v4.1.0v3 toolbar display: Just the opposite, Navbar partially obscures menubar

css2

I disabled myuserchrome.css when testing, but it made no difference in relation to the toolbar positions.

Issue #2

Is there any was to make all menus compact, i.e., eliminate the vertical spaces between the entries like they used to be?

Current View:

css3

css4

after disabling "import "./css/generalui/popup_compact_menus.css", tab menu farther apart:

css5

but hamburger menu closer together:

css6

Once again, myuserchrome.css disabled

Aris-t2 commented 2 years ago

@BoomerangAide Great.

@nollinvoyd Everything looks so ultra giant on your screenshots.

Make sure everything is set to 100% size/dpi/scale-wise, so we have the same base while testing.

Maybe a new browser profile will help while testing.

image image image

userChrome.css ```css /* Firefox userChrome.css tweaks ****************************************************************/ /* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **********/ /* Github: https://github.com/aris-t2/customcssforfx ********************************************/ /************************************************************************************************/ /************************************************************************************************/ /* Custom CSS for Firefox 91+ *******************************************************************/ /* version 4.1.0 ********************************************************************************/ /************************************************************************************************/ /************************************************************************************************* Change-log: https://github.com/Aris-t2/CustomCSSforFx/commits/ [!] Firefox requires this preference to be enabled or custom styles will not be loaded: 'about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true' *************************************************************************************************/ /************************************************************************************************* README Finding profile folder: address bar > about:support > Profile Folder > Open Folder CSS files and sub-folders belong into \PROFILEFOLDER\chrome\ directory. \chrome\config\ \chrome\css\ \chrome\image\ \chrome\userChrome.css \chrome\userContent.css ENABLING options: remove the combination of / and * in front of '@import' DISABLING options: add the combination of / and * in front of '@import' macOS issues / glitches / fixes -> look for 'macOS fix' additions inside this file - tabs toolbar spaces in 'toolbars' category - tabs not on top mode in 'tabs toolbar position' category - page context items in 'general ui' category EXPERIMENTAL settings are for testing only! BASIC OVERVIEW - settings this file contains: CONFIGURATION FILES - general variables / color variables (default browser theme only) TOOLBAR BUTTONS - toolbar button / icon appearance - bookmarks menu button / popup - other button settings - custom BACK and FORWARD buttons appearance - APPLICATION/HAMBURGER BUTTON -- visibility / popup -- buttons appearance on navigation toolbar / in Firefox titlebar TABS - custom tab appearance / old squared tabs - TABS TOOLBAR POSITION -- below titlebar / navigation and bookmarks toolbar / main content - TAB TEXT - colors/shadow/weight/style for default/active/hovered/unloaded tabs - MULTIROW / multi lined tabs - TAB TITLE IN FIREFOX TITLEBAR - empty tab favicon / custom tab loading animation / tab close icon settings - settings for DEFAULT TABS / other tab settings GENERAL UI - general settings / close icons / page context menu items - overflow menu / sidebar / findbar - SEARCHBAR -- general settings for default search -- OLD SEARCH + old search 'about:config' settings - MENUBARS bookmarks menu popup items TOOLBARS - ADDONS BAR (simulated bottoms toolbar) - GENERAL TOOLBAR settings -- toolbar context menu settings - MENUBAR settings - bookmarks toolbar settings - BOOKMARKS TOOLBAR - MULTIPLE LINES - AeroGlass TOOLBARS / WIN10 fix for GLASS8 - TOOLBAR TEXT MODES -- icons+text / text only LOCATION BAR / urlbar / awesomebar - general location bar tweaks / identity box / padlock icons icon/button tweaks - 'autocomplete popup' appearance / result item settings/appearance *************************************************************************************************/ /************************************************************************************************/ /* CONFIGURATION FILES - edit target files to change general values *****************************/ /************************************************************************************************/ /* GENERAL VARIABLES ****************************************************************************/ /* [!] set global variables for font and tab size options and more inside target file ***********/ @import "./config/general_variables.css"; /**/ /* COLOR VARIABLES FOR DEFAULT BROWSER THEME ONLY - MAIN UI - [only use one at a time] **********/ /* [!] set own colors for tabs & toolbars inside 'color_variables.css' or use available presets */ /* [!] enabled 'menubar_color.css' and 'statusbar_color.css' might be required in some cases ****/ @import "./config/color_variables.css"; /**/ /* <- default 'grey' colors */ /* @import "./config/color_variables_aero.css"; /**/ /* <- 'AeroBlue' colors (Win 7 Aero) */ /* @import "./config/color_variables_classic-grey.css"; /**/ /* <- 'classic grey' colors (Win Classic) */ /* @import "./config/color_variables_fx3.css"; /**/ /* <- 'Firefox 3-like' blueish colors */ /* @import "./config/color_variables_transparent.css"; /**/ /* <- (semi-)'transparent' colors */ /* @import "./config/color_variables_aeroglass.css"; /**/ /* <- 'AeroGlass' colors / Win10+Glass8 fix can be found in 'toolbars' area */ /* @import "./config/color_variables_deved.css"; /**/ /* <- based on 'Developer Edition' colors */ /* @import "./config/color_variables_noia4_grey.css"; /**/ /* <- based on 'Noia 4 themes' grey colors */ /* @import "./config/color_variables_noia4_lightgrey.css"; /**/ /* <- based on 'Noia 4 themes' lightgrey colors */ /* @import "./config/color_variables_noia4_dark.css"; /**/ /* <- based on 'Noia 4 themes' dark colors */ /* Darker "Dark" default theme - [only use one at a time] ***************************************/ /* @import "./css/toolbars/default_dark_theme_darker.css"; /**/ /* @import "./css/toolbars/default_dark_theme_darker_v2.css"; /**/ /* CUSTOM SCROLLBARS VARIABLES - EXPERIMENTAL ***************************************************/ /* [!] Might not work on every page! This issue is for Mozilla to solve. ************************/ /* [!] Not compatible with custom scrollbar JavaScript userChrome scripts. **********************/ /* [!] Custom size values only compatible with 'web content' scrollbars at the moment. **********/ /* [!] More info inside 'custom_scrollbar_appearance.css' file. *********************************/ /* @import "./config/custom_scrollbar_appearance.css"; /**/ /* <--- EXPERIMENTAL */ /************************************************************************************************/ /* TOOLBAR BUTTONS ******************************************************************************/ /************************************************************************************************/ /* icon appearance - [only use one at a time] (custom icons do not scale in HiDPI modes) ********/ @import "./css/buttons/icons_colorized.css"; /**/ /* @import "./css/buttons/icons_white_icons.css"; /**/ /* @import "./css/buttons/icons_custom_icons.css"; /**/ /* aka "Mozilla Mix" from CTB */ /* @import "./css/buttons/icons_custom_icons_fx1.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx2.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx3.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx3strata.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx12_colorized.css"; /**/ /* @import "./css/buttons/icons_custom_icons_crystal.css"; /**/ /* @import "./css/buttons/icons_custom_icons_firebird.css"; /**/ /* @import "./css/buttons/icons_custom_icons_kempelton.css"; /**/ /* @import "./css/buttons/icons_custom_icons_noia.css"; /**/ /* @import "./css/buttons/icons_custom_icons_ie6.css"; /**/ /* @import "./css/buttons/icons_custom_icons_seamonkey.css"; /**/ /* @import "./css/buttons/icons_custom_icons_old_chrome.css"; /**/ /* @import "./css/buttons/icons_custom_icons_old_osx.css"; /**/ /* @import "./css/buttons/icons_custom_icons_tango.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx45.css"; /**/ /* @import "./css/buttons/icons_custom_icons_fx45_inverted.css"; /**/ /* 'icons_custom_icons*.css' options: hide 'downloads buttons badge' ****************************/ /* @import "./css/buttons/icons_custom_icons_hide_downloads_badge.css"; /**/ /* 'classic' pre-Proton button padding **********************************************************/ @import "./css/buttons/classic_button_padding.css"; /**/ /* navigation toolbar buttons appearance - [only use one at a time] *****************************/ @import "./css/buttons/buttons_on_navbar_classic_appearance.css"; /**/ /* @import "./css/buttons/buttons_on_navbar_classic_appearance_v2.css"; /**/ /* @import "./css/buttons/buttons_on_navbar_classic_appearance_dark.css"; /**/ /* <--- good for Dark themes */ /* @import "./css/buttons/buttons_on_navbar_aero_appearance.css"; /**/ /* @import "./css/buttons/buttons_on_navbar_windows_classic_theme_appearance.css"; /**/ /* @import "./css/buttons/buttons_on_navbar_glass_appearance.css"; /* <--- good for Dark themes */ /* @import "./css/buttons/buttons_on_navbar_osx_appearance.css"; /**/ /* navigation toolbar buttons - button roundness (edit file to set different roundness) *********/ /* @import "./css/buttons/buttons_on_navbar_button_roundness.css"; /**/ /* squared buttons / button size - [only use one at a time] *************************************/ /* "rectangular shape" - normal size ************************************************************/ /* @import "./css/buttons/buttons_on_navbar_squared_buttons.css"; /**/ /* "normal shape" - large size (huge 48x48px buttons with 36x36px icons) ************************/ /* [!] not compatible with 'custom icon' options ************************************************/ /* [!] not compatible with 'custom back & forward buttons' appearance options *******************/ /* [!] not compatible with 'text mode' option ***************************************************/ /* [!] partly compatible with 'icons+text' option, if in 'compact mode' *************************/ /* @import "./css/buttons/buttons_on_navbar_huge_48px_size.css"; /**/ /* <--- EXPERIMENTAL */ /* smaller button spaces in 'compact' mode - 'Classic Toolbar Buttons' add-ons 'small' mode *****/ /* [!] 'compact mode' got hidden behind the about:config switch browser.compactmode.show ********/ @import "./css/buttons/buttons_on_navbar_more_compact_mode.css"; /**/ /* bookmarks toolbar - buttons appearance - [only use one at a time] ****************************/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css"; /**/ /* Windows only */ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance.css"; /**/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance_dark.css"; /**/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_aero_appearance.css"; /**/ /* bookmarks toolbar - bookmark items appearance - [only use one at a time] *********************/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance_items.css"; /**/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_classic_appearance_items_dark.css"; /**/ /* @import "./css/buttons/buttons_on_bookmarks_toolbar_aero_appearance_items.css"; /**/ /* menubar - toolbar button appearance **********************************************************/ /* @import "./css/buttons/buttons_on_menubar_toolbar_classic_appearance.css"; /**/ /* tabs toolbar - toolbar button appearance *****************************************************/ /* @import "./css/buttons/buttons_on_tabs_toolbar_classic_appearance.css"; /**/ /* <--- EXPERIMENTAL */ /* bookmarks menu button - 'button & popup' appearance ******************************************/ @import "./css/buttons/bookmarks_menu_button_localized_label_on_bookmarks_toolbar.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_showall_top_hidden.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_showall_bottom_hidden.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_sidebar_item_hidden.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_toolbar_item_hidden.css"; /**/ /* @import "./css/buttons/bookmarks_menu_button_popup_other_item_hidden.css"; /**/ /* other button settings ************************************************************************/ @import "./css/buttons/whatnew_button_always_hidden.css"; /**/ /* @import "./css/buttons/forward_button_hide_when_disabled.css"; /**/ /* @import "./css/buttons/back_and_forward_separated_history_popups.css"; /**/ /* @import "./css/buttons/back_and_forward_leftclick_history_popup_hidden.css"; /**/ /* @import "./css/buttons/zoom_buttons_hide_reset.css"; /**/ /* @import "./css/buttons/overflow_button_rotate_on_open.css"; /**/ /* CUSTOM BACK & FORWARD BUTTONS appearance - [only use one at a time] **************************/ /* @import "./css/buttons/custom_backforward_large_ff2.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3_strata.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3_strata_v2.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3_strata_orange.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ff3_strata_red.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ie8.css"; /**/ /* @import "./css/buttons/custom_backforward_large_ie9.css"; /**/ /* @import "./css/buttons/custom_backforward_large_kempelton.css"; /**/ /* @import "./css/buttons/custom_backforward_large_noia.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ff3.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ff3_strata.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ff3_strata_orange.css"; /**/ @import "./css/buttons/custom_backforward_small_ff3_strata_red.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ie8.css"; /**/ /* @import "./css/buttons/custom_backforward_small_ie9.css"; /**/ /* @import "./css/buttons/custom_backforward_small_kempelton.css"; /**/ /* @import "./css/buttons/custom_backforward_connected.css"; /**/ /* round */ /* @import "./css/buttons/custom_backforward_connected_to_location_bar.css"; /**/ /* round */ /* @import "./css/buttons/custom_backforward_connected_alt.css"; /**/ /* squared*/ /* @import "./css/buttons/custom_backforward_connected_to_location_bar_alt.css"; /**/ /* squared*/ /************************************************************************************************/ /* APPLICATION / HAMBURGER / MAIN MENU BUTTON ***************************************************/ /************************************************************************************************/ /* application/hamburger button hidden - disable all other appbutton options when using this ****/ /* @import "./css/appbutton/appbutton_hidden.css"; /**/ /* application/hamburger button popup ***********************************************************/ @import "./css/appbutton/appbutton_popup_icons.css"; /**/ @import "./css/appbutton/appbutton_popup_icons_colorized.css"; /**/ /* @import "./css/appbutton/appbutton_popup_sync_hidden.css"; /**/ /* @import "./css/appbutton/appbutton_popup_logins_and_passwords_hidden.css"; /**/ /************************************************************************************************/ /* Application / hamburger / main menu button on navigation toolbar *****************************/ /************************************************************************************************/ /* [!] disable all 'button in Firefox titlebar' options for 'button on navigation toolbar' options to work properly **********************************/ /* @import "./css/appbutton/appbutton_on_navbar_start_position.css"; /**/ /* button color - [only use one at a time] ******************************************************/ /* @import "./css/appbutton/appbutton_on_navbar_color_autocolor.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_autocolor57p.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_orange.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_aurora.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_nightly.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_deved57p.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_nightly57p.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_color_palemoon.css"; /**/ /* button icon - [only use one at a time] *******************************************************/ /* @import "./css/appbutton/appbutton_on_navbar_icon_white.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_icon_dark.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_icon_grey.css"; /**/ /* @import "./css/appbutton/appbutton_on_navbar_icon_browser_logo.css"; /**/ /* button label (show label besides icon) *******************************************************/ /* @import "./css/appbutton/appbutton_on_navbar_icon_and_label.css"; /**/ /************************************************************************************************/ /* Application / hamburger / main menu button in Firefox titlebar *******************************/ /************************************************************************************************/ /* [!] disable all 'button on navigation toolbar' options for 'button in Firefox titlebar' options to work properly ************************************/ /* button in titlebar - [only use one at a time] ************************************************/ /*@import "./css/appbutton/appbutton_in_titlebar.css"; /**/ /* <-- label only */ @import "./css/appbutton/appbutton_in_titlebar_icon_only.css"; /**/ /* for 'appbutton in titlebar icon only' - [only use one at a time] *****************************/ /* @import "./css/appbutton/appbutton_in_titlebar_icon_only_dark.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_icon_only_grey.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_icon_only_browser_logo.css"; /**/ /* for 'appbutton in titlebar icon only' ********************************************************/ /* @import "./css/appbutton/appbutton_in_titlebar_label_and_icon.css"; /**/ /* macOS fix - appbutton in titlebar gets moved to the right ************************************/ /* @import "./css/appbutton/appbutton_in_titlebar_macOS_fix.css"; /**/ /* button color - [only use one at a time] ******************************************************/ @import "./css/appbutton/appbutton_in_titlebar_autocolor.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_autocolor57p.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_transparent.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_semi_transparent.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_aurora.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_nightly.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_deved57p.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_nightly57p.css"; /**/ /* @import "./css/appbutton/appbutton_in_titlebar_palemoon.css"; /**/ /************************************************************************************************/ /* TABS - appearance and position ***************************************************************/ /************************************************************************************************/ /* custom tab appearance - [only use one at a time] *********************************************/ @import "./css/tabs/classic_squared_tabs.css"; /**/ /* @import "./css/tabs/classic_squared_tabs_australized.css"; /**/ /* @import "./css/tabs/default_tabs_enhanced.css"; /**/ /* @import "./css/tabs/default_tabs_photon.css"; /**/ /* Fx 57-88 squared tabs */ /* custom tab colors are set inside color_variables***.css file(s) ******************************/ /************************************************************************************************/ /* TABS TOOLBAR POSITION (below titlebar / below navigation toolbar / below main content) *******/ /************************************************************************************************/ /* [only use one at a time] - BELOW TITLEBAR or BELOW NAVIGATION BAR or BELOW MAIN CONTENT ******/ /* - TABS BELOW TITLEBAR (Fx56-like tabs position) **********************************************/ /* @import "./css/tabs/tabs_below_titlebar_above_navigation_toolbar.css"; /**/ /* - TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS / TABS NOT ON TOP *****************************/ /* [!] Note: only 'alt' works with multi-tab lines option. **************************************/ /* [!] Note: might require overriding url bars 'selection color' --> see corresponding area *****/ /* - Windows/Linux ******************************************************************************/ @import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/ /* - macOS **************************************************************************************/ /* @import "./css/tabs/tabs_below_navigation_toolbar_macOS.css"; /**/ /* - Alternative for multi-lined tabs (Glitches with inactive menubar!) ******************/ /* <- use this for multiple tab lines support */ /* @import "./css/tabs/tabs_below_navigation_toolbar_alt.css"; /**/ /* @import "./css/tabs/tabs_below_navigation_toolbar_alt_force_hidden_menubar.css"; /**/ /* no menubar when OS titlebar is active */ /* @import "./css/tabs/tabs_below_navigation_toolbar_alt_macOS.css"; /**/ /* - TABS BELOW MAIN CONTENT (TABS ON BOTTOM) - *************************************************/ /* [!] SUPPORT THREAD: https://github.com/aris-t2/customcssforfx/issues/33 **********************/ /* [!] not compatible to 'tabs toolbar - multiple tab lines' option *****************************/ /* - Windows/Linux - ****************************************************************************/ /* @import "./css/tabs/tabs_below_main_content.css"; /**/ /* - macOS - ************************************************************************************/ /* @import "./css/tabs/tabs_below_main_content_macOS.css"; /**/ /* - MOVE NAVIGATION TOOLBAR TO HIGHER POSITON (for tabs not on top) - [only use one at a time] */ /* @import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon.css"; /**/ /* <--- EXPERIMENTAL */ /* @import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton.css"; /**/ /* <--- EXPERIMENTAL */ /* @import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon_with_appbutton_icon_only.css"; /**/ /* <--- EXPERIMENTAL */ /* TAB BACKGROUND COLORS for default/active/hovered/unloaded tabs and 'new tab' tab *************/ /* edit target file to set own custom colors ****************************************************/ /* @import "./config/custom_tab_color_settings.css"; /**/ /* TAB TEXT colors/shadow/weight/style for default/active/hovered/unloaded tabs *****************/ /* edit target file to set own custom colors ****************************************************/ /* @import "./config/custom_tab_text_settings.css"; /**/ /* MULTIROW / multi lined tabs - [only use one at a time] - EXPERIMENTAL ************************/ /* [!] SUPPORT THREAD: https://github.com/aris-t2/customcssforfx/issues/39 **********************/ /* [!] BUG: dragging tabs does not work with multi lined tabs ***********************************/ /* [!] not compatible with 'tabs toolbar - below main content' option ***************************/ /* [!] only compatible with 'tabs below navigation toolbar alt version' *************************/ /* @import "./css/tabs/tabs_multiple_lines.css"; /**/ /* @import "./css/tabs/tabs_multiple_lines_force_newtab_button_visibility.css"; /**/ /* restore empty/missing tab favicon - [only use one at a time] *********************************/ @import "./css/tabs/missing_tab_favicon_restored_default.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_globe_v2.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_sheet.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_dotted.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_dotted_white.css"; /**/ /* @import "./css/tabs/missing_tab_favicon_restored_brand_logo.css"; /**/ /* custom tab loading animation - [only use one at a time] **************************************/ /* @import "./css/tabs/tab_throbber_blue_fx56.css"; /**/ /* known from Fx 56 */ /* @import "./css/tabs/tab_throbber_blue.css"; /**/ /* @import "./css/tabs/tab_throbber_grey_classic.css"; /**/ /* @import "./css/tabs/tab_throbber_green.css"; /**/ /* @import "./css/tabs/tab_throbber_orange_ubuntu.css"; /**/ /* tab close icon settings - [only use one at a time] *******************************************/ @import "./css/tabs/tab_close_always_visible.css"; /**/ /* @import "./css/tabs/tab_close_on_active_tab_only.css"; /**/ /* @import "./css/tabs/tab_close_show_on_hover_only.css"; /**/ /* @import "./css/tabs/tab_close_hidden.css"; /**/ /* @import "./css/tabs/tab_close_hidden_for_only_one_visible_tab.css"; /**/ /* @import "./css/tabs/tab_close_at_tabs_start.css"; /**/ /* @import "./css/tabs/tab_close_icon_size.css"; /**/ /* tab title - [only use one at a time] *********************************************************/ /* @import "./css/tabs/tab_title_left.css"; /**/ /* @import "./css/tabs/tab_title_centered.css"; /**/ /* @import "./css/tabs/tab_title_right.css"; /**/ /* DEFAULT TABS - use only, if 'classic squared tabs' are disabled ******************************/ /* tab line settings - [only use one at a time] *************************************************/ /* @import "./css/tabs/default_tabs_no_tab_line.css"; /**/ /* @import "./css/tabs/default_tabs_tab_line_red_for_unloaded_tabs.css"; /**/ /* @import "./css/tabs/default_tabs_tab_line_purple_in_private_mode.css"; /**/ /* other tab settings ***************************************************************************/ @import "./css/tabs/tab_icon_colors.css"; /**/ /* @import "./css/tabs/default_tabs_reduce_spaces.css"; /**/ /* @import "./css/tabs/tabs_fully_squared.css"; /**/ /* @import "./css/tabs/tab_audio_icon.css"; /**/ /* @import "./css/tabs/tab_audio_icon_colorized.css"; /**/ /* @import "./css/tabs/tabs_container_indicator_for_classic_squared_tabs.css"; /**/ /* @import "./css/tabs/newtab_tab_size_equals_tab_size.css"; /**/ /* @import "./css/tabs/newtab_button_always_visible.css"; /**/ /* @import "./css/tabs/tab_icon_inactive_tabs_lower_opacity.css"; /**/ /* @import "./css/tabs/tab_icon_unloaded_tabs_lower_opacity.css"; /**/ /* @import "./css/tabs/tab_maxwidth.css"; /**/ /* @import "./css/tabs/tab_titles_remove_blur.css"; /**/ /* @import "./css/tabs/alltabs_button_always_visible.css"; /**/ /* <--- hidden, if multiple tab rows are used */ /* @import "./css/tabs/pinnedtab_empty_favicon_hidden.css"; /**/ /* [!] edit target file to select which items to hide *******************************************/ /* @import "./css/tabs/tab_context_menuitems_visibility.css"; /**/ /************************************************************************************************/ /* GENERAL UI ***********************************************************************************/ /************************************************************************************************/ @import "./css/generalui/private_mode_indicator_hidden.css"; /**/ @import "./css/generalui/bookmark_icons_colorized.css"; /**/ /* @import "./css/generalui/bookmarks_smaller_more_bookmarks_icon.css"; /**/ /* @import "./css/generalui/send_to_device_menuitems_hidden.css"; /**/ /* @import "./css/generalui/set_as_desktop_background_menuitems_hidden.css"; /**/ /* @import "./css/generalui/increase_ui_font_size.css"; /**/ /* @import "./css/generalui/flex_space_on_navbar_replace_with_separator.css"; /**/ /* @import "./css/generalui/statusbar_color.css"; /**/ /* @import "./css/generalui/classic_drop_indicator.css"; /**/ /* @import "./css/generalui/notification_old_size.css"; /**/ /* overflow menu - [only use one at a time] *****************************************************/ /* @import "./css/generalui/overflow_menu_remove_text.css"; /**/ /* @import "./css/generalui/overflow_menu_horizontal_remove_text.css"; /**/ /* context menu / menupopup / panel appearance (not for macOS) **********************************/ /* [!] affects context menus, popup menus and panel menus on Windows 10 *************************/ /* [!] affects panel menus on Windows 7 and 8 and on Linux **************************************/ @import "./css/generalui/popup_compact_menus.css"; /**/ @import "./css/generalui/popup_compact_menus_squared.css"; /**/ @import "./css/generalui/popup_menus_space_before_label.css"; /**/ /* @import "./css/generalui/popup_menus_menu_background.css"; /**/ /* other context menu settings ******************************************************************/ /* @import "./css/generalui/popup_items_hover_appearance_aero.css"; /**/ /* @import "./css/generalui/popup_animation_fade_time_reduced.css"; /**/ /* @import "./css/generalui/popup_menupopup_with_scrollbars.css"; /**/ /* <- this removes tab scroll buttons, no CSS fix possible atm */ /* page context menu items: 'back', 'forward', 'reload', 'stop', 'bookmarks' ********************/ /* @import "./css/generalui/context_bfrsb_icons_colorized.css"; /**/ /* menuitem labels - [only use one at a time] ***************************************************/ @import "./css/generalui/context_bfrsb_labels_without_icons.css"; /**/ /* @import "./css/generalui/context_bfrsb_labels_with_icons.css"; /**/ /* sidebar **************************************************************************************/ /* @import "./css/generalui/sidebar_items_compact.css"; /**/ /* @import "./css/generalui/sidebar_header_icons.css"; /**/ /* adds icons to the popup */ /* @import "./css/generalui/sidebar_header_icons_colorized.css"; /**/ /* @import "./css/generalui/sidebar_header_lwtheme.css"; /**/ /* sidebar dimensions - [only use one at a time] ************************************************/ /* @import "./css/generalui/sidebar_show_on_hover.css"; /**/ /* @import "./css/generalui/sidebar_width_unrestricted.css"; /**/ /* sidebar appearance - [only use one at a time] ************************************************/ /* @import "./css/generalui/sidebar_appearance_grey.css"; /**/ /* @import "./css/generalui/sidebar_appearance_grey_v2.css"; /**/ /* @import "./css/generalui/sidebar_appearance_dark.css"; /**/ /* @import "./css/generalui/sidebar_appearance_dark_v2.css"; /**/ /* @import "./css/generalui/sidebar_appearance_lwtheme_bright.css"; /**/ /* @import "./css/generalui/sidebar_appearance_lwtheme_dark.css"; /**/ /* FINDBAR **************************************************************************************/ /* @import "./css/generalui/findbar_on_top.css"; /**/ /* @import "./css/generalui/findbar_close_at_findbars_start.css"; /**/ /* @import "./css/generalui/findbar_compact.css"; /**/ /* close icons for general ui and tabs - [only use one at a time] *******************************/ /* @import "./css/generalui/close_icon_windows7.css"; /**/ /* @import "./css/generalui/close_icon_windows7inverted.css"; /**/ /* @import "./css/generalui/close_icon_windows7v2.css"; /**/ /* @import "./css/generalui/close_icon_gchrome.css"; /**/ /* @import "./css/generalui/close_icon_red.css"; /**/ /* @import "./css/generalui/close_icon_windows10.css"; /**/ /* @import "./css/generalui/close_icon_windows10inverted.css"; /**/ /* @import "./css/generalui/close_icon_windows10red.css"; /**/ /* @import "./css/generalui/close_icon_windows10redv2.css"; /**/ /* @import "./css/generalui/close_icon_firefox3.css"; /**/ /* SEARCHBAR ************************************************************************************/ @import "./css/generalui/searchbar_glassplus_indicator_hidden.css"; /**/ /* @import "./css/generalui/searchbar_go_button_hidden.css"; /**/ /* searchbar popup ******************************************************************************/ /* @import "./css/generalui/searchbar_popup_current_engine_hidden.css"; /**/ /* searchbar popup - search engine settings - [only use one at a time] **************************/ /* @import "./css/generalui/searchbar_popup_engines_hidden.css"; /**/ /* @import "./css/generalui/searchbar_popup_engines_show_labels.css"; /**/ /* @import "./css/generalui/searchbar_popup_engines_show_labels_scrollbars.css"; /**/ /* MENUBARS bookmarks popup (not compatible to macOS/Linux) *************************************/ /* @import "./css/generalui/menubar_bookmarks_popup_bookmark_page_item_hidden.css"; /**/ /* @import "./css/generalui/menubar_bookmarks_popup_subscribe_item_hidden.css"; /**/ /* @import "./css/generalui/menubar_bookmarks_popup_toolbar_item_hidden.css"; /**/ /* @import "./css/generalui/menubar_bookmarks_popup_other_item_hidden.css"; /**/ /************************************************************************************************/ /* TOOLBARS *************************************************************************************/ /************************************************************************************************/ /* ADDON BAR - simulate add-on bar by moving bookmarks toolbar to the bottom ********************/ /* [!] move 'Bookmarks Toolbar Items' to navigation bar to get a top toolbar with bookmarks *****/ /* [!] not compatible to 'bookmarks toolbar - multiple lines' option ****************************/ /* [!] not compatible to 'bookmarks toolbar autohide' option ************************************/ /* [!] SUPPORT THREAD: https://github.com/aris-t2/customcssforfx/issues/73 **********************/ /* @import "./css/toolbars/addonbar_move_bookmarks_toolbar_to_bottom.css"; /**/ /* <--- EXPERIMENTAL */ /* @import "./css/toolbars/addonbar_move_bookmarks_toolbar_to_bottom_tabs_on_bottom_compatibility.css"; /**/ /* <--- EXPERIMENTAL */ /* @import "./css/toolbars/addonbar_content_on_the_right.css"; /**/ /* <--- EXPERIMENTAL */ /* @import "./css/toolbars/addonbar_status_in_addonbar.css"; /**/ /* <--- EXPERIMENTAL */ /* @import "./css/toolbars/addonbar_fullscreen_autohide.css"; /**/ /* <--- EXPERIMENTAL */ /* [!] create additional toolbar for 'bookmarks toolbar items' on navigation toolbar ************/ /* @import "./css/toolbars/addonbar_extra_bookmarks_toolbar_below_navbar.css"; /**/ /* <--- EXPERIMENTAL */ /* GENERAL TOOLBAR SETTINGS *********************************************************************/ /* top toolbar colors - [only use one at a time] ************************************************/ /* @import "./css/toolbars/top_toolbar_OS_accent_colors.css"; /**/ /* restore window accent color managed by the OS */ /* @import "./css/toolbars/top_toolbar_colors.css"; /**/ /* override tabs toolbar / titlebar colors forced by Proton UI */ /* other toolbar settings ***********************************************************************/ @import "./css/toolbars/toolbars_old_padding.css"; /**/ @import "./css/toolbars/tabs_toolbar_adjustments.css"; /**/ /* @import "./css/toolbars/tabs_toolbar_remove background_fog_win7.css"; /**/ /* @import "./css/toolbars/tabs_toolbar_adjustments_macOS_fix.css"; /**/ /* <-- macOS fix */ /* edit target file to select which items to hide ***********************************************/ /* @import "./css/toolbars/toolbar_context_menuitems_visibility.css"; /**/ /* MENUBAR **************************************************************************************/ /* @import "./css/toolbars/menubar_fog_hidden.css"; /**/ /* @import "./css/toolbars/menubar_alternative_menu_hover_color.css"; /**/ /* @import "./css/toolbars/menubar_in_fullscreen_mode.css"; /**/ /* @import "./css/toolbars/menubar_in_fullscreen_mode_alt.css"; /**/ /*'tabs not on top alt' */ /* menubar color - ******************************************************************************/ /* @import "./css/toolbars/menubar_color.css"; /**/ /* BOOKMARKS TOOLBAR ****************************************************************************/ @import "./css/toolbars/bookmarks_toolbar_old_height.css"; /**/ /* @import "./css/toolbars/bookmarks_toolbar_fixed_width.css"; /**/ /* @import "./css/toolbars/bookmarks_toolbar_autohide.css"; /**/ /* @import "./css/toolbars/bookmarks_toolbar_bookmark_labels_hidden.css"; /**/ /* @import "./css/toolbars/bookmarks_toolbar_in_fullscreen_mode.css"; /**/ /* [!] simulate second bookmarks toolbar while "Bookmarks Toolbar Items" element is on nav-bar **/ /* @import "./css/toolbars/bookmarks_toolbar_simulate_second_bm_toolbar.css"; /**/ /* BOOKMARKS TOOLBAR above navigation toolbar - [only use one at a time] ************************/ /* @import "./css/toolbars/bookmarks_toolbar_above_navigation_toolbar.css"; /**/ /* @import "./css/toolbars/bookmarks_toolbar_above_navigation_toolbar_when_tab_not_top.css"; /**/ /* BOOKMARKS TOOLBAR - MULTIPLE LINES - [only use one at a time] ********************************/ /* [!] the amount of visible bookmark items is limited internally to ~90-110 bookmarks **********/ /* [!] not compatible to 'bookmarks toolbar autohide' option ************************************/ /* [!] not compatible to 'simulated second bookmarks toolbar' option ****************************/ /* [!] not compatible to 'simulated addon-bar' option *******************************************/ /* [!] SUPPORT THREAD: https://github.com/aris-t2/customcssforfx/issues/99 **********************/ /* @import "./css/toolbars/bookmarks_toolbar_multiple_lines.css"; /**/ /* <--- EXPERIMENTAL */ /* TOOLBAR COLORS *******************************************************************************/ @import "./css/toolbars/general_toolbar_colors.css"; /**/ /* @import "./css/toolbars/tab_toolbar_colors_force_menubar_color.css"; /**/ /* AeroGlass TOOLBARS - separated - set per toolbar / WIN10 fix for GLASS8 **********************/ /* @import "./css/toolbars/general_toolbar_colors_navigation_toolbar_aeroglass.css"; /**/ /* @import "./css/toolbars/general_toolbar_colors_bookmarks_toolbar_aeroglass.css"; /**/ /* @import "./css/toolbars/general_toolbar_colors_tabs_toolbar_aeroglass.css"; /**/ /* Windows 10 fix for Glass8 - Glass8 required for 'Windows 7'-like window transparency */ /* @import "./css/toolbars/general_toolbar_colors_aeroglass_windows10_glass8.css"; /**/ /* <--- EXPERIMENTAL */ /* TOOLBAR TEXT MODES - [only use one at a time] ************************************************/ /* @import "./css/toolbars/toolbar_mode_icons_and_text.css"; /**/ /* @import "./css/toolbars/toolbar_mode_icons_and_text_macOS.css"; /**/ /* -> also offers alternative appearance on Linux */ /* @import "./css/toolbars/toolbar_mode_text.css"; /**/ /* @import "./css/toolbars/toolbar_mode_text_macOS.css"; /**/ /* -> also offers alternative appearance on Linux */ /************************************************************************************************/ /* LOCATION BAR / MEGABAR - Settings for both 'about:config > browser.urlbar.update1' cases *****/ /************************************************************************************************/ /* remove color formatting of the url: about:config > browser.urlbar.formatting.enabled > false */ /* @import "./css/locationbar/compact_mode_reduce_fontsize.css"; /**/ /* identity box / page identity button **********************************************************/ /* @import "./css/locationbar/identitybox_colors.css"; /**/ /* @import "./css/locationbar/identitybox_labels_hidden.css"; /**/ /* padlock icons in identity box / page identity button - [only use one at a time] **************/ /* @import "./css/locationbar/identitybox_padlock_icon_classic.css"; /**/ /* @import "./css/locationbar/identitybox_padlock_icon_classic2.css"; /**/ /* @import "./css/locationbar/identitybox_padlock_icon_modern.css"; /**/ /* @import "./css/locationbar/identitybox_padlock_icon_modern2.css"; /**/ /* @import "./css/locationbar/identitybox_padlock_icon_hidden.css"; /**/ /* additional icons/buttons and tweaks for third party page action buttons **********************/ /* @import "./css/locationbar/reader_alternative_icon.css"; /**/ /* @import "./css/locationbar/popup_blocked_button_hidden.css"; /**/ /* @import "./css/locationbar/zoom_button_hidden.css"; /**/ /* @import "./css/locationbar/go_button_in_location_bar_hidden.css"; /**/ /* star button / bookmarks star *****************************************************************/ /* @import "./css/locationbar/starbutton_popup_preview_image_hidden.css"; /**/ /* alternative yellow star icon - [only use one at a time] **************************************/ /* @import "./css/locationbar/starbutton_alternative_icon.css"; /**/ /* @import "./css/locationbar/starbutton_alternative_icon_v2.css"; /**/ /* general popup/results settings ***************************************************************/ @import "./css/locationbar/ac_popup_result_font_size.css"; /**/ /* @import "./css/locationbar/ac_popup_firefox_background_logo.css"; /**/ /* selection color / force selection color on themes without predefined selection color *********/ /* @import "./css/locationbar/selection_color_for_dark_bg.css"; /**/ /* @import "./css/locationbar/selection_color_for_bright_bg.css"; /**/ /************************************************************************************************/ /* MEGABAR - settings for 'megabar' & 'megabar popup' *******************************************/ /************************************************************************************************/ @import "./css/locationbar/megabar_expanding_breakout_disabled.css"; /**/ /* @import "./css/locationbar/megabar_disable_openviewonfocus.css"; /**/ /* @import "./css/locationbar/urlbar_border_roundness.css"; /**/ @import "./css/locationbar/urlbar_restore_visible_border.css"; /**/ /* megabar/location bar background color - [only use one at a time] ******************************/ /* @import "./css/locationbar/urlbar_background_color.css"; /**/ /* default white background color */ /* @import "./css/locationbar/urlbar_background_color_dark.css"; /**/ /* force dark color for e.g. dark lw-themes */ /* popup content order/appearance - [only use one at a time] ************************************/ @import "./css/locationbar/ac_popup_megabar_title_and_url_50percent_width.css"; /**/ /* @import "./css/locationbar/ac_popup_megabar_url_and_title_50percent_width.css"; /**/ /* @import "./css/locationbar/ac_popup_megabar_title_and_url_two_lines.css"; /**/ /* @import "./css/locationbar/ac_popup_megabar_url_only.css"; /**/ /* result menuitem settings/appearance **********************************************************/ @import "./css/locationbar/ac_popup_megabar_compact_results.css"; /**/ /* @import "./css/locationbar/ac_popup_megabar_searchwith_and_visit_items_hidden.css"; /**/ /* @import "./css/locationbar/ac_popup_megabar_suggest_label_hidden.css"; /**/ /* @import "./css/locationbar/ac_popup_megabar_search_engines_hidden.css"; /**/ /* @import "./css/locationbar/ac_popup_megabar_result_highlighting_aero.css"; /**/ /* @import "./css/locationbar/ac_popup_megabar_result_separator.css"; /**/ /************************************************************************************************/ /************************************************************************************************/ /* Create a new file "my_userChrome.css" and add own/custom code to it. *************************/ @import "./my_userChrome.css"; /**/ /************************************************************************************************/ /************************************************************************************************/ /************************************************************************************************/ ```
plomari commented 2 years ago

@Aris-t2

Thanks. I tried setting border-radius to 0px, which should have made buttons rectangular, but nothing changed. Now that I think about it, this was about "native" form elements within websites, which maybe be a special case. Maybe it's not so important after all.

Custom scrollbars (the JS) seem rather intrusive so I didn't test them yet.

nollinvoyd commented 2 years ago

@Aris-t2

Make sure everything is set to 100% size/dpi/scale-wise, so we have the same base while testing.

Are you referring to the Windows scaling settings, or some Firefox setting?

Maybe a new browser profile will help while testing.

I tried that, no difference.

All the images I posted are proportional to one another. The only thing I could think of was to image the whole page, not just the menus:

Disabled "@import "./css/generalui/popup_compact_menus.css"

css99 no compact

Enabled "@import "./css/generalui/popup_compact_menus.css"

css1111 compact

Disabled "@import "./css/generalui/popup_compact_menus.css"

css1010 no compact

Enabled "@import "./css/generalui/popup_compact_menus.css"

css1212 compact

I also posted them at an image hosting site, if that helps. Much smaller scale, but proportionally, they are the same.

[url=https://postimg.cc/ppFFrZSy][img]https://i.postimg.cc/ppFFrZSy/css3.png[/img][/url]

[url=https://postimg.cc/jWcG0yQS][img]https://i.postimg.cc/jWcG0yQS/css5.png[/img][/url]

[url=https://postimg.cc/14Q9ZKQy][img]https://i.postimg.cc/14Q9ZKQy/css4.png[/img][/url]

[url=https://postimg.cc/cvMzwfzB][img]https://i.postimg.cc/cvMzwfzB/css6.png[/img][/url]

BoomerangAide commented 2 years ago

@nollinvoyd I had noticed that my bookmark menu entries were bigger on Firefox 91 than on 78 ESR for a while, but I had not done anything until now. But your messages reminded me of it, so I had a look. I realized that in 78, menus had a height of 22, and 0 padding at top and bottom, and on 91, they had a height of 18, but padding of 3 on top and bottom (resulting in a size taken of 2 more than the original). So for it to take the same height, I put that in my custom css file:

menupopup > menuitem,
menupopup > menu {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

At first I put 0, but it was too much compact for me, but you may be able to experiment with that maybe? Unless it's not what you were talking about.

nollinvoyd commented 2 years ago

@BoomerangAide

Thanks!!. 0px, that's perfect!!

@Aris-t2

You didn't mention my toolbar problem. Is there a chance it can be fixed?

nollinvoyd commented 2 years ago

Firefox 93, CustomCSSforFx v4.1.0v3

I jumped from v3.3.2.1, to v4.1.0v3

Issue #1:

v3.3.2.1 toolbar display: Navbar partially obscures tab bar

css1

v4.1.0v3 toolbar display: Just the opposite, Navbar partially obscures menubar

css2

I just discovered that if I go to "Customize Toolbar", and enable "Title Bar", the navbar no longer overlaps the menubar

titlebar

Of course, the problem is I don't want the Title Bar visible.

I also fund that if I enable "@import "./css/tabs/tabs_below_navigation_toolbar_higher_navbar_positon.css", the navbar disappears, but now the tab bar overlaps the menubar

menubar2

nollinvoyd commented 2 years ago

@Aris-t2

Update: I decided to start from scratch to see precisely when the problem starts. The following are results from a fresh profile with only transferred sessions files and the default CustomCSSforFx version 4.1.0 added. No about:config tweaks.

The results match what I found earlier, with the custom profile.

My toolbars with chrome disabled

early profile default no chrome

My toolbars with Chrome enabled, the default CustomCSSforFx 4.1.0, no alterations

early chrome default

The overlapping problem occurs when only one CustomCSSforFx alteration is made, enabling @import "./css/tabs/tabs_below_navigation_toolbar.css"

early chrome one alteration

Aris-t2 commented 2 years ago

I looked into your toolbar issue. Thise code inside tabs_below_navigation_toolbar.css causes the overlapping:

#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #titlebar,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
  height: 26px;
}

Add this to tweak titlebars height in maximized mode:

#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
  height: 40px !important;
}

It does not seem like the menubar is a good area to place items anymore. I had to add a few "flexible spaces" for it to stop overlapping with captions buttons.

#main-window[tabsintitlebar] #toolbar-menubar {
  padding-inline-end: 140px;
}
nollinvoyd commented 2 years ago

@Aris-t2

Add this to tweak titlebars height in maximized mode:

#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) #titlebar {
  height: 40px !important;
}

It does not seem like the menubar is a good area to place items anymore. I had to add a few "flexible spaces" for it to stop overlapping with captions buttons.

#main-window[tabsintitlebar] #toolbar-menubar {
  padding-inline-end: 140px;
}

This is what happens when I add both of those bits of css. No overlap, but huge space gap.

wide menubar2

When I eliminate the "flexible space" stuff, the gap is gone :)

wide menubar

But now we have an excess of menubar height. Can we adjust for that?

Jgr9 commented 2 years ago

Unfortunately, I try not to update as much as possible because it's a pain in the ass, but I have a couple minor things I'd like to fix on my end.

The code I have to stop the URL bar / megabar from outlining blue when the cursor is in it (which happens automatically on a new tab) is no longer working.

And my Findbar (which is on the bottom) text box (and I think the checkboxes) don't have a white background / have my theme background - and the textbox has no outline at all until clicked on. Getting the white background for at least the textbox would be nice, but I would leave the colored outline when the cursor is in it because it changes to red when it doesn't find anything.

Aris-t2 commented 2 years ago

@nollinvoyd

Instead of the above code, test this one:

#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar .toolbarbutton-1 .toolbarbutton-icon {
  padding: 0 !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar #searchbar {
  min-height: unset !important;
}

#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar #search-container {
  padding-block: 1px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar {
  padding-inline-end: 140px;
}

@Jgr9 

#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
#searchbar:focus-within {
  outline: unset !important;
  outline-offset: unset !important;
  outline-color: unset !important;
  border-color: unset !important;
  border: 1px solid var(--arrowpanel-border-color) !important;
}

#urlbar[focused="true"] > #urlbar-background,
#searchbar:focus-within {
  box-shadow: unset !important;
}

#urlbar[open] > #urlbar-background {
  box-shadow: unset !important;
}

Findbars input gets managed by the theme. 

input.findbar-textbox:-moz-lwtheme {
  background-color: white !important;
  color: black !important;
}
Aris-t2 commented 2 years ago

@nollinvoyd 4.1.1pre1 should take care of your toolbar issues.

@BoomerangAide 4.1.1pre1 now offers the alternative tracking protection icon as an own option.

nollinvoyd commented 2 years ago

@Aris-t2

I just tried 4.1.1pre1. Am I mistaken, or are there only two file changes, not including "tabs_below_navigation_toolbar.css", and no userchrome.css or usercontent.css changes?

This is what things look like with the latest "tabs_below_navigation_toolbar.css", which I assume is unchanged since v4.1.0?

latest tabs below nav

Aris-t2 commented 2 years ago

The changes are listed in the changelog. A couple of files got updated.

Most important ones to fix your issues are tabs_below_navigation_toolbar.css and the new one searchbar_on_menubar_fix.css, which is enabled by default inside userChrome.css.

tabs_below_navigation_toolbar.css added the right space for menubar.

searchbar_on_menubar_fix.css decreases button and searchbar height on menubar.

Besides that I have no idea how to help you solving the issues and glitches you have. The above files fixed everything I could reproduce.

nollinvoyd commented 2 years ago

@Aris-t2

Sorry I didn't catch this earlier. I think I found the problem.

A while back you crafted a way for me to make the min-max-close buttons smaller, so they would take up less space

.titlebar-button {
  padding: 0 !important; /* no more wasting space */
  color: black !important; /* set own color  */
}+ toolbarbutton#alltabs-button {

#tabContextMenu #context_bookmarkTab {

display: none !important;

}

But now, If I use that code, it causes that gap.

min-max-close2

If I eliminate that code, the default min-max-close buttons close the gap

min-max-close3

Can we alter that min-max-close buttons code so that it works with no gap?

Aris-t2 commented 2 years ago

The gap before min/max/close is controlled by

#main-window[tabsintitlebar] #toolbar-menubar {
  padding-inline-end: 140px !important;
}

Replace the 140 with a lower value.

Besides that, something in your config still causes the whole toolbar to look wrong. It should look like this: image

nollinvoyd commented 2 years ago

@Aris-t2

Thanks!

Replace the 140 with a lower value.

Changed it to 0px. That takes care of the gap, toolbars no longer overlap, but what still looks wrong to you?

good toolbars

Aris-t2 commented 2 years ago

The issues I see on your screenshot:

If this is fine for you, its OK.

phantomflanflinger commented 2 years ago

I'm still using FF88 because of what 89 did. To get to the point, can the current FF version look like my FF88:

Thanks for all your work.

nollinvoyd commented 2 years ago

@Aris-t2

The issues I see on your screenshot:

* the icon inside main menu button (dark fx icon) is pushed to the top edge of the screen

* searchbars bottom border is covered by navigation toolbar

* buttons/icons on menubar seem to touch navigation toolbar items

If this is fine for you, its OK.

Is it possible If I wanted to get a bit more height for the menubar

SlaveOfCats commented 2 years ago

I finally bit the bullet and upgraded from Fx 88 to 93. I've been able to tweak the new custom CSS to look the way I want, but one of my addons has decided to put an icon in the urlbar that wasn't there in Fx 88. Can anyone give me some CSS to hide it? The addon is Firefox Multi-Account Containers. Thanks in advance.

ghost commented 2 years ago

@phantomflanflinger You can download Firefox Nightly and test it with the customcssforfx.