Adjusted position of new tab button in vertical tabs

Zonnev · Nov 29, 2024 · b9b1f15 · b9b1f15
1 parent 19de3aa
commit b9b1f15
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 18 deletions.
diff --git a/Private Mode Style/userChrome.css b/Private Mode Style/userChrome.css
@@ -851,7 +851,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt
   }
 }
 #tabbrowser-arrowscrollbox[orient="vertical"] {
-    padding: 2px 3px !important;
+    padding: 2px 3px 2px 2px !important;
 }
 #tabbrowser-tabs[orient="vertical"] {
   & .tabbrowser-tab {
@@ -891,7 +891,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt
     margin-inline-end: unset !important;
 }
 
-/* not expanded vertical tabs */
+/** not expanded vertical tabs **/
 #tabbrowser-tabs[orient="vertical"] {
   &:not([expanded]) {
     & .tab-background:is([selected], [multiselected]) {
@@ -936,12 +936,15 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt
     }
   }
 }
-#tabbrowser-tabs[orient="vertical"] #tabs-newtab-button {
-      margin: 4px 5px 4px 5px !important;
-      background: none !important;
+
+/* position of new tab button in not expanded vertical tabs */
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) #tabs-newtab-button,
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) #vertical-tabs-newtab-button {
+    margin: 4px auto !important;
+    background: none !important;
 }
 
-/* expanded vertical tabs */
+/** expanded vertical tabs **/
 #tabbrowser-tabs[orient="vertical"][expanded] #tabs-newtab-button {
       margin: 4px 0px 4px -1px !important;
       background: none !important;
@@ -1011,6 +1014,18 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt
   }
 }
 
+/* position of new tab button in expanded vertical tabs */
+#tabbrowser-tabs[orient="vertical"][expanded] #tabs-newtab-button {
+    margin: 4px 3px !important;
+    padding: 0px 9px !important;
+    background: none !important;
+}
+#tabbrowser-tabs[orient="vertical"][expanded] #vertical-tabs-newtab-button {
+    margin: 4px 5px !important;
+    padding: 0px 9px !important;
+    background: none !important;
+}
+
 /*** MENUBAR ***/
 #menubar-items {
     padding-top: 2px !important;

diff --git a/Titlebar Enabled/userChrome.css b/Titlebar Enabled/userChrome.css
@@ -1154,7 +1154,7 @@ toolbarpaletteitem > #stop-reload-button {
   }
 }
 #tabbrowser-arrowscrollbox[orient="vertical"] {
-    padding: 2px 3px !important;
+    padding: 2px 3px 2px 2px !important;
 }
 #tabbrowser-tabs[orient="vertical"] {
   & .tabbrowser-tab {
@@ -1194,7 +1194,7 @@ toolbarpaletteitem > #stop-reload-button {
     margin-inline-end: unset !important;
 }
 
-/* not expanded vertical tabs */
+/** not expanded vertical tabs **/
 #tabbrowser-tabs[orient="vertical"] {
   &:not([expanded]) {
     & .tab-background:is([selected], [multiselected]) {
@@ -1239,12 +1239,15 @@ toolbarpaletteitem > #stop-reload-button {
     }
   }
 }
-#tabbrowser-tabs[orient="vertical"] #tabs-newtab-button {
-      margin: 4px 5px 4px 5px !important;
-      background: none !important;
+
+/* position of new tab button in not expanded vertical tabs */
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) #tabs-newtab-button,
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) #vertical-tabs-newtab-button {
+    margin: 4px auto !important;
+    background: none !important;
 }
 
-/* expanded vertical tabs */
+/** expanded vertical tabs **/
 #tabbrowser-tabs[orient="vertical"][expanded] #tabs-newtab-button {
       margin: 4px 0px 4px -1px !important;
       background: none !important;
@@ -1315,6 +1318,18 @@ toolbarpaletteitem > #stop-reload-button {
   }
 }
 
+/* position of new tab button in expanded vertical tabs */
+#tabbrowser-tabs[orient="vertical"][expanded] #tabs-newtab-button {
+    margin: 4px 3px !important;
+    padding: 0px 9px !important;
+    background: none !important;
+}
+#tabbrowser-tabs[orient="vertical"][expanded] #vertical-tabs-newtab-button {
+    margin: 4px 5px !important;
+    padding: 0px 9px !important;
+    background: none !important;
+}
+
 /* make tab animation in system accent color */
 .tab-throbber::before {
     fill: LinkText !important;

diff --git a/base.css b/base.css
@@ -1148,7 +1148,7 @@ toolbarpaletteitem > #stop-reload-button {
   }
 }
 #tabbrowser-arrowscrollbox[orient="vertical"] {
-    padding: 2px 3px !important;
+    padding: 2px 3px 2px 2px !important;
 }
 #tabbrowser-tabs[orient="vertical"] {
   & .tabbrowser-tab {
@@ -1188,7 +1188,7 @@ toolbarpaletteitem > #stop-reload-button {
     margin-inline-end: unset !important;
 }
 
-/* not expanded vertical tabs */
+/** not expanded vertical tabs **/
 #tabbrowser-tabs[orient="vertical"] {
   &:not([expanded]) {
     & .tab-background:is([selected], [multiselected]) {
@@ -1233,12 +1233,15 @@ toolbarpaletteitem > #stop-reload-button {
     }
   }
 }
-#tabbrowser-tabs[orient="vertical"] #tabs-newtab-button {
-      margin: 4px 5px 4px 5px !important;
-      background: none !important;
+
+/* position of new tab button in not expanded vertical tabs */
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) #tabs-newtab-button,
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) #vertical-tabs-newtab-button {
+    margin: 4px auto !important;
+    background: none !important;
 }
 
-/* expanded vertical tabs */
+/** expanded vertical tabs **/
 #tabbrowser-tabs[orient="vertical"][expanded] #tabs-newtab-button {
       margin: 4px 0px 4px -1px !important;
       background: none !important;
@@ -1309,6 +1312,18 @@ toolbarpaletteitem > #stop-reload-button {
   }
 }
 
+/* position of new tab button in expanded vertical tabs */
+#tabbrowser-tabs[orient="vertical"][expanded] #tabs-newtab-button {
+    margin: 4px 3px !important;
+    padding: 0px 9px !important;
+    background: none !important;
+}
+#tabbrowser-tabs[orient="vertical"][expanded] #vertical-tabs-newtab-button {
+    margin: 4px 5px !important;
+    padding: 0px 9px !important;
+    background: none !important;
+}
+
 /* make tab animation in system accent color */
 .tab-throbber::before {
     fill: LinkText !important;