From bd53d1966574e09df8e81a07fe247d56e74408b5 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Thu, 26 Aug 2021 10:01:45 +0300 Subject: [PATCH] replace --lwt-toolbar-field-x variables with new versions Firefox 91 still uses some old variants, so this style adds temporary dummy variables to several styles to make <91 work. --- chrome/buttonlike_toolbarbuttons.css | 12 ++++++++++-- chrome/color_variable_template.css | 12 +++++++++--- chrome/fake_statusbar_w_bookmarksbar.css | 4 ++-- chrome/fake_statusbar_w_menubar.css | 2 +- chrome/fake_urlbar_dropmarker.css | 2 +- chrome/minimal_text_fields.css | 4 ++-- chrome/navigation_buttons_inside_urlbar.css | 2 +- chrome/selected_tab_as_urlbar.css | 6 +++--- chrome/status_inside_urlbar.css | 14 ++++++++++++-- chrome/status_inside_urlbar_v2.css | 14 ++++++++++++-- chrome/urlbar_popup_full_width.css | 17 +++++++++++++---- 11 files changed, 66 insertions(+), 23 deletions(-) diff --git a/chrome/buttonlike_toolbarbuttons.css b/chrome/buttonlike_toolbarbuttons.css index 0ffbf7b..eba530a 100644 --- a/chrome/buttonlike_toolbarbuttons.css +++ b/chrome/buttonlike_toolbarbuttons.css @@ -3,6 +3,14 @@ See the above repository for updates as well as full license text. */ /* This style makes buttons look like real buttons with border and background. Color of border and background use the same colors as unselected urlbar to make them fit together. Changes are not applied to buttons in tabs toolbar or menubar. */ +/* Temporary dummy variables, can probably be removed when Fx92 releases */ +:root{ + --toolbar-field-background-color: var(--toolbar-field-non-lwt-bgcolor); +} +:root:-moz-lwtheme{ + --toolbar-field-background-color: var(--lwt-toolbar-field-background-color); +} + :root{ --uc-toolbarbutton-vertical-padding: calc(var(--toolbarbutton-inner-padding) + 1px); --uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 10px); @@ -21,7 +29,7 @@ See the above repository for updates as well as full license text. */ #navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon, #navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon, #navigator-toolbox > toolbar .chromeclass-toolbar-additional > stack{ - background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)); + background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8)); width: calc(2* var(--uc-toolbarbutton-horizontal-padding) + 16px) !important; height: calc(2* var(--uc-toolbarbutton-vertical-padding) + 16px) !important; fill-opacity: 0.8; @@ -64,7 +72,7 @@ See the above repository for updates as well as full license text. */ #PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-icon, #PersonalToolbar .chromeclass-toolbar-additional > stack, #back-button > .toolbarbutton-icon{ - background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)) !important; + background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8)) !important; } #PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-icon, #PersonalToolbar .chromeclass-toolbar-additional:not([disabled]):hover > .toolbarbutton-icon, diff --git a/chrome/color_variable_template.css b/chrome/color_variable_template.css index dd18230..b1352c5 100644 --- a/chrome/color_variable_template.css +++ b/chrome/color_variable_template.css @@ -18,13 +18,19 @@ See the above repository for updates as well as full license text. */ --lwt-toolbarbutton-hover-background: orange !important; --lwt-toolbarbutton-active-background: red !important; /* urlbar */ - --lwt-toolbar-field-background-color: olive !important; - --lwt-toolbar-field-focus: grey !important; --toolbar-field-border-color: green !important; --toolbar-field-focus-border-color: pink !important; + --urlbar-popup-url-color: cyan !important; + /* urlbar Firefox < 92 */ + --lwt-toolbar-field-background-color: olive !important; + --lwt-toolbar-field-focus: grey !important; --lwt-toolbar-field-color: red !important; --lwt-toolbar-field-focus-color: white !important; - --urlbar-popup-url-color: cyan !important; + /* urlbar Firefox 92+ */ + --toolbar-field-background-color: olive !important; + --toolbar-field-focus-background-color: grey !important; + --toolbar-field-color: red !important; + --toolbar-field-focus-color: white !important; /* sidebar - note the sidebar-box rule for the header-area */ --lwt-sidebar-background-color: purple !important; --lwt-sidebar-text-color: yellow !important; diff --git a/chrome/fake_statusbar_w_bookmarksbar.css b/chrome/fake_statusbar_w_bookmarksbar.css index fea67c1..17aa04d 100644 --- a/chrome/fake_statusbar_w_bookmarksbar.css +++ b/chrome/fake_statusbar_w_bookmarksbar.css @@ -69,7 +69,7 @@ See the above repository for updates as well as full license text. */ #statuspanel{ color: lightpink; z-index: -1; visibility: visible !important; opacity: 1 !important; } #statuspanel[inactive] > #statuspanel-inner > #statuspanel-label{ visibility: hidden } -#statuspanel[inactive] > #statuspanel-inner::before{ content: "Done"; color: var(--lwt-toolbar-field-color, black) !important } +#statuspanel[inactive] > #statuspanel-inner::before{ content: "Done"; color: var(--toolbar-field-color, black) !important } #statuspanel[type="status"] { color: skyblue } -#statuspanel-inner > #statuspanel-label[value^="https"]{ color: var(--lwt-toolbar-field-color, black) !important; } +#statuspanel-inner > #statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; } diff --git a/chrome/fake_statusbar_w_menubar.css b/chrome/fake_statusbar_w_menubar.css index 570bbcf..9a4e833 100644 --- a/chrome/fake_statusbar_w_menubar.css +++ b/chrome/fake_statusbar_w_menubar.css @@ -86,7 +86,7 @@ See the above repository for updates as well as full license text. */ #statuspanel[type="status"] { color: skyblue } #statuspanel-inner{ margin-left: -3px; margin-top: 1px} - #statuspanel-inner > #statuspanel-label[value^="https"]{ color: var(--lwt-toolbar-field-color, black) !important;} + #statuspanel-inner > #statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important;} #customization-container, #content-deck, diff --git a/chrome/fake_urlbar_dropmarker.css b/chrome/fake_urlbar_dropmarker.css index f481a8c..a315e23 100644 --- a/chrome/fake_urlbar_dropmarker.css +++ b/chrome/fake_urlbar_dropmarker.css @@ -9,7 +9,7 @@ See the above repository for updates as well as full license text. */ height: 28px; width: 28px; padding: var(--urlbar-icon-padding); - fill: var(--lwt-toolbar-field-color, black); + fill: var(--toolbar-field-color, black); fill-opacity: 0.6; -moz-context-properties: fill, fill-opacity; background: no-repeat center url(chrome://global/skin/icons/arrow-down-12.svg); diff --git a/chrome/minimal_text_fields.css b/chrome/minimal_text_fields.css index 106831b..e93eee8 100644 --- a/chrome/minimal_text_fields.css +++ b/chrome/minimal_text_fields.css @@ -2,7 +2,7 @@ See the above repository for updates as well as full license text. */ :root:not([customizing]){ - --lwt-toolbar-field-background-color: transparent !important; + --toolbar-field-background-color: transparent !important; --toolbar-field-border-color: transparent !important; } @@ -12,7 +12,7 @@ See the above repository for updates as well as full license text. */ #searchbar, #search-box{ -moz-appearance: none !important; - background-color: var(--lwt-toolbar-field-background-color) !important; + background-color: var(--toolbar-field-background-color) !important; color: inherit !important; } diff --git a/chrome/navigation_buttons_inside_urlbar.css b/chrome/navigation_buttons_inside_urlbar.css index 6176012..ea0ffbb 100644 --- a/chrome/navigation_buttons_inside_urlbar.css +++ b/chrome/navigation_buttons_inside_urlbar.css @@ -23,7 +23,7 @@ See the above repository for updates as well as full license text. */ border-style: solid; border-width: 1px 0; opacity: 1 !important; - background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)); + background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8)); } #nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button) .toolbarbutton-icon{ diff --git a/chrome/selected_tab_as_urlbar.css b/chrome/selected_tab_as_urlbar.css index 7737f80..c2249f1 100644 --- a/chrome/selected_tab_as_urlbar.css +++ b/chrome/selected_tab_as_urlbar.css @@ -23,8 +23,8 @@ See the above repository for updates as well as full license text. */ box-shadow: none !important; } .urlbarView{ - background: var(--lwt-toolbar-field-focus); - border: 1px solid var(--lwt-toolbar-field-focus-border-color) !important; + background: var(--toolbar-field-focus-background-color); + border: 1px solid var(--toolbar-field-focus-border-color) !important; z-index: 1; padding: 6px; border-radius: 6px; @@ -41,7 +41,7 @@ See the above repository for updates as well as full license text. */ #navigator-toolbox:focus-within .tab-background[selected]{ background-image: -moz-element(#urlbar-input) !important; background-position: calc(var(--tab-inline-padding,4px) + 6px) 3px !important; - background-color: var(--lwt-toolbar-field-focus) !important; + background-color: var(--toolbar-field-focus-background-color) !important; background-size: auto !important; } diff --git a/chrome/status_inside_urlbar.css b/chrome/status_inside_urlbar.css index e16d897..aadf7c6 100644 --- a/chrome/status_inside_urlbar.css +++ b/chrome/status_inside_urlbar.css @@ -13,6 +13,16 @@ Relevant information: https://bugzilla.mozilla.org/show_bug.cgi?id=1496065 As a workaround, the -moz-element background image is removed somewhat often which seems work at first glance. But there might still be some related issues on really long sessions. Just be aware. **************/ +/* Temporary dummy variables, can probably be removed when Fx92 releases */ +:root{ + --toolbar-field-background-color: var(--toolbar-field-non-lwt-bgcolor); + --toolbar-field-color: var(--toolbar-field-non-lwt-color); +} +:root:-moz-lwtheme{ + --toolbar-field-background-color: var(--lwt-toolbar-field-background-color); + --toolbar-field-color: var(--lwt-toolbar-field-color); +} + .urlbar-input-box{ display: grid; position: relative; @@ -55,7 +65,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi #statuspanel-inner > #statuspanel-label{ height:3em; min-width: 1000px; - background-color: var(--lwt-toolbar-field-background-color, #fffc) !important; + background-color: var(--toolbar-field-background-color, #fffc) !important; border: none !important; font-size: 1.15em; color: inherit !important; @@ -64,7 +74,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi /* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */ #statuspanel-inner{ background-color: var(--toolbar-bgcolor) } -#statuspanel{ color: var(--lwt-toolbar-field-color, black) ; z-index: -1; max-width: 100% !important; } +#statuspanel{ color: var(--toolbar-field-color, black) ; z-index: -1; max-width: 100% !important; } #statuspanel[type="status"] { color: Highlight } /* You will need to adjust these probably as they depend on OS, text size etc. */ diff --git a/chrome/status_inside_urlbar_v2.css b/chrome/status_inside_urlbar_v2.css index f035a63..5e96557 100644 --- a/chrome/status_inside_urlbar_v2.css +++ b/chrome/status_inside_urlbar_v2.css @@ -13,6 +13,16 @@ Relevant information: https://bugzilla.mozilla.org/show_bug.cgi?id=1496065 As a workaround, the -moz-element background image is removed somewhat often which seems work at first glance. But there might still be some related issues on really long sessions. Just be aware. **************/ +/* Temporary dummy variables, can probably be removed when Fx92 releases */ +:root{ + --toolbar-field-background-color: var(--toolbar-field-non-lwt-bgcolor); + --toolbar-field-color: var(--toolbar-field-non-lwt-color); +} +:root:-moz-lwtheme{ + --toolbar-field-background-color: var(--lwt-toolbar-field-background-color); + --toolbar-field-color: var(--lwt-toolbar-field-color); +} + #urlbar::before{ z-index: 2; content: ""; @@ -41,7 +51,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi #statuspanel-inner > #statuspanel-label{ height:3em; min-width: 1000px; - background-color: var(--lwt-toolbar-field-background-color, #fffc) !important; + background-color: var(--toolbar-field-background-color, #fffc) !important; border: none !important; font-size: 1.15em; color: inherit !important; @@ -52,7 +62,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi /* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */ #statuspanel-inner{ background-color: var(--toolbar-bgcolor) } -#statuspanel{ color: var(--lwt-toolbar-field-color, black) ; z-index: -1; max-width: 100% !important; } +#statuspanel{ color: var(--toolbar-field-color, black) ; z-index: -1; max-width: 100% !important; } #statuspanel[type="status"] { color: Highlight } /* OPTIONAL FEATURES */ diff --git a/chrome/urlbar_popup_full_width.css b/chrome/urlbar_popup_full_width.css index 6ce48f9..4469c9f 100644 --- a/chrome/urlbar_popup_full_width.css +++ b/chrome/urlbar_popup_full_width.css @@ -3,10 +3,19 @@ See the above repository for updates as well as full license text. */ /* Make urlbar popup appear full size like it did before urlbar re-design */ +/* Temporary dummy variables, can probably be removed when Fx92 releases */ +:root{ + --toolbar-field-background-color: var(--toolbar-field-non-lwt-bgcolor); + --toolbar-field-focus-background-color: var(--lwt-toolbar-field-focus,Field); +} +:root:-moz-lwtheme{ + --toolbar-field-background-color: var(--lwt-toolbar-field-background-color); +} + .urlbarView-row-inner{ /* This sets how far the dropdown-items are from window edge */ padding-inline-start: 6px !important; - } +} #urlbar-container, #urlbar{ @@ -17,12 +26,12 @@ See the above repository for updates as well as full license text. */ height: auto !important; width: auto !important; box-shadow: inset 0 0 0 1px var(--toolbar-field-border-color, hsla(240,5%,5%,.25)); - background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)); + background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8)); border-radius: var(--toolbarbutton-border-radius); --uc-urlbar-min-width: none; /* navbar_tabs_oneliner.css compatibility */ } -#urlbar[focused]{ box-shadow: inset 0 0 0 1px var(--lwt-toolbar-field-border-focus, highlight); } +#urlbar[focused]{ box-shadow: inset 0 0 0 1px var(--toolbar-field-focus-border-color, highlight); } .urlbarView{ position: absolute !important; @@ -31,7 +40,7 @@ See the above repository for updates as well as full license text. */ width: 100vw !important; border-width: 1px 0; top: var(--urlbar-toolbar-height); - background-color: var(--lwt-toolbar-field-focus, inherit); + background-color: var(--toolbar-field-focus-background-color, inherit); z-index: 4; box-shadow: 0 1px 4px rgba(0,0,0,.05); }