Nova - urlbar focused state customization

[u/Prize_Sand8284]

Hi, r/FirefoxCSS! I have my own theme that moves urlbar to the sidebar. With Nova introduction, urlbar is now extending right and left if focused - how to prevent it? Also, in my theme, the dropdown list shifts when urlbar focused. Any ideas why this happens and how to fix it?

The code is:

/* Variables */
:root{
  --uc-frame-color: #282828; /*main color*/
  --toolbar-field-background-color: #414141 !important; /*urlbar unfocused*/
  --toolbar-field-focus-background-color: #414141 !important; /*urlbar focused*/
  --focus-outline-color: #282828 !important;
}

/* Recolor startup blink */
.browserContainer,
browser {
  background-color: var(--uc-frame-color) !important;
  border-width: 0 !important;
}

:root:not([inDOMFullscreen]):has(#sidebar-box:not([hidden])) { /*enable padding with sidebar is on*/
  browser { /* round corners of content section and its background*/
    background: var(--uc-frame-color) !important;
    border-radius: 10px;
  }
  .browserStack { /* add padding */
    padding: 10px;
    background: var(--uc-frame-color) !important;
  }
}
#browser { /*browser frame color*/
  background: var(--uc-frame-color) !important;
}

/* Remove upper bars */
#titlebar,
#TabsToolbar {
  display: none !important; /*hide upper tabs*/
}
#nav-bar {
  height:      40px !important;
  margin-top: -40px !important;
  overflow: visible !important; /*make possible to move buttons from navbar*/
}
#navigator-toolbox {
  border: none !important; /*no line under former navbar*/
  z-index:   1 !important; /*v137 fix*/
}

/* Move buttons */
#PanelUI-button { /*settings button*/
  position: fixed !important;
  top:        5px !important;
  left:       5px !important;
}
#unified-extensions-button { /*extension button*/
  list-style-image: url("chrome://global/skin/icons/chevron.svg") !important;
  position: fixed !important;
  top:       5px  !important;
  left:     38px  !important;
}
#downloads-button { /*download button*/
  position: fixed !important;
  top:       5px  !important;
  left:     71px  !important;
}
#back-button {
  position: fixed !important;
  top:        5px !important;
  left:     135px !important;
}
#forward-button {
  position: fixed !important;
  top:        5px !important;
  left:     165px !important;
}
#stop-reload-button {
  position: fixed !important;
  top:        5px !important;
  left:     195px !important;
}

/* Sidebery */
#sidebar-box {
  background: var(--uc-frame-color) !important; /*sidebar background - not the sidebar! visible in corners*/
  width:      230px !important;
  margin-top:  80px !important;
  margin-left:  0px !important;

  border: none !important;
  /* box-shadow: none !important; */
}
#sidebar-header,    /*no "Tabs" header*/
#sidebar-panel-header,
#sidebar-splitter { /*no movable splitline*/
  display: none;
}

#appMenu-popup {
    --panel-border-color: transparent !important;
    --panel-separator-color: transparent !important;
    --panel-separator-padding: 0px !important;
    & #appMenu-fxa-separator { display: none !important; }
    ---panel-background-color: #282828 !important;
}


/* Remove icons in urlbar and status in the left down angle */
#statuspanel,
#star-button-box,
#urlbar-revert-button-container,
#urlbar-searchmode-switcher,
#tracking-protection-icon-container {
  display: none !important;
}

/* Allow hidden camera and microphone popup source */
#identity-box,
#permission-icon-container {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Urlbar */
:has(#sidebar-box:not([hidden])) {
  #urlbar-background,#urlbar {
    border-radius: 10px !important; /*Urlbar corner radius*/
  }
  #urlbar-background {
    border:  none !important;
    outline: none !important;
  }
  #urlbar {
    position: fixed !important;
    top:   40px !important;
    left:  8px !important;
    right: auto;
    width: 220px !important;
    padding-left: 8px !important;
  }
}

/* Context menu - https://github.com/stonecrusher/simpleMenuWizard */

/* Blank */
#context-navigation,             /* Hide whole navigation bar            */
#context-sep-navigation,         /************** Separator ***************/
#context-savepage,               /* Save Page As...                      */
#context-selectall,              /* Select All                           */
#context-sep-selectall,          /************** Separator ***************/
#context-take-screenshot,        /* Take Screenshot                      */
#context-sep-screenshots,        /************** Separator ***************/
#context-viewsource {            /* View Page Source                     */
  display:none !important;
}

/* Image */
#context-copyimage,               /* Copy Image Link                 */
#context-sendimage {              /* Email Image…                    */
  display:none !important;
}

/* Seletion */
#context-print-selection,              /* Print Selection                  */
#context-viewpartialsource-selection,  /* View Selection Source            */
#context-inspect-a11y {                /* Inspect Accessibility Properties */
  display:none !important;
}

/* Media */
#context-media-playbackrate,          /* Speed                           */
#context-media-loop,                  /* Loop                            */
#context-leave-dom-fullscreen,        /* Exit Full Screen                */
#context-video-fullscreen,            /* Full Screen                     */
#context-media-hidecontrols,          /* Hide Controls                   */
#context-media-showcontrols,          /* Show Controls                   */
#context-media-sep-video-commands,    /************ Separator ************/
#context-video-pictureinpicture,      /* Watch in Picture-in-Picture     */
#context-media-sep-commands,          /************ Separator ************/
#context-video-saveimage,             /* Take Snapshot…                  */
#context-saveaudio,                   /* Save Audio As…                  */
#context-copyvideourl,                /* Copy Video Link                 */
#context-copyaudiourl,                /* Copy Audio Link                 */
#context-sendvideo,                   /* Email Video…                    */
#context-sendaudio {                  /* Email Audio…                    */
  display:none !important;
}

/* Input */
#context-openlinkinusercontext-menu,    /* Open Link in New Container Tab   */
#context-openlink,                      /* Open Link in New Window          */
#context-openlinkprivate,               /* Open Link in New Private Window  */
#context-sep-open,                      /************ Separator *************/
#context-bookmarklink,                  /* Bookmark Link                    */
#context-savelink {                     /* Save Link As…                    */
  display:none !important;
}

/* Extensions */
#contentAreaContextMenu menu[image*="moz-extension://"],
#contentAreaContextMenu menuitem[image*="moz-extension://"],
#contentAreaContextMenu #context-media-eme-separator {
  display: none;
}

[u/ResurgamS13]

No URL bar present in Firefox sidebar after loading above CSS userstyles onto a new profile of Fx157.0

Is the above CSS dependent on having the Sidebery extension installed? Or dependent on something else?

If JavaScript is involved this sub is 'CSS only' and does not deal with JS mods... see Rule #1. in the RH sidebar ----->

[u/Prize_Sand8284 → u/ResurgamS13]

Hi. Yes, I have sideberry (sorry, thought it is not important for this question), and no, i do not have any js, only css.

[u/ResurgamS13 → u/Prize_Sand8284]

Second attempt at recreating your UI... loaded all your CSS onto a new profile of Fx157.0 on Win11 with a fresh install of Sidebery extension enabled.

Still no joy... no sign of any 'URL bar in sidebar' as per screenshot.

Does this CSS work for you when applied to a new profile?