mobile-config-firefox/chrome/navigation_buttons_inside_urlbar.css

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

/* Requires you to edit toolbar layout. Put buttons directly to the right of the urlbar in this order: <urlbar><reload-button><back-button><forward-button>*/
/* Actually, the order of reload and back-buttons doesn't matter */

#urlbar{
  margin-right:0px !important;
  border-right:none !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#urlbar,
#nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button){
  border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
}

#nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button){
  margin: 3px 0 !important;
  padding: 0 0px !important;
  background-clip: padding-box;
  border-style: solid;
  border-width: 1px 0;
  opacity: 1 !important;
  background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
}

#nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button) .toolbarbutton-icon{
  border: none !important;
  border-radius: 0 !important;
  margin: -3px 0 !important;
  background-color:transparent;
  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
}

#back-button{ --backbutton-background: transparent; --uc-back-extra-padding: 0px !important }

#back-button > .toolbarbutton-icon{ padding: var(--toolbarbutton-inner-padding) }

#nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button):hover .toolbarbutton-icon{
  background-color: transparent !important;
  box-shadow: none !important;
}

#nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button):not([disabled]):hover{
  background-image: linear-gradient(to bottom, var(--uc-ext-active-color,hsla(0,0%,70%,.2)), var(--uc-ext-active-color,hsla(0,0%,70%,.2)))
}

#urlbar-container:focus-within ~ .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button){
  border-color:Highlight !important;
}

#urlbar-container ~ .chromeclass-toolbar-additional[overflows="false"][disabled]:not(#downloads-button) .toolbarbutton-icon{ opacity: 0.4 !important }
/* Change this if you want some other button to be the right-most one */
#forward-button{
  border-right-width: 1px !important;
  border-radius: 0 2px 2px 0 !important;
}

#back-button, #back-button > image{ border-radius: 0 !important; }
#stop-reload-button{ padding: 0 !important; }