New sidebery data export

And also don't hide separator for the following tab when the preceding
split-view has its first tab multiselected.

.gitignore

@@ -1,2 +1 @@
-userChrome.css
-userContent.css
+*.code-workspace

chrome/autohide_bookmarks_toolbar.css

@@ -1,6 +1,12 @@
 /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
 See the above repository for updates as well as full license text. */
 
+:root{
+  --uc-toolbox-background-image: var(--toolbox-background-image,var(--toolbar-bgimage));
+  --uc-toolbox-background-color: var(--toolbox-background-color,var(--toolbox-bgcolor));
+  --uc-toolbar-background-color: var(--toolbar-background-color,var(--toolbar-bgcolor));
+}
+
 #PersonalToolbar{
   --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
   --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
@@ -9,6 +15,8 @@ See the above repository for updates as well as full license text. */
   /* 0deg = "show" ; 90deg = "hide" ;  Set the following to control when bookmarks are shown */
   --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
   --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
+  --uc-toolbarbutton-inner-padding: var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding));
+  --uc-toolbarbutton-outer-padding: var(--toolbarbutton-padding-outer,var(--toolbarbutton-outer-padding));
 }
 
 :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }
@@ -22,25 +30,34 @@ See the above repository for updates as well as full license text. */
   z-index: 1;
   /* The following properties should allow the themes with trasparent toolbars to work */
   background-color: transparent !important;
-  background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling);
+  background-repeat: no-repeat,var(--lwt-background-tiling);
     /* y position will be wrong if menubar is enabled... */
-  --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 24px - var(--bookmark-block-padding));
+  --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--uc-toolbarbutton-inner-padding) + var(--uc-toolbarbutton-outer-padding)) - var(--tab-min-height) - 24px - var(--bookmark-block-padding));
+  background-position: top left,var(--lwt-background-alignment,top left);
+  background-position-y:0,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y);
+  background-size: cover, auto, auto, auto,auto,auto;
+  background-image: linear-gradient(var(--uc-toolbar-background-color)),
+    var(--uc-toolbox-background-image,var(--uc-toolbar-background-image,linear-gradient(transparent))),
+    var(--lwt-header-image,var(--lwt-additional-images)),
+    linear-gradient(var(--uc-toolbox-background-color)) !important;
+}
+/* This is simply for Firefox < 150 */
+.browser-toolbox-background > #PersonalToolbar:not([customizing]){
+  background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling);
   background-position: top left,top left,var(--lwt-background-alignment,top left);
-  background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y);
-  background-image: var(--toolbar-bgimage,linear-gradient(transparent,transparent)), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important;
+  background-position-y:0,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y);
 }
 @media -moz-pref("sidebar.verticalTabs"){
   #PersonalToolbar{
-    --toolbar-bgcolor: transparent;
+    --uc-toolbar-background-color: transparent;
   }
   #PersonalToolbar:not([customizing]){
-    background-color: inherit !important;
     margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
-    --uc-bg-y: calc(0px - (2 * var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - 27px - var(--bookmark-block-padding));
+    --uc-bg-y: calc(0px - (2 * var(--uc-toolbarbutton-inner-padding) + var(--uc-toolbarbutton-outer-padding)) - 27px - var(--bookmark-block-padding));
   }
 }
 :root[uidensity="compact"] #PersonalToolbar{
-  --toolbarbutton-outer-padding: 1px !important;
+  --uc-toolbarbutton-outer-padding: 1px !important;
 }
 #PlacesToolbarItems > .bookmark-item,
 #OtherBookmarks,
@@ -59,7 +76,10 @@ See the above repository for updates as well as full license text. */
   transition-delay: 100ms !important;
   transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
 }
-
+:root:not([lwtheme]) #PersonalToolbar,
+#nav-bar.browser-titlebar + #PersonalToolbar{
+  background-color: var(--uc-toolbox-background-color) !important;
+}
 #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {
   transform: rotateX(0);
 }

chrome/autohide_main_toolbar.css

@@ -83,12 +83,24 @@ See the above repository for updates as well as full license text. */
   opacity: 1;
 }
 /* If tabs are in sidebar then nav-bar doesn't normally have its own background - so we nee to add it back */
+#nav-bar.browser-titlebar + #PersonalToolbar,
 #nav-bar.browser-titlebar{
   background: inherit;
+  background-color: var(--toolbox-bgcolor) !important;
+  background-image: var(--lwt-additional-images);
+  background-repeat: var(--lwt-background-tiling);
+  background-position: var(--lwt-background-alignment);
+}
+#navigator-toolbox:hover > #nav-bar.browser-titlebar + #PersonalToolbar{
+  background-position-y: -40px;
+  transition: background-position-y
 }
 #toolbar-menubar:not([autohide="true"],[autohide=""]) ~ #nav-bar.browser-titlebar{
   background-position-y: -28px; /* best guess, could vary */
   border-top: none !important;
+  + #PersonalToolbar{
+    background-position-y: -28px;
+  }
 }
 
 /* Bookmarks toolbar needs so extra rules */

chrome/autohide_toolbox.css

@@ -24,6 +24,7 @@ See the above repository for updates as well as full license text. */
 #navigator-toolbox{
   --browser-area-z-index-toolbox: 3;
   position: fixed !important;
+  background: inherit;
   background-color: var(--lwt-accent-color,black) !important;
   transition: transform 82ms linear, opacity 82ms linear !important;
   transition-delay: var(--uc-autohide-toolbox-delay) !important;

chrome/button_effect_scale_onclick.css

@@ -32,5 +32,5 @@ toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-badge-stack > .
 toolbarbutton#scrollbutton-down:active > .toolbarbutton-icon{ transform: scale(-0.6) !important; }
 
 toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-icon{
-  padding: calc(var(--toolbarbutton-inner-padding) + 3px) !important;
+  padding: calc(var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) + 3px) !important;
 }

chrome/button_effect_scale_onhover.css

@@ -30,7 +30,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
 toolbarbutton#scrollbutton-down > .toolbarbutton-icon{ transform: scale(-0.8) !important; }
 
 toolbar .toolbarbutton-1 > .toolbarbutton-icon{
-  padding: calc(var(--toolbarbutton-inner-padding) + 2px) !important;
+  padding: calc(var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) + 2px) !important;
 }
 .urlbar-input-container [role="button"]:not([disabled]):hover image,
 .tab-close-button:hover,
@@ -46,5 +46,5 @@ toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-badge-stack > .t
 toolbarbutton#scrollbutton-down:not([disabled]):hover > .toolbarbutton-icon{transform: scale(-1) !important;}
 
 toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-icon{
-  padding: var(--toolbarbutton-inner-padding) !important;
+  padding: var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) !important;
 }

chrome/buttonlike_toolbarbuttons.css

@@ -4,13 +4,14 @@ See the above repository for updates as well as full license text. */
 /* This style makes buttons look like real buttons with border and background. Color of border and background use the same colors as unselected urlbar to make them fit together. */
 
 :root{
-  --uc-toolbarbutton-vertical-padding: var(--toolbarbutton-inner-padding);
-  --uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 10px);
+  --uc--toolbarbutton-inner-padding: var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding));
+  --uc-toolbarbutton-vertical-padding: var(--uc-toolbarbutton-inner-padding);
+  --uc-toolbarbutton-horizontal-padding: calc(var(--uc-toolbarbutton-inner-padding) + 10px);
   --toolbarbutton-border-radius: 3px !important;
 }
 :root[uidensity="compact"]{
-  --uc-toolbarbutton-vertical-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
-  --uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 6px);
+  --uc-toolbarbutton-vertical-padding: calc(var(--uc-toolbarbutton-inner-padding) - 1px);
+  --uc-toolbarbutton-horizontal-padding: calc(var(--uc-toolbarbutton-inner-padding) + 6px);
 }
 
 .browser-toolbar{
@@ -106,7 +107,7 @@ findbar toolbarbutton{
   width: revert !important;
   height: revert !important;
   border: revert !important;
-  padding: var(--toolbarbutton-inner-padding) !important;
+  padding: var(--uc-toolbarbutton-inner-padding) !important;
 }
 findbar toolbarbutton{
   padding-inline: var(--uc-toolbarbutton-horizontal-padding) !important;

chrome/compact_proton.css

@@ -5,6 +5,7 @@ See the above repository for updates as well as full license text. */
 
 :root{
   --toolbarbutton-inner-padding: 6px !important;
+  --toolbarbutton-padding-inner: 6px !important;
   --tab-block-margin: 2px !important;
   --tabs-shadow-size: 0px !important;
   --arrowpanel-menuitem-padding-block: 5px !important;

chrome/curved_tabs.css

@@ -30,7 +30,10 @@ See the above repository for updates as well as full license text. */
 .tab-context-line{
   order: 1;
 }
-#TabsToolbar{ --toolbarbutton-inner-padding: 6px !important; }
+#TabsToolbar{
+  --toolbarbutton-inner-padding: 6px !important;
+  --toolbarbutton-padding-inner: 6px !important;
+}
 
 .titlebar-spacer[type="pre-tabs"],
 .tabbrowser-tab::after{ border: none !important; }

chrome/fake_statusbar_w_bookmarksbar.css

@@ -18,6 +18,7 @@ See the above repository for updates as well as full license text. */
 
 #PersonalToolbar .toolbarbutton-1{
   --toolbarbutton-inner-padding: var(--uc-statusbar-button-padding) !important;
+  --toolbarbutton-padding-inner: var(--uc-statusbar-button-padding) !important;
 }
 
 :root[uidensity="compact"]:not([inFullscreen]) > body{

chrome/floating_findbar_on_top.css

@@ -22,7 +22,7 @@ findbar{
 }
 
 .findbar-container > .findbar-find-fast{
-  padding: var(--toolbarbutton-inner-padding) 1px;
+  padding: var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) 1px;
   margin: 0 !important;
 }
 

chrome/iconized_content_context_menu.css

@@ -22,6 +22,10 @@ See the above repository for updates as well as full license text. */
 :where(#contentAreaContextMenu > menuitem){
   padding-inline-start: 1em !important;
 }
+:where(#contentAreaContextMenu) > menu:not(.menu-iconic) > .menu-icon,
+:where(#contentAreaContextMenu) > menuitem:not(.menuitem-iconic) > .menu-icon{
+  display: none;
+}
 #contentAreaContextMenu > menuitem[type="checkbox"]::before{
   content: url("chrome://devtools/skin/images/checkbox.svg");
 }

chrome/iconized_menubar_items.css

@@ -4,7 +4,7 @@ See the above repository for updates as well as full license text. */
 /* Replaces menubar items text ("File Edit etc.") with icons */
 
 #main-menubar > menu{
-  fill: currentColor;
+  fill: currentColor !important;
   height: var(--uc-menubaritem-height,28px);
   width: var(--uc-menubaritem-width,30px);
   -moz-context-properties: fill;

chrome/iconized_places_context_menu.css

@@ -23,6 +23,10 @@ See the above repository for updates as well as full license text. */
 :where(#placesContext > menuitem){
   padding-inline-start: 1em !important;
 }
+:where(#placesContext) > menu:not(.menu-iconic) > .menu-icon,
+:where(#placesContext > menuitem:not(.menuitem-iconic) > .menu-icon{
+  display: none;
+}
 #placesContext > menuitem[type="checkbox"]::before{
   content: url("chrome://devtools/skin/images/checkbox.svg");
 }

chrome/iconized_tabs_context_menu.css

@@ -22,6 +22,10 @@ See the above repository for updates as well as full license text. */
 :where(#tabContextMenu > menuitem){
   padding-inline-start: 1em !important;
 }
+:where(#tabContextMenu) > menu:not(.menu-iconic) > .menu-icon,
+:where(#tabContextMenu) > menuitem:not(.menuitem-iconic) > .menu-icon{
+  display: none;
+}
 #tabContextMenu > menuitem[type="checkbox"]::before{
   content: url("chrome://devtools/skin/images/checkbox.svg");
 }

chrome/navbar_below_content.css

@@ -6,11 +6,11 @@ See the above repository for updates as well as full license text. */
 @-moz-document url(chrome://browser/content/browser.xhtml){
 
   :root:not([inFullscreen]){
-    --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) )
+    --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-padding-outer,var(--toolbarbutton-outer-padding)) )
   }
 
   :root[uidensity="compact"]:not([inFullscreen]){
-    --uc-bottom-toolbar-height: calc(32px + var(--toolbarbutton-outer-padding) )
+    --uc-bottom-toolbar-height: calc(32px + var(--toolbarbutton-padding-outer,var(--toolbarbutton-outer-padding)) )
   }
 
   #browser,
@@ -25,14 +25,16 @@ See the above repository for updates as well as full license text. */
     z-index: 1;
   }
   #nav-bar-customization-target{ -webkit-box-flex: 1; }
-  
+  #nav-bar{
+    --uc-toolbar-background-color: var(--toolbar-background-color,var(--toolbar-bgcolor));
+  }
   :root[lwtheme] #nav-bar{
-    background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
+    background-image: linear-gradient(var(--uc-toolbar-background-color:)), var(--lwt-additional-images,var(--uc-toolbox-background-image)) !important;
     background-position: top,var(--lwt-background-alignment);
     background-repeat: repeat,var(--lwt-background-tiling);
   }
   :root[lwtheme-image] #nav-bar{
-    background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
+    background-image: linear-gradient(var(--uc-toolbar-background-color)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
   }
 
   /* Fix panels sizing */

chrome/navigation_buttons_inside_urlbar.css

@@ -31,13 +31,13 @@ See the above repository for updates as well as full license text. */
   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;
+  width: calc(2 * var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) + 16px) !important;
+  height: calc(2 * var(--toolbarbutton-padding-inner,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) }
+#back-button > .toolbarbutton-icon{ padding: var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) }
 
 #nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button):hover .toolbarbutton-icon{
   background-color: transparent !important;

chrome/non_floating_sharp_tabs.css

@@ -28,6 +28,7 @@ See the above repository for updates as well as full license text. */
 
 #TabsToolbar{
   --toolbarbutton-inner-padding: 7px !important;
+  --toolbarbutton-padding-inner: 7px !important;
 }
 /* Few exceptions for default light theme */
 :root[lwtheme] #navigator-toolbox:not([movingtab]) > #TabsToolbar{

chrome/numbered_tabs.css

@@ -3,5 +3,6 @@ See the above repository for updates as well as full license text. */
 
 /* Show a number before tab text*/
 
-.tabbrowser-tab:first-child{ counter-reset: nth-tab 0 } /* Change to -1 for 0-indexing */
-.tab-text::before{ content: counter(nth-tab) " "; counter-increment: nth-tab }
+#tabbrowser-tabs{ counter-reset: nth-tab 0 } /* Change to -1 for 0-indexing */
+:not(tab-group[collapsed])>.tabbrowser-tab{ counter-increment: nth-tab }
+.tab-text::before{ content: counter(nth-tab) " " }

chrome/overlay_fullscreen_toolbars.css

@@ -10,6 +10,7 @@ See the above repository for updates as well as full license text. */
   }
   :root[sizemode="fullscreen"]{
     &[sessionrestored]{
+      #searchbar-new,
       #urlbar[popover]{
         pointer-events: none;
         opacity: 0;
@@ -24,14 +25,16 @@ See the above repository for updates as well as full license text. */
       transition: transform var(--uc-fullscreen-overlay-duration) ease-in-out var(--uc-fullscreen-overlay-delay) !important;
       margin-top: 0 !important;
       transform: translateY(-100%);
+      background: inherit;
     }
     #navigator-toolbox:is(:hover,:focus-within,[style=""]),
     #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ #navigator-toolbox{
       transition-delay: 0ms !important;
       transform: translateY(0);
     }
-    #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
-    #navigator-toolbox:is(:hover,:focus-within,[style=""]) #urlbar[popover],
+    #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox :is(#searchbar-new,#urlbar[popover]),
+    #navigator-toolbox:is(:hover,:focus-within,[style=""]) :is(#searchbar-new,#urlbar[popover]),
+    #search-container > #searchbar-new:is([focused],[open]),
     #urlbar-container > #urlbar[popover]:is([focused],[open]){
       pointer-events: auto;
       opacity: 1;

chrome/reload_button_in_urlbar.css

@@ -7,9 +7,12 @@ See the above repository for updates as well as full license text. */
  * If your theme has opaque background for urlbar then that will cover the reload button.
  * Switch to another theme such of one of the built-in dark/light/auto theme.
  */
-
+#nav-bar-customization-target{
+  --uc-toolbarbutton-inner-padding: var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding));
+  --uc-toolbarbutton-outer-padding: var(--toolbarbutton-padding-outer,var(--toolbarbutton-outer-padding));
+}
 #urlbar-container + #stop-reload-button{
-  margin-left: calc( 1px - var(--urlbar-margin-inline) - 2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)) - 16px );
+  margin-left: calc( 1px - var(--urlbar-margin-inline) - 2 * (var(--uc-toolbarbutton-outer-padding) + var(--uc-toolbarbutton-inner-padding)) - 16px );
   position: relative;
   z-index: 3;
   color:  var(--urlbar-box-hover-text-color) !important;
@@ -22,7 +25,7 @@ See the above repository for updates as well as full license text. */
 }
 
 #urlbar{
-  padding-right: calc(2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)) + 12px) !important;
+  padding-right: calc(2 * (var(--uc-toolbarbutton-outer-padding) + var(--uc-toolbarbutton-inner-padding)) + 12px) !important;
   pointer-events: none;
 }
 .urlbar-input-container,

chrome/round_caption_buttons.css

@@ -26,4 +26,4 @@ See the above repository for updates as well as full license text. */
 }
 
 /* OPTIONAL - move caption buttons in tabs toolbar a bit upwards */
-/* #TabsToolbar > .titlebar-buttonbox-container{ margin-bottom: var(--toolbarbutton-inner-padding) !important; } */
+/* #TabsToolbar > .titlebar-buttonbox-container{ margin-bottom: var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) !important; } */

chrome/tab_separator_lines.css

@@ -1,27 +1,64 @@
-/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_separator_lines.css made available under Mozilla Public License v. 2.0
-See the above repository for updates as well as full license text. */
-
-/* Bring back tab separator lines that were removed in Proton */
-.tabbrowser-tab{
+:where(.tabbrowser-tab){
   background-image: linear-gradient(
     transparent 20%,
     color-mix(in srgb, currentColor 20%, transparent) 20%,
     color-mix(in srgb, currentColor 20%, transparent) 80%,
     transparent 80%
   );
-  background-size: 1px 100%;
   background-repeat: no-repeat;
+  background-size: 1px 100%;
 }
-.tab-group-label-container{
-  padding-inline-start: 2px;
+tab-split-view-wrapper{
+  background-size: 1px 100%;
 }
-
-#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:hover + .tabbrowser-tab:not([first-visible-unpinned-tab]),
-.tabbrowser-tab:is(:hover,:first-child,[selected],[multiselected]),
-.tabbrowser-tab:is([selected],[multiselected]) + .tabbrowser-tab[hidden] + .tabbrowser-tab,
-#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:is([multiselected],[selected]) + .tabbrowser-tab,
-tab-group[collapsed] + .tabbrowser-tab,
-tab-group > .tabbrowser-tab:first-of-type,
-tab-group:has(> .tabbrowser-tab:last-child:is(:hover,[selected],[multiselected])) + .tabbrowser-tab{
+@media -moz-pref("sidebar.verticalTabs"){
+  #tabbrowser-tabs{
+    --uc-vertical-tabs-expanded-separator: linear-gradient(to right,
+      transparent 10cqw,
+      color-mix(in srgb, currentColor 20%, transparent) 10cqw,
+      color-mix(in srgb, currentColor 20%, transparent) 90cqw,
+      transparent 90cqw
+    );
+  }
+  :where(.tabbrowser-tab){
+    background-image: linear-gradient(color-mix(in srgb, currentColor 20%, transparent));
+    background-size: 60% 1px;
+    background-position-x: center;
+  }
+  :where(#tabbrowser-tabs[expanded] .tabbrowser-tab){
+    background-image: var(--uc-vertical-tabs-expanded-separator);
+    background-size: 90cqw 1px;
+  }
+  #tabbrowser-tabs[expanded] > #pinned-tabs-container > .tabbrowser-tab{
+    background-image: none;
+  }
+  tab-split-view-wrapper{
+    background-size: 90cqw 1px;
+  }
+  #tabbrowser-tabs[expanded] tab-split-view-wrapper >.tabbrowser-tab:last-child{
+    background-size: 90cqw 1px;
+    background-image: var(--uc-vertical-tabs-expanded-separator);
+    @container vertical-tabs-container (min-width: 210px){
+      background-size: inherit;
+    }
+  }
+}
+tab-split-view-wrapper > .tabbrowser-tab{
+  background-size: inherit;
+}
+tab-split-view-wrapper > .tabbrowser-tab:last-child{
   background-image: none;
 }
+tab-group > slot + :is(tab-split-view-wrapper,.tabbrowser-tab),
+tab-group[collapsed] + :is(tab-split-view-wrapper,.tabbrowser-tab),
+:is(tab-split-view-wrapper,.tabbrowser-tab):is([selected],[multiselected],[hasactivetab],:hover),
+:is(tab-split-view-wrapper,.tabbrowser-tab):is([selected],tab[multiselected],[hasactivetab],:hover) + :is(tab-split-view-wrapper,.tabbrowser-tab),
+tab-split-view-wrapper:has( > [multiselected]:last-child) + :is(tab-split-view-wrapper,.tabbrowser-tab),
+tab-group:has(> :last-of-type:is(:hover,[selected],[multiselected],[hasactivetab]) + vbox) + :is(tab-split-view-wrapper,.tabbrowser-tab),
+#pinned-tabs-container > :first-child,
+#pinned-tabs-container:empty ~ arrowscrollbox > :first-child,
+#tabbrowser-arrowscrollbox[overflowing] > :first-child,
+#pinned-tabs-container:has( > :last-child:is(:hover,[selected],[multiselected])) ~ arrowscrollbox > :first-child,
+#vertical-pinned-tabs-splitter:not([hidden]) ~ arrowscrollbox[orient="vertical"] > :first-child{
+  background-size: 0 0;
+}

chrome/toolbarbuttons_icon+label.css

@@ -12,9 +12,9 @@ toolbar .toolbarbutton-1[label]:not([disabled]):hover{ background-color: var(--t
 
 toolbar .toolbarbutton-1[label] > .toolbarbutton-icon,
 toolbar .toolbarbutton-1[label] > .toolbarbutton-badge-stack{
-  padding: var(--toolbarbutton-inner-padding) !important;
+  padding: var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) !important;
   padding-bottom: 0px !important;
-  height: calc(var(--toolbarbutton-inner-padding) + 16px) !important;
+  height: calc(var(--toolbarbutton-padding-inner,var(--toolbarbutton-inner-padding)) + 16px) !important;
   border: none !important;
   background-color: transparent !important;
   box-shadow: none !important;

chrome/vertical_bookmarks_toolbar.css

@@ -26,6 +26,7 @@ See the above repository for updates as well as full license text. */
   }
   #PersonalToolbar .toolbarbutton-1{
     --toolbarbutton-inner-padding: 10px !important;
+    --toolbarbutton-padding-inner: 10px !important;
   }
   #PersonalToolbar #PlacesChevron{
     display: none;

sidebery-styles.json

@@ -0,0 +1,76 @@
+{
+    "cssVars": {
+        "bg": "#242631ff",
+        "title_fg": null,
+        "sub_title_fg": null,
+        "label_fg": null,
+        "label_fg_hover": null,
+        "label_fg_active": null,
+        "info_fg": null,
+        "true_fg": null,
+        "false_fg": null,
+        "active_fg": null,
+        "inactive_fg": null,
+        "favicons_placeholder_bg": "#c8c8cbff",
+        "btn_bg": null,
+        "btn_bg_hover": null,
+        "btn_bg_active": null,
+        "btn_fg": null,
+        "btn_fg_hover": null,
+        "btn_fg_active": null,
+        "scroll_progress_h": null,
+        "scroll_progress_bg": null,
+        "ctx_menu_font": null,
+        "ctx_menu_bg": null,
+        "ctx_menu_bg_hover": null,
+        "ctx_menu_fg": null,
+        "nav_btn_fg": null,
+        "nav_btn_width": "48px",
+        "nav_btn_height": "48px",
+        "pinned_dock_overlay_bg": null,
+        "pinned_dock_overlay_shadow": null,
+        "tabs_height": "32px",
+        "tabs_pinned_height": null,
+        "tabs_pinned_width": null,
+        "tabs_indent": "16px",
+        "tabs_font": "inherit",
+        "tabs_count_font": null,
+        "tabs_fg": "#6272a4",
+        "tabs_fg_hover": "#f8f8f2",
+        "tabs_fg_active": null,
+        "tabs_bg_hover": "#373a49",
+        "tabs_bg_active": null,
+        "tabs_activated_bg": "#373a49",
+        "tabs_activated_fg": "#f8f8f2",
+        "tabs_selected_bg": "#373a49",
+        "tabs_selected_fg": "#f8f8f2",
+        "tabs_border": null,
+        "tabs_activated_border": null,
+        "tabs_selected_border": null,
+        "tabs_shadow": null,
+        "tabs_activated_shadow": null,
+        "tabs_selected_shadow": null,
+        "tabs_lvl_indicator_bg": null,
+        "bookmarks_bookmark_height": "32px",
+        "bookmarks_folder_height": "32px",
+        "bookmarks_separator_height": null,
+        "bookmarks_bookmark_font": "inherit",
+        "bookmarks_folder_font": "inherit",
+        "bookmarks_node_title_fg": "#f8f8f2",
+        "bookmarks_node_title_fg_hover": "#f8f8f2",
+        "bookmarks_node_title_fg_active": "#f8f8f2",
+        "bookmarks_node_bg_hover": "#373a49",
+        "bookmarks_node_bg_active": "#373a49",
+        "bookmarks_folder_closed_fg": "#f8f8f2",
+        "bookmarks_folder_closed_fg_hover": "#f8f8f2",
+        "bookmarks_folder_closed_fg_active": "#f8f8f2",
+        "bookmarks_folder_open_fg": "#f8f8f2",
+        "bookmarks_folder_open_fg_hover": "#f8f8f2",
+        "bookmarks_folder_open_fg_active": "#f8f8f2",
+        "bookmarks_folder_empty_fg": "#6272a4",
+        "bookmarks_open_bookmark_fg": "#f8f8f2"
+    },
+    "sidebarCSS": "\n.TabsPanel.panel,\n.Bookmarks.panel {\n  padding-top: 35px;\n}\n\n.TabsPanel.panel::before,\n.Bookmarks.panel::before {\n  content: 'Explorer';\n  display: block;\n  height: 35px;\n  line-height: 35px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  text-transform: uppercase;\n  color: var(--tabs-activated-fg);\n  padding: 0 20px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.Bookmarks.panel::before {\n  content: 'Bookmarks';\n}\n\n.Bookmarks {\n  font-weight: 500;\n}\n\n/*\n.Tab {\n  border-right: 2px solid transparent;\n}\n.Tab[data-active=\"true\"] {\n  border-right: 2px solid #a86595;\n}\n*/\n\n.Tab .ctx {\n  display: none;\n}\n\n.Tab .title {\n  font-size: 13px;\n  font-weight: 500 !important;\n}\n\n.Tab .close > svg {\n  fill: var(--tabs-activated-fg);\n}\n\n.Tab .close:hover > svg {\n  fill: var(--tabs-activated-fg);\n  background-color: rgba(255,255,255,0.1);\n  border-radius: 2px;\n}\n\n.Tab[data-discarded=\"true\"] {\n  color: var(--tabs-fg) !important;\n  font-style: italic;\n}\n\n.Tab[data-discarded=\"true\"] .t-box {\n  opacity: 1 !important;\n}\n\n.panel-btn {\n  border-left: 0 solid transparent;\n  border-width: 0 2px;\n}\n\n.panel-btn > svg {\n --container-fg: #6272a4;\n --nav-btn-fg:  #6272a4;\n width: 24px !important;\n height: 24px !important;\n}\n\n/*\n.panel-btn:hover {\n  background-color: var(--tabs-bg-hover) !important;\n}\n*/\n\n.panel-btn:hover > svg {\n --container-fg: var(--tabs-fg-hover);\n --nav-btn-fg:  var(--tabs-fg-hover);\n}\n\n.panel-btn[data-active=\"true\"] {\n  background-color: #43465a !important;\n  border-left-color: #a86595;\n}\n\n.panel-btn[data-active=\"true\"] > svg {\n --container-fg: var(--tabs-activated-fg);\n --nav-btn-fg:  var(--tabs-activated-fg);\n}\n\n.NavigationBar {\n  background-color: #3a3f4e;\n  box-shadow: none !important;\n}\n\n.TabsPanel .container, .PinnedDock {\n  box-shadow: none !important;\n}\n",
+    "groupCSS": "",
+    "ver": "4.10.2"
+}

tony/dynamic_native_tabs.css

@@ -0,0 +1,30 @@
+/* Transição suave para o TabsToolbar */
+#main-window #TabsToolbar {
+    overflow: hidden;
+    max-height: 3em; /* Estado expandido */
+    transition: max-height 0.3s ease-in-out !important;
+}
+
+/* Toolbar items */
+#main-window #TabsToolbar .toolbar-items {
+    overflow: hidden;
+    max-height: 40px; /* Estado expandido */
+    transition: max-height 0.3s ease-in-out !important;
+}
+
+/* Estado oculto: TabsToolbar colapsado */
+#main-window[titlepreface*="​"] #TabsToolbar {
+    max-height: 0; /* Estado colapsado */
+    visibility: hidden; /* Evita conteúdo interativo enquanto colapsado */
+    transition: max-height 0.3s ease-in-out, visibility 0s 0.3s !important; /* atraso para ocultar */
+}
+
+/* Estado oculto para os itens da toolbar */
+#main-window[titlepreface*="​"] #TabsToolbar .toolbar-items {
+    max-height: 0;
+}
+
+/* Corrige o z-index de abas fixadas */
+#main-window[titlepreface*="​"] #tabbrowser-tabs {
+    z-index: 0 !important;
+}

tony/smaller_sidebar_header.css

@@ -0,0 +1,14 @@
+#sidebar-header {
+    font-size: 1.2em !important;
+    padding: 2px 6px 2px 3px !important;
+}
+
+#sidebar-header #sidebar-close {
+    padding: 3px !important;
+}
+
+#sidebar-header #sidebar-close .toolbarbutton-icon {
+    width: 14px !important;
+    height: 14px !important;
+    opacity: 0.6 !important;
+}

userChrome.css

@@ -0,0 +1,2 @@
+@import url(tony/smaller_sidebar_header.css);
+@import url(tony/dynamic_native_tabs.css);

userContent.css

@@ -0,0 +1 @@
+@import url(content/standalone_image_page_mods.css);