Removed separators between horizontal tab groups and stretched vertic…

…al tab group labels
Zonnev · Nov 30, 2024 · 9ecebc7 · 9ecebc7
1 parent 0595849
commit 9ecebc7
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 6 deletions.
diff --git a/Private Mode Style/userChrome.css b/Private Mode Style/userChrome.css
@@ -825,8 +825,15 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt
 }
 
 /*** TAB GROUPS ***/
+
 #tabbrowser-tabs[orient="horizontal"] .tab-group-label {
-    margin-block: auto 0 auto !important;
+    margin-block: auto 0 auto !important; /* aligns group label in vertical center of horizontal tab bar */
+}
+sidebar-main[expanded] #tabbrowser-tabs[orient="vertical"] tab-group .tab-group-label {
+    max-width: none !important; /* this is stretching the group labels in expanded vertical tab bar */
+}
+sidebar-main[expanded] #tabbrowser-tabs[orient="vertical"] tab-group:not([collapsed]) .tab-group-label {
+    border-radius: 4px 4px 0px 0px !important; /* this border radius only in expanded vertical tab bar and only when the tab group is expanded */
 }
 @media (-moz-bool-pref: "sidebar.verticalTabs") {
   tab-group {
@@ -837,6 +844,14 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt
   }
 }
 
+/* do not show tab separators between collapsed tab groups */
+#tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > .tabbrowser-tab,
+#tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab,
+#tabbrowser-tabs[orient="horizontal"] tab-group:not([collapsed]) > .tabbrowser-tab:first-of-type,
+#tabbrowser-tabs[orient="horizontal"] tab-group:not([collapsed]):has(> .tabbrowser-tab:last-of-type:is([selected], [multiselected], :hover)) + .tabbrowser-tab {
+  border-image: none !important;
+}
+
 /*** VERTICAL TABS ***/
 
 #TabsToolbar[collapsed] ~ #nav-bar ~ #PersonalToolbar {
@@ -932,10 +947,14 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt
 #tabbrowser-tabs[orient="vertical"] {
   &:not([expanded]) {
     & .tab-content:not([pinned]) {
-        padding: 0px 17px !important;
+        margin: 0px auto !important;
+        padding: 0px 0px !important;
     }
   }
 }
+#tabbrowser-tabs[orient="vertical"] .tab-icon-stack:not([pinned]) {
+    margin-inline-start: 0px !important;
+}
 
 /* position of new tab button in not expanded vertical tabs */
 #tabbrowser-tabs[orient="vertical"]:not([expanded]) #tabs-newtab-button,

diff --git a/Titlebar Enabled/userChrome.css b/Titlebar Enabled/userChrome.css
@@ -1125,8 +1125,15 @@ toolbarpaletteitem > #stop-reload-button {
 }
 
 /*** TAB GROUPS ***/
+
 #tabbrowser-tabs[orient="horizontal"] .tab-group-label {
-    margin-block: auto 0 auto !important;
+    margin-block: auto 0 auto !important; /* aligns group label in vertical center of horizontal tab bar */
+}
+sidebar-main[expanded] #tabbrowser-tabs[orient="vertical"] tab-group .tab-group-label {
+    max-width: none !important; /* this is stretching the group labels in expanded vertical tab bar */
+}
+sidebar-main[expanded] #tabbrowser-tabs[orient="vertical"] tab-group:not([collapsed]) .tab-group-label {
+    border-radius: 4px 4px 0px 0px !important; /* this border radius only in expanded vertical tab bar and only when the tab group is expanded */
 }
 @media (-moz-bool-pref: "sidebar.verticalTabs") {
   tab-group {
@@ -1137,6 +1144,14 @@ toolbarpaletteitem > #stop-reload-button {
   }
 }
 
+/* do not show tab separators between collapsed tab groups */
+#tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > .tabbrowser-tab,
+#tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab,
+#tabbrowser-tabs[orient="horizontal"] tab-group:not([collapsed]) > .tabbrowser-tab:first-of-type,
+#tabbrowser-tabs[orient="horizontal"] tab-group:not([collapsed]):has(> .tabbrowser-tab:last-of-type:is([selected], [multiselected], :hover)) + .tabbrowser-tab {
+  border-image: none !important;
+}
+
 /*** VERTICAL TABS ***/
 
 #sidebar-main {
@@ -1235,10 +1250,14 @@ toolbarpaletteitem > #stop-reload-button {
 #tabbrowser-tabs[orient="vertical"] {
   &:not([expanded]) {
     & .tab-content:not([pinned]) {
-        padding: 0px 17px !important;
+        margin: 0px auto !important;
+        padding: 0px 0px !important;
     }
   }
 }
+#tabbrowser-tabs[orient="vertical"] .tab-icon-stack:not([pinned]) {
+    margin-inline-start: 0px !important;
+}
 
 /* position of new tab button in not expanded vertical tabs */
 #tabbrowser-tabs[orient="vertical"]:not([expanded]) #tabs-newtab-button,

diff --git a/base.css b/base.css
@@ -1118,8 +1118,15 @@ toolbarpaletteitem > #stop-reload-button {
 }
 
 /*** TAB GROUPS ***/
+
 #tabbrowser-tabs[orient="horizontal"] .tab-group-label {
-    margin-block: auto 0 auto !important;
+    margin-block: auto 0 auto !important; /* aligns group label in vertical center of horizontal tab bar */
+}
+sidebar-main[expanded] #tabbrowser-tabs[orient="vertical"] tab-group .tab-group-label {
+    max-width: none !important; /* this is stretching the group labels in expanded vertical tab bar */
+}
+sidebar-main[expanded] #tabbrowser-tabs[orient="vertical"] tab-group:not([collapsed]) .tab-group-label {
+    border-radius: 4px 4px 0px 0px !important; /* this border radius only in expanded vertical tab bar and only when the tab group is expanded */
 }
 @media (-moz-bool-pref: "sidebar.verticalTabs") {
   tab-group {
@@ -1130,6 +1137,14 @@ toolbarpaletteitem > #stop-reload-button {
   }
 }
 
+/* do not show tab separators between collapsed tab groups */
+#tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > .tabbrowser-tab,
+#tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] + .tabbrowser-tab,
+#tabbrowser-tabs[orient="horizontal"] tab-group:not([collapsed]) > .tabbrowser-tab:first-of-type,
+#tabbrowser-tabs[orient="horizontal"] tab-group:not([collapsed]):has(> .tabbrowser-tab:last-of-type:is([selected], [multiselected], :hover)) + .tabbrowser-tab {
+  border-image: none !important;
+}
+
 /*** VERTICAL TABS ***/
 
 #sidebar-main {
@@ -1228,10 +1243,14 @@ toolbarpaletteitem > #stop-reload-button {
 #tabbrowser-tabs[orient="vertical"] {
   &:not([expanded]) {
     & .tab-content:not([pinned]) {
-        padding: 0px 17px !important;
+        margin: 0px auto !important;
+        padding: 0px 0px !important;
     }
   }
 }
+#tabbrowser-tabs[orient="vertical"] .tab-icon-stack:not([pinned]) {
+    margin-inline-start: 0px !important;
+}
 
 /* position of new tab button in not expanded vertical tabs */
 #tabbrowser-tabs[orient="vertical"]:not([expanded]) #tabs-newtab-button,