make some styles less dependent on color-mix pref
This commit is contained in:
parent
1fcfc2eb20
commit
dcdc03519c
3 changed files with 18 additions and 18 deletions
|
@ -18,9 +18,7 @@ See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
#TabsToolbar{ --toolbarbutton-inner-padding: 6px !important; }
|
#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 }
|
.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"],
|
.titlebar-spacer[type="pre-tabs"],
|
||||||
.tabbrowser-tab::after{ border: none !important; }
|
.tabbrowser-tab::after{ border: none !important; }
|
||||||
|
|
||||||
|
@ -33,7 +31,7 @@ See the above repository for updates as well as full license text. */
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
content: "";
|
||||||
fill: var(--uc-tab-fill);
|
fill: color-mix(in srgb, currentColor 11%, transparent);
|
||||||
-moz-context-properties: fill,stroke;
|
-moz-context-properties: fill,stroke;
|
||||||
left: calc(var(--uc-tab-curve-padding,0px) - var(--uc-tab-curve-size));
|
left: calc(var(--uc-tab-curve-padding,0px) - var(--uc-tab-curve-size));
|
||||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIGZpbGw9InRyYW5zcGFyZW50Ij48L3BhdGg+DQo8L3N2Zz4");
|
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; }
|
.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 */
|
/* 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; }
|
#navigator-toolbox{ --tabs-border-color: color-mix(in srgb, currentcolor, transparent 80%) !important; }
|
||||||
#tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) }
|
#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; }
|
.tabbrowser-tab .tab-background{ border-top: none !important; box-shadow: none !important; }
|
||||||
|
|
||||||
.tab-background[selected]::before{
|
.tab-background[selected]::before{
|
||||||
|
|
|
@ -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. */
|
/* 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[id]{
|
||||||
|
|
||||||
:root{
|
|
||||||
--proton-tab-block-margin: 0px !important;
|
--proton-tab-block-margin: 0px !important;
|
||||||
--tab-block-margin: 0px !important;
|
--tab-block-margin: 0px !important;
|
||||||
--tabs-shadow-size: 1px !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; */
|
/* --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.*/
|
/* These next two rules set a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/
|
||||||
#navigator-toolbox{
|
#nav-bar{
|
||||||
--tabs-border-color: color-mix(in srgb, currentcolor 30%, transparent) !important;
|
/* This overrides value in compact_proton.css */
|
||||||
|
box-shadow: 0 -1px 0 0 color-mix(in srgb, currentcolor 30%, transparent) !important;
|
||||||
}
|
}
|
||||||
|
.tab-background[selected]{
|
||||||
/* This overrides value in compact_proton.css */
|
border-inline: 1px solid color-mix(in srgb, currentcolor 30%, transparent) !important;
|
||||||
#nav-bar{
|
|
||||||
box-shadow: 0 -1px 0 0 var(--tabs-border-color) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#TabsToolbar{
|
#TabsToolbar{
|
||||||
|
@ -65,9 +62,6 @@ See the above repository for updates as well as full license text. */
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
.tab-background[selected]{
|
|
||||||
border-inline: 1px solid var(--tabs-border-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Line to mark selected tab */
|
/* Line to mark selected tab */
|
||||||
.tab-background[selected]::before,
|
.tab-background[selected]::before,
|
||||||
|
|
|
@ -5,8 +5,14 @@ See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
.tabbrowser-tab{
|
.tabbrowser-tab{
|
||||||
border-inline-end: 1px solid transparent !important;
|
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:hover,
|
||||||
.tabbrowser-tab[beforehovered],
|
.tabbrowser-tab[beforehovered],
|
||||||
.tabbrowser-tab[selected],
|
.tabbrowser-tab[selected],
|
||||||
|
|
Loading…
Reference in a new issue