Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
#menubar-items {
flex-direction: column; /* for flex hack */
justify-content: normal; /* align the menubar to the top also in customize mode */
}
#main-menubar > menu {
appearance: none;
color: inherit;
&[_moz-menuactive] {
background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
color: inherit;
@media (prefers-contrast) {
background-color: -moz-menuhover;
color: -moz-menuhovertext;
}
}
}
@media (-moz-windows-accent-color-in-titlebar) {
:root[tabsintitlebar] {
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.theme.windows.accent-color-in-tabs.enabled") {
--toolbox-non-lwt-bgcolor: ActiveCaption;
--toolbox-non-lwt-textcolor: CaptionText;
--toolbox-non-lwt-bgcolor-inactive: InactiveCaption;
--toolbox-non-lwt-textcolor-inactive: InactiveCaptionText;
&:not([lwtheme]) #TabsToolbar {
/* These colors match the Linux/HCM default button colors. We need to
* override these on the tabs toolbar because the accent color is
* arbitrary, so the hardcoded colors from browser-custom-colors might
* not provide sufficient contrast. */
--toolbarbutton-icon-fill: currentColor;
--toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent);
--toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent);
}
}
&[sizemode="normal"] #navigator-toolbox {
border-top: .5px solid ActiveBorder;
&:-moz-window-inactive {
border-top-color: InactiveBorder;
}
}
}
}
/* When temporarily showing the menu bar, make it at least as tall as the
* tab bar such that the window controls don't appear to move up. */
:root[tabsintitlebar] #toolbar-menubar[autohide="true"] {
height: var(--tab-min-height);
}
/* Titlebar */
.titlebar-buttonbox {
appearance: none;
/* The button box must appear on top of the navigator-toolbox in order for
* click and hover mouse events to work properly for the button in the restored
* window state. Otherwise, elements in the navigator-toolbox, like the menubar,
* can swallow those events. It will also place the buttons above the fog on
* Windows 7 with Aero Glass.
*/
z-index: 1;
}
.titlebar-buttonbox-container {
align-items: stretch;
}
/* Window control buttons */
.titlebar-button {
appearance: none;
border: none;
margin: 0;
padding: 8px 17px;
-moz-context-properties: stroke;
stroke: currentColor;
:root[tabletmode] & {
display: none;
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
> .toolbarbutton-icon {
width: 12px;
height: 12px;
&:-moz-locale-dir(rtl) {
transform: scaleX(-1);
}
}
}
.titlebar-min {
/* Even though we use appearance: none, -moz-default-appearance is necessary
* for Windows 11's "snap layouts" feature, see
* DealWithWindowsAppearanceHacks */
-moz-default-appearance: -moz-window-button-minimize;
}
.titlebar-max {
-moz-default-appearance: -moz-window-button-maximize;
}
.titlebar-restore {
-moz-default-appearance: -moz-window-button-restore;
}
.titlebar-close {
-moz-default-appearance: -moz-window-button-close;
}
:root[lwtheme-image] {
.titlebar-button {
-moz-context-properties: unset;
}
.titlebar-min {
}
.titlebar-max {
}
.titlebar-restore {
}
.titlebar-close {
}
}
@media not (prefers-contrast) {
.titlebar-button:hover {
background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
&:active {
background-color: light-dark(hsla(0,0%,0%,.22), hsla(0,0%,100%,.32));
}
}
.titlebar-close:hover {
stroke: white;
background-color: hsl(355,86%,49%);
&:active {
background-color: hsl(355,82%,69%);
}
}
}
@media (prefers-contrast) {
.titlebar-button {
background-color: -moz-field;
stroke: ButtonText;
&:hover {
background-color: SelectedItem;
stroke: SelectedItemText;
}
}
.titlebar-min {
}
.titlebar-max {
}
.titlebar-restore {
}
.titlebar-close {
}
}
/* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
* rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
@media (1.20dppx <= resolution <= 1.45dppx) {
.titlebar-button > .toolbarbutton-icon {
width: 11.5px;
height: 11.5px;
}
}
/* 175% dpi should result in the same device pixel sizes as 150% dpi. */
@media (1.70dppx <= resolution <= 1.95dppx) {
.titlebar-button {
padding-inline: 14.1px;
> .toolbarbutton-icon {
width: 10.8px;
height: 10.8px;
}
}
}
/* 225% dpi should result in the same device pixel sizes as 200% dpi. */
@media (2.20dppx <= resolution <= 2.45dppx) {
.titlebar-button {
padding-inline: 15.3333px;
> .toolbarbutton-icon {
width: 10.8px;
height: 10.8px;
}
}
}
/* 275% dpi should result in the same device pixel sizes as 250% dpi. */
@media (2.70dppx <= resolution <= 2.95dppx) {
/* NB: todo: this should also change padding on the buttons
* themselves, but without a device to test this on, it's
* impossible to know by how much. */
.titlebar-button > .toolbarbutton-icon {
width: 10.8px;
height: 10.8px;
}
}
/* Bookmark menus */
.bookmark-item {
&:is(menu, menuitem) {
min-width: 0;
max-width: 32em;
}
&:not(.subviewbutton) > .menu-iconic-left {
margin-block: 0;
}
&[cutting] {
> .toolbarbutton-icon,
> .menu-iconic-left > .menu-iconic-icon {
opacity: 0.5;
}
> .toolbarbutton-text,
> .menu-iconic-left > .menu-iconic-text {
opacity: 0.7;
}
}
&:is(toolbarbutton)[dragover="true"][open="true"] {
appearance: none;
background: SelectedItem !important;
color: SelectedItemText !important;
fill: SelectedItemText;
}
}
/* Bookmarks roots menu-items */
#bookmarksToolbarFolderMenu,
#BMB_bookmarksToolbar,
#panelMenu_bookmarksToolbar {
}
/* Address bar */
#urlbar,
#searchbar {
font-size: 1.15em;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.urlbar.experimental.expandTextOnFocus") {
#urlbar[breakout-extend] {
font-size: 1.25em;
}
}
@media (prefers-contrast) {
:root {
/* Windows HCM conventions use these colors for chiclets. We can't use them on
other platforms because AccentColor can be shown atop SelectedItem,
which has zero contrast. */
--urlbar-box-hover-bgcolor: SelectedItem;
--urlbar-box-active-bgcolor: SelectedItem;
--urlbar-box-hover-text-color: SelectedItemText;
}
:root:not([lwtheme]) {
#urlbar:not([focused="true"]) > #urlbar-background,
#searchbar:not(:focus-within),
.findbar-textbox:not(:focus) {
border-color: ThreeDShadow;
}
}
}
/* Autocomplete */
#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
border-top: 1px solid ThreeDShadow;
}
/* Tabstrip */
#TabsToolbar {
min-height: 0;
padding: 0;
}
@media (prefers-contrast) {
/* For high contrast themes. XXX is this needed anymore? */
#tabbrowser-tabpanels,
:root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
background-color: -moz-default-background-color;
}
}
/* All tabs menupopup */
.alltabs-item[selected="true"] {
font-weight: bold;
}
#UITourTooltipButtons {
/**
* Override the --arrowpanel-padding so the background extends
* to the sides and bottom of the panel.
*/
margin-inline: -10px;
margin-bottom: -10px;
}
/* Make menu items larger when opened through touch. */
panel[touchmode],
menupopup[touchmode] {
--arrowpanel-menuitem-padding-block: 12px;
--arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
/* The value for the header back icon padding is selected in a way that the
* height of the header and its separator will be equal to the panel inner
* top padding plus standard menuitem, so that the header's separator will
* be located excatly where a normal toolbarseparator would be located after
* the first menuitem, in a menu without a header. */
--arrowpanel-header-back-icon-padding: 10px;
}
:root[uidensity="compact"] panel[touchmode] {
--arrowpanel-header-back-icon-padding: 12px;
}
menupopup[touchmode] :is(menu, menuitem, menucaption) {
/* Use the var set in the rule above to increase menu items height in menupopups when
* they are opened through touch.
* Panel menu items already have their padding set in panelUI-shared.css with the same var. */
padding-block: var(--arrowpanel-menuitem-padding-block);
}
#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
/* The navigation menuitems are bigger to begin with because of their inner padding,
* so calculate the padding-block to match normal menuitems height when in touchmode.
* 3.5em is the desired menuitem height (~42px), minus the menuitem actual height devided by 2. */
padding-block: calc((3.5em - 32px) / 2);
}
/* Other menu separators don't extend all the way to the menu edges, but the
one below the navigation buttons in the content context menu should. */
#context-sep-navigation {
padding-inline: 0;
}