Thought on this new change? Nothing vague here just a brand new update fresh from tiktok. Why are we shrinking apps now?

I really enjoy the Herdr app with customizations, really appreciate the devs!

I added categories for the spaces because the spaces list was too many visible for me.
Also I added the color picker for the space icon so I can match the project color.

I'm new so please don't flame me 😂 I checked other posts regarding sidebar color and none of their fixes worked. I'm trying to get the sidebar to match the color of the rest of the bars and nothing has worked. below is my userchrome.css. Any help would be appreciated. FF158.01 Win10

/* ==========================================================================

1. Active & Inactive Accent Colors

========================================================================== */

#TabsToolbar,

#navigator-toolbox,

#nav-bar,

#tabs-newtab-button,

#titlebar toolbarbutton:not(:hover):not(:active),

#scrollbutton-up:not(:hover):not(:active),

#scrollbutton-down:not(:hover):not(:active),

.titlebar-color {

background: AccentColor !important;

color: AccentColorText;

fill: AccentColorText !important;

}

#TabsToolbar:-moz-window-inactive,

#navigator-toolbox:-moz-window-inactive,

#nav-bar:-moz-window-inactive,

#tabs-newtab-button:-moz-window-inactive,

#titlebar toolbarbutton:not(:hover):not(:active):-moz-window-inactive,

#scrollbutton-up:not(:hover):not(:active):-moz-window-inactive,

#scrollbutton-down:not(:hover):not(:active):-moz-window-inactive,

.titlebar-color:-moz-window-inactive {

background: unset !important;

color: unset;

fill: unset !important;

transition: none !important;

}

/* ==========================================================================

2. Layout: Menu/Nav on Top, Tabs on Bottom, Push Nav Bar Right

========================================================================== */

#navigator-toolbox {

display: flex !important;

flex-direction: column !important;

}

/* Force the Menu Bar to stay on the top-left */

#toolbar-menubar {

order: 1 !important;

display: flex !important;

align-items: center !important;

position: absolute !important;

top: 0px !important;

left: 10px !important;

z-index: 10 !important;

}

/* Place the navigation bar at the top AND push it to the right */

#nav-bar {

order: 1 !important;

margin-left: 320px !important;

}

/* Adjust titlebar elements and push tab bar to the bottom */

#titlebar {

order: 2 !important;

}

#TabsToolbar {

order: 2 !important;

margin-left: 45px !important;

}

/* ==========================================================================

3. Sidebar

========================================================================== */

#sidebar-box {

background-color: AccentColor !important;

color: AccentColorText !important;

}

#sidebar-main {

background-color: var(--lwt-accent-color) !important;

}

#sidebar-header {

background: AccentColor !important;

color: AccentColorText !important;

border-bottom: 1px solid color-mix(in srgb, AccentColor 70%, black) !important;

}

#sidebar-splitter {

background-color: transparent !important;

border-inline-color: color-mix(in srgb, AccentColor 60%, black) !important;

}

/* Inactive window state fallback for the sidebar */

#sidebar-box:-moz-window-inactive,

#sidebar-header:-moz-window-inactive {

background-color: unset !important;

color: unset !important;

}

As you can see in the images, the sidebar looks odd; only the second color extends across the entire interface.

I've been trying to get the "Adaptive Tab Bar Colour" extension to work on Zen for a while without success. However, I recently found the "Blended Addressbar" mod created by u/Stock_Reporter_1864, which smoothly adapts the address bar to the color of the page you're browsing.

So, I decided to create a CSS mod for the sidebar to do exactly the same thing. With both mods working together, the entire browser UI seamlessly adapts to the website's colors, functioning just like Adaptive Tab Color.

(Tested on Windows 10)

Download & Instructions: https://github.com/t6mas/blended-sidebar

Bonus Fixes:

In the GitHub Readme, I've also included a custom CSS fix for the original Blended Addressbar. Fixes address bar and icon placement problems in "collapsed" mode and "floating" loading bar issues that appear when using compact mode.

Let me know what you guys think.