From b9b1f15ba84f53afa98e98c8be5ef52008f0e00b Mon Sep 17 00:00:00 2001 From: Zonnev Date: Fri, 29 Nov 2024 19:32:57 +0100 Subject: [PATCH] Adjusted position of new tab button in vertical tabs --- Private Mode Style/userChrome.css | 27 +++++++++++++++++++++------ Titlebar Enabled/userChrome.css | 27 +++++++++++++++++++++------ base.css | 27 +++++++++++++++++++++------ 3 files changed, 63 insertions(+), 18 deletions(-) diff --git a/Private Mode Style/userChrome.css b/Private Mode Style/userChrome.css index ce8dad6..9a8e315 100644 --- 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 index 8edfc24..be62f3e 100644 --- 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 index ae16272..972495a 100644 --- 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;