mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-30 06:00:24 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add: New tab button - Bottom rounded corner

Browse source
This commit is contained in:
alstjr7375 2021-06-28 14:45:11 +09:00
parent bbd5c994f0
commit b2282ba69b
3 changed files with 28 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

0
icons/tab-bottom-corner.svg → icons/tab-bottom-corner-left.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 397 B

After

Width:  |  Height:  |  Size: 397 B

Before After
Before After

5
icons/tab-bottom-corner-right.svg Normal file
View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg transform="scale(-1,1)" stroke-width="1.2" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path d="M0 17 L0 16 A16 16 0 0 0 16 0 L 18 0 L 18 17 Z" fill="context-fill"></path>
<path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" fill="transparent"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 422 B

25
userChrome.css
View file

@ -274,7 +274,7 @@
stroke: var(--tabs-border-color, transparent) !important;
-moz-context-properties: fill, stroke !important;
background-image: url(./icons/tab-bottom-corner.svg);
/* Image */
background-size: var(--tab-corner-rounding);
background-repeat: no-repeat;
background-position-y: bottom;
@ -282,11 +282,12 @@
:root[lwtheme="true"] tab[visuallyselected] > stack::before {
left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important;
background-image: url(./icons/tab-bottom-corner-left.svg);
}
:root[lwtheme="true"] tab[visuallyselected] > stack::after {
left: auto;
right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
transform: scaleX(-1) !important;
background-image: url(./icons/tab-bottom-corner-right.svg);
}
/** Unselected Tab - Divide line ********************************************/
@ -338,6 +339,26 @@
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
}
/* Coner Rounding */
#tabs-newtab-button:hover {
/* Color */
fill: color-mix(in srgb, currentColor 17%, transparent) !important; /* Hardcoded compatibility var(--toolbarbutton-hover-background) */
-moz-context-properties: fill !important;
/* Corner Image */
--newtab-position: calc((var(--tab-corner-rounding) / 2) * -1);
background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg");
background-repeat: no-repeat;
background-position: left var(--newtab-position) bottom, right var(--newtab-position) bottom;
background-size: var(--tab-corner-rounding);
}
#tabs-newtab-button .toolbarbutton-icon {
-moz-context-properties: fill, fill-opacity;
fill: var(--toolbarbutton-icon-fill);
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}
/** Clipped tabs - Letters cleary *******************************************/
#tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) {
padding-inline-start: 8px !important;