mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-08 02:03:20 -08:00
Merge branch 'bottom-rounded-corner' into dev #326
This commit is contained in:
alstjr7375
commit
6bc4ccd2a8
29 changed files with 1170 additions and 262 deletions
5
CREDITS
5
CREDITS
|
|
@ -233,3 +233,8 @@ N: Waterfox
|
|||
W: https://github.com/WaterfoxCo/Waterfox
|
||||
C: Copyright (c) 2012 Waterfox Limited
|
||||
L: MPL 2.0
|
||||
|
||||
N: WaveFox
|
||||
W: https://github.com/QNetITQ/WaveFox
|
||||
C: Copyright (c) 2021 QNetITQ
|
||||
L: MIT
|
||||
|
|
|
|||
|
|
@ -137,9 +137,9 @@
|
|||
|
||||
/* Navbar Border */
|
||||
#navigator-toolbox:-moz-lwtheme {
|
||||
--tabs-border-color: rgba(0, 0, 0, 0.3);
|
||||
/* Legacy: v96 */
|
||||
--lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
|
||||
--tabs-border-color: rgba(0, 0, 0, 0.4);
|
||||
/* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */
|
||||
--lwt-tabs-border-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/*= Findbar Border Color =====================================================*/
|
||||
|
|
@ -6391,24 +6391,35 @@
|
|||
}
|
||||
/*= Multi Selected Color - More Contrast =====================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.multi_selected") {
|
||||
#TabsToolbar {
|
||||
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent));
|
||||
}
|
||||
#TabsToolbar[brighttext] {
|
||||
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[multiselected]:not([selected]):-moz-lwtheme {
|
||||
background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
|
||||
.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) {
|
||||
background: color-mix(in srgb, currentColor 65%, transparent);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#TabsToolbar[brighttext]
|
||||
.tab-background[multiselected="true"]:not([selected="true"])
|
||||
> .tab-loading-burst:not([bursting]) {
|
||||
opacity: 0.15;
|
||||
> .tab-background[multiselected]:not([selected]) {
|
||||
/* Original:
|
||||
background-attachment: scroll, scroll, fixed;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
|
||||
var(--lwt-header-image, none);
|
||||
background-position: 0 0, 0 0, right top;
|
||||
background-repeat: repeat-x, repeat-x, no-repeat;
|
||||
background-size: auto 100%, auto 100%, auto auto;
|
||||
*/
|
||||
background-attachment: scroll, fixed !important;
|
||||
background-color: transparent !important;
|
||||
background-image: linear-gradient(var(--uc-multiselected-tab-bgcolor), var(--uc-multiselected-tab-bgcolor)),
|
||||
var(--lwt-header-image, none) !important;
|
||||
background-position: 0 0, right top !important;
|
||||
background-repeat: repeat-x, no-repeat !important;
|
||||
background-size: auto 100%, auto auto !important;
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
|
|
@ -6431,40 +6442,70 @@
|
|||
}
|
||||
/*= Selected Tab - Box Shadow ================================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.box_shadow") {
|
||||
#TabsToolbar[brighttext]
|
||||
#TabsToolbar {
|
||||
--uc-tab-background-shadow-soft: 0 0 1px;
|
||||
--uc-tab-background-shadow-hard: 0 0 0 1px;
|
||||
--uc-tab-shadow-color: var(
|
||||
--tab-line-color,
|
||||
var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))
|
||||
);
|
||||
--uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9)));
|
||||
--uc-tab-basic-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
|
||||
--uc-tab-additional-shadow: 0 0 4px rgba(128, 128, 142, 0.5);
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.australis"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.chrome"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
#TabsToolbar {
|
||||
--uc-tab-background-shadow-hard: 0 -1px 0;
|
||||
--uc-tab-basic-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4);
|
||||
--uc-tab-additional-shadow: 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
|
||||
box-shadow: var(--uc-tab-basic-shadow) !important;
|
||||
}
|
||||
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected="true"]:not(:focus)
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
.tabbrowser-tab {
|
||||
/* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
|
||||
Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
box-shadow: 0 0 1px var(--toolbar-color) !important;
|
||||
/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */
|
||||
}
|
||||
|
||||
#TabsToolbar[brighttext]
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected])
|
||||
.tabbrowser-tab:is([selected], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important;
|
||||
box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color) !important;
|
||||
}
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected="true"]:not(:focus),
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected]) {
|
||||
--uc-tab-shadow-color: var(--toolbar-color);
|
||||
}
|
||||
|
||||
/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */
|
||||
#TabsToolbar:not([brighttext])
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"])
|
||||
#TabsToolbar:not([brighttext])
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background {
|
||||
box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))),
|
||||
0 0 4px rgba(128, 128, 142, 0.5) !important;
|
||||
}
|
||||
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important;
|
||||
--uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle);
|
||||
box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color), var(--uc-tab-additional-shadow) !important;
|
||||
}
|
||||
|
||||
/* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border
|
||||
|
|
@ -6475,9 +6516,7 @@
|
|||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))),
|
||||
0 0 4px rgba(128, 128, 142, 0.5) !important;
|
||||
box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color), var(--uc-tab-additional-shadow) !important;
|
||||
}
|
||||
|
||||
:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
|
|
@ -6486,135 +6525,380 @@
|
|||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important;
|
||||
box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color) !important;
|
||||
}
|
||||
}
|
||||
/*= Selected Tab - Bottom Rounded Corner =====================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
|
||||
#tabbrowser-tabs {
|
||||
--tab-corner-rounding: 3px;
|
||||
/* 10px looks about like chromium - 17px looks close to Australis tabs */
|
||||
--tab-corner-padding: 0px;
|
||||
--tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") {
|
||||
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") {
|
||||
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") {
|
||||
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
|
||||
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-rounding: 3px;
|
||||
/* 10px looks about like chromium - 17px looks close to Australis tabs */
|
||||
--uc-tab-corner-padding: 0px;
|
||||
--uc-tab-corner-position: calc(var(--uc-tab-corner-padding) - var(--uc-tab-corner-rounding));
|
||||
--uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg");
|
||||
--uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg");
|
||||
}
|
||||
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::after {
|
||||
/* Box */
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
/* Shape */
|
||||
width: var(--tab-corner-rounding);
|
||||
height: 100%;
|
||||
/* Color */
|
||||
fill: transparent;
|
||||
stroke: transparent;
|
||||
-moz-context-properties: fill, stroke;
|
||||
/* Image */
|
||||
background-size: var(--tab-corner-rounding);
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") {
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") {
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::after {
|
||||
/* Based on tab background
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none);
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::after {
|
||||
/* Box */
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
/* Shape */
|
||||
width: var(--uc-tab-corner-rounding);
|
||||
height: 100%;
|
||||
/* Color */
|
||||
fill: transparent;
|
||||
stroke: transparent;
|
||||
-moz-context-properties: fill, stroke;
|
||||
/* Image */
|
||||
background-size: var(--uc-tab-corner-rounding);
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") {
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") {
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::after {
|
||||
/* Based on tab background
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none);
|
||||
|
||||
defaults
|
||||
background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
|
||||
*/
|
||||
fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important;
|
||||
defaults
|
||||
background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
|
||||
*/
|
||||
fill: var(
|
||||
--lwt-selected-tab-background-color,
|
||||
var(--tab-selected-bgcolor, var(--toolbar-bgcolor))
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::before {
|
||||
left: var(--uc-tab-corner-position);
|
||||
background-image: var(--uc-tab-corner-left-side-svg);
|
||||
}
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::after {
|
||||
right: var(--uc-tab-corner-position);
|
||||
background-image: var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after {
|
||||
fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)));
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") {
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::after {
|
||||
fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
}
|
||||
:root:not([customizing="true"])
|
||||
.tabbrowser-tab:hover:not([visuallyselected], [multiselected])
|
||||
.tab-background::before,
|
||||
:root:not([customizing="true"])
|
||||
.tabbrowser-tab:hover:not([visuallyselected], [multiselected])
|
||||
.tab-background::after {
|
||||
fill: color-mix(in srgb, currentColor 11%, transparent);
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.multi_selected") {
|
||||
:root:not([customizing="true"])
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected])
|
||||
.tab-background::before,
|
||||
:root:not([customizing="true"])
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected])
|
||||
.tab-background::after {
|
||||
fill: color-mix(in srgb, currentColor 65%, transparent);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
:root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected]
|
||||
.tab-background:-moz-lwtheme::before,
|
||||
:root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected]
|
||||
.tab-background:-moz-lwtheme::after {
|
||||
/* As Selected Tab - Box Shadow */
|
||||
stroke: var(--toolbar-color);
|
||||
}
|
||||
@media (-moz-gtk-csd-available) {
|
||||
:root:not([customizing="true"]) {
|
||||
/* Fill color for GTK */
|
||||
}
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected])
|
||||
.tab-background::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected])
|
||||
.tab-background::after {
|
||||
/* As GTK Toolbar's background-color + background-image
|
||||
* --toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
* --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
||||
*/
|
||||
fill: color-mix(in srgb, white 15%, -moz-dialog);
|
||||
stroke: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
#TabsToolbar[brighttext]
|
||||
.tabbrowser-tab[visuallyselected]
|
||||
.tab-background::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
#TabsToolbar[brighttext]
|
||||
.tabbrowser-tab[visuallyselected]
|
||||
.tab-background::after {
|
||||
stroke: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::before {
|
||||
left: var(--tab-corner-position);
|
||||
background-image: url("../icons/tab-bottom-corner-left.svg");
|
||||
}
|
||||
:root:not([customizing="true"]) .tabbrowser-tab .tab-background::after {
|
||||
right: var(--tab-corner-position);
|
||||
background-image: url("../icons/tab-bottom-corner-right.svg");
|
||||
}
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after {
|
||||
fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)));
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") {
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after {
|
||||
content: "";
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.australis"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.chrome"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-height: calc(var(--tab-min-height) + 1px);
|
||||
--uc-tab-corner-size: var(--uc-tab-corner-height);
|
||||
--uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2);
|
||||
--uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1);
|
||||
--uc-tab-corner-bgimage: none;
|
||||
}
|
||||
}
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::after {
|
||||
fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
}
|
||||
:root:not([customizing="true"])
|
||||
.tabbrowser-tab:hover:not([visuallyselected], [multiselected])
|
||||
.tab-background::before,
|
||||
:root:not([customizing="true"])
|
||||
.tabbrowser-tab:hover:not([visuallyselected], [multiselected])
|
||||
.tab-background::after {
|
||||
fill: color-mix(in srgb, currentColor 11%, transparent);
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.multi_selected") {
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::before,
|
||||
:root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::after {
|
||||
fill: color-mix(in srgb, currentColor 65%, transparent);
|
||||
opacity: 0.3;
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") {
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg");
|
||||
--uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-wave.svg#svgClipPath");
|
||||
--uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg");
|
||||
--uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-wave.svg#svgClipPath");
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
:root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected]
|
||||
.tab-background:-moz-lwtheme::before,
|
||||
:root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected]
|
||||
.tab-background:-moz-lwtheme::after {
|
||||
/* As Selected Tab - Box Shadow */
|
||||
stroke: var(--toolbar-color);
|
||||
}
|
||||
@media (-moz-gtk-csd-available) {
|
||||
:root:not([customizing="true"]) {
|
||||
/* Fill color for GTK */
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") {
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg");
|
||||
--uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-australis.svg#svgClipPath");
|
||||
--uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg");
|
||||
--uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-australis.svg#svgClipPath");
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg");
|
||||
}
|
||||
}
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected])
|
||||
.tab-background::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected])
|
||||
.tab-background::after {
|
||||
/* As GTK Toolbar's background-color + background-image
|
||||
* --toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
* --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
||||
*/
|
||||
fill: color-mix(in srgb, white 15%, -moz-dialog);
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") {
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg");
|
||||
--uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chrome.svg#svgClipPath");
|
||||
--uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg");
|
||||
--uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chrome.svg#svgClipPath");
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg");
|
||||
--uc-tab-corner-size: 16px;
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg");
|
||||
--uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chromeLegacy.svg#svgClipPath");
|
||||
--uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg");
|
||||
--uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chromeLegacy.svg#svgClipPath");
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg");
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg");
|
||||
--uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-edge.svg#svgClipPath");
|
||||
--uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg");
|
||||
--uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-edge.svg#svgClipPath");
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg");
|
||||
--uc-tab-corner-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") {
|
||||
.tabbrowser-tab {
|
||||
padding-inline: 0 !important;
|
||||
overflow-clip-margin: var(--uc-tab-corner-half-size) !important;
|
||||
}
|
||||
.tabbrowser-tab .tab-background {
|
||||
--tab-border-radius: 0px;
|
||||
margin-inline: var(--uc-tab-corner-half-size) !important;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") {
|
||||
.tabbrowser-tab[visuallyselected] {
|
||||
padding-inline: 0 !important;
|
||||
overflow-clip-margin: var(--uc-tab-corner-half-size) !important;
|
||||
}
|
||||
.tabbrowser-tab[visuallyselected] .tab-background {
|
||||
--tab-border-radius: 0px;
|
||||
margin-inline: var(--uc-tab-corner-half-size) !important;
|
||||
position: relative;
|
||||
}
|
||||
.tabbrowser-tab[visuallyselected] .tab-background::before,
|
||||
.tabbrowser-tab[visuallyselected] .tab-background::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab .tab-background::before,
|
||||
.tabbrowser-tab .tab-background::after {
|
||||
/* Box */
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
/* Shape */
|
||||
width: var(--uc-tab-corner-size);
|
||||
height: var(--uc-tab-corner-height);
|
||||
/* Color */
|
||||
fill: transparent;
|
||||
stroke: transparent;
|
||||
opacity: 1;
|
||||
-moz-context-properties: fill, stroke, stroke-opacity;
|
||||
/* Image */
|
||||
background-size: cover, auto auto;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-position: bottom, right top;
|
||||
background-attachment: scroll, fixed;
|
||||
}
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
#TabsToolbar[brighttext]
|
||||
.tabbrowser-tab[visuallyselected]
|
||||
.tab-background::before,
|
||||
:root:not([customizing="true"]):not([lwtheme="true"])
|
||||
#TabsToolbar[brighttext]
|
||||
.tabbrowser-tab[visuallyselected]
|
||||
.tab-background::after {
|
||||
stroke: transparent;
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") {
|
||||
.tabbrowser-tab .tab-background::before,
|
||||
.tabbrowser-tab .tab-background::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") {
|
||||
.tabbrowser-tab .tab-background::before,
|
||||
.tabbrowser-tab .tab-background::after {
|
||||
/* Based on tab background
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none);
|
||||
|
||||
defaults
|
||||
background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
|
||||
*/
|
||||
fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important;
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab .tab-background::before {
|
||||
right: 100%;
|
||||
background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage);
|
||||
clip-path: var(--uc-tab-corner-left-side-clipPath);
|
||||
}
|
||||
.tabbrowser-tab .tab-background::after {
|
||||
left: 100%;
|
||||
background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage);
|
||||
clip-path: var(--uc-tab-corner-right-side-clipPath);
|
||||
}
|
||||
.tabbrowser-tab[beforeselected-visible] .tab-background::after {
|
||||
--uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped);
|
||||
}
|
||||
.tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-background::before {
|
||||
--uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped);
|
||||
}
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
|
||||
--uc-tab-corner-bgimage: var(--lwt-header-image, none);
|
||||
}
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before,
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
|
||||
fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.box_shadow") {
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before,
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
|
||||
stroke: var(--uc-tab-shadow-color);
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::before,
|
||||
.tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::after {
|
||||
fill: color-mix(in srgb, currentColor 11%, transparent);
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.multi_selected") {
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::before,
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::after {
|
||||
fill: var(--uc-multiselected-tab-bgcolor);
|
||||
}
|
||||
}
|
||||
#tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme {
|
||||
--uc-tab-corner-bgimage: none;
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.box_shadow") {
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected])
|
||||
.tab-background::before,
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected])
|
||||
.tab-background::after {
|
||||
stroke-opacity: 0.3;
|
||||
}
|
||||
}
|
||||
@media (-moz-gtk-csd-available) {
|
||||
:root {
|
||||
/* Fill color for GTK */
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.box_shadow") {
|
||||
:root:not([lwtheme="true"]) .tabbrowser-tab {
|
||||
--uc-tab-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
:root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background {
|
||||
background-clip: content-box;
|
||||
}
|
||||
:root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before,
|
||||
:root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after {
|
||||
/* As GTK Toolbar's background-color + background-image
|
||||
* --toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
* --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
||||
*/
|
||||
--uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor));
|
||||
fill: rgba(255, 255, 255, 0.075);
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") {
|
||||
:root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before,
|
||||
:root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after {
|
||||
fill: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[positionpinnedtabs],
|
||||
#tabbrowser-tabs:not([overflow]) .tabbrowser-tab[first-visible-tab],
|
||||
#tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-unpinned-tab] {
|
||||
margin-left: var(--uc-tab-corner-half-size) !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[last-visible-tab] {
|
||||
margin-right: vart(--uc-tab-corner-half-size) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7001,38 +7285,75 @@
|
|||
/*= New tab button ============================================================*/
|
||||
/*= New tab button - Looks like tab ==========================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
|
||||
#tabs-newtab-button {
|
||||
/* Original:
|
||||
margin: 0 0 var(--tabs-navbar-shadow-size) !important
|
||||
=> Can't override style. Therefore, we should approach it by bypass.
|
||||
@supports -moz-bool-pref("userChrome.tab.connect_to_window") {
|
||||
#tabs-newtab-button {
|
||||
/* Size */
|
||||
-moz-box-align: stretch !important;
|
||||
padding-top: var(--tab-block-margin) !important;
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
|
||||
#tabs-newtab-button {
|
||||
/* Original:
|
||||
margin: 0 0 var(--tabs-navbar-shadow-size) !important
|
||||
=> Can't override style. Therefore, we should approach it by bypass.
|
||||
*/
|
||||
--tabs-navbar-shadow-size: -1px;
|
||||
/* Original: 1px */
|
||||
--tabs-navbar-original-shadow-size: 0.5px;
|
||||
--tab-corner-rounding: 4px;
|
||||
/* Hardcoded */
|
||||
/* Size */
|
||||
-moz-box-align: stretch !important;
|
||||
padding-top: var(--tab-block-margin) !important;
|
||||
/* Corner Rounding 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);
|
||||
/* Corner Rounding Color */
|
||||
fill: transparent !important;
|
||||
-moz-context-properties: fill !important;
|
||||
--tabs-navbar-shadow-size: -1px;
|
||||
/* Original: 1px */
|
||||
--uc-tabs-navbar-shadow-size: 0.5px;
|
||||
--uc-tab-corner-rounding: 4px;
|
||||
/* Hardcoded */
|
||||
--uc-newtab-bgcolor: transparent;
|
||||
/* Corner Rounding Image */
|
||||
--uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1);
|
||||
background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
|
||||
right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
|
||||
background-size: var(--uc-tab-corner-rounding);
|
||||
/* Corner Rounding Color */
|
||||
fill: var(--uc-newtab-bgcolor) !important;
|
||||
-moz-context-properties: fill !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.australis"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.chrome"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
#tabs-newtab-button {
|
||||
--uc-newtab-position: 0px;
|
||||
--uc-newtab-non-corner-bgwidth: 0px;
|
||||
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2);
|
||||
--uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1);
|
||||
transform: translateX(var(--uc-tab-corner-half-height-reverse));
|
||||
padding-inline: var(--uc-tab-corner-half-height) !important;
|
||||
overflow-clip-margin: var(--uc-tab-corner-half-height) !important;
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
|
||||
center bottom var(--uc-tabs-navbar-shadow-size),
|
||||
right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
|
||||
background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height),
|
||||
var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height),
|
||||
var(--uc-tab-corner-height) var(--uc-tab-corner-height);
|
||||
background-origin: padding-box;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
#tabs-newtab-button {
|
||||
--uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Corner Rounding Color */
|
||||
#tabs-newtab-button:hover {
|
||||
fill: var(--toolbarbutton-hover-background) !important;
|
||||
--uc-newtab-bgcolor: var(--toolbarbutton-hover-background);
|
||||
}
|
||||
|
||||
#tabs-newtab-button:hover:active {
|
||||
fill: var(--toolbarbutton-active-background) !important;
|
||||
--uc-newtab-bgcolor: var(--toolbarbutton-active-background);
|
||||
}
|
||||
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
|
|
@ -7048,6 +7369,36 @@
|
|||
/* Hardcoded for compatibility */
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.australis"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.chrome"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(
|
||||
to left,
|
||||
color-mix(in srgb, AccentColorText 10%, transparent),
|
||||
color-mix(in srgb, AccentColorText 10%, transparent)
|
||||
),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
|
||||
#tabs-newtab-button:hover:active {
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(
|
||||
to left,
|
||||
color-mix(in srgb, AccentColorText 15%, transparent),
|
||||
color-mix(in srgb, AccentColorText 15%, transparent)
|
||||
),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
|
|
@ -7061,6 +7412,37 @@
|
|||
fill: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) !important;
|
||||
/* Hardcoded for compatibility */
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.australis"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.chrome"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(
|
||||
to left,
|
||||
color-mix(in srgb, -moz-accent-color-foreground 10%, transparent),
|
||||
color-mix(in srgb, -moz-accent-color-foreground 10%, transparent)
|
||||
),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)
|
||||
#tabs-newtab-button:hover:active {
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(
|
||||
to left,
|
||||
color-mix(in srgb, -moz-accent-color-foreground 15%, transparent),
|
||||
color-mix(in srgb, -moz-accent-color-foreground 15%, transparent)
|
||||
),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* '+'Icon */
|
||||
|
|
@ -7068,11 +7450,24 @@
|
|||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important;
|
||||
/* Original: var(--tab-border-radius) */
|
||||
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;
|
||||
calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important;
|
||||
-moz-context-properties: fill, fill-opacity;
|
||||
fill: var(--toolbarbutton-icon-fill);
|
||||
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.australis"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
|
||||
"userChrome.tab.bottom_rounded_corner.chrome"
|
||||
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
#tabs-newtab-button .toolbarbutton-icon {
|
||||
--tab-border-radius: 0px;
|
||||
width: unset !important;
|
||||
padding-inline: 0px !important;
|
||||
margin-inline: calc(var(--uc-tab-corner-half-height) - 7.75px) !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*= New tab button - Smaller button ==========================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.newtab_button_smaller") {
|
||||
|
|
|
|||
3
icons/tab-bottom-corner-left-australis-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-australis-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47.7, 100" d="M30 0h-1.5C20.286.018 16.736 3.745 15 7.967l.045.105c.18.447.342.9.486 1.36.21.675.392 1.358.547 2.047.101.45.19.899.272 1.337.081.44.154.87.222 1.29.137.837.253 1.625.377 2.335.178 1.01.397 2.01.656 3.002.182.676.393 1.345.631 2.004a17.87 17.87 0 0 0 1.05 2.348c.29.525.612 1.03.966 1.514.344.463.722.9 1.13 1.306a10.525 10.525 0 0 0 1.79 1.414c.674.422 1.392.77 2.14 1.041a15.082 15.082 0 0 0 2.523.673c.47.083.942.148 1.417.195.245.024.494.045.748.062V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 694 B |
9
icons/tab-bottom-corner-left-australis.svg
Normal file
9
icons/tab-bottom-corner-left-australis.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M28.5 0C14.55.03 14.046 10.757 13.05 16.442 11.56 24.942 8.125 29.452 0 30h30V0m0 0h-1.5"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.2" transform="scale(0.036, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 540 B |
3
icons/tab-bottom-corner-left-chrome-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-chrome-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M18 0a9 9 0 0 0-7.571 4.135 9 9 0 0 0-.617 1.127 9 9 0 0 0-.72 2.457A9 9 0 0 0 9 9v18a9 9 0 0 0 4.135 7.571 9 9 0 0 0 1.127.617 9 9 0 0 0 2.457.72A9 9 0 0 0 18 36V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 399 B |
9
icons/tab-bottom-corner-left-chrome.svg
Normal file
9
icons/tab-bottom-corner-left-chrome.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M18 0a9 9 0 0 0-7.571 4.135 9 9 0 0 0-.617 1.127 9 9 0 0 0-.72 2.457A9 9 0 0 0 9 9v18a9 9 0 0 1-4.135 7.571 9 9 0 0 1-1.127.617 9 9 0 0 1-2.457.72A9 9 0 0 1 0 36h18V0"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.5" transform="scale(0.065, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 615 B |
3
icons/tab-bottom-corner-left-chromeLegacy-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-chromeLegacy-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M36 0h-9l-9 18 9 18h9V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 258 B |
9
icons/tab-bottom-corner-left-chromeLegacy.svg
Normal file
9
icons/tab-bottom-corner-left-chromeLegacy.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M0 36h9L27 0h9v36z"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.5" transform="scale(0.0299, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 468 B |
3
icons/tab-bottom-corner-left-edge-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-edge-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="44.5, 100" d="M16 0h-4a4 4 0 0 0-3.365 1.838 4 4 0 0 0-.473 1.035A4 4 0 0 0 8 4v24a4 4 0 0 0 1.838 3.365 4 4 0 0 0 1.035.473A4 4 0 0 0 12 32h4V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 368 B |
9
icons/tab-bottom-corner-left-edge.svg
Normal file
9
icons/tab-bottom-corner-left-edge.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M12 0a4 4 0 0 0-3.365 1.838A4 4 0 0 0 8 4v24a4 4 0 0 1-1.38 3.023A4 4 0 0 1 4 32h12V0m0 0h-4"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.5" transform="scale(0.075, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 542 B |
3
icons/tab-bottom-corner-left-wave-clipped.svg
Normal file
3
icons/tab-bottom-corner-left-wave-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="60, 100" d="M36 0c-6 0-12 0-15 6-1.5 3-2.25 7.5-3 12 .188 1.125.375 2.25.574 3.352.1.55.202 1.096.309 1.632.107.536.219 1.063.336 1.578.117.516.24 1.021.37 1.51.131.49.268.963.415 1.42.146.457.301.898.467 1.317a14.336 14.336 0 0 0 .818 1.736 9.98 9.98 0 0 0 1.695 2.236 9.134 9.134 0 0 0 2.498 1.754c.302.147.61.278.926.397.316.118.639.224.967.318.328.094.66.176 1 .248.34.072.685.133 1.033.186.71.102 1.423.176 2.139.222.363.024.73.042 1.098.055.368.013.739.021 1.11.027C34.5 36 35.25 36 36 36V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 720 B |
9
icons/tab-bottom-corner-left-wave.svg
Normal file
9
icons/tab-bottom-corner-left-wave.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 0,36 C 6,36 12.001,36 15.0005,30.0005 18,24.001 18,12.001 21.0005,6.0005 24.001,0 30,0 36,0 c 0,0 0,36 0,36 0,0 -36,0 -36,0 z"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-2.5" transform="scale(0.0299, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 580 B |
3
icons/tab-bottom-corner-right-australis-cilpped.svg
Normal file
3
icons/tab-bottom-corner-right-australis-cilpped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47, 100" d="M0 0h1.5m0 0C9.714.018 13.264 3.745 15 7.967l-.045.105c-.18.447-.342.9-.486 1.36a26.38 26.38 0 0 0-.547 2.047c-.101.45-.19.899-.272 1.337-.08.44-.154.87-.222 1.29-.137.837-.253 1.625-.377 2.335a38.38 38.38 0 0 1-.305 1.547c-.109.5-.225.986-.351 1.455a25.149 25.149 0 0 1-.631 2.004 17.918 17.918 0 0 1-1.05 2.348 14.16 14.16 0 0 1-.966 1.514c-.344.463-.722.9-1.13 1.306a10.525 10.525 0 0 1-1.79 1.414c-.674.422-1.392.77-2.14 1.041a13.21 13.21 0 0 1-1.213.383c-.432.116-.87.212-1.31.29-.47.083-.942.148-1.417.195-.245.024-.494.045-.748.062V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 776 B |
9
icons/tab-bottom-corner-right-australis.svg
Normal file
9
icons/tab-bottom-corner-right-australis.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M0 0h1.5m0 0c13.95.03 14.454 10.757 15.45 16.442C18.44 24.942 21.875 29.452 30 30H0V0"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.036, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 528 B |
3
icons/tab-bottom-corner-right-chrome-clipped.svg
Normal file
3
icons/tab-bottom-corner-right-chrome-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M0 0a9 9 0 0 1 7.571 4.135 9 9 0 0 1 .617 1.127 9 9 0 0 1 .72 2.457A9 9 0 0 1 9 9v18a9 9 0 0 1-4.135 7.571 9 9 0 0 1-1.127.617 9 9 0 0 1-2.457.72A9 9 0 0 1 0 36V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 397 B |
9
icons/tab-bottom-corner-right-chrome.svg
Normal file
9
icons/tab-bottom-corner-right-chrome.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="18" height="36" viewBox="0 0 18 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" fill="context-fill" d="M0 0a9 9 0 0 1 9 9v18a9 9 0 0 0 9 9H0V0"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.065, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 479 B |
3
icons/tab-bottom-corner-right-chromeLegacy-clipped.svg
Normal file
3
icons/tab-bottom-corner-right-chromeLegacy-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M0 0h9l9 18-9 18H0V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 255 B |
9
icons/tab-bottom-corner-right-chromeLegacy.svg
Normal file
9
icons/tab-bottom-corner-right-chromeLegacy.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" fill="context-fill" d="M36 36h-9L9 0H0v36z"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.0299, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 460 B |
3
icons/tab-bottom-corner-right-edge-clipped.svg
Normal file
3
icons/tab-bottom-corner-right-edge-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="44.5, 100" d="M0 0h4a4 4 0 0 1 3.365 1.838 4 4 0 0 1 .473 1.035A4 4 0 0 1 8 4v24a4 4 0 0 1-1.838 3.365 4 4 0 0 1-1.035.473A4 4 0 0 1 4 32H0V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 365 B |
9
icons/tab-bottom-corner-right-edge.svg
Normal file
9
icons/tab-bottom-corner-right-edge.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="16" height="32" viewBox="0 0 16 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M4 0a4 4 0 0 1 3.365 1.838A4 4 0 0 1 8 4v24a4 4 0 0 0 1.838 3.365A4 4 0 0 0 12 32H0V0m0 0h4"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.075, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 532 B |
3
icons/tab-bottom-corner-right-wave-clipped.svg
Normal file
3
icons/tab-bottom-corner-right-wave-clipped.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="60, 100" d="M0 0c6 0 12 0 15 6 1.5 3 2.25 7.5 3 12-.188 1.125-.375 2.25-.574 3.352-.1.55-.202 1.096-.309 1.632a60.698 60.698 0 0 1-.336 1.578c-.117.516-.24 1.021-.37 1.51-.131.49-.268.963-.415 1.42a21.2 21.2 0 0 1-.467 1.317 14.336 14.336 0 0 1-.818 1.736 9.98 9.98 0 0 1-1.695 2.236 9.134 9.134 0 0 1-2.498 1.754c-.302.147-.61.278-.926.397-.316.118-.639.224-.967.318-.33.094-.664.177-1 .248-.34.072-.685.133-1.033.186a27.096 27.096 0 0 1-2.139.222c-.363.024-.73.042-1.098.055-.368.013-.739.021-1.11.027C1.5 36 .75 36 0 36V0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 748 B |
9
icons/tab-bottom-corner-right-wave.svg
Normal file
9
icons/tab-bottom-corner-right-wave.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 36,36 C 30,36 23.999,36 20.9995,30.0005 18,24.001 18,12.001 14.9995,6.0005 11.999,0 6,0 0,0 c 0,0 0,36 0,36 0,0 36,0 36,0 z"/>
|
||||
</defs>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.0299, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 569 B |
|
|
@ -116,8 +116,8 @@ menu {
|
|||
|
||||
/* Navbar Border */
|
||||
#navigator-toolbox:-moz-lwtheme {
|
||||
--tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
|
||||
--lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
|
||||
--tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */
|
||||
--lwt-tabs-border-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/*= Findbar Border Color =====================================================*/
|
||||
|
|
|
|||
|
|
@ -15,7 +15,26 @@
|
|||
|
||||
/*= Selected Tab - Bottom Rounded Corner =====================================*/
|
||||
@include Option("userChrome.tab.bottom_rounded_corner") {
|
||||
@import "selected_tab/bottom_rounded_corner";
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.wave") {
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.australis") {
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.chrome") {
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
@import "selected_tab/bottom_rounded_corner";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.wave",
|
||||
"userChrome.tab.bottom_rounded_corner.australis",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
@import "selected_tab/bottom_rounded_corner_others";
|
||||
}
|
||||
}
|
||||
|
||||
/*= Selected Tab - Photon like contextline ===================================*/
|
||||
|
|
|
|||
|
|
@ -1,35 +1,75 @@
|
|||
#tabs-newtab-button {
|
||||
/* Original:
|
||||
@include Option("userChrome.tab.connect_to_window") {
|
||||
/* Size */
|
||||
-moz-box-align: stretch !important;
|
||||
padding-top: var(--tab-block-margin) !important;
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.bottom_rounded_corner") {
|
||||
/* Original:
|
||||
margin: 0 0 var(--tabs-navbar-shadow-size) !important
|
||||
=> Can't override style. Therefore, we should approach it by bypass.
|
||||
*/
|
||||
--tabs-navbar-shadow-size: -1px; /* Original: 1px */
|
||||
--tabs-navbar-original-shadow-size: 0.5px;
|
||||
--tab-corner-rounding: 4px; /* Hardcoded */
|
||||
*/
|
||||
--tabs-navbar-shadow-size: -1px; /* Original: 1px */
|
||||
--uc-tabs-navbar-shadow-size: 0.5px;
|
||||
--uc-tab-corner-rounding: 4px; /* Hardcoded */
|
||||
--uc-newtab-bgcolor: transparent;
|
||||
|
||||
/* Size */
|
||||
-moz-box-align: stretch !important;
|
||||
padding-top: var(--tab-block-margin) !important;
|
||||
/* Corner Rounding Image */
|
||||
--uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1);
|
||||
background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
|
||||
right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
|
||||
background-size: var(--uc-tab-corner-rounding);
|
||||
|
||||
/* Corner Rounding 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);
|
||||
/* Corner Rounding Color */
|
||||
fill: var(--uc-newtab-bgcolor) !important;
|
||||
-moz-context-properties: fill !important;
|
||||
|
||||
/* Corner Rounding Color */
|
||||
fill: transparent !important;
|
||||
-moz-context-properties: fill !important;
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.wave",
|
||||
"userChrome.tab.bottom_rounded_corner.australis",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
--uc-newtab-position: 0px;
|
||||
--uc-newtab-non-corner-bgwidth: 0px;
|
||||
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2);
|
||||
--uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1);
|
||||
|
||||
transform: translateX(var(--uc-tab-corner-half-height-reverse));
|
||||
padding-inline: var(--uc-tab-corner-half-height) !important;
|
||||
overflow-clip-margin: var(--uc-tab-corner-half-height) !important;
|
||||
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
|
||||
center bottom var(--uc-tabs-navbar-shadow-size),
|
||||
right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
|
||||
background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height),
|
||||
var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height),
|
||||
var(--uc-tab-corner-height) var(--uc-tab-corner-height);
|
||||
background-origin: padding-box;
|
||||
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
--uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Corner Rounding Color */
|
||||
#tabs-newtab-button:hover {
|
||||
fill: var(--toolbarbutton-hover-background) !important;
|
||||
--uc-newtab-bgcolor: var(--toolbarbutton-hover-background);
|
||||
}
|
||||
#tabs-newtab-button:hover:active {
|
||||
fill: var(--toolbarbutton-active-background) !important;
|
||||
--uc-newtab-bgcolor: var(--toolbarbutton-active-background);
|
||||
}
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
@include AccentColor {
|
||||
|
|
@ -49,6 +89,29 @@
|
|||
transparent
|
||||
) !important; /* Hardcoded for compatibility */
|
||||
}
|
||||
|
||||
@include Option("userChrome.tab.bottom_rounded_corner") {
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.wave",
|
||||
"userChrome.tab.bottom_rounded_corner.australis",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
|
||||
background-image: var(--uc-tab-corner-left-side-svg),
|
||||
linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)),
|
||||
var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,8 +120,26 @@
|
|||
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
|
||||
|
||||
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;
|
||||
calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--uc-tabs-navbar-shadow-size)) !important;
|
||||
-moz-context-properties: fill, fill-opacity;
|
||||
fill: var(--toolbarbutton-icon-fill);
|
||||
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
|
||||
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.wave",
|
||||
"userChrome.tab.bottom_rounded_corner.australis",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
--tab-border-radius: 0px;
|
||||
width: unset !important;
|
||||
padding-inline: 0px !important;
|
||||
margin-inline: calc(var(--uc-tab-corner-half-height) - #{( 15.5px / 2 )}) !important;
|
||||
|
||||
background-color: transparent !important;
|
||||
// background-size: calc((var(--toolbarbutton-inner-padding) * 2 + 16px) - var(--uc-tab-corner-size)) 100%;
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
#tabbrowser-tabs {
|
||||
--tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
|
||||
--tab-corner-padding: 0px;
|
||||
--tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
|
||||
--uc-tab-corner-padding: 0px;
|
||||
--uc-tab-corner-position: calc(var(--uc-tab-corner-padding) - var(--uc-tab-corner-rounding));
|
||||
|
||||
--uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg");
|
||||
--uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg");
|
||||
}
|
||||
|
||||
:root:not([customizing="true"]) {
|
||||
|
|
@ -16,7 +19,7 @@
|
|||
bottom: 0;
|
||||
|
||||
/* Shape */
|
||||
width: var(--tab-corner-rounding);
|
||||
width: var(--uc-tab-corner-rounding);
|
||||
height: 100%;
|
||||
|
||||
/* Color */
|
||||
|
|
@ -25,7 +28,7 @@
|
|||
-moz-context-properties: fill, stroke;
|
||||
|
||||
/* Image */
|
||||
background-size: var(--tab-corner-rounding);
|
||||
background-size: var(--uc-tab-corner-rounding);
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
|
||||
|
|
@ -45,12 +48,12 @@
|
|||
}
|
||||
|
||||
&::before {
|
||||
left: var(--tab-corner-position);
|
||||
background-image: url("../icons/tab-bottom-corner-left.svg");
|
||||
left: var(--uc-tab-corner-position);
|
||||
background-image: var(--uc-tab-corner-left-side-svg);
|
||||
}
|
||||
&::after {
|
||||
right: var(--tab-corner-position);
|
||||
background-image: url("../icons/tab-bottom-corner-right.svg");
|
||||
right: var(--uc-tab-corner-position);
|
||||
background-image: var(--uc-tab-corner-right-side-svg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
250
src/tab/selected_tab/_bottom_rounded_corner_others.scss
Normal file
250
src/tab/selected_tab/_bottom_rounded_corner_others.scss
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
//-- Mixin ---------------------------------------------------------------------
|
||||
@function _clipPathURL($svg) {
|
||||
@return url($svg + "#svgClipPath");
|
||||
}
|
||||
@mixin _clipPath($svg, $position) {
|
||||
$result: _clipPathURL($svg);
|
||||
|
||||
@if $position == "left" {
|
||||
--uc-tab-corner-left-side-svg: #{ url($svg) };
|
||||
--uc-tab-corner-left-side-clipPath: #{ $result };
|
||||
}
|
||||
@else if $position == "right" {
|
||||
--uc-tab-corner-right-side-svg: #{ url($svg) };
|
||||
--uc-tab-corner-right-side-clipPath: #{ $result };
|
||||
}
|
||||
}
|
||||
@mixin _tabCornerSVG($left, $right) {
|
||||
@include _clipPath($left, "left" );
|
||||
@include _clipPath($right, "right");
|
||||
}
|
||||
|
||||
@mixin _bottomRoundedCornerOtherPadding() {
|
||||
padding-inline: 0 !important;
|
||||
overflow-clip-margin: var(--uc-tab-corner-half-size) !important;
|
||||
|
||||
.tab-background {
|
||||
--tab-border-radius: 0px;
|
||||
margin-inline: var(--uc-tab-corner-half-size) !important;
|
||||
position: relative;
|
||||
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
#TabsToolbar {
|
||||
--uc-tab-corner-height: calc(var(--tab-min-height) + 1px);
|
||||
--uc-tab-corner-size: var(--uc-tab-corner-height);
|
||||
--uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2);
|
||||
--uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1);
|
||||
|
||||
--uc-tab-corner-bgimage: none;
|
||||
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.wave") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-wave.svg",
|
||||
"../icons/tab-bottom-corner-right-wave.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg");
|
||||
}
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.australis") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-australis.svg",
|
||||
"../icons/tab-bottom-corner-right-australis.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg");
|
||||
}
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.chrome") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-chrome.svg",
|
||||
"../icons/tab-bottom-corner-right-chrome.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg");
|
||||
|
||||
--uc-tab-corner-size: 16px; // 18px;
|
||||
}
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-chromeLegacy.svg",
|
||||
"../icons/tab-bottom-corner-right-chromeLegacy.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg");
|
||||
}
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.edge") {
|
||||
@include _tabCornerSVG(
|
||||
"../icons/tab-bottom-corner-left-edge.svg",
|
||||
"../icons/tab-bottom-corner-right-edge.svg"
|
||||
);
|
||||
--uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg");
|
||||
--uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg");
|
||||
|
||||
--uc-tab-corner-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.all") {
|
||||
@include _bottomRoundedCornerOtherPadding;
|
||||
}
|
||||
@include NotOption("userChrome.tab.bottom_rounded_corner.all") {
|
||||
&[visuallyselected] {
|
||||
@include _bottomRoundedCornerOtherPadding {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
/* Box */
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
|
||||
/* Shape */
|
||||
width: var(--uc-tab-corner-size);
|
||||
height: var(--uc-tab-corner-height);
|
||||
|
||||
/* Color */
|
||||
fill: transparent;
|
||||
stroke: transparent;
|
||||
-moz-context-properties: fill, stroke, stroke-opacity;
|
||||
// For stroke
|
||||
// box-shadow: 0 0 4px rgba(0,0,0,.4);
|
||||
// box-shadow: 0 0 1px var(--toolbar-color) !important;
|
||||
// box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important
|
||||
|
||||
/* Image */
|
||||
// background-size: var(--tab-corner-rounding);
|
||||
background-size: cover, auto auto;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-position: bottom, right top;
|
||||
background-attachment: scroll, fixed;
|
||||
|
||||
@include Option("userChrome.tab.bottom_rounded_corner.all") {
|
||||
content: "";
|
||||
}
|
||||
@include NotOption("userChrome.tab.color_like_toolbar") {
|
||||
/* Based on tab background
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none);
|
||||
|
||||
defaults
|
||||
background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
|
||||
*/
|
||||
fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
right: 100%;
|
||||
background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage);
|
||||
clip-path: var(--uc-tab-corner-left-side-clipPath);
|
||||
}
|
||||
&::after {
|
||||
left: 100%;
|
||||
background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage);
|
||||
clip-path: var(--uc-tab-corner-right-side-clipPath);
|
||||
}
|
||||
}
|
||||
|
||||
&[beforeselected-visible] .tab-background::after {
|
||||
--uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped);
|
||||
}
|
||||
&[visuallyselected] + .tabbrowser-tab .tab-background::before {
|
||||
--uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped);
|
||||
}
|
||||
// &[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
|
||||
// background-image: var(--uc-tab-corner-left-side-svg), var(--lwt-header-image, none) !important;
|
||||
// }
|
||||
|
||||
&:is([visuallyselected], [multiselected]) .tab-background {
|
||||
--uc-tab-corner-bgimage: var(--lwt-header-image, none);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
|
||||
|
||||
@include Option("userChrome.tab.box_shadow") {
|
||||
stroke: var(--uc-tab-shadow-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover:not([visuallyselected], [multiselected]) .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
fill: color-mix(in srgb, currentColor 11%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include Option("userChrome.tab.multi_selected") {
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background {
|
||||
&::before,
|
||||
&::after {
|
||||
fill: var(--uc-multiselected-tab-bgcolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
#tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme {
|
||||
--uc-tab-corner-bgimage: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
&:is(
|
||||
[lwtheme-mozlightdark],
|
||||
[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"],
|
||||
[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]
|
||||
) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
|
||||
@include Option("userChrome.tab.box_shadow") {
|
||||
&::before,
|
||||
&::after {
|
||||
stroke-opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include OS($linux) {
|
||||
/* Fill color for GTK */
|
||||
&:not([lwtheme="true"]) .tabbrowser-tab {
|
||||
@include Option("userChrome.tab.box_shadow") {
|
||||
--uc-tab-shadow-color: rgba(0,0,0, 0.4);
|
||||
}
|
||||
&[visuallyselected] .tab-background {
|
||||
background-clip: content-box;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
/* As GTK Toolbar's background-color + background-image
|
||||
* --toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
* --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
|
||||
*/
|
||||
--uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor));
|
||||
fill: rgba(255, 255, 255, .075);
|
||||
@include NotOption("userChrome.tab.color_like_toolbar") {
|
||||
fill: rgba(255, 255, 255, .15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs {
|
||||
&[positionpinnedtabs],
|
||||
&:not([overflow]) .tabbrowser-tab[first-visible-tab],
|
||||
&[overflow] .tabbrowser-tab[first-visible-unpinned-tab] {
|
||||
margin-left: var(--uc-tab-corner-half-size) !important;
|
||||
}
|
||||
}
|
||||
.tabbrowser-tab[last-visible-tab] {
|
||||
margin-right: vart(--uc-tab-corner-half-size) !important;
|
||||
}
|
||||
|
|
@ -1,36 +1,58 @@
|
|||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[visuallyselected="true"]:not(:focus)
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
#TabsToolbar {
|
||||
--uc-tab-background-shadow-soft: 0 0 1px;
|
||||
--uc-tab-background-shadow-hard: 0 0 0 1px;
|
||||
--uc-tab-shadow-color: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))));
|
||||
--uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9)));
|
||||
--uc-tab-basic-shadow: 0 0 4px rgba(0,0,0, 0.4);
|
||||
--uc-tab-additional-shadow: 0 0 4px rgba(128, 128, 142, 0.5);
|
||||
|
||||
@include Option("userChrome.tab.bottom_rounded_corner") {
|
||||
@include Option(
|
||||
"userChrome.tab.bottom_rounded_corner.wave",
|
||||
"userChrome.tab.bottom_rounded_corner.australis",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome_legacy",
|
||||
"userChrome.tab.bottom_rounded_corner.chrome",
|
||||
"userChrome.tab.bottom_rounded_corner.edge"
|
||||
) {
|
||||
// --uc-tab-background-shadow-soft: 0 -1px 1px -1px;
|
||||
--uc-tab-background-shadow-hard: 0 -1px 0;
|
||||
--uc-tab-basic-shadow: 0 -1px 0px rgba(0,0,0, 0.4);
|
||||
--uc-tab-additional-shadow: 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
|
||||
box-shadow: var(--uc-tab-basic-shadow) !important;
|
||||
}
|
||||
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab {
|
||||
&:is([selected], [multiselected]) {
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
|
||||
Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
|
||||
box-shadow: 0 0 1px var(--toolbar-color) !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab[multiselected]:not([visuallyselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important;
|
||||
/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */
|
||||
&[visuallyselected="true"]:not(:focus),
|
||||
&[multiselected]:not([visuallyselected]) {
|
||||
--uc-tab-shadow-color: var(--toolbar-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */
|
||||
#TabsToolbar:not([brighttext])
|
||||
:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"])
|
||||
#TabsToolbar:not([brighttext])
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
.tabbrowser-tab:is([visuallyselected], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background {
|
||||
box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))),
|
||||
0 0 4px rgba(128, 128, 142, 0.5) !important;
|
||||
}
|
||||
|
||||
#TabsToolbar[brighttext]
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important;
|
||||
--uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle);
|
||||
box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color),
|
||||
var(--uc-tab-additional-shadow) !important;
|
||||
}
|
||||
|
||||
/* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border
|
||||
|
|
@ -41,9 +63,8 @@
|
|||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))),
|
||||
0 0 4px rgba(128, 128, 142, 0.5) !important;
|
||||
box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color),
|
||||
var(--uc-tab-additional-shadow) !important;
|
||||
}
|
||||
|
||||
:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
|
|
@ -52,6 +73,5 @@
|
|||
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
|
||||
> .tab-stack
|
||||
> .tab-background:-moz-lwtheme {
|
||||
box-shadow: 0 0 0 1px
|
||||
var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important;
|
||||
box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,37 @@
|
|||
#tabbrowser-tabs:not([movingtab])
|
||||
#TabsToolbar {
|
||||
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent));
|
||||
|
||||
&[brighttext] {
|
||||
--uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent));
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[multiselected]:not([selected]):-moz-lwtheme {
|
||||
background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
> .tab-background[multiselected]:not([selected]) {
|
||||
/* Original:
|
||||
background-attachment: scroll, scroll, fixed;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
|
||||
var(--lwt-header-image, none);
|
||||
background-position: 0 0, 0 0, right top;
|
||||
background-repeat: repeat-x, repeat-x, no-repeat;
|
||||
background-size: auto 100%, auto 100%, auto auto;
|
||||
*/
|
||||
// background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
|
||||
// linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
|
||||
.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) {
|
||||
background: color-mix(in srgb, currentColor 65%, transparent);
|
||||
opacity: 0.3;
|
||||
background-attachment: scroll, fixed !important;
|
||||
background-color: transparent !important;
|
||||
background-image: linear-gradient(var(--uc-multiselected-tab-bgcolor), var(--uc-multiselected-tab-bgcolor)),
|
||||
var(--lwt-header-image, none) !important;
|
||||
background-position: 0 0, right top !important;
|
||||
background-repeat: repeat-x, no-repeat !important;
|
||||
background-size: auto 100%, auto auto !important;
|
||||
}
|
||||
#TabsToolbar[brighttext]
|
||||
.tab-background[multiselected="true"]:not([selected="true"])
|
||||
> .tab-loading-burst:not([bursting]) {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
|
||||
@include Option("userChrome.tab.connect_to_window") {
|
||||
.tab-background[multiselected=true] {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue