mobile-config-firefox/chrome/window_control_placeholder_support.css
MrOtherGuy 0ff12e01fe 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.
2023-03-11 12:26:07 +02:00

91 lines
3.6 KiB
CSS

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/window_control_placeholder_support.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Creates placeholders for window controls */
/* This is a supporting file used by other stylesheets */
/* This stylesheet is pretty much unnecessary if window titlebar is enabled */
/* This file should preferably be imported before other stylesheets */
/* Defaults for window controls on RIGHT side of the window */
/* Modify these values to match your preferences */
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 138px; /* Space reserved for window controls (Win10) */
/* Extra space reserved on both sides of the nav-bar to be able to drag the window */
--uc-window-drag-space-pre: 30px; /* left side*/
--uc-window-drag-space-post: 30px; /* right side*/
}
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
--uc-window-drag-space-pre: 0px; /* Remove pre space */
}
@media (-moz-platform: windows-win7),
(-moz-platform: windows-win8),
(-moz-os-version: windows-win7),
(-moz-os-version: windows-win8){
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
--uc-window-control-width: 105px;
}
}
@media (-moz-gtk-csd-available) {
:root:is([tabsintitlebar],[sizemode="fullscreen"]) {
--uc-window-control-width: 84px;
}
}
@media (-moz-platform: macos){
:root:is([tabsintitlebar],[sizemode="fullscreen"]) {
--uc-window-control-width: 72px;
}
}
.titlebar-buttonbox, #window-controls{ color: var(--toolbar-color) }
:root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none }
:root[sizemode="fullscreen"] #navigator-toolbox { position: relative; }
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls{
position: absolute;
display: flex;
top: 0;
right:0;
height: 40px;
}
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls{ height: 32px }
#nav-bar{
border-inline: var(--uc-window-drag-space-pre,0px) solid var(--toolbar-bgcolor);
border-inline-style: solid !important;
border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px));
}
/* Rules for window controls on left layout */
@media (-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
:root[tabsintitlebar="true"] #nav-bar{
border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
}
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
:root[sizemode="fullscreen"] #window-controls{ right: unset }
}
/* This pref can be used to force window controls on left even if that is not normal behavior on your OS */
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
:root[tabsintitlebar="true"] #nav-bar{
border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px)
}
: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; /* Fx <112 compatibility */
order: -1 !important;
}
.titlebar-buttonbox{
-moz-box-direction: reverse; /* Fx <112 compatibility */
flex-direction: row-reverse;
}
}