The key search term is "userChrome" (userChrome.css and userChrome.js) and XUL, which is the HTML-like language FF uses to define its chrome. "Chrome" is a term that predates Google's browser, referring to the interface surrounding the displayed web content and Firefox still uses that internally.
Right now mine is pretty minimal, but there's a lot you can change. Essentially, the interface is a kind of HTML page which can use the same features as normal HTML and can even run custom JavaScript. Also look into BetterFox for how to remove Mozilla's own telemetry and bloat.
My userChrome.css for reference;
spoiler
/* Move findbar to the top */
.browserContainer > findbar {
-moz-box-ordinal-group:0 !important; /* for 112 and older */
order: -1 !important; /* for 113 and newer */
border-top: none !important;
border-bottom: 1px solid ThreeDShadow !important;
}
/* Remove "Open All In Tabs" button in bookmarks folders */
#PlacesToolbarItems .openintabs-menuitem,
#placesContext>menuitem[id="placesContext_openContainer:tabs"],
#placesContext>menuitem[id="placesContext_openContainer:tabs"]:not([hidden])+menuitem+#placesContext_openSeparator {
visibility: collapse !important;
}
/* Tabs are attached on the bottom */
.tab-background {
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important;
margin-top: 1px !important;
margin-bottom: 0 !important;
padding-bottom: 31px !important;
}
.tabbrowser-tab[multiselected=true]:not([selected=true]) .tab-background {
border-radius: var(--tab-border-radius) !important;
margin-top: 2px !important;
margin-bottom: 1px !important;
padding-bottom: 29px !important;
}
.tabbrowser-tab[selected=true] .tab-background ,
.tabbrowser-tab[multiselected=true] .tab-background {
background-color: var(--toolbar-bgcolor) !important;
background-image: var(--toolbar-bgimage) !important;
}
I found this repo which is supposed to apply Chromium styles in line with Google's Material Design guidelines.
Here's an article I found with some simple tweaks.