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

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