From cc555468f3baf5b26612f2733b464e4f7f262756 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 2 Oct 2023 04:27:31 +0900 Subject: [PATCH] Fix: Tab - `selected` attribute compatibility #787 `.tabbrowser *[selected="true"]` to `.tabbrowser *[selected]` --- css/leptonChrome.css | 38 ++++++++-------- css/leptonChromeESR.css | 45 +++++++++---------- src/tab/_container_tab.scss | 20 ++++----- .../_show_close_button_at_hover.scss | 2 +- src/tab/selected_tab/_color_like_toolbar.scss | 2 +- src/tab/selected_tab/_multi_selected.scss | 2 +- src/theme/system_default_theme/_mac.scss | 4 +- src/theme/system_default_theme/_win7.scss | 4 +- .../_general_element_background.scss | 4 +- 9 files changed, 57 insertions(+), 64 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index a31ea8d2..ff84018a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -984,13 +984,13 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"], + > .tab-background[selected], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"] { + > .tab-background[selected] { background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; } } @@ -2185,11 +2185,11 @@ #TabsToolbar { --toolbarseparator-color: transparent; } - #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { + #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background:not([selected], [multiselected]) { background-color: var(--uc-frame-element-background); } #TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon, - #TabsToolbar .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { + #TabsToolbar .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) { background-color: var( --toolbarbutton-hover-background ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */ @@ -6667,7 +6667,7 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"]:-moz-lwtheme { + > .tab-background[selected]:-moz-lwtheme { /* Original: 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-image: linear-gradient(transparent, transparent), @@ -6679,7 +6679,7 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"]:-moz-lwtheme { + > .tab-background[selected]:-moz-lwtheme { background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important; background-repeat: repeat-x, repeat-x, var(--lwt-background-tiling) !important; @@ -6729,7 +6729,7 @@ outline: 1px solid color-mix(in srgb, var(--focus-outline-color, currentColor) 40%, transparent); outline-offset: -1px; } - .tab-background[multiselected="true"][selected="true"] { + .tab-background[multiselected="true"][selected] { outline-width: 2px; outline-offset: -2px; } @@ -7758,7 +7758,7 @@ > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content - > .tab-close-button:not([selected="true"]) { + > .tab-close-button:not([selected]) { display: inline-flex !important; display: -moz-inline-box !important; } @@ -8249,10 +8249,8 @@ opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ - .tabbrowser-tab:is([image], [pinned])[usercontextid] - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -8263,34 +8261,34 @@ background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; background-position-x: var(--uc-titlechanged-container-position-x) !important; } - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } /* Pinned Tab - Titlechanged & soundplaying */ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[attention]:not([selected="true"]), + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { + > .tab-content[pinned][titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[attention]:not([selected="true"]), + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { + > .tab-content[pinned][titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @supports -moz-bool-pref("userChrome.tab.container.on_top") { - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index 47308a2b..89c6c3a8 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -485,17 +485,14 @@ --background-color: rgb(229, 229, 235); --toolbarseparator-color: transparent; } - #TabsToolbar:not(:-moz-lwtheme) - .tabbrowser-tab - > .tab-stack - > .tab-background:not([selected="true"], [multiselected]) { + #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab > .tab-stack > .tab-background:not([selected], [multiselected]) { color: var(--background-color); background-color: color-mix(in srgb, currentColor 60%, transparent); } #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:hover > .tab-stack - > .tab-background:not([selected="true"], [multiselected]) { + > .tab-background:not([selected], [multiselected]) { background-color: color-mix( in srgb, currentColor 85%, @@ -1206,13 +1203,13 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"], + > .tab-background[selected], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"] { + > .tab-background[selected] { background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; } } @@ -2457,11 +2454,11 @@ #TabsToolbar { --toolbarseparator-color: transparent; } - #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { + #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background:not([selected], [multiselected]) { background-color: var(--uc-frame-element-background); } #TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon, - #TabsToolbar .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { + #TabsToolbar .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) { background-color: var( --toolbarbutton-hover-background ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */ @@ -7079,7 +7076,7 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"]:-moz-lwtheme { + > .tab-background[selected]:-moz-lwtheme { /* Original: 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-image: linear-gradient(transparent, transparent), @@ -7091,7 +7088,7 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"]:-moz-lwtheme { + > .tab-background[selected]:-moz-lwtheme { background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images, none) !important; background-repeat: repeat-x, repeat-x, var(--lwt-background-tiling) !important; @@ -7141,7 +7138,7 @@ outline: 1px solid color-mix(in srgb, var(--focus-outline-color, currentColor) 40%, transparent); outline-offset: -1px; } - .tab-background[multiselected="true"][selected="true"] { + .tab-background[multiselected="true"][selected] { outline-width: 2px; outline-offset: -2px; } @@ -8170,7 +8167,7 @@ > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content - > .tab-close-button:not([selected="true"]) { + > .tab-close-button:not([selected]) { display: inline-flex !important; display: -moz-inline-box !important; } @@ -8661,10 +8658,8 @@ opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ - .tabbrowser-tab:is([image], [pinned])[usercontextid] - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -8675,34 +8670,34 @@ background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; background-position-x: var(--uc-titlechanged-container-position-x) !important; } - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } /* Pinned Tab - Titlechanged & soundplaying */ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[attention]:not([selected="true"]), + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { + > .tab-content[pinned][titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[attention]:not([selected="true"]), + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { + > .tab-content[pinned][titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @supports -moz-bool-pref("userChrome.tab.container.on_top") { - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } diff --git a/src/tab/_container_tab.scss b/src/tab/_container_tab.scss index 139ccae6..7444a50b 100644 --- a/src/tab/_container_tab.scss +++ b/src/tab/_container_tab.scss @@ -76,8 +76,8 @@ } /* Pinned Tab - Titlechanged Indicator override */ - .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -89,8 +89,8 @@ background-position-x: var(--uc-titlechanged-container-position-x) !important; } - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } @@ -98,27 +98,27 @@ /* Pinned Tab - Titlechanged & soundplaying */ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[attention]:not([selected="true"]), + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { + > .tab-content[pinned][titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[attention]:not([selected="true"]), + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { + > .tab-content[pinned][titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @include Option("userChrome.tab.container.on_top") { - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } diff --git a/src/tab/clipped_tab/_show_close_button_at_hover.scss b/src/tab/clipped_tab/_show_close_button_at_hover.scss index 8b3e8fe2..8629f5ea 100644 --- a/src/tab/clipped_tab/_show_close_button_at_hover.scss +++ b/src/tab/clipped_tab/_show_close_button_at_hover.scss @@ -23,7 +23,7 @@ > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content - > .tab-close-button:not([selected="true"]) { + > .tab-close-button:not([selected]) { @include InlineBox(true); } diff --git a/src/tab/selected_tab/_color_like_toolbar.scss b/src/tab/selected_tab/_color_like_toolbar.scss index e88032a5..48b673ec 100644 --- a/src/tab/selected_tab/_color_like_toolbar.scss +++ b/src/tab/selected_tab/_color_like_toolbar.scss @@ -7,7 +7,7 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"]:-moz-lwtheme { + > .tab-background[selected]:-moz-lwtheme { /* Original: 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-image: linear-gradient(transparent, transparent), diff --git a/src/tab/selected_tab/_multi_selected.scss b/src/tab/selected_tab/_multi_selected.scss index 225d5c34..a5605d7c 100644 --- a/src/tab/selected_tab/_multi_selected.scss +++ b/src/tab/selected_tab/_multi_selected.scss @@ -45,7 +45,7 @@ outline-offset: -1px; } - .tab-background[multiselected=true][selected=true] { + .tab-background[multiselected=true][selected] { outline-width: 2px; outline-offset: -2px; } diff --git a/src/theme/system_default_theme/_mac.scss b/src/theme/system_default_theme/_mac.scss index b3a29003..c94e52c2 100644 --- a/src/theme/system_default_theme/_mac.scss +++ b/src/theme/system_default_theme/_mac.scss @@ -237,13 +237,13 @@ > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"], + > .tab-background[selected], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[selected="true"] { + > .tab-background[selected] { background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; } } diff --git a/src/theme/system_default_theme/_win7.scss b/src/theme/system_default_theme/_win7.scss index b2f4cf33..42877873 100644 --- a/src/theme/system_default_theme/_win7.scss +++ b/src/theme/system_default_theme/_win7.scss @@ -7,14 +7,14 @@ #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab > .tab-stack - > .tab-background:not([selected="true"], [multiselected]) { + > .tab-background:not([selected], [multiselected]) { color: var(--background-color); background-color: color-mix(in srgb, currentColor 60%, transparent); } #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:hover > .tab-stack - > .tab-background:not([selected="true"], [multiselected]) { + > .tab-background:not([selected], [multiselected]) { background-color: color-mix( in srgb, currentColor 85%, diff --git a/src/theme/transparent/_general_element_background.scss b/src/theme/transparent/_general_element_background.scss index fc375cbb..7be0ec19 100644 --- a/src/theme/transparent/_general_element_background.scss +++ b/src/theme/transparent/_general_element_background.scss @@ -50,14 +50,14 @@ .tabbrowser-tab > .tab-stack - > .tab-background:not([selected="true"], [multiselected]) { + > .tab-background:not([selected], [multiselected]) { background-color: var(--uc-frame-element-background); } #firefox-view-button:hover:not([open]) > .toolbarbutton-icon, .tabbrowser-tab:hover > .tab-stack - > .tab-background:not([selected="true"], [multiselected]) { + > .tab-background:not([selected], [multiselected]) { background-color: var(--toolbarbutton-hover-background) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */ } }