minimal-firefox.md

Screenshots:

userChrome.css

/* Taken from here: https://github.com/tolgaerok/nixos-kde/blob/70df8ff0da18022e28a73d4242f917320c78e32d/core/programs/internet/web-browsers/userChrome.css#L34 */

:root {
  --NavbarWidth: 6;
  --TabsHeight: 36;
  --TabsBorder: 8;
  --NavbarHeightSmall: calc(var(--TabsHeight) + var(--TabsBorder));
}

#tabbrowser-tabs:not([noshadowfortests])
  .tab-background:is([selected], [multiselected]) {
  box-shadow: none !important;
  border: 1px solid
    var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor)) !important;
}

#tabbrowser-tabs .tab-background {
  border-radius: 8px !important;
  overflow: hidden !important;
}

:root {
  --lwt-tab-line-color: #eeeeee !important;
}

#back-button,
#forward-button {
  display: none !important;
} /*  Removes the forward/back button  */

:root #nav-bar {
  margin-top: calc(
    var(--TabsHeight) * -1px - var(--TabsBorder) * 1px
  ) !important;
  height: calc(var(--TabsHeight) * 1px + var(--TabsBorder) * 1px);
}
#TabsToolbar {
  margin-left: calc(1325px / 100 * var(--NavbarWidth)) !important;
}
#nav-bar {
  margin-right: calc(
    100vw - calc(1325px / 100 * var(--NavbarWidth))
  ) !important;
  vertical-align: center !important;
}
#urlbar-container {
  min-width: 0px !important;
  flex: auto !important;
}
toolbarspring {
  display: none !important;
}

#nav-bar,
#PersonalToolbar {
  background-color: #0000 !important;
  background-image: none !important;
  box-shadow: none !important;
}
#nav-bar {
  margin-left: 3px;
}
.tab-background,
.tab-stack {
  min-height: calc(var(--TabsHeight) * 1px) !important;
}

/*  Removes rounding from the top corners,   */
#navigator-toolbox {
  appearance: none !important;
  border-radius: 0 !important;
}
#navigator-toolbox-background {
  background-color: Field !important;
  background-image: none !important;
  appearance: none !important;
  border-radius: 0 !important;
}

:root {
  --tabpanel-background-color: var(--toolbar-field-background-color) !important;
} /*  Removes flash before loading pages  */

/*  Removes annoying buttons and spaces */
#firefox-view-button,
#save-to-pocket-button,
#tracking-protection-icon-container,
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  display: none !important;
}
#tabbrowser-tabs {
  border-inline-start-width: 0 !important;
}

/*  Makes some buttons nicer  */
#PanelUI-menu-button,
#unified-extensions-button,
#reload-button,
#stop-button {
  padding: 2px !important;
}
#reload-button,
#stop-button {
  margin: 1px !important;
}

/*  Removes space after pinned tabs  */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
  > #tabbrowser-arrowscrollbox
  > .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: 0 !important;
}

/*  X-button on the tabs  */
.tabbrowser-tab:not(:hover) .tab-close-button {
  opacity: 0% !important;
  transition: 0.3s !important;
  display: -moz-box !important;
}
.tab-close-button[selected]:not(:hover) {
  opacity: 45% !important;
  transition: 0.3s !important;
  display: -moz-box !important;
}
.tabbrowser-tab:hover .tab-close-button {
  opacity: 50%;
  transition: 0.3s !important;
  background: none !important;
  cursor: pointer;
  display: -moz-box !important;
}
.tab-close-button:hover {
  opacity: 100% !important;
  transition: 0.3s !important;
  background: none !important;
  cursor: pointer;
  display: -moz-box !important;
}
.tab-close-button[selected]:hover {
  opacity: 100% !important;
  transition: 0.3s !important;
  background: none !important;
  cursor: pointer;
  display: -moz-box !important;
}

/*  Removes annoying border  */
#navigator-toolbox {
  border: none !important;
}

/*  Titlebar button fix#6322  */
.titlebar-buttonbox-container {
  -moz-box-ordinal-group: auto;
}
.titlebar-button > .toolbarbutton-icon:-moz-lwtheme {
  -moz-context-properties: fill, stroke !important;
}
.titlebar-button > .toolbarbutton-icon {
  display: flex !important;
  height: unset !important;
  width: unset !important;
}
.titlebar-buttonbox {
  appearance: none !important;
}

/*  Titlebar buttons  -  Minimize button  */
.titlebar-min {
  fill: var(--toolbarbutton-icon-fill) !important;
  -moz-context-properties: fill !important;
  list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Crect transform='matrix(3.7795 0 0 3.7795 -39.998 -533.51)' x='14.552' y='145.13' width='2.6458' height='.26458' ry='3.1658e-6' fill='context-fill' style='paint-order:stroke fill markers'/%3E%3C/svg%3E%0A") !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 100% !important;
  align-content: center !important;
  width: 56px !important;
  appearance: none !important;
}
.titlebar-min:hover {
  background-color: color-mix(
    in srgb,
    currentColor 17%,
    transparent
  ) !important;
}
.titlebar-min:active {
  background-color: color-mix(
    in srgb,
    currentColor 30%,
    transparent
  ) !important;
}

/*  Titlebar buttons  -  Maximize button  */
.titlebar-max {
  fill: var(--toolbarbutton-icon-fill) !important;
  -moz-context-properties: fill !important;
  list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath transform='matrix(3.7795 0 0 3.7795 -101 -533.51)' d='m30.692 143.81v2.6458h2.6458v-2.6458zm0.26458 0.26459h2.1167v2.1167h-2.1167z' fill='context-fill' style='paint-order:stroke fill markers'/%3E%3C/svg%3E") !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 100% !important;
  align-content: center !important;
  width: 56px !important;
  appearance: none !important;
}
.titlebar-max:hover {
  background-color: color-mix(
    in srgb,
    currentColor 17%,
    transparent
  ) !important;
}
.titlebar-max:active {
  background-color: color-mix(
    in srgb,
    currentColor 30%,
    transparent
  ) !important;
}

/*  Titlebar buttons  -  Restore button  */
.titlebar-restore {
  fill: var(--toolbarbutton-icon-fill) !important;
  -moz-context-properties: fill !important;
  list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath d='m17.001 10.016v2h-2v8.0001h8.0001v-2h2v-8.0001zm0.99998 1h6v6h-0.99998v-4.9999h-4.9999zm-2 2h6v6h-6z' fill='context-fill' stroke-width='3.7795' style='paint-order:stroke fill markers'/%3E%3C/svg%3E%0A") !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 100% !important;
  width: 56px !important;
  appearance: none !important;
}
.titlebar-restore:hover {
  background-color: color-mix(
    in srgb,
    currentColor 17%,
    transparent
  ) !important;
}
.titlebar-restore:active {
  background-color: color-mix(
    in srgb,
    currentColor 30%,
    transparent
  ) !important;
}

/*  Titlebar buttons  -  Close button  */
.titlebar-close:not(:hover, :active) {
  fill: var(--toolbarbutton-icon-fill) !important;
  -moz-context-properties: fill !important;
  list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath transform='matrix(3.7796 0 0 3.7795 -165 -533.51)' d='m47.718 143.71-0.18707 0.18706 1.2294 1.2294-1.2294 1.2289 0.18707 0.18707 1.2294-1.2289 1.2289 1.2289 0.18707-0.18707-1.2289-1.2289 1.2289-1.2294-0.18707-0.18706-1.2289 1.2294z' fill='context-fill' style='paint-order:stroke fill markers'/%3E%3C/svg%3E%0A") !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 100% !important;
  width: 56px !important;
  appearance: none !important;
}
.titlebar-close:hover {
  background-color: #f44 !important;
  fill: var(--toolbarbutton-icon-fill) !important;
  -moz-context-properties: fill !important;
  list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath transform='matrix(3.7796 0 0 3.7795 -165 -533.51)' d='m47.718 143.71-0.18707 0.18706 1.2294 1.2294-1.2294 1.2289 0.18707 0.18707 1.2294-1.2289 1.2289 1.2289 0.18707-0.18707-1.2289-1.2289 1.2289-1.2294-0.18707-0.18706-1.2289 1.2294z' fill='context-fill' style='paint-order:stroke fill markers;fill:%23ffffff' /%3E%3C/svg%3E%0A") !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 100% !important;
  width: 56px !important;
  appearance: none !important;
}
.titlebar-close:active {
  background-color: #f33 !important;
  fill: var(--toolbarbutton-icon-fill) !important;
  -moz-context-properties: fill !important;
  list-style-image: url("data:image/svg+xml,%3Csvg width='40' height='30' version='1.1' viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EVetro%3C/title%3E%3Cpath transform='matrix(3.7796 0 0 3.7795 -165 -533.51)' d='m47.718 143.71-0.18707 0.18706 1.2294 1.2294-1.2294 1.2289 0.18707 0.18707 1.2294-1.2289 1.2289 1.2289 0.18707-0.18707-1.2289-1.2289 1.2289-1.2294-0.18707-0.18706-1.2289 1.2294z' fill='context-fill' style='paint-order:stroke fill markers;fill:%23ffffff' /%3E%3C/svg%3E%0A") !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 100% !important;
  width: 56px !important;
  appearance: none !important;
}

/*  Alltabs button  */
#alltabs-button > .toolbarbutton-badge-stack {
  display: none;
}

/*  Makes the sidebar a little nicer  */
#sidebar-splitter {
  display: none;
}
#sidebar-header {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

/*  The thing in the bottom with links  */
#statuspanel-label {
  background-color: var(--toolbar-field-background-color) !important;
  border-color: transparent !important;
  border-radius: 5px !important;
  color: currentColor !important;
  margin: 0 0 2.5px 2px !important;
  padding: 5px !important;
  opacity: 100%;
}

/*  Removes the annoying rainbow thing from the hamburger  */
#appMenu-fxa-separator {
  border-image: none !important;
}

/*  Customization navbar fix  */
#wrapper-urlbar-container {
  width: 100px !important;
}
[title="Flexible Space"] {
  display: none !important;
}

#nav-bar {
  position: initial !important;
  transition: all 0.3s;
}
#nav-bar #urlbar-input-container #identity-box,
#nav-bar #urlbar-input-container #page-action-buttons {
  display: none !important;
}
#nav-bar #urlbar-input-container .urlbar-input-box {
  opacity: 0 !important;
}

#nav-bar:focus-within {
  width: 96% !important;
  margin: 0 auto !important;
}
#nav-bar:focus-within #urlbar-input-container #identity-box,
#nav-bar:focus-within #urlbar-input-container #page-action-buttons {
  display: flex !important;
}
#nav-bar:focus-within #urlbar-input-container .urlbar-input-box {
  opacity: 1 !important;
}

#unified-extensions-button {
  position: absolute;
  top: 5px;
  left: 37px;
}

#PanelUI-button {
  position: absolute;
  top: 5px;
  left: 5px;
}

#urlbar-background,
#urlbar-container {
  border-radius: 8px !important;
}