From a7cc5b85ccd3554689b25f24d113bb32956ae474 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 2 Oct 2023 00:43:07 +0900 Subject: [PATCH] Fix: Tab - `visuallyselected` attribute compatibility #787 `.tabbrowser-tab[visuallyselected="true"]` to `.tabbrowser-tab[visuallyselected]` --- css/leptonChrome.css | 28 +++++++++---------- css/leptonChromeESR.css | 28 +++++++++---------- src/compatibility/_os.scss | 4 +-- src/compatibility/_theme.scss | 2 +- src/tab/clipped_tab/_letters_cleary.scss | 6 ++-- src/tab/newtab_button/_looks_like_tab.scss | 2 +- src/tab/selected_tab/_box_shadow.scss | 6 ++-- .../_photon_like_contextline.scss | 4 +-- 8 files changed, 40 insertions(+), 40 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index a9f4c88a..a31ea8d2 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -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 */ } diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index f1e0eed8..47308a2b 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -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 */ } diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index 1acca2be..6557c556 100644 --- a/src/compatibility/_os.scss +++ b/src/compatibility/_os.scss @@ -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); } diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss index 418fad8d..d9173b04 100644 --- a/src/compatibility/_theme.scss +++ b/src/compatibility/_theme.scss @@ -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; diff --git a/src/tab/clipped_tab/_letters_cleary.scss b/src/tab/clipped_tab/_letters_cleary.scss index 8b9f8997..2151dedd 100644 --- a/src/tab/clipped_tab/_letters_cleary.scss +++ b/src/tab/clipped_tab/_letters_cleary.scss @@ -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 */ } diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss index ef6e1038..c1fbc918 100644 --- a/src/tab/newtab_button/_looks_like_tab.scss +++ b/src/tab/newtab_button/_looks_like_tab.scss @@ -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; } } diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 02d5a2c0..a6a66521 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -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; diff --git a/src/tab/selected_tab/_photon_like_contextline.scss b/src/tab/selected_tab/_photon_like_contextline.scss index c98878d2..0b5d4531 100644 --- a/src/tab/selected_tab/_photon_like_contextline.scss +++ b/src/tab/selected_tab/_photon_like_contextline.scss @@ -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) */