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.
This commit is contained in:
MrOtherGuy 2023-03-11 12:26:07 +02:00
parent 0db37c5d77
commit 0ff12e01fe
47 changed files with 262 additions and 137 deletions

View file

@ -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;

View file

@ -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,

View file

@ -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;

View file

@ -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,

View file

@ -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;

View file

@ -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 }

View file

@ -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; }

View file

@ -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;
}

View file

@ -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;

View file

@ -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,

View file

@ -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;

View file

@ -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);

View file

@ -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 }

View file

@ -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]{

View file

@ -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;
}

View file

@ -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 }

View file

@ -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) }

View file

@ -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; }

View file

@ -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;
}

View file

@ -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,

View file

@ -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;
}

View file

@ -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 }

View file

@ -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"]{

View file

@ -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 */

View file

@ -6,5 +6,6 @@ See the above repository for updates as well as full license text. */
display: none;
}
#tabbrowser-tabs:hover #tabs-newtab-button{
display:-moz-box !important;
display: flex !important;
align-items: center; /* Fx < 112 compatibility */
}

View file

@ -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;
}

View file

@ -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; }

View file

@ -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);

View file

@ -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;

View file

@ -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 }

View file

@ -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; }
*/

View file

@ -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; }
*/

View file

@ -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;
}

View file

@ -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 }
.tab-icon-image[src]{ display: block }

View file

@ -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; }

View file

@ -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);

View file

@ -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;

View file

@ -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));

View file

@ -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;
}
*/

View file

@ -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; }

View file

@ -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;
}

View file

@ -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;

View file

@ -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 }
}

View file

@ -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; }
#urlbar > #urlbar-input-container::before{ content: ""; display: flex; height: 24px; }

View file

@ -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; }
#TabsToolbar > .toolbar-items{ max-width: calc(100vw - 138px) }
:root[sizemode="normal"] :where(.titlebar-spacer){ display: flex !important; }
#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);
}

View file

@ -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{

View file

@ -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;
}
}