Added a corner radius to tab icons

This commit is contained in:
mr. m
2025-03-07 11:59:00 +01:00
parent 3325dc0d9f
commit 65433172f3

View File

@@ -1,5 +1,5 @@
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f023b2641bf 100644
index 01815c2114a627e5cac183c702bd82f1bd4f58f8..7b20eb17b53cfe13b8de968b1aa59c94b6468c0d 100644
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -31,7 +31,7 @@
@@ -37,7 +37,15 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
&::before {
position: absolute;
@@ -502,7 +501,7 @@
@@ -437,6 +436,7 @@
.tab-icon-image {
-moz-context-properties: fill, stroke;
fill: currentColor;
+ border-radius: 4px;
/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
@@ -502,7 +502,7 @@
z-index: 1; /* Overlay tab title */
#tabbrowser-tabs[orient=vertical] & {
@@ -46,7 +54,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
}
&[crashed] {
@@ -510,7 +509,7 @@
@@ -510,7 +510,7 @@
}
#tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
@@ -55,7 +63,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
&[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
@@ -572,7 +571,7 @@
@@ -572,7 +572,7 @@
}
#tabbrowser-tabs[orient="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]),
@@ -64,7 +72,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
&[crashed] {
display: revert;
}
@@ -586,7 +585,7 @@
@@ -586,7 +586,7 @@
--button-min-height-small: 24px;
--button-border-radius: var(--border-radius-small);
@@ -73,7 +81,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
&:is([soundplaying], [muted], [activemedia-blocked]) {
display: block;
}
@@ -617,14 +616,14 @@
@@ -617,14 +617,14 @@
}
&[textoverflow] {
@@ -92,7 +100,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
direction: rtl;
mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
}
@@ -1170,7 +1169,7 @@
@@ -1170,7 +1170,7 @@
}
}
@@ -101,7 +109,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
#vertical-tabs-newtab-button {
appearance: none;
min-height: var(--tab-min-height);
@@ -1181,7 +1180,7 @@
@@ -1181,7 +1181,7 @@
margin-inline: var(--tab-inner-inline-margin);
#tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text {
@@ -110,7 +118,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
}
&:hover {
@@ -1205,7 +1204,7 @@
@@ -1205,7 +1205,7 @@
* flex container. #tabs-newtab-button is a child of the arrowscrollbox where
* we don't want a gap (between tabs), so we have to add some margin.
*/
@@ -119,7 +127,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
margin-block: var(--tab-block-margin);
}
@@ -1229,7 +1228,6 @@
@@ -1229,7 +1229,6 @@
}
#vertical-pinned-tabs-container {
@@ -127,7 +135,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
display: none;
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
overflow-y: auto;
@@ -1439,7 +1437,7 @@
@@ -1439,7 +1438,7 @@
toolbarbutton:not(#firefox-view-button),
toolbarpaletteitem:not(#wrapper-firefox-view-button)
) ~ #tabbrowser-tabs {
@@ -136,7 +144,7 @@ index 01815c2114a627e5cac183c702bd82f1bd4f58f8..ad3686a4bcac0331d86f5e95ecdb6f02
padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
margin-inline-start: 2px;
}
@@ -1473,7 +1471,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
@@ -1473,7 +1472,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
list-style-image: url(chrome://global/skin/icons/plus.svg);
}