Help creating a flexible status text field with Firefox CSS

Hi all, I'm brand new to this CSS messing with this CSS feature and it really doesn't come naturally to me, but despite that I've somehow very nearly got everything how I like it by copying other people's code and tweaking the variables of that. I was wondering if I could get some help with one of a few final tweaks I wasn't able to find an existing solution for.

I'm trying to create a flexible status text toolbar item like used to exist (here's an example from my current setup in Pale Moon), which I can place into the "status bar" that I created using MrOtherGuy's "fake status bar w bookmarkbar" code. I asked on the Reddit's r/FirefoxCSS and someone recommended I come here and I might be able to get a hold of MrOtherGuy himself (though obviously other people can help too).

There's actually already a provision for that in MrOtherGuy's code for something like that, but it uses a flexible space and only works if you place it on the far left. I want it to be the third item from the left. Also, it doesn't seem to play very well with a second bit of code I've inserted to limit the size of the flexible spaces (because they're just too wide by default). Still, it seems likely to me that we should be able to get what I want by modifying what MrOtherGuy already added.

Also, I've already tweaked one variable a to make the status bar a little thinner, and that seems to have knocked the status text a little off-center. I'm not sure if that's because I did it wrong, or because I need to do something else in addition to what I've already done.

Here's what I've got so far:

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

/* Creates a statusbar at the bottom of the window by using bookmarks toolbar */

/* Since it's really the bookmarks toolbar you should move bookmarks away from bookmarks toolbar - for example to menubar. You can do that with Customize Firefox mode */

/* If you want to show the page-loading status in the statusbar then put a single flexible space as the leftmost item in the bookmarks toolbar */
/* By default this flex-space will take 50% window width to show the loading status bar */

/* Toolbar buttons/items will be aligned to the right edge of the loading bar. If you wish to align them to the right edge, then add another flex-space after the first one */

:root:not([inFullscreen]) > body{
  --uc-browser-base-padding: calc(2 * var(--toolbarbutton-inner-padding) + 6px);
  --uc-statusbar-text-vertical-position: 5px;
}

:root[uidensity="compact"]:not([inFullscreen]) > body{
  --uc-statusbar-text-vertical-position: 3px;
}

:root:not([inFullscreen]) > body::after{
  content: "";
  display: flex;
  margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important;
}

#PersonalToolbar{
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100vw;
  border-top: 1px solid var(--chrome-content-separator-color);
}

#personal-toolbar-empty + toolbarspring,
#PersonalToolbar > :first-child + toolbarspring{
  background-position: left var(--uc-statusbar-text-vertical-position);
  background-repeat: no-repeat;
  background-image: -moz-element(#statuspanel);
  max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */
  min-width: 60ch;
  flex-grow: 10;
}

#personal-toolbar-empty{ visibility: hidden; }
#PersonalToolbar .toolbarbutton-1{
  -moz-box-align: center !important; /* Fx <112 compatibility */
  align-items: center !important;
}

#PersonalToolbar > toolbarspring{
  flex-grow: 1;
  max-width: none !important;
  min-height: var(--uc-browser-base-padding) !important; 
}

/* Using -moz-element() causes some problems after Firefox has been running several hours such as long tab switch times. For this reason the background image is removed on hover and focused states which appears to clear the state. */
#PersonalToolbar > toolbarspring:first-of-type:hover{ background-image: none }

#statuspanel{
  padding-top: 0 !important;
  text-shadow: none !important;
}
#statuspanel-label{
  height:3em;
  min-width: 1000px;
  background-color: transparent !important;
  border: none !important;
  font-size: inherit;
  color: inherit !important;
  margin-inline: 0px !important;
  padding-inline: 0 !important;
}
/* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */
#statuspanel-inner{ background-color: var(--toolbar-accent-color) }
/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/

#statuspanel{
  color: lightpink; /* color used to indicate insecure http:// links */
  z-index: -1;
  visibility: visible !important;
  opacity: 1 !important;
}
#statuspanel[inactive] #statuspanel-label{ visibility: hidden }

.browserStack > #statuspanel[inactive]::before,
#statuspanel[inactive] > #statuspanel-inner::before{
  content: "Done";
  display: flex;
  margin-top: 2px;
  color: var(--toolbar-field-color, black) !important;
}

#statuspanel[type="status"] { color: skyblue }

#statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; }

/* These should make sure that there is some opaque color covering the real statuspanel - necessary when RFP letterboxing is enabled */
.browserContainer,
.browserSidebarContainer{
  background-color: inherit;
}


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

/* Small changes to make proton roughly as compact as the old compact mode */

:root{
  --toolbarbutton-inner-padding: 6px !important;
  --tab-block-margin: 2px !important;
  --tabs-shadow-size: 0px !important;
  --arrowpanel-menuitem-padding-block: 5px !important;
  --panel-font-size: inherit !important;
  --arrowpanel-padding: 0.8em !important;
  --inline-tab-padding: 8px !important; /* 8px is default value since it looks good - lower values compactify tabs horizontally */
}
.subviewbutton.bookmark-item{ padding-block: 4px !important; }
.subview-subheader{ display: block }
menupopup > menuitem,
menupopup > menu{ padding-block: 0.3em !important; }

/* This is kinda weird, but it makes the horizontal line between tabs and nav-bar render "inside" nav-bar thus tabs are more visibily separated even if there is less space there */
#nav-bar{ 
  box-shadow: inset 0 var(--tabs-shadow-size) 0 var(--lwt-tabs-border-color) !important;
}

.tab-close-button{
  margin-inline-start: 0px !important;
  width: 20px !important;
  height: 20px !important;
  padding: 5px !important;
}

#tabbrowser-tabs{ --uc-tabs-scrollbutton-border: 2px }
#scrollbutton-up,
#scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; }

/* OPTIONAL - show audio label in compact mode and make the audio icon behavior match non-compact mode */
/*
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ display: flex !important; margin-bottom: 1px }
#TabsToolbar:not(:hover) .tab-icon-image{ opacity: 1 !important; }
#TabsToolbar:not(:hover) .tab-icon-overlay:not([pinned]){ opacity: 0 !important; }
*/


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

/* This style makes tabs and related items non-rounded and connects tabs to toolbars like in previous Firefox versions.
 * You should set layout.css.color-mix.enabled to true in about:config to make colors apply properly.
 * It's not strictly a requirement, but this style expects compact_proton.css to be loaded before it. */

:root[id]{
  --tab-block-margin: 0px !important;
  --tabs-shadow-size: 1px !important;

  /* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color  */
  --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important; 
}

/* Uncomment next line to force specific color for tab top line */
/* #tabbrowser-tabs{ --lwt-tab-line-color: blue !important; } */

/* These next two rules set a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/
#nav-bar{
  /* This overrides value in compact_proton.css */
  box-shadow: 0 -1px 0 0 color-mix(in srgb, currentcolor 30%, transparent) !important;
}
.tab-background[selected]{
  border-inline: 1px solid color-mix(in srgb, currentcolor 30%, transparent) !important;
  border-bottom-color: transparent !important;
}

#TabsToolbar{
  --toolbarbutton-inner-padding: 7px !important;
}
/* Few exceptions for default light theme */
#navigator-toolbox:not([movingtab]):-moz-lwtheme > #titlebar > #TabsToolbar{
  --toolbar-bgcolor: transparent;
}

.tab-background[selected]:not(:-moz-lwtheme){ background: var(--toolbar-bgcolor) !important; }

#TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-badge-stack,
#TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important;  }

/* tabs newtab button needs some special styling... */
#tabs-newtab-button{
  padding-inline: 0 !important;
  -moz-box-align: stretch !important; /* Fx < 112 compatibility */
  align-items: stretch !important;
}
/* We draw the icon as background-image to get correct scaling regardless of toolbar height */
#tabs-newtab-button > .toolbarbutton-icon{
  border-radius: 0 !important; 
  width: var(--tab-min-height) !important; 
  height: initial !important;
  list-style-image: none;
  background-image: url(chrome://global/skin/icons/plus.svg);
  background-position: center;
  background-repeat: no-repeat;
}

#scrollbutton-up,
#scrollbutton-down{
  border-radius: 0 !important;
  border-width: 0 !important;
  padding-inline: 3px !important;
  margin-bottom: var(--uc-compat-scrollbutton-margin,0px) !important; /* set in hide_tabs_scrollbuttons.css */
}

/* This is for hide_tabs_scrollbuttons.css compatibility since we modify scrollbutton width */
#tabbrowser-tabs[overflow]{
  --uc-scrollbox-base-margin: -22px !important;
}

/* Selected tab needs to be relative so it gets drawn over nav-bar top "border" */
.tabbrowser-tab[selected]{
  position: relative;
  z-index: 1;
}

/* tab shaping */
.tabbrowser-tab{ padding-inline: 0 !important; }

:root[uidensity="compact"] #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]{
  min-height: calc(var(--tab-min-height) + 2px) !important;
}

.tab-content[pinned]{ padding-inline: 11px !important; }

.tab-background{
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: 0 !important;
  outline: none !important;
}

.tab-background:not([selected])[multiselected]{
  background: color-mix(in srgb, currentColor 11%, transparent) !important;
  margin-inline-start: -1px; 
}

/* Line to mark selected tab */
.tab-background[selected]::before,
.tabbrowser-tab:hover > stack > .tab-background::before{
  display: flex;
  height: 2px;
  content: "";
}
.tab-stack:hover > .tab-background::before{
  background-color: inherit;
}
.tab-stack > .tab-background[selected]::before{
  background-color: highlight;
  background-image: linear-gradient(var(--lwt-tab-line-color),var(--lwt-tab-line-color));
}
/* Photon-like tab on hover animation for the top line */
u/keyframes tab-onhover-line-anim{ from{ margin-inline: 20px } to { margin-inline: 0 } }

.tab-stack:hover > .tab-background::before{ animation: tab-onhover-line-anim 160ms }

/* Disable animation for selected and pinned tabs */
.tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }

/* moves context-line to the bottom */
.tab-context-line{
  -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
  order: 2;
  margin-inline: 10px !important;
}


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

/* IMPORTANT
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css

Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top 
*/

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
  position: fixed;
  display: block;
  top: 0px;
  right:0;
  height: 40px;
}
u/media (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
  .titlebar-buttonbox-container{ left:0; right: unset !important; }
}
u/supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
  .titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
  -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
  order: 2;
  -moz-appearance: none !important;
  --tabs-navbar-shadow-size: 0px;
  --uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
}
/* Re-order window and tab notification boxes */
#navigator-toolbox > div{ display: contents }
.global-notificationbox,
#tab-notification-deck{
  -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
  order: 2;
}

#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

u/media (-moz-gtk-csd-close-button){
  .titlebar-button{
    -moz-box-orient: vertical; /* Fx <112 compatibility */
    flex-direction: column;
  }
}

/* At Activated Menubar */
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
  display: block !important;
}
#toolbar-menubar:not([autohide="true"]) > .titlebar-buttonbox-container {
  visibility: hidden;
}

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
#TabsToolbar > .titlebar-buttonbox-container{ visibility: visible }
#navigator-toolbox:not(:-moz-lwtheme){ background-color: -moz-dialog }

/* Uncomment the following if you want bookmarks toolbar to be below tabs */
/*
#PersonalToolbar{
  -moz-box-ordinal-group: 2;
  order: 2;
}
*/


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

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
   /* height if native titlebar is enabled, assumes empty menubar */
  --uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
  /* height when native titlebar is disabled, more roomy so can fit buttons etc. */
  --uc-menubar-height: 29px;
}
:root:is([sizemode="fullscreen"],[chromehidden~="menubar"]){
  --uc-menubar-height: 0px;
}
/* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
:root:not([sizemode="fullscreen"]) #nav-bar{ border-inline-width: 0 }

#navigator-toolbox{
  -moz-window-dragging: drag;
  padding-top: var(--uc-menubar-height) !important;
}

/* Remove window dragging from notification boxes */
#tab-notification-deck,
.global-notificationbox{
  -moz-window-dragging: no-drag;
}

:root:not([chromehidden~="menubar"]) #toolbar-menubar{
  position: fixed;
  display: flex;
  top: 0px;
  height: var(--uc-menubar-height);
  width: 100%;
  overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
  order: 99;
  flex-grow: 1;
  min-width: var(--uc-window-drag-space-post,20px);
}

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

:root:not([sizemode="fullscreen"]) #toolbar-menubar.browser-toolbar > .titlebar-buttonbox-container{
  visibility: visible;
}
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #TabsToolbar#TabsToolbar#TabsToolbar > .titlebar-buttonbox-container {
  display: none !important;
}


toolbarspring {
    min-width: 10px !important;
    max-width: 20px !important;
}


#PersonalToolbar {height: 4px !important;}
#BookmarksToolbar {height: 4px !important;}

I haven't made many modifications to any of the bits of code I added, but feel free to let me know if you spot any, like, conflicts or redundancies or things like that that you think it'd be a good idea for me to clean up.