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:
parent
0db37c5d77
commit
0ff12e01fe
47 changed files with 262 additions and 137 deletions
|
@ -34,14 +34,10 @@ See the above repository for updates as well as full license text. */
|
||||||
#sidebar-header::before,
|
#sidebar-header::before,
|
||||||
#sidebar-header::after{
|
#sidebar-header::after{
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar-switcher-target{
|
|
||||||
-moz-box-pack: start !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar-header,
|
#sidebar-header,
|
||||||
#sidebar{
|
#sidebar{
|
||||||
transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
|
transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
|
||||||
|
|
|
@ -3,12 +3,14 @@ See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
.tab-label-container{
|
.tab-label-container{
|
||||||
display: grid;
|
display: grid;
|
||||||
justify-content: safe center;
|
justify-content: safe center; /* Fx <112 compatibility */
|
||||||
align-items: safe center;
|
align-items: safe center; /* Fx <112 compatibility */
|
||||||
|
align-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-secondary-label{
|
.tab-secondary-label{
|
||||||
-moz-box-pack: center;
|
-moz-box-pack: center; /* Fx <112 compatibility */
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-label,
|
.tab-label,
|
||||||
|
|
|
@ -13,9 +13,19 @@ See the above repository for updates as well as full license text. */
|
||||||
--uc-fx-button-sec-color: #ffdfbf85;
|
--uc-fx-button-sec-color: #ffdfbf85;
|
||||||
}
|
}
|
||||||
|
|
||||||
#PanelUI-button{ -moz-box-ordinal-group: 0; margin-inline: 2px var(--uc-window-drag-space-pre,24px) !important; }
|
#PanelUI-button{
|
||||||
:root[tabsintitlebar] #nav-bar{ border-left-width: 0px; padding-left: 0px !important; }
|
-moz-box-ordinal-group: 0; /* Fx <112 compatibility */
|
||||||
#PanelUI-menu-button{ -moz-box-align: start !important; }
|
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{
|
#PanelUI-menu-button > stack{
|
||||||
background-color: var(--uc-fx-button-color);
|
background-color: var(--uc-fx-button-color);
|
||||||
background-image: linear-gradient(var(--uc-fx-button-sec-color), transparent) !important;
|
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;
|
border: 1px groove black;
|
||||||
outline: 1px solid #cdd8e4;
|
outline: 1px solid #cdd8e4;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
padding: 4px 10px !important;
|
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{
|
#PanelUI-menu-button > stack::before{
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
content: "Firefox"; /* Change text here */
|
content: "Firefox"; /* Change text here */
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 0 0 2px black;
|
text-shadow: 0 0 2px black;
|
||||||
|
|
|
@ -29,8 +29,13 @@ See the above repository for updates as well as full license text. */
|
||||||
height: 76px;
|
height: 76px;
|
||||||
flex-grow:1;
|
flex-grow:1;
|
||||||
}
|
}
|
||||||
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > .toolbarbutton-icon{ -moz-box-flex: 1 }
|
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > .toolbarbutton-icon{
|
||||||
#appMenu-protonMainView > .panel-subview-body > toolbarbutton{ -moz-box-orient: vertical }
|
-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{
|
:where(#appMenu-protonMainView) > .panel-subview-body > toolbarbutton.subviewbutton{
|
||||||
padding-inline: 4px !important;
|
padding-inline: 4px !important;
|
||||||
|
@ -38,20 +43,28 @@ See the above repository for updates as well as full license text. */
|
||||||
fill: currentColor;
|
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 */
|
/* Unique styling for Edit and Zoom controls */
|
||||||
|
|
||||||
#appMenu-zoom-controls2,
|
#appMenu-zoom-controls,
|
||||||
#appMenu-zoom-controls2 + toolbarseparator{
|
#appMenu-zoom-controls + toolbarseparator{
|
||||||
order: -1;
|
order: -1;
|
||||||
height: initial !important;
|
height: initial !important;
|
||||||
margin: initial !important;
|
margin: initial !important;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
#appMenu-zoom-controls2 + toolbarseparator{ margin-block: 0 4px !important; }
|
#appMenu-zoom-controls + toolbarseparator{ margin-block: 0 4px !important; }
|
||||||
#appMenu-zoom-controls2{ padding-block: 2px !important; }
|
#appMenu-zoom-controls{ padding-block: 2px !important; }
|
||||||
#appMenu-zoom-controls2 > :not(:last-child){
|
#appMenu-zoom-controls > :not(:last-child){
|
||||||
-moz-box-flex: 1 !important;
|
-moz-box-flex: 1 !important; /* Fx <112 compatibility */
|
||||||
-moz-box-pack: center !important;
|
-moz-box-pack: center !important; /* Fx <112 compatibility */
|
||||||
|
flex-grow: 1 !important;
|
||||||
|
justify-content: center !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
#appMenu-zoomReset-button2{
|
#appMenu-zoomReset-button2{
|
||||||
|
@ -102,9 +115,9 @@ See the above repository for updates as well as full license text. */
|
||||||
#appMenu-proton-update-banner,
|
#appMenu-proton-update-banner,
|
||||||
#appMenu-quit-button2.subviewbutton{ order: 4 }
|
#appMenu-quit-button2.subviewbutton{ order: 4 }
|
||||||
|
|
||||||
|
#appMenu-more-button2 > .toolbarbutton-icon{
|
||||||
#appMenu-more-button2{ min-width: 170px }
|
-moz-box-flex: 0 !important;
|
||||||
#appMenu-more-button2 > .toolbarbutton-icon{ -moz-box-flex: 0 !important; }
|
}
|
||||||
/* Color styling for items */
|
/* Color styling for items */
|
||||||
|
|
||||||
#appMenu-protonMainView > .panel-subview-body toolbarbutton:not([disabled]):hover{
|
#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-fxa-text,
|
||||||
#appMenu-help-button2 + toolbarseparator,
|
#appMenu-help-button2 + toolbarseparator,
|
||||||
#appMenu-new-private-window-button2 + toolbarseparator,
|
#appMenu-new-private-window-button2 + toolbarseparator,
|
||||||
#appMenu-zoom-controls2 > #appMenu-fullscreen-button > label,
|
#appMenu-zoom-controls > #appMenu-fullscreen-button > label,
|
||||||
#appMenu-zoom-controls2 > label,
|
#appMenu-zoom-controls > label,
|
||||||
#appMenu-zoom-controls2 > spacer,
|
#appMenu-zoom-controls > spacer,
|
||||||
#appMenu-edit-controls2 > label,
|
#appMenu-edit-controls2 > label,
|
||||||
#appMenu-edit-controls2 > spacer,
|
#appMenu-edit-controls2 > spacer,
|
||||||
#appMenu-protonMainView > .panel-subview-body > toolbarbutton::after{ display: none !important; }
|
#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{
|
#appMenu-fxa-status2{
|
||||||
display: grid !important;
|
display: grid !important;
|
||||||
padding-block: 0 !important;
|
padding-block: 0 !important;
|
||||||
|
justify-content: stretch !important;
|
||||||
}
|
}
|
||||||
#appMenu-fxa-status2 > *{ grid-area: 1/1 }
|
#appMenu-fxa-status2 > *{ grid-area: 1/1 }
|
||||||
#appMenu-fxa-status2 > toolbarbutton::before,
|
#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{
|
#appMenu-fxa-status2 > toolbarbutton::before{
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
content: "";
|
content: "";
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
@ -165,11 +179,19 @@ See the above repository for updates as well as full license text. */
|
||||||
#appMenu-quit-button2{
|
#appMenu-quit-button2{
|
||||||
background-color: var(--button-bgcolor) !important;
|
background-color: var(--button-bgcolor) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
-moz-box-orient: horizontal !important;
|
-moz-box-orient: horizontal !important; /* Fx <112 compatibility */
|
||||||
-moz-box-pack: center !important;
|
-moz-box-pack: center !important; /* Fx <112 compatibility */
|
||||||
|
flex-direction: row !important;
|
||||||
|
justify-content: center !important;
|
||||||
padding-block: 12px !important;
|
padding-block: 12px !important;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#appMenu-more-button2{
|
||||||
|
min-width: 170px;
|
||||||
|
justify-content: start !important;
|
||||||
|
}
|
||||||
|
|
||||||
#appMenu-proton-update-banner:hover,
|
#appMenu-proton-update-banner:hover,
|
||||||
#appMenu-fxa-label2:hover,
|
#appMenu-fxa-label2:hover,
|
||||||
#appMenu-more-button2:hover,
|
#appMenu-more-button2:hover,
|
||||||
|
|
|
@ -14,7 +14,8 @@ See the above repository for updates as well as full license text. */
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
.tab-close-button{
|
.tab-close-button{
|
||||||
-moz-box-ordinal-group: 0;
|
-moz-box-ordinal-group: 0; /* Firefox <112 compatibility */
|
||||||
|
order: -1;
|
||||||
display: -moz-box !important;
|
display: -moz-box !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-inline: -4px -20px !important;
|
margin-inline: -4px -20px !important;
|
||||||
|
|
|
@ -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){
|
@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; }
|
: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 }
|
#navigator-toolbox{ --tab-min-height: 40px }
|
||||||
|
|
|
@ -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 ? */
|
/* 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"){
|
@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,
|
.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 }
|
.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; }
|
.tabbrowser-tab > .tab-stack::before{ transform: scaleY(-1) !important; }
|
||||||
|
|
|
@ -21,7 +21,7 @@ See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
:root:not([inFullscreen]) > body::after{
|
:root:not([inFullscreen]) > body::after{
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important;
|
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; }
|
#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{
|
#PersonalToolbar > toolbarspring{
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
@ -84,7 +87,7 @@ See the above repository for updates as well as full license text. */
|
||||||
.browserStack > #statuspanel[inactive]::before,
|
.browserStack > #statuspanel[inactive]::before,
|
||||||
#statuspanel[inactive] > #statuspanel-inner::before{
|
#statuspanel[inactive] > #statuspanel-inner::before{
|
||||||
content: "Done";
|
content: "Done";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
color: var(--toolbar-field-color, black) !important;
|
color: var(--toolbar-field-color, black) !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,8 @@ See the above repository for updates as well as full license text. */
|
||||||
*/
|
*/
|
||||||
|
|
||||||
findbar{
|
findbar{
|
||||||
-moz-box-ordinal-group: 0;
|
-moz-box-ordinal-group: 0; /* Fx <112 compatibility */
|
||||||
|
order: -1;
|
||||||
margin-bottom: -33px;
|
margin-bottom: -33px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-top: none !important;
|
border-top: none !important;
|
||||||
|
@ -43,10 +44,11 @@ findbar > .findbar-container{
|
||||||
}
|
}
|
||||||
|
|
||||||
.findbar-find-status{
|
.findbar-find-status{
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
-moz-box-flex: 1;
|
-moz-box-flex: 1; /* Fx <112 compatibility */
|
||||||
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.findbar-closebutton{
|
.findbar-closebutton{
|
||||||
|
@ -54,7 +56,8 @@ findbar > .findbar-container{
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
padding: 5px !important;
|
padding: 5px !important;
|
||||||
width: initial !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 > image{ padding: 3px }
|
||||||
.findbar-closebutton:hover > image{
|
.findbar-closebutton:hover > image{
|
||||||
|
@ -65,16 +68,19 @@ findbar > .findbar-container > hbox{ margin: 0 5px }
|
||||||
|
|
||||||
findbar::after{
|
findbar::after{
|
||||||
content:"";
|
content:"";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
-moz-box-flex: 100;
|
-moz-box-flex: 100; /* Fx <112 compatibility */
|
||||||
|
flex-grow: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports -moz-bool-pref("userchrome.floating-findbar-on-right.enabled"){
|
@supports -moz-bool-pref("userchrome.floating-findbar-on-right.enabled"){
|
||||||
findbar{
|
findbar{
|
||||||
-moz-box-direction: reverse;
|
-moz-box-direction: reverse; /* Fx <112 compatibility */
|
||||||
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
findbar > .findbar-container{
|
findbar > .findbar-container{
|
||||||
-moz-box-direction: reverse;
|
-moz-box-direction: reverse;
|
||||||
|
flex-direction: row-reverse;
|
||||||
border-inline-width: 1px 0px;
|
border-inline-width: 1px 0px;
|
||||||
border-bottom-right-radius: 0px;
|
border-bottom-right-radius: 0px;
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
|
|
|
@ -26,11 +26,13 @@ See the above repository for updates as well as full license text. */
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
}
|
}
|
||||||
spacer[part="overflow-start-indicator"]{
|
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;
|
margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important;
|
||||||
}
|
}
|
||||||
spacer[part="overflow-end-indicator"]{
|
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,
|
#scrollbutton-down[disabled="true"] > .toolbarbutton-icon,
|
||||||
|
|
|
@ -39,8 +39,10 @@ Window controls will be all wrong without it
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
|
:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
|
||||||
-moz-box-flex: 1;
|
-moz-box-flex: 1; /* Fx < 112 compatibility */
|
||||||
-moz-box-align: stretch;
|
flex-grow: 1;
|
||||||
|
-moz-box-align: stretch; /* Fx < 112 compatibility */
|
||||||
|
align-items: stretch;
|
||||||
background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
|
background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-right: 30px solid transparent;
|
border-right: 30px solid transparent;
|
||||||
|
|
|
@ -42,7 +42,8 @@ This will NOT work correctly if you have hidden tabs such as with tab groups ext
|
||||||
}
|
}
|
||||||
@media (-moz-platform: linux){
|
@media (-moz-platform: linux){
|
||||||
#TabsToolbar .titlebar-buttonbox{
|
#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{
|
#TabsToolbar > .titlebar-buttonbox-container > .titlebar-buttonbox > .titlebar-button{
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
|
|
|
@ -31,7 +31,8 @@ Window controls will be all wrong without it
|
||||||
|
|
||||||
#TabsToolbar > .titlebar-spacer[type="post-tabs"]{
|
#TabsToolbar > .titlebar-spacer[type="post-tabs"]{
|
||||||
width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) !important;
|
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 }
|
#toolbar-menubar > spacer{ pointer-events: none }
|
||||||
|
|
||||||
|
|
|
@ -5,10 +5,13 @@ See the above repository for updates as well as full license text. */
|
||||||
display: none
|
display: none
|
||||||
}
|
}
|
||||||
.tab-icon-image:not([src]){
|
.tab-icon-image:not([src]){
|
||||||
display: -moz-box !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
.tab-icon-stack > *{ margin-inline: 0 !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; }
|
.tabbrowser-tab[fadein]{ min-width: calc(16px + 2 * 10px + 4px) !important; }
|
||||||
:root[uidensity="compact"] .tabbrowser-tab[fadein]{
|
:root[uidensity="compact"] .tabbrowser-tab[fadein]{
|
||||||
|
|
|
@ -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") }
|
#appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") }
|
||||||
/* Use account-button icon for signed in sync item */
|
/* Use account-button icon for signed in sync item */
|
||||||
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{
|
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
content: "";
|
content: "";
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 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 */
|
/* Add somewhat hacky separator to zoom controls so it looks consistent */
|
||||||
#appMenu-protonMainView > .panel-subview-body::after{
|
#appMenu-protonMainView > .panel-subview-body::after{
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
border-bottom: 1px solid var(--panel-separator-color);
|
border-bottom: 1px solid var(--panel-separator-color);
|
||||||
margin: var(--panel-separator-margin);
|
margin: var(--panel-separator-margin);
|
||||||
}
|
}
|
||||||
|
|
||||||
#appMenu-find-button2 ~ *{
|
#appMenu-find-button2 ~ *{
|
||||||
-moz-box-ordinal-group: 2;
|
-moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
|
||||||
|
order: 2;
|
||||||
}
|
}
|
|
@ -20,7 +20,7 @@ See the above repository for updates as well as full license text. */
|
||||||
.tab-secondary-label{ display: none }
|
.tab-secondary-label{ display: none }
|
||||||
|
|
||||||
/* show the secondary label when video is in PiP */
|
/* 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 */
|
/* These exist for compatibility with combined_favicon_and_tab_close_button.css */
|
||||||
.tab-icon-overlay{ pointer-events: auto }
|
.tab-icon-overlay{ pointer-events: auto }
|
||||||
|
|
|
@ -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*/
|
/* 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 */
|
/* 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 {
|
.titlebar-button {
|
||||||
-moz-appearance: none !important;
|
-moz-appearance: none !important;
|
||||||
-moz-context-properties: fill, stroke, fill-opacity;
|
-moz-context-properties: fill, stroke, fill-opacity;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
padding: 4px 6px !important;
|
padding: 4px 6px !important;
|
||||||
-moz-box-flex: 1;
|
-moz-box-flex: 1;
|
||||||
|
flex-grow: 1;
|
||||||
overflow: -moz-hidden-unscrollable;
|
overflow: -moz-hidden-unscrollable;
|
||||||
}
|
}
|
||||||
.titlebar-button:hover{ background-color: rgba(0,0,0,0.1) }
|
.titlebar-button:hover{ background-color: rgba(0,0,0,0.1) }
|
||||||
|
|
|
@ -6,7 +6,11 @@ See the above repository for updates as well as full license text. */
|
||||||
#navigator-toolbox{ --uc-menubar-height: 34px; }
|
#navigator-toolbox{ --uc-menubar-height: 34px; }
|
||||||
:root[uidensity="compact"] #navigator-toolbox{ --uc-menubar-height: 30px }
|
: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{
|
#toolbar-menubar{
|
||||||
margin-bottom: calc(0px - var(--uc-menubar-height));
|
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{
|
#menubar-items{
|
||||||
-moz-box-pack: center;
|
-moz-box-pack: center; /* Fx <112 compatibility */
|
||||||
|
justify-content: center;
|
||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
|
color: var(--toolbar-color);
|
||||||
}
|
}
|
||||||
/* Adjust to fit menubar items - 300px works for English locale */
|
/* Adjust to fit menubar items - 300px works for English locale */
|
||||||
#nav-bar{ padding-left: 300px; }
|
#nav-bar{ padding-left: 300px; }
|
||||||
|
|
||||||
#toolbar-menubar > .titlebar-buttonbox-container{ display: none }
|
#toolbar-menubar > .titlebar-buttonbox-container{ display: none }
|
||||||
:root[tabsintitlebar][sizemode="normal"] .titlebar-spacer,
|
: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; }
|
||||||
|
|
|
@ -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
|
/* 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. */
|
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 > .titlebar-buttonbox-container,
|
||||||
#toolbar-menubar > spacer{ display: none; }
|
#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 }
|
:root:not([customizing]) #toolbar-menubar[autohide][inactive]{ max-width: 0 }
|
||||||
|
|
||||||
#TabsToolbar > .titlebar-buttonbox-container{
|
#TabsToolbar > .titlebar-buttonbox-container{
|
||||||
display: -moz-box !important;
|
display: flex !important;
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -73,7 +73,8 @@ See the above repository for updates as well as full license text. */
|
||||||
#tabs-newtab-button{ margin-bottom: 0 !important; }
|
#tabs-newtab-button{ margin-bottom: 0 !important; }
|
||||||
|
|
||||||
#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
|
#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,
|
#alltabs-button,
|
||||||
|
|
|
@ -42,7 +42,8 @@ See the above repository for updates as well as full license text. */
|
||||||
:root{ border-top-width: 0px !important }
|
:root{ border-top-width: 0px !important }
|
||||||
|
|
||||||
#navigator-toolbox-background{
|
#navigator-toolbox-background{
|
||||||
-moz-box-ordinal-group: 2;
|
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */
|
||||||
|
order: 2;
|
||||||
border-bottom: 0px !important;
|
border-bottom: 0px !important;
|
||||||
}
|
}
|
||||||
#navigator-toolbox{
|
#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 */
|
/* Re-order window and tab notification boxes */
|
||||||
#navigator-toolbox > div{ display: contents }
|
#navigator-toolbox > div{ display: contents }
|
||||||
.global-notificationbox,
|
.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 */
|
#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 }
|
#menubar-items + spacer{ flex-grow: 1 }
|
||||||
|
|
||||||
#toolbar-menubar > #menubar-items{
|
#toolbar-menubar > #menubar-items{
|
||||||
-moz-box-pack: center;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 */
|
/* 20px wide space on left and right to be able to drag the window */
|
||||||
#TabsToolbar{ margin: 0 20px; }
|
#TabsToolbar{ margin: 0 20px; }
|
||||||
|
|
||||||
#titlebar{ -moz-box-direction: reverse; }
|
#titlebar{
|
||||||
|
-moz-box-direction: reverse; /* Fx <112 compatibility */
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
#toolbar-menubar{
|
#toolbar-menubar{
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin-bottom: -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; }
|
:root[tabsintitlebar] #nav-bar{ padding-right: 138px; margin-left: 30px; }
|
||||||
#toolbar-menubar > #menubar-items{
|
#toolbar-menubar > #menubar-items{
|
||||||
position: relative;
|
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);
|
background-image: linear-gradient( to left,transparent,var(--toolbar-bgcolor) 35px);
|
||||||
|
color: var(--toolbar-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-menubar:last-child{ padding-inline-end: 40px }
|
#main-menubar:last-child{ padding-inline-end: 40px }
|
||||||
|
|
|
@ -24,10 +24,10 @@ Window controls will be all wrong without it
|
||||||
|
|
||||||
/* reserved space for overflow + menu buttons */
|
/* reserved space for overflow + menu buttons */
|
||||||
#navigator-toolbox{
|
#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{
|
#nav-bar:not([nonemptyoverflow="true"]) > #nav-bar-customization-target{
|
||||||
--uc-buttons-width: calc(28px + 2 * var(--toolbarbutton-outer-padding) + 6px)
|
--uc-buttons-width: calc(64px + 4 * var(--toolbarbutton-outer-padding) + 6px)
|
||||||
}
|
}
|
||||||
/* Override for other densities */
|
/* Override for other densities */
|
||||||
:root[uidensity="compact"] #navigator-toolbox{
|
:root[uidensity="compact"] #navigator-toolbox{
|
||||||
|
@ -55,6 +55,7 @@ Window controls will be all wrong without it
|
||||||
#TabsToolbar{
|
#TabsToolbar{
|
||||||
margin-left: var(--uc-navigationbar-width);
|
margin-left: var(--uc-navigationbar-width);
|
||||||
--tabs-navbar-shadow-size: 0px;
|
--tabs-navbar-shadow-size: 0px;
|
||||||
|
color: var(--toolbar-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabbrowser-tabs{
|
#tabbrowser-tabs{
|
||||||
|
@ -87,7 +88,7 @@ Window controls will be all wrong without it
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-spacer[type="post-tabs"]{
|
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-spacer[type="post-tabs"]{
|
||||||
display: -moz-box !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titlebar-spacer[type="post-tabs"]{
|
.titlebar-spacer[type="post-tabs"]{
|
||||||
|
|
|
@ -86,16 +86,20 @@ Window controls will be all wrong without it
|
||||||
(-moz-gtk-csd-reversed-placement){
|
(-moz-gtk-csd-reversed-placement){
|
||||||
:root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{
|
:root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{
|
||||||
width: var(--uc-window-drag-space-post) !important;
|
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"){
|
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
|
||||||
:root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{
|
:root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{
|
||||||
width: var(--uc-window-drag-space-post) !important;
|
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 */
|
/* 1px margin on touch density causes tabs to be too high */
|
||||||
|
|
|
@ -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 */
|
/* Always show tab close button on hover and never otherwise */
|
||||||
#tabbrowser-tabs #tabs-newtab-button{
|
#tabbrowser-tabs #tabs-newtab-button{
|
||||||
display:none;
|
display: none;
|
||||||
}
|
}
|
||||||
#tabbrowser-tabs:hover #tabs-newtab-button{
|
#tabbrowser-tabs:hover #tabs-newtab-button{
|
||||||
display:-moz-box !important;
|
display: flex !important;
|
||||||
|
align-items: center; /* Fx < 112 compatibility */
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 needs some special styling... */
|
||||||
#tabs-newtab-button{
|
#tabs-newtab-button{
|
||||||
padding-inline: 0 !important;
|
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 */
|
/* We draw the icon as background-image to get correct scaling regardless of toolbar height */
|
||||||
#tabs-newtab-button > .toolbarbutton-icon{
|
#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 */
|
/* Line to mark selected tab */
|
||||||
.tab-background[selected]::before,
|
.tab-background[selected]::before,
|
||||||
.tabbrowser-tab:hover > stack > .tab-background::before{
|
.tabbrowser-tab:hover > stack > .tab-background::before{
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
content: "";
|
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 }
|
.tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
|
||||||
|
|
||||||
/* moves context-line to the bottom */
|
/* 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;
|
||||||
|
}
|
|
@ -6,16 +6,18 @@ See the above repository for updates as well as full license text. */
|
||||||
#tabbrowser-tabs{ padding-inline-start: 0px !important }
|
#tabbrowser-tabs{ padding-inline-start: 0px !important }
|
||||||
|
|
||||||
.tabbrowser-tab{
|
.tabbrowser-tab{
|
||||||
-moz-box-flex: 100;
|
flex-grow: 100;
|
||||||
|
-moz-box-flex: 100; /* Fx <112 compatibility */
|
||||||
max-width: 225px;
|
max-width: 225px;
|
||||||
min-width: var(--tab-min-width);
|
min-width: var(--tab-min-width);
|
||||||
width: 0;
|
width: 0;
|
||||||
transition: min-width 100ms ease-out, max-width 100ms ease-out;
|
transition: min-width 100ms ease-out, max-width 100ms ease-out;
|
||||||
margin-inline-start: 0px !important;
|
margin-inline-start: 0px !important;
|
||||||
position: initial !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] > .tab-stack{ border: none !important; }
|
||||||
.tabbrowser-tab[pinned]::after{ position: static !important; margin-block: 0px 1px !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; }
|
#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 */
|
/* 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; }
|
||||||
|
|
|
@ -23,10 +23,13 @@ See the above repository for updates as well as full license text. */
|
||||||
color: var(--arrowpanel-color);
|
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{
|
#menubar-items::after{
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
|
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
|
||||||
background-image: linear-gradient(to right, var(--arrowpanel-background) 30%, transparent);
|
background-image: linear-gradient(to right, var(--arrowpanel-background) 30%, transparent);
|
||||||
|
|
|
@ -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; }
|
.tab-background[selected] > .tab-context-line{ margin: -5px 0 0 !important; }
|
||||||
.tabbrowser-tab[selected] > .tab-stack::before{
|
.tabbrowser-tab[selected] > .tab-stack::before{
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
min-height: inherit;
|
min-height: inherit;
|
||||||
border-radius: var(--tab-border-radius);
|
border-radius: var(--tab-border-radius);
|
||||||
grid-area: 1/1;
|
grid-area: 1/1;
|
||||||
|
|
|
@ -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
|
/* 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. */
|
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 }
|
:root[chromehidden~="toolbar"] .browser-toolbar { visibility: visible }
|
|
@ -26,7 +26,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi
|
||||||
.urlbar-input-box::after{
|
.urlbar-input-box::after{
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
pointer-events:none;
|
pointer-events:none;
|
||||||
|
@ -111,6 +111,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi
|
||||||
#statuspanel-label{
|
#statuspanel-label{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
-moz-box-pack: center;
|
-moz-box-pack: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.urlbar-input-box::after{ background-position-x: center !important; }
|
.urlbar-input-box::after{ background-position-x: center !important; }
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -73,6 +73,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi
|
||||||
#statuspanel-label{
|
#statuspanel-label{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
-moz-box-pack: center;
|
-moz-box-pack: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.urlbar-input-box::after{ background-position-x: center !important; }
|
.urlbar-input-box::after{ background-position-x: center !important; }
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -6,5 +6,6 @@ See the above repository for updates as well as full license text. */
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
.tabbrowser-tab:not([pinned]):hover .tab-close-button{
|
.tabbrowser-tab:not([pinned]):hover .tab-close-button{
|
||||||
display:-moz-box !important;
|
display: flex !important;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
|
@ -7,7 +7,7 @@ See the above repository for updates as well as full license text. */
|
||||||
.tabbrowser-tab[busy] > .tab-stack > .tab-background::before,
|
.tabbrowser-tab[busy] > .tab-stack > .tab-background::before,
|
||||||
.tab-background[selected]::before{
|
.tab-background[selected]::before{
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background-color:transparent;
|
background-color:transparent;
|
||||||
background-repeat: no-repeat;
|
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-throbber{ display: none }
|
||||||
.tab-icon-image[src]{ display: -moz-box }
|
.tab-icon-image[src]{ display: block }
|
|
@ -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{
|
.tabbrowser-tab:is([busy],[bursting]) > .tab-stack > .tab-background::after{
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background-color:transparent;
|
background-color:transparent;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -30,4 +30,4 @@ See the above repository for updates as well as full license text. */
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.tab-throbber{ display: none !important; }
|
.tab-throbber{ display: none !important; }
|
||||||
.tab-icon-image[src]{ display: -moz-box !important; }
|
.tab-icon-image[src]{ display: block !important; }
|
||||||
|
|
|
@ -10,7 +10,7 @@ See the above repository for updates as well as full license text. */
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.tab-icon-stack::before{
|
.tab-icon-stack::before{
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
grid-area: 1/1;
|
grid-area: 1/1;
|
||||||
content: "";
|
content: "";
|
||||||
width:var(--tab-loader-size);
|
width:var(--tab-loader-size);
|
||||||
|
|
|
@ -41,8 +41,8 @@ Thanks to /u/skenera on reddit for suggesting animating background position and
|
||||||
}
|
}
|
||||||
.scrollbox-clip[orient="horizontal"] > scrollbox::after{
|
.scrollbox-clip[orient="horizontal"] > scrollbox::after{
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
-moz-box-flex: 1 !important;
|
flex-grow: 1 !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: var(--lwt-accent-color);
|
background-color: var(--lwt-accent-color);
|
||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
|
|
|
@ -38,7 +38,7 @@ linux_gtk_window_control_patch.css
|
||||||
/* Move tabs below content */
|
/* Move tabs below content */
|
||||||
#main-window > body::after{
|
#main-window > body::after{
|
||||||
content: "";
|
content: "";
|
||||||
display: -moz-box;
|
display: flex;
|
||||||
}
|
}
|
||||||
#main-window:not([inFullscreen]) > body::after{
|
#main-window:not([inFullscreen]) > body::after{
|
||||||
margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
|
margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));
|
||||||
|
|
|
@ -34,7 +34,8 @@ have menubar permanently enabled and want it on top
|
||||||
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
|
.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
|
||||||
|
|
||||||
#titlebar{
|
#titlebar{
|
||||||
-moz-box-ordinal-group: 2;
|
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */
|
||||||
|
order: 2;
|
||||||
-moz-appearance: none !important;
|
-moz-appearance: none !important;
|
||||||
--tabs-navbar-shadow-size: 0px;
|
--tabs-navbar-shadow-size: 0px;
|
||||||
--uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
|
--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 */
|
/* Re-order window and tab notification boxes */
|
||||||
#navigator-toolbox > div{ display: contents }
|
#navigator-toolbox > div{ display: contents }
|
||||||
.global-notificationbox,
|
.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; }
|
#TabsToolbar .titlebar-spacer{ display: none; }
|
||||||
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
|
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
|
||||||
#navigator-toolbox::after{ display: none !important; }
|
#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 */
|
/* At Activated Menubar */
|
||||||
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
|
: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 */
|
/* 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;
|
||||||
|
}
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -9,6 +9,7 @@ See the above repository for updates as well as full license text. */
|
||||||
padding-block: 0.5em;
|
padding-block: 0.5em;
|
||||||
padding-inline-start: 1em;
|
padding-inline-start: 1em;
|
||||||
-moz-box-pack: start !important;
|
-moz-box-pack: start !important;
|
||||||
|
justify-content: start !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
}
|
}
|
||||||
#context-navigation > menuitem[_moz-menuactive="true"]:not([disabled]){ background-color: -moz-menuhover !important; }
|
#context-navigation > menuitem[_moz-menuactive="true"]:not([disabled]){ background-color: -moz-menuhover !important; }
|
||||||
|
|
|
@ -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 */
|
/* Makes the one-off search buttons in the searchbar popup show vertically with a label */
|
||||||
|
|
||||||
#PopupSearchAutoComplete .search-panel-one-offs{
|
#PopupSearchAutoComplete .search-panel-one-offs{
|
||||||
display: -moz-box !important;
|
display: flex !important;
|
||||||
-moz-box-orient: vertical;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
#PopupSearchAutoComplete .search-panel-one-offs-container{
|
#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{
|
#PopupSearchAutoComplete .searchbar-engine-one-off-item{
|
||||||
display: -moz-box !important;
|
display: flex !important;
|
||||||
margin-inline: 8px !important;
|
margin-inline: 8px !important;
|
||||||
-moz-box-orient: horizontal;
|
align-items: center;
|
||||||
-moz-box-align: center;
|
|
||||||
align-self: unset !important;
|
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{
|
#PopupSearchAutoComplete .searchbar-engine-one-off-item::after{
|
||||||
content: attr(tooltiptext);
|
content: attr(tooltiptext);
|
||||||
display: -moz-inline-box;
|
display: inline-flex;
|
||||||
-moz-box-flex: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
|
@ -4,8 +4,10 @@ See the above repository for updates as well as full license text. */
|
||||||
/* Shows both icon and label for toolbarbuttons */
|
/* Shows both icon and label for toolbarbuttons */
|
||||||
|
|
||||||
toolbar .toolbarbutton-1[label]{
|
toolbar .toolbarbutton-1[label]{
|
||||||
-moz-box-orient: vertical;
|
-moz-box-orient: vertical; /* Fx <112 compatibility */
|
||||||
-moz-box-align: center !important;
|
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; }
|
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 {
|
toolbar .toolbarbutton-1[label] > .toolbarbutton-text {
|
||||||
display: -moz-box !important;
|
display: flex !important;
|
||||||
min-height: 16px !important;
|
min-height: 16px !important;
|
||||||
padding-top: 0px !important;
|
padding-top: 0px !important;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 12ch;
|
width: 11ch;
|
||||||
}
|
}
|
||||||
toolbar .toolbarbutton-1[label] > .toolbarbutton-text::before{
|
toolbar .toolbarbutton-1[label] > .toolbarbutton-text::before{
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
|
|
|
@ -15,11 +15,15 @@ See the above repository for updates as well as full license text. */
|
||||||
#browser,
|
#browser,
|
||||||
#customization-container,
|
#customization-container,
|
||||||
#tab-notification-deck{
|
#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 */
|
/* 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{
|
#toolbar-menubar{
|
||||||
position: fixed;
|
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) }
|
#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 */
|
/* set to "column-reverse" (without quotes) if you want tabs above menubar with the above option */
|
||||||
#titlebar{ -moz-box-direction: normal; }
|
#titlebar{ flex-direction: column }
|
||||||
}
|
}
|
|
@ -20,7 +20,7 @@ See the above repository for updates as well as full license text. */
|
||||||
#urlbar-container,
|
#urlbar-container,
|
||||||
#urlbar{
|
#urlbar{
|
||||||
position: static !important;
|
position: static !important;
|
||||||
display: -moz-box !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
#urlbar{
|
#urlbar{
|
||||||
height: auto !important;
|
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 */
|
--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); }
|
#urlbar[focused]{ box-shadow: inset 0 0 0 1px var(--toolbar-field-focus-border-color, highlight); }
|
||||||
|
|
||||||
.urlbarView{
|
.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 */
|
/* 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 */
|
/* 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; }
|
|
@ -30,18 +30,19 @@ See the above repository for updates as well as full license text. */
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: 100vw;
|
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{
|
#TabsToolbar > .titlebar-buttonbox-container{
|
||||||
display: -moz-box !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toolbar-menubar:not([customizing]){
|
#toolbar-menubar:not([customizing]){
|
||||||
margin-top: 40px; /* This needs to be bigger if bookmarks toolbar is shown */
|
margin-top: 40px; /* This needs to be bigger if bookmarks toolbar is shown */
|
||||||
width: var(--uc-vertical-menubar-width);
|
width: var(--uc-vertical-menubar-width);
|
||||||
-moz-box-orient: vertical;
|
-moz-box-orient: vertical;
|
||||||
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
background-color: var(--lwt-accent-color);
|
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{
|
#toolbar-menubar:not([customizing]) #main-menubar{
|
||||||
-moz-box-orient: vertical;
|
-moz-box-orient: vertical;
|
||||||
|
flex-direction: column;
|
||||||
margin-left: -40px;
|
margin-left: -40px;
|
||||||
background-color: var(--lwt-accent-color);
|
background-color: var(--lwt-accent-color);
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,22 +16,21 @@ menubar > menu{visibility: collapse; transition: visibility 0ms linear 0.1s}
|
||||||
menubar:hover > menu,
|
menubar:hover > menu,
|
||||||
#toolbar-menubar[autohide="true"]:not([inactive]) > #menubar-items > menubar > menu{visibility: visible}
|
#toolbar-menubar[autohide="true"]:not([inactive]) > #menubar-items > menubar > menu{visibility: visible}
|
||||||
|
|
||||||
#menubar-items{
|
:root:not([customizing]) #menubar-items{
|
||||||
display: block;
|
display: block;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: var(--lwt-accent-color);
|
background-color: var(--lwt-accent-color);
|
||||||
inset-inline-start: 0;
|
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 { padding: 3px }
|
||||||
|
|
||||||
menubar > menu > menupopup{ margin: calc(0px - var(--uc-menubaritem-height)) 0 0 var(--uc-menubaritem-width) }
|
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[autohide="true"]:not([inactive]){ margin-bottom: -32px }
|
||||||
|
|
||||||
#toolbar-menubar > .titlebar-buttonbox-container + :is(toolbarbutton,toolbaritem){ margin-inline-start: var(--uc-menubaritem-width) }
|
#toolbar-menubar > .titlebar-buttonbox-container + :is(toolbarbutton,toolbaritem){ margin-inline-start: var(--uc-menubaritem-width) }
|
||||||
|
|
||||||
#file-menu{
|
#file-menu{
|
||||||
|
|
|
@ -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"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
|
||||||
:root[sizemode="fullscreen"] #window-controls{ right: unset; }
|
:root[sizemode="fullscreen"] #window-controls{ right: unset; }
|
||||||
.titlebar-buttonbox-container{ -moz-box-ordinal-group: 0 !important; }
|
.titlebar-buttonbox-container{
|
||||||
.titlebar-buttonbox{ -moz-box-direction: reverse }
|
-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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue