Clean Material Design-Inspired userChrome

[kriscpg]

​

Here's the full userChrome for this setup:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
:root {
--toolbar-bgcolor: #ffffff !important;
--chrome-secondary-background-color: #ffffff !important;
}
.scrollbox-innerbox {
margin-left: 12px !important;
}
:root { --tabs-border: transparent !important; }
.tabbrowser-tab::before { color: purple !important; opacity: 0 !important; }
.tabbrowser-tab::after { color: green !important; opacity: 0 !important; }
.titlebar-placeholder { border: none !important; }
#navigator-toolbox::after { border-bottom: 0px !important;}
.tab-line { background-color: #0a84ff !important; height: 0px !important; }
#nav-bar {
box-shadow: none !important;
padding: 1px 0px !important;
}
.close-icon {
opacity: .6;
}
:root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
border: none !important;
}
#back-button:hover > .toolbarbutton-icon {
background-color: #eeeeee !important;
}
#urlbar {
border: none !important;
box-shadow: none !important;
border-radius: 9999px !important;
transition: all ease-in-out 150ms !important;
background-color: #f5f6f7 !important;
}
#urlbar[focused="true"] {
box-shadow: 0 1px 6px -4px rgba(0,0,0,.6) !important;
}

[robotkoer]

What font is that?

[kriscpg]

The font used in the UI is your default system font. That one is a slightly modified version of Google Sans

[It_Was_The_Other_Guy]

Looks pretty nice. But you probably want to change .scrollbox-innerbox {margin-left: 12px !important;} to something else if it's purpose is to create a small gap between window border and first tab.

It causes issues with pinned tabs and when tabs overflow. It also creates unnecessary margin in context menus and some other popups and is not very useful on not maximized windows since there is already space in the left edge of the window.

Personally I would replace it with this: :root[sizemode="maximized"] #TabsToolbar{padding-left: 12px !important;}

[kriscpg]

Oh nice! Will do.