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

Merge branch 'bottom-round-corner'

Browse source
This commit is contained in:
alstjr7375 2021-05-23 13:53:44 +09:00
commit f094c357e8
2 changed files with 43 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg 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: 397 B

38
userChrome.css
View file

@ -147,6 +147,44 @@
box-shadow: 0 0 1px var(--toolbar-color) !important;
}
/** Selected Tab - Bottom Rounded Corner ************************************/
#tabbrowser-tabs {
--tab-corner-rounding: 5px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
--tab-corner-padding: 1px;
}
:root[lwtheme="true"] tab[visuallyselected] > stack::before,
:root[lwtheme="true"] tab[visuallyselected] > stack::after {
/* Box */
content: "" !important;
display: block !important;
position: absolute !important;
z-index: 1 !important;
/* Shape */
width: var(--tab-corner-rounding) !important;
height: 100% !important;
/* Color */
fill: var(--toolbar-bgcolor) !important;
stroke: var(--tabs-border-color, transparent) !important;
-moz-context-properties: fill, stroke !important;
background-image: url(./icons/tab-bottom-corner.svg);
background-size: var(--tab-corner-rounding);
background-repeat: no-repeat;
background-position-y: bottom;
}
:root[lwtheme="true"] tab[visuallyselected] > stack::before {
left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important;
}
:root[lwtheme="true"] tab[visuallyselected] > stack::after {
left: auto;
right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
transform: scaleX(-1) !important;
}
/** Unselected Tab - Divide line ********************************************/
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,