diff --git a/CREDITS b/CREDITS index bd5eea3..457aee8 100644 --- a/CREDITS +++ b/CREDITS @@ -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 diff --git a/icons/tab-bottom-corner.svg b/icons/tab-bottom-corner-left.svg similarity index 100% rename from icons/tab-bottom-corner.svg rename to icons/tab-bottom-corner-left.svg diff --git a/icons/tab-bottom-corner-right.svg b/icons/tab-bottom-corner-right.svg new file mode 100644 index 0000000..b443ef3 --- /dev/null +++ b/icons/tab-bottom-corner-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/userChrome.css b/userChrome.css index eae1e00..c190f24 100644 --- a/userChrome.css +++ b/userChrome.css @@ -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 *******************************************/