2
MOG Multi-row tabs (fedia.io)
submitted 10 months ago by to c/FirefoxCSS@fedia.io
6 comments fedilink hide all child comments
 

Have been using mog multi-row_tabs_below_content.css (and also mog fake_status_bar_w_bookmarksbar.css) with Firefox ESR 128.

Now updating to Firefox ESR 140, and to my surprise, almost all the CSS continues to work. The only issue is that the menu bar has disappeared, and won't come back.

There was something to do with menu bar in multi-row_tabs_below_content.css, so I replaced that file with the latest versions of the two new replacement files, multi-row_tabs.css and tabs_below_content_v2.css. This did indeed restore the menu bar, but it broke tab bar scrolling (and a few other incidentals).

Do I need some intermediate version of those files? OR, if I go back to the original configuration, is there some way to restore the menu bar?

you are viewing a single comment's thread
view the rest of the comments
[–] 2 points 10 months ago (3 children)

Oh right, I missed that you were also using fake_statusbar_w_bookmarksbar.css - that's totally not compatible with tabs_below_content_v2.css

You can add this bit to make them behave together:

#PersonalToolbar{
  position: static;
  grid-row: 11/12;
}
:root:not([inFullscreen]) > body::after{
 content: none; 
}

Or if you want tabs to be below that fake statusbar then add this as well:

#TabsToolbar{
  grid-row: 12/13;
}
  • permalink
  • fedilink
  • source
  • parent
  • hideshow 3 child comments
    •
  • [–] [S] 1 point 10 months ago* (last edited 10 months ago) (2 children)

    So I'm not sure where that should be added; I tried adding it at the top of fake_statusbar_w_bookmarksbar.css, so the beginning code of that file, including some original code, now looks like this:
    ` #PersonalToolbar{ position: static; grid-row: 11/12; } :root:not([inFullscreen]) > body::after{ content: none; }

    :root:not([inFullscreen]) > body{ --uc-statusbar-button-padding: 4px; --uc-browser-base-padding: calc(2 * var(--uc-statusbar-button-padding) + 16px + 4px); --uc-statusbar-text-vertical-position: 5px; } ` But it didn't change anything regarding tabs and statusbar, although the menubar is now back? Also, the gray bar at the top is still there. Then I tried adding that code to tabs_below_content_v2.css. with the same result.

    So I moved the code back to fake_statusbar_w_bookmarksbar.css, and then in that same file I commented out this bit of code: /*:root:not([inFullscreen]) > body::after{ content: ""; display: flex; margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important; order: 2; /* To make this really the bottom-most toolbar even with custom toolbar order */ }*/ Now things seem to be pretty much correct, although some of the sizing seems to be a little off. Previously, the tabs were slightly less tall. So now, with the tabs slightly taller, the tab rows don't completely fit within the height of the tab bar. How can I slightly reduce the height of the tabs?

    Also, is what I did above the correct solution?

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] 2 points 10 months ago* (last edited 10 months ago) (1 child)

    If you are using @import statements in your userChrome.css to load the other files, then I would put these extra rules at the end of userChrome.css after the imports.

    For the tab heights, none of the styles should be modifying the tab height, they should be as tall as they are in Firefox normally. Make sure you are not setting tab height related properties in my_appearance_settings.css.

    Edit: I mean, you can edit tab heights, you just need to do it in a manner that is compatible with multi-row_tabs.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •