From 0ff12e01fe18bc86ca68291c88c6dcf027cb9d83 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Sat, 11 Mar 2023 12:26:07 +0200 Subject: [PATCH] Add support for modern flexbox layout Flexbox model will replace old xul box as the default display model so this patch adds support for that in a whole bunch of styles. A lot of style rules are marked as "Fx < 112 compatibility" rules and those can be removed when 112 hits release. --- chrome/autohide_sidebar.css | 6 +- chrome/centered_tab_label.css | 8 ++- chrome/classic_firefox_menu_button.css | 20 +++++-- chrome/classic_grid_main_menu_popup.css | 58 +++++++++++++------ .../combined_favicon_and_tab_close_button.css | 3 +- chrome/combined_tabs_and_main_toolbars.css | 2 +- chrome/curved_tabs.css | 2 +- chrome/fake_statusbar_w_bookmarksbar.css | 9 ++- chrome/floating_findbar_on_top.css | 20 ++++--- chrome/hide_tabs_scrollbuttons.css | 6 +- chrome/hide_tabs_toolbar.css | 6 +- chrome/hide_tabs_with_one_tab.css | 3 +- ...de_tabs_with_one_tab_w_window_controls.css | 3 +- chrome/icon_only_tabs.css | 7 ++- chrome/iconized_main_menu.css | 7 ++- chrome/inline_tab_audio_icons.css | 2 +- chrome/linux_gtk_window_control_patch.css | 6 +- chrome/menubar_in_main_toolbar.css | 12 +++- chrome/menubar_in_tabs_toolbar.css | 12 +++- chrome/multi-row_tabs.css | 3 +- chrome/multi-row_tabs_below_content.css | 9 ++- .../multi-row_tabs_window_control_patch.css | 9 ++- ...ar_tabs_oneliner_menu_buttons_on_right.css | 9 +-- chrome/navbar_tabs_oneliner_tabs_on_left.css | 12 ++-- chrome/newtab_button_always_on_hover.css | 5 +- chrome/non_floating_sharp_tabs.css | 11 +++- chrome/normal_pinned_tabs.css | 8 ++- chrome/overlay_menubar.css | 7 ++- chrome/selected_tab_gradient_border.css | 2 +- chrome/show_toolbars_in_popup_windows.css | 2 +- chrome/status_inside_urlbar.css | 3 +- chrome/status_inside_urlbar_v2.css | 1 + chrome/tab_close_button_always_on_hover.css | 3 +- chrome/tab_line_loading_indicator.css | 4 +- chrome/tab_loading_progress_bar.css | 4 +- chrome/tab_loading_progress_throbber.css | 2 +- chrome/tabs_animated_gradient_border.css | 4 +- chrome/tabs_below_content.css | 2 +- chrome/tabs_on_bottom.css | 20 +++++-- chrome/textual_context_navigation.css | 1 + chrome/textual_searchbar_one-offs.css | 13 ++--- chrome/toolbarbuttons_icon+label.css | 10 ++-- chrome/toolbars_below_content.css | 18 +++--- chrome/urlbar_popup_full_width.css | 11 +++- chrome/vertical_menubar.css | 10 ++-- chrome/vertical_popup_menubar.css | 13 ++--- chrome/window_control_placeholder_support.css | 11 +++- 47 files changed, 262 insertions(+), 137 deletions(-) diff --git a/chrome/autohide_sidebar.css b/chrome/autohide_sidebar.css index 21a518d..707f2ca 100644 --- a/chrome/autohide_sidebar.css +++ b/chrome/autohide_sidebar.css @@ -34,14 +34,10 @@ See the above repository for updates as well as full license text. */ #sidebar-header::before, #sidebar-header::after{ content: ""; - display: -moz-box; + display: flex; padding-left: 8px; } -#sidebar-switcher-target{ - -moz-box-pack: start !important; -} - #sidebar-header, #sidebar{ transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important; diff --git a/chrome/centered_tab_label.css b/chrome/centered_tab_label.css index 6ee51af..0b9382e 100644 --- a/chrome/centered_tab_label.css +++ b/chrome/centered_tab_label.css @@ -3,12 +3,14 @@ See the above repository for updates as well as full license text. */ .tab-label-container{ display: grid; - justify-content: safe center; - align-items: safe center; + justify-content: safe center; /* Fx <112 compatibility */ + align-items: safe center; /* Fx <112 compatibility */ + align-content: center; } .tab-secondary-label{ - -moz-box-pack: center; + -moz-box-pack: center; /* Fx <112 compatibility */ + justify-content: center; } .tab-label, diff --git a/chrome/classic_firefox_menu_button.css b/chrome/classic_firefox_menu_button.css index 69bd019..7adb917 100644 --- a/chrome/classic_firefox_menu_button.css +++ b/chrome/classic_firefox_menu_button.css @@ -13,9 +13,19 @@ See the above repository for updates as well as full license text. */ --uc-fx-button-sec-color: #ffdfbf85; } -#PanelUI-button{ -moz-box-ordinal-group: 0; margin-inline: 2px var(--uc-window-drag-space-pre,24px) !important; } -:root[tabsintitlebar] #nav-bar{ border-left-width: 0px; padding-left: 0px !important; } -#PanelUI-menu-button{ -moz-box-align: start !important; } +#PanelUI-button{ + -moz-box-ordinal-group: 0; /* Fx <112 compatibility */ + order: -1; + margin-inline: 2px var(--uc-window-drag-space-pre,24px) !important; +} +:root[tabsintitlebar] #nav-bar{ + border-left-width: 0px; + padding-left: 0px !important; +} +#PanelUI-menu-button{ + -moz-box-align: start !important; /* Fx <112 compatibility */ + align-items: start; +} #PanelUI-menu-button > stack{ background-color: var(--uc-fx-button-color); background-image: linear-gradient(var(--uc-fx-button-sec-color), transparent) !important; @@ -24,7 +34,7 @@ See the above repository for updates as well as full license text. */ border: 1px groove black; outline: 1px solid #cdd8e4; border-top: none; - display: -moz-box; + display: flex; padding: 4px 10px !important; } @@ -35,7 +45,7 @@ See the above repository for updates as well as full license text. */ } #PanelUI-menu-button > stack::before{ - display: -moz-box; + display: flex; content: "Firefox"; /* Change text here */ color: white; text-shadow: 0 0 2px black; diff --git a/chrome/classic_grid_main_menu_popup.css b/chrome/classic_grid_main_menu_popup.css index 642f404..6e3b947 100644 --- a/chrome/classic_grid_main_menu_popup.css +++ b/chrome/classic_grid_main_menu_popup.css @@ -29,8 +29,13 @@ See the above repository for updates as well as full license text. */ height: 76px; flex-grow:1; } -#appMenu-protonMainView > .panel-subview-body > toolbarbutton > .toolbarbutton-icon{ -moz-box-flex: 1 } -#appMenu-protonMainView > .panel-subview-body > toolbarbutton{ -moz-box-orient: vertical } +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > .toolbarbutton-icon{ + -moz-box-flex: 1; +} +#appMenu-protonMainView > .panel-subview-body > toolbarbutton{ + flex-direction: column; + -moz-box-orient: vertical; /* Fx <112 compatibility */ +} :where(#appMenu-protonMainView) > .panel-subview-body > toolbarbutton.subviewbutton{ padding-inline: 4px !important; @@ -38,20 +43,28 @@ See the above repository for updates as well as full license text. */ fill: currentColor; } +#appMenu-protonMainView > .panel-subview-body > .subviewbutton > .toolbarbutton-text{ + overflow: hidden !important; + text-overflow: ellipsis !important; + max-width: 70px; +} + /* Unique styling for Edit and Zoom controls */ -#appMenu-zoom-controls2, -#appMenu-zoom-controls2 + toolbarseparator{ +#appMenu-zoom-controls, +#appMenu-zoom-controls + toolbarseparator{ order: -1; height: initial !important; margin: initial !important; flex-grow: 1; } -#appMenu-zoom-controls2 + toolbarseparator{ margin-block: 0 4px !important; } -#appMenu-zoom-controls2{ padding-block: 2px !important; } -#appMenu-zoom-controls2 > :not(:last-child){ - -moz-box-flex: 1 !important; - -moz-box-pack: center !important; +#appMenu-zoom-controls + toolbarseparator{ margin-block: 0 4px !important; } +#appMenu-zoom-controls{ padding-block: 2px !important; } +#appMenu-zoom-controls > :not(:last-child){ + -moz-box-flex: 1 !important; /* Fx <112 compatibility */ + -moz-box-pack: center !important; /* Fx <112 compatibility */ + flex-grow: 1 !important; + justify-content: center !important; border-radius: 0 !important; } #appMenu-zoomReset-button2{ @@ -102,9 +115,9 @@ See the above repository for updates as well as full license text. */ #appMenu-proton-update-banner, #appMenu-quit-button2.subviewbutton{ order: 4 } - -#appMenu-more-button2{ min-width: 170px } -#appMenu-more-button2 > .toolbarbutton-icon{ -moz-box-flex: 0 !important; } +#appMenu-more-button2 > .toolbarbutton-icon{ + -moz-box-flex: 0 !important; +} /* Color styling for items */ #appMenu-protonMainView > .panel-subview-body toolbarbutton:not([disabled]):hover{ @@ -118,9 +131,9 @@ See the above repository for updates as well as full license text. */ #appMenu-fxa-text, #appMenu-help-button2 + toolbarseparator, #appMenu-new-private-window-button2 + toolbarseparator, -#appMenu-zoom-controls2 > #appMenu-fullscreen-button > label, -#appMenu-zoom-controls2 > label, -#appMenu-zoom-controls2 > spacer, +#appMenu-zoom-controls > #appMenu-fullscreen-button > label, +#appMenu-zoom-controls > label, +#appMenu-zoom-controls > spacer, #appMenu-edit-controls2 > label, #appMenu-edit-controls2 > spacer, #appMenu-protonMainView > .panel-subview-body > toolbarbutton::after{ display: none !important; } @@ -135,6 +148,7 @@ See the above repository for updates as well as full license text. */ #appMenu-fxa-status2{ display: grid !important; padding-block: 0 !important; + justify-content: stretch !important; } #appMenu-fxa-status2 > *{ grid-area: 1/1 } #appMenu-fxa-status2 > toolbarbutton::before, @@ -144,7 +158,7 @@ See the above repository for updates as well as full license text. */ } #appMenu-fxa-status2 > toolbarbutton::before{ - display: -moz-box; + display: flex; content: ""; width: 16px; height: 16px; @@ -165,11 +179,19 @@ See the above repository for updates as well as full license text. */ #appMenu-quit-button2{ background-color: var(--button-bgcolor) !important; border-radius: 0 !important; - -moz-box-orient: horizontal !important; - -moz-box-pack: center !important; + -moz-box-orient: horizontal !important; /* Fx <112 compatibility */ + -moz-box-pack: center !important; /* Fx <112 compatibility */ + flex-direction: row !important; + justify-content: center !important; padding-block: 12px !important; opacity: 0.8; } + +#appMenu-more-button2{ + min-width: 170px; + justify-content: start !important; +} + #appMenu-proton-update-banner:hover, #appMenu-fxa-label2:hover, #appMenu-more-button2:hover, diff --git a/chrome/combined_favicon_and_tab_close_button.css b/chrome/combined_favicon_and_tab_close_button.css index bdb00c9..45f947e 100644 --- a/chrome/combined_favicon_and_tab_close_button.css +++ b/chrome/combined_favicon_and_tab_close_button.css @@ -14,7 +14,8 @@ See the above repository for updates as well as full license text. */ visibility: hidden; } .tab-close-button{ - -moz-box-ordinal-group: 0; + -moz-box-ordinal-group: 0; /* Firefox <112 compatibility */ + order: -1; display: -moz-box !important; position: relative; margin-inline: -4px -20px !important; diff --git a/chrome/combined_tabs_and_main_toolbars.css b/chrome/combined_tabs_and_main_toolbars.css index d086ce8..1f16931 100644 --- a/chrome/combined_tabs_and_main_toolbars.css +++ b/chrome/combined_tabs_and_main_toolbars.css @@ -25,7 +25,7 @@ See the above repository for updates as well as full license text. */ @media (-moz-platform: windows-win10),(-moz-os-version: windows-win10){ :root[tabsintitlebar="true"] #nav-bar{ padding-left: calc(var(--uc-hide-window-control-space,1) * 134px + 20px) !important; } } - #toolbar-menubar[autohide="true"] + #TabsToolbar .titlebar-buttonbox{ -moz-box-direction: reverse } + #toolbar-menubar[autohide="true"] + #TabsToolbar .titlebar-buttonbox{ -moz-box-direction: reverse; flex-direction: row-reverse } } #navigator-toolbox{ --tab-min-height: 40px } diff --git a/chrome/curved_tabs.css b/chrome/curved_tabs.css index 5fac407..18dad46 100644 --- a/chrome/curved_tabs.css +++ b/chrome/curved_tabs.css @@ -153,7 +153,7 @@ See the above repository for updates as well as full license text. */ /* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */ @supports -moz-bool-pref("userchrome.curved_tabs.flipped-curve.enabled"){ - .tab-background{ -moz-box-direction: reverse } + .tab-background{ -moz-box-direction: reverse; flex-direction: column-reverse } .tabbrowser-tab:hover > .tab-stack > .tab-background, .tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) !important } .tabbrowser-tab > .tab-stack::before{ transform: scaleY(-1) !important; } diff --git a/chrome/fake_statusbar_w_bookmarksbar.css b/chrome/fake_statusbar_w_bookmarksbar.css index d822033..1d9232c 100644 --- a/chrome/fake_statusbar_w_bookmarksbar.css +++ b/chrome/fake_statusbar_w_bookmarksbar.css @@ -21,7 +21,7 @@ See the above repository for updates as well as full license text. */ :root:not([inFullscreen]) > body::after{ content: ""; - display: -moz-box; + display: flex; margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important; } @@ -44,7 +44,10 @@ See the above repository for updates as well as full license text. */ } #personal-toolbar-empty{ visibility: hidden; } -#PersonalToolbar .toolbarbutton-1{ -moz-box-align: center !important; } +#PersonalToolbar .toolbarbutton-1{ + -moz-box-align: center !important; /* Fx <112 compatibility */ + align-items: center !important; +} #PersonalToolbar > toolbarspring{ flex-grow: 1; @@ -84,7 +87,7 @@ See the above repository for updates as well as full license text. */ .browserStack > #statuspanel[inactive]::before, #statuspanel[inactive] > #statuspanel-inner::before{ content: "Done"; - display: -moz-box; + display: flex; margin-top: 2px; color: var(--toolbar-field-color, black) !important; } diff --git a/chrome/floating_findbar_on_top.css b/chrome/floating_findbar_on_top.css index 1e01d2f..0135f37 100644 --- a/chrome/floating_findbar_on_top.css +++ b/chrome/floating_findbar_on_top.css @@ -9,7 +9,8 @@ See the above repository for updates as well as full license text. */ */ findbar{ - -moz-box-ordinal-group: 0; + -moz-box-ordinal-group: 0; /* Fx <112 compatibility */ + order: -1; margin-bottom: -33px; position: relative; border-top: none !important; @@ -43,10 +44,11 @@ findbar > .findbar-container{ } .findbar-find-status{ - display: -moz-box; + display: flex; overflow: hidden; text-overflow: ellipsis; - -moz-box-flex: 1; + -moz-box-flex: 1; /* Fx <112 compatibility */ + flex-grow: 1; } .findbar-closebutton{ @@ -54,7 +56,8 @@ findbar > .findbar-container{ border-radius: 0 !important; padding: 5px !important; width: initial !important; - -moz-box-ordinal-group: 0; + -moz-box-ordinal-group: 0; /* Fx <112 compatibility */ + order: -1; } .findbar-closebutton > image{ padding: 3px } .findbar-closebutton:hover > image{ @@ -65,16 +68,19 @@ findbar > .findbar-container > hbox{ margin: 0 5px } findbar::after{ content:""; - display: -moz-box; - -moz-box-flex: 100; + display: flex; + -moz-box-flex: 100; /* Fx <112 compatibility */ + flex-grow: 100; } @supports -moz-bool-pref("userchrome.floating-findbar-on-right.enabled"){ findbar{ - -moz-box-direction: reverse; + -moz-box-direction: reverse; /* Fx <112 compatibility */ + flex-direction: row-reverse; } findbar > .findbar-container{ -moz-box-direction: reverse; + flex-direction: row-reverse; border-inline-width: 1px 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 4px; diff --git a/chrome/hide_tabs_scrollbuttons.css b/chrome/hide_tabs_scrollbuttons.css index 238939c..9c65593 100644 --- a/chrome/hide_tabs_scrollbuttons.css +++ b/chrome/hide_tabs_scrollbuttons.css @@ -26,11 +26,13 @@ See the above repository for updates as well as full license text. */ visibility: visible !important; } spacer[part="overflow-start-indicator"]{ - -moz-box-ordinal-group: 0; + -moz-box-ordinal-group: 0; /* Fx < 112 compatibility */ + order: -1; margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important; } spacer[part="overflow-end-indicator"]{ - -moz-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; } #scrollbutton-down[disabled="true"] > .toolbarbutton-icon, diff --git a/chrome/hide_tabs_toolbar.css b/chrome/hide_tabs_toolbar.css index 0a6e363..bebcda5 100644 --- a/chrome/hide_tabs_toolbar.css +++ b/chrome/hide_tabs_toolbar.css @@ -39,8 +39,10 @@ Window controls will be all wrong without it } :root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{ - -moz-box-flex: 1; - -moz-box-align: stretch; + -moz-box-flex: 1; /* Fx < 112 compatibility */ + flex-grow: 1; + -moz-box-align: stretch; /* Fx < 112 compatibility */ + align-items: stretch; background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor); background-clip: padding-box; border-right: 30px solid transparent; diff --git a/chrome/hide_tabs_with_one_tab.css b/chrome/hide_tabs_with_one_tab.css index eb17119..a4404f8 100644 --- a/chrome/hide_tabs_with_one_tab.css +++ b/chrome/hide_tabs_with_one_tab.css @@ -42,7 +42,8 @@ This will NOT work correctly if you have hidden tabs such as with tab groups ext } @media (-moz-platform: linux){ #TabsToolbar .titlebar-buttonbox{ - -moz-box-align: stretch !important; + -moz-box-align: stretch !important; /* Fx < 112 compatibility */ + align-items: stretch !important; } #TabsToolbar > .titlebar-buttonbox-container > .titlebar-buttonbox > .titlebar-button{ transform: scale(0.8); diff --git a/chrome/hide_tabs_with_one_tab_w_window_controls.css b/chrome/hide_tabs_with_one_tab_w_window_controls.css index f8b4b5a..793ea6e 100644 --- a/chrome/hide_tabs_with_one_tab_w_window_controls.css +++ b/chrome/hide_tabs_with_one_tab_w_window_controls.css @@ -31,7 +31,8 @@ Window controls will be all wrong without it #TabsToolbar > .titlebar-spacer[type="post-tabs"]{ width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) !important; - -moz-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; } #toolbar-menubar > spacer{ pointer-events: none } diff --git a/chrome/icon_only_tabs.css b/chrome/icon_only_tabs.css index 70f6e39..52f72bf 100644 --- a/chrome/icon_only_tabs.css +++ b/chrome/icon_only_tabs.css @@ -5,10 +5,13 @@ See the above repository for updates as well as full license text. */ display: none } .tab-icon-image:not([src]){ - display: -moz-box !important; + display: block !important; } .tab-icon-stack > *{ margin-inline: 0 !important; } -.tabbrowser-tab{ -moz-box-flex: 0 !important; } +.tabbrowser-tab{ + -moz-box-flex: 0 !important; /* Fx <112 compatibility */ + flex-grow: 0 !important; +} .tabbrowser-tab[fadein]{ min-width: calc(16px + 2 * 10px + 4px) !important; } :root[uidensity="compact"] .tabbrowser-tab[fadein]{ diff --git a/chrome/iconized_main_menu.css b/chrome/iconized_main_menu.css index a7df6ae..d419a90 100644 --- a/chrome/iconized_main_menu.css +++ b/chrome/iconized_main_menu.css @@ -25,7 +25,7 @@ See the above repository for updates as well as full license text. */ #appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") } /* Use account-button icon for signed in sync item */ #appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ - display: -moz-box; + display: flex; content: ""; width: 16px; height: 16px; @@ -34,11 +34,12 @@ See the above repository for updates as well as full license text. */ /* Add somewhat hacky separator to zoom controls so it looks consistent */ #appMenu-protonMainView > .panel-subview-body::after{ content: ""; - display: -moz-box; + display: flex; border-bottom: 1px solid var(--panel-separator-color); margin: var(--panel-separator-margin); } #appMenu-find-button2 ~ *{ - -moz-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; } \ No newline at end of file diff --git a/chrome/inline_tab_audio_icons.css b/chrome/inline_tab_audio_icons.css index db14a85..7969630 100644 --- a/chrome/inline_tab_audio_icons.css +++ b/chrome/inline_tab_audio_icons.css @@ -20,7 +20,7 @@ See the above repository for updates as well as full license text. */ .tab-secondary-label{ display: none } /* show the secondary label when video is in PiP */ -.tab-secondary-label[pictureinpicture]{ display: -moz-box } +.tab-secondary-label[pictureinpicture]{ display: flex } /* These exist for compatibility with combined_favicon_and_tab_close_button.css */ .tab-icon-overlay{ pointer-events: auto } diff --git a/chrome/linux_gtk_window_control_patch.css b/chrome/linux_gtk_window_control_patch.css index 419ce52..99b4405 100644 --- a/chrome/linux_gtk_window_control_patch.css +++ b/chrome/linux_gtk_window_control_patch.css @@ -4,13 +4,17 @@ See the above repository for updates as well as full license text. */ /* Overrides the appearance of the window controls with something that more closely matches "normal" buttons*/ /* More importantly, this makes window controls to respect layout rules the other styles rely on */ -.titlebar-buttonbox{ -moz-box-align: stretch !important; } +.titlebar-buttonbox{ + -moz-box-align: stretch !important; /* Fx <112 compatibility */ + align-items: stretch !important; +} .titlebar-button { -moz-appearance: none !important; -moz-context-properties: fill, stroke, fill-opacity; fill: currentColor; padding: 4px 6px !important; -moz-box-flex: 1; + flex-grow: 1; overflow: -moz-hidden-unscrollable; } .titlebar-button:hover{ background-color: rgba(0,0,0,0.1) } diff --git a/chrome/menubar_in_main_toolbar.css b/chrome/menubar_in_main_toolbar.css index 086bbef..709e3a5 100644 --- a/chrome/menubar_in_main_toolbar.css +++ b/chrome/menubar_in_main_toolbar.css @@ -6,7 +6,11 @@ See the above repository for updates as well as full license text. */ #navigator-toolbox{ --uc-menubar-height: 34px; } :root[uidensity="compact"] #navigator-toolbox{ --uc-menubar-height: 30px } -#titlebar{ -moz-box-direction: reverse; -moz-appearance: none !important; } +#titlebar{ + -moz-box-direction: reverse; /* Fx <112 compatibility */ + flex-direction: column-reverse; + -moz-appearance: none !important; +} #toolbar-menubar{ margin-bottom: calc(0px - var(--uc-menubar-height)); @@ -17,13 +21,15 @@ See the above repository for updates as well as full license text. */ } #menubar-items{ - -moz-box-pack: center; + -moz-box-pack: center; /* Fx <112 compatibility */ + justify-content: center; pointer-events: initial; margin-top: 3px; + color: var(--toolbar-color); } /* Adjust to fit menubar items - 300px works for English locale */ #nav-bar{ padding-left: 300px; } #toolbar-menubar > .titlebar-buttonbox-container{ display: none } :root[tabsintitlebar][sizemode="normal"] .titlebar-spacer, -:root[tabsintitlebar] #TabsToolbar > .titlebar-buttonbox-container{ display: -moz-box !important; } +:root[tabsintitlebar] #TabsToolbar > .titlebar-buttonbox-container{ display: flex !important; } diff --git a/chrome/menubar_in_tabs_toolbar.css b/chrome/menubar_in_tabs_toolbar.css index 210c258..4b835e4 100644 --- a/chrome/menubar_in_tabs_toolbar.css +++ b/chrome/menubar_in_tabs_toolbar.css @@ -1,15 +1,21 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/menubar_in_tabs_toolbar.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -:root:not([customizing]) #titlebar{ -moz-box-orient: horizontal } +:root:not([customizing]) #titlebar{ + -moz-box-orient: horizontal; /* Fx <112 compatibility */ + flex-direction: row; +} #toolbar-menubar > .titlebar-buttonbox-container, #toolbar-menubar > spacer{ display: none; } -#toolbar-menubar{ -moz-box-align: center } +#main-menubar{ + -moz-box-flex: 1; /* Fx <112 compatibility */ + flex-grow: 1 !important; +} :root:not([customizing]) #toolbar-menubar[autohide][inactive]{ max-width: 0 } #TabsToolbar > .titlebar-buttonbox-container{ - display: -moz-box !important; + display: flex !important; visibility: visible !important; } diff --git a/chrome/multi-row_tabs.css b/chrome/multi-row_tabs.css index d4b4887..c1325d2 100644 --- a/chrome/multi-row_tabs.css +++ b/chrome/multi-row_tabs.css @@ -73,7 +73,8 @@ See the above repository for updates as well as full license text. */ #tabs-newtab-button{ margin-bottom: 0 !important; } #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button { - display: -moz-box !important; + display: flex !important; + align-items: center; /* Fx <112 compatibility */ } #alltabs-button, diff --git a/chrome/multi-row_tabs_below_content.css b/chrome/multi-row_tabs_below_content.css index 24922b4..e137a6a 100644 --- a/chrome/multi-row_tabs_below_content.css +++ b/chrome/multi-row_tabs_below_content.css @@ -42,7 +42,8 @@ See the above repository for updates as well as full license text. */ :root{ border-top-width: 0px !important } #navigator-toolbox-background{ - -moz-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; /* Fx <112 compatibility */ + order: 2; border-bottom: 0px !important; } #navigator-toolbox{ @@ -51,7 +52,10 @@ See the above repository for updates as well as full license text. */ /* Re-order window and tab notification boxes */ #navigator-toolbox > div{ display: contents } .global-notificationbox, - #tab-notification-deck{ -moz-box-ordinal-group: 0 } + #tab-notification-deck{ + -moz-box-ordinal-group: 0; /* Fx <112 compatibility */ + order: -1; + } #titlebar{ -moz-appearance: none !important; } /* Try setting to "-moz-window-titlebar" if you face issues */ @@ -125,7 +129,6 @@ See the above repository for updates as well as full license text. */ #menubar-items + spacer{ flex-grow: 1 } #toolbar-menubar > #menubar-items{ - -moz-box-pack: center; height: 100%; visibility: hidden; } diff --git a/chrome/multi-row_tabs_window_control_patch.css b/chrome/multi-row_tabs_window_control_patch.css index 9fe1f35..a87810c 100644 --- a/chrome/multi-row_tabs_window_control_patch.css +++ b/chrome/multi-row_tabs_window_control_patch.css @@ -8,7 +8,10 @@ See the above repository for updates as well as full license text. */ /* 20px wide space on left and right to be able to drag the window */ #TabsToolbar{ margin: 0 20px; } -#titlebar{ -moz-box-direction: reverse; } +#titlebar{ + -moz-box-direction: reverse; /* Fx <112 compatibility */ + flex-direction: column-reverse; +} #toolbar-menubar{ height: 40px; margin-bottom: -40px; @@ -18,8 +21,10 @@ See the above repository for updates as well as full license text. */ :root[tabsintitlebar] #nav-bar{ padding-right: 138px; margin-left: 30px; } #toolbar-menubar > #menubar-items{ position: relative; - -moz-box-pack: center; + -moz-box-pack: center; /* Fx <112 compatibility */ + justify-content: center !important; background-image: linear-gradient( to left,transparent,var(--toolbar-bgcolor) 35px); + color: var(--toolbar-color); } #main-menubar:last-child{ padding-inline-end: 40px } diff --git a/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css b/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css index 9f44082..e2acde9 100644 --- a/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css +++ b/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css @@ -24,10 +24,10 @@ Window controls will be all wrong without it /* reserved space for overflow + menu buttons */ #navigator-toolbox{ - --uc-buttons-width: calc(56px + 4 * var(--toolbarbutton-outer-padding) + var(--uc-menubutton-padding,6px)) + --uc-buttons-width: calc(96px + 5 * var(--toolbarbutton-outer-padding) + var(--uc-menubutton-padding,6px)) } -#nav-bar:not([overflowing]) > #nav-bar-customization-target{ - --uc-buttons-width: calc(28px + 2 * var(--toolbarbutton-outer-padding) + 6px) +#nav-bar:not([nonemptyoverflow="true"]) > #nav-bar-customization-target{ + --uc-buttons-width: calc(64px + 4 * var(--toolbarbutton-outer-padding) + 6px) } /* Override for other densities */ :root[uidensity="compact"] #navigator-toolbox{ @@ -55,6 +55,7 @@ Window controls will be all wrong without it #TabsToolbar{ margin-left: var(--uc-navigationbar-width); --tabs-navbar-shadow-size: 0px; + color: var(--toolbar-color); } #tabbrowser-tabs{ @@ -87,7 +88,7 @@ Window controls will be all wrong without it } :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-spacer[type="post-tabs"]{ - display: -moz-box !important; + display: flex !important; } .titlebar-spacer[type="post-tabs"]{ diff --git a/chrome/navbar_tabs_oneliner_tabs_on_left.css b/chrome/navbar_tabs_oneliner_tabs_on_left.css index 8b52634..1793b66 100644 --- a/chrome/navbar_tabs_oneliner_tabs_on_left.css +++ b/chrome/navbar_tabs_oneliner_tabs_on_left.css @@ -86,16 +86,20 @@ Window controls will be all wrong without it (-moz-gtk-csd-reversed-placement){ :root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{ width: var(--uc-window-drag-space-post) !important; - display: -moz-box !important; + display: flex !important; + } + #TabsToolbar > .titlebar-buttonbox-container{ + display: flex; } - #TabsToolbar > .titlebar-buttonbox-container{ display: -moz-box; } } @supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){ :root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{ width: var(--uc-window-drag-space-post) !important; - display: -moz-box !important; + display: flex !important; + } + #TabsToolbar > .titlebar-buttonbox-container{ + display: flex; } - #TabsToolbar > .titlebar-buttonbox-container{ display: -moz-box; } } /* 1px margin on touch density causes tabs to be too high */ diff --git a/chrome/newtab_button_always_on_hover.css b/chrome/newtab_button_always_on_hover.css index 8ae4dcd..b9e4bc9 100644 --- a/chrome/newtab_button_always_on_hover.css +++ b/chrome/newtab_button_always_on_hover.css @@ -3,8 +3,9 @@ See the above repository for updates as well as full license text. */ /* Always show tab close button on hover and never otherwise */ #tabbrowser-tabs #tabs-newtab-button{ - display:none; + display: none; } #tabbrowser-tabs:hover #tabs-newtab-button{ - display:-moz-box !important; + display: flex !important; + align-items: center; /* Fx < 112 compatibility */ } diff --git a/chrome/non_floating_sharp_tabs.css b/chrome/non_floating_sharp_tabs.css index f7e74cc..b42cc5b 100644 --- a/chrome/non_floating_sharp_tabs.css +++ b/chrome/non_floating_sharp_tabs.css @@ -42,7 +42,8 @@ See the above repository for updates as well as full license text. */ /* tabs newtab button needs some special styling... */ #tabs-newtab-button{ padding-inline: 0 !important; - -moz-box-align: stretch !important; + -moz-box-align: stretch !important; /* Fx < 112 compatibility */ + align-items: stretch !important; } /* We draw the icon as background-image to get correct scaling regardless of toolbar height */ #tabs-newtab-button > .toolbarbutton-icon{ @@ -98,7 +99,7 @@ See the above repository for updates as well as full license text. */ /* Line to mark selected tab */ .tab-background[selected]::before, .tabbrowser-tab:hover > stack > .tab-background::before{ - display: -moz-box; + display: flex; height: 2px; content: ""; } @@ -118,4 +119,8 @@ See the above repository for updates as well as full license text. */ .tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none } /* moves context-line to the bottom */ -.tab-context-line{ -moz-box-ordinal-group: 2; margin-inline: 10px !important; } +.tab-context-line{ + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; + margin-inline: 10px !important; +} \ No newline at end of file diff --git a/chrome/normal_pinned_tabs.css b/chrome/normal_pinned_tabs.css index d0a3928..71e6a39 100644 --- a/chrome/normal_pinned_tabs.css +++ b/chrome/normal_pinned_tabs.css @@ -6,16 +6,18 @@ See the above repository for updates as well as full license text. */ #tabbrowser-tabs{ padding-inline-start: 0px !important } .tabbrowser-tab{ - -moz-box-flex: 100; + flex-grow: 100; + -moz-box-flex: 100; /* Fx <112 compatibility */ max-width: 225px; min-width: var(--tab-min-width); width: 0; transition: min-width 100ms ease-out, max-width 100ms ease-out; margin-inline-start: 0px !important; position: initial !important; - display: -moz-box !important + display: flex !important } +.tab-stack{ flex-grow: 1 } /* Fx <112 compatibility */ .tabbrowser-tab[pinned] > .tab-stack{ border: none !important; } .tabbrowser-tab[pinned]::after{ position: static !important; margin-block: 0px 1px !important; } @@ -31,4 +33,4 @@ See the above repository for updates as well as full license text. */ #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]){ display: none !important; } /* Comment out or remove this if you want pinned tabs to never have close-button */ -.tab-close-button{ display: -moz-box !important; } +.tab-close-button{ display: flex !important; } diff --git a/chrome/overlay_menubar.css b/chrome/overlay_menubar.css index 8cad109..028bc28 100644 --- a/chrome/overlay_menubar.css +++ b/chrome/overlay_menubar.css @@ -23,10 +23,13 @@ See the above repository for updates as well as full license text. */ color: var(--arrowpanel-color); } -#menubar-items{ -moz-box-orient: horizontal !important; } +#menubar-items{ + -moz-box-orient: horizontal !important; /* Fx <112 compatibility */ + flex-direction: row !important; +} #menubar-items::after{ content: ""; - display: -moz-box; + display: flex; width: 30px; height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px)); background-image: linear-gradient(to right, var(--arrowpanel-background) 30%, transparent); diff --git a/chrome/selected_tab_gradient_border.css b/chrome/selected_tab_gradient_border.css index 2708c4b..5e1df86 100644 --- a/chrome/selected_tab_gradient_border.css +++ b/chrome/selected_tab_gradient_border.css @@ -12,7 +12,7 @@ See the above repository for updates as well as full license text. */ .tab-background[selected] > .tab-context-line{ margin: -5px 0 0 !important; } .tabbrowser-tab[selected] > .tab-stack::before{ content: ""; - display: -moz-box; + display: flex; min-height: inherit; border-radius: var(--tab-border-radius); grid-area: 1/1; diff --git a/chrome/show_toolbars_in_popup_windows.css b/chrome/show_toolbars_in_popup_windows.css index b9a5b2e..587249b 100644 --- a/chrome/show_toolbars_in_popup_windows.css +++ b/chrome/show_toolbars_in_popup_windows.css @@ -1,5 +1,5 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/show_toolbars_in_popup_windows.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -:root[chromehidden~="toolbar"] :is(.browser-toolbar,.chromeclass-toolbar-additional) { display: -moz-box } +:root[chromehidden~="toolbar"] :is(.browser-toolbar,.chromeclass-toolbar-additional) { display: flex } :root[chromehidden~="toolbar"] .browser-toolbar { visibility: visible } \ No newline at end of file diff --git a/chrome/status_inside_urlbar.css b/chrome/status_inside_urlbar.css index 275072c..1f44d96 100644 --- a/chrome/status_inside_urlbar.css +++ b/chrome/status_inside_urlbar.css @@ -26,7 +26,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi .urlbar-input-box::after{ z-index: 2; content: ""; - display: -moz-box; + display: flex; width: 100%; height: 100%; pointer-events:none; @@ -111,6 +111,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi #statuspanel-label{ text-align: center; -moz-box-pack: center; + justify-content: center; } .urlbar-input-box::after{ background-position-x: center !important; } */ diff --git a/chrome/status_inside_urlbar_v2.css b/chrome/status_inside_urlbar_v2.css index 81d6113..b64c7a4 100644 --- a/chrome/status_inside_urlbar_v2.css +++ b/chrome/status_inside_urlbar_v2.css @@ -73,6 +73,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi #statuspanel-label{ text-align: center; -moz-box-pack: center; + justify-content: center; } .urlbar-input-box::after{ background-position-x: center !important; } */ diff --git a/chrome/tab_close_button_always_on_hover.css b/chrome/tab_close_button_always_on_hover.css index 35837f9..22add02 100644 --- a/chrome/tab_close_button_always_on_hover.css +++ b/chrome/tab_close_button_always_on_hover.css @@ -6,5 +6,6 @@ See the above repository for updates as well as full license text. */ display:none; } .tabbrowser-tab:not([pinned]):hover .tab-close-button{ - display:-moz-box !important; + display: flex !important; + align-items: center; } \ No newline at end of file diff --git a/chrome/tab_line_loading_indicator.css b/chrome/tab_line_loading_indicator.css index f50e17d..283bb9a 100644 --- a/chrome/tab_line_loading_indicator.css +++ b/chrome/tab_line_loading_indicator.css @@ -7,7 +7,7 @@ See the above repository for updates as well as full license text. */ .tabbrowser-tab[busy] > .tab-stack > .tab-background::before, .tab-background[selected]::before{ content: ""; - display: -moz-box; + display: flex; height: 2px; background-color:transparent; background-repeat: no-repeat; @@ -23,4 +23,4 @@ See the above repository for updates as well as full license text. */ } .tab-throbber{ display: none } -.tab-icon-image[src]{ display: -moz-box } \ No newline at end of file +.tab-icon-image[src]{ display: block } \ No newline at end of file diff --git a/chrome/tab_loading_progress_bar.css b/chrome/tab_loading_progress_bar.css index 1131ecc..d3fffae 100644 --- a/chrome/tab_loading_progress_bar.css +++ b/chrome/tab_loading_progress_bar.css @@ -9,7 +9,7 @@ See the above repository for updates as well as full license text. */ } .tabbrowser-tab:is([busy],[bursting]) > .tab-stack > .tab-background::after{ content: ""; - display: -moz-box; + display: flex; height: 2px; background-color:transparent; background-repeat: no-repeat; @@ -30,4 +30,4 @@ See the above repository for updates as well as full license text. */ opacity: 0; } .tab-throbber{ display: none !important; } -.tab-icon-image[src]{ display: -moz-box !important; } +.tab-icon-image[src]{ display: block !important; } diff --git a/chrome/tab_loading_progress_throbber.css b/chrome/tab_loading_progress_throbber.css index 29b07da..1b8be09 100644 --- a/chrome/tab_loading_progress_throbber.css +++ b/chrome/tab_loading_progress_throbber.css @@ -10,7 +10,7 @@ See the above repository for updates as well as full license text. */ display: none !important; } .tab-icon-stack::before{ - display: -moz-box; + display: flex; grid-area: 1/1; content: ""; width:var(--tab-loader-size); diff --git a/chrome/tabs_animated_gradient_border.css b/chrome/tabs_animated_gradient_border.css index ae89f46..a3913ac 100644 --- a/chrome/tabs_animated_gradient_border.css +++ b/chrome/tabs_animated_gradient_border.css @@ -41,8 +41,8 @@ Thanks to /u/skenera on reddit for suggesting animating background position and } .scrollbox-clip[orient="horizontal"] > scrollbox::after{ content: ""; - display: -moz-box; - -moz-box-flex: 1 !important; + display: flex; + flex-grow: 1 !important; position: relative; background-color: var(--lwt-accent-color); margin-bottom: 1px; diff --git a/chrome/tabs_below_content.css b/chrome/tabs_below_content.css index 3ab8078..cd9e826 100644 --- a/chrome/tabs_below_content.css +++ b/chrome/tabs_below_content.css @@ -38,7 +38,7 @@ linux_gtk_window_control_patch.css /* Move tabs below content */ #main-window > body::after{ content: ""; - display: -moz-box; + display: flex; } #main-window:not([inFullscreen]) > body::after{ margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px)); diff --git a/chrome/tabs_on_bottom.css b/chrome/tabs_on_bottom.css index 697c3e2..6476f8a 100644 --- a/chrome/tabs_on_bottom.css +++ b/chrome/tabs_on_bottom.css @@ -34,7 +34,8 @@ have menubar permanently enabled and want it on top .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } #titlebar{ - -moz-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; /* Fx <112 compatibility */ + order: 2; -moz-appearance: none !important; --tabs-navbar-shadow-size: 0px; --uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */ @@ -42,13 +43,21 @@ have menubar permanently enabled and want it on top /* Re-order window and tab notification boxes */ #navigator-toolbox > div{ display: contents } .global-notificationbox, -#tab-notification-deck{ -moz-box-ordinal-group: 2 } +#tab-notification-deck{ + -moz-box-ordinal-group: 2; /* Fx <112 compatibility */ + order: 2; +} #TabsToolbar .titlebar-spacer{ display: none; } /* Also hide the toolbox bottom border which isn't at bottom with this setup */ #navigator-toolbox::after{ display: none !important; } -@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } } +@media (-moz-gtk-csd-close-button){ + .titlebar-button{ + -moz-box-orient: vertical; /* Fx <112 compatibility */ + flex-direction: column; + } +} /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { @@ -66,5 +75,8 @@ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } /* Uncomment the following if you want bookmarks toolbar to be below tabs */ /* -#PersonalToolbar{ -moz-box-ordinal-group: 2 } +#PersonalToolbar{ + -moz-box-ordinal-group: 2; + order: 2; +} */ diff --git a/chrome/textual_context_navigation.css b/chrome/textual_context_navigation.css index c28c5f0..dbfe4c2 100644 --- a/chrome/textual_context_navigation.css +++ b/chrome/textual_context_navigation.css @@ -9,6 +9,7 @@ See the above repository for updates as well as full license text. */ padding-block: 0.5em; padding-inline-start: 1em; -moz-box-pack: start !important; + justify-content: start !important; width: auto !important; } #context-navigation > menuitem[_moz-menuactive="true"]:not([disabled]){ background-color: -moz-menuhover !important; } diff --git a/chrome/textual_searchbar_one-offs.css b/chrome/textual_searchbar_one-offs.css index 6a789cb..d938771 100644 --- a/chrome/textual_searchbar_one-offs.css +++ b/chrome/textual_searchbar_one-offs.css @@ -4,8 +4,8 @@ See the above repository for updates as well as full license text. */ /* Makes the one-off search buttons in the searchbar popup show vertically with a label */ #PopupSearchAutoComplete .search-panel-one-offs{ - display: -moz-box !important; - -moz-box-orient: vertical; + display: flex !important; + flex-direction: column; } #PopupSearchAutoComplete .search-panel-one-offs-container{ @@ -13,10 +13,9 @@ See the above repository for updates as well as full license text. */ } #PopupSearchAutoComplete .searchbar-engine-one-off-item{ - display: -moz-box !important; + display: flex !important; margin-inline: 8px !important; - -moz-box-orient: horizontal; - -moz-box-align: center; + align-items: center; align-self: unset !important; } @@ -26,6 +25,6 @@ See the above repository for updates as well as full license text. */ #PopupSearchAutoComplete .searchbar-engine-one-off-item::after{ content: attr(tooltiptext); - display: -moz-inline-box; - -moz-box-flex: 1; + display: inline-flex; + flex-grow: 1; } \ No newline at end of file diff --git a/chrome/toolbarbuttons_icon+label.css b/chrome/toolbarbuttons_icon+label.css index 4ca9fb6..0505832 100644 --- a/chrome/toolbarbuttons_icon+label.css +++ b/chrome/toolbarbuttons_icon+label.css @@ -4,8 +4,10 @@ See the above repository for updates as well as full license text. */ /* Shows both icon and label for toolbarbuttons */ toolbar .toolbarbutton-1[label]{ - -moz-box-orient: vertical; - -moz-box-align: center !important; + -moz-box-orient: vertical; /* Fx <112 compatibility */ + flex-direction: column; + -moz-box-align: center !important; /* Fx <112 compatibility */ + align-items: center !important; } toolbar .toolbarbutton-1[label]:not([disabled]):hover{ background-color: var(--toolbarbutton-hover-background) !important; } @@ -21,12 +23,12 @@ toolbar .toolbarbutton-1[label] > .toolbarbutton-badge-stack{ } toolbar .toolbarbutton-1[label] > .toolbarbutton-text { - display: -moz-box !important; + display: flex !important; min-height: 16px !important; padding-top: 0px !important; background-color: transparent !important; overflow: hidden; - width: 12ch; + width: 11ch; } toolbar .toolbarbutton-1[label] > .toolbarbutton-text::before{ margin-inline: auto; diff --git a/chrome/toolbars_below_content.css b/chrome/toolbars_below_content.css index 3f197eb..d971482 100644 --- a/chrome/toolbars_below_content.css +++ b/chrome/toolbars_below_content.css @@ -15,11 +15,15 @@ See the above repository for updates as well as full license text. */ #browser, #customization-container, #tab-notification-deck{ - -moz-box-ordinal-group: 0 + -moz-box-ordinal-group: 0; /* Fx <112 compatibility */ + order: -1; } /* Remove the next row if you want tabs to be the top-most row */ - #titlebar{ -moz-box-ordinal-group: 2 } + #titlebar{ + -moz-box-ordinal-group: 2; /* Fx <112 compatibility */ + order: 2; + } #toolbar-menubar{ position: fixed; @@ -70,12 +74,12 @@ See the above repository for updates as well as full license text. */ #browser,#customization-container{ padding-top: var(--uc-menubar-spacer,28px) } */ - /* OR, if uncomment the following if you want menubar to appear below content, above tabs toolbar */ + /* OR, uncomment the following if you want menubar to appear below content, above tabs toolbar */ /* - #toolbar-menubar{ position: static; display: -moz-box; margin-top: 0px !important; background-color: transparent } + #toolbar-menubar{ position: static; display: flex; margin-top: 0px !important; background-color: transparent } */ - /* set to "reverse" (without quotes) if you want tabs above menubar with the above option */ - #titlebar{ -moz-box-direction: normal; } -} + /* set to "column-reverse" (without quotes) if you want tabs above menubar with the above option */ + #titlebar{ flex-direction: column } +} \ No newline at end of file diff --git a/chrome/urlbar_popup_full_width.css b/chrome/urlbar_popup_full_width.css index 144ea1c..84fb1b9 100644 --- a/chrome/urlbar_popup_full_width.css +++ b/chrome/urlbar_popup_full_width.css @@ -20,7 +20,7 @@ See the above repository for updates as well as full license text. */ #urlbar-container, #urlbar{ position: static !important; - display: -moz-box !important; + display: flex !important; } #urlbar{ height: auto !important; @@ -31,6 +31,13 @@ See the above repository for updates as well as full license text. */ --uc-urlbar-min-width: none; /* navbar_tabs_oneliner.css compatibility */ } +#urlbar, +#urlbar-background, +#urlbar-input-container, +.urlbarView{ + flex-grow: 1; /* Fx <112 compatibility */ +} + #urlbar[focused]{ box-shadow: inset 0 0 0 1px var(--toolbar-field-focus-border-color, highlight); } .urlbarView{ @@ -50,4 +57,4 @@ See the above repository for updates as well as full license text. */ /* This may seem pretty weird, but it gets around an issue where the height of urlbar may suddenly change when one starts typing into it */ /* If you are otherwise modifying the urlbar height then you might need to modify the height of this too */ -#urlbar > #urlbar-input-container::before{ content: ""; display: -moz-box; height: 24px; } \ No newline at end of file +#urlbar > #urlbar-input-container::before{ content: ""; display: flex; height: 24px; } \ No newline at end of file diff --git a/chrome/vertical_menubar.css b/chrome/vertical_menubar.css index 61d858d..80394da 100644 --- a/chrome/vertical_menubar.css +++ b/chrome/vertical_menubar.css @@ -30,18 +30,19 @@ See the above repository for updates as well as full license text. */ left: 0px; width: 100vw; } - .titlebar-spacer{ flex-grow: 1; } - :root[sizemode="normal"] :where(.titlebar-spacer){ display: -moz-box !important; } + + :root[sizemode="normal"] :where(.titlebar-spacer){ display: flex !important; } - #TabsToolbar > .toolbar-items{ max-width: calc(100vw - 138px) } + #TabsToolbar > .toolbar-items{ max-width: calc(100vw - 138px); flex-grow: 1 } #TabsToolbar > .titlebar-buttonbox-container{ - display: -moz-box !important; + display: flex !important; } #toolbar-menubar:not([customizing]){ margin-top: 40px; /* This needs to be bigger if bookmarks toolbar is shown */ width: var(--uc-vertical-menubar-width); -moz-box-orient: vertical; + flex-direction: column; flex-grow: 1; background-color: var(--lwt-accent-color); } @@ -56,6 +57,7 @@ See the above repository for updates as well as full license text. */ #toolbar-menubar:not([customizing]) #main-menubar{ -moz-box-orient: vertical; + flex-direction: column; margin-left: -40px; background-color: var(--lwt-accent-color); } diff --git a/chrome/vertical_popup_menubar.css b/chrome/vertical_popup_menubar.css index 6fb76fd..4e2e0ea 100644 --- a/chrome/vertical_popup_menubar.css +++ b/chrome/vertical_popup_menubar.css @@ -16,22 +16,21 @@ menubar > menu{visibility: collapse; transition: visibility 0ms linear 0.1s} menubar:hover > menu, #toolbar-menubar[autohide="true"]:not([inactive]) > #menubar-items > menubar > menu{visibility: visible} -#menubar-items{ +:root:not([customizing]) #menubar-items{ display: block; position: fixed; z-index: 10; background-color: var(--lwt-accent-color); inset-inline-start: 0; } -menubar{ -moz-box-orient: vertical; } +:root:not([customizing]) menubar{ + -moz-box-orient: vertical; /* Fx <112 compatibility */ + flex-direction: column; +} menubar > menu { padding: 3px } - menubar > menu > menupopup{ margin: calc(0px - var(--uc-menubaritem-height)) 0 0 var(--uc-menubaritem-width) } -#toolbar-menubar[autohide="true"][inactive] > #menubar-items{ max-height: 0px; overflow: -moz-hidden-unscrollable } - - +#toolbar-menubar[autohide="true"][inactive] > #menubar-items{ max-height: 0px; overflow: hidden } #toolbar-menubar[autohide="true"]:not([inactive]){ margin-bottom: -32px } - #toolbar-menubar > .titlebar-buttonbox-container + :is(toolbarbutton,toolbaritem){ margin-inline-start: var(--uc-menubaritem-width) } #file-menu{ diff --git a/chrome/window_control_placeholder_support.css b/chrome/window_control_placeholder_support.css index 3a78051..086e8bf 100644 --- a/chrome/window_control_placeholder_support.css +++ b/chrome/window_control_placeholder_support.css @@ -80,7 +80,12 @@ See the above repository for updates as well as full license text. */ } :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, :root[sizemode="fullscreen"] #window-controls{ right: unset; } - .titlebar-buttonbox-container{ -moz-box-ordinal-group: 0 !important; } - .titlebar-buttonbox{ -moz-box-direction: reverse } + .titlebar-buttonbox-container{ + -moz-box-ordinal-group: 0 !important; /* Fx <112 compatibility */ + order: -1 !important; + } + .titlebar-buttonbox{ + -moz-box-direction: reverse; /* Fx <112 compatibility */ + flex-direction: row-reverse; + } } -