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
@import url("chrome://browser/skin/browser-shared.css");
:root {
--arrowpanel-field-background: light-dark(rgba(249, 249, 250, .3), rgba(12, 12, 13, .3));
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.theme.native-theme") {
@media not (prefers-contrast) {
:root:not([lwtheme]) {
@media (prefers-color-scheme: light) {
--urlbar-box-bgcolor: #fafafa;
}
@media (prefers-color-scheme: dark) {
--tab-selected-bgcolor: color-mix(in srgb, -moz-dialog 75%, white);
}
}
}
}
/** Begin titlebar **/
.browser-titlebar {
/* Centrally align content items vertically */
justify-content: center;
}
.titlebar-button {
display: none;
}
.titlebar-buttonbox-container {
align-items: center;
/* Hide window controls in fullscreen */
:root[inFullscreen] & {
display: none;
}
}
.titlebar-buttonbox {
&:-moz-locale-dir(ltr) {
margin-inline: 12px 0;
@media (-moz-mac-rtl) {
margin-inline: 12px;
}
}
&:-moz-locale-dir(rtl) {
margin-inline: 12px;
@media (-moz-mac-rtl) {
margin-inline: 12px 0;
}
}
}
/** End titlebar **/
:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
border-top: 1px solid rgba(0,0,0,0.65);
}
/* ----- BOOKMARK TOOLBAR ----- */
#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {
min-height: 32px;
align-items: center;
}
/* Workaround for native menubar inheritance */
.openintabs-menuitem {
list-style-image: none;
}
.bookmark-item {
> .menu-iconic-left > .menu-iconic-icon {
width: 16px;
height: 16px;
}
&[cutting] {
> .toolbarbutton-icon,
> .menu-iconic-left > .menu-iconic-icon {
opacity: 0.5;
}
> .toolbarbutton-text,
> .menu-iconic-left > .menu-iconic-text {
opacity: 0.7;
}
}
}
/* ----- BOOKMARK MENUS ----- */
#bookmarksToolbarFolderMenu,
#BMB_bookmarksToolbar,
#panelMenu_bookmarksToolbar {
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
}
/* Inactive elements are faded out on OSX */
.toolbarbutton-1:not(:hover):-moz-window-inactive,
.bookmark-item:not(:hover):-moz-window-inactive,
:root:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] {
opacity: 0.5;
}
/* Address bar */
@media (prefers-contrast) {
/* The "increase contrast" preference on macOS draws a 1px black line around
panels, including the separate search bar. Since the Urlbar is not
implemented as a panel, it does not get this outline. This outline rule
resembles the system outline, bringing the Urlbar in line with panels and
other Mac apps. */
#urlbar[open] > #urlbar-background {
outline: 1px solid var(--focus-outline-color)
}
}
#urlbar,
#searchbar {
font-size: 1.25em;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.urlbar.experimental.expandTextOnFocus") {
#urlbar[breakout-extend] {
font-size: 1.36em;
}
}
/* Move the margin to the parent element to properly position the ::after badge */
moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
margin-inline: 0 5px;
> .menu-iconic-icon {
margin-inline: 0;
}
}
/* ----- AUTOCOMPLETE ----- */
#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
border-top: 1px solid #C7C7C7;
}
/* Bookmarking panel */
/* The following elements come from editBookmarkPanel.inc.xhtml. Styling that's
specific to the editBookmarkPanel should be in browser.css. Styling that
should be shared by all editBookmarkPanel.inc.xhtml consumers should be in
editBookmark.css. */
/**** folder tree and tag selector ****/
#editBMPanel_folderTree,
#editBMPanel_tagsSelector {
appearance: none;
background-color: var(--arrowpanel-field-background);
color: inherit;
border-radius: 2px;
border: 1px solid var(--panel-separator-color);
margin: 0;
}
#editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected),
#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
background-color: var(--arrowpanel-dimmed);
}
#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected),
#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
color: inherit;
}
#editBMPanel_folderTree {
border-bottom: none;
border-end-start-radius: 0;
border-end-end-radius: 0;
/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
margin: 0 !important;
min-width: 27em;
position: relative;
}
/* ----- SIDEBAR ELEMENTS ----- */
#sidebar-box {
/* Default font size is 11px on mac, so this is 12px */
font-size: 1.0909rem;
}
/* ::::: tabbrowser ::::: */
.tab-label,
.tab-group-label {
margin-block: 1px 0;
}
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected], [multiselected]) {
opacity: .9;
}
/*
* Force the overlay to create a new stacking context so it always appears on
* top of the icon.
*/
.tab-icon-overlay {
opacity: 0.9999;
}
.tab-label-container:not([selected], [multiselected]) {
opacity: .7;
}
.tabbrowser-tab {
border: none;
/* FIXME: Are these styles really needed nowadays? */
&:is([visuallyselected], [multiselected]) {
/* overriding tabbox.css */
text-shadow: inherit;
@media (prefers-color-scheme: light) {
:root:not([lwtheme]) & {
/* overriding tabbox.css */
color: hsl(240, 5%, 5%);
}
}
}
}
#tabbrowser-tabs {
/* overriding tabbox.css */
font: message-box;
align-items: stretch;
margin-bottom: 0;
position: static;
z-index: auto;
}
/* Bookmark drag and drop styles */
.bookmark-item[dragover-into="true"] {
background: SelectedItem !important;
color: SelectedItemText !important;
}
#UITourTooltipDescription {
font-size: 1.18rem;
line-height: 2rem;
}
#UITourTooltipClose {
margin-inline-end: -10px;
margin-top: -14px;
}