diff --git a/chrome/curved_tabs.css b/chrome/curved_tabs.css index eb986f2..0dfeebc 100644 --- a/chrome/curved_tabs.css +++ b/chrome/curved_tabs.css @@ -18,9 +18,7 @@ See the above repository for updates as well as full license text. */ #TabsToolbar{ --toolbarbutton-inner-padding: 6px !important; } -.tabbrowser-tab:hover{ --uc-tab-fill: rgba(0,0,0,.1) } .tabbrowser-tab[selected]{ --uc-tab-curve-padding: 1px } -#TabsToolbar[brighttext] .tabbrowser-tab:hover{ --uc-tab-fill: rgba(255,255,255,.1) } .titlebar-spacer[type="pre-tabs"], .tabbrowser-tab::after{ border: none !important; } @@ -33,7 +31,7 @@ See the above repository for updates as well as full license text. */ display: block; position: absolute; content: ""; - fill: var(--uc-tab-fill); + fill: color-mix(in srgb, currentColor 11%, transparent); -moz-context-properties: fill,stroke; left: calc(var(--uc-tab-curve-padding,0px) - var(--uc-tab-curve-size)); background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIGZpbGw9InRyYW5zcGFyZW50Ij48L3BhdGg+DQo8L3N2Zz4"); @@ -81,9 +79,11 @@ See the above repository for updates as well as full license text. */ .tabbrowser-tab[last-visible-tab]{ margin-inline-end: var(--uc-tab-curve-size) !important; } /* OPTIONAL - COLORS - show tabs border, selected tab line and make selected tab match the main toolbar color. Also disables tab shadow */ +/* Using these color options requires you to set layout.css.color-mix.enabled to true in about:config */ /* #navigator-toolbox{ --tabs-border-color: color-mix(in srgb, currentcolor, transparent 80%) !important; } #tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) } +.tab-background[selected]{ --toolbar-bgcolor: transparent } .tabbrowser-tab .tab-background{ border-top: none !important; box-shadow: none !important; } .tab-background[selected]::before{ diff --git a/chrome/non_floating_sharp_tabs.css b/chrome/non_floating_sharp_tabs.css index 0a7899c..88d63fa 100644 --- a/chrome/non_floating_sharp_tabs.css +++ b/chrome/non_floating_sharp_tabs.css @@ -3,11 +3,9 @@ See the above repository for updates as well as full license text. */ /* This style makes tabs and related items non-rounded and connects tabs to toolbars like in previous Firefox versions. */ -/* It's not strictly a requirement, but this style expects compact_proton.css to be loaded before it. */ +/* It's not strictly a requirement, but this style expects compact_proton.css to be loaded before it. */ -/* NOTE: go to about:config and enable layout.css.color-mix.enabled, this doesn't work properly without it. */ - -:root{ +:root[id]{ --proton-tab-block-margin: 0px !important; --tab-block-margin: 0px !important; --tabs-shadow-size: 1px !important; @@ -19,14 +17,13 @@ See the above repository for updates as well as full license text. */ /* --tab-line-color: blue !important; */ } -/* This sets a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/ -#navigator-toolbox{ - --tabs-border-color: color-mix(in srgb, currentcolor 30%, transparent) !important; +/* These next two rules set a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/ +#nav-bar{ + /* This overrides value in compact_proton.css */ + box-shadow: 0 -1px 0 0 color-mix(in srgb, currentcolor 30%, transparent) !important; } - -/* This overrides value in compact_proton.css */ -#nav-bar{ - box-shadow: 0 -1px 0 0 var(--tabs-border-color) !important; +.tab-background[selected]{ + border-inline: 1px solid color-mix(in srgb, currentcolor 30%, transparent) !important; } #TabsToolbar{ @@ -65,9 +62,6 @@ See the above repository for updates as well as full license text. */ border-radius: 0 !important; box-shadow: none !important; } -.tab-background[selected]{ - border-inline: 1px solid var(--tabs-border-color) !important; -} /* Line to mark selected tab */ .tab-background[selected]::before, diff --git a/chrome/tab_separator_lines.css b/chrome/tab_separator_lines.css index ad88476..351152f 100644 --- a/chrome/tab_separator_lines.css +++ b/chrome/tab_separator_lines.css @@ -5,8 +5,14 @@ See the above repository for updates as well as full license text. */ .tabbrowser-tab{ border-inline-end: 1px solid transparent !important; - border-image: 0 1 linear-gradient(transparent 20%,var(--toolbarseparator-color) 20%,var(--toolbarseparator-color) 80%,transparent 80%); + border-image: 0 1 linear-gradient( + transparent 20%, + color-mix(in srgb, currentColor 20%, transparent) 20%, + color-mix(in srgb, currentColor 20%, transparent) 80%, + transparent 80% + ); } + .tabbrowser-tab:hover, .tabbrowser-tab[beforehovered], .tabbrowser-tab[selected],