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
/**
* We intentionally do not include browser-custom-colors.css, instead choosing to
* fall back to system colors and transparencies in order to accommodate the
* wider variety of GTK system themes.
*
* We still want to do some of the tweaks that browser-custom-colors does, like
* disabling the toolbar field border and backgrounds.
*/
@media not (prefers-contrast) {
:root:not([lwtheme]) {
--toolbar-field-border-color: transparent;
/* These colors don't exactly match the default dark color that buttons and
* textfields have in Adwaita[1][2], which would end up computing to
* rgba(0, 0, 0, .8 * .1) and rgba(255, 255, 255, 1 * .1) for light and
* dark, respectively.
*
* Instead, for the light theme we use .05 alpha, to increase the contrast
* of the text. For the dark theme, we use a darker background, which works
* because the toolbar background applies some white unconditionally, and
* matches what our default themes do in other platforms too.
*
*/
--toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
--toolbar-field-color: inherit;
@media (-moz-gtk-theme-family) {
--tabs-navbar-separator-style: none;
@media (prefers-color-scheme: light) {
--urlbar-box-bgcolor: #fafafa;
}
}
}
}
#menubar-items {
flex-direction: column; /* for flex hack */
justify-content: normal; /* align the menubar to the top also in customize mode */
}
/**
* Titlebar drawing:
*
* GTK windows have both a window radius (exposed via the
* `-moz-gtk-csd-titlebar-radius`) environment variable, and a window shadow
* (which we can't read back from GTK). Note that the -moz-window-decorations
* (in X11) or the compositor (in Wayland) does draw the shadow corners
* already.
*/
:root[tabsintitlebar] {
background-color: transparent;
/* 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. */
#toolbar-menubar[autohide="true"] {
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));
}
&[sizemode="normal"]:not([gtktiledwindow="true"]) {
/* This takes care of drawing our window decorations on X11 */
-moz-default-appearance: -moz-window-decorations;
appearance: auto;
#navigator-toolbox,
dialog::backdrop {
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "widget.gtk.rounded-bottom-corners.enabled") {
#navigator-toolbox {
/* The body clip below covers this. */
border-radius: 0;
}
body,
dialog::backdrop {
/* Use an uniform clip to allow WebRender to optimize it better */
border-radius: env(-moz-gtk-csd-titlebar-radius);
}
}
}
}
/* Bookmark menus */
.bookmark-item {
&:is(menu, menuitem) {
min-width: 0;
max-width: 32em;
}
&:not(.subviewbutton) > .menu-iconic-left {
margin-block: 0;
}
/* Bookmark drag and drop styles */
&[dragover-into="true"] {
background: SelectedItem !important;
color: SelectedItemText !important;
}
&[cutting] {
> .toolbarbutton-icon,
> .menu-iconic-left > .menu-iconic-icon {
opacity: 0.5;
}
> .toolbarbutton-text,
> .menu-iconic-left > .menu-iconic-text {
opacity: 0.7;
}
}
}
/* Address bar */
#urlbar,
#searchbar {
font-size: 1.05em;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.urlbar.experimental.expandTextOnFocus") {
#urlbar[breakout-extend] {
font-size: 1.14em;
}
}
/* AutoComplete */
#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
border-top: 1px solid ThreeDShadow;
}
/* Content area */
.sidebar-splitter {
appearance: none;
width: 6px;
background-color: -moz-dialog;
border: 1px ThreeDShadow;
border-style: none solid;
}
/* Tabstrip */
#tabbrowser-tabs {
/* override the global style to allow the selected tab to be above the nav-bar */
z-index: auto;
}
#TabsToolbar {
min-height: 0;
}
#TabsToolbar,
#toolbar-menubar,
#main-menubar,
#titlebar {
appearance: none;
background-color: transparent;
color: inherit;
}
/* All tabs menupopup */
.alltabs-item[selected="true"] {
font-weight: bold;
}
#UITourHighlight {
/* Below are some fixes for people without an X compositor on Linux.
This is why we can't have nice things: */
/* Animations don't repaint properly without an X compositor. */
animation-name: none !important;
/* Opacity rounds to 0 or 1 on Linux without an X compositor, making the
background color not visible. Anti-aliasing is not available either. Make a
thicker outline and cancel border-radius for that case. */
outline: 4px solid rgb(0,200,215);
border-radius: 0 !important;
}
#UITourTooltipDescription {
font-size: 1.05rem;
}
#UITourTooltipClose {
margin-inline-end: -4px;
}
/**
* Override the --arrowpanel-padding so the background extends
* to the sides and bottom of the panel.
*/
#UITourTooltipButtons {
margin-inline-start: -10px;
margin-bottom: -10px;
}
/* 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. */
.titlebar-buttonbox {
z-index: 1;
align-items: stretch;
}
@media (-moz-gtk-csd-reversed-placement) {
.titlebar-buttonbox-container {
order: -1;
}
}
.titlebar-button {
appearance: none;
align-items: center;
padding: 0;
padding-inline: calc(env(-moz-gtk-csd-titlebar-button-spacing) / 2);
> .toolbarbutton-icon {
appearance: auto;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "widget.gtk.non-native-titlebar-buttons.enabled") {
/* When using lightweight themes, use our own buttons since native ones might
* assume a native background in order to be visible. */
:root[lwtheme] & {
padding-inline: 3px;
> .toolbarbutton-icon {
appearance: none;
border-radius: 100%;
background-position: center center;
background-repeat: no-repeat;
-moz-context-properties: stroke;
stroke: currentColor;
/* Roughly the Adwaita size */
width: 24px;
height: 24px;
}
}
}
&:hover > .toolbarbutton-icon {
background-color: color-mix(in srgb, currentColor 12%, transparent);
}
&:hover:active > .toolbarbutton-icon {
background-color: color-mix(in srgb, currentColor 20%, transparent);
}
&:focus-visible > .toolbarbutton-icon {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
}
.titlebar-max {
order: env(-moz-gtk-csd-maximize-button-position);
> .toolbarbutton-icon {
-moz-default-appearance: -moz-window-button-maximize;
}
}
.titlebar-restore {
order: env(-moz-gtk-csd-maximize-button-position);
> .toolbarbutton-icon {
-moz-default-appearance: -moz-window-button-restore;
}
}
@media not (-moz-gtk-csd-maximize-button) {
.titlebar-restore,
.titlebar-max {
display: none;
}
}
.titlebar-close {
order: env(-moz-gtk-csd-close-button-position);
> .toolbarbutton-icon {
-moz-default-appearance: -moz-window-button-close;
}
&:hover > .toolbarbutton-icon {
background-color: #d70022;
color: white;
}
&:hover:active > .toolbarbutton-icon {
background-color: #ff0039;
}
@media not (-moz-gtk-csd-close-button) {
display: none;
}
}
.titlebar-min {
order: env(-moz-gtk-csd-minimize-button-position);
> .toolbarbutton-icon {
-moz-default-appearance: -moz-window-button-minimize;
}
@media not (-moz-gtk-csd-minimize-button) {
display: none;
}
}