mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2026-02-07 07:50:30 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #96 from SimYunSup/SimYunSup-patch-2

Browse source 
Feature: Change New Tab button #95
This commit is contained in:
MS_Y 2021-06-30 03:11:22 +00:00 • committed by GitHub
commit ae9ea09f8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 69 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

8
CREDITS
View file

@ -66,6 +66,10 @@ N: Jan Janssen
E: medhefgo@web.de
W: https://github.com/medhefgo
N: Yunsup Sim
E: pedogunu@gmail.com
W: https://ethansup.net
----------
Contributors
@ -93,7 +97,3 @@ E: sanderthedragon@zoho.com
N: Sylvain
E: B00ze64@hotmail.com
N: Yunsup Sim
E: pedogunu@gmail.com
W: https://ethansup.net

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

79
userChrome.css
View file

@ -70,6 +70,7 @@
:root {
/* Tab Bar */
--proton-tab-block-margin: 2px !important; /* Original: 4px */
--tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */
--inline-tab-padding: 6px !important; /* Original: 8px */
/* Panel */
@ -90,6 +91,7 @@
:root[uidensity=touch] {
/* Tab Bar - Like Original */
--proton-tab-block-margin: 4px !important; /* Original: 4px */
--tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */
--inline-tab-padding: 8px !important; /* Original: 8px */
/* Panel - Like Original */
@ -212,7 +214,7 @@
}
.tab-content {
margin-top: var(--proton-tab-block-margin);
margin-top: var(--tab-block-margin);
}
.tab-stack {
@ -265,7 +267,7 @@
/** Selected Tab - Bottom Rounded Corner ************************************/
#tabbrowser-tabs {
--tab-corner-rounding: 5px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
--tab-corner-rounding: 4px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
--tab-corner-padding: 1px;
}
@ -286,7 +288,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;
@ -294,22 +296,29 @@
: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 ********************************************/
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
#tabbrowser-arrowscrollbox {
position: absolute;
}
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after {
#tabs-newtab-button:not(:hover)::before {
/* Box Model */
content: "";
display: block;
display: block;
position: absolute;
top: 50%;
/* Position */
top: 50%;
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
/* Bar shape */
width: 1px;
@ -318,19 +327,12 @@
/* Bar Color */
opacity: var(--tab-separator-opacity);
transition: opacity .2s var(--ease-basic) !important;
background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */
}
.tab-background::before {
transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
}
.tabbrowser-tab[last-visible-tab] .tab-background::after {
right: 0;
transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
transition: opacity .2s var(--ease-basic);
background-color: color-mix(in srgb, currentColor 20%, transparent); /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */
}
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before,
.tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + #tabs-newtab-button::before,
.tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) .tab-background::before,
#tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
opacity: 0 !important;
@ -338,7 +340,46 @@
/* Latest Tab & New tab margin */
#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] {
margin-inline-end: 4px !important;
margin-inline-end: 1px !important;
}
/* New tab button - Looks like tab ******************************************/
#tabs-newtab-button {
/* Original:
margin: 0 0 var(--tabs-navbar-shadow-size) !important
=> Can't ovrride style. Therefore, we should approach it by bypass.
*/
--tabs-navbar-shadow-size: -1px; /* Original: 1px */
--tabs-navbar-original-shadow-size: 1px;
/* Size */
-moz-box-align: stretch !important;
padding-top: var(--tab-block-margin) !important;
}
#tabs-newtab-button > .toolbarbutton-icon {
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; /* Replace var(--toolbarbutton-hover-background) - Hard coded for compatibility */
-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 var(--tabs-navbar-original-shadow-size), right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
background-size: var(--tab-corner-rounding);
}
#tabs-newtab-button .toolbarbutton-icon {
padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important;
-moz-context-properties: fill, fill-opacity;
fill: var(--toolbarbutton-icon-fill);
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}
/** Clipped tabs - Letters cleary *******************************************/