Adaptive Tab Bar Colour and rounded corners

[JaMvoli]

Hi!

I'm really enjoying using the Firefox-Mod-Blur theme for the past few months, Recently, I started using Sideberry to organize all my tabs and have done my best to integrate a certain aesthetic with it.

But I need some help editing the userChrome file to make the as many of the following work (in order of priority):

1. Sideberry sidebar and navbar using the same theme that matches with the website (using with Adaptive Tab Bar Colour).
2. Rounded corners on browser window (Similar to Microsoft Edge and Arc Browser).
3. (If possible) Compress navbar and increase sidebar height (Similar to Arc Browser).

Picture of my current setup for reference.

[datguypiko]

Here is some changes. I only applied to my main theme. Added to userChrome.css

/* ADAPTIVE TAB BAR COLOR */
/* Bookmarks bar background color */
#PersonalToolbar {
  background-color: var(--lwt-accent-color) !important;
}

/* Whole Main Toolbar */
#navigator-toolbox {
  background-color: var(--lwt-accent-color) !important;
}

#urlbar {
  --autocomplete-popup-highlight-background: var(
    --firefoxcss-url-autocomplete-highlight
  ) !important;
  background-color: color-mix(in srgb, currentColor 6%, transparent) !important;
  border-bottom: 1px solid #ffffff08 !important;
  border-top: 1px solid var(--lwt-accent-color) !important;
  box-shadow:none !important;
}

/* Megabar */
#urlbar[breakout][breakout-extend][open] {
  background-color: var(--toolbar-field-background-color) !important;
}

/* Styling Extra search bar that you can add to firefox */
 #search-container #searchbar {
  background-color: color-mix(in srgb, currentColor 6%, transparent) !important;
  border-bottom: 1px solid #ffffff08 !important;
  border-top: 1px solid var(--lwt-accent-color) !important;
  box-shadow:none !important;
} 

/* Normal tabs design */
.tabbrowser-tab .tab-background:not([selected]) {
  background-color:  color-mix(in srgb, currentColor 6%, transparent) !important;
}

/* Normal tabs design on hover */
#tabbrowser-tabs
  .tabbrowser-tab:hover
  > .tab-stack
  > .tab-background:not([selected]) {
  background-color: color-mix(in srgb, currentColor 14%, transparent) !important;

}

/* Selected tabs design */
#tabbrowser-tabs .tabbrowser-tab .tab-background[selected] {
  background-color: var(--tab-selected-bgcolor) !important;
}

:root {
    --firefoxcss-new-tab-button-active: color-mix(in srgb, currentColor 10%, transparent) !important;
    --firefoxcss-new-tab-button-hover: color-mix(in srgb, currentColor 14%, transparent) !important;
}

#tabbrowser-tabpanels {
  background-color: var(
    --uc-light-bkgnd-color,
    var(--lwt-accent-color)
  ) !important;
}

#sidebar, #sidebar-header {
   background-color: var(--lwt-accent-color) !important;
}

/* Search Bar height */
#urlbar-container {
  --urlbar-container-height: 35px !important;
}

#urlbar-container #urlbar {
  --urlbar-toolbar-height: 35px !important;
  --urlbar-height: 28px !important;
  --urlbar-min-height: 30px !important;
}

#page-action-buttons .urlbar-icon {
  width: 15px !important;
  height: 15px !important;
}

#titlebar {
  visibility: collapse !important;
}

:root {
   --firefoxcss-top-bar-border-bottom-color: hsla(0, 0%, 0%, 0) !important;
}

 #appcontent
  > #tabbrowser-tabbox
  > #tabbrowser-tabpanels
  > .deck-selected
  > .browserContainer
  > .browserStack
  > browser {
  border-radius: 12px !important;
  margin: 8px !important;
    margin-top:2px !important;
/*   z-index: 3; */
} 

[datguypiko]

You can add border to the window content if you need to.

 #appcontent
  > #tabbrowser-tabbox
  > #tabbrowser-tabpanels
  > .deck-selected
  > .browserContainer
  > .browserStack
  > browser {
    border: 2px solid #606060 !important;
} 

[JaMvoli]

Would I have to drop this down to the userChrome file, or do I need to know which ones do I need to edit in order to import this?

[datguypiko]

Would I have to drop this down to the userChrome file, or do I need to know which ones do I need to edit in order to import this?

you just add it to the end of userChrome.css file