New sidebery data export

Some of the rules are unnecessarily complex, but we need to support
old searchbar as well

.gitignore

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

chrome/autohide_bookmarks_and_main_toolbars.css

@@ -73,16 +73,17 @@ See the above repository for updates as well as full license text. */
   transform-origin: 0px var(--uc-navbar-height);
   position: relative;
 }
-:root[sessionrestored] #urlbar[popover]{
+:root[sessionrestored] :is(.urlbar,#urlbar[popover]){
   opacity: 0;
   pointer-events: none;
   transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms);
   transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2);
   transform: rotateX(89.5deg);
 }
-:root[window-modal-open] #urlbar[popover],
-#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) #urlbar[popover],
+:root:is([window-modal-open],[customizing]) toolbar :is(.urlbar,#urlbar[popover]),
+#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox :is(.urlbar,#urlbar[popover]),
+#navigator-toolbox:is(:hover,:focus-within) :is(.urlbar,#urlbar[popover]),
+:where(:root[sessionrestored]) #nav-bar #searchbar-new[popover]:is([focused],[open]),
 :where(:root[sessionrestored]) #urlbar-container > #urlbar[popover]:is([focused],[open]){
   opacity: 1;
   pointer-events: auto;

chrome/autohide_main_toolbar.css

@@ -54,21 +54,25 @@ See the above repository for updates as well as full license text. */
   transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
   transition-delay: 0s !important;
 }
-:root[sessionrestored] #urlbar[popover]{
+
+:root[sessionrestored] :is(.urlbar,#urlbar[popover]){
   opacity: 0;
   pointer-events: none;
   transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay);
   transform: translateY(var(--uc-navbar-transform));
 }
-#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
-.browser-titlebar:is(:hover,:focus-within) ~ #nav-bar #urlbar[popover],
-#nav-bar:is(:hover,:focus-within) #urlbar[popover],
+:root[customizing] #nav-bar :is(#urlbar,#searchbar-new),
+#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox :is(.urlbar,#urlbar[popover]),
+.browser-titlebar:is(:hover,:focus-within) ~ #nav-bar :is(.urlbar,#urlbar[popover]),
+#nav-bar:is(:hover,:focus-within) :is(.urlbar,#urlbar[popover]),
+#nav-bar #searchbar-new[popover]:is([focused],[open]),
 #urlbar-container > #urlbar[popover]:is([focused],[open]){
   opacity: 1;
   pointer-events: auto;
   transition-delay: 0ms;
   transform: translateY(0);
 }
+:where(:root[sessionrestored]) #nav-bar #searchbar-new[popover]:is([focused],[open]),
 :where(:root[sessionrestored]) #urlbar-container > #urlbar[popover]:is([focused],[open]){
  transition-duration: 100ms; /* Faster when focused */
 }

chrome/autohide_toolbox.css

@@ -35,6 +35,7 @@ See the above repository for updates as well as full license text. */
   pointer-events: none;
   width: 100vw;
 }
+:root[sessionrestored] toolbar #searchbar-new[popover],
 :root[sessionrestored] #urlbar[popover]{
   pointer-events: none;
   opacity: 0;
@@ -43,9 +44,11 @@ See the above repository for updates as well as full license text. */
   transform: rotateX(89.9deg);
 }
 
-:root[window-modal-open] #urlbar[popover],
-#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel), > #tab-group-editor > [panelopen]) ~ toolbox #urlbar[popover],
-#navigator-toolbox:is(:hover,:focus-within,[movingtab]) #urlbar[popover],
+:root:is([window-modal-open],[customizing]) toolbar #searchbar-new[popover],
+:root:is([window-modal-open],[customizing]) #urlbar[popover],
+#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel), > #tab-group-editor > [panelopen]) ~ toolbox :is(.urlbar,#urlbar[popover]),
+#navigator-toolbox:is(:hover,:focus-within,[movingtab]) :is(.urlbar,#urlbar[popover]),
+:where(:root[sessionrestored]) #navigator-toolbox .urlbar[popover]:is([focused],[open]),
 :where(:root[sessionrestored]) #urlbar-container > #urlbar[popover]:is([focused],[open]){
   pointer-events: auto;
   opacity: 1;
@@ -56,6 +59,7 @@ See the above repository for updates as well as full license text. */
 :root[window-modal-open] #navigator-toolbox,
 #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel), > #tab-group-editor > [panelopen]) ~ toolbox,
 #navigator-toolbox:has(#urlbar:is([open],[focus-within])),
+#navigator-toolbox:has(.urlbar:is([open],[focus-within])),
 #navigator-toolbox:is(:hover,:focus-within,[movingtab]){
   transition-delay: 33ms !important;
   transform: rotateX(0);
@@ -67,6 +71,7 @@ See the above repository for updates as well as full license text. */
 @media -moz-pref("userchrome.autohide-toolbox.unhide-by-native-ui.enabled"){
   :root[sizemode="maximized"]:not(:hover){
     #navigator-toolbox:not(:-moz-window-inactive),
+    #searchbar-new[popover]:not(:-moz-window-inactive),
     #urlbar[popover]:not(:-moz-window-inactive){
       transition-delay: 33ms !important;
       transform: rotateX(0);
@@ -90,7 +95,7 @@ See the above repository for updates as well as full license text. */
 #PersonalToolbar:is([collapsed=""],[collapsed="true"]){ display: none }
 
 /* This is a bit hacky fix for an issue that will make urlbar zero pixels tall after you enter customize mode */
-#urlbar[breakout][breakout-extend] > .urlbar-input-container{
+:is(#urlbar,.urlbar)[breakout][breakout-extend] > .urlbar-input-container{
   padding-block: calc(min(4px,(var(--urlbar-container-height) - var(--urlbar-height)) / 2) + var(--urlbar-container-padding)) !important;
 }
 

chrome/multi-row_tabs.css

@@ -53,7 +53,7 @@ See the above repository for updates as well as full license text. */
 tab-split-view-wrapper {
   min-width: calc(var(--multirow-tab-min-width) * 2 + 6px) !important;
 }
-#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]){
+:where(#tabbrowser-tabs[orient="horizontal"]) .tabbrowser-tab[fadein]:not([pinned]){
   min-width: var(--multirow-tab-min-width) !important;
   flex-grow: var(--multirow-tab-dynamic-width) !important;
 }
@@ -80,6 +80,6 @@ tab-split-view-wrapper {
 }
 
 /* Make tab groups collapse */
-tab-group[collapsed] .tabbrowser-tab[fadein]:not([pinned]){
+tab-group[collapsed] > .tabbrowser-tab[fadein]:not([pinned]){
   min-width: 0 !important;
 }

chrome/non_floating_sharp_tabs.css

@@ -8,7 +8,6 @@ See the above repository for updates as well as full license text. */
 :root[id]{
   --tab-block-margin: 0px !important;
   --tabs-shadow-size: 1px !important;
-  
   /* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color  */
   --tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
 }
@@ -45,8 +44,8 @@ See the above repository for updates as well as full license text. */
 }
 /* We draw the icon as background-image to get correct scaling regardless of toolbar height */
 #tabs-newtab-button > .toolbarbutton-icon{
-  border-radius: 0 !important; 
-  width: var(--tab-min-height) !important; 
+  border-radius: 0 !important;
+  width: var(--tab-min-height) !important;
   height: initial !important;
   list-style-image: none;
   background-image: url(chrome://global/skin/icons/plus.svg);
@@ -68,6 +67,7 @@ See the above repository for updates as well as full license text. */
 }
 
 /* Selected tab needs to be relative so it gets drawn over nav-bar top "border" */
+tab-split-view-wrapper[hasactivetab],
 .tabbrowser-tab[selected]{
   position: relative;
   z-index: 1;
@@ -78,12 +78,28 @@ See the above repository for updates as well as full license text. */
 
 .tab-content[pinned]{ padding-inline: 11px !important; }
 
+tab-split-view-wrapper,
 .tab-background{
   border-radius: 0 !important;
   box-shadow: none !important;
   border-top: 0 !important;
   outline: none !important;
 }
+tab-split-view-wrapper{
+  padding-block: 0 !important;
+  align-items: stretch !important;
+  background-size: calc(100% - 40px) 2px;
+  background-position-x: center;
+}
+tab-split-view-wrapper .tab-background{
+  margin-inline: 0 !important;
+}
+tab-split-view-wrapper:is(:hover,[hasactivetab]){
+  background-image: linear-gradient(90deg, var(--tab-hover-background-color));
+  background-size: 100% 2px;
+  background-repeat: no-repeat;
+  transition: background-size 160ms ease !important;
+}
 
 /* This next rule set is needed for Fx 120, otherwise themes with translucent tabs would seem to have extra border separating them from toolbar below. */
 :root[lwtheme] #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab > .tab-stack > .tab-background:is([selected], [multiselected]){
@@ -96,9 +112,8 @@ See the above repository for updates as well as full license text. */
 }
 .tab-background:not([selected])[multiselected]{
   background: color-mix(in srgb, currentColor 11%, transparent) !important;
-  margin-inline-start: -1px; 
+  margin-inline-start: -1px;
 }
-
 /* Line to mark selected tab */
 .tab-background[selected]::before,
 .tabbrowser-tab:hover > stack > .tab-background::before{
@@ -119,6 +134,7 @@ See the above repository for updates as well as full license text. */
 .tab-stack:hover > .tab-background::before{ animation: tab-onhover-line-anim 160ms }
 
 /* Disable animation for selected and pinned tabs */
+tab-split-view-wrapper > .tabbrowser-tab > .tab-stack > .tab-background::before,
 .tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
 
 /* moves context-line to the bottom */

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