I'm using Firefox 114.0.1 and am in the middle of transferring to 118.0.1 and am running on MacOS 13.0.1 just in case you needed to know...

Copy and paste from Reddit to here?

Yea, fair enough, okay... The formatting's going to be really weird though— are you unable to access the post if you're not logged in? It cropped out a bit of text, the copy and paste process wasn't exactly smooth...

Post The post only looks long because the code I used was very long (and also happens to be the thing causing me grief) r/FirefoxCSS - Silly code moved my silly mac window buttons into a funny part of the screen

Note the position of the close, minimise, and maximise buttons

Quick summary of each heading

   Need to modify the code to cater for the window buttons (the longer code— the shorter one is fine). If the workaround isn't worth it I could just change it back I guess...

   I am using the Adaptive Tab Bar Color extension so the tabs are less defined on this image, and this is my second issue, but I don't really care as much if this one isn't solved.

1. The BIG issue

I'm using a Mac in case you can't tell and hence the window buttons have a different placement than on Windows.

In addition to the code I added (i.e., the second code— the one I'm having issues with), this is the only other code on my userchrome.css file and is being used to give me the old folder and bookmark icons:

@import url(userChrome_Fx56_bookmark_icons.css);

The code that is causing me trouble...

I used the following code to move the tabs below the search bar (forgot which source I got it from, but it might have been either r/FirefoxCSS or userchrome.org):

/* TABS: below nav-bar - fixed for 108+ */

/* ROOT -variables */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  
  --tab-min-height: 25px !important; /*override density*/
  --tab-min-width:  80px !important; /*override default*/
}

/* TABS: below nav-bar  */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
}

/* TABS: position */
#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

/* for 107 and lower - disable this rule in 108 and newer *//*
#tabbrowser-tabs {
  width: 100vw !important;
} */

/* navigator-toolbox: PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  position: relative !important;
}

/* TABS: HEIGHT */
#tabbrowser-tabs,
#tabbrowser-arrowscrollbox,
#tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#tabbrowser-tabs,
.tab-stack,
.tab-content {
  height: var(--tab-min-height) !important;
}

/* TABS: APPEARANCE */
#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* indicators - hide  */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* window controls in full screen - hide*/
#TabsToolbar #window-controls {display: none !important;}

/* caption buttons on tab bar - hide */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar
 .titlebar-buttonbox-container {display: none !important;}

2. Slightly smaller issue

If you are familiar with the Adaptive Tab Color extension (hyperlinked at the start of the post), when I try to change the colour of the tab bar to be different to the bookmarks and url bar section, it does nothing, and when I change the toolbar colour, it changes the colour of the whole top part of the screen, including the tool bar.

Also, just a minor thing but when I hover over the 'x' on each tab, the highlighted square is too big, but I'm happy to put up with that.

The following has to go; remove it altogether.

/* for 107 and lower - disable this rule in 108 and newer *//*
#tabbrowser-tabs {
  width: 100vw !important;
} */

• https://support.mozilla.org/en-US/questions/1422733#answer-1601087

• Your theme will prevent you from making items different from the theme itself.
• For tabs below the other toolbars, MrOtherGuy's code is widely used. See the following thread.

https://support.mozilla.org/questions/1410524

So you would say that the code from MrOtherGuy is better than the one I currently have? Also, removing the line you told me to remove hasn't changed the window controls placement :(

Thanks though— I thought I had to delete that; wasn't sure if I'd break it!

If you know what code you have, why not update it from the source? I can't help with window controls placement. There is a FirefoxCSS group on fedia. io from which you might get help.

Note that /*#tabbrowser-tabs {width: 100vw !important;}*/ is commented out and doesn't have effect, you may leave it in case you ever want to install an older Firefox version like 102 ESR.

You also do not need these two lines (-moz-box-ordinal-group is no longer supported; replaced by order) as the Tab bar is positioned absolutely with this code in space reserved at the bottom of the navigator-toolbox container.

/* TABS: below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group: 10 !important;}
#TabsToolbar {-moz-box-ordinal-group: 1000 !important;}

The CSS code from MrOtherGuy works in the opposite way and moves the titlebar container that holds the Menu bar and the Tab bar to the bottom via flex what causes issues that need to be addressed as this makes the enabled Menu bar appear below the Navigation Toolbar and enabled Bookmarks Toolbar as well.