Mobile-Friendly Firefox Customizations for Librem 5

Emma · October 30, 2023, 9:04am

October 2023 Halloween Update:

Just in time for Halloween! Dress up the Firefox app on your Librem 5 to look like Firefox for Android!

Update Summary

Added userContent.css (fenix) to fix Firefox about pages to be better fit for Librem 5 as well as a color theme to match Firefox for Android, code-named Fenix.
Added fenix_colors.css for a color theme to match Firefox for Android, (Fenix). If you do not want the Private Browsing Mode theme for the URL Bar and Nav Bar, comment out that section of code at the bottom of the file.
Added fenix.css as an alternative to true_mobile_mode.css that more closely resembles Firefox for Android (Fenix).
Added extensions_menu.css to fix the Unified Extensions Menu.
Added dynamic_popups.css and several variations so that extensions expand into a big enough popup which also supports horizontal scrolling. Works best with true_mobile_mode.css or fenix.css.
Added alt-browser-alt.css to be used with true_mobile_mode.css or fenix.css instead of browser.css. It can also be used with other styles like alt-single_tab_mode-alt.css to have the Tab Bar at the top of the screen and the Nav Bar at the bottom.
Added single_tab_mode-alt.css, true_mobile_mode-alt.css, and fenix-alt.css, to be used without alt-browser-alt.css or browser.css in order to have the Nav Bar at the top of the screen.
Added true_mobile_landscape.css and true_mobile_landscape-alt.css to have a nice landscape mode that maximizes usable space and fixes flickering popups.
Added fenix_fox.css to have a single standalone userChrome file containing all necessary code except fenix_colors.css. You can add dynamic_popups.css or another variation. fenix_fox-alt.css is the version that has the Nav Bar at the top of the screen. You will still need userContent.css (fenix).
Added fenix_one.css to have a single standalone userChrome file containing all necessary code, including fenix_colors.css. If you do not want the Private Browsing Mode theme for the URL Bar and Nav Bar, comment out that section of code at the bottom of the file. You can add dynamic_popups.css or another variation. fenix_one-alt.css is the version that has the Nav Bar at the top of the screen. You will still need userContent.css (fenix).
Added variables into many files so that they work in “Normal” and “Touch” density modes.
New CSS files:
- alt-browser-alt.css
- extensions_menu.css
- single_tab_mode-alt.css
- alt-single_tab_mode-alt.css
- true_mobile_landscape-alt.css
- true_mobile_landscape.css
- true_mobile_mode-alt.css
- dynamic_popups.css
- dynamic_popups_plus.css
- dynamic_popups_max.css
- dynamic_popups_pro.css
- dynamic_popups_pro_max.css
- userContent.css (fenix)
- fenix_colors.css
- fenix-alt.css
- fenix.css
- fenix_fox-alt.css
- fenix_fox.css
- fenix_one-alt.css
- fenix_one.css
Updated CSS files:
- appMenu.css
- browser.css
- editBookmarkPanel.css
- popups.css
- tabmenu.css
- iconized_main_menu.css
- round_ui_items.css
- numbered_tabs.css
- tab_counter.css
- custom_rules.css
- single_tab_mode.css
- new-tab-button.css
- true_mobile_mode.css

Important:

The final post from this multi-post update is the Styles & Screenshots (post 61).
All of my most recent code is in the posts from this update (posts 55-61); ignore earlier posts.
For a summary of the updates that were applied to the October 2023 Halloween Update, see the Final Updates (post 70).
Remember that you don’t need to save all of the files in this thread; you only need the ones for the styles that you intend to use.

About the files

browser.css places Tab Bar & Nav Bar at bottom of screen.
alt-browser-alt.css places Tab Bar at top of screen and Nav Bar at bottom of screen.
Files that end with alt are to be used without any browser file, to keep Tab Bar & Nav Bar at top of screen:
- single_tab_mode-alt.css
- true_mobile_mode-alt.css
- fenix-alt.css
The following files are to be used with alt-browser-alt.css, to place Tab Bar at top of screen and Nav Bar at bottom of screen:
- alt-single_tab_mode-alt.css
- true_mobile_mode.css
- fenix.css
true_mobile and fenix files hide Tab Bar.
The following files can be renamed to userChrome.css, if you prefer having a single userChrome file:
- fenix_fox-alt.css
- fenix_fox.css
- fenix_one-alt.css
- fenix_one.css
Whichever userChrome file or files you decide to use, you will still need a userContent.css file.

This thread is best viewed with javascript disabled in your browser.

Code:

mobile-config-firefox by postmarketOS (modified by user0):

appMenu.css

/* Copyright 2022 Oliver Smith
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

/*@media (max-width: 700px) {*/
    /* Spawn the menu above the navigation bar (now that we've moved it to the
     * bottom). Without this, it still spawns above, but only with a small
     * height. This is due to the position="bottomcenter topright" attribute in
     * the HTML, which we can't override via CSS. */
    #appMenu-popup {
        /*margin-top: -390px !important;*/
        padding-left: 10px !important;
        padding-right: 10px !important;
        /*height: 310px;*/
        /*max-height: 310px;*/
        height: 330px;
        max-height: 330px;
    }
    #appMenu-protonMainView vbox.panel-subview-body {
        /*height: 300px !important;*/
        /*max-height: 300px !important;*/
        height: 318px !important;
        max-height: 318px !important;
    }
    #appMenu-multiView box.panel-viewstack:first-child {
        /* Use the whole space in the menu, instead of slowly increasing the
         * height via animation. This animation is broken anyway due to the
         * above menu size hack */
        height: calc(100vh - 100px) !important;
        max-height: calc(100vh - 100px) !important;
    }

    /* Menu content
     * - configure it to have most important functions for mobile
     *   on one page, without scrolling. (Scrolling was only possible with the
     *   scrollbar on the right anyway, which is awkward when expecting to be
     *   able to scroll with fingers.)
     * - submenus are hidden, because attempting to scroll inside them with the
     *   finger causes firefox to segfault. This is likely due to the menu
     *   positioning hack above, looks like FF can't determine the height
     *   properly. Help with fixing this is appreciated, the bookmarks and
     *   history submenus would be useful. However even without the submenus,
     *   the history and saved bookmarks can at least be accessed conveniently
     *   through the navigation search.
     * - fullscreen is hidden: not available in FF for android either, the
     *   screen is almost used completely already, causes problems with UIs
     *   that don't expect apps to go fullscreen (i.e. in Phosh, as soon as
     *   the on screen keyboard is triggered, the top and bottom bars of Phosh
     *   are over the FF in fullscreen) */
    #appMenu-fxa-status2, /* FF login */
    #appMenu-fxa-separator, /* FF login */
    /*#appMenu-new-window-button2,*/
    #appMenu-protonMainView toolbarseparator, /* all separators */
    /*#appMenu-save-file-button2, /* Save file can be done from Print too */
    #appMenu-fullscreen-button2,
    #appMenu-passwords-button, /* accessible from settings */
    /*#appMenu-extensions-themes-button, /* accessible from settings */
    /*#appMenu-bookmarks-button, /* submenu */
    /*#appMenu-history-button, /* submenu */
    /*#appMenu-more-button2, /* submenu */
    /*#appMenu-help-button2, /* submenu */
    .subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */
        display: none !important;
    }
}

browser.css

/* Copyright 2022 plata
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

/*@media (max-width: 700px) {*/
    /* Move navigation bar to bottom */
    #browser {
        -moz-box-ordinal-group: 0 !important; /* before FF 113 */
        order: -1 !important; /* since FF 113 */
    }

    /* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF
     * is in kiosk mode when fullscreen and max-width conditions are met,
     * because at this max-width the fullscreen button is hidden
     * (see appMenu.css). */
    #nav-bar[inFullscreen],
    #TabsToolbar[inFullscreen] {
        display: none;
    }

    /* Hide minimize/maximize/close buttons */
    .titlebar-buttonbox-container {
        display: none;
    }

    /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css  */
    #TabsToolbar > .titlebar-buttonbox-container {
      display: none;
    }
    /* Fix panels sizing */
    .panel-viewstack {
      max-height: unset !important;
    }

    /* Density variables */
    :root:not([uidensity="touch"]) {
        --widget-overflow-margin: 66px;
        --unified-extensions-panel-margin: 66px;
        --customizationui-widget-panel-margin: 66px;
        --appMenu-popup-margin: 66px;
        --BMB_bookmarksPopup-margin: 66px;
    }
    :root[uidensity="touch"] {
        --widget-overflow-margin: 72px;
        --unified-extensions-panel-margin: 72px;
        --customizationui-widget-panel-margin: 72px;
        --appMenu-popup-margin: 72px;
        --BMB_bookmarksPopup-margin: 72px;
    }

    /* Adjust Widget Overflow Menu (») spawn height */
    #widget-overflow {
        margin-bottom: var(--widget-overflow-margin) !important;
    }

    /* Adjust Unified Extensions Menu spawn height */
    #unified-extensions-panel {
        margin-bottom: var(--unified-extensions-panel-margin) !important;
    }

    /* Adjust Tab Manager Menu spawn height */
    #customizationui-widget-panel {
        margin-bottom: var(--customizationui-widget-panel-margin) !important;
    }

    /* Adjust Main App Menu (≡) spawn height */
    #appMenu-popup {
        margin-bottom: var(--appMenu-popup-margin) !important;
    }

    /* Adjust Bookmarks Menu (★) spawn height */
    #BMB_bookmarksPopup {
        margin-bottom: var(--BMB_bookmarksPopup-margin) !important;
    }

}

editBookmarkPanel.css

/* Copyright 2022 Oliver Smith
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

/*@media (max-width: 700px) {*/
    /* The only way I (ollieparanoid) found to make this not glitchy, was to
     * reduce the bookmark panel to the minimum amount of useful controls and
     * hardcode width and height. Patches to improve this welcome, but make
     * sure that you don't introduce new UI glitches by doing extensive
     * testing. */

    #editBookmarkPanel {
        /*margin-top: -390px !important;
        height: 200px;
        max-height: 200px;
        max-width: calc(100vw - 100px);*/
        background-color: var(--arrowpanel-background) !important;
        margin-bottom: 225px !important;
        max-height: 100vh !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }

    #editBookmarkPanel box.panel-header,
    #editBookmarkHeaderSeparator {
        display: none !important;
    }

    #editBookmarkPanelContent {
        /*max-width: 250px !important;
        width: 250px !important;
        padding-right: 20px;*/
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Hide the screenshot and the line below it. The page is right there when
     * you bring up the menu, no need for a screenshot. Also it has a glitch
     * when taking the screenshot in mobile portrait view, half the screenshot
     * is just black. Let's rather use the space to edit the bookmark
     * information. */
    #editBookmarkPanelInfoArea,
    #editBookmarkSeparator {
        display: none;
    }

    #editBMPanel_folderRow,
    .editBMPanel_folderRow,
    #editBMPanel_tagsRow,
    .editBMPanel_tagsRow {
        display: none;
    }

    #editBookmarkPanelBottomButtons {
        /*width: 250px !important;
        min-width: 250px !important;
        padding: 0px !important;
        justify-content: flex-start !important;
        margin: 0px 0px 20px 0px !important;*/
        margin-top: -5px !important;
        margin-left: -50px !important;
    }
}

findbar.css

/* Copyright 2022 Oliver Smith
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

/*@media (max-width: 700px) {*/
    .findbar-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*height: 150px !important;*/
        height: 40px !important;
    }

    .findbar-textbox {
        /* Overwrite fixed size, so the X on the right shows up */
        width: 100% !important;
    }

    .findbar-container checkbox {
        /* Add space around the buttons, looks nicer and makes it easier to hit
         * them with the finger. */
        padding: 10px 0px;
    }

    /* Save space */
    .findbar-highlight,
    .findbar-case-sensitive,
    .findbar-match-diacritics,
    .findbar-entire-word,
    /*.found-matches,*/
    .findbar-find-status,
    .find-status-icon {
        display: none;
    }

}

popups.css

/* Copyright 2022 Oliver Smith
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

/*@media (max-width: 700px) {*/
    /* Now that the navbar is at the bottom, we need to set an offset to have
     * the notifications (like the one for installing addons) displayed
     * on-screen. */
    #notification-popup {
        /*margin-left: -200px !important;*/
        margin-top: -500px !important;
        margin-right: -500px !important;
        height: calc(100vh - 250px) !important;
        max-width: 100vw !important;
    }

    #downloadsPanel-mainView {
        max-width: calc(100vw - 10px);
    }

    /* Menu that appears when long-pressing the back-button */
    #backForwardMenu {
        margin-top: -250px;
        height: 200px;
        min-height: 200px;
        max-width: 100vw !important;
    }

    /* Hide some context menu items */
    #context-inspect,
    #context-inspect-a11y,
    #context-savelinktopocket,
    #context-searchselect,
    #context-sendlinktodevice,
    #context-viewpartialsource-selection,
    #inspect-separator {
        display: none !important
    }

    /* fix flickering of the protections, permissions,
     * widget overflow and identity popups */
    #protections-popup,
    #permission-popup,
    #widget-overflow,
    #identity-popup {
        max-width: 100vw !important;
    }

    /* fix the protections popup gettting
     * too wide, making controls unaccessible */
    #protections-popup-mainView {
        min-width: 100vw !important;
        max-width: 100vw !important;
    }

    /* fix flicker on extension menus.
     * The compromise is that the overflow menu always use
     * all available height.
     * The -80px is here to prevent covering the main bars */
    #widget-overflow,
    #widget-overflow-mainView {
        height: calc(100vh - 80px) !important;
    }

    /* Adjust Tab Manager Menu to fix flickering */
    #customizationui-widget-panel {
        width: 100vw !important;
    }

    /* Adjust Bookmarks Menu (★) and fix flickering */
    #BMB_bookmarksPopup {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100vw !important;
    }

    /* Adjust "Saved to Library!" popup notification */
    #confirmation-hint {
        padding: 10px !important;
        width: 100vw !important;
    }

    /* Adjust "Confirm before closing multiple tabs" popup */
    .dialogFrame {
        width: 100vw !important;
        max-width: 100vw !important;
    }

}

root.css

/* Copyright 2022 Oliver Smith
 * SPDX-License-Identifier: MPL-2.0 */

/* Reduce minimum window width */
:root {
    min-width: 300px !important;
}

tabmenu.css

/* Copyright 2022 Peter Mack, Oliver Smith
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

/*@media (max-width: 700px) {*/
    /* Even when not in private browsing mode, reserve space to the right of
     * the tab bar for the private-browsing-indicator (that mask icon). This
     * gives the tab bar a consistent width in both the regular and the private
     * browsing mode, so the increased width hack below looks good in both. */
    /*#titlebar {
        padding-right: 30px;
    }
    hbox.private-browsing-indicator {
        position: fixed !important;
        right: 0px;
        bottom: 50px;
        display: block;
    }*/

    /* Increase tab width, to have more space for displaying the title of the
     * website and to make the "all tabs" button show up. */
    /*#tabbrowser-tabs {
        --tab-min-width: calc(100vw - 116px) !important;
    }*/

    /* Rotate the arrow on the "all tabs" button to point upwards, since the
     * tabs and searchbar were moved to the bottom. */
    /*#alltabs-button {
        transform: rotate(180deg) !important;
    }*/

    /* All tabs menu: hide scroll buttons */
    /*#scrollbutton-up,
    #scrollbutton-down {
        display: none !important;
    }*/

    /* All tabs menu: hide the search and the separator below it. */
    #allTabsMenu-searchTabs,
    #allTabsMenu-tabsSeparator {
        display: none;
    }

    /* Similar hack to what's in appMenu.css to properly spawn the "all tabs"
     * popup above the navigation menu */
    #customizationui-widget-panel {
        /* Further up than appmenu, because the "all tabs" button that spawns
         * this menu is above the hamburger button that spawns the regular
         * menu. */
        /*margin-top: -360px !important;*/
        padding-left: 10px !important;
        padding-right: 10px !important;
        /*height: 320px;*/
        /*max-height: 320px;*/
    }

    /*#allTabsMenu-allTabsView vbox.panel-subview-body {
        /* Use the whole height */
        /*height: 300px !important;
        /*max-height: 300px !important;
        /* When messing around with tabs, it gets into a state where it does
         * not use the whole height anymore, it becomes a tiny window. Removing
         * this attribute fixes it. Since FF 113, this no longer has any
         * effect, but it doesn't seem to be necessary either. */
        /*-moz-box-flex: initial !important;
    }*/

    /*#allTabsMenu-allTabsView vbox.panel-subview-body:first-child {
        /* the allTabsMenu has a vbox.panel-subview-body inside another one.
         * With -moz-box-flex: initial, it will show a scroll bar in each, but
         * we only want one scrollbar. */
        /*overflow-y: hidden !important;
    }*/

    #allTabsMenu-multiView box.panel-viewstack { /* before FF 102 or earlier */
        /* Use the whole height */
        height: calc(100vh - 100px) !important;
        max-height: calc(100vh - 100px) !important;
    }
    #customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */
        /* Use the whole height */
        /*height: 300px !important;
        max-height: 300px !important;*/
        height: 330px !important;
        max-height: 330px !important;
    }

    #allTabsMenu-allTabsViewTabs, /* before FF 106 */
    #allTabsMenu-allTabsView-tabs { /* since FF 106 */
        /* Make sure tabs with long titles don't exceed the all tabs menu */
        /*max-width: calc(100vw - 20px);*/
        max-width: calc(100vw - 30px);
        /* Fix padding */
        padding-top: 2px !important;
    }

    /* Expand Tab Manager Menu */
    #customizationui-widget-multiview panelview {
        max-width: 100% !important;
        width: 100% !important;
    }

}

urlbar.css

/* Copyright 2022 Oliver Smith
 * SPDX-License-Identifier: MPL-2.0 */

/* Reduce minimum window width */
#urlbar-container {
    min-width: 150px !important;
    flex-shrink: 1 !important;
}

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

/*@media (max-width: 700px) {*/
    /* Remove various buttons left and right of the URL bar:
       - forward-button: also reachable via longpress of back button
       - home-button: not important enough
       - customizableui-special-spring: empty space
       - library-button: also reachable via PanelUI-menu-button
       - sidebar-button: not useful on mobile (we try to gain horizontal space)
       - fxa-toolbar-menu-button: firefox cloud stuff, also reachable via
         #PanelUI-menu-button
    */
    /* #back-button */
    #forward-button,
    /* #reload-button */
    /*#home-button,*/
    #customizableui-special-spring1,
    /* (urlbar) */
    #customizableui-special-spring2,
    #library-button,
    #sidebar-button,
    #fxa-toolbar-menu-button
    /* #PanelUI-menu-button */ {
        display: none !important;
    }

    #urlbar {
        padding: 0px 5px;
    }

    /* Smaller font: show more of the URL */
    #urlbar-input {
        font-size: 9pt !important;
    }

    /* Focused urlbar: hide all icons around it, so we have more space to edit the URL */
    #urlbar[focused] #remote-control-box,
    #urlbar[focused] #identity-box,
    #urlbar[focused] #tracking-protection-icon-container,
    /* #urlbar-input */
    #urlbar[focused] #reader-mode-button,
    #urlbar[focused] #page-action-buttons {
        display: none;
    }

    /* Label of "identity icons", e.g. firefox specific pages look weird
     * when ellipsed, e.g. "F..x" instead of "Firefox". So just hide this
     * label. The icon itself is still visible. */
    #identity-icon-label {
        display: none;
    }

    /* Move urlbar results to cover the whole displayed website, instead of
     * being below the urlbar. */
    .urlbarView {
        position: fixed !important;
        inset: 0px 0px 84px 0px;
        width: 100% !important;

        background: var(--arrowpanel-background);

        margin: 0px !important;
        margin-inline: 0px !important;
        border-inline: 0px !important;

        overflow-y:  auto !important;
        overflow-x: none !important;
        scrollbar-width: none;
    }

    /* Bookmarks toolbar. Firefox shows it for some reason when opening a
     * private browsing window, even if it is not enabled in the normal
     * window view. Hide it for mobile, it eats precious space and can't be
     * organized properly on mobile anyway. Using the searchbar to filter
     * through bookmarks is much more efficient. */
    #PersonalToolbar {
        display: none;
    }

    /* If the bookmarks toolbar is configured to only show on the new tab page,
     * Firefox makes the toolbar overlap the browser. When it's then hidden by
     * the rule above, the urlbar is pushed off the bottom of the window. To
     * prevent this, set the height of the overlapped toolbar to 0. */
    :root {
        --bookmarks-toolbar-overlapping-browser-height: 0 !important;
    }
}

/* Even though amazon is removed as search engine in policies.json, it gets
 * installed when FF starts for the first time. Hide the button in "This time,
 * search with" inside the urlbar. Match localizations like Amazon.de with this
 * regex. */
button[id^='urlbar-engine-one-off-item-Amazon'] {
    display: none !important;
}

my (user0) alternative to the `browser.css` file to place the Tab Bar at the top of the screen and the Nav Bar at the bottom of the screen:

alt-browser-alt.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Density variables */
    :root:not([uidensity="touch"]) {
        --alltabs-button-position: 3.5px !important;
        --widget-overflow-margin: 22px;
        --unified-extensions-panel-margin: 22px;
        --customizationui-widget-panel-margin: 22px;
        --appMenu-popup-margin: 22px;
        --BMB_bookmarksPopup-margin: 22px;
    }
    :root[uidensity="touch"] {
        --alltabs-button-position: 4.5px !important;
        --widget-overflow-margin: 23px;
        --unified-extensions-panel-margin: 23px;
        --customizationui-widget-panel-margin: 23px;
        --appMenu-popup-margin: 23px;
        --BMB_bookmarksPopup-margin: 23px;
    }
    :root:not([uidensity="touch"],[inFullscreen]) {
        --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) )
    }
    :root[uidensity="touch"]:not([inFullscreen]){
        --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) )
    }

    /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide and Title Bar */
    #nav-bar[inFullscreen],
    #TabsToolbar[inFullscreen],
    .titlebar-buttonbox-container {
        display: none;
    }

    /* Move Nav Bar to bottom */
    #browser,
    #customization-container {
        margin-bottom: var(--uc-bottom-toolbar-height,0px)
    }
    #nav-bar{
        position: fixed !important;
        bottom: 0px;
        width: 100%;
        z-index: 1;
    }
    .panel-viewstack {
        max-height: unset !important;
    }

    /* Adjust Widget Overflow Menu (») spawn height */
    #widget-overflow {
        margin-bottom: var(--widget-overflow-margin) !important;
    }

    /* Adjust Unified Extensions Menu spawn height */
    #unified-extensions-panel {
        margin-bottom: var(--unified-extensions-panel-margin) !important;
    }

    /* Adjust Tab Manager Menu spawn height */
    #customizationui-widget-panel {
        margin-bottom: var(--customizationui-widget-panel-margin) !important;
    }

    /* Adjust Main App Menu (≡) spawn height */
    #appMenu-popup {
        margin-bottom: var(--appMenu-popup-margin) !important;
    }

    /* Adjust Bookmarks Menu (★) spawn height */
    #BMB_bookmarksPopup {
        margin-bottom: var(--BMB_bookmarksPopup-margin) !important;
    }

}

some code by MrOtherGuy:

hide_tabs_scrollbuttons.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_scrollbuttons.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* This should hide tabs scrollbuttons in a manner that preserves the ability to move tab strip when reordering tabs */

#tabbrowser-arrowscrollbox {
    --uc-compat-scrollbutton-margin: 1px; /* compatibility for non_floating_sharp_tabs.css */
    --uc-scrollbutton-up-background: linear-gradient(-90deg,transparent,var(--lwt-accent-color) 35%);
    --uc-scrollbutton-down-background: linear-gradient(90deg,transparent,var(--lwt-accent-color) 35%);
}

#tabbrowser-tabs:not([movingtab]) {
    --uc-scroll-visibility: hidden;
}
#tabbrowser-tabs[overflow] {
    --uc-scrollbox-base-margin: -31px;
    --uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size));
}
:root[uidensity="compact"] #tabbrowser-tabs[overflow] {
    --uc-scrollbox-base-margin: -25px;
}
#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]) {
    --uc-scrollbox-overflow-start-margin: -1px;
}
#scrollbutton-up ~ spacer {
    visibility: visible !important;
}
spacer[part="overflow-start-indicator"] {
    -moz-box-ordinal-group: 0; /* Fx < 112 compatibility */
    order: -1;
    margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important;
}
spacer[part="overflow-end-indicator"] {
    -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
    order: 2;
}

#scrollbutton-down[disabled="true"] > .toolbarbutton-icon,
#scrollbutton-up[disabled="true"] > .toolbarbutton-icon {
    opacity: 0.4;
} 
#scrollbutton-up,
#scrollbutton-down {
    position: relative;
    z-index: 1;
    visibility: var(--uc-scroll-visibility,visible);
    background-clip: border-box !important;
    background-origin: initial !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
}
#scrollbutton-up {
    margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important;
    background-image: var(--uc-scrollbutton-up-background);
}
#scrollbutton-down {
    margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important;
    background-image: var(--uc-scrollbutton-down-background);
}
.scrollbox-clip {
    margin-inline: var(--uc-scrollbox-margin,0px);
}

/* Need to reset some things for other scrollboxes */
.menupopup-arrowscrollbox {
    --tab-shadow-max-size: 0;
}

tab_close_button_always_on_hover.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Always show tab close button on hover and never otherwise */
.tabbrowser-tab .tab-close-button {
    display: none;
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
    display: flex !important;
    align-items: center;
}

tabs_fill_available_width.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */
    .tabbrowser-tab[fadein]:not([style^="max-width"]) {
        max-width: 100vw !important;
    }

}

some code by MrOtherGuy (modified by user0):

iconized_main_menu.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_main_menu.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Adds icons to main menu items which were removed in Proton */
#appMenu-zoom-controls::before,
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image{
  fill: currentColor;
  -moz-context-properties: fill;
  margin-inline: 0 8px !important;
}
#appMenu-zoom-controls::before,
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{
  display: flex;
  content: "";
  width: 16px;
  height: 16px;
}
#appMenu-new-tab-button2{ list-style-image: url("chrome://browser/skin/new-tab.svg") }
#appMenu-new-window-button2{ list-style-image: url("chrome://browser/skin/window.svg") }
#appMenu-new-private-window-button2{ list-style-image: url("chrome://browser/skin/privateBrowsing.svg") }
#appMenu-bookmarks-button{ list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") }
#appMenu-history-button{ list-style-image: url("chrome://browser/skin/history.svg") }
#appMenu-downloads-button{ list-style-image: url("chrome://browser/skin/downloads/downloads.svg") }
#appMenu-passwords-button{ list-style-image: url("chrome://browser/skin/login.svg") }
#appMenu-extensions-themes-button{ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg") }
#appMenu-print-button2{ list-style-image: url("chrome://global/skin/icons/print.svg") }
#appMenu-save-file-button2{ list-style-image: url("chrome://browser/skin/save.svg") }
#appMenu-find-button2{ list-style-image: url("chrome://global/skin/icons/search-glass.svg") }
#appMenu-settings-button{ list-style-image: url("chrome://global/skin/icons/settings.svg") }
#appMenu-more-button2{ list-style-image: url("chrome://global/skin/icons/developer.svg") }
#appMenu-help-button2{ list-style-image: url("chrome://global/skin/icons/info.svg") }
#appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") }
#appMenu-translate-button{ list-style-image: url("chrome://browser/skin/translations.svg") }
#appMenu-zoom-controls::before{ background-image: url("chrome://browser/skin/fullscreen.svg") }
/* Use account-button icon for signed in sync item */
/*#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ background-image: var(--avatar-image-url) }*/
/* Add somewhat hacky separator to zoom controls so it looks consistent */
/*#appMenu-protonMainView > .panel-subview-body::after{
  content: "";
  display: flex;
  border-bottom: 1px solid var(--panel-separator-color);
  margin: var(--panel-separator-margin);
}
#appMenu-find-button2 ~ *{
  order: 2;
}*/

round_ui_items.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/round_ui_items.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Make bunch of things in the main UI round */

:root {
    --toolbarbutton-border-radius: 12px !important;
    --tab-border-radius: 14px !important;
}
#urlbar-input-container > box:hover,
#urlbar-input-container > box[open],
#main-menubar >    menu,
.titlebar-button:hover,
#scrollbutton-up,
#scrollbutton-down,
.tab-close-button,
.close-icon > image,
#page-action-buttons > :hover,
.panel-arrowcontent,
.urlbarView-row-inner,
.search-one-offs button,
.subviewbutton-back,
.toolbaritem-combined-buttons > toolbarbutton,
#PopupSearchAutoComplete,
menupopup {
    border-radius: 10px;
}

button,
.tab-background {
    border-radius: 14px !important;
}

.panel-arrowcontent {
    margin-inline-end: 0 !important;
}
.panel-arrow {
    margin-inline: 17px !important;
}

menupopup {
    -moz-appearance: none !important;
    overflow: -moz-hidden-unscrollable !important;
}

.tabbrowser-tab[selected]::after,
.tabbrowser-tab[beforeselected-visible]::after {
    border-color: transparent !important;
}

/*#nav-bar {
    box-shadow: none !important;
    margin-top: 3px;
}*/
.tab-line {
    display: none;
}

.tab-background[selected] {
    border-top-width: 3px !important;
    border-bottom-width: 3px !important;
    border-left-width: 3px !important;
    border-right-width: 3px !important;
    border-radius: 14px !important;
}
.tabbrowser-tab[selected] {
    z-index: auto !important;
}

/*.urlbar-icon,
toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon {
    border-radius: 12px !important;
}*/

menugroup:hover > menuitem {
    border-radius: 16px !important;
}

/* URL Bar and Search Bar shape */
#urlbar,
#searchbar,
#urlbar-input,
#urlbar-input-container {
    border-radius: 12px !important;
}
#urlbar-background {
    border: none !important;
    border-radius: 12px !important;
}

/* Find Bar shape */
input.findbar-textbox {
    border-radius: 9px !important;
    font-size: 14px !important;
}

numbered_tabs.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Density variables */
    :root:not([uidensity="touch"]) {
        --tab-number-position: calc(var(--toolbarbutton-inner-padding) * 1.6 );
    }
    :root[uidensity="touch"] {
        --tab-number-position: calc(var(--toolbarbutton-inner-padding) * 1.8 );
    }

    /* Show the tab number after tab content, right-align it, and fix its position directly on the tab close button */
    #tabbrowser-tabs {
        counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */
    }
    .tabbrowser-tab .tab-content::after {
        content: counter(nth-tab) " ";
        counter-increment: nth-tab;
        position: absolute !important;
        position: fixed;
        right: 24px;
        bottom: var(--tab-number-position);
        width: 0 !important;
    }

    /* Hide tab close button on unpinned tabs, and reserve space for tab number */
    .tabbrowser-tab:not(:hover,[pinned]) .tab-close-button {
        display: initial !important;
        visibility: hidden !important;
    }

    /* Hide tab number on pinned tabs and when hovering on unpinned tabs so that tab close button is clickable */
    .tabbrowser-tab[pinned] .tab-content::after,
    .tabbrowser-tab:not([pinned]):hover .tab-content::after {
        visibility: hidden !important;
    }

    /* Adjust tab close button opacity, border, and shape */
    .tab-close-button {
        position: absolute !important;
        margin-right: -8px !important;
        opacity: 0.5 !important;
        border: 2px solid white !important;
        height: 36px !important;
        width: 36px !important;
    }

}

tab_animated_active_border.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_animated_active_border.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Creates a colorful animated border around active tab */

@keyframes filter {
    from {
        filter: hue-rotate(0deg)
    }
    to {
        filter: hue-rotate(360deg)
    }
}
 
.tabbrowser-tab[selected] > .tab-stack::before {
    grid-area: 1/1;
    content: "";
    display: inherit;
    margin-block: var(--tab-block-margin);
    border-radius: var(--tab-border-radius);
    z-index: 0;
    background-image: conic-gradient(
        hsl(0 100% 70%),
        hsl(60 100% 45%) 70deg,
        hsl(120 100% 55%) 105deg,
        hsl(160 100% 60%) 160deg,
        hsl(200 100% 60%) 200deg,
        hsl(240 100% 65%) 255deg,
        hsl(300 100% 60%) 290deg,
        hsl(360 100% 70%) 360deg);
    background-size: cover;
    background-position: center;
    animation: filter steps(30) 2s infinite;
}
.tab-background[selected] {
    border: 1px solid transparent !important;
    outline: none !important;
    background-clip: padding-box !important;
}

some code by reddit users /u/BatDogOnBatMobile, /u/moko1960, and /u/It_Was_The_Other_Guy (modified by user0):

tab_counter.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Source from reddit users /u/BatDogOnBatMobile, /u/moko1960, and /u/It_Was_The_Other_Guy
     https://teddit.net/r/FirefoxCSS/comments/s4wsww/
     https://teddit.net/r/FirefoxCSS/comments/yb8tr9/ */

/* Show Tab Manager Menu button */
#alltabs-button {
    display: -moz-box !important;
}

/* Tab Manager Menu button tab counter */
#TabsToolbar-customization-target {
    counter-reset: tabCount;
}
.tabbrowser-tab {
    counter-increment: tabCount;
}
#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
    visibility: collapse !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
     position: relative !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
    content: counter(tabCount);
    color: var(--toolbarbutton-icon-fill);
    opacity: var(--toolbarbutton-icon-fill-opacity);
    position: absolute;
    bottom: var(--toolbarbutton-inner-padding);
    left: 50%;
    transform: translateX(-50%);
}
#alltabs-button > .toolbarbutton-badge-stack {
    border-radius: var(--toolbarbutton-border-radius);
}

/* Tab Manager Menu tab counter */
#allTabsMenu-allTabsViewTabs, /* before FF 106 */
#allTabsMenu-allTabsView-tabs { /* since FF 106 */
    counter-reset: nn_tabs 0 !important;
}
.all-tabs-button::before {
    display: -moz-inline-box !important;
    -moz-padding-end: 8px !important;
    content: counter(nn_tabs) !important;
    font-size: 12px !important; 
    margin-top: -2px !important; 
    margin-right: -2px !important;
}
.all-tabs-item {
    counter-increment: nn_tabs !important;
}

some code by me (user0):

extensions_menu.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Remove header, separators, and manage-extensions button */
    #unified-extensions-panel .panel-header,
    #unified-extensions-panel toolbarseparator,
    #unified-extensions-manage-extensions {
        display: none !important;
    }

    /* Adjust button padding and font size for secondary text */
    #unified-extensions-panel .subviewbutton {
        padding: 6px !important;
    }
    .unified-extensions-item-message {
        font-size: 75% !important;
    }

    /* Fix flickering */
    #unified-extensions-panel {
        --uei-icon-size: 20px;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100vw !important;
    }
    #unified-extensions-view {
        margin-top: 6px !important;
        height: 325px !important;
        max-height: 325px !important;
        width: calc(100vw - 30px) !important;
    }

    /* Allow extensions to use full popup */
    .webextension-popup-browser {
        height: 100% !important;
        min-height: 100% !important;
        width: calc(100vw - 20px) !important;
        min-width: calc(100vw - 20px) !important;
    }

}

custom_rules.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Disable tab loading burst
   (because it's annoying) */
.tab-loading-burst {
    display: none !important;
}

/* Tabs Toolbar and Container tab line color
   (hides container tab line above tab by making it the same color as the Tabs Toolbar) */
#TabsToolbar,
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
    background-color: var(--tab-bgcolor) !important;
}

/* Menubar color
   (hides the line at the top of the screen when Menubar is hidden) */
toolbar[type=menubar] {
    background-color: black !important;
    color: var(--toolbar-color) !important;
}

/* Navbar bottom border color */
#navigator-toolbox {
    border-bottom-color: black !important;
}

/* Resist Fingerprinting Letterbox background color */
:root {
    --tabpanel-background-color: black !important;
}

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Remove Fullscreen popup */
    .pointerlockfswarning {
        display: none !important;
    }

    /* Remove tab overflow indicators */
    spacer[part=overflow-start-indicator],
    spacer[part=overflow-end-indicator] {
        display: none !important;
    }

    /* Remove spacers on left and right of main tab view */
    #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
        margin-inline-start: 0px !important;
    }
    .titlebar-spacer[type="post-tabs"] {
        display: none !important;
    }

    /* Remove items from URL Bar */
    #tracking-protection-icon-container,
    #identity-permission-box,
    #userContext-indicator,
    /*#page-action-buttons,*/
    #pageActionButton {
        display: none !important;
    }

    /* URL Bar font resizing */
    #urlbar-input {
        font-size: 10pt !important;
    }
    #urlbar[focused] #urlbar-input {
        font-size: calc(var(--urlbar-height) - 9px) !important;
    }

    /* Hide inactive tab close button (x)
         to prevent accidentally closing tabs when selecting them */
    .tab-close-button:not([selected]),
    .tabbrowser-tab:not([selected]):hover .tab-close-button {
        visibility: hidden !important;
    }

}

single_tab_mode-alt.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/******************************************/
/*               IMPORTANT:               */
/*                                        */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar.         */
/*                                        */
/* For the best results, consider moving  */
/* the Unified Extensions Menu button to  */
/* the left of the URL Bar and removing   */
/* less important toolbar items by using  */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile.  */
/******************************************/

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Density variables */
    :root:not([uidensity="touch"]) {
        --PanelUI-menu-button-position: 4px;
        --alltabs-button-height: 32px;
        --alltabs-button-width: 32px;
        --alltabs-button-position: 48px;
        --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
        --urlbar-width: calc(100vw - 166px);
    }
    :root[uidensity="touch"] {
        --PanelUI-menu-button-position: 5px;
        --alltabs-button-height: 34px;
        --alltabs-button-width: 34px;
        --alltabs-button-position: 54px;
        --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
        --urlbar-width: calc(100vw - 171.5px);
    }

    /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */
    #nav-bar[inFullscreen],
    #TabsToolbar[inFullscreen],
    .titlebar-buttonbox-container,
    #new-tab-button,
    #tabs-newtab-button {
        display: none !important;
    }

    /* Hide unpinned inactive tabs */
    .tabbrowser-tab:not([pinned]):not([selected]) {
        visibility: collapse !important;
        min-width: 0 !important;
    }

    /* Expand unpinned active tab */
    #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
        min-width: 100% !important;
    }
    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
        min-width: 83.5% !important;
    }

    /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
    #PanelUI-menu-button {
        position: absolute !important;
        right: 0px !important;
        bottom: var(--PanelUI-menu-button-position) !important;
    }

    /* Move Tab Manager Menu button to right of URL Bar */
    :root {
        --tab-border-radius: var(--toolbarbutton-border-radius) !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack {
        height: var(--alltabs-button-height) !important;
        width: var(--alltabs-button-width) !important;
    }
    #alltabs-button {
        position: absolute;
        top: var(--alltabs-button-position) !important;
        right: 41.5px;
        z-index: 2 !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack::before {
        bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
    }

    /* Allow room for Tab Manager Menu button */
    #nav-bar {
        padding-right: 67px !important;
    }

    /* Reduce URL Bar width */
    #urlbar-container {
        max-width: var(--urlbar-width) !important;
    }

}

alt-single_tab_mode-alt.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/******************************************/
/*               IMPORTANT:               */
/*                                        */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar.         */
/*                                        */
/* For the best results, consider moving  */
/* the Unified Extensions Menu button to  */
/* the left of the URL Bar and removing   */
/* less important toolbar items by using  */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile.  */
/******************************************/

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Density variables */
    :root:not([uidensity="touch"]) {
        --PanelUI-menu-button-position: 4px;
        --alltabs-button-height: 32px;
        --alltabs-button-width: 32px;
        --alltabs-button-position: 3.5px;
        --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
        --urlbar-width: calc(100vw - 166px);
    }
    :root[uidensity="touch"] {
        --PanelUI-menu-button-position: 5px;
        --alltabs-button-height: 34px;
        --alltabs-button-width: 34px;
        --alltabs-button-position: 4.5px;
        --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
        --urlbar-width: calc(100vw - 171.5px);
    }

    /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */
    #nav-bar[inFullscreen],
    #TabsToolbar[inFullscreen],
    .titlebar-buttonbox-container,
    #new-tab-button,
    #tabs-newtab-button {
        display: none !important;
    }

    /* Hide unpinned inactive tabs */
    .tabbrowser-tab:not([pinned]):not([selected]) {
        visibility: collapse !important;
        min-width: 0 !important;
    }

    /* Expand unpinned active tab */
    #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
        min-width: 100% !important;
    }
    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
        min-width: 83.5% !important;
    }

    /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
    #PanelUI-menu-button {
        position: absolute !important;
        right: 0px !important;
        bottom: var(--PanelUI-menu-button-position) !important;
    }

    /* Move Tab Manager Menu button to right of URL Bar */
    :root {
        --tab-border-radius: var(--toolbarbutton-border-radius) !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack {
        height: var(--alltabs-button-height) !important;
        width: var(--alltabs-button-width) !important;
    }
    #alltabs-button {
        position: absolute;
        bottom: var(--alltabs-button-position) !important;
        right: 41.5px;
        z-index: 2 !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack::before {
        bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
    }

    /* Allow room for Tab Manager Menu button */
    #nav-bar {
        padding-right: 67px !important;
    }

    /* Reduce URL Bar width */
    #urlbar-container {
        max-width: var(--urlbar-width) !important;
    }

}

single_tab_mode.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/******************************************/
/*               IMPORTANT:               */
/*                                        */
/* One of the things this code will do is */
/* to move the Tab Manager Menu button to */
/* the right side of the URL Bar.         */
/*                                        */
/* For the best results, consider moving  */
/* the Unified Extensions Menu button to  */
/* the left of the URL Bar and removing   */
/* less important toolbar items by using  */
/* the "Customize Toolbar" feature, or by */
/* using a user.js file in your profile.  */
/******************************************/

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Density variables */
    :root:not([uidensity="touch"]) {
        --PanelUI-menu-button-position: 4px;
        --alltabs-button-height: 32px;
        --alltabs-button-width: 32px;
        --alltabs-button-position: 4.5px;
        --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
        --urlbar-width: calc(100vw - 166px);
    }
    :root[uidensity="touch"] {
        --PanelUI-menu-button-position: 5px;
        --alltabs-button-height: 34px;
        --alltabs-button-width: 34px;
        --alltabs-button-position: 5.5px;
        --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 );
        --urlbar-width: calc(100vw - 171.5px);
    }

    /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */
    #nav-bar[inFullscreen],
    #TabsToolbar[inFullscreen],
    .titlebar-buttonbox-container,
    #new-tab-button,
    #tabs-newtab-button {
        display: none !important;
    }

    /* Hide unpinned inactive tabs */
    .tabbrowser-tab:not([pinned]):not([selected]) {
        visibility: collapse !important;
        min-width: 0 !important;
    }

    /* Expand unpinned active tab */
    #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
        min-width: 100% !important;
    }
    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
        min-width: 83.5% !important;
    }

    /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */
    #PanelUI-menu-button {
        position: absolute !important;
        right: 0px !important;
        bottom: var(--PanelUI-menu-button-position) !important;
    }

    /* Move Tab Manager Menu button to right of URL Bar */
    :root {
        --tab-border-radius: var(--toolbarbutton-border-radius) !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack {
        height: var(--alltabs-button-height) !important;
        width: var(--alltabs-button-width) !important;
    }
    #alltabs-button {
        position: absolute;
        bottom: var(--alltabs-button-position) !important;
        right: 41.5px;
        z-index: 2 !important;
    }
    #alltabs-button > .toolbarbutton-badge-stack::before {
        bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important;
    }

    /* Allow room for Tab Manager Menu button */
    #nav-bar {
        padding-right: 67px !important;
    }

    /* Reduce URL Bar width */
    #urlbar-container {
        max-width: var(--urlbar-width) !important;
    }

}

hide_tab_manager_menu_button.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Remove Tab Manager Menu button */
    #alltabs-button {
        display: none !important;
    }

}

hide_newtab_+_new-tab_buttons.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Hide Newtab and New-tab buttons */
    #new-tab-button,
    #tabs-newtab-button {
        display: none !important;
    }

}

new-tab-button.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Apply this customization only on smaller screens in portrait mode */
@media (orientation: portrait) and (max-width: 720px) {

    /* Hide non-overflow Newtab button */
    #tabs-newtab-button {
        display: none !important;
    }

    /* Display overflow New-tab button by default and fix alignment */
    #new-tab-button { 
        display: initial !important;
        margin-top: 4px !important;
    }

}

tabs_larger_min-width.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Tab min-width resizing */
#tabbrowser-tabs {
    --tab-min-width: 24vw !important;
}

glow.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Inactive tab glow on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}

/* Newtab buttons (+) and Tab Manager button (v) glow on hover */
#alltabs-button:hover > .toolbarbutton-badge-stack,
#new-tab-button:hover,
#tabs-newtab-button:hover {
    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}

/* Back button glow on hover */
#back-button:not([disabled]):hover > .toolbarbutton-icon {
    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}

/* Forward button glow on hover */
#forward-button:not([disabled]):hover > .toolbarbutton-icon {
    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}

/* Urlbar glow */
#urlbar {
    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}
/* Urlbar glow on focus */
#urlbar[focused] {
    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
    box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important;
}
/* Urlbar glow on hover */
#urlbar:hover {
    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
    box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important;
}

/* Navbar buttons glow */
#nav-bar toolbarbutton:hover:not(#back-button):not(#forward-button) { 
    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
}

colorful_inactive_tabs.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Inactive tab color */
.tabbrowser-tab:not(:hover,[pinned], [selected]) > .tab-stack > .tab-background {
    background-color: var(--lwt-selected-tab-background-color) !important;
}

/* Inactive tab color on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
    background-color: var(--lwt-accent-color-inactive) !important;
}

/* Inactive pinned tab icon color */
.tab-icon-image[pinned]:not([selected]) {
    color: var(--lwt-accent-color) !important;
}

/* Inactive tab text and close button (x) color */
.tab-text:not([pinned]):not([selected]),
.tab-icon-image:not([pinned]):not([selected]),
.tab-close-button:not([pinned]):not([selected]) {
    color: var(--lwt-text-color) !important;
}

/* Inactive tab text and close button (x) color on hover */
.tabbrowser-tab:not([selected]):hover .tab-text,
.tabbrowser-tab:not([selected]):hover .tab-icon-image,
.tabbrowser-tab:not([selected]):hover .tab-close-button {
    color: var(--lwt-accent-color) !important;
}

borderless_transparent_active_tab.css

/* Copyright 2023 user0
 * SPDX-License-Identifier: MPL-2.0 */

/* Tab color */
.tab-background {
    background-color: transparent !important;
}

/* Tab border */
.tab-background[selected] {
    border: 0 transparent !important;
}

Note:

single_tab_mode-alt.css = Tab Bar & Nav Bar at top of screen
alt-single_tab_mode-alt.css = Tab Bar at top of screen + Nav Bar at bottom of screen
single_tab_mode.css = Tab Bar & Nav Bar at bottom of screen