browser/themes/shared/places/sidebar.css

Propagation: 20.69%

Back to Home

/* 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/. */

@import url("chrome://browser/skin/browser-colors.css");

.sidebar-panel {
  appearance: none;
  /* Background color comes from the embedder */
  background-color: transparent;
  color: var(--sidebar-text-color);
}

#sidebar-panel-header {
  justify-content: space-between;
  padding-inline: var(--space-large);
  padding-block-start: var(--space-large);

  > h4 {
    margin-block: var(--space-large);
    font-weight: var(--font-weight-bold);
    font-size: 15px;
  }

  /* stylelint-disable-next-line media-query-no-invalid */
  @media not -moz-pref("sidebar.revamp") {
    display: none;
  }
}

/* Themed sidebars */

.sidebar-panel[lwt-sidebar] {
  color-scheme: light;
  scrollbar-color: light-dark(rgba(204, 204, 204, 0.5), rgba(249, 249, 250, 0.4)) light-dark(rgba(230, 230, 235, 0.5), rgba(20, 20, 25, 0.3));
}

.sidebar-panel[lwt-sidebar="dark"] {
  color-scheme: dark;
}

.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren {
  &::-moz-tree-row(selected) {
    background-color: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1));
  }

  &::-moz-tree-image(selected),
  &::-moz-tree-twisty(selected),
  &::-moz-tree-cell-text(selected) {
    color: var(--sidebar-text-color);
  }
}

.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren {
  &::-moz-tree-row(selected, focus) {
    background-color: var(--lwt-sidebar-highlight-background-color);
  }

  &::-moz-tree-image(selected, focus),
  &::-moz-tree-twisty(selected, focus),
  &::-moz-tree-cell-text(selected, focus) {
    color: var(--lwt-sidebar-highlight-text-color, var(--sidebar-text-color));
  }
}

/* Sidebar tree */

.sidebar-placesTree {
  appearance: none;
  background-color: transparent;
  color: inherit;
  border: 0;
  margin: 0;
}

/* View button */

#viewButton {
  appearance: none;
  border-radius: 4px;
  padding: 2px 4px;
  color: inherit;
}

#viewButton:hover {
  /* Matches --toolbarbutton-hover-background: */
  background-color: color-mix(in srgb, currentColor 17%, transparent);
}

#viewButton[open] {
  /* Matches --toolbarbutton-active-background: */
  background-color: color-mix(in srgb, currentColor 30%, transparent);
}

#viewButton:focus-visible {
  outline: var(--focus-outline);
}

#viewButton > .button-box > .button-menu-dropmarker {
  appearance: none;
  display: flex;
  content: url("chrome://global/skin/icons/arrow-down-12.svg");
  -moz-context-properties: fill;
  fill: currentColor;
}

#sidebar-search-container {
  padding: var(--space-medium);
}

#search-box {
  flex: 1;
}

@media (-moz-platform: windows) {
  :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row {
    min-height: 32px;
  }

  .sidebar-placesTreechildren::-moz-tree-cell,
  .sidebar-placesTreechildren::-moz-tree-twisty {
    padding: 0 4px;
  }

  .sidebar-placesTreechildren::-moz-tree-cell(leaf),
  .sidebar-placesTreechildren::-moz-tree-image(leaf) {
    cursor: pointer;
  }

  .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
    cursor: pointer;
    text-decoration: underline;
  }

  .sidebar-placesTreechildren::-moz-tree-cell(separator) {
    cursor: default;
  }

  @media not (prefers-contrast) {
    .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
      text-decoration: none;
    }
  }

  /* Default button vert. margins are 1px/2px, and this can cause misalignment */
  #viewButton {
    margin: 0;
    margin-inline-start: 4px;
    border-radius: 2px;
  }
}

@media (-moz-platform: linux) {
  #sidebar-search-container {
    padding: 8px;
  }

  #viewButton {
    margin: 1px 0;
    margin-inline-start: 4px;
  }

  :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row {
    min-height: 32px;
  }

  .sidebar-placesTreechildren::-moz-tree-cell(leaf),
  .sidebar-placesTreechildren::-moz-tree-image(leaf) {
    cursor: pointer;
  }

  .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
    cursor: pointer;
    text-decoration: underline;
  }

  .sidebar-placesTreechildren::-moz-tree-cell(separator) {
    cursor: default;
  }
}

@media (-moz-platform: macos) {
  .sidebar-placesTree {
    margin: 0;
    /* Default font size is 11px on mac, so this is 12px */
    font-size: 1.0909rem;
  }

  :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row {
    min-height: 32px;
  }

  .sidebar-placesTreechildren::-moz-tree-separator {
    border-top: 1px solid #505d6d;
    margin: 0 10px;
  }

  .sidebar-placesTreechildren::-moz-tree-cell-text {
    margin-inline-end: 6px;
  }

  #viewButton {
    margin: 4px 0;
    margin-inline-end: 4px;
    /* Default font size is 11px on mac, so this is 12px */
    font-size: 1.0909rem;
  }
}

Back to Home