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

Fix: Tab - visuallyselected attribute compatibility #787

Browse source 
`.tabbrowser-tab[visuallyselected="true"]` to `.tabbrowser-tab[visuallyselected]`
This commit is contained in:
alstjr7375 2023-10-02 00:43:07 +09:00
parent 43fd8de4e0
commit a7cc5b85cc
8 changed files with 40 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

28
css/leptonChrome.css generated
View file

@ -79,12 +79,12 @@
/* TARGET: original, photon */
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme,
#TabsToolbar:not([brighttext])
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background {
/* Nightly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
@ -214,20 +214,20 @@
/*= Linux - Light System Default Theme's Selected Tab ========================*/
@media (-moz-gtk-csd-available) and (prefers-color-scheme: light) {
/* Because of
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background {
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9));
box-shadow: 0 0 4px rgba(128,128,142,0.5);
}
*/
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:not(:-moz-lwtheme) {
box-shadow: 0 0 4px rgba(128, 128, 142, 0.5) !important;
}
#TabsToolbar:not([brighttext])
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:not(:-moz-lwtheme) {
box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), 0 0 4px rgba(128, 128, 142, 0.5) !important;
@ -6765,7 +6765,7 @@
)
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab[visuallyselected="true"]:not(:focus),
.tabbrowser-tab[visuallyselected]:not(:focus),
:root:is(
[lwtheme-mozlightdark],
[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]
@ -6783,7 +6783,7 @@
)
#TabsToolbar:not([brighttext])
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
--uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle);
@ -6796,7 +6796,7 @@
)
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
filter: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, transparent))
@ -7218,7 +7218,7 @@
/* Remove side's background color border */
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
--tabs-border-color: rgba(0, 0, 0, 0.3) !important;
@ -7226,7 +7226,7 @@
}
#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(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
@ -7690,7 +7690,7 @@
}
/* Fix tab overlap #678 */
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
tab:where([visuallyselected="true"]) {
tab:where([visuallyselected]) {
z-index: 1;
}
}
@ -7739,14 +7739,14 @@
--tab-label-mask-size: 30%;
}
#tabbrowser-tabs[closebuttons="activetab"]
.tabbrowser-tab:is([visuallyselected="true"], [multiselected="true"])
.tabbrowser-tab:is([visuallyselected], [multiselected="true"])
.tab-label-container {
--tab-label-mask-size: 25%;
}
.tabbrowser-tab[visuallyselected="true"]:not([labelendaligned]):hover .tab-label-container,
.tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container,
#tabbrowser-tabs:not([closebuttons="activetab"])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab:not([visuallyselected="true"], [labelendaligned]):hover
> .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover
.tab-label-container {
--tab-label-mask-size: 0.9em; /* Original: 1em */
}

28
css/leptonChromeESR.css generated
View file

@ -79,12 +79,12 @@
/* TARGET: original, photon */
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme,
#TabsToolbar:not([brighttext])
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background {
/* Nightly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
@ -344,20 +344,20 @@
@media (-moz-gtk-csd-available) and (-moz-toolbar-prefers-color-scheme: light),
(-moz-gtk-csd-available) and (prefers-color-scheme: light) {
/* Because of
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background {
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9));
box-shadow: 0 0 4px rgba(128,128,142,0.5);
}
*/
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:not(:-moz-lwtheme) {
box-shadow: 0 0 4px rgba(128, 128, 142, 0.5) !important;
}
#TabsToolbar:not([brighttext])
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:not(:-moz-lwtheme) {
box-shadow: 0 0 1px var(--tab-line-color, rgba(128, 128, 142, 0.9)), 0 0 4px rgba(128, 128, 142, 0.5) !important;
@ -7177,7 +7177,7 @@
)
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab[visuallyselected="true"]:not(:focus),
.tabbrowser-tab[visuallyselected]:not(:focus),
:root:is(
[lwtheme-mozlightdark],
[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]
@ -7195,7 +7195,7 @@
)
#TabsToolbar:not([brighttext])
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
--uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle);
@ -7208,7 +7208,7 @@
)
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
filter: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, transparent))
@ -7630,7 +7630,7 @@
/* Remove side's background color border */
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
--tabs-border-color: rgba(0, 0, 0, 0.3) !important;
@ -7638,7 +7638,7 @@
}
#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(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
@ -8102,7 +8102,7 @@
}
/* Fix tab overlap #678 */
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") {
tab:where([visuallyselected="true"]) {
tab:where([visuallyselected]) {
z-index: 1;
}
}
@ -8151,14 +8151,14 @@
--tab-label-mask-size: 30%;
}
#tabbrowser-tabs[closebuttons="activetab"]
.tabbrowser-tab:is([visuallyselected="true"], [multiselected="true"])
.tabbrowser-tab:is([visuallyselected], [multiselected="true"])
.tab-label-container {
--tab-label-mask-size: 25%;
}
.tabbrowser-tab[visuallyselected="true"]:not([labelendaligned]):hover .tab-label-container,
.tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container,
#tabbrowser-tabs:not([closebuttons="activetab"])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab:not([visuallyselected="true"], [labelendaligned]):hover
> .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover
.tab-label-container {
--tab-label-mask-size: 0.9em; /* Original: 1em */
}

4
src/compatibility/_os.scss
View file

@ -192,7 +192,7 @@
$_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
@mixin _os_linuxDefaultThemeSelectedTab {
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:not(:-moz-lwtheme) {
@content;
@ -204,7 +204,7 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
@include OS($linux) {
@include Light {
/* Because of
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background {
#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background {
border: 1px solid var(--tab-line-color, rgba(128,128,142,0.9));
box-shadow: 0 0 4px rgba(128,128,142,0.5);
}

2
src/compatibility/_theme.scss
View file

@ -64,7 +64,7 @@ menu {
@each $prefix, $postfix in $options {
#TabsToolbar#{$prefix}
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background#{$postfix} {
@extend %noneBorder;

6
src/tab/clipped_tab/_letters_cleary.scss
View file

@ -24,12 +24,12 @@
.tab-label-container {
--tab-label-mask-size: 30%;
}
&:is([visuallyselected="true"], [multiselected="true"]) .tab-label-container {
&:is([visuallyselected], [multiselected="true"]) .tab-label-container {
--tab-label-mask-size: 25%;
}
}
.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover .tab-label-container,
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover .tab-label-container {
.tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container,
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected],[labelendaligned]):hover .tab-label-container {
--tab-label-mask-size: 0.9em; /* Original: 1em */
}

2
src/tab/newtab_button/_looks_like_tab.scss
View file

@ -146,7 +146,7 @@
/* Fix tab overlap #678 */
@include Option("userChrome.tab.bottom_rounded_corner") {
tab:where([visuallyselected="true"]) {
tab:where([visuallyselected]) {
z-index: 1;
}
}

6
src/tab/selected_tab/_box_shadow.scss
View file

@ -26,7 +26,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
}
}
&[visuallyselected="true"]:not(:focus),
&[visuallyselected]:not(:focus),
&[multiselected]:not([visuallyselected]) {
// 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) */
@ -40,7 +40,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
:root:not([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:-moz-lwtheme {
--uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle);
@ -51,7 +51,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
:root:not([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([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
filter: $ucTabBackgroundShadowHard;

4
src/tab/selected_tab/_photon_like_contextline.scss
View file

@ -50,7 +50,7 @@
/* Remove side's background color border */
#TabsToolbar[brighttext]
#tabbrowser-tabs:not([noshadowfortests])
.tabbrowser-tab:is([visuallyselected="true"], [multiselected])
.tabbrowser-tab:is([visuallyselected], [multiselected])
> .tab-stack
> .tab-background:-moz-lwtheme {
--tabs-border-color: rgba(0, 0, 0, 0.3) !important;
@ -58,7 +58,7 @@
}
#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(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */