Stylesheets for collapsible vertical tabs for Firefox. Tabs expand horizontally when hovered, similar to Edge's.

userChrome.css

/*
How to use this CSS:

0. Install the Sidebery extension: https://addons.mozilla.org/en-US/firefox/addon/sidebery/.
1. In Sidebery settings:
    a. Set the title preface must as "[S] " (without quotes).
        This is used by CSS rules below to identify when Sidebery is active.
    b. Set 'Tabs tree structure' to false -- this stylesheet doesn't adapt to
        multiple tab levels, but feel free to tweak it!
    c. Copy and paste the "SIDEBERY STYLES" section below in
        Sidebery's Styles Editor -> Sidebar.
    d. Optionally sync Sidebery settings to Firefox account to get other customizations.
2. Go to about:support -> copy 'user folder' location, setting it as the variable $FF_USER_DIR.
3. Move CSS files to FF user location:
    mv userChrome.css $FF_USER_DIR/userChrome.css
    mv userContent.css $FF_USER_DIR/userContent.css
4. Go to about:config -> `toolkit.legacyUserProfileCustomizations.stylesheets` to TRUE.
5. Restart Firefox ( about:restartrequired to reopen your current tabs ).

===================================================================

TWEAKING AND DEBUGGING:

A. How to inspect browser interface:
    Source: https://superuser.com/questions/1608096/how-to-inspect-firefoxs-ui

    1. Enable the Browser Toolbox

        Press F12 to open the Page Inspector.
        Alternate: Right click the page then "Inspect Element (Q)".

        Press F1 to open the Page Inspector Settings.
        Alternate: In the top right of the Page Inspector next to the close button; press the "⋯" button then "Settings".

        Ensure the following settings are checked:
            "Enable Browser chrome and add-on debugging toolbox"
            "Enable remote debugging"

    2. Open the Browser Toolbox

        Press alt, "Tools", "Web Developer" then "Browser Toolbox".
        Alternate: Press ctrl+alt+shift+i

B. How to inspect extensions interface:
    Source: https://superuser.com/questions/1608096/how-to-inspect-firefoxs-ui

    You can use the Browser Toolbox to inspect extensions. Additionally you can inspect extensions through about:debugging.

    1. Navigate to about:debugging.
    2. Go to the "This Firefox" page.
    3. Find the extension you want to inspect.
    4. Press "Inspect" and a console window should open.
    5. Change *targeted iframe* if needed by clicking the blue "layout" icon
        in the upper right corner, close to the ellipsis menu icon.
*/

/*
====================================================================
SECTION: SIDEBERY STYLES
    => PLACE THIS SECTION MANUALLY IN SIDEBERY'S "CUSTOM STYLES"

#root.root {--ctx-menu-padding: 0.3em;}
#root.root {--ctx-menu-opt-padding: 0.3em;}
#root.root {--ctx-menu-icon-opt-height: 30px;}
#root.root {--d-swift: 0.1s;}

#root.root {--nav-btn-fg: #ccc;}
#root.root {--nav-delimiter-size: 1em;}
#root.root {--nav-hidden-btn-border-radius: 0.5em;}
#root.root {--nav-btn-width: 36px;}
#root.root {--tabs-height: 36px;}
#root.root {--tabs-font: 0.9375rem system-ui;}
#root.root {--tabs-count-font: 0.5625rem system-ui;}
#root.root {--tabs-pinned-width: 32px;}
#root.root {--tabs-inner-gap: 10px;}
#root.root {--tabs-close-btn-margin: 3px;}
#root.root {--tabs-lvl-opacity: 0.01;}
#root.root {--tabs-activated-bg: rgba(255,255,255,0.141);}
#root.root {--tabs-normal-fg: #ccc;}
#root.root {--tabs-border-radius: 0.5em;}

END OF SIDEBERY STYLES SECTION
====================================================================
*/

/*
=============================
SECTION: BLURRED TRANSPARENCY
(and monospace font for urlbar)
=============================
*/
@import url('blurredfox/parts/customization-window.css');

#urlbar-input {
    font-family: monospace !important;
}

#urlbar[breakout][breakout-extend][open] {
    /* border: 1px dotted orangered !important; */
    background-color: #0d1320d3;
    background-image: url(./image/noise-512x512.png);
    /*
        attempt of blurring the background of the expanded
        tab area - unfortunately it does not blur the page
        contents in the back, even though the backdrop filter
        now works in Firefox.
    */
    -webkit-backdrop-filter: blur(6px) !important;
    -moz-backdrop-filter: blur(6px) !important;
    -ms-backdrop-filter: blur(6px) !important;
    -o-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    font-family: monospace !important;
    border-radius: 0 0 2em 2em;
    transition: all 0.2s ease-in-out;
    height: 0;
    margin: 0 !important;
    padding: 0 !important
}

.menupopup {
    /* border: 2px dashed rgb(194, 133, 41) !important; */
    background-image: url(image/noise-512x512.png) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    backdrop-filter: saturate(180%) blur(35px);
}

.urlbarView-body-inner {
    /*     border: 1px solid royalblue !important; */
    /*     background-color: transparent; */
    color: white;
    padding: var(--s4);
    animation-duration: 1s;
    animation-delay: 2s;
    animation-fill-mode: both;
    transition: 0.2s;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.192);
    box-shadow: 2px 2px 8px #00000021;
}

#urlbar-background {
    border: 0 !important;
    /* border: 1px solid cyan !important; */
    /* enable eased transitions */
    display: none !important;
    transition: all 0.2s ease-in-out;
}

/*
===============================
SECTION: SIDEBERY MINIMAL STYLE
===============================

Based on: https://github.com/ongots/firefox-sidebery-minimal-style
*/

@media (prefers-color-scheme: dark),
(prefers-color-scheme: no-preference) {
    * {
        --bg: rgb(9, 9, 9);
        --menu: #151515;
        --hover: #10201b8e;
        --active: #7a00c096;
        --text: #ddd;
        --text-hover: #eee;
        --text-active: #fff;
        --url-color: #8F94D2;
        --tab-line-color: rgb(41, 248, 158);
        --lwt-toolbarbutton-icon-fill: rgb(176, 255, 217) !important;
    }

    .menu-right,
    #screenshots_mozilla_org-menuitem-_create-screenshot>hbox:nth-child(1)>image:nth-child(1) {
        filter: contrast(0%)
    }

    [checked="true"] .menu-iconic-left {
        filter: contrast(300%)
    }
}

@media (prefers-color-scheme: light) {
    * {
        --bg: #fafafa;
        --menu: #fafafa;
        --hover: #11533c7c;
        --active: #7a00c096;
        --text: #111;
        --text-hover: rgba(37, 181, 124, 0.408);
        --url-color: #4353B6;
        --tab-line-color: #FF1B00;
        --lwt-toolbarbutton-icon-fill: #222 !important;
    }

    spacer {
        filter: invert(100%)
    }
}

* {
    scrollbar-width: thin;
    scrollbar-color: #80808060 transparent;
    --toolbarbutton-border-radius: 0;
    --arrowpanel-dimmed: var(--hover) !important;
    --arrowpanel-dimmed-further: var(--active) !important;
    --lwt-accent-color: var(--bg) !important;
    --lwt-background-tab-separator-color: transparent;
    --tabs-border-color: transparent;
    --tab-min-width: 84px;
    --toolbar-bgcolor: var(--bg) !important;
    --toolbar-bgimage: none;
    --toolbar-color: var(--text) !important;
    --toolbarbutton-outer-padding: 0;
    --toolbarbutton-hover-background: var(--hover) !important;
    --toolbarbutton-active-background: var(--hover) !important;
    /*  urlbar  */
    --autocomplete-popup-highlight-background: var(--hover) !important;
    --autocomplete-popup-highlight-color: var(--url-color) !important;
    --urlbar-popup-action-color: var(--url-color) !important;
    --urlbar-popup-url-color: var(--url-color) !important;
    /*  searchbar */
    --autocomplete-popup-background: var(--bg);
    --autocomplete-popup-color: var(--text);
    --lwt-sidebar-background-color: var(--bg) !important;
    --lwt-sidebar-text-color: var(--text) !important;
}

:root[uidensity="compact"] * {
    font-size: 10pt !important
}

:root[tabsintitlebar] {
    background-color: var(--bg) !important;
    color: var(--text) !important
}

/*   ______ TABS ______   */

.titlebar-color {
    background-color: var(--bg)
}

hbox.titlebar-spacer:nth-child(1) {
    display: none !important
}

.tabbrowser-tab[pinned] {
    background-color: var(--bg) !important;
    z-index: 3 !important
}

.tab-line:not([selected]) {
    height: 0 !important
}

.tab-background[multiselected] {
    background: #223B82 !important
}

.tabbrowser-tab[multiselected] :hover .tab-background:not([selected]) {
    background-color: #2C4890 !important
}

@media (prefers-color-scheme: light) {
    .tab-background[multiselected] {
        background-color: #4B7CFC !important
    }

    .tabbrowser-tab[multiselected] :hover .tab-background:not([selected]) {
        background-color: #3E6AE5 !important
    }

    .tab-background[selected]:not([multiselected]) {
        background: var(--hover) !important
    }
}

.tab-background[multiselected]>.tab-background-inner {
    background-color: transparent !important
}

.tabbrowser-tab:hover .tab-background:not([selected]) {
    background-color: var(--hover) !important
}

.all-tabs-item {
    opacity: .8
}

.all-tabs-item[selected] {
    opacity: 1;
    box-shadow: none !important;
    background-color: var(--active) !important
}

.panel-viewstack {
    max-height: 100% !important
}

.tabbrowser-tab::after {
    border-left: 0 !important
}

.tab-content {
    padding: 0 4px !important
}

/*   Container indicator   */

.tab-bottom-line {
    background: var(--identity-tab-color) !important;
    margin-bottom: 0 !important
}

@media (prefers-color-scheme: dark),
(prefers-color-scheme: no-preference) {
    .tab-bottom-line {
        height: 1px !important
    }
}

/*   Discard tabs   */

.tabbrowser-tab:not([selected="false"])[pending] .tab-content {
    opacity: .7 !important
}

.tabbrowser-tab[pending]:hover .tab-content,
.tab-label:-moz-window-inactive {
    opacity: .8 !important
}

.titlebar-spacer {
    width: 14px !important
}

/*   Hide Tab bar if Sidebery is Active   */

@media(-moz-windows-default-theme) {
    [sizemode="maximized"][titlepreface*="[S]"] #navigator-toolbox {
        margin: 8px 0 0
    }

    [uidensity="compact"][sizemode="normal"]:root {
        --tab-min-height: 31px !important;
        --tabs-navbar-shadow-size: 0 !important
    }

    [uidensity="normal"][sizemode="normal"]:root {
        --tab-min-height: 32px !important
    }
}

[titlepreface*="[S]"] #titlebar,
[titlepreface*="[S]"] #tabbrowser-tabs,
[titlepreface*="[S]"] #tabContextMenu,
[titlepreface*="[S]"] #sidebar-header,
[hidden]#sidebar-box {
    display: none
}

/*   Dynamic sidebar   */

[titlepreface*="[S]"] #sidebar-box {
    max-width: 40px
}

#sidebar-box {
    /* CHANGE COLLAPSED SIDEBAR HERE */
    /* border: 2px dashed orangered !important; */

    overflow: hidden;
    position: fixed;
    display: inherit;
    opacity: 0.95;
    transition: 0.2s;
    transition-timing-function: ease-in-out;
    backdrop-filter: blur(5px);
    z-index: 3;

    /* width of collapsed sidebar */
    min-width: calc(40px * 1) !important;
    max-width: 40px !important;
    width: calc(40px * 1) !important;

    /* default sidebar height */
    min-height: 100%;

}

/* => Sidebar with reduced height
    Commenting this block out makes the sidebar
    use the entire viewport height.
*/
#sidebar-box {
    min-height: 50vh;
    max-height: calc(100% - 40px);
    border-radius: 0 0 2em 0;
}

/* End of sidebar with reduced height */

[inFullscreen] #sidebar-box {
    max-width: 5px;
    height: 100%;
    top: 1px
}

#sidebar-box:hover {
    /* border: 2px dashed rgb(183, 20, 131) !important; */
    /* expanded width */
    min-width: unset !important;
    max-width: calc(40px * 6) !important;
    width: calc(40px * 6) !important;
}

#sidebar {
    /* THIS IS THE SIDEBAR */
    /* border: 2px dotted blue !important; */
    max-width: 50vw !important;
    width: calc(40px * 6) !important;
    height: 100%;
    background-color: transparent;
    background-image: none !important;
}

.ScrollBox>.scroll-container>.scrollable {
    background-color: transparent !important;
    background-image: none !important;
}

#sidebar .container {
    background-color: var(--bg) !important;
}

[titlepreface*="[S]"] #appcontent {
    /* margin-left: 28px; */
    margin-left: 34px;
    /* border: 1px solid green !important; */
}

[inFullscreen] #appcontent {
    margin-left: -20px;
    /* border: 1px solid aqua !important; */
}

@media(-moz-windows-default-theme) {
    [titlepreface*="[S]"] #appcontent {
        margin-left: 100px;
        /* border: 1px solid darkmagenta !important; */
    }

    [inFullscreen] #appcontent {
        /* border: 1px solid magenta !important; */
        margin-left: 0
    }
}

/*   Firefox sidebar   */

#sidebar-header {
    width: 100% !important
}

#sidebar-header,
#search-box {
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--bg) !important;
    color: var(--text) !important
}

treechildren::-moz-tree-separator {
    border: 0 !important
}

/*   Show window buttons - + x */

/* @media(-moz-windows-default-theme){[sizemode="maximized"][titlepreface*="[S]"] #navigator-toolbox {margin: inherit}}
[sizemode="maximized"][titlepreface*="[S]"] #titlebar,
[sizemode="normal"][titlepreface*="[S]"] #titlebar {display: inherit !important; margin-bottom: -29px}
[inFullscreen][titlepreface*="[S]"] #titlebar {display: inherit !important; margin-bottom: -24px}
[sizemode="maximized"][titlepreface*="[S]"] #nav-bar,
[sizemode="normal"][titlepreface*="[S]"] #nav-bar {margin-right: 138px}
[inFullscreen][titlepreface*="[S]"] #nav-bar {margin-right: 108px}
[inFullscreen][titlepreface*="[S]"] #TabsToolbar-customization-target {display:none} */

/*   ______ NAVBAR ______   */

:root:not([uidensity="compact"]) .browser-toolbar #back-button {
    padding-block: 0 !important;
    padding-inline: 0 !important;
    border-radius: 0 !important
}

:root:not([uidensity="compact"]) .browser-toolbar #back-button>.toolbarbutton-icon {
    background-color: var(--bg) !important;
    border-radius: 0 !important;
    width: 32px !important;
    height: 32px !important;
    padding: 8px !important
}

:root:not([uidensity="compact"]) .browser-toolbar #back-button:hover>.toolbarbutton-icon {
    background-color: var(--hover) !important
}

:root:not([uidensity="compact"]) .browser-toolbar #back-button:active>.toolbarbutton-icon {
    background-color: var(--active) !important
}

:root:not([uidensity="compact"]) {
    --toolbarbutton-inner-padding: 8px !important
}

/*   Bookmarks   */

.openintabs-menuitem,
.bookmarks-actions-menuseparator {
    display: none
}

.bookmark-item menuseparator {
    height: 8px
}

/*   Urlbar, Searchbar */

#PlacesToolbarItems>toolbarbutton>label,
#identity-box,
#urlbar-input {
    margin-bottom: 1px !important;
    color: var(--text) !important
}

.searchbar-textbox {
    margin-bottom: 2px !important;
    color: var(--text) !important
}

#PlacesToolbarItems>toolbarbutton:hover>label {
    color: var(--text-hover) !important
}

#urlbar-input::-moz-selection {
    background-color: var(--text) !important;
    color: var(--bg)
}

@media (prefers-color-scheme: light) {
    #urlbar-input::-moz-selection {
        background-color: #444 !important
    }
}

#identity-popup {
    --popup-width: auto !important
}

#urlbar-container {
    --urlbar-container-height: 40px !important
}

:root[uidensity="compact"] #urlbar-container {
    --urlbar-container-height: 26px !important
}

#search-container {
    margin: -2px 0 !important
}

#urlbar {
    color: var(--lwt-toolbarbutton-icon-fill) !important;
    top: 1px !important
}

#urlbar-background,
#navigator-toolbox #searchbar {
    background-color: var(--bg) !important
}

/* background of urlbar when it's closed */
#urlbar:not([open]) #urlbar-background,
#searchbar {
    box-shadow: none !important;
    border: 0;
    border-radius: 0;
    opacity: 1;
    filter: blur(0);
    -webkit-filter: blur(0);
}

/* background of urlbar when it's open */
#urlbar[breakout][breakout-extend][open]>#urlbar-background {
    box-shadow: 0 0 0 1px var(--hover) !important;
    border: 0;
    border-radius: 0 0 2em 2em;
    opacity: 0.5;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

.urlbarView-row {
    color: var(--text)
}

.urlbarView-row[selected] .urlbarView-title {
    color: var(--text-hover)
}


#urlbar[breakout][breakout-extend] {
    left: 0 !important;
    width: 100% !important
}

#urlbar[breakout][breakout-extend]>#urlbar-input-container {
    padding-inline: 0 !important;
    padding-block: 0 !important;
    height: 40px !important
}

[uidensity="compact"] #urlbar[breakout][breakout-extend]>#urlbar-input-container {
    height: 26px !important
}

#urlbar .search-one-offs:not([hidden]) {
    font-family: monospace !important;
    ;
    padding-block: 4px !important
}

#tracking-protection-icon-container {
    padding: 0 2px !important
}

#identity-box {
    margin: 0 3px 0 0 !important;
    padding: 0 2px !important
}

#identity-icon,
#identity-icon-label {
    margin-bottom: 2px !important
}

#urlbar[pageproxystate="invalid"] #identity-box {
    margin: 0 6px 0 11px !important
}

#pageActionButton,
#editBookmarkPanelImage,
.search-one-offs>hbox:nth-child(1),
#urlbar-anon-search-settings-compact,
#searchbar-anon-search-settings {
    display: none !important
}

/*   ______ Notifications ______   */

:root .toolbarbutton-badge {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 0 4px !important;
    color: var(--text) !important;
    font-size: 7.5pt !important;
    opacity: .9;
    text-shadow: -1px 2px 3px var(--bg), -2px 1px 3px var(--bg), -2px 1px 4px var(--bg), -2px 2px 4px var(--bg) !important
}

.toolbarbutton-badge:hover {
    text-shadow: -1px 2px 3px var(--hover), -2px 1px 3px var(--hover), -2px 1px 4px var(--hover), -2px 2px 4px var(--hover) !important
}

#PanelUI-button,
#PanelUI-menu-button {
    padding-inline: 0 !important;
    margin-inline: 0 !important
}

/*   ______ MENU ______   */

#appMenu-addons-button,
#appMenu-preferences-button {
    -moz-box-ordinal-group: 0
}

.panel-arrow,
#appMenu-edit-controls,
#appMenu-open-file-button,
#appMenu-fxa-label,
.PanelUI-subView toolbarseparator,
#appMenu-protection-report-button,
#appMenu-private-window-button,
#appMenu-new-window-button,
#appMenu-zoom-controls,
#appMenu-find-button,
#appMenu-customize-button,
#appMenu-whatsnew-button,
#appMenu-more-button,
#appMenu_menu_HelpPopup_reportPhishingtoolmenu[disabled],
[oncommand="openHelpLink('firefox-help')"],
[oncommand="openTourPage();"],
.panel-subview-footer,
.panel-footer {
    background-color: var(--menu) !important
}

.panel-subview-footer:not([disabled]):hover {
    background-color: var(--hover) !important
}

.panel-subview-body {
    padding: 0 !important
}

.panel-arrowcontent {
    background-color: var(--menu) !important;
    margin-top: 6px !important;
    margin-right: 0 !important
}

panel {
    margin-inline: -16px !important
}

:root[uidensity="compact"] panel {
    margin-inline: -14px !important
}

menupopup,
menuseparator,
menuitem:not([active]),
menucaption,
menupopup menu,
tooltip,
panelview {
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--menu) !important;
    color: var(--text) !important;
    padding: 3px
}

#appMenu-popup toolbarbutton,
#widget-overflow-mainView toolbarbutton {
    padding: 6px !important
}

menuitem>label {
    margin-bottom: 2px !important
}

menupopup {
    padding: 0 !important
}

menupopup>menu>menupopup {
    margin-inline-start: 0 !important;
    margin-top: 0 !important
}

menuitem:hover,
menupopup menu:hover,
toolbarbutton:hover:not([disabled], .titlebar-close, .close-icon, #nav-bar #back-button, toolbaritem.all-tabs-item[selected] > toolbarbutton),
.menu-iconic:hover,
.menu-iconic[open],
.downloadMainArea:hover,
.downloadButton:hover,
#downloadsHistory:hover {
    background-color: var(--hover) !important;
    color: var(--text-hover) !important
}

#identity-box:hover,
#identity-box[open],
#tracking-protection-icon-container:hover,
#tracking-protection-icon-container[open],
.urlbar-icon-wrapper:hover,
.urlbar-icon-wrapper[open] {
    background-color: var(--hover) !important
}

.downloadsPanelFooterButton:hover {
    outline: 0 !important
}

#statuspanel-label {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    opacity: .7
}

#alertBox {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--text) !important
}

/*   ______ 'Find' (search) bar (Ctrl + F) ______   */

/* Move the "Find" Bar to the top of the page */
.browserContainer>findbar {
    -moz-box-ordinal-group: 0;
    /* -moz-box-ordinal-group seemingly stopped working,
    on v112 or v113 so I changed it to an absolute position below. */
    transition: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition-duration: 200ms;
    /* extra styling - move it to top right, narrower, and rounded */
    position: absolute;
    top: 0;
    right: 0;
    margin: 1em;
    width: 100%;
    border-radius: 1em;
    /* this is a vertical list now */
    max-width: 20em;

    /* unfortunately this blur doesn't work - left as example */
    background-image: none;
    -webkit-backdrop-filter: blur(6px);
    -moz-backdrop-filter: blur(6px);
    -ms-backdrop-filter: blur(6px);
    -o-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    /* animate opacity change */
    /* background-color: rgba(0, 0, 0, 1); */
    transition: opacity 200ms ease-in-out;
    opacity: 0.6;
}

/* make it opaque when hovered */
.browserContainer>findbar:hover {
    /* animate opacity change */
    transition: opacity 200ms ease-in-out;
    opacity: 1;
}

findbar>.findbar-container {
    /* this is a horizontal list by default - make it a vertical list and left align */
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    align-items: flex-start !important;
    /* that is not aligning left. Try this: */
    margin: 0 !important;
    padding: 0 !important;
    /* inherit background */
    background-color: inherit !important;
}

/* pad all children e.g. text input, buttons */
findbar>.findbar-container>* {
    padding: 1em !important;
    background-color: inherit !important;
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
}

findbar>.findbar-closebutton {
    position: absolute;
    bottom: 1em;
    right: 0;
    cursor: pointer;
}

/* text input for search */
/* findbar>.findbar-container>hbox {} */

.findbar-container,
.findbar-textbox:not([status="notfound"]),
.findbar-closebutton.close-icon {
    background-color: var(--bg) !important;
    padding: 0 0.5em !important
}

.findbar-find-previous:not(:hover),
.findbar-find-next:not(:hover) {
    background: var(--bg) !important;
}

/*   ______ Library ______   */

#placesToolbar {
    padding: 0 4px 0 0 !important
}

#placesToolbar>toolbarbutton {
    padding: 7px !important
}

#placesMenu>menu {
    padding: 4px !important
}

#placesMenu>menu>.menubar-text {
    color: var(--text)
}

:root {
    --organizer-text-secondary-color: transparent !important
}

#searchFilter {
    background-color: var(--hover) !important
}

/*   ______ About Firefox ______   */

#aboutDialogContainer {
    background-color: #171227 !important
}

userContent.css

/* =============================== */
/* START OF SIDEBERY MINIMAL STYLE */
/* =============================== */

/* Based on https://github.com/ongots/firefox-sidebery-minimal-style */

* {
    scrollbar-width: thin;
    scrollbar-color: #80808060 transparent !important
}


/*   Newtab   */

@-moz-document url("about:home"),
url("about:newtab") {
    body {
        background-color: #fafafa !important;
        background-size: 30px 30px
    }

    @media (prefers-color-scheme: dark),
    (prefers-color-scheme: no-preference) {
        body {
            background-color: #0f0f0f !important;
        }

        /* set body before with a tiled image */
        /* body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
            background-size: 200px 200px;
            z-index: -1;
        } */
        /* Alternative noise generator: https://jsfiddle.net/osserpse/6SZQY/ */
    }

    .prefs-button {
        display: none
    }
}


/*   Addons   */

button.category:nth-child(1),
#help-button,
#helpButton,
.addon-badge-recommended,
.addon-description,
.back-button,
.header-name,
.list-section-heading,
.search-label,
#sidebar::after,
.navigation::after {
    display: none !important
}

:root {
    --addon-icon-size: 26px !important;
    --card-padding: 14px !important;
    --in-content-box-border-color: #333 !important
}

.addon.card {
    margin-bottom: 5px !important
}

.addon-name {
    font-weight: 400 !important
}

.addon-name-container {
    margin-top: 0 !important
}

.main-search {
    margin: -15px 0 -41px -364px !important
}

.page-options-menu,
#updates-message {
    margin: -22px 0 -10px 0 !important
}

.sticky-container {
    position: static !important
}

.more-options-button {
    background-color: transparent !important
}

.more-options-button:hover {
    background-color: #80808040 !important
}

/* ============================= */
/* END OF SIDEBERY MINIMAL STYLE */
/* ============================= */

Hey first of all thank you for the theme!, I have followed all the steps but the sidebery is overflowing all the way to the top, is there any fix for this? Thanks!

@Varad30 any chance the browser is in full screen mode in this screenshot (F11)?

If not, I don't know what may be causing this, but I'd try inspecting it to figure it out: see the comment on "A. How to inspect browser interface" above.