From 647b4131520af849929d285b2cde786daddbb261 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Fri, 31 Mar 2023 18:26:43 +0300 Subject: [PATCH] Remove xul-box use from bunch of styles --- chrome/autohide_menubar.css | 2 +- .../combined_favicon_and_tab_close_button.css | 2 +- chrome/combined_tabs_and_main_toolbars.css | 2 +- chrome/compact_proton.css | 4 +-- chrome/curved_tabs.css | 2 +- chrome/hide_tabs_toolbar_w_alltabs_button.css | 5 +++- chrome/integrated_searchbar_popup.css | 2 +- chrome/pinned_tabs_on_right.css | 30 ++++++++++++++----- chrome/selected_tab_as_urlbar.css | 2 +- chrome/shrinking_pinned_tabs.css | 3 +- 10 files changed, 36 insertions(+), 18 deletions(-) diff --git a/chrome/autohide_menubar.css b/chrome/autohide_menubar.css index 1417fd4..5d1c8e1 100644 --- a/chrome/autohide_menubar.css +++ b/chrome/autohide_menubar.css @@ -17,7 +17,7 @@ See the above repository for updates as well as full license text. */ #toolbar-menubar > spacer, #toolbar-menubar > .titlebar-buttonbox-container{ order: 1000 } -#TabsToolbar > .titlebar-spacer{ display: -moz-box !important; } +#TabsToolbar > .titlebar-spacer{ display: flex !important; } :where(#toolbar-menubar){ -moz-window-dragging: no-drag; } diff --git a/chrome/combined_favicon_and_tab_close_button.css b/chrome/combined_favicon_and_tab_close_button.css index 45f947e..cd544e1 100644 --- a/chrome/combined_favicon_and_tab_close_button.css +++ b/chrome/combined_favicon_and_tab_close_button.css @@ -16,7 +16,7 @@ See the above repository for updates as well as full license text. */ .tab-close-button{ -moz-box-ordinal-group: 0; /* Firefox <112 compatibility */ order: -1; - display: -moz-box !important; + display: flex !important; position: relative; margin-inline: -4px -20px !important; padding-inline-start: 7px !important; diff --git a/chrome/combined_tabs_and_main_toolbars.css b/chrome/combined_tabs_and_main_toolbars.css index 1f16931..945e076 100644 --- a/chrome/combined_tabs_and_main_toolbars.css +++ b/chrome/combined_tabs_and_main_toolbars.css @@ -69,6 +69,6 @@ See the above repository for updates as well as full license text. */ /* Set this pref if you want unpinned tabs to become hidden unless selected */ @supports -moz-bool-pref("userchrome.hide-unpinned-tabs.enabled"){ - #alltabs-button{ display: -moz-box !important } + #alltabs-button{ display: flex !important } .tabbrowser-tab:not([pinned]):not([selected]){ visibility: collapse } } diff --git a/chrome/compact_proton.css b/chrome/compact_proton.css index effe5db..2c72da9 100644 --- a/chrome/compact_proton.css +++ b/chrome/compact_proton.css @@ -13,7 +13,7 @@ See the above repository for updates as well as full license text. */ --inline-tab-padding: 8px !important; /* 8px is default value since it looks good - lower values compactify tabs horizontally */ } .subviewbutton.bookmark-item{ padding-block: 4px !important; } -.subview-subheader{ display: -moz-box } +.subview-subheader{ display: block } menupopup > menuitem, menupopup > menu{ padding-block: 0.3em !important; } @@ -35,7 +35,7 @@ menupopup > menu{ padding-block: 0.3em !important; } /* OPTIONAL - show audio label in compact mode and make the audio icon behavior match non-compact mode */ /* -.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ display: -moz-box !important; margin-bottom: 1px } +.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ display: flex !important; margin-bottom: 1px } #TabsToolbar:not(:hover) .tab-icon-image{ opacity: 1 !important; } #TabsToolbar:not(:hover) .tab-icon-overlay:not([pinned]){ opacity: 0 !important; } */ \ No newline at end of file diff --git a/chrome/curved_tabs.css b/chrome/curved_tabs.css index 18dad46..2ae329f 100644 --- a/chrome/curved_tabs.css +++ b/chrome/curved_tabs.css @@ -136,7 +136,7 @@ See the above repository for updates as well as full license text. */ } .tab-background[selected]::before{ content: ""; - display: -moz-box; + display: flex; height: 2px; background: var(--uc-tab-line-color) !important; } diff --git a/chrome/hide_tabs_toolbar_w_alltabs_button.css b/chrome/hide_tabs_toolbar_w_alltabs_button.css index 726970a..9ad6beb 100644 --- a/chrome/hide_tabs_toolbar_w_alltabs_button.css +++ b/chrome/hide_tabs_toolbar_w_alltabs_button.css @@ -6,7 +6,10 @@ See the above repository for updates as well as full license text. */ /* Load window_control_placeholder_support.css before this stylesheet */ #tabbrowser-tabs{ visibility: hidden } -#TabsToolbar-customization-target{ -moz-box-pack: end; } +#TabsToolbar-customization-target{ + -moz-box-pack: end; + justify-content: flex-end; +} #alltabs-button{ position: relative; z-index: 1; diff --git a/chrome/integrated_searchbar_popup.css b/chrome/integrated_searchbar_popup.css index ddea2d6..9366997 100644 --- a/chrome/integrated_searchbar_popup.css +++ b/chrome/integrated_searchbar_popup.css @@ -39,7 +39,7 @@ slot{ height: 8px; background: var(--toolbar-field-focus-background-color); border-inline: 2px solid var(--toolbar-field-focus-border-color); - display: -moz-box; + display: flex; content: ""; position: relative; z-index: 2; diff --git a/chrome/pinned_tabs_on_right.css b/chrome/pinned_tabs_on_right.css index f49fade..9ba6658 100644 --- a/chrome/pinned_tabs_on_right.css +++ b/chrome/pinned_tabs_on_right.css @@ -7,20 +7,34 @@ See the above repository for updates as well as full license text. */ .scrollbutton-up[orient="horizontal"]~spacer{ display: none } .scrollbutton-up[orient="horizontal"]~scrollbox{ - -moz-box-direction: inherit; - -moz-box-pack: end; + -moz-box-direction: inherit; /* Fx < 112 compatibility */ + -moz-box-pack: end; /* Fx < 112 compatibility */ + justify-content: flex-end; } .scrollbutton-up[orient="horizontal"]~scrollbox::after{ - display: -moz-box; + display: -moz-box; /* Fx < 112 compatibility */ content: ""; - -moz-box-flex: 1; - -moz-box-ordinal-group: 2; + display: flex; + flex-grow: 1; + flex-shrink: 1; + order: 2; + -moz-box-flex: 1; /* Fx < 112 compatibility */ + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ } -#tabs-newtab-button{ -moz-box-ordinal-group: 2 } -.tabbrowser-tab[pinned]{ -moz-box-ordinal-group: 3 } +#tabs-newtab-button{ + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; +} +.tabbrowser-tab[pinned]{ + -moz-box-ordinal-group: 3; /* Fx < 112 compatibility */ + order: 3; +} #tabbrowser-tabs[positionpinnedtabs]{ direction: rtl } -#tabbrowser-tabs[positionpinnedtabs] > arrowscrollbox { -moz-box-direction: reverse } +#tabbrowser-tabs[positionpinnedtabs] > arrowscrollbox { + -moz-box-direction: reverse; /* Fx < 112 compatibility */ + flex-direction: row-reverse; +} .tab-content{ direction: ltr } \ No newline at end of file diff --git a/chrome/selected_tab_as_urlbar.css b/chrome/selected_tab_as_urlbar.css index 1d1a26e..5ce427e 100644 --- a/chrome/selected_tab_as_urlbar.css +++ b/chrome/selected_tab_as_urlbar.css @@ -61,7 +61,7 @@ See the above repository for updates as well as full license text. */ #TabsToolbar > .toolbar-items{ margin-left: 80px } :root[sizemode="normal"] #nav-bar-customization-target{ margin-left: 40px } #back-button, #forward-button{ - -moz-box-ordinal-group: 0; + -moz-box-ordinal-group: 0; /* Fx <112 compatibility */ order: -1; visibility: visible !important; z-index: 2; diff --git a/chrome/shrinking_pinned_tabs.css b/chrome/shrinking_pinned_tabs.css index 3c37791..0112abc 100644 --- a/chrome/shrinking_pinned_tabs.css +++ b/chrome/shrinking_pinned_tabs.css @@ -15,7 +15,8 @@ See the above repository for updates as well as full license text. */ #tabbrowser-arrowscrollbox:not([overflowing]) .tab-content[pinned] { padding: 0px !important; - -moz-box-pack: center; + -moz-box-pack: center; /* Fx <112 compatibility */ + justify-content: center; } .tab-label-container[pinned] {