New sidebery data export

Expanded sidebar internal layout should stay "static", that is,
to not change when sidebar gets hovered.

.gitignore

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

chrome/autohide_tabstoolbar_v2.css

@@ -12,13 +12,14 @@ See the above repository for updates as well as full license text. */
   #sidebar-main{
     overflow: visible !important;
     max-width: var(--tab-collapsed-width) !important;
-    z-index: var(--browser-area-z-index-toolbox-while-animating);
+    z-index: var(--browser-area-z-index-sidebar-expand-on-hover,var(--browser-area-z-index-toolbox-while-animating));
     transition: z-index 0s linear var(--uc-tabs-hide-duration);
     background: inherit;
   }
   sidebar-main{
     --tab-pinned-horizontal-count: 5; /* This needs to match whatever is used in sidebar-main.css - currently 5 */
-    background: inherit;
+    --uc-sidebar-tabs-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);
+    background-color: var(--toolbox-background-color,inherit);
     overflow: hidden;
     min-width: var(--tab-collapsed-width);
     transition: min-width var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay);
@@ -29,6 +30,9 @@ See the above repository for updates as well as full license text. */
       border-inline-width: 0.01px 0;
     }
   }
+  div.wrapper{
+    min-width: var(--uc-sidebar-tabs-width,initial);
+  }
   :where(#navigator-toolbox[movingtab] + #browser > #sidebar-main) > sidebar-main[expanded],
   sidebar-main[expanded]:hover{
     min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);

chrome/hide_tabs_scrollbuttons.css

@@ -4,9 +4,9 @@ See the above repository for updates as well as full license text. */
 /* This should hide tabs scrollbuttons in a manner that preserves the ability to move tab strip when reordering tabs */
 
 :root{
-  --uc-tab-shadow-max-size: 6px;
+  --uc-tab-shadow-max-size: 3px;
   /* Funny, but we let this to be overridden in ESR 128 which doesn't exist in Firefox 139 */
-  --tab-shadow-max-size: var(--uc-tab-shadow-max-size); 
+  --tab-shadow-max-size: var(--uc-tab-shadow-max-size);
 }
 
 #tabbrowser-arrowscrollbox{
@@ -18,12 +18,12 @@ See the above repository for updates as well as full license text. */
 #tabbrowser-tabs:not([movingtab]){
   --uc-scroll-visibility: hidden;
 }
-#tabbrowser-tabs[overflow]{
+#tabbrowser-arrowscrollbox[overflowing]{
   --uc-scrollbox-base-margin: -31px;
   --uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size));
 }
-:root[uidensity="compact"] #tabbrowser-tabs[overflow]{
+#pinned-tabs-container{
-  --uc-scrollbox-base-margin: -25px;
+  padding-inline-end: var(--uc-tab-shadow-max-size,0);
 }
 #tabbrowser-arrowscrollbox:not([scrolledtostart]){
   --uc-scrollbox-overflow-start-margin: -1px;
@@ -42,7 +42,7 @@ spacer[part="overflow-end-indicator"]{
 #scrollbutton-down:is([disabled=""],[disabled="true"]) > .toolbarbutton-icon,
 #scrollbutton-up:is([disabled=""],[disabled="true"]) > .toolbarbutton-icon{
   opacity: 0.4;
-} 
+}
 #scrollbutton-up,
 #scrollbutton-down{
   position: relative;
@@ -54,11 +54,9 @@ spacer[part="overflow-end-indicator"]{
   opacity: 1 !important;
 }
 #scrollbutton-up{
-  margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important;
   background-image: var(--uc-scrollbutton-up-background);
 }
 #scrollbutton-down{
-  margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important;
   background-image: var(--uc-scrollbutton-down-background);
 }
 scrollbox[orient="horizontal"],

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);