Fix: Vertical Tab - Layout fix for Pinned Tab

This commit is contained in:
alstjr7375 2022-07-10 03:12:21 +09:00
parent bbe6cebe3f
commit bbe679b8ec
2 changed files with 75 additions and 0 deletions

View file

@ -4054,6 +4054,13 @@
.tabbrowser-tab[selected="true"] {
-moz-window-dragging: drag;
--tab-max-width: 100%;
width: var(--tab-max-width) !important;
margin-inline-start: calc(var(--tab-shadow-max-size) * -1) !important;
}
.tabbrowser-tab[selected="true"][pinned="true"] {
-moz-box-flex: 100;
max-width: var(--tab-max-width) !important;
}
.tabbrowser-tab[selected="true"] .tab-label-container {
@ -4082,6 +4089,24 @@
.tab-label-container[pinned] {
width: unset !important;
}
@supports -moz-bool-pref("browser.tabs.tabmanager.enabled") {
:root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button,
:root:not([tabsintitlebar="true"])
#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"])
~ #new-tab-button {
display: -moz-box !important;
}
}
#tabbrowser-tabs:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox {
padding-inline: 12.5px !important;
}
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab[first-visible-unpinned-tab] {
--inline-tab-padding: 0 !important;
}
}
/*= Tab Bar - Connect to window ==============================================*/
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {

View file

@ -14,6 +14,14 @@ spacer[part="overflow-end-indicator"],
.tabbrowser-tab[selected="true"] {
-moz-window-dragging: drag;
--tab-max-width: 100%;
width: var(--tab-max-width) !important;
margin-inline-start: calc(var(--tab-shadow-max-size) * -1) !important;
// padding-inline-start: calc(var(--tab-shadow-max-size) + 1px) !important;
}
.tabbrowser-tab[selected="true"][pinned="true"] {
-moz-box-flex: 100;
max-width: var(--tab-max-width) !important;
}
.tabbrowser-tab[selected="true"] .tab-label-container {
margin-inline: 0 !important;
@ -41,3 +49,45 @@ spacer[part="overflow-end-indicator"],
.tab-label-container[pinned] {
width: unset !important;
}
// @supports not -moz-bool-pref("browser.tabs.tabmanager.enabled") {
// #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button {
// display: none;
// }
// #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
// // temporary space to keep a tab's close button under the cursor
// display: -moz-box;
// visibility: hidden;
// }
// }
//
// #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button,
// #tabbrowser-tabs[overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
// #tabbrowser-tabs:not([hasadjacentnewtabbutton]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
// #TabsToolbar[customizing="true"] #tabs-newtab-button {
// display: none;
// }
//
// #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
// // Add padding to match the shadow's blur radius so the
// // shadow doesn't get clipped when either the first or
// // last tab is selected
// padding-inline: var(--tab-shadow-max-size); // 6px
// }
//
// #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
// margin-inline-start: 12px !important;
// }
@include Option("browser.tabs.tabmanager.enabled") {
:root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button,
:root:not([tabsintitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button {
display: -moz-box !important;
}
}
#tabbrowser-tabs:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox {
padding-inline: 12.5px !important;
}
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
--inline-tab-padding: 0 !important;
}