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
:root {
--toolbar-start-end-padding: 8px;
--toolbarbutton-outer-padding: 2px;
--toolbarbutton-inner-padding: 8px;
--toolbarbutton-hover-background: var(--button-hover-bgcolor);
--toolbarbutton-active-background: var(--button-active-bgcolor);
--toolbarseparator-color: color-mix(in srgb, currentColor 60%, transparent);
--bookmark-block-padding: 4px;
&[uidensity=compact] {
--toolbarbutton-outer-padding: 3px;
--toolbarbutton-inner-padding: 6px;
--bookmark-block-padding: 1px;
}
&[uidensity=touch] {
--toolbarbutton-inner-padding: 9px;
--bookmark-block-padding: 7px;
}
}
#TabsToolbar {
/* Override the inner padding to ensure the dimensions match the tabs, but also making sure
different types of buttons (combined-buttons-dropmarker or text) still look correct. */
--toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2);
}
/* ::::: primary toolbar buttons ::::: */
.toolbarbutton-1 {
:root:not([customizing]) &[disabled] {
opacity: var(--toolbarbutton-disabled-opacity);
}
> .toolbarbutton-icon {
margin-inline-end: 0 !important;
}
> .toolbarbutton-icon,
> .toolbarbutton-badge-stack > .toolbarbutton-icon {
width: 16px;
}
}
.toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon {
width: 12px;
}
toolbar .toolbarbutton-1 {
appearance: none;
margin: 0;
padding: 0 var(--toolbarbutton-outer-padding);
justify-content: center;
&:focus-visible {
outline: none;
> .toolbarbutton-icon,
> .toolbarbutton-text,
> .toolbarbutton-badge-stack {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
}
> .toolbarbutton-icon,
> .toolbarbutton-text,
> .toolbarbutton-badge-stack {
padding: var(--toolbarbutton-inner-padding);
border-radius: var(--toolbarbutton-border-radius);
}
> .toolbarbutton-icon {
/* horizontal padding + actual icon width */
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
}
> .toolbarbutton-text {
padding-top: calc(var(--toolbarbutton-inner-padding) - 1px);
padding-bottom: 0;
/* To make the hover feedback line up with sibling buttons, it needs the same
* height as the button icons and the same vertical padding, but as a minimum,
* because otherwise an increase in text sizes would break things.
*/
min-height: calc(16px + 2 * var(--toolbarbutton-inner-padding));
@media (-moz-platform: macos) {
padding-top: calc(var(--toolbarbutton-inner-padding) + 1px);
}
}
&:not([disabled]) {
&:hover > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
background-color: var(--toolbarbutton-hover-background);
color: inherit;
}
&:is([open], [checked], :hover:active) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
background-color: var(--toolbarbutton-active-background);
color: inherit;
}
}
}
#TabsToolbar .toolbarbutton-1 {
margin: 0;
> .toolbarbutton-icon,
> .toolbarbutton-text,
> .toolbarbutton-badge-stack {
border-radius: var(--tab-border-radius);
}
}
/* Adds padding to end of toolbar while making that space click the first button */
#PanelUI-menu-button {
padding-inline-end: var(--toolbar-start-end-padding);
}
toolbar .toolbaritem-combined-buttons {
margin-inline: 2px;
> .toolbarbutton-1 {
padding-inline: 0;
}
> .toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon {
/* same height as regular buttons, but narrower, and for a 12x12 image */
padding-inline: 2px;
padding-block: calc(var(--toolbarbutton-inner-padding) + (16px - 12px) / 2);
width: calc(2 * 2px + 12px);
}
> separator {
width: 1px;
height: 16px;
margin-inline-end: -1px;
background-image: linear-gradient(currentColor 0, currentColor 100%);
background-position: center;
background-repeat: no-repeat;
background-size: 1px 16px;
opacity: .2;
}
&:hover > separator {
display: none;
}
}
toolbar[brighttext] .toolbaritem-combined-buttons > separator {
opacity: .3;
}
/* ::::: bookmark buttons ::::: */
#personal-toolbar-empty-description,
toolbarbutton.bookmark-item:not(.subviewbutton) {
margin: 2px;
padding: var(--bookmark-block-padding) 4px;
}
#PersonalToolbar {
/* These should match the sizing of the bookmark-items in the inline axis
* (padding and margin, respectively) */
--toolbarbutton-inner-padding: 4px;
--toolbarbutton-outer-padding: 2px;
:root[uidensity=compact] & {
--toolbarbutton-outer-padding: 1px;
}
.toolbarbutton-1 {
margin-block: 2px;
/* Allow icons to grow with the toolbar to match bookmark item heights
*
* NOTE(emilio): This matches pre-existing behavior but it's inconsistent with
* how e.g. combined items work, and maybe we should just remove this.
*/
align-items: stretch;
> .toolbarbutton-icon {
height: auto;
}
> .toolbarbutton-badge-stack {
align-items: center;
}
}
}
toolbarbutton.bookmark-item:not(.subviewbutton) {
border-radius: var(--toolbarbutton-border-radius);
max-width: 13em;
appearance: none;
&:not([disabled], [open]):hover {
background-color: var(--toolbarbutton-hover-background);
color: inherit;
}
&:hover:active:not([disabled]),
&[open="true"] {
background-color: var(--toolbarbutton-active-background);
color: inherit;
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
:root[uidensity=compact] & {
margin-inline: 1px;
}
}
/**
* Ensure that the description is always at least as big as a bookmarks item,
* where its icon is 16px (which may be more than inline text height);
*/
#personal-toolbar-empty-description {
min-height: calc(16px + 2 * var(--bookmark-block-padding));
}
#bookmarks-toolbar-placeholder {
max-width: unset;
}
.bookmark-item > .toolbarbutton-icon {
width: 16px;
height: 16px;
#PlacesToolbarItems > & {
margin-inline-end: 0;
}
}
/* Force the display of the label for bookmarks */
.bookmark-item > .toolbarbutton-text {
display: flex !important;
}
#PlacesToolbar,
#PlacesToolbarItems {
min-width: 0;
}
#personal-bookmarks {
/* Make sure there's at least space for the chevron */
min-width: calc(16px + 2 * var(--toolbarbutton-inner-padding) + 2 * var(--toolbarbutton-outer-padding));
}
#managed-bookmarks > .toolbarbutton-icon,
#bookmarks-toolbar-placeholder > .toolbarbutton-icon,
#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]),
#PersonalToolbar #import-button > .toolbarbutton-icon,
#PersonalToolbar #aboutwelcome-button > .toolbarbutton-icon,
#OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon {
margin-inline-end: 4px;
}
/* Separators */
/* Override the toolkit styles, and make sure separators are draggable by
* making them wider, and using a pseudo-element for the visual separator. */
#PlacesToolbarItems > toolbarseparator {
margin: 0;
padding-inline: 4px;
appearance: none;
/* When adjacent to the bookmarks items, give the bookmarks items a leading separator. */
&::before {
content: "";
display: block;
border-inline-start: 1px solid;
border-image-source: linear-gradient(
transparent 3.75px,
var(--toolbarseparator-color) 3.75px,
var(--toolbarseparator-color) calc(100% - 3.75px),
transparent calc(100% - 3.75px) );
border-image-slice: 1;
}
@media (resolution >= 2x) {
&::before {
border-inline-start-width: 0.5px;
}
}
}
.toolbarbutton-badge {
/* The bookmarks toolbar is smaller than the other toolbars, so we
* need to override the badge position to not be cut off. */
#PersonalToolbar & {
margin-top: -1px !important;
:root[uidensity=touch] & {
margin-top: -4px !important;
}
}
/* Remove a pixel of margin on the end so that the badge doesn't
* overflow the toolbar and push the button into the overflow menu. */
:root[uidensity=compact] & {
margin-inline-end: -7px !important;
}
/* Alternative style for .toolbarbutton-badge used by CFR notifications */
&.feature-callout {
width: 14px;
height: 14px;
min-width: auto;
box-shadow: none;
border: none;
padding: 0;
display: block;
margin: -7px 0 0 !important;
margin-inline-end: -6px !important;
}
}