path: root/browser/themes/shared/toolbarbuttons.css

/* 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
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace html url("http://www.w3.org/1999/xhtml");

: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 0 var(--tabs-navbar-shadow-size);

  > .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;
    background: url(chrome://global/skin/icons/badge-blue.svg);
  }
}