Hide reset button in vertical tabs and adjust CSS for better styling

This commit is contained in:
mr. M
2024-11-11 22:59:52 +01:00
parent a7db756c76
commit 4b6068e13b
2 changed files with 33 additions and 8 deletions

View File

@@ -149,7 +149,8 @@
box-shadow: none !important;
}
& label { display: none !important; }
& .tab-close-button {
& .tab-close-button,
& .tab-reset-button {
display: none !important;
}
@@ -498,6 +499,10 @@
}
}
& .tab-reset-button {
display: none !important;
}
& .tab-content {
display: flex;
align-content: center;
@@ -686,7 +691,8 @@
display: none !important;
}
&[pinned]:not([zen-essential]):hover .tab-reset-button {
&[pinned]:not([zen-essential]):hover .tab-reset-button,
&[pinned][visuallyselected]:not([zen-essential]) .tab-reset-button {
display: block;
}
@@ -707,7 +713,7 @@
.tab-reset-button {
display: none;
-moz-context-properties: fill, fill-opacity;
border-radius: 4px;
border-radius: var(--tab-border-radius);
color: inherit;
fill: currentColor;
padding: 6px;

View File

@@ -1,8 +1,8 @@
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
index 9f7331f2f00a8b0de6ce28a7029358a86eeb8873..2dc56a8455df9009bd1f524b377b8fdf09e124ca 100644
index d48aad3a397909056ee43be4e65797875e80b772..89d2b381153d137ccfd080844bdb9abbbd90e1d5 100644
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -15,7 +15,7 @@
@@ -26,7 +26,7 @@
--tab-icon-end-margin: 5.5px;
--tab-icon-overlay-fill: light-dark(black, white);
--tab-icon-overlay-stroke: light-dark(white, black);
@@ -11,7 +11,7 @@ index 9f7331f2f00a8b0de6ce28a7029358a86eeb8873..2dc56a8455df9009bd1f524b377b8fdf
--tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
--tab-selected-textcolor: var(--toolbar-color);
--tab-selected-bgcolor: var(--toolbar-bgcolor);
@@ -132,8 +132,7 @@
@@ -145,8 +145,7 @@
}
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > &[pinned] {
@@ -21,7 +21,26 @@ index 9f7331f2f00a8b0de6ce28a7029358a86eeb8873..2dc56a8455df9009bd1f524b377b8fdf
}
#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > &:is([selected], [multiselected]) {
@@ -952,7 +951,7 @@ sidebar-main[expanded] > #vertical-tabs > #tabbrowser-tabs[orient="vertical"] >
@@ -498,14 +497,14 @@
}
&[textoverflow] {
- &[labeldirection=ltr]:not([pinned]),
- &:not([labeldirection], [pinned]):-moz-locale-dir(ltr) {
+ &[labeldirection=ltr],
+ &:not([labeldirection]):-moz-locale-dir(ltr) {
direction: ltr;
mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
}
- &[labeldirection=rtl]:not([pinned]),
- &:not([labeldirection], [pinned]):-moz-locale-dir(rtl) {
+ &[labeldirection=rtl],
+ &:not([labeldirection]):-moz-locale-dir(rtl) {
direction: rtl;
mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
}
@@ -1052,7 +1051,7 @@ tab-group {
toolbarbutton:not(#firefox-view-button),
toolbarpaletteitem:not(#wrapper-firefox-view-button)
) ~ #tabbrowser-tabs {
@@ -30,7 +49,7 @@ index 9f7331f2f00a8b0de6ce28a7029358a86eeb8873..2dc56a8455df9009bd1f524b377b8fdf
padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
margin-inline-start: 2px;
}
@@ -987,7 +986,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
@@ -1087,7 +1086,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
list-style-image: url(chrome://global/skin/icons/plus.svg);
}