Quelle  sidebar.css   Sprache: unbekannt

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

#sidebar-box {
  max-width: 75vw;
  min-width: 14em;
  width: 18em;

  :root[lwt-sidebar="light"] & {
    color-scheme: light;
  }
  :root[lwt-sidebar="dark"] & {
    color-scheme: dark;
  }

  @media -moz-pref("sidebar.revamp") {
    min-width: var(--size-layout-small);
    width: 340px;
    padding-block-end: var(--space-small);
    position: relative;
    z-index: var(--browser-area-z-index-sidebar);
  }

  &[sidebarcommand="viewGenaiChatSidebar"] {
    min-width: 400px;
  }

  &[sidebarcommand="viewCPMSidebar"] {
    min-width: 260px;
  }
}

#sidebar-container,
#sidebar-box {
  text-shadow: none;
  max-width: 75vw;

  @media not -moz-pref("sidebar.revamp") {
    background-color: var(--sidebar-background-color);
    color: var(--sidebar-text-color);
    /* Note that with sidebar.revamp we apply the --sidebar-background-color to the
     * #sidebar browser. We still need the #sidebar-box background to match the
     * toolbar tho - this background is set on the #browser ancestor rather than here */
  }
}

.sidebar-browser-stack > .dialogStack > .dialogTemplate > .dialogBox {
  /* Not enough horizontal space, remove the margin */
  margin-inline: 0;
}

#sidebar-header {
  font-size: 1.333em;
  padding: 8px;
  border-bottom: 1px solid var(--sidebar-border-color);
}

#sidebar-spacer {
  /* To ensure the button doesn't expand unnecessarily for short labels, the
     spacer should significantly out-flex the button. */
  flex: 1000 1000;
}

#sidebar {
  flex: 1;

  @media -moz-pref("sidebar.revamp") {
    border-radius: var(--border-radius-medium);
    box-shadow: var(--content-area-shadow);
    outline: 0.5px solid var(--sidebar-border-color);
    background-color: var(--sidebar-background-color);
    color: var(--sidebar-text-color);
  }
}

.sidebar-splitter {
  /* Ensure the splitter is painted on top of the sidebar box it overlaps.
  Otherwise, the user may be unable to drag the splitter to resize the sidebar. */
  position: relative;
  z-index: var(--browser-area-z-index-sidebar-splitter);
  --splitter-width: 4px;
  @media (-moz-overlay-scrollbars) and (not -moz-pref("browser.nova.enabled")) {
    --splitter-width: 2px;
  }
  @media -moz-pref("browser.nova.enabled") {
    border-radius: var(--border-radius-large);
  }

  min-width: 1px;
  width: var(--splitter-width);
  appearance: none;
  border: none;
  transition: background-color 0.5s ease-in-out;
  margin-inline: 0;

  @media -moz-pref("sidebar.revamp") {
    background-color: transparent;
    &:hover {
      background-color: var(--focus-outline-color);
    }
  }

  @media not -moz-pref("sidebar.revamp") {
    border: 0 solid;
    border-color: var(--sidebar-border-color);
    border-inline-end-width: 1px;
    #sidebar-box[sidebar-positionend] + & {
      border-inline-width: 1px 0;
    }
  }
}

#sidebar-splitter {
  -moz-user-focus: normal;
  margin-block-end: 1.5px; /* Make space for the 'medium'/3px outline to show */

  &:focus-visible {
    outline: auto;
  }
  @media -moz-pref("sidebar.revamp") {
    width: var(--space-medium);
    border-inline: calc((var(--space-medium) - var(--splitter-width)) / 2) solid transparent;
    background-clip: padding-box;
    /* Adjust to better align with the bottom of the sidebar-box */
    margin-block-end: var(--space-small);
  }

  @media -moz-pref("browser.nova.enabled") {
    width: var(--splitter-width);
    border-inline: none;
  }
}

#sidebar-launcher-splitter {
  /* We don't let the splitter overlap the sidebar on Linux since the
   * scrollbar is too narrow. */
  @media not (-moz-platform: linux) {
    margin-inline-start: calc(-1 * var(--splitter-width));

    #sidebar-container[sidebar-positionend] + & {
      margin-inline: 0 calc(-1 * var(--splitter-width));
    }
  }

  @media -moz-pref("browser.nova.enabled") {
    /* Pull the splitter fully over sidebar-main so sidebar-main and sidebar-box
     * sit flush. The factor 2 absorbs both the flexbox gap (--chrome-window-gap)
     * and the splitter's own width. */
    margin-inline-start: calc(-2 * var(--splitter-width));

    #sidebar-container[sidebar-positionend] + & {
      margin-inline: 0 calc(-2 * var(--splitter-width));
    }
  }

  @media not -moz-pref("sidebar.verticalTabs") {
    display: none;
  }

  @media -moz-pref("browser.nova.enabled") {
    /* The splitter already has a negative margin-inline-start that makes it
     * overlap the sidebar (see above). Cancel the gap on the tabbox side too so
     * the splitter sits entirely within the gap rather than adding to it. */
    margin-inline-end: calc(-1 * var(--chrome-window-gap));

    #sidebar-container[sidebar-positionend] + & {
      margin-inline-start: calc(-1 * var(--chrome-window-gap));
    }
  }
}

#sidebar-throbber[loading="true"] {
  list-style-image: url("chrome://global/skin/icons/loading.svg");
  -moz-context-properties: fill;
  fill: currentColor;
}

#sidebar-title {
  margin: 0;
  padding: 0;
  padding-inline: 8px 4px;
  flex: 1;
}

#sidebar-switcher-arrow {
  -moz-context-properties: fill;
  fill: currentColor;
  opacity: 0.8;
}

#sidebar-switcher-arrow {
  list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
  width: var(--icon-size-xsmall);
  height: var(--icon-size-xsmall);
}

#sidebar-switcher-target {
  appearance: none;
  color: inherit;
  margin-inline-end: 4px;
  border-radius: var(--toolbarbutton-border-radius);
  border: 1px solid transparent;
  padding: 2px 4px;
  flex: 1;
}

#sidebar-switcher-target:hover {
  background-color: var(--toolbarbutton-background-color-hover);
}

#sidebar-switcher-target:hover:active,
#sidebar-switcher-target.active {
  background-color: var(--toolbarbutton-background-color-active);
}

#sidebar-switcher-target:focus-visible,
#sidebar-close:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 0;
}

#sidebarMenu-popup > menuitem {
  min-width: 16em;
}

menuseparator + #sidebar-extensions-separator {
  display: none;
}

#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  list-style-image: url(chrome://browser/skin/bookmark.svg);
  -moz-context-properties: fill;
  fill: currentColor;
  opacity: 0.8;
}

#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  list-style-image: url(chrome://browser/skin/history.svg);
  -moz-context-properties: fill;
  fill: currentColor;
  opacity: 0.8;
}

#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  list-style-image: url(chrome://browser/skin/synced-tabs.svg);
  -moz-context-properties: fill;
  fill: currentColor;
  opacity: 0.8;
}

/* WebExtension Sidebars */
#sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  list-style-image: var(--webextension-menuitem-image, inherit);
  -moz-context-properties: fill;
  fill: currentColor;
  width: 16px;
  height: 16px;
}

.webextension-menuitem {
  --menuitem-icon: var(--webextension-menuitem-image);
}

/* Sidebar animation */

#sidebar-container,
sidebar-main,
#sidebar-box,
#sidebar-splitter,
#tabbrowser-tabbox {
  transform-origin: 0 0;
  /* will-change would cause us to be considered animated unconditionally, see
   * bug 1930674 */
  translate: 0;
}

#sidebar-container {
  /* Prevent overflow during sidebar animation when the sidebar is reordered */
  overflow: clip;

  &[sidebar-ongoing-animations] > sidebar-main::part(overflow-button) {
    display: none;
  }
}

/* Expand on hover */

:root[sidebar-expand-on-hover] {
  #sidebar-container {
    border-radius: inherit;
    background-color: inherit;
    position: relative;
    inset: 0;
    inset-inline-end: unset;

    /* We only want to apply these styles in two scenarios:
      * When the sidebar is expanded AND hovered
      * When the sidebar is in the process of moving from expanded to collapsed
    */
    &[sidebar-launcher-expanded],
    &[sidebar-ongoing-animations]:not([sidebar-launcher-expanded]) {
      z-index: var(--browser-area-z-index-sidebar-expand-on-hover);
      position: absolute;
      color: var(--toolbox-text-color);
      /* With Windows Mica, the toolbox background is not guaranteed to be
       * opaque. Make sure there's some opaque backdrop that matches our color
       * scheme. These colors match the "transparency effects disabled" mica
       * backdrop on Windows 11, which is as good as we can make it. */
      background-image: image(var(--toolbox-background-color));
      background-color: light-dark(#e8e8e8, #202020);

      &:not([sidebar-positionend]) {
        border-inline-end: 0.01px solid var(--sidebar-border-color);
      }

      &[sidebar-positionend] {
        border-inline-start: 0.01px solid var(--sidebar-border-color);
      }
    }

    :root[lwtheme] & {
      border-radius: unset;
      border-inline: unset;
      color: var(--toolbox-text-color);
      background-color: var(--toolbox-background-color);

      &:-moz-window-inactive {
        color: var(--toolbox-text-color-inactive);
        background-color: var(--toolbox-background-color-inactive);
      }
    }

    &[sidebar-positionend] {
      inset-inline-start: unset;
      inset-inline-end: 0;
    }

    @media -moz-pref("browser.nova.enabled") {
      border-radius: var(--chrome-block-radius);
      background-color: var(--toolbar-background-color);
      position: absolute;
      inset-block-end: var(--chrome-window-gap);
      inset-inline-start: var(--chrome-window-gap);

      /* stylelint-disable max-nesting-depth */
      &[sidebar-launcher-expanded],
      &[sidebar-ongoing-animations]:not([sidebar-launcher-expanded]) {
        background-image: none;
        background-color: var(--toolbar-background-color);

        &:not([sidebar-positionend]) {
          border-inline-end: 1px solid var(--chrome-content-separator-color);
        }
        &[sidebar-positionend] {
          border-inline-start: 1px solid var(--chrome-content-separator-color);
        }
      }
      /* stylelint-enable max-nesting-depth */

      &[sidebar-positionend] {
        inset-inline-start: unset;
        inset-inline-end: var(--chrome-window-gap);
      }
    }
  }

  #sidebar-launcher-splitter[sidebar-launcher-expanded] {
    visibility: hidden;
  }

  /* We add margin to compensate for the launcher width to the element next to it.
  The element next to it can be the sidebar box or the tabbox,
  depending on whether the sidebar box is expanded */
  #tabbrowser-tabbox {
    @media not -moz-pref("browser.nova.enabled") {
      &:not([sidebar-positionend]) {
        &:not([sidebar-panel-open]) {
          margin-inline-start: 0;
        }

        &[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]),
        &[sidebar-ongoing-animations]:not([sidebar-launcher-expanded], [sidebar-panel-open]) {
          margin-inline-start: var(--sidebar-launcher-collapsed-width);
        }
      }

      &[sidebar-positionend] {
        &:not([sidebar-panel-open]) {
          margin-inline-end: 0;
        }

        &[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]),
        &[sidebar-ongoing-animations]:not([sidebar-panel-open], [sidebar-launcher-expanded]) {
          margin-inline-end: var(--sidebar-launcher-collapsed-width);
        }
      }
    }

    @media -moz-pref("browser.nova.enabled") {
      &:not([sidebar-positionend], [sidebar-panel-open]) {
        margin-inline-start: calc(var(--sidebar-launcher-collapsed-width) + var(--chrome-window-gap));
      }
      &[sidebar-positionend]:not([sidebar-panel-open]) {
        margin-inline-end: calc(var(--sidebar-launcher-collapsed-width) + var(--chrome-window-gap));
      }
    }
  }

  #sidebar-box {
    @media not -moz-pref("browser.nova.enabled") {
      &:not([sidebar-positionend]) {
        &[sidebar-panel-open] {
          margin-inline-start: 0;
        }

        &[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded],
        &[sidebar-ongoing-animations][sidebar-panel-open] {
          margin-inline-start: var(--sidebar-launcher-collapsed-width);
        }
      }

      &[sidebar-positionend] {
        &[sidebar-panel-open] {
          margin-inline-end: 0;
        }

        &[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded],
        &[sidebar-ongoing-animations][sidebar-panel-open] {
          margin-inline-end: var(--sidebar-launcher-collapsed-width);
        }
      }
    }

    @media -moz-pref("browser.nova.enabled") {
      &:not([sidebar-positionend])[sidebar-panel-open] {
        margin-inline-start: calc(var(--sidebar-launcher-collapsed-width) + var(--chrome-window-gap));
      }
      &[sidebar-positionend][sidebar-panel-open] {
        margin-inline-end: calc(var(--sidebar-launcher-collapsed-width) + var(--chrome-window-gap));
      }
    }
  }
}

@media -moz-pref("sidebar.visibility", "expand-on-hover") {
  /* We need these rules to apply at all times when the sidebar.visibility
    pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
    has been added to root. There are certain scenarios when that attribute is temporarily
    removed from root such as when toggling the sidebar to expand with the toolbar button. */
  #sidebar {
    box-shadow: none;
    margin-block-start: 1px;
    outline-offset: -0.1px;
  }
}

@media -moz-pref("browser.nova.enabled") {
  #sidebar-box {
    background-color: var(--sidebar-background-color);
    color: var(--sidebar-text-color);
    padding-block-end: 0;
  }

  #sidebar {
    border-radius: 0;
    box-shadow: none;
    outline: none;
  }

  /* Center the splitter in a 6px gap between sidebar-box and the content area.
   * The flex gap on #browser is --chrome-window-gap (4px); the negative
   * margin-inline absorbs 3px of that gap on each side, leaving 1px of empty
   * space + 4px splitter + 1px of empty space = 6px total. When the closest
   * split-view panel is selected, the content-side margin is widened to 3px
   * (2px for the panel's outline + 1px clear) — see the :has() rules below. */
  #sidebar-splitter {
    width: var(--chrome-window-gap);
    border-inline: none;
    margin-inline: calc(-1 * var(--chrome-window-gap) + 1px);
  }

  /* When no panel is open, the launcher splitter sits between sidebar-main and
   * the content area. Match the in-gap layout of #sidebar-splitter so the gap
   * between sidebar-main and the content area matches the sidebar-box case. */
  #sidebar-container:not([sidebar-panel-open]) + #sidebar-launcher-splitter {
    margin-inline: calc(-1 * var(--chrome-window-gap) + 1px);
  }

  /* When the closest split-view panel is selected, its outline extends into
   * the splitter's content-side margin. Widen that margin to 3px (2px outline
   * + 1px clear) so the splitter never touches the outline. The "closest"
   * panel is column-0 when the sidebar is on the inline-start side, and
   * column-1 when the sidebar is on the inline-end side. */
  :root:has(#tabbrowser-tabpanels[splitview] .split-view-panel[column="0"].deck-selected) #sidebar-box:not([sidebar-positionend]) + #sidebar-splitter,
  :root:has(#tabbrowser-tabpanels[splitview] .split-view-panel[column="0"].deck-selected)
    #sidebar-container:not([sidebar-panel-open]):not([sidebar-positionend])
    + #sidebar-launcher-splitter {
    margin-inline-end: calc(-1 * var(--chrome-window-gap) + 3px);
  }

  :root:has(#tabbrowser-tabpanels[splitview] .split-view-panel[column="1"].deck-selected) #sidebar-box[sidebar-positionend] + #sidebar-splitter,
  :root:has(#tabbrowser-tabpanels[splitview] .split-view-panel[column="1"].deck-selected)
    #sidebar-container[sidebar-positionend]:not([sidebar-panel-open])
    + #sidebar-launcher-splitter {
    margin-inline-start: calc(-1 * var(--chrome-window-gap) + 3px);
  }

  /* When a panel is open, square the corners where sidebar-main and sidebar-box
   * meet so they read as one continuous surface. */
  #sidebar-container[sidebar-panel-open] {
    &:not([sidebar-positionend]) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    &[sidebar-positionend] {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }

  #sidebar-box[sidebar-panel-open] {
    &:not([sidebar-positionend]) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    &[sidebar-positionend] {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }
}

/* History Menu */
#sidebar-history-clear,
#sidebar-history-sort-by-heading {
  padding: var(--menuitem-padding);
  &::before {
    content: unset;
  }
  > .menu-icon {
    display: none;
  }
}