search

Aris-t2 / CustomCSSforFx

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

[!] GENERAL discussion, feedback, questions belong here! (v9) #241

Closed Aris-t2 closed 4 years ago

Aris-t2 commented 4 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 and https://github.com/Aris-t2/CustomCSSforFx/issues/211.

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

Aris-t2 commented 4 years ago

The "appbutton on titlebar" option is disabled by default on recent CustomCSSforFx releases, but you can enable it: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L346

Fx71+ will require additional files to be enabled and the button looses its automatic adjustments depending toolbar configuration (titlebar, menubar etc.).

Jagick commented 4 years ago

I actually managed to fix it myself after looking through the code and noticing that. Thank you for the prompt reply though! I'll keep that in mind for future releases.

Edit: There is actually one more question. I never paid much attention before but I've noticed that my bookmark menu on the right seem to be missing its "Bookmark this page" button while the Bookmarks tab of the menu bar on the top left still retains its own. I didn't see anything for this in the code so is that just something that was removed by Mozilla at some point, similarly to how the "New Tab" button was in the older Appbutton drop down menu?

Thank you again for your assistance. I've added another screenshot just for reference (with personal info omitted.) bookmark this page

bendover22 commented 4 years ago

Hello all, 1st, is there a tool / software (for Linux / cross platform, or run under Wine) to inspect the UI of bookmarks library? I've not found one mentioned - it's a PIA not being able to see the html / css or names / selectors of elements.

I'm trying to color the bookmark library icons (mostly folders) - which the colorize bookmarks custom style for Fx does that in Linux Mint 18.1. Only issue is how difficult would it be to either replace the icons with different colored ones?

There appears to be 2 yellow images & one "white" image on a 32px x 48px base. Other than location of the images on the overall background, I can't tell any difference in the yellow ones.

I'm not sure if it'd be easier to replace the images w other existing, colored folder images, but I've forgotten how to do that when there are multiple images on a background.

Or I could try coloring / painting over the yellow, using Gimp or similar. So far, Gimp doesn't seem to want to let me color the folder image(s) - at all. I have no idea why that'd be for standard *.png files. They're not root owned or protected, AFAIK. Thanks.

rebop commented 4 years ago

I know i asked this months ago, but cannot find it. I am on 2.63 At sometime soon I would like to update to a more current build. What is the best way to do that without losing what I had and liked but being able to update to something better or a add a new feature? Not sure how to compare easily. Must be a recommendation for this, no? Thanks.

Aris-t2 commented 4 years ago

@Jagick Indeed Mozilla removed that item from the menu.

@bendover22 A tool like that does no exist on any OS. You have to go through the CSS files of the browser to find whatever is setable or changeable. You can of course look into this collections bookmarks related files first. Maybe you will find something there faster. (e.g. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/bookmark_icons_colorized.css)

@rebop Over time option and file names change, so there is no easy way to update without reconfiguration. You could backup your files, just replace the folders and keep your userChrome.css and userContent.css files. Most settings will remain the same, but some things just have to be changed. Use Notepad++ with "compare" plugin to compare your old and and later userChrome.css to find the differences.

You can also use Githubs "compare" feature. --> Files changed > userChrome.css (scroll down)

krystian3w commented 4 years ago

"Tiny" about:config works with FX71 rc2?

Aris-t2 commented 4 years ago

Ty this:

aboutconfig_compact_appearance.css ```css /* Firefox Quantum userChrome.css tweaks ************************************************/ /* Github: https://github.com/aris-t2/customcssforfx ************************************/ /****************************************************************************************/ @-moz-document url-prefix(about:config) { * { font-size: 9pt !important; } #prefs, #prefs * { min-height: unset !important; padding-left: unset !important; padding-right: unset !important; margin: unset !important; } #prefs > tr, #prefs > tr > td, #prefs > tr > th { min-height: unset !important; height: unset !important; padding-left: unset !important; padding-right: unset !important; margin: unset !important; } #prefs { width: 100% !important; } #prefs button { min-height: 16px !important; height: unset !important; min-width: 16px !important; width: unset !important; padding: unset !important; margin: unset !important; } #prefs button { -moz-margin-start: 1px !important; } #prefs #form-edit > * { -moz-margin-end: 2px !important; } input[type="radio"] { min-height: 0px !important; height: 10px !important; min-width: 0px !important; width: 10px !important; } #search-container * { min-height: unset !important; padding-top: unset !important; padding-bottom: unset !important; margin-top: unset !important; margin-bottom: unset !important; } #search-container { padding: 4px !important; } .cell-edit, .cell-reset { width: 20px !important; } } ```

Edit: Updated code, works fine here on Fx 68esr, 70, 71 and 72.

rebop commented 4 years ago

@rebop Over time option and file names change, so there is no easy way to update without reconfiguration. You could backup your files, just replace the folders and keep your userChrome.css and userContent.css files. Most settings will remain the same, but some things just have to be changed. Use Notepad++ with "compare" plugin to compare your old and and later userChrome.css to find the differences.

You can also use Githubs "compare" feature. --> Files changed > userChrome.css (scroll down)

Thanks. Does not seem to be easy. Especially since you sent me a little custom code for issues. I think those are all in userChrome, but maybe not. Wondering if it is worth the time to make the change as this all seems to change so often. How do most users deal with this?

Aris-t2 commented 4 years ago

@rebop Move your custom code to my_userChrome.css file and do not delete or remove it when updating.

rebop commented 4 years ago

@rebop Move your custom code to my_userChrome.css file and do not delete or remove it when updating.

Very cool. Will help a bit. Thanks.

bendover22 commented 4 years ago

@Aris-t2 https://github.com/Aris-t2/CustomCSSforFx/issues/241#issuecomment-558511668

Maybe you will find something there faster ... /bookmark_icons_colorized.css)

Yes, I mentioned I was using that & had questions about it. Anyway, I substituted (renamed) a standard folder icon from Linux for the "main" folder-item.png image in bookmark_icons_colorized.css. Using the file from Custom CSS v2.7.4 - in Linux.

Replacing the file folder worked well - for the treechildren that use a plain "file folder" icon. But, there are several tree items that DON'T use a standard folder icon, like History, Tags, Downloads & others that Fx (default) uses different icons.

Bookmark_icons_colorized.css looks like it addresses several of the other icons mentioned. But only uses ONE other icon besides a std folder image is used. It should be using several different ones on the items mentioned.

Here's the default Fx 70 "non-folder" style icons:

fx-bookmarks orig non-folder icons_cropped-2019-11-25

Here's the ONE different icon that Custom Css - bookmark_icons_colorized.css uses for every one of the non-file folder icons. But bookmark_icons_colorized.css file references several other images to use. All of the referenced images (that aren't used) are in my /chrome/image folder. fx-bookmark_icons_colorized css_non-folder icons used-2019-11-26 In bookmark_icons_colorized.css file, which lines would I need to comment - or maybe easier, which to leave active, to use the standard folder icon on most treechildren, and let the default Fx icons (in the 1st screen shot) show on items like History, Downloads, etc?

I'm sure you know those SVG icons can be color filled, so not just black outlines.

Aris-t2 commented 4 years ago

You are right about the wrong icons. I haven't updated the file for a while.

I think most important stuff is set within tree-icons.css file:

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

treechildren::-moz-tree-image {
  -moz-context-properties: fill, fill-opacity;
  fill-opacity: 0.7;
}

treechildren::-moz-tree-image(title) {
  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
  padding-inline-end: 2px;
  margin: 0 2px;
  width: 16px;
  height: 16px;
}

treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open) {
  list-style-image: url("chrome://browser/skin/places/folder.svg");
}

treechildren::-moz-tree-image(title, separator) {
  list-style-image: none;
  width: 0 !important;
  height: 0 !important;
  margin: 0;
}

treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
}

treechildren::-moz-tree-image(container, queryFolder_menu________) {
  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg");
}

treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {
  list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.svg");
}

/* query-nodes should be styled even if they're not expandable */
treechildren::-moz-tree-image(query) {
  list-style-image: url("chrome://browser/skin/places/folder-smart.svg");
}

treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}

treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
  list-style-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar");
}

treechildren::-moz-tree-image(title, query, tagContainer),
treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
  list-style-image: url("chrome://browser/skin/places/tag.svg");
}

/* calendar icon for folders grouping items by date */
treechildren::-moz-tree-image(title, query, dayContainer) {
  list-style-image: url("chrome://browser/skin/places/history.svg");
}

treechildren::-moz-tree-image(title, query, hostContainer) {
  list-style-image: url("chrome://browser/skin/places/folder.svg");
}

treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
  list-style-image: url("chrome://browser/skin/places/history.svg");
}

/* We want some queries to look like ordinary folders. This must come
   after the (title, query) selector, or it would get overridden. */
treechildren::-moz-tree-image(title, query, folder) {
  list-style-image: url("chrome://browser/skin/places/folder.svg");
}

treechildren::-moz-tree-cell-text(title, separator) {
  color: ThreeDShadow;
  margin: 0 5px;
}

treechildren::-moz-tree-cell-text(title, separator, selected, focus) {
  color: HighlightText;
}

/* Remove tiny spacing in separators appearing after the twisty column */
treechildren::-moz-tree-twisty(title, separator) {
  padding: 0;
}

treechildren::-moz-tree-image(cutting) {
  opacity: 0.5;
}

treechildren::-moz-tree-cell-text(cutting) {
  opacity: 0.7;
}
Crybal commented 4 years ago

Using (almost) the latest css with ff esr 68.2.0 I have a problem re-arranging the tabs.They can be moved within the same row or to random places in other rows.I am using tabs_multiple_lines_fx66.css

bendover22 commented 4 years ago

@Aris-t2 - not sure what you meant. But I can see why you haven't updated the bookmarks icons file.

Were you just pointing out that most bookmarks "non-file-folder" icons were in tree-icons.css? I'm not looking to substitute those image locations into the Custom CSS bookmark_icons... file & figure out what goes where - that'd take (me) forever.

But the descriptions (selectors) & some syntax in Firefox's tree-icons.css file don't match some in bookmark_icons_colorized.css file. I'm sure Mozilla changes are much of the problem.

* That's why I asked which few rules in _bookmark_iconscolorized.css I need to leave active**, to show a std "file folder" on items that use it (if you know the answer w/o long research); then comment the rest of "bookmark_icons_colorized.css" (I assume), so Fx shows the other default icons.

I don't want to spend time making every bookmarks non-folder icon a different shape & color, as Mozilla changes will break much of it - over & over for the rest of my life.

I also don't understand the syntax or values used in rules like:

treechildren::-moz-tree-image(**title, query**, tagContainer),
treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {

Title and / or query are used in MOST bookmark rules. In this context, what are the meanings of "title" & "query?"

Aris-t2 commented 4 years ago

@Crybal This never worked just using CSS. You also no JS script to "fix" tab moving. Look here, everything is in the corresponding support thread: [MULTIROW TABS SUPPORT THREAD] - multiple tab lines

@bendover22 I will update the file on next release.

It is not important what the sometimes cryptic tags stand for. It is important what (image) files they point to.

krystian3w commented 4 years ago

https://github.com/Aris-t2/CustomCSSforFx/issues/241#issuecomment-558651313

IMO still need fix:

obraz

no centered table#prefs "property".

Workaround:

#prefs {
    margin-left: 5px !important;
      width: calc(100% - 10px) !important;
    }
obraz
Aris-t2 commented 4 years ago

No idea why things look different for you, but that table was centered in my tests.

I posted my final tweaks for 'compact about:config page' option.

(Fx68-70 - top part) aboutconfig (Fx71-72+ - bottom part)

ImSpecial commented 4 years ago

Firefox 71.0 / CustomCSSforFX 2.9.0

So updating FF today and I notice I have these damn Toolbar Scroll Buttons back again, which I thought I got rid of with a bit of code you suggested a while ago, any idea what changed, and how to fix/remove them again?

Tab Toolbar Scroll Buttons: https://i.imgur.com/KJd5AbU.png / https://i.imgur.com/K3EFxnV.png

The but of code I had in my userChrome.css:

/* hides "Tab Toolbar Scroll Buttons" */
#TabsToolbar .scrollbutton-up {
  display: none !important;
}

#TabsToolbar .scrollbutton-down {
  display: none !important;
}
Aris-t2 commented 4 years ago

Remove "#TabsToolbar" from the code.

LionWrathz commented 4 years ago

@Aris-t2 search-box doesn't work again in Firefox 71 ,any fixes to make it transparent ? https://imgur.com/XyE8W3U

Infernoflower commented 4 years ago

Hello, I just updated to Firefox 71, and, if it's possible, can you tell me which command in the userChrome can make the add-ons, home button, bookmarks button and search bar show up in the toolbar instead of in the "More tools..." option?

krystian3w commented 4 years ago

which command in the userChrome

None, you need found scripts too create these buttons!

https://github.com/Aris-t2/CustomCSSforFx/blob/8c0b70a722f09b5d9ba0bc46246e212907edf1c6/classic/userChrome.css#L344-L346

➕

one from:

https://github.com/Aris-t2/CustomCSSforFx/blob/8c0b70a722f09b5d9ba0bc46246e212907edf1c6/classic/userChrome.css#L359-L369

for lastest macOS maybe also:

https://github.com/Aris-t2/CustomCSSforFx/blob/8c0b70a722f09b5d9ba0bc46246e212907edf1c6/classic/userChrome.css#L356-L357

Aris-t2 commented 4 years ago

@LionWrathz 

#search-container, #searchbar, #searchbar-search-button, .searchbar-textbox, .searchbar-textbox * {
  background: transparent !important;
}

@Infernoflower Use latest files and additional fixes/workarounds for "appbutton in titlebar". That option is what causes the items to end up inside "more tools..." menu.

https://github.com/Aris-t2/CustomCSSforFx/issues/231

ImSpecial commented 4 years ago

Remove "#TabsToolbar" from the code.

Thanks works great now.

Infernoflower commented 4 years ago

@Infernoflower Use latest files and additional fixes/workarounds for "appbutton in titlebar". That option is what causes the items to end up inside "more tools..." menu.

Thank you. I turned on one of the workarounds and some of the buttons are now showing up in the toolbar, but the add-ons aren't showing up. Please can you help me?

jmcken1 commented 4 years ago

Hello @Aris-t2, a while ago you gave me some extra code to place the Firefox menu button (#PanelUI-button) on the tabs toolbar, which is also beneath the navigation bar (using ./css/tabs/tabs_below_navigation_toolbar_fx65.css). But after updating to FF v71.0 just now, the button is stuck on the navbar next to the history buttons, even with the latest CSS (v2.9.0):

image

This is the custom code you gave me (in my_userChrome.css):

/* Button in tabs toolbar
----------------------------------------------------------------------------------------------- */

#PanelUI-button {
  -moz-appearance:none!important;
  -moz-box-ordinal-group:0!important;
  position:absolute!important;
  top:28px!important;
  left:0px!important;
}

#TabsToolbar {
  -moz-padding-start:0px!important; /* affects non-maximized windows only */
  margin-left:27px!important;
  padding-right:27px!important;
}

Would sure appreciate any tip on how to fix this.

Thanks for all your hard work. I love FF but it’s butt-ugly without all this CSS.

Aris-t2 commented 4 years ago

@Infernoflower Sorry, appbutton in titlebar does not work anymore. Mozilla changed the code again.

@jmcken1 Try to lower the "top" value inside the code.

Infernoflower commented 4 years ago

@Infernoflower Sorry, appbutton in titlebar does not work anymore. Mozilla changed the code again.

I tried turning on just one of the workarounds and I fixed the problem, but how do I make the outlines around the buttons round instead of square in the new userChrome?

Aris-t2 commented 4 years ago

@Infernoflower

Modify values within this rule:

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

With the update of firefox release to 71 with your css code this happens image

Firefox hides all the icons like if they were all on the overflow menu when they are not. Any idea of why this happens?

Aris-t2 commented 4 years ago

I posted workarounds when Fx 71 hit Nightly. For now the workarounds work in Fx 71.

Look here https://github.com/Aris-t2/CustomCSSforFx/issues/231

Infernoflower commented 4 years ago

@Infernoflower

Modify values within this rule:

#main-window[tabsintitlebar] #PanelUI-button #PanelUI-menu-button {
  border-radius: 0 0 4px 4px !important;
}

Thank you so much.

Speravir commented 4 years ago

In Fx 71 the Aero styling for the preferences does not work anymore, preferences_alternative_appearance_aero.css in userContent.css. This seems to be totally changed. If I am not wrong, all styles for this page do not work anymore (I do not see the element page).

jmcken1 commented 4 years ago

@Aris-t2,

@jmcken1 Try to lower the "top" value inside the code.

I just tried that – I set it to 0, -20px, etc. – and the button didn’t budge a pixel after each browser restart.

To be clear, you’re referring to the top:28px!important; line in the my_userChrome.css code I excerpted above, correct?

Underx01 commented 4 years ago

@Aris-t2 Sorry for bothering you but ever since the new Mozilla Firefox v71 update I can't seem to fix this issue below: URL-BA-ISSUE

Many months ago you provided me with a solution/fix (inside my_userContent.css) that works with all previous Firefox versions up until v71+:

#nav-bar-customization-target {
  padding-bottom: 27px !important;
  padding-left: 2px !important;
  padding-top: 0px !important;
}
#urlbar-container {
  position: absolute !important;
  bottom: -0.5px !important;
  left: 10px !important;
}
#urlbar {
  padding: 0 !important;
  margin: 0 !important;
  width: 73.15vw !important;
}
#urlbar-search-splitter {
  display: none !important;
}

I have tried to change all variables, but it just won't move it below the icons. Hope you can help me out again. Thanks in advance for the reply.

Infernoflower commented 4 years ago

Hello, my menu has a different design and is overlapped by the tabs in my userchrome. How can I fix this and how can I put the tabs on the bottom again? Here's the toolbar with the tabs not overlapping the menu: Toolbar With Menu Not Overlapping

And here's the toolbar with the tabs overlapping the menu: Toolbar With Menu Overlapping

How can I fix this, and how can I put the tabs underneath the toolbar?

nollinvoyd commented 4 years ago

I posted workarounds when Fx 71 hit Nightly. For now the workarounds work in Fx 71.

Look here #231

On the referral page, it says put the code at the bottom of userChrome.css. Might confuse some users. Because of all the stuff I have in myuserChrome.css, the workarounds need to be near the top.

Moridin63 commented 4 years ago

So I mostly use this because I want my tabs bar to be right above the page, below the bookmarks bar which is below the address bar.. (I hate that firefox just changed that shit without an option to keep it as is..) But with this new update not only is my tabs bar way at the top, but there is also this like, blank bar where it used to be.

How do I clear all the settings for this?

Aris-t2 commented 4 years ago

@jmcken1 After further testing it seems the button can not be properly moved out of the navigation toolbar anymore.

In your case to remove the position, top and left rules completely and test margin-bottom: -XXpx !important; or margin-top: XXpx !important; should work in Fx71, but not in future versions of Firefox like Fx 73.

@Speravir I will look into that.

Edit This should cover it again:

    #preferences-stack,.sticky-container,
    page,
    page .dialogBox .groupbox-title{
      background: linear-gradient(to bottom right, #edf6ff,#dbeaf9,#edf6ff,#dbeaf9) !important;
    }

@Underx01 Add a display: block !important; below position: absolute !important;.

@Infernoflower Try to edit the "workaround" files to find the correct values for your configuration.

The appearance is set within the files listed in userChrome.css. Look there.

@nollinvoyd Not everybody uses the my_userChrome.css file. The file is imported at the end of userChrome.css, so having content in my_userChrome.css or at the bottom of userChrome.css makes no difference, if only one of them is used.

@Moridin63 You have to use this projects latest files and use the correct option required for Fx71.

ghost commented 4 years ago

Hi, sry to take your time, especially if it's already been solved elsewhere or is not possible to solve now with v71. Is it possible to make it classic style = menu/title bar on top, address bar/bookmark tab in the middle and tabs on bottom? Because as of 71 version, menu bar has moved with tabs at the bottom :-/ For the time being I've just hide menu bar to solve this issue but that's not really a good solution :-)

image

My script is a mess but I've just copied in the past + add some items to it later and it worked so I didn't bother with some editing or deleting useless stuff...

Thanks

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

@import "./tabs_below_navigation_toolbar.css";

/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
  -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 26px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
  top: 0px !important;
}

/* Linux/macOS */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 28px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: -14px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
    /* set to '0', if no menubar is used */
    #main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
      margin-top: 18px !important;
    }
    /* set to '0', if no menubar is used */
    #main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
      margin-top: 34px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
      top: 8px !important;
    }
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 0px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 8px !important;
    }
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

/* force buttons on menubar being very small to not break the toolbar */
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarbutton .toolbarbutton-icon {
  padding: 0px 0px !important;
  height: 16px !important;
  width: 16px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton,
#toolbar-menubar > toolbarpaletteitem toolbarbutton,
#toolbar-menubar > toolbarbutton {
  position: relative !important;
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
  padding: unset !important;
  height: unset !important;
  width: unset !important;
}

/* make sure button icon colors set correctly */
#main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon {
  fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
  color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"] * #TabsToolbar {
 -moz-padding-start: 0px !important;
}
/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
#main-window #TabsToolbar #window-controls {
  display: none !important;
}

/* hide non-required items */
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none !important;
}

/* Windows 7 extra tweaks */
@media (-moz-os-version: windows-win7) {
  @media all and (-moz-windows-compositor) {
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) * .titlebar-buttonbox-container {
      display: none !important;
    }
  }
  @media not all and (-moz-windows-compositor) {
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: -8px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 0px !important;
    }
  }
}

/* Windows 10 extra tweaks */
@media (-moz-os-version: windows-win10) {
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]),
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) {
    background-color: Highlight !important;
    color: HighlightText !important;
  }
}

/* disable Mozillas tab jumping nonsense when moving tabs */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar, 
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
  background-color: lightgrey !important;
  background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
  fill: var(--lwt-text-color) !important;
}

:root {
  --default_tab_border_roundness: 10px;
}

/* tab top border roundness */
#TabsToolbar .tabs-newtab-button,
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
  border-top-left-radius: var(--default_tab_border_roundness) !important;
  border-top-right-radius: var(--default_tab_border_roundness) !important;
  overflow: hidden;
}

/* hide tab separators */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  opacity: 0 !important;
  border-image: unset !important;
  border-image-slice: unset !important;
  width: unset !important;
}
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
  content: unset !important;
  display: unset !important;
}
Aris-t2 commented 4 years ago

@darkthx Test latest files this project offers. Many things changed since the above code did its job.

ghost commented 4 years ago

@darkthx Test latest files this project offers. Many things changed since the above code did its job.

Thanks but that was the first thing I've tried after updating to new version :) tabs_below_navigation_toolbar_fx72.css tabs_below_main_content_fx72.css with bunch of older .css from import files but tabs was still on the top but if it's working then I'm obviously missing something and yes, lack of brain power for the coding too :P

gashtal commented 4 years ago

Maybe I am missing something here but it seems as long as I have CustomCSSforFx enabled on Firefox 71, all my add-on buttons get hidden by the overflow menu. If I remove CustomCSSforFx, then the add-on buttons appear next to the address bar as they should. Is there an option in CustomCSSforFx to address this?

Aris-t2 commented 4 years ago

@darkthx Make sure you extract the whole package to chrome folder and only enable one of the mentioned options tabs_below_navigation_toolbar_fx72.css or tabs_below_main_content_fx72.css without using any other outdated code.

@gashtal

The appbutton in titlebar option breaks navigation toolbar in Fx71+. You have to use additional workarounds mentioned in userChrome.css file (and inside changelogs related to Fx71+). There is also a thread for this: https://github.com/Aris-t2/CustomCSSforFx/issues/231

Aris-t2 commented 4 years ago

@ALL Please read first post before posting!

Make sure you updated to the most recent version of this projects files "before" reporting problems!

ghost commented 4 years ago

@darkthx Make sure you extract the whole package to chrome folder and only enable one of the mentioned options tabs_below_navigation_toolbar_fx72.css or tabs_below_main_content_fx72.css without using any other outdated code.

@Aris-t2 Yep! I've had overlapping css for this, thanks for pointing that out lol ;-)

jmcken1 commented 4 years ago

@Aris-t2

@jmcken1 After further testing it seems the button can not be properly moved out of the navigation toolbar anymore.

In your case to remove the position, top and left rules completely and test margin-bottom: -XXpx !important; or margin-top: XXpx !important; should work in Fx71, but not in future versions of Firefox like Fx 73.

Thanks. margin-bottom:-54px!important; worked to put the button back in the tabs bar. The only issue now is there’s a blank space above it in the location bar that I don’t know how to get rid of:

image

(I tried to fix it myself but I can’t find the proper selector; #urlbar moves everything but the history & home buttons.)

Infernoflower commented 4 years ago

@Infernoflower Try to edit the "workaround" files to find the correct values for your configuration.

Thank you. I just figured out that I needed to turn on the "tabs not on top" workaround and the tabs are now under the toolbar. However, I don't know how to move the menu button down and change its appearance. Please can you tell me which parts of the userChrome can help change the menu button's position and appearance? Here's a picture to show you what I mean:

Cut Off Menu Button

Aris-t2 commented 4 years ago

@jmcken1 Use code like this to get rid of the blank space.

#main-window[tabsintitlebar] #nav-bar-customization-target {
  -moz-margin-start: -30px !important;
}

Adjust the value for your config.

@Infernoflower

If you do not need the "appbutton in titlebar", disable the corresponding option in your userChrome.css file. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L345

Once the option is disabled you can use the options for the "button on navigation toolbar": https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L314

jmcken1 commented 4 years ago

@jmcken1 Use code like this to get rid of the blank space.

#main-window[tabsintitlebar] #nav-bar-customization-target {
  -moz-margin-start: -30px !important;
}

Adjust the value for your config.

I just tried this, but it doesn’t have any effect, regardless of the value I use (-30px, -300px, etc.). (I tried margin-left:-60px!important; too for the hell of it, which also did nothing.)